Spaces:

Javedalam
/

Language-translation-in-browser

Running

App Files Files Community

Javedalam commited on Sep 5

Commit

cba6b29

verified ·

1 Parent(s): 4059173

Update index.html

Browse files

Files changed (1) hide show

index.html +181 -27

index.html CHANGED Viewed

@@ -1,34 +1,188 @@
 <!doctype html>
-<html>
-  <head><meta charset="utf-8"><title>TF load check</title></head>
-  <body>
-    <h3>Transformers.js local load check</h3>
-    <div id="status">Loading…</div>
-    <!-- Try UMD first -->
-    <script src="./transformers.min.js"></script>
-    <!-- If UMD didn't define a global, import as ESM and assign it -->
-    <script type="module">
-      const s = document.getElementById('status');
       try {
-        if (!('transformers' in window)) {
-          // ESM fallback
-          const mod = await import('./transformers.min.js');
-          // expose as global so the rest of the app can use window.transformers
-          window.transformers = mod;
-          s.textContent = '✅ Loaded via ESM import (no UMD global present).';
         } else {
-          s.textContent = '✅ Loaded via UMD global (window.transformers present).';
-        }
-        // quick smoke test
-        if (!window.transformers?.pipeline) {
-          s.textContent = '⚠️ Library present but pipeline() missing.';
         }
       } catch (e) {
-        s.textContent = '❌ Import failed. See console.';
-        console.error(e);
       }
-    </script>
-  </body>
 </html>

 <!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Transformers.js load test + NLLB demo</title>
