|
<!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/[email protected]'; |
|
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 from = document.getElementById("from").value; |
|
const src_lang = document.getElementById("src_lang").value; |
|
const tgt_lang = document.getElementById("tgt_lang").value; |
|
const to = await translator(from, { 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> |
