NLLB-200-600M / index.html
huggingworld's picture
Update index.html
9d8c6f1 verified
Raw History Blame Contribute Delete
24.1 kB
<!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="/assets/style.css" />
<script type="module">
import { pipeline, env } from '/assets/transformers.min.js';
env.allowLocalModels = false; // Skip check for models hosted locally
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',
'huggingworld/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">
<h2>Translate in browser using 🤗 transformers.js v4 with<a href="https://huggingface.co/facebook/nllb-200-distilled-600M" target="_blank"> NLLB-200_600M</a></h2>
<h1>Download size under 960MB</h1>
<pre id="status">loading...</pre>
<textarea id="from">My name is HuggingWorld and I love machine learning.</textarea>
<br>
<br>
<select id="src_lang">
<option value="ace_Arab">Acehnese (Arabic script)</option>
<option value="ace_Latn">Acehnese (Latin script)</option>
<option value="acm_Arab">Mesopotamian Arabic</option>
<option value="acq_Arab">Ta’izzi-Adeni Arabic</option>
<option value="aeb_Arab">Tunisian Arabic</option>
<option value="afr_Latn">Afrikaans</option>
<option value="ajp_Arab">South Levantine Arabic</option>
<option value="aka_Latn">Akan</option>
<option value="amh_Ethi">Amharic</option>
<option value="apc_Arab">North Levantine Arabic</option>
<option value="arb_Arab">Modern Standard Arabic</option>
<option value="ars_Arab">Najdi Arabic</option>
<option value="ary_Arab">Moroccan Arabic</option>
<option value="arz_Arab">Egyptian Arabic</option>
<option value="asm_Beng">Assamese</option>
<option value="ast_Latn">Asturian</option>
<option value="awa_Deva">Awadhi</option>
<option value="ayr_Latn">Central Aymara</option>
<option value="azb_Arab">South Azerbaijani</option>
<option value="azj_Latn">North Azerbaijani</option>
<option value="bak_Cyrl">Bashkir</option>
<option value="bam_Latn">Bambara</option>
<option value="ban_Latn">Balinese</option>
<option value="bel_Cyrl">Belarusian</option>
<option value="bem_Latn">Bemba</option>
<option value="ben_Beng">Bengali</option>
<option value="bho_Deva">Bhojpuri</option>
<option value="bjn_Arab">Banjar (Arabic script)</option>
<option value="bjn_Latn">Banjar (Latin script)</option>
<option value="bod_Tibt">Standard Tibetan</option>
<option value="bos_Latn">Bosnian</option>
<option value="bug_Latn">Buginese</option>
<option value="bul_Cyrl">Bulgarian</option>
<option value="cat_Latn">Catalan</option>
<option value="ceb_Latn">Cebuano</option>
<option value="ces_Latn">Czech</option>
<option value="cjk_Latn">Chokwe</option>
<option value="ckb_Arab">Central Kurdish</option>
<option value="crh_Latn">Crimean Tatar</option>
<option value="cym_Latn">Welsh</option>
<option value="dan_Latn">Danish</option>
<option value="deu_Latn">German</option>
<option value="dik_Latn">Southwestern Dinka</option>
<option value="dyu_Latn">Dyula</option>
<option value="dzo_Tibt">Dzongkha</option>
<option value="ell_Grek">Greek</option>
<option selected value="eng_Latn">English</option>
<option value="epo_Latn">Esperanto</option>
<option value="est_Latn">Estonian</option>
<option value="eus_Latn">Basque</option>
<option value="ewe_Latn">Ewe</option>
<option value="fao_Latn">Faroese</option>
<option value="fij_Latn">Fijian</option>
<option value="fin_Latn">Finnish</option>
<option value="fon_Latn">Fon</option>
<option value="fra_Latn">French</option>
<option value="fur_Latn">Friulian</option>
<option value="fuv_Latn">Nigerian Fulfulde</option>
<option value="gla_Latn">Scottish Gaelic</option>
<option value="gle_Latn">Irish</option>
<option value="glg_Latn">Galician</option>
<option value="grn_Latn">Guarani</option>
<option value="guj_Gujr">Gujarati</option>
<option value="hat_Latn">Haitian Creole</option>
<option value="hau_Latn">Hausa</option>
<option value="heb_Hebr">Hebrew</option>
<option value="hin_Deva">Hindi</option>
<option value="hne_Deva">Chhattisgarhi</option>
<option value="hrv_Latn">Croatian</option>
<option value="hun_Latn">Hungarian</option>
<option value="hye_Armn">Armenian</option>
<option value="ibo_Latn">Igbo</option>
<option value="ilo_Latn">Ilocano</option>
<option value="ind_Latn">Indonesian</option>
<option value="isl_Latn">Icelandic</option>
<option value="ita_Latn">Italian</option>
<option value="jav_Latn">Javanese</option>
<option value="jpn_Jpan">Japanese</option>
<option value="kab_Latn">Kabyle</option>
<option value="kac_Latn">Jingpho</option>
<option value="kam_Latn">Kamba</option>
<option value="kan_Knda">Kannada</option>
<option value="kas_Arab">Kashmiri (Arabic script)</option>
<option value="kas_Deva">Kashmiri (Devanagari script)</option>
<option value="kat_Geor">Georgian</option>
<option value="knc_Arab">Central Kanuri (Arabic script)</option>
<option value="knc_Latn">Central Kanuri (Latin script)</option>
<option value="kaz_Cyrl">Kazakh</option>
<option value="kbp_Latn">Kabiyè</option>
<option value="kea_Latn">Kabuverdianu</option>
<option value="khm_Khmr">Khmer</option>
<option value="kik_Latn">Kikuyu</option>
<option value="kin_Latn">Kinyarwanda</option>
<option value="kir_Cyrl">Kyrgyz</option>
<option value="kmb_Latn">Kimbundu</option>
<option value="kmr_Latn">Northern Kurdish</option>
<option value="kon_Latn">Kikongo</option>
<option value="kor_Hang">Korean</option>
<option value="lao_Laoo">Lao</option>
<option value="lij_Latn">Ligurian</option>
<option value="lim_Latn">Limburgish</option>
<option value="lin_Latn">Lingala</option>
<option value="lit_Latn">Lithuanian</option>
<option value="lmo_Latn">Lombard</option>
<option value="ltg_Latn">Latgalian</option>
<option value="ltz_Latn">Luxembourgish</option>
<option value="lua_Latn">Luba-Kasai</option>
<option value="lug_Latn">Ganda</option>
<option value="luo_Latn">Luo</option>
<option value="lus_Latn">Mizo</option>
<option value="lvs_Latn">Standard Latvian</option>
<option value="mag_Deva">Magahi</option>
<option value="mai_Deva">Maithili</option>
<option value="mal_Mlym">Malayalam</option>
<option value="mar_Deva">Marathi</option>
<option value="min_Arab">Minangkabau (Arabic script)</option>
<option value="min_Latn">Minangkabau (Latin script)</option>
<option value="mkd_Cyrl">Macedonian</option>
<option value="plt_Latn">Plateau Malagasy</option>
<option value="mlt_Latn">Maltese</option>
<option value="mni_Beng">Meitei (Bengali script)</option>
<option value="khk_Cyrl">Halh Mongolian</option>
<option value="mos_Latn">Mossi</option>
<option value="mri_Latn">Maori</option>
<option value="mya_Mymr">Burmese</option>
<option value="nld_Latn">Dutch</option>
<option value="nno_Latn">Norwegian Nynorsk</option>
<option value="nob_Latn">Norwegian Bokmål</option>
<option value="npi_Deva">Nepali</option>
<option value="nso_Latn">Northern Sotho</option>
<option value="nus_Latn">Nuer</option>
<option value="nya_Latn">Nyanja</option>
<option value="oci_Latn">Occitan</option>
<option value="gaz_Latn">West Central Oromo</option>
<option value="ory_Orya">Odia</option>
<option value="pag_Latn">Pangasinan</option>
<option value="pan_Guru">Eastern Panjabi</option>
<option value="pap_Latn">Papiamento</option>
<option value="pes_Arab">Western Persian</option>
<option value="pol_Latn">Polish</option>
<option value="por_Latn">Portuguese</option>
<option value="prs_Arab">Dari</option>
<option value="pbt_Arab">Southern Pashto</option>
<option value="quy_Latn">Ayacucho Quechua</option>
<option value="ron_Latn">Romanian</option>
<option value="run_Latn">Rundi</option>
<option value="rus_Cyrl">Russian</option>
<option value="sag_Latn">Sango</option>
<option value="san_Deva">Sanskrit</option>
<option value="sat_Olck">Santali</option>
<option value="scn_Latn">Sicilian</option>
<option value="shn_Mymr">Shan</option>
<option value="sin_Sinh">Sinhala</option>
<option value="slk_Latn">Slovak</option>
<option value="slv_Latn">Slovenian</option>
<option value="smo_Latn">Samoan</option>
<option value="sna_Latn">Shona</option>
<option value="snd_Arab">Sindhi</option>
<option value="som_Latn">Somali</option>
<option value="sot_Latn">Southern Sotho</option>
<option value="spa_Latn">Spanish</option>
<option value="als_Latn">Tosk Albanian</option>
<option value="srd_Latn">Sardinian</option>
<option value="srp_Cyrl">Serbian</option>
<option value="ssw_Latn">Swati</option>
<option value="sun_Latn">Sundanese</option>
<option value="swe_Latn">Swedish</option>
<option value="swh_Latn">Swahili</option>
<option value="szl_Latn">Silesian</option>
<option value="tam_Taml">Tamil</option>
<option value="tat_Cyrl">Tatar</option>
<option value="tel_Telu">Telugu</option>
<option value="tgk_Cyrl">Tajik</option>
<option value="tgl_Latn">Tagalog</option>
<option value="tha_Thai">Thai</option>
<option value="tir_Ethi">Tigrinya</option>
<option value="taq_Latn">Tamasheq (Latin script)</option>
<option value="taq_Tfng">Tamasheq (Tifinagh script)</option>
<option value="tpi_Latn">Tok Pisin</option>
<option value="tsn_Latn">Tswana</option>
<option value="tso_Latn">Tsonga</option>
<option value="tuk_Latn">Turkmen</option>
<option value="tum_Latn">Tumbuka</option>
<option value="tur_Latn">Turkish</option>
<option value="twi_Latn">Twi</option>
<option value="tzm_Tfng">Central Atlas Tamazight</option>
<option value="uig_Arab">Uyghur</option>
<option value="ukr_Cyrl">Ukrainian</option>
<option value="umb_Latn">Umbundu</option>
<option value="urd_Arab">Urdu</option>
<option value="uzn_Latn">Northern Uzbek</option>
<option value="vec_Latn">Venetian</option>
<option value="vie_Latn">Vietnamese</option>
<option value="war_Latn">Waray</option>
<option value="wol_Latn">Wolof</option>
<option value="xho_Latn">Xhosa</option>
<option value="ydd_Hebr">Eastern Yiddish</option>
<option value="yor_Latn">Yoruba</option>
<option value="yue_Hant">Yue Chinese</option>
<option value="zho_Hans">Chinese (Simplified)</option>
<option value="zho_Hant">Chinese (Traditional)</option>
<option value="zsm_Latn">Standard Malay</option>
<option value="zul_Latn">Zulu</option>
</select>
<select id="tgt_lang">
<option value="ace_Arab">Acehnese (Arabic script)</option>
<option value="ace_Latn">Acehnese (Latin script)</option>
<option value="acm_Arab">Mesopotamian Arabic</option>
<option value="acq_Arab">Ta’izzi-Adeni Arabic</option>
<option value="aeb_Arab">Tunisian Arabic</option>
<option value="afr_Latn">Afrikaans</option>
<option value="ajp_Arab">South Levantine Arabic</option>
<option value="aka_Latn">Akan</option>
<option value="amh_Ethi">Amharic</option>
<option value="apc_Arab">North Levantine Arabic</option>
<option value="arb_Arab">Modern Standard Arabic</option>
<option value="ars_Arab">Najdi Arabic</option>
<option value="ary_Arab">Moroccan Arabic</option>
<option value="arz_Arab">Egyptian Arabic</option>
<option value="asm_Beng">Assamese</option>
<option value="ast_Latn">Asturian</option>
<option value="awa_Deva">Awadhi</option>
<option value="ayr_Latn">Central Aymara</option>
<option value="azb_Arab">South Azerbaijani</option>
<option value="azj_Latn">North Azerbaijani</option>
<option value="bak_Cyrl">Bashkir</option>
<option value="bam_Latn">Bambara</option>
<option value="ban_Latn">Balinese</option>
<option value="bel_Cyrl">Belarusian</option>
<option value="bem_Latn">Bemba</option>
<option value="ben_Beng">Bengali</option>
<option value="bho_Deva">Bhojpuri</option>
<option value="bjn_Arab">Banjar (Arabic script)</option>
<option value="bjn_Latn">Banjar (Latin script)</option>
<option value="bod_Tibt">Standard Tibetan</option>
<option value="bos_Latn">Bosnian</option>
<option value="bug_Latn">Buginese</option>
<option value="bul_Cyrl">Bulgarian</option>
<option value="cat_Latn">Catalan</option>
<option value="ceb_Latn">Cebuano</option>
<option value="ces_Latn">Czech</option>
<option value="cjk_Latn">Chokwe</option>
<option value="ckb_Arab">Central Kurdish</option>
<option value="crh_Latn">Crimean Tatar</option>
<option value="cym_Latn">Welsh</option>
<option value="dan_Latn">Danish</option>
<option value="deu_Latn">German</option>
<option value="dik_Latn">Southwestern Dinka</option>
<option value="dyu_Latn">Dyula</option>
<option value="dzo_Tibt">Dzongkha</option>
<option value="ell_Grek">Greek</option>
<option value="eng_Latn">English</option>
<option value="epo_Latn">Esperanto</option>
<option value="est_Latn">Estonian</option>
<option value="eus_Latn">Basque</option>
<option value="ewe_Latn">Ewe</option>
<option value="fao_Latn">Faroese</option>
<option value="fij_Latn">Fijian</option>
<option value="fin_Latn">Finnish</option>
<option value="fon_Latn">Fon</option>
<option value="fra_Latn">French</option>
<option value="fur_Latn">Friulian</option>
<option value="fuv_Latn">Nigerian Fulfulde</option>
<option value="gla_Latn">Scottish Gaelic</option>
<option value="gle_Latn">Irish</option>
<option value="glg_Latn">Galician</option>
<option value="grn_Latn">Guarani</option>
<option value="guj_Gujr">Gujarati</option>
<option value="hat_Latn">Haitian Creole</option>
<option value="hau_Latn">Hausa</option>
<option value="heb_Hebr">Hebrew</option>
<option value="hin_Deva">Hindi</option>
<option value="hne_Deva">Chhattisgarhi</option>
<option value="hrv_Latn">Croatian</option>
<option value="hun_Latn">Hungarian</option>
<option value="hye_Armn">Armenian</option>
<option value="ibo_Latn">Igbo</option>
<option value="ilo_Latn">Ilocano</option>
<option value="ind_Latn">Indonesian</option>
<option value="isl_Latn">Icelandic</option>
<option value="ita_Latn">Italian</option>
<option value="jav_Latn">Javanese</option>
<option value="jpn_Jpan">Japanese</option>
<option value="kab_Latn">Kabyle</option>
<option value="kac_Latn">Jingpho</option>
<option value="kam_Latn">Kamba</option>
<option value="kan_Knda">Kannada</option>
<option value="kas_Arab">Kashmiri (Arabic script)</option>
<option value="kas_Deva">Kashmiri (Devanagari script)</option>
<option value="kat_Geor">Georgian</option>
<option value="knc_Arab">Central Kanuri (Arabic script)</option>
<option value="knc_Latn">Central Kanuri (Latin script)</option>
<option value="kaz_Cyrl">Kazakh</option>
<option value="kbp_Latn">Kabiyè</option>
<option value="kea_Latn">Kabuverdianu</option>
<option value="khm_Khmr">Khmer</option>
<option value="kik_Latn">Kikuyu</option>
<option value="kin_Latn">Kinyarwanda</option>
<option value="kir_Cyrl">Kyrgyz</option>
<option value="kmb_Latn">Kimbundu</option>
<option value="kmr_Latn">Northern Kurdish</option>
<option value="kon_Latn">Kikongo</option>
<option value="kor_Hang">Korean</option>
<option value="lao_Laoo">Lao</option>
<option value="lij_Latn">Ligurian</option>
<option value="lim_Latn">Limburgish</option>
<option value="lin_Latn">Lingala</option>
<option value="lit_Latn">Lithuanian</option>
<option value="lmo_Latn">Lombard</option>
<option value="ltg_Latn">Latgalian</option>
<option value="ltz_Latn">Luxembourgish</option>
<option value="lua_Latn">Luba-Kasai</option>
<option value="lug_Latn">Ganda</option>
<option value="luo_Latn">Luo</option>
<option value="lus_Latn">Mizo</option>
<option value="lvs_Latn">Standard Latvian</option>
<option value="mag_Deva">Magahi</option>
<option value="mai_Deva">Maithili</option>
<option value="mal_Mlym">Malayalam</option>
<option value="mar_Deva">Marathi</option>
<option value="min_Arab">Minangkabau (Arabic script)</option>
<option value="min_Latn">Minangkabau (Latin script)</option>
<option value="mkd_Cyrl">Macedonian</option>
<option value="plt_Latn">Plateau Malagasy</option>
<option value="mlt_Latn">Maltese</option>
<option value="mni_Beng">Meitei (Bengali script)</option>
<option value="khk_Cyrl">Halh Mongolian</option>
<option value="mos_Latn">Mossi</option>
<option value="mri_Latn">Maori</option>
<option value="mya_Mymr">Burmese</option>
<option value="nld_Latn">Dutch</option>
<option value="nno_Latn">Norwegian Nynorsk</option>
<option value="nob_Latn">Norwegian Bokmål</option>
<option value="npi_Deva">Nepali</option>
<option value="nso_Latn">Northern Sotho</option>
<option value="nus_Latn">Nuer</option>
<option value="nya_Latn">Nyanja</option>
<option value="oci_Latn">Occitan</option>
<option value="gaz_Latn">West Central Oromo</option>
<option value="ory_Orya">Odia</option>
<option value="pag_Latn">Pangasinan</option>
<option value="pan_Guru">Eastern Panjabi</option>
<option value="pap_Latn">Papiamento</option>
<option value="pes_Arab">Western Persian</option>
<option value="pol_Latn">Polish</option>
<option value="por_Latn">Portuguese</option>
<option value="prs_Arab">Dari</option>
<option value="pbt_Arab">Southern Pashto</option>
<option value="quy_Latn">Ayacucho Quechua</option>
<option value="ron_Latn">Romanian</option>
<option value="run_Latn">Rundi</option>
<option value="rus_Cyrl">Russian</option>
<option value="sag_Latn">Sango</option>
<option value="san_Deva">Sanskrit</option>
<option value="sat_Olck">Santali</option>
<option value="scn_Latn">Sicilian</option>
<option value="shn_Mymr">Shan</option>
<option value="sin_Sinh">Sinhala</option>
<option value="slk_Latn">Slovak</option>
<option value="slv_Latn">Slovenian</option>
<option value="smo_Latn">Samoan</option>
<option value="sna_Latn">Shona</option>
<option value="snd_Arab">Sindhi</option>
<option value="som_Latn">Somali</option>
<option value="sot_Latn">Southern Sotho</option>
<option selected value="spa_Latn">Spanish</option>
<option value="als_Latn">Tosk Albanian</option>
<option value="srd_Latn">Sardinian</option>
<option value="srp_Cyrl">Serbian</option>
<option value="ssw_Latn">Swati</option>
<option value="sun_Latn">Sundanese</option>
<option value="swe_Latn">Swedish</option>
<option value="swh_Latn">Swahili</option>
<option value="szl_Latn">Silesian</option>
<option value="tam_Taml">Tamil</option>
<option value="tat_Cyrl">Tatar</option>
<option value="tel_Telu">Telugu</option>
<option value="tgk_Cyrl">Tajik</option>
<option value="tgl_Latn">Tagalog</option>
<option value="tha_Thai">Thai</option>
<option value="tir_Ethi">Tigrinya</option>
<option value="taq_Latn">Tamasheq (Latin script)</option>
<option value="taq_Tfng">Tamasheq (Tifinagh script)</option>
<option value="tpi_Latn">Tok Pisin</option>
<option value="tsn_Latn">Tswana</option>
<option value="tso_Latn">Tsonga</option>
<option value="tuk_Latn">Turkmen</option>
<option value="tum_Latn">Tumbuka</option>
<option value="tur_Latn">Turkish</option>
<option value="twi_Latn">Twi</option>
<option value="tzm_Tfng">Central Atlas Tamazight</option>
<option value="uig_Arab">Uyghur</option>
<option value="ukr_Cyrl">Ukrainian</option>
<option value="umb_Latn">Umbundu</option>
<option value="urd_Arab">Urdu</option>
<option value="uzn_Latn">Northern Uzbek</option>
<option value="vec_Latn">Venetian</option>
<option value="vie_Latn">Vietnamese</option>
<option value="war_Latn">Waray</option>
<option value="wol_Latn">Wolof</option>
<option value="xho_Latn">Xhosa</option>
<option value="ydd_Hebr">Eastern Yiddish</option>
<option value="yor_Latn">Yoruba</option>
<option value="yue_Hant">Yue Chinese</option>
<option value="zho_Hans">Chinese (Simplified)</option>
<option value="zho_Hant">Chinese (Traditional)</option>
<option value="zsm_Latn">Standard Malay</option>
<option value="zul_Latn">Zulu</option>
</select>
<input type="submit" id="submit" value="Loading..." disabled />
<br>
<br>
<textarea readonly id="to">Output will be here...</textarea>
</div>
</body>
</html>