| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> |
| <title>Simple Browser Translator — NLLB</title> |
| <style> |
| :root{ |
| --bg:#0b1220; --bg2:#0f1628; --panel:#121a2b; --border:#223050; |
| --text:#e8eefc; --muted:#8ea2c7; --accent:#6ba5ff; --accent2:#2d7dff; |
| --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35); |
| } |
| *{box-sizing:border-box} |
| html,body{height:100%} |
| body{ |
| margin:0; |
| background:linear-gradient(180deg,#0b1220 0%, #0b1220 40%, #0f1525 100%); |
| color:var(--text); |
| font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji; |
| } |
| .wrap{max-width:1100px;margin:28px auto 72px;padding:0 16px} |
| |
| header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} |
| h1{margin:0;font-size:28px;font-weight:800;letter-spacing:.2px} |
| h1 .brand{color:var(--accent)} |
| #backend-pill{ |
| padding:6px 10px; border:1px solid var(--border); border-radius:999px; |
| background:#0e1628; color:var(--muted); font-size:12px |
| } |
| |
| .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} |
| @media (max-width:860px){ .grid-2{grid-template-columns:1fr} } |
| .card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px} |
| .card h3{margin:0 0 8px;font-size:14px;font-weight:700;color:#b9c6e4} |
| |
| select,textarea,button{ |
| width:100%;border-radius:12px;border:1px solid var(--border);outline:none; |
| background:#0e1628;color:var(--text) |
| } |
| select{padding:12px;font-size:14px;font-weight:600} |
| textarea{ |
| min-height:180px;padding:14px 16px; |
| font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace |
| } |
| |
| .translate-row{display:flex;align-items:center;gap:12px;margin-top:10px} |
| #go{ |
| flex:1;padding:12px 18px;font-weight:800;border-radius:999px;cursor:pointer; |
| background:linear-gradient(90deg,var(--accent) 0%,var(--accent2) 100%); |
| border:none;color:white;box-shadow:var(--shadow) |
| } |
| .meta{font-size:12px;color:var(--muted);white-space:nowrap} |
| |
| .status{margin-top:8px;font-size:12px;color:var(--muted)} |
| .output{ |
| min-height:180px;padding:14px 16px;white-space:pre-wrap;overflow:auto; |
| border:1px solid var(--border);background:#0e1628;border-radius:12px |
| } |
| footer{margin-top:8px;font-size:12px;color:var(--muted)} |
| </style> |
| </head> |
| <body> |
| <div class="wrap"> |
| <header> |
| <h1>Simple Browser Translator — <span class="brand">NLLB</span></h1> |
| <span id="backend-pill">backend: …</span> |
| </header> |
|
|
| |
| <div class="grid-2"> |
| <div class="card"> |
| <h3>Source language</h3> |
| <select id="src"></select> |
| </div> |
| <div class="card"> |
| <h3>Target language</h3> |
| <select id="tgt"></select> |
| </div> |
| </div> |
|
|
| |
| <div class="card" style="margin-top:16px"> |
| <h3>Input text</h3> |
| <textarea id="inp" placeholder="Type or paste text here…">Hello world, this is a test.</textarea> |
|
|
| <div class="translate-row"> |
| <button id="go">Translate</button> |
| <span class="meta">Model: <code>Xenova/nllb-200-distilled-600M</code></span> |
| </div> |
|
|
| <div class="status" id="status">Ready.</div> |
| </div> |
|
|
| |
| <div class="card" style="margin-top:16px"> |
| <h3>Output</h3> |
| <div class="output" id="out">—</div> |
| <footer>Arabic/Urdu outputs render RTL automatically.</footer> |
| </div> |
| </div> |
|
|
| |
| <script type="module"> |
| import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2"; |
| |
| let chosenBackend='auto'; |
| try{ |
| if('gpu' in navigator && navigator.gpu){env.backends.onnx='webgpu';chosenBackend='webgpu';} |
| else{env.backends.onnx='wasm';chosenBackend='wasm';} |
| }catch(_){env.backends.onnx='wasm';chosenBackend='wasm';} |
| document.getElementById('backend-pill').textContent=`backend: ${chosenBackend}`; |
| |
| const LANGS=[ |
| ["English (eng_Latn)","eng_Latn"], |
| ["French (fra_Latn)","fra_Latn"], |
| ["Hindi (hin_Deva)","hin_Deva"], |
| ["Urdu (urd_Arab)","urd_Arab"], |
| ["Arabic (arb_Arab)","arb_Arab"], |
| ["Spanish (spa_Latn)","spa_Latn"], |
| ["German (deu_Latn)","deu_Latn"], |
| ["Bengali (ben_Beng)","ben_Beng"], |
| ["Punjabi (pan_Guru)","pan_Guru"] |
| ]; |
| const srcSel=document.getElementById('src'); |
| const tgtSel=document.getElementById('tgt'); |
| const inp=document.getElementById('inp'); |
| const out=document.getElementById('out'); |
| const status=document.getElementById('status'); |
| const goBtn=document.getElementById('go'); |
| |
| for(const [label,code] of LANGS){ |
| srcSel.add(new Option(label,code)); |
| tgtSel.add(new Option(label,code)); |
| } |
| srcSel.value="eng_Latn"; |
| tgtSel.value="arb_Arab"; |
| |
| function refreshDirection(){ |
| const rtl=(srcSel.value==="arb_Arab"||srcSel.value==="urd_Arab"); |
| inp.setAttribute("dir",rtl?"rtl":"ltr"); |
| inp.style.textAlign=rtl?"right":"left"; |
| } |
| srcSel.addEventListener('change',refreshDirection); |
| refreshDirection(); |
| |
| let translator=null,loading=false; |
| async function getTranslator(){ |
| if(translator) return translator; |
| if(loading){while(!translator) await new Promise(r=>setTimeout(r,120));return translator;} |
| loading=true; |
| status.innerHTML="Loading model… (first time will download weights)"; |
| const progress=(p)=>{ |
| if(!p)return; |
| const{status:st,file,loaded,total}=p; |
| if(st){ |
| const pct=(loaded&&total)?` ${(100*loaded/total).toFixed(1)}%`:""; |
| status.innerHTML=`<b>${st}</b>${file?` — ${file}`:""}${pct}`; |
| } |
| }; |
| translator=await pipeline("translation","Xenova/nllb-200-distilled-600M",{progress_callback:progress}); |
| status.innerHTML="Model ready ✅"; |
| return translator; |
| } |
| function assertCode(code){ |
| if(!code||typeof code!=="string") throw new Error("Invalid language code"); |
| const ok=LANGS.some(([,c])=>c===code); |
| if(!ok) throw new Error(`Unsupported language code: ${code}`); |
| return code; |
| } |
| async function doTranslate(){ |
| try{ |
| goBtn.disabled=true; |
| out.textContent="—"; |
| status.innerHTML="Preparing…"; |
| const text=(inp.value||"").trim(); |
| if(!text){status.innerHTML="Enter some text to translate.";return;} |
| const src=assertCode(srcSel.value); |
| const tgt=assertCode(tgtSel.value); |
| if(src===tgt){status.innerHTML="Source and target are the same — translating anyway.";} |
| const tr=await getTranslator(); |
| const output=await tr(text,{src_lang:src,tgt_lang:tgt}); |
| const translated=Array.isArray(output)?(output[0]?.translation_text||""):(output?.translation_text||""); |
| out.textContent=translated||"(empty result)"; |
| status.innerHTML="Done."; |
| }catch(err){ |
| console.error(err); |
| status.innerHTML=`❌ ${err.message||err}`; |
| }finally{goBtn.disabled=false;} |
| } |
| goBtn.addEventListener('click',doTranslate); |
| inp.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();doTranslate();}}); |
| </script> |
| </body> |
| </html> |
|
|
