| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width" /> |
| <title>Translation in browser using nllb-200-distilled-600M</title> |
| <link rel="stylesheet" href="style.css" /> |
| <script type="module"> |
| import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.3.0'; |
| env.allowLocalModels = false; |
| |
| const c = console; |
| |
| const button = document.getElementById("submit"); |
| |
| function progress_callback(x) { |
| if (x.status === "done") { |
| document.getElementById("status").textContent += `\ndone: ${x.file}`; |
| } |
| if (x.status === "ready") { |
| document.getElementById("status").textContent += `\nready 🔥`; |
| button.value = "Translate"; |
| button.disabled = false; |
| } |
| } |
| |
| function nextTick() { |
| return new Promise((resolve) => { |
| window.requestAnimationFrame(() => resolve()); |
| }) |
| } |
| function sleep() { |
| return new Promise((resolve) => { |
| setTimeout(() => resolve(), 30); |
| }) |
| } |
| |
| const translator = await pipeline('translation', 'Xenova/nllb-200-distilled-600M', { progress_callback }); |
| |
| button.addEventListener("click", async () => { |
| button.value = "Computing..."; |
| button.disabled = true; |
| await nextTick(); |
| await sleep(); |
| const src_lang = document.getElementById("src_lang").value; |
| const tgt_lang = document.getElementById("tgt_lang").value; |
| console.log(from.textContent) |
| const to = await translator(from.value, { src_lang, tgt_lang }); |
| c.log(to); |
| await nextTick(); |
| document.getElementById("to").value = to[0].translation_text; |
| button.disabled = false; |
| button.value = "Translate"; |
| }); |
| </script> |
| </head> |
| <body> |
| <div class="card"> |
| <h1>Translate in browser using nllb-200-distilled-600M</h1> |
| <pre id="status">loading...</pre> |
| <textarea id="from">My name is Julien and i like machine learning.</textarea> |
| <br> |
| <br> |
| <select id="src_lang"> |
| <option value="afr_Latn">afr_Latn</option> |
| <option value="als_Latn">als_Latn</option> |
| <option value="arb_Arab">arb_Arab</option> |
| <option value="arz_Arab">arz_Arab</option> |
| <option value="asm_Beng">asm_Beng</option> |
| <option value="ast_Latn">ast_Latn</option> |
| <option value="azj_Latn">azj_Latn</option> |
| <option value="azb_Arab">azb_Arab</option> |
| <option value="bak_Cyrl">bak_Cyrl</option> |
| <option value="bel_Cyrl">bel_Cyrl</option> |
| <option value="bul_Cyrl">bul_Cyrl</option> |
| <option value="ben_Beng">ben_Beng</option> |
| <option value="bod_Tibt">bod_Tibt</option> |
| <option value="bos_Latn">bos_Latn</option> |
| <option value="cat_Latn">cat_Latn</option> |
| <option value="ceb_Latn">ceb_Latn</option> |
| <option value="ckb_Arab">ckb_Arab</option> |
| <option value="ces_Latn">ces_Latn</option> |
| <option value="cym_Latn">cym_Latn</option> |
| <option value="dan_Latn">dan_Latn</option> |
| <option value="deu_Latn">deu_Latn</option> |
| <option value="ell_Grek">ell_Grek</option> |
| <option selected value="eng_Latn">eng_Latn</option> |
| <option value="epo_Latn">epo_Latn</option> |
| <option value="spa_Latn">spa_Latn</option> |
| <option value="est_Latn">est_Latn</option> |
| <option value="eus_Latn">eus_Latn</option> |
| <option value="pes_Arab">pes_Arab</option> |
| <option value="fin_Latn">fin_Latn</option> |
| <option value="fra_Latn">fra_Latn</option> |
| <option value="gle_Latn">gle_Latn</option> |
| <option value="gla_Latn">gla_Latn</option> |
| <option value="glg_Latn">glg_Latn</option> |
| <option value="grn_Latn">grn_Latn</option> |
| <option value="guj_Gujr">guj_Gujr</option> |
| <option value="heb_Hebr">heb_Hebr</option> |
| <option value="hin_Deva">hin_Deva</option> |
| <option value="hrv_Latn">hrv_Latn</option> |
| <option value="hat_Latn">hat_Latn</option> |
| <option value="hun_Latn">hun_Latn</option> |
| <option value="hye_Armn">hye_Armn</option> |
| <option value="ind_Latn">ind_Latn</option> |
| <option value="ilo_Latn">ilo_Latn</option> |
| <option value="isl_Latn">isl_Latn</option> |
| <option value="ita_Latn">ita_Latn</option> |
| <option value="jpn_Jpan">jpn_Jpan</option> |
| <option value="jav_Latn">jav_Latn</option> |
| <option value="kat_Geor">kat_Geor</option> |
| <option value="kaz_Cyrl">kaz_Cyrl</option> |
| <option value="khm_Khmr">khm_Khmr</option> |
| <option value="kan_Knda">kan_Knda</option> |
| <option value="kor_Hang">kor_Hang</option> |
| <option value="ckb_Arab">ckb_Arab</option> |
| <option value="kir_Cyrl">kir_Cyrl</option> |
| <option value="ltz_Latn">ltz_Latn</option> |
| <option value="lim_Latn">lim_Latn</option> |
| <option value="lmo_Latn">lmo_Latn</option> |
| <option value="lao_Laoo">lao_Laoo</option> |
| <option value="lit_Latn">lit_Latn</option> |
| <option value="lvs_Latn">lvs_Latn</option> |
| <option value="mai_Deva">mai_Deva</option> |
| <option value="min_Arab">min_Arab</option> |
| <option value="mkd_Cyrl">mkd_Cyrl</option> |
| <option value="mal_Mlym">mal_Mlym</option> |
| <option value="khk_Cyrl">khk_Cyrl</option> |
| <option value="mar_Deva">mar_Deva</option> |
| <option value="zsm_Latn">zsm_Latn</option> |
| <option value="mlt_Latn">mlt_Latn</option> |
| <option value="mya_Mymr">mya_Mymr</option> |
| <option value="npi_Deva">npi_Deva</option> |
| <option value="nld_Latn">nld_Latn</option> |
| <option value="nno_Latn">nno_Latn</option> |
| <option value="nob_Latn">nob_Latn</option> |
| <option value="oci_Latn">oci_Latn</option> |
| <option value="ory_Orya">ory_Orya</option> |
| <option value="pol_Latn">pol_Latn</option> |
| <option value="por_Latn">por_Latn</option> |
| <option value="ron_Latn">ron_Latn</option> |
| <option value="rus_Cyrl">rus_Cyrl</option> |
| <option value="san_Deva">san_Deva</option> |
| <option value="scn_Latn">scn_Latn</option> |
| <option value="snd_Arab">snd_Arab</option> |
| <option value="sin_Sinh">sin_Sinh</option> |
| <option value="sin_Sinh">sin_Sinh</option> |
| <option value="slk_Latn">slk_Latn</option> |
| <option value="slv_Latn">slv_Latn</option> |
| <option value="som_Latn">som_Latn</option> |
| <option value="srp_Cyrl">srp_Cyrl</option> |
| <option value="sun_Latn">sun_Latn</option> |
| <option value="swe_Latn">swe_Latn</option> |
| <option value="swh_Latn">swh_Latn</option> |
| <option value="tam_Taml">tam_Taml</option> |
| <option value="tel_Telu">tel_Telu</option> |
| <option value="tgk_Cyrl">tgk_Cyrl</option> |
| <option value="tha_Thai">tha_Thai</option> |
| <option value="tuk_Latn">tuk_Latn</option> |
| <option value="tur_Latn">tur_Latn</option> |
| <option value="tat_Cyrl">tat_Cyrl</option> |
| <option value="uig_Arab">uig_Arab</option> |
| <option value="ukr_Cyrl">ukr_Cyrl</option> |
| <option value="urd_Arab">urd_Arab</option> |
| <option value="uzn_Latn">uzn_Latn</option> |
| <option value="vec_Latn">vec_Latn</option> |
| <option value="vie_Latn">vie_Latn</option> |
| <option value="war_Latn">war_Latn</option> |
| <option value="ydd_Hebr">ydd_Hebr</option> |
| <option value="yor_Latn">yor_Latn</option> |
| <option value="yue_Hant">yue_Hant</option> |
| <option value="zho_Hans">zho_Hans</option> |
| </select> |
| |
| <select id="tgt_lang"> |
| <option value="afr_Latn">afr_Latn</option> |
| <option value="als_Latn">als_Latn</option> |
| <option value="arb_Arab">arb_Arab</option> |
| <option value="arz_Arab">arz_Arab</option> |
| <option value="asm_Beng">asm_Beng</option> |
| <option value="ast_Latn">ast_Latn</option> |
| <option value="azj_Latn">azj_Latn</option> |
| <option value="azb_Arab">azb_Arab</option> |
| <option value="bak_Cyrl">bak_Cyrl</option> |
| <option value="bel_Cyrl">bel_Cyrl</option> |
| <option value="bul_Cyrl">bul_Cyrl</option> |
| <option value="ben_Beng">ben_Beng</option> |
| <option value="bod_Tibt">bod_Tibt</option> |
| <option value="bos_Latn">bos_Latn</option> |
| <option value="cat_Latn">cat_Latn</option> |
| <option value="ceb_Latn">ceb_Latn</option> |
| <option value="ckb_Arab">ckb_Arab</option> |
| <option value="ces_Latn">ces_Latn</option> |
| <option value="cym_Latn">cym_Latn</option> |
| <option value="dan_Latn">dan_Latn</option> |
| <option value="deu_Latn">deu_Latn</option> |
| <option value="ell_Grek">ell_Grek</option> |
| <option value="eng_Latn">eng_Latn</option> |
| <option selected value="epo_Latn">epo_Latn</option> |
| <option value="spa_Latn">spa_Latn</option> |
| <option value="est_Latn">est_Latn</option> |
| <option value="eus_Latn">eus_Latn</option> |
| <option value="pes_Arab">pes_Arab</option> |
| <option value="fin_Latn">fin_Latn</option> |
| <option value="fra_Latn">fra_Latn</option> |
| <option value="gle_Latn">gle_Latn</option> |
| <option value="gla_Latn">gla_Latn</option> |
| <option value="glg_Latn">glg_Latn</option> |
| <option value="grn_Latn">grn_Latn</option> |
| <option value="guj_Gujr">guj_Gujr</option> |
| <option value="heb_Hebr">heb_Hebr</option> |
| <option value="hin_Deva">hin_Deva</option> |
| <option value="hrv_Latn">hrv_Latn</option> |
| <option value="hat_Latn">hat_Latn</option> |
| <option value="hun_Latn">hun_Latn</option> |
| <option value="hye_Armn">hye_Armn</option> |
| <option value="ind_Latn">ind_Latn</option> |
| <option value="ilo_Latn">ilo_Latn</option> |
| <option value="isl_Latn">isl_Latn</option> |
| <option value="ita_Latn">ita_Latn</option> |
| <option value="jpn_Jpan">jpn_Jpan</option> |
| <option value="jav_Latn">jav_Latn</option> |
| <option value="kat_Geor">kat_Geor</option> |
| <option value="kaz_Cyrl">kaz_Cyrl</option> |
| <option value="khm_Khmr">khm_Khmr</option> |
| <option value="kan_Knda">kan_Knda</option> |
| <option value="kor_Hang">kor_Hang</option> |
| <option value="ckb_Arab">ckb_Arab</option> |
| <option value="kir_Cyrl">kir_Cyrl</option> |
| <option value="ltz_Latn">ltz_Latn</option> |
| <option value="lim_Latn">lim_Latn</option> |
| <option value="lmo_Latn">lmo_Latn</option> |
| <option value="lao_Laoo">lao_Laoo</option> |
| <option value="lit_Latn">lit_Latn</option> |
| <option value="lvs_Latn">lvs_Latn</option> |
| <option value="mai_Deva">mai_Deva</option> |
| <option value="min_Arab">min_Arab</option> |
| <option value="mkd_Cyrl">mkd_Cyrl</option> |
| <option value="mal_Mlym">mal_Mlym</option> |
| <option value="khk_Cyrl">khk_Cyrl</option> |
| <option value="mar_Deva">mar_Deva</option> |
| <option value="zsm_Latn">zsm_Latn</option> |
| <option value="mlt_Latn">mlt_Latn</option> |
| <option value="mya_Mymr">mya_Mymr</option> |
| <option value="npi_Deva">npi_Deva</option> |
| <option value="nld_Latn">nld_Latn</option> |
| <option value="nno_Latn">nno_Latn</option> |
| <option value="nob_Latn">nob_Latn</option> |
| <option value="oci_Latn">oci_Latn</option> |
| <option value="ory_Orya">ory_Orya</option> |
| <option value="pol_Latn">pol_Latn</option> |
| <option value="por_Latn">por_Latn</option> |
| <option value="ron_Latn">ron_Latn</option> |
| <option value="rus_Cyrl">rus_Cyrl</option> |
| <option value="san_Deva">san_Deva</option> |
| <option value="scn_Latn">scn_Latn</option> |
| <option value="snd_Arab">snd_Arab</option> |
| <option value="sin_Sinh">sin_Sinh</option> |
| <option value="sin_Sinh">sin_Sinh</option> |
| <option value="slk_Latn">slk_Latn</option> |
| <option value="slv_Latn">slv_Latn</option> |
| <option value="som_Latn">som_Latn</option> |
| <option value="srp_Cyrl">srp_Cyrl</option> |
| <option value="sun_Latn">sun_Latn</option> |
| <option value="swe_Latn">swe_Latn</option> |
| <option value="swh_Latn">swh_Latn</option> |
| <option value="tam_Taml">tam_Taml</option> |
| <option value="tel_Telu">tel_Telu</option> |
| <option value="tgk_Cyrl">tgk_Cyrl</option> |
| <option value="tha_Thai">tha_Thai</option> |
| <option value="tuk_Latn">tuk_Latn</option> |
| <option value="tur_Latn">tur_Latn</option> |
| <option value="tat_Cyrl">tat_Cyrl</option> |
| <option value="uig_Arab">uig_Arab</option> |
| <option value="ukr_Cyrl">ukr_Cyrl</option> |
| <option value="urd_Arab">urd_Arab</option> |
| <option value="uzn_Latn">uzn_Latn</option> |
| <option value="vec_Latn">vec_Latn</option> |
| <option value="vie_Latn">vie_Latn</option> |
| <option value="war_Latn">war_Latn</option> |
| <option value="ydd_Hebr">ydd_Hebr</option> |
| <option value="yor_Latn">yor_Latn</option> |
| <option value="yue_Hant">yue_Hant</option> |
| <option value="zho_Hans">zho_Hans</option> |
| </select> |
|
|
| <input type="submit" id="submit" value="Loading..." disabled /> |
| |
| <br> |
| <br> |
| <textarea readonly id="to">Output will be here...</textarea> |
| </div> |
| |
| </body> |
| </html> |
|
|
