Upload folder using huggingface_hub

README.md

@@ -1,10 +1,23 @@
 ---
-title: Espzap Translator
-emoji: 🌍
-colorFrom: indigo
-colorTo: indigo
+title: Traductor Español a Zapoteco
+emoji: 🌽
+colorFrom: green
+colorTo: yellow
 sdk: static
 pinned: false
+license: cc-by-nc-4.0
+models:
+- simpleverso/espzap-nllb-600m
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Traductor Español → Zapoteco del Istmo (diidxazá)
+
+Client-side translation demo. Runs entirely in the browser via
+[Transformers.js](https://github.com/huggingface/transformers.js), no server
+required. The quantized (int8) ONNX model is downloaded once (~1.1 GB) and cached
+by the browser.
+
+- Model: [`simpleverso/espzap-nllb-600m`](https://huggingface.co/simpleverso/espzap-nllb-600m)
+- Base: `facebook/nllb-200-distilled-600M` fine-tuned with LoRA
+- Source language: Spanish (`spa_Latn`); target: Isthmus Zapotec (using the
+  `ayr_Latn` slot, repurposed during training).

index.html

@@ -1,19 +1,209 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Traductor Español → Zapoteco del Istmo</title>
+<style>
+  :root {
+    --bg: #0f1419;
+    --panel: #1a2029;
+    --border: #2a3441;
+    --accent: #4ea1ff;
+    --accent-2: #6ee7b7;
+    --text: #e6edf3;
+    --muted: #8b98a9;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    line-height: 1.5;
+    min-height: 100vh;
+  }
+  .wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; }
+  header { text-align: center; margin-bottom: 8px; }
+  h1 { font-size: 1.6rem; margin: 0 0 6px; }
+  .sub { color: var(--muted); font-size: 0.95rem; margin: 0 0 24px; text-align: center; }
+  .card {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    padding: 18px;
+    margin-bottom: 16px;
+  }
+  label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 8px; }
+  textarea {
+    width: 100%;
+    min-height: 110px;
+    resize: vertical;
+    background: #10151c;
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 12px 14px;
+    font-size: 1.05rem;
+    font-family: inherit;
+  }
+  textarea:focus { outline: none; border-color: var(--accent); }
+  .out {
+    min-height: 110px;
+    background: #10151c;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 12px 14px;
+    font-size: 1.15rem;
+    white-space: pre-wrap;
+    color: var(--accent-2);
+  }
+  .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
+  button {
+    background: var(--accent);
+    color: #05233f;
+    border: none;
+    border-radius: 10px;
+    padding: 12px 22px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+  button:disabled { opacity: 0.5; cursor: not-allowed; }
+  button:not(:disabled):hover { opacity: 0.9; }
+  .hint { color: var(--muted); font-size: 0.85rem; }
+  #status { font-size: 0.9rem; color: var(--muted); margin-top: 10px; min-height: 1.2em; }
+  .bar { height: 8px; background: #10151c; border-radius: 6px; overflow: hidden; margin-top: 10px; border: 1px solid var(--border); }
+  .bar > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.2s; }
+  .examples { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
+  .chip {
+    background: #10151c; border: 1px solid var(--border); color: var(--muted);
+    border-radius: 20px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer;
+  }
+  .chip:hover { border-color: var(--accent); color: var(--text); }
+  footer { text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 28px; }
+  a { color: var(--accent); }
+  .warn { background: #2a2410; border-color: #524717; color: #e8d48b; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header>
+    <h1>Traductor Español → Zapoteco del Istmo</h1>
+  </header>
+  <p class="sub">diidxazá · modelo NLLB-200 afinado · corre 100% en tu navegador</p>
+
+  <div class="card warn" id="notice">
+    La primera vez, el modelo (~1.1 GB) se descarga y se guarda en caché en tu
+    navegador. Puede tardar según tu conexión. Después carga al instante.
+  </div>
+
+  <div class="card">
+    <label for="src">Español</label>
+    <textarea id="src" placeholder="Escribe una frase en español...">Buenos días, ¿cómo estás?</textarea>
+    <div class="examples" id="examples"></div>
+    <div class="row">
+      <button id="go" disabled>Cargando modelo…</button>
+      <span class="hint">o presiona Ctrl/Cmd + Enter</span>
+    </div>
+    <div id="status">Inicializando…</div>
+    <div class="bar" id="barwrap" style="display:none;"><div id="bar"></div></div>
+  </div>
+
+  <div class="card">
+    <label for="out">Diidxazá (Zapoteco del Istmo)</label>
+    <div class="out" id="out"></div>
+  </div>
+
+  <footer>
+    Modelo:
+    <a href="https://huggingface.co/simpleverso/espzap-nllb-600m" target="_blank" rel="noopener">simpleverso/espzap-nllb-600m</a>
+    · Inferencia en el navegador con
+    <a href="https://github.com/huggingface/transformers.js" target="_blank" rel="noopener">Transformers.js</a>
+  </footer>
+</div>
+
+<script type="module">
+  import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1";
+
+  // Load the model from the Hugging Face Hub (browser cache handles re-loads).
+  env.allowLocalModels = false;
+
+  const MODEL_ID = "simpleverso/espzap-nllb-600m";
+  const SRC_LANG = "spa_Latn";
+  const TGT_LANG = "ayr_Latn"; // NLLB slot repurposed as Isthmus Zapotec
+
+  const $ = (id) => document.getElementById(id);
+  const srcEl = $("src"), outEl = $("out"), goEl = $("go");
+  const statusEl = $("status"), barWrap = $("barwrap"), bar = $("bar");
+
+  const EXAMPLES = ["Te quiero mucho", "Vamos al río", "El sol brilla", "¿Cómo te llamas?"];
+  const exWrap = $("examples");
+  for (const ex of EXAMPLES) {
+    const c = document.createElement("span");
+    c.className = "chip"; c.textContent = ex;
+    c.onclick = () => { srcEl.value = ex; };
+    exWrap.appendChild(c);
+  }
+
+  const fileProgress = {};
+  function onProgress(p) {
+    if (p.status === "progress" && p.file) {
+      fileProgress[p.file] = p.progress || 0;
+      const vals = Object.values(fileProgress);
+      const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
+      barWrap.style.display = "block";
+      bar.style.width = avg.toFixed(1) + "%";
+      statusEl.textContent = `Descargando modelo… ${avg.toFixed(0)}%`;
+    } else if (p.status === "ready") {
+      statusEl.textContent = "";
+    }
+  }
+
+  let translator = null;
+  (async () => {
+    try {
+      translator = await pipeline("translation", MODEL_ID, {
+        dtype: "q8",
+        progress_callback: onProgress,
+      });
+      barWrap.style.display = "none";
+      statusEl.textContent = "Modelo listo.";
+      goEl.disabled = false;
+      goEl.textContent = "Traducir";
+    } catch (e) {
+      statusEl.textContent = "Error al cargar el modelo: " + e.message;
+      console.error(e);
+    }
+  })();
+
+  async function translate() {
+    const text = srcEl.value.trim();
+    if (!text || !translator) return;
+    goEl.disabled = true;
+    goEl.textContent = "Traduciendo…";
+    outEl.textContent = "";
+    try {
+      const res = await translator(text, {
+        src_lang: SRC_LANG,
+        tgt_lang: TGT_LANG,
+        max_new_tokens: 96,
+      });
+      outEl.textContent = res[0].translation_text;
+    } catch (e) {
+      outEl.textContent = "Error: " + e.message;
+      console.error(e);
+    } finally {
+      goEl.disabled = false;
+      goEl.textContent = "Traducir";
+    }
+  }
+
+  goEl.addEventListener("click", translate);
+  srcEl.addEventListener("keydown", (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") translate();
+  });
+</script>
+</body>
 </html>