|
|
<!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/[email protected]"; |
|
|
|
|
|
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> |
|
|
|
