Spaces:

Itachi-42
/

CIPHER

Running

App Files Files Community

Itachi-42 commited on Apr 26

Commit

f5e6224

verified ·

1 Parent(s): 963788b

Update voice/static/index.html

Browse files

Files changed (1) hide show

voice/static/index.html +93 -43

voice/static/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>CONTEXTUAL-INTEGRITY DISCLOSURE GAME</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Pixelify+Sans:wght@400;500;600;700&family=VT323&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
@@ -1146,8 +1146,8 @@
         </svg>
       </div>
       <div class="brand-text">
-        <h1>CTX-DISCLOSURE GAME</h1>
-        <div class="sub">TEXT <span class="dim">→</span> VOICE <span class="dim">·</span> ADVERSARY-AWARE</div>
       </div>
     </div>
     <div class="header-meta">
@@ -1761,18 +1761,74 @@ document.getElementById("msg-input").addEventListener("keydown", (e) => {
   if (e.key === "Enter") sendText();
 });
-// ─── Voice mode ──────────────────────────────────────────────────────────────
 async function toggleRecording() {
   if (!sessionId || terminated) return;
   if (!isRecording) {
     try {
-      const stream = await navigator.mediaDevices.getUserMedia({audio: true});
-      mediaRecorder = new MediaRecorder(stream, {mimeType: "audio/webm;codecs=opus"});
-      recordedChunks = [];
-      mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) recordedChunks.push(e.data); };
-      mediaRecorder.onstop = () => sendVoice();
-      mediaRecorder.start();
       isRecording = true;
       recordStart = performance.now();
       document.getElementById("mic-btn").classList.add("recording");
@@ -1783,56 +1839,50 @@ async function toggleRecording() {
       }, 50);
     } catch (err) {
       toast("Microphone access denied", "error");
     }
   } else {
-    mediaRecorder.stop();
-    mediaRecorder.stream.getTracks().forEach(t => t.stop());
-    isRecording = false;
-    clearInterval(recordTimer);
-    document.getElementById("mic-btn").classList.remove("recording");
-    document.getElementById("rec-indicator").classList.remove("active");
   }
 }
-async function sendVoice() {
-  const blob = new Blob(recordedChunks, {type: "audio/webm"});
-  const log = document.getElementById("chat-log");
-  const placeholder = document.createElement("div");
-  placeholder.className = "msg you";
-  placeholder.innerHTML = `
-    <div class="avatar you">P1</div>
-    <div class="bubble transcribing"><div class="meta">You</div>transcribing…</div>`;
-  log.appendChild(placeholder);
-  log.scrollTop = log.scrollHeight;
   appendTypingBubble("rp");
-  const fd = new FormData();
-  fd.append("audio", blob, "clip.webm");
   try {
-    const res = await fetch(`/api/step-voice/${sessionId}`, {method: "POST", body: fd});
-    if (!res.ok) throw new Error("voice step failed");
     const j = await res.json();
-    placeholder.querySelector(".bubble").classList.remove("transcribing");
-    placeholder.querySelector(".bubble").innerHTML = `<div class="meta">You</div>${escapeHtml(j.transcribed || "")}`;
     if (pendingTypingBubble) { pendingTypingBubble.remove(); pendingTypingBubble = null; }
     applyObservation(j.observation);
   } catch (e) {
-    placeholder.querySelector(".bubble").innerHTML = `<div class="meta">You</div><em style="color:var(--red)">voice step failed</em>`;
     if (pendingTypingBubble) { pendingTypingBubble.remove(); pendingTypingBubble = null; }
-    toast("Voice step failed", "error");
   }
 }
-async function playTTS(text, voice) {
   try {
-    const res = await fetch(`/api/tts?voice=${voice}&text=${encodeURIComponent(text)}`);
-    if (!res.ok) return;
-    const blob = await res.blob();
-    const url = URL.createObjectURL(blob);
-    const a = new Audio(url);
-    a.play();
-    a.onended = () => URL.revokeObjectURL(url);
   } catch (e) { /* swallow */ }
 }

 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<title>CIPHER — Contextual-Integrity Privacy</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Pixelify+Sans:wght@400;500;600;700&family=VT323&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
         </svg>
       </div>
       <div class="brand-text">
+        <h1>CIPHER</h1>
+        <div class="sub">CONTEXTUAL-INTEGRITY PRIVACY <span class="dim">·</span> ADVERSARY-AWARE</div>
       </div>
     </div>
     <div class="header-meta">
   if (e.key === "Enter") sendText();
 });
