Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>Translation in browser using m2m100-418M</title> | |
| <link rel="stylesheet" href="/assets/style.css" /> | |
| <script type="module"> | |
| import { pipeline, env } from '/assets/transformers.min.js'; | |
| 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/m2m100_418M', | |
| { | |
| 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/m2m100_418M" target="_blank"> m2m100_418M</a></h2> | |
| <h1>Download Size under 700MB</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="af">Afrikaans</option> | |
| <option value="am">Amharic</option> | |
| <option value="ar">Arabic</option> | |
| <option value="ast">Asturian</option> | |
| <option value="az">Azerbaijani</option> | |
| <option value="ba">Bashkir</option> | |
| <option value="be">Belarusian</option> | |
| <option value="bg">Bulgarian</option> | |
| <option value="bn">Bengali</option> | |
| <option value="br">Breton</option> | |
| <option value="bs">Bosnian</option> | |
| <option value="ca">Catalan - Valencian</option> | |
| <option value="ceb">Cebuano</option> | |
| <option value="cs">Czech</option> | |
| <option value="cy">Welsh</option> | |
| <option value="da">Danish</option> | |
| <option value="de">German</option> | |
| <option value="el">Greek</option> | |
| <option selected value="en">English</option> | |
| <option value="es">Spanish</option> | |
| <option value="et">Estonian</option> | |
| <option value="fa">Persian</option> | |
| <option value="ff">Fulah</option> | |
| <option value="fi">Finnish</option> | |
| <option value="fr">French</option> | |
| <option value="fy">Western Frisian</option> | |
| <option value="ga">Irish</option> | |
| <option value="gd">Gaelic - Scottish Gaelic</option> | |
| <option value="gl">Galician</option> | |
| <option value="gu">Gujarati</option> | |
| <option value="ha">Hausa</option> | |
| <option value="he">Hebrew</option> | |
| <option value="hi">Hindi</option> | |
| <option value="hr">Croatian</option> | |
| <option value="ht">Haitian - Haitian Creole</option> | |
| <option value="hu">Hungarian</option> | |
| <option value="hy">Armenian</option> | |
| <option value="id">Indonesian</option> | |
| <option value="ig">Igbo</option> | |
| <option value="ilo">Iloko</option> | |
| <option value="is">Icelandic</option> | |
| <option value="it">Italian</option> | |
| <option value="ja">Japanese</option> | |
| <option value="jv">Javanese</option> | |
| <option value="ka">Georgian</option> | |
| <option value="kk">Kazakh</option> | |
| <option value="km">Central Khmer</option> | |
| <option value="kn">Kannada</option> | |
| <option value="ko">Korean</option> | |
| <option value="lb">Luxembourgish - Letzeburgesch</option> | |
| <option value="lg">Ganda</option> | |
| <option value="ln">Lingala</option> | |
| <option value="lo">Lao</option> | |
| <option value="lt">Lithuanian</option> | |
| <option value="lv">Latvian</option> | |
| <option value="mg">Malagasy</option> | |
| <option value="mk">Macedonian</option> | |
| <option value="ml">Malayalam</option> | |
| <option value="mn">Mongolian</option> | |
| <option value="mr">Marathi</option> | |
| <option value="ms">Malay</option> | |
| <option value="my">Burmese</option> | |
| <option value="ne">Nepali</option> | |
| <option value="nl">Dutch - Flemish</option> | |
| <option value="no">Norwegian</option> | |
| <option value="ns">Northern Sotho</option> | |
| <option value="oc">Occitan</option> | |
| <option value="or">Oriya</option> | |
| <option value="pa">Panjabi - Punjabi</option> | |
| <option value="pl">Polish</option> | |
| <option value="ps">Pushto - Pashto</option> | |
| <option value="pt">Portuguese</option> | |
| <option value="ro">Romanian - Moldavian - Moldovan</option> | |
| <option value="ru">Russian</option> | |
| <option value="sd">Sindhi</option> | |
| <option value="si">Sinhala - Sinhalese</option> | |
| <option value="sk">Slovak</option> | |
| <option value="sl">Slovenian</option> | |
| <option value="so">Somali</option> | |
| <option value="sq">Albanian</option> | |
| <option value="sr">Serbian</option> | |
| <option value="ss">Swati</option> | |
| <option value="su">Sundanese</option> | |
| <option value="sv">Swedish</option> | |
| <option value="sw">Swahili</option> | |
| <option value="ta">Tamil</option> | |
| <option value="th">Thai</option> | |
| <option value="tl">Tagalog</option> | |
| <option value="tn">Tswana</option> | |
| <option value="tr">Turkish</option> | |
| <option value="uk">Ukrainian</option> | |
| <option value="ur">Urdu</option> | |
| <option value="uz">Uzbek</option> | |
| <option value="vi">Vietnamese</option> | |
| <option value="wo">Wolof</option> | |
| <option value="xh">Xhosa</option> | |
| <option value="yi">Yiddish</option> | |
| <option value="yo">Yoruba</option> | |
| <option value="zh">Chinese</option> | |
| <option value="zu">Zulu</option> | |
| </select> | |
| <select id="tgt_lang"> | |
| <option value="af">Afrikaans</option> | |
| <option value="am">Amharic</option> | |
| <option value="ar">Arabic</option> | |
| <option value="ast">Asturian</option> | |
| <option value="az">Azerbaijani</option> | |
| <option value="ba">Bashkir</option> | |
| <option value="be">Belarusian</option> | |
| <option value="bg">Bulgarian</option> | |
| <option value="bn">Bengali</option> | |
| <option value="br">Breton</option> | |
| <option value="bs">Bosnian</option> | |
| <option value="ca">Catalan - Valencian</option> | |
| <option value="ceb">Cebuano</option> | |
| <option value="cs">Czech</option> | |
| <option value="cy">Welsh</option> | |
| <option value="da">Danish</option> | |
| <option value="de">German</option> | |
| <option value="el">Greek</option> | |
| <option value="en">English</option> | |
| <option selected value="es">Spanish</option> | |
| <option value="et">Estonian</option> | |
| <option value="fa">Persian</option> | |
| <option value="ff">Fulah</option> | |
| <option value="fi">Finnish</option> | |
| <option value="fr">French</option> | |
| <option value="fy">Western Frisian</option> | |
| <option value="ga">Irish</option> | |
| <option value="gd">Gaelic - Scottish Gaelic</option> | |
| <option value="gl">Galician</option> | |
| <option value="gu">Gujarati</option> | |
| <option value="ha">Hausa</option> | |
| <option value="he">Hebrew</option> | |
| <option value="hi">Hindi</option> | |
| <option value="hr">Croatian</option> | |
| <option value="ht">Haitian - Haitian Creole</option> | |
| <option value="hu">Hungarian</option> | |
| <option value="hy">Armenian</option> | |
| <option value="id">Indonesian</option> | |
| <option value="ig">Igbo</option> | |
| <option value="ilo">Iloko</option> | |
| <option value="is">Icelandic</option> | |
| <option value="it">Italian</option> | |
| <option value="ja">Japanese</option> | |
| <option value="jv">Javanese</option> | |
| <option value="ka">Georgian</option> | |
| <option value="kk">Kazakh</option> | |
| <option value="km">Central Khmer</option> | |
| <option value="kn">Kannada</option> | |
| <option value="ko">Korean</option> | |
| <option value="lb">Luxembourgish - Letzeburgesch</option> | |
| <option value="lg">Ganda</option> | |
| <option value="ln">Lingala</option> | |
| <option value="lo">Lao</option> | |
| <option value="lt">Lithuanian</option> | |
| <option value="lv">Latvian</option> | |
| <option value="mg">Malagasy</option> | |
| <option value="mk">Macedonian</option> | |
| <option value="ml">Malayalam</option> | |
| <option value="mn">Mongolian</option> | |
| <option value="mr">Marathi</option> | |
| <option value="ms">Malay</option> | |
| <option value="my">Burmese</option> | |
| <option value="ne">Nepali</option> | |
| <option value="nl">Dutch - Flemish</option> | |
| <option value="no">Norwegian</option> | |
| <option value="ns">Northern Sotho</option> | |
| <option value="oc">Occitan</option> | |
| <option value="or">Oriya</option> | |
| <option value="pa">Panjabi - Punjabi</option> | |
| <option value="pl">Polish</option> | |
| <option value="ps">Pushto - Pashto</option> | |
| <option value="pt">Portuguese</option> | |
| <option value="ro">Romanian - Moldavian - Moldovan</option> | |
| <option value="ru">Russian</option> | |
| <option value="sd">Sindhi</option> | |
| <option value="si">Sinhala - Sinhalese</option> | |
| <option value="sk">Slovak</option> | |
| <option value="sl">Slovenian</option> | |
| <option value="so">Somali</option> | |
| <option value="sq">Albanian</option> | |
| <option value="sr">Serbian</option> | |
| <option value="ss">Swati</option> | |
| <option value="su">Sundanese</option> | |
| <option value="sv">Swedish</option> | |
| <option value="sw">Swahili</option> | |
| <option value="ta">Tamil</option> | |
| <option value="th">Thai</option> | |
| <option value="tl">Tagalog</option> | |
| <option value="tn">Tswana</option> | |
| <option value="tr">Turkish</option> | |
| <option value="uk">Ukrainian</option> | |
| <option value="ur">Urdu</option> | |
| <option value="uz">Uzbek</option> | |
| <option value="vi">Vietnamese</option> | |
| <option value="wo">Wolof</option> | |
| <option value="xh">Xhosa</option> | |
| <option value="yi">Yiddish</option> | |
| <option value="yo">Yoruba</option> | |
| <option value="zh">Chinese</option> | |
| <option value="zu">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> | |