Update index.html

index.html

@@ -1,34 +1,77 @@
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Swedish → English Translator</title>
 
-  <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.1/dist/ort.min.js"></script>
+  <title>English → Swedish Translator</title>
+
+  <script
+    type="module"
+    crossorigin
+    src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js">
+  </script>
+
+  <link
+    rel="stylesheet"
+    crossorigin
+    href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css">
 
   <style>
-    body { max-width: 900px; margin: 0 auto; padding: 24px; font-family: Arial, sans-serif; }
-    #status { color: #555; margin: 8px 0 18px; }
-    #error { color: #b00020; white-space: pre-wrap; margin-top: 12px; }
-    textarea { width: 100%; min-height: 120px; padding: 12px; box-sizing: border-box; font-size: 16px; }
-    button { margin: 14px 0; padding: 10px 18px; font-size: 16px; cursor: pointer; }
+    body {
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 24px;
+      font-family: Arial, sans-serif;
+    }
+
+    #status {
+      color: #555;
+      margin: 8px 0 18px;
+    }
+
+    #error {
+      color: #b00020;
+      white-space: pre-wrap;
+      margin-top: 12px;
+    }
+
+    textarea {
+      width: 100%;
+      min-height: 120px;
+      padding: 12px;
+      box-sizing: border-box;
+      font-size: 16px;
+    }
+
+    button {
+      margin: 14px 0;
+      padding: 10px 18px;
+      font-size: 16px;
+      cursor: pointer;
+    }
   </style>
 </head>
 
 <body>
-  <h1>Swedish → English Translator</h1>
+  <h1>English → Swedish Translator</h1>
   <p>
-    This is our own character-level Transformer from the lab, running directly in your browser.
-    Sentences up to 120 characters work best (that is what it was trained on).
+    This translation model runs directly in your browser.
+    The first translation can take a little while because the model must download.
   </p>
 
-  <p id="status">Loading model…</p>
+  <p id="status">Loading translation model…</p>
 
   <label for="input">Swedish text</label>
-  <textarea id="input" placeholder="Skriv en svensk mening här..." disabled></textarea>
+  <textarea
+    id="input"
+    placeholder="Write an Swedish sentence here..."
+    disabled
+  ></textarea>
 
   <br>
+
   <button id="translate-button" disabled>Translate</button>
 
   <label for="output">English translation</label>
@@ -36,17 +79,9 @@
 
   <p id="error"></p>
 
-  <script>
-    // Files produced by export_onnx.py, placed next to this page
-    const ENCODER_URL = "encoder.onnx";
-    const DECODER_URL = "decoder.onnx";
-    const VOCAB_URL   = "vocab.json";
-
-    // Same constants as the notebook
-    const TRAIN_MAX_LEN = 120;              // max_len
-    const MAX_LEN = TRAIN_MAX_LEN + 2;      // + <s> and </s>
-
-    ort.env.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.1/dist/";
+  <script type="module">
+    import { pipeline, env } from
+      "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.2";
 
     const status = document.getElementById("status");
     const input = document.getElementById("input");
@@ -54,68 +89,32 @@
     const button = document.getElementById("translate-button");
     const errorBox = document.getElementById("error");
 
-    let encoder, decoder, token2idx, idx2token;
+    let translator;
 
     async function loadModel() {
       try {
-        token2idx = await (await fetch(VOCAB_URL)).json();
-        idx2token = Object.fromEntries(Object.entries(token2idx).map(([t, i]) => [i, t]));
+        env.allowLocalModels = false;
 
-        const opts = { executionProviders: ["wasm"] };
-        encoder = await ort.InferenceSession.create(ENCODER_URL, opts);
-        decoder = await ort.InferenceSession.create(DECODER_URL, opts);
+        translator = await pipeline(
+          "translation",
+          "Xenova/opus-mt-en-sv"
+        );
 
         status.textContent = "Model ready. Enter Swedish text and click Translate.";
         input.disabled = false;
         button.disabled = false;
       } catch (error) {
         console.error(error);
-        status.textContent = "The model could not load.";
+        status.textContent = "The translation model could not load.";
         errorBox.textContent = String(error);
       }
     }
 
-    // seqs2tensors: <s> + characters + </s>, unknown characters -> <unk> (1)
-    function encode(text) {
-      const chars = Array.from(text);        // iterates by code point, like Python's list(str)
-      return [token2idx["<s>"], ...chars.map(c => token2idx[c] ?? 1), token2idx["</s>"]];
-    }
-
-    const toTensor = ids =>
-      new ort.Tensor("int64", BigInt64Array.from(ids, BigInt), [1, ids.length]);
-
-    function argmax(arr) {
-      let best = 0;
-      for (let i = 1; i < arr.length; i++) if (arr[i] > arr[best]) best = i;
-      return best;
-    }
-
-    // Same loop as greedy_decode_batched in the notebook
-    async function translate(text) {
-      const src = encode(text);
-      const memory = (await encoder.run({ src: toTensor(src) })).memory;
-
-      const eos = token2idx["</s>"];
-      const tgt = [token2idx["<s>"]];
-      const maxLen = Math.min(src.length + 20, MAX_LEN);
-
-      for (let step = 0; step < maxLen - 1; step++) {
-        const logits = (await decoder.run({ tgt: toTensor(tgt), memory })).logits.data;
-        const next = argmax(logits);
-        tgt.push(next);
-        if (next === eos) break;
-      }
-
-      return tgt.slice(1)
-        .filter(i => i !== eos)
-        .map(i => idx2token[i] ?? "<unk>")
-        .join("");
-    }
-
-    async function run() {
+    button.addEventListener("click", async () => {
       const text = input.value.trim();
+
       if (!text) {
-        output.value = "Skriv något först.";
+        output.value = "Please write something first.";
         return;
       }
 
@@ -124,10 +123,9 @@
       errorBox.textContent = "";
 
       try {
-        output.value = await translate(text);
-        status.textContent = text.length > TRAIN_MAX_LEN
-          ? `Done. Note: the input is longer than ${TRAIN_MAX_LEN} characters, so the result may be poor.`
-          : "Done.";
+        const result = await translator(text);
+        output.value = result[0].translation_text;
+        status.textContent = "Done.";
       } catch (error) {
         console.error(error);
         status.textContent = "Translation failed.";
@@ -135,11 +133,6 @@
       } finally {
         button.disabled = false;
       }
-    }
-
-    button.addEventListener("click", run);
-    input.addEventListener("keydown", e => {
-      if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); run(); }
     });
 
     loadModel();