Spaces:

Alicehy
/

bororo_tts

Sleeping

App Files Files Community

Alicehy commited on Aug 19, 2025

Commit

fae9682

1 Parent(s): f81c461

use /tmp cache

Browse files

Files changed (1) hide show

public/index.html +108 -18

public/index.html CHANGED Viewed

@@ -1,18 +1,108 @@
-<!doctype html><meta charset="utf-8"><title>Borôro TTS</title>
-<textarea id="t" rows="3" style="width:100%">Aru ebaradoge iwadure boe...</textarea>
-<button id="go">Convert</button>
-<audio id="aud" controls></audio>
-<script>
-document.getElementById('go').onclick = async () => {
-  const text = document.getElementById('t').value;
-  const r = await fetch('/api/tts', {
-    method:'POST',
-    headers:{'Content-Type':'application/json'},
-    body: JSON.stringify({ text: document.getElementById('t').value })
-  });
-  const b = await r.blob();
-  const url = URL.createObjectURL(b);
-  const a = document.getElementById('aud');
-  a.src = url; a.play();
-};
-</script>

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Borôro TTS</title>
+  <style>
+    :root { --bg:#f1f3f4; --card:#fff; --text:#202124; --muted:#5f6368; --primary:#1a73e8; --primary-hover:#1765c1; }
+    *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu}
+    .wrap{max-width:820px;margin:40px auto;padding:0 16px}
+    .card{background:var(--card);border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
+    .head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e6e8eb}
+    .title{font-weight:600}
+    .muted{color:var(--muted);font-size:14px}
+    .body{padding:20px}
+    label{display:block;font-size:14px;color:var(--muted);margin:0 0 6px}
+    textarea{width:100%;min-height:140px;resize:vertical;border:1px solid #dadce0;border-radius:12px;padding:12px;outline:none}
+    textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,115,232,.12)}
+    .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
+    button{border:0;border-radius:10px;padding:10px 16px;cursor:pointer;font-weight:600}
+    .primary{background:var(--primary);color:#fff}
+    .primary:disabled{opacity:.6;cursor:not-allowed}
+    .primary:not(:disabled):hover{background:var(--primary-hover)}
+    .ghost{background:#eef3fe;color:var(--primary)}
+    .counter{margin-left:auto;color:var(--muted);font-size:13px}
+    .status{margin-top:10px;height:20px;color:var(--muted);font-size:14px}
+    .audio{margin-top:10px}
+    .spinner{width:16px;height:16px;border:2px solid #c6dafc;border-top-color:var(--primary);border-radius:50%;display:inline-block;animation:spin .8s linear infinite;margin-right:8px;vertical-align:-3px}
+    @keyframes spin{to{transform:rotate(360deg)}}
+    .footer{padding:14px 20px;border-top:1px solid #e6e8eb;color:var(--muted);font-size:13px;text-align:right}
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <div class="card">
+      <div class="head">
+        <div class="title">Borôro → Audio</div>
+        <div class="muted">Text-to-Speech demo</div>
+      </div>
+      <div class="body">
+        <label for="t">Enter Borôro text</label>
+        <textarea id="t" placeholder="Type Borôro here…">Aru ebaradoge iwadure boe, imedu ji boe ugoa, aro re mara boe ba, imedu kuro boe ekure.</textarea>
+        <div class="row">
+          <button id="go" class="primary">Convert</button>
+          <button id="clear" class="ghost" type="button">Clear</button>
+          <button id="example" class="ghost" type="button">Example</button>
+          <span class="counter" id="count">0 / 500</span>
+        </div>
+        <div class="status" id="status"></div>
+        <div class="audio"><audio id="aud" controls style="width:100%"></audio></div>
+      </div>
+      <div class="footer">Non-commercial use only (CC-BY-NC model)</div>
+    </div>
+  </div>
+  <script>
+    const MAX = 500;
+    const t = document.getElementById('t');
+    const go = document.getElementById('go');
+    const statusEl = document.getElementById('status');
+    const aud = document.getElementById('aud');
+    const count = document.getElementById('count');
+    const clearBtn = document.getElementById('clear');
+    const exampleBtn = document.getElementById('example');
+    function updateCount(){ count.textContent = `${t.value.length} / ${MAX}`; }
+    updateCount();
+    t.addEventListener('input', () => {
+      if (t.value.length > MAX) t.value = t.value.slice(0, MAX);
+      updateCount();
+    });
+    clearBtn.onclick = () => { t.value = ''; updateCount(); t.focus(); };
+    exampleBtn.onclick = () => {
+      t.value = 'Aru ebaradoge iwadure boe, imedu ji boe ugoa, aro re mara boe ba, imedu kuro boe ekure.';
+      updateCount(); t.focus();
+    };
+    go.onclick = async () => {
+      const text = t.value.trim();
+      if (!text){ t.focus(); return; }
+      go.disabled = true;
+      statusEl.innerHTML = '<span class="spinner"></span>Generating audio…';
+      try {
+        const ctrl = new AbortController();
+        const timeout = setTimeout(() => ctrl.abort(), 60000);
+        const r = await fetch('/api/tts', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ text }),
+          signal: ctrl.signal
+        });
+        clearTimeout(timeout);
+        if (!r.ok) throw new Error(`Server ${r.status}`);
+        const b = await r.blob();
+        const url = URL.createObjectURL(b);
+        aud.src = url;
+        await aud.play().catch(()=>{});
+        statusEl.textContent = 'Ready';
+      } catch (e) {
+        statusEl.textContent = `Error: ${e.message || e}`;
+      } finally {
+        go.disabled = false;
+      }
+    };
+  </script>
+</body>
+</html>