Spaces:

Javedalam
/

Language-translation-in-browser

Running

App Files Files Community

Javedalam commited on Sep 5

Commit

6944e03

verified ·

1 Parent(s): 150cf26

Create index.html

Browse files

Files changed (1) hide show

index.html +194 -0

index.html ADDED Viewed

	@@ -0,0 +1,194 @@

+<!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>
+    <!-- selectors -->
+    <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>
+    <!-- input -->
+    <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>
+    <!-- output -->
+    <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>
+  <!-- === LOGIC (unchanged from your working code) === -->
+  <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>