Files changed (1) hide show
  1. index.html +0 -296
index.html DELETED
@@ -1,296 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>Translation in browser using nllb-200-distilled-600M</title>
7
- <link rel="stylesheet" href="style.css" />
8
- <script type="module">
9
- import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
10
- env.allowLocalModels = false; // Skip check for models hosted locally
11
-
12
- const c = console;
13
-
14
- const button = document.getElementById("submit");
15
-
16
- function progress_callback(x) {
17
- if (x.status === "done") {
18
- document.getElementById("status").textContent += `\ndone: ${x.file}`;
19
- }
20
- if (x.status === "ready") {
21
- document.getElementById("status").textContent += `\nready πŸ”₯`;
22
- button.value = "Translate";
23
- button.disabled = false;
24
- }
25
- }
26
-
27
- function nextTick() {
28
- return new Promise((resolve) => {
29
- window.requestAnimationFrame(() => resolve());
30
- })
31
- }
32
- function sleep() {
33
- return new Promise((resolve) => {
34
- setTimeout(() => resolve(), 30);
35
- })
36
- }
37
-
38
- const translator = await pipeline('translation', 'Xenova/nllb-200-distilled-600M', { progress_callback });
39
-
40
- button.addEventListener("click", async () => {
41
- button.value = "Computing...";
42
- button.disabled = true;
43
- await nextTick();
44
- await sleep();
45
- const from = document.getElementById("from").value;
46
- const src_lang = document.getElementById("src_lang").value;
47
- const tgt_lang = document.getElementById("tgt_lang").value;
48
- const to = await translator(from, { src_lang, tgt_lang });
49
- c.log(to);
50
- await nextTick();
51
- document.getElementById("to").value = to[0].translation_text;
52
- button.disabled = false;
53
- button.value = "Translate";
54
- });
55
- </script>
56
- </head>
57
- <body>
58
- <div class="card">
59
- <h1>Translate in browser using nllb-200-distilled-600M</h1>
60
- <pre id="status">loading...</pre>
61
- <textarea id="from">My name is Julien and i like machine learning.</textarea>
62
- <br>
63
- <br>
64
- <select id="src_lang">
65
- <option value="afr_Latn">afr_Latn</option>
66
- <option value="als_Latn">als_Latn</option>
67
- <option value="arb_Arab">arb_Arab</option>
68
- <option value="arz_Arab">arz_Arab</option>
69
- <option value="asm_Beng">asm_Beng</option>
70
- <option value="ast_Latn">ast_Latn</option>
71
- <option value="azj_Latn">azj_Latn</option>
72
- <option value="azb_Arab">azb_Arab</option>
73
- <option value="bak_Cyrl">bak_Cyrl</option>
74
- <option value="bel_Cyrl">bel_Cyrl</option>
75
- <option value="bul_Cyrl">bul_Cyrl</option>
76
- <option value="ben_Beng">ben_Beng</option>
77
- <option value="bod_Tibt">bod_Tibt</option>
78
- <option value="bos_Latn">bos_Latn</option>
79
- <option value="cat_Latn">cat_Latn</option>
80
- <option value="ceb_Latn">ceb_Latn</option>
81
- <option value="ckb_Arab">ckb_Arab</option>
82
- <option value="ces_Latn">ces_Latn</option>
83
- <option value="cym_Latn">cym_Latn</option>
84
- <option value="dan_Latn">dan_Latn</option>
85
- <option value="deu_Latn">deu_Latn</option>
86
- <option value="ell_Grek">ell_Grek</option>
87
- <option selected value="eng_Latn">eng_Latn</option>
88
- <option value="epo_Latn">epo_Latn</option>
89
- <option value="spa_Latn">spa_Latn</option>
90
- <option value="est_Latn">est_Latn</option>
91
- <option value="eus_Latn">eus_Latn</option>
92
- <option value="pes_Arab">pes_Arab</option>
93
- <option value="fin_Latn">fin_Latn</option>
94
- <option value="fra_Latn">fra_Latn</option>
95
- <option value="gle_Latn">gle_Latn</option>
96
- <option value="gla_Latn">gla_Latn</option>
97
- <option value="glg_Latn">glg_Latn</option>
98
- <option value="grn_Latn">grn_Latn</option>
99
- <option value="guj_Gujr">guj_Gujr</option>
100
- <option value="heb_Hebr">heb_Hebr</option>
101
- <option value="hin_Deva">hin_Deva</option>
102
- <option value="hrv_Latn">hrv_Latn</option>
103
- <option value="hat_Latn">hat_Latn</option>
104
- <option value="hun_Latn">hun_Latn</option>
105
- <option value="hye_Armn">hye_Armn</option>
106
- <option value="ind_Latn">ind_Latn</option>
107
- <option value="ilo_Latn">ilo_Latn</option>
108
- <option value="isl_Latn">isl_Latn</option>
109
- <option value="ita_Latn">ita_Latn</option>
110
- <option value="jpn_Jpan">jpn_Jpan</option>
111
- <option value="jav_Latn">jav_Latn</option>
112
- <option value="kat_Geor">kat_Geor</option>
113
- <option value="kaz_Cyrl">kaz_Cyrl</option>
114
- <option value="khm_Khmr">khm_Khmr</option>
115
- <option value="kan_Knda">kan_Knda</option>
116
- <option value="kor_Hang">kor_Hang</option>
117
- <option value="ckb_Arab">ckb_Arab</option>
118
- <option value="kir_Cyrl">kir_Cyrl</option>
119
- <option value="ltz_Latn">ltz_Latn</option>
120
- <option value="lim_Latn">lim_Latn</option>
121
- <option value="lmo_Latn">lmo_Latn</option>
122
- <option value="lao_Laoo">lao_Laoo</option>
123
- <option value="lit_Latn">lit_Latn</option>
124
- <option value="lvs_Latn">lvs_Latn</option>
125
- <option value="mai_Deva">mai_Deva</option>
126
- <option value="min_Arab">min_Arab</option>
127
- <option value="mkd_Cyrl">mkd_Cyrl</option>
128
- <option value="mal_Mlym">mal_Mlym</option>
129
- <option value="khk_Cyrl">khk_Cyrl</option>
130
- <option value="mar_Deva">mar_Deva</option>
131
- <option value="zsm_Latn">zsm_Latn</option>
132
- <option value="mlt_Latn">mlt_Latn</option>
133
- <option value="mya_Mymr">mya_Mymr</option>
134
- <option value="npi_Deva">npi_Deva</option>
135
- <option value="nld_Latn">nld_Latn</option>
136
- <option value="nno_Latn">nno_Latn</option>
137
- <option value="nob_Latn">nob_Latn</option>
138
- <option value="oci_Latn">oci_Latn</option>
139
- <option value="ory_Orya">ory_Orya</option>
140
- <option value="pol_Latn">pol_Latn</option>
141
- <option value="por_Latn">por_Latn</option>
142
- <option value="ron_Latn">ron_Latn</option>
143
- <option value="rus_Cyrl">rus_Cyrl</option>
144
- <option value="san_Deva">san_Deva</option>
145
- <option value="scn_Latn">scn_Latn</option>
146
- <option value="snd_Arab">snd_Arab</option>
147
- <option value="sin_Sinh">sin_Sinh</option>
148
- <option value="sin_Sinh">sin_Sinh</option>
149
- <option value="slk_Latn">slk_Latn</option>
150
- <option value="slv_Latn">slv_Latn</option>
151
- <option value="som_Latn">som_Latn</option>
152
- <option value="srp_Cyrl">srp_Cyrl</option>
153
- <option value="sun_Latn">sun_Latn</option>
154
- <option value="swe_Latn">swe_Latn</option>
155
- <option value="swh_Latn">swh_Latn</option>
156
- <option value="tam_Taml">tam_Taml</option>
157
- <option value="tel_Telu">tel_Telu</option>
158
- <option value="tgk_Cyrl">tgk_Cyrl</option>
159
- <option value="tha_Thai">tha_Thai</option>
160
- <option value="tuk_Latn">tuk_Latn</option>
161
- <option value="tur_Latn">tur_Latn</option>
162
- <option value="tat_Cyrl">tat_Cyrl</option>
163
- <option value="uig_Arab">uig_Arab</option>
164
- <option value="ukr_Cyrl">ukr_Cyrl</option>
165
- <option value="urd_Arab">urd_Arab</option>
166
- <option value="uzn_Latn">uzn_Latn</option>
167
- <option value="vec_Latn">vec_Latn</option>
168
- <option value="vie_Latn">vie_Latn</option>
169
- <option value="war_Latn">war_Latn</option>
170
- <option value="ydd_Hebr">ydd_Hebr</option>
171
- <option value="yor_Latn">yor_Latn</option>
172
- <option value="yue_Hant">yue_Hant</option>
173
- <option value="zho_Hans">zho_Hans</option>
174
- </select>
175
-
176
- <select id="tgt_lang">
177
- <option value="afr_Latn">afr_Latn</option>
178
- <option value="als_Latn">als_Latn</option>
179
- <option value="arb_Arab">arb_Arab</option>
180
- <option value="arz_Arab">arz_Arab</option>
181
- <option value="asm_Beng">asm_Beng</option>
182
- <option value="ast_Latn">ast_Latn</option>
183
- <option value="azj_Latn">azj_Latn</option>
184
- <option value="azb_Arab">azb_Arab</option>
185
- <option value="bak_Cyrl">bak_Cyrl</option>
186
- <option value="bel_Cyrl">bel_Cyrl</option>
187
- <option value="bul_Cyrl">bul_Cyrl</option>
188
- <option value="ben_Beng">ben_Beng</option>
189
- <option value="bod_Tibt">bod_Tibt</option>
190
- <option value="bos_Latn">bos_Latn</option>
191
- <option value="cat_Latn">cat_Latn</option>
192
- <option value="ceb_Latn">ceb_Latn</option>
193
- <option value="ckb_Arab">ckb_Arab</option>
194
- <option value="ces_Latn">ces_Latn</option>
195
- <option value="cym_Latn">cym_Latn</option>
196
- <option value="dan_Latn">dan_Latn</option>
197
- <option value="deu_Latn">deu_Latn</option>
198
- <option value="ell_Grek">ell_Grek</option>
199
- <option value="eng_Latn">eng_Latn</option>
200
- <option selected value="epo_Latn">epo_Latn</option>
201
- <option value="spa_Latn">spa_Latn</option>
202
- <option value="est_Latn">est_Latn</option>
203
- <option value="eus_Latn">eus_Latn</option>
204
- <option value="pes_Arab">pes_Arab</option>
205
- <option value="fin_Latn">fin_Latn</option>
206
- <option value="fra_Latn">fra_Latn</option>
207
- <option value="gle_Latn">gle_Latn</option>
208
- <option value="gla_Latn">gla_Latn</option>
209
- <option value="glg_Latn">glg_Latn</option>
210
- <option value="grn_Latn">grn_Latn</option>
211
- <option value="guj_Gujr">guj_Gujr</option>
212
- <option value="heb_Hebr">heb_Hebr</option>
213
- <option value="hin_Deva">hin_Deva</option>
214
- <option value="hrv_Latn">hrv_Latn</option>
215
- <option value="hat_Latn">hat_Latn</option>
216
- <option value="hun_Latn">hun_Latn</option>
217
- <option value="hye_Armn">hye_Armn</option>
218
- <option value="ind_Latn">ind_Latn</option>
219
- <option value="ilo_Latn">ilo_Latn</option>
220
- <option value="isl_Latn">isl_Latn</option>
221
- <option value="ita_Latn">ita_Latn</option>
222
- <option value="jpn_Jpan">jpn_Jpan</option>
223
- <option value="jav_Latn">jav_Latn</option>
224
- <option value="kat_Geor">kat_Geor</option>
225
- <option value="kaz_Cyrl">kaz_Cyrl</option>
226
- <option value="khm_Khmr">khm_Khmr</option>
227
- <option value="kan_Knda">kan_Knda</option>
228
- <option value="kor_Hang">kor_Hang</option>
229
- <option value="ckb_Arab">ckb_Arab</option>
230
- <option value="kir_Cyrl">kir_Cyrl</option>
231
- <option value="ltz_Latn">ltz_Latn</option>
232
- <option value="lim_Latn">lim_Latn</option>
233
- <option value="lmo_Latn">lmo_Latn</option>
234
- <option value="lao_Laoo">lao_Laoo</option>
235
- <option value="lit_Latn">lit_Latn</option>
236
- <option value="lvs_Latn">lvs_Latn</option>
237
- <option value="mai_Deva">mai_Deva</option>
238
- <option value="min_Arab">min_Arab</option>
239
- <option value="mkd_Cyrl">mkd_Cyrl</option>
240
- <option value="mal_Mlym">mal_Mlym</option>
241
- <option value="khk_Cyrl">khk_Cyrl</option>
242
- <option value="mar_Deva">mar_Deva</option>
243
- <option value="zsm_Latn">zsm_Latn</option>
244
- <option value="mlt_Latn">mlt_Latn</option>
245
- <option value="mya_Mymr">mya_Mymr</option>
246
- <option value="npi_Deva">npi_Deva</option>
247
- <option value="nld_Latn">nld_Latn</option>
248
- <option value="nno_Latn">nno_Latn</option>
249
- <option value="nob_Latn">nob_Latn</option>
250
- <option value="oci_Latn">oci_Latn</option>
251
- <option value="ory_Orya">ory_Orya</option>
252
- <option value="pol_Latn">pol_Latn</option>
253
- <option value="por_Latn">por_Latn</option>
254
- <option value="ron_Latn">ron_Latn</option>
255
- <option value="rus_Cyrl">rus_Cyrl</option>
256
- <option value="san_Deva">san_Deva</option>
257
- <option value="scn_Latn">scn_Latn</option>
258
- <option value="snd_Arab">snd_Arab</option>
259
- <option value="sin_Sinh">sin_Sinh</option>
260
- <option value="sin_Sinh">sin_Sinh</option>
261
- <option value="slk_Latn">slk_Latn</option>
262
- <option value="slv_Latn">slv_Latn</option>
263
- <option value="som_Latn">som_Latn</option>
264
- <option value="srp_Cyrl">srp_Cyrl</option>
265
- <option value="sun_Latn">sun_Latn</option>
266
- <option value="swe_Latn">swe_Latn</option>
267
- <option value="swh_Latn">swh_Latn</option>
268
- <option value="tam_Taml">tam_Taml</option>
269
- <option value="tel_Telu">tel_Telu</option>
270
- <option value="tgk_Cyrl">tgk_Cyrl</option>
271
- <option value="tha_Thai">tha_Thai</option>
272
- <option value="tuk_Latn">tuk_Latn</option>
273
- <option value="tur_Latn">tur_Latn</option>
274
- <option value="tat_Cyrl">tat_Cyrl</option>
275
- <option value="uig_Arab">uig_Arab</option>
276
- <option value="ukr_Cyrl">ukr_Cyrl</option>
277
- <option value="urd_Arab">urd_Arab</option>
278
- <option value="uzn_Latn">uzn_Latn</option>
279
- <option value="vec_Latn">vec_Latn</option>
280
- <option value="vie_Latn">vie_Latn</option>
281
- <option value="war_Latn">war_Latn</option>
282
- <option value="ydd_Hebr">ydd_Hebr</option>
283
- <option value="yor_Latn">yor_Latn</option>
284
- <option value="yue_Hant">yue_Hant</option>
285
- <option value="zho_Hans">zho_Hans</option>
286
- </select>
287
-
288
- <input type="submit" id="submit" value="Loading..." disabled />
289
-
290
- <br>
291
- <br>
292
- <textarea readonly id="to">Output will be here...</textarea>
293
- </div>
294
-
295
- </body>
296
- </html>