+// ─── Voice mode (browser Web Speech API — no server deps) ────────────────────
+const _SR = window.SpeechRecognition || window.webkitSpeechRecognition;
+let recognition = null;
+let voiceTranscript = "";
+let voicePlaceholder = null;
+if (_SR) {
+  recognition = new _SR();
+  recognition.continuous = true;
+  recognition.interimResults = true;
+  recognition.lang = "en-US";
+  recognition.onresult = (e) => {
+    let interim = "";
+    for (let i = e.resultIndex; i < e.results.length; i++) {
+      const t = e.results[i][0].transcript;
+      if (e.results[i].isFinal) voiceTranscript += t;
+      else interim += t;
+    }
+    if (voicePlaceholder) {
+      const display = (voiceTranscript + interim).trim();
+      voicePlaceholder.querySelector(".bubble").innerHTML =
+        `<div class="meta">You</div>${display ? escapeHtml(display) : "<em>listening…</em>"}`;
+    }
+  };
+  recognition.onerror = (e) => {
+    if (voicePlaceholder) {
+      voicePlaceholder.querySelector(".bubble").innerHTML =
+        `<div class="meta">You</div><em style="color:var(--red)">voice error: ${escapeHtml(e.error || "unknown")}</em>`;
+      voicePlaceholder = null;
+    }
+    if (isRecording) {
+      isRecording = false;
+      clearInterval(recordTimer);
+      document.getElementById("mic-btn").classList.remove("recording");
+      document.getElementById("rec-indicator").classList.remove("active");
+    }
+  };
+  recognition.onend = () => {
+    if (isRecording) {
+      isRecording = false;
+      clearInterval(recordTimer);
+      document.getElementById("mic-btn").classList.remove("recording");
+      document.getElementById("rec-indicator").classList.remove("active");
+    }
+    finalizeVoice();
+  };
+}
 async function toggleRecording() {
   if (!sessionId || terminated) return;
+  if (!recognition) {
+    toast("Voice mode needs Chrome / Edge / Safari", "error");
+    return;
+  }
   if (!isRecording) {
+    voiceTranscript = "";
+    const log = document.getElementById("chat-log");
+    voicePlaceholder = document.createElement("div");
+    voicePlaceholder.className = "msg you";
+    voicePlaceholder.innerHTML = `
+      <div class="avatar you">P1</div>
+      <div class="bubble"><div class="meta">You</div><em>listening…</em></div>`;
+    log.appendChild(voicePlaceholder);
+    log.scrollTop = log.scrollHeight;
     try {
+      recognition.start();
       isRecording = true;
       recordStart = performance.now();
       document.getElementById("mic-btn").classList.add("recording");
       }, 50);
     } catch (err) {
       toast("Microphone access denied", "error");
+      if (voicePlaceholder) { voicePlaceholder.remove(); voicePlaceholder = null; }
     }
   } else {
+    try { recognition.stop(); } catch (e) {}
   }
 }
+async function finalizeVoice() {
+  const text = voiceTranscript.trim();
+  if (voicePlaceholder) {
+    voicePlaceholder.querySelector(".bubble").innerHTML =
+      `<div class="meta">You</div>${text ? escapeHtml(text) : "<em>(no speech detected)</em>"}`;
+    voicePlaceholder = null;
+  }
+  if (!text) return;
   appendTypingBubble("rp");
   try {
+    const res = await fetch(`/api/step/${sessionId}`, {
+      method: "POST",
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify({message: text}),
+    });
+    if (!res.ok) throw new Error("step failed");
     const j = await res.json();
     if (pendingTypingBubble) { pendingTypingBubble.remove(); pendingTypingBubble = null; }
     applyObservation(j.observation);
   } catch (e) {
     if (pendingTypingBubble) { pendingTypingBubble.remove(); pendingTypingBubble = null; }
+    toast("Step failed", "error");
   }
 }
+function playTTS(text, _voice) {
+  if (!window.speechSynthesis || !text) return;
   try {
+    speechSynthesis.cancel();
+    const u = new SpeechSynthesisUtterance(text);
+    const voices = speechSynthesis.getVoices();
+    const en = voices.find(v => /^en[-_]/i.test(v.lang)) || voices[0];
+    if (en) u.voice = en;
+    u.rate = 1.0;
+    u.pitch = 1.0;
+    speechSynthesis.speak(u);
   } catch (e) { /* swallow */ }
 }