+  <style>
+    body { font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 16px; }
+    label { display:block; margin: 8px 0 4px; }
+    textarea { width: 100%; min-height: 120px; }
+    select, input[type="submit"] { padding: 8px; font: inherit; }
+    #row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
+    #progress-wrap { margin:10px 0; display:none; }
+    .muted { opacity:.75 }
+    .ok { color:#0a0 } .err{ color:#b00 } .warn{ color:#b66 }
+    pre { background:#f6f6f6; padding:8px; overflow:auto }
+  </style>
+</head>
+<body>
+  <h1>NLLB translation in browser</h1>
+  <div id="status" class="muted">Loading library…</div>
+  <div id="row" style="margin-top:12px">
+    <div>
+      <label for="src_lang">Source language</label>
+      <select id="src_lang">
+        <option value="eng_Latn" selected>English (eng_Latn)</option>
+        <option value="spa_Latn">Spanish (spa_Latn)</option>
+        <option value="fra_Latn">French (fra_Latn)</option>
+        <option value="hin_Deva">Hindi (hin_Deva)</option>
+      </select>
+    </div>
+    <div>
+      <label for="tgt_lang">Target language</label>
+      <select id="tgt_lang">
+        <option value="spa_Latn" selected>Spanish (spa_Latn)</option>
+        <option value="eng_Latn">English (eng_Latn)</option>
+        <option value="fra_Latn">French (fra_Latn)</option>
+        <option value="hin_Deva">Hindi (hin_Deva)</option>
+      </select>
+    </div>
+  </div>
+  <label for="from">Input text</label>
+  <textarea id="from" placeholder="Type text to translate"></textarea>
+  <!-- Progress UI -->
+  <div id="progress-wrap">
+    <progress id="loadProgress" value="0" max="1" style="width:100%;"></progress>
+    <div id="progressText" class="muted">Initializing…</div>
+  </div>
+  <input type="submit" id="submit" value="Loading..." disabled />
+  <label for="to" style="margin-top:12px">Output</label>
+  <textarea id="to" readonly>Output will be here...</textarea>
+  <hr/>
+  <details>
+    <summary>Debug</summary>
+    <div id="debug"></div>
+  </details>
+  <!-- Loader: try ESM import first; if that fails, try UMD global by injecting a classic <script> -->
+  <script>
+    const status = document.getElementById('status');
+    const debug = document.getElementById('debug');
+    function log(line, cls='') {
+      const p = document.createElement('div');
+      if (cls) p.className = cls;
+      p.textContent = line;
+      debug.appendChild(p);
+    }
+    async function loadTransformers() {
+      // 1) Try as ESM module
       try {
+        // IMPORTANT: only attempt module import; no prior classic <script> tag present.
+        const mod = await import('./transformers.min.js');
+        if (mod && (typeof mod.pipeline === 'function')) {
+          window.transformers = mod; // expose for app code
+          status.textContent = '✅ Loaded Transformers.js via ESM import.';
+          log('Loaded via ESM', 'ok');
+          return;
         } else {
+          log('ESM import succeeded but pipeline() missing.', 'warn');
+          // fall through to UMD
         }
       } catch (e) {
+        log('ESM import threw: ' + (e && e.message ? e.message : String(e)), 'err');
       }
+      // 2) Try as UMD global by injecting classic script
+      await new Promise((resolve) => {
+        const s = document.createElement('script');
+        s.src = './transformers.min.js';
+        s.onload = () => resolve();
+        s.onerror = () => resolve();
+        document.head.appendChild(s);
+      });
+      if (window.transformers && typeof window.transformers.pipeline === 'function') {
+        status.textContent = '✅ Loaded Transformers.js via UMD global.';
+        log('Loaded via UMD (global window.transformers exists)', 'ok');
+      } else {
+        status.innerHTML = '<span class="err">❌ Could not load Transformers.js as ESM or UMD.</span>';
+        log('window.transformers is ' + typeof window.transformers, 'err');
+      }
+    }
+    loadTransformers().then(setupApp);
+    function setupApp() {
+      if (!(window.transformers && window.transformers.pipeline)) return;
+      const btn = document.getElementById("submit");
+      const out = document.getElementById("to");
+      const fromEl = document.getElementById("from");
+      const srcEl = document.getElementById("src_lang");
+      const tgtEl = document.getElementById("tgt_lang");
+      const wrap = document.getElementById("progress-wrap");
+      const bar  = document.getElementById("loadProgress");
+      const txt  = document.getElementById("progressText");
+      btn.disabled = false;
+      btn.value = "Translate";
+      function showProgressUI(show, message) {
+        wrap.style.display = show ? "" : "none";
+        if (message) txt.textContent = message;
+        bar.value = 0; bar.max = 1;
+      }
+      function progressCallback(p) {
+        if (p.status) txt.textContent = p.status;
+        if (typeof p.loaded === "number" && typeof p.total === "number" && p.total > 0) {
+          bar.max = p.total;
+          bar.value = p.loaded;
+          const pct = Math.round((p.loaded / p.total) * 100);
+          txt.textContent = `Downloading ${p.file || "model"}… ${pct}%`;
+        }
+      }
+      let translator = null;
+      async function getTranslator() {
+        if (translator) return translator;
+        showProgressUI(true, "Loading model…");
+        try {
+          const { pipeline, env } = window.transformers;
+          env.useBrowserCache = true;
+          env.allowLocalModels = false;
+          env.backends.onnx.wasm.numThreads = Math.max(4, Math.min(8, navigator.hardwareConcurrency || 4));
+          translator = await pipeline("translation", "Xenova/nllb-200-distilled-600M", {
+            device: (navigator.gpu ? "webgpu" : "wasm"),
+            progress_callback: progressCallback
+          });
+          txt.textContent = "✅ Model ready";
+          bar.max = 1; bar.value = 1;
+          return translator;
+        } catch (e) {
+          console.error(e);
+          txt.textContent = "❌ Error loading model — see console.";
+          throw e;
+        }
+      }
+      btn.addEventListener("click", async () => {
+        const prev = btn.value;
+        btn.disabled = true; btn.value = "Working…";
+        try {
+          const t = await getTranslator();
+          const text = (fromEl.value || "").trim();
+          if (!text) { out.value = "Please type some text."; return; }
+          const res = await t(text, { src_lang: srcEl.value, tgt_lang: tgtEl.value, max_length: 128 });
+          out.value = res?.[0]?.translation_text || "(no output)";
+        } catch (e) {
+          out.value = "❌ Translation failed. See console.";
+        } finally {
+          btn.disabled = false; btn.value = prev;
+        }
+      });
+    }
+  </script>
+</body>
 </html>