Update index.html

index.html

@@ -1,19 +1,132 @@
-<!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="hi">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Hindi Text to Voice</title>
+<style>
+  body{font-family:system-ui,sans-serif;max-width:640px;margin:0 auto;padding:16px;background:#f6f7f9;color:#111}
+  h1{font-size:1.4rem}
+  label{display:block;margin:14px 0 6px;font-weight:600}
+  textarea,select,button{width:100%;font-size:1rem;padding:12px;border-radius:10px;border:1px solid #ccc;box-sizing:border-box}
+  textarea{min-height:140px}
+  button{background:#0a7d5a;color:#fff;border:0;margin-top:14px;font-weight:600}
+  button.secondary{background:#444}
+  .row{display:flex;gap:10px}
+  #status{margin-top:12px;color:#555;font-size:.9rem}
+  audio{width:100%;margin-top:12px}
+</style>
+</head>
+<body>
+<h1>Hindi Text to Voice</h1>
+
+<label for="engine">Engine</label>
+<select id="engine">
+  <option value="device">Device voices (turant, koi download nahi)</option>
+  <option value="ai">AI Hindi voice (pehli baar ~30-100MB download)</option>
+</select>
+
+<div id="voiceBox">
+  <label for="voice">Voice</label>
+  <select id="voice"></select>
+  <label for="rate">Speed</label>
+  <select id="rate">
+    <option value="0.8">Dheere</option>
+    <option value="1" selected>Normal</option>
+    <option value="1.25">Tez</option>
+  </select>
+</div>
+
+<label for="text">Text</label>
+<textarea id="text" placeholder="यहाँ हिंदी टेक्स्ट लिखो...">नमस्ते, आप कैसे हैं? यह मेरी अपनी टेक्स्ट टू वॉइस वेबसाइट है।</textarea>
+
+<div class="row">
+  <button id="play">▶ Bolo</button>
+  <button id="stop" class="secondary">■ Stop</button>
+</div>
+<div id="status"></div>
+<audio id="player" controls hidden></audio>
+
+<script type="module">
+const $ = id => document.getElementById(id);
+const engine = $("engine"), voiceSel = $("voice"), statusEl = $("status");
+
+// ---------- Device voices (Web Speech API) ----------
+function loadVoices() {
+  const all = speechSynthesis.getVoices();
+  const hi = all.filter(v => v.lang.toLowerCase().startsWith("hi"));
+  const list = hi.length ? hi : all;
+  voiceSel.innerHTML = "";
+  list.forEach(v => {
+    const o = document.createElement("option");
+    o.value = v.name;
+    o.textContent = `${v.name} (${v.lang})`;
+    voiceSel.appendChild(o);
+  });
+  if (!hi.length) statusEl.textContent =
+    "Is device par Hindi voice nahi mili. Phone Settings > Text-to-speech mein Hindi voice install karo, ya AI engine chuno.";
+}
+if ("speechSynthesis" in window) {
+  loadVoices();
+  speechSynthesis.onvoiceschanged = loadVoices;
+}
+
+// ---------- AI voice (transformers.js, MMS Hindi) ----------
+let ttsPipe = null;
+async function loadAI() {
+  if (ttsPipe) return ttsPipe;
+  statusEl.textContent = "Model download ho raha hai, thoda ruko...";
+  const { pipeline } = await import("https://cdn.jsdelivr.net/npm/@huggingface/transformers@3");
+  ttsPipe = await pipeline("text-to-speech", "Xenova/mms-tts-hin");
+  return ttsPipe;
+}
+
+function wavUrl(float32, sr) {
+  const n = float32.length, buf = new ArrayBuffer(44 + n * 2), v = new DataView(buf);
+  const w = (o, s) => [...s].forEach((c, i) => v.setUint8(o + i, c.charCodeAt(0)));
+  w(0, "RIFF"); v.setUint32(4, 36 + n * 2, true); w(8, "WAVE"); w(12, "fmt ");
+  v.setUint32(16, 16, true); v.setUint16(20, 1, true); v.setUint16(22, 1, true);
+  v.setUint32(24, sr, true); v.setUint32(28, sr * 2, true); v.setUint16(32, 2, true);
+  v.setUint16(34, 16, true); w(36, "data"); v.setUint32(40, n * 2, true);
+  for (let i = 0; i < n; i++) {
+    const s = Math.max(-1, Math.min(1, float32[i]));
+    v.setInt16(44 + i * 2, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+  }
+  return URL.createObjectURL(new Blob([buf], { type: "audio/wav" }));
+}
+
+// ---------- UI ----------
+engine.onchange = () => { $("voiceBox").hidden = engine.value === "ai"; };
+
+$("play").onclick = async () => {
+  const text = $("text").value.trim();
+  if (!text) { statusEl.textContent = "Pehle text likho"; return; }
+  $("player").hidden = true;
+  try {
+    if (engine.value === "device") {
+      speechSynthesis.cancel();
+      const u = new SpeechSynthesisUtterance(text);
+      const v = speechSynthesis.getVoices().find(x => x.name === voiceSel.value);
+      if (v) { u.voice = v; u.lang = v.lang; } else u.lang = "hi-IN";
+      u.rate = parseFloat($("rate").value);
+      u.onend = () => statusEl.textContent = "Ho gaya";
+      statusEl.textContent = "Bol raha hai...";
+      speechSynthesis.speak(u);
+    } else {
+      const pipe = await loadAI();
+      statusEl.textContent = "Awaaz ban rahi hai...";
+      const out = await pipe(text);
+      const p = $("player");
+      p.src = wavUrl(out.audio, out.sampling_rate);
+      p.hidden = false;
+      p.play();
+      statusEl.textContent = "Ho gaya (neeche download bhi kar sakte ho)";
+    }
+  } catch (e) {
+    statusEl.textContent = "Error: " + e.message;
+  }
+};
+$("stop").onclick = () => { speechSynthesis.cancel(); $("player").pause(); statusEl.textContent = "Ruk gaya"; };
+</script>
+</body>
 </html>