Hugging Face's logo

Spaces:
julien-c
/
nllb-translation-in-browser
Running

App Files Community
3
julien-c HF staff commited on
Commit
e7a4dc7
•
1 Parent(s): 4398e64

Yay! Cool stuff

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