reconocimiento elixir desde cero

recognition_VAD/lib/recognition_VAD_web/live/stt/test_with_channel.ex

@@ -0,0 +1,120 @@
+defmodule Recognition_VADWeb.Stt.TestWithChannel do
+  use Recognition_VADWeb, :live_view
+
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div id="container">
+      <div id="status">Presioná "Start Recording"…</div>
+      <button id="startButton">Start Recording</button>
+      <button id="stopButton" disabled>Stop Recording</button>
+
+      <div id="transcriptionContainer">
+        <div id="transcription" class="realtime"></div>
+      </div>
+
+      <div id="fullTextContainer">
+        <div id="fullText"></div>
+      </div>
+
+      <script type="module">
+        import { Socket } from "https://cdn.skypack.dev/phoenix";
+
+        const statusDiv = document.getElementById("status");
+        const transcriptionDiv = document.getElementById("transcription");
+        const fullTextDiv = document.getElementById("fullText");
+        const startButton = document.getElementById("startButton");
+        const stopButton = document.getElementById("stopButton");
+
+        let socket, channel;
+        let audioContext, mediaStream, mediaProcessor;
+
+        async function startRecording() {
+          startButton.disabled = true;
+          stopButton.disabled = false;
+          statusDiv.textContent = "Recording…";
+          transcriptionDiv.textContent = "";
+          fullTextDiv.textContent = "";
+
+          socket = new Socket("ws://localhost:4000/socket");
+          socket.connect();
+
+          channel = socket.channel("data:lobby");
+          channel.join()
+            .receive("ok", () => {
+              statusDiv.textContent = "🎙 Conectado a Phoenix STT";
+              console.log("Canal conectado");
+            })
+            .receive("error", () => {
+              statusDiv.textContent = "❌ Error al conectar";
+              console.error("Error al conectar canal");
+            });
+
+          channel.on("realtime", payload => {
+            const words = payload.text.split(" ");
+            const lastWord = words.pop();
+            transcriptionDiv.innerHTML = `${words.join(" ")} <span class="last-word">${lastWord}</span>`;
+          });
+
+          channel.on("fullSentence", payload => {
+            fullTextDiv.innerHTML += payload.text + " ";
+            transcriptionDiv.innerHTML = "";
+          });
+
+          audioContext = new AudioContext();
+          mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+          const input = audioContext.createMediaStreamSource(mediaStream);
+
+          mediaProcessor = audioContext.createScriptProcessor(1024, 1, 1);
+          mediaProcessor.onaudioprocess = (event) => {
+            const float32Array = event.inputBuffer.getChannelData(0);
+            const int16Array = new Int16Array(float32Array.length);
+            for (let i = 0; i < float32Array.length; i++) {
+              int16Array[i] = Math.max(-1, Math.min(1, float32Array[i])) * 0x7FFF;
+            }
+
+            const base64Audio = btoa(String.fromCharCode(...new Uint8Array(int16Array.buffer)));
+            channel.push("audio_chunk", {
+              data: base64Audio,
+              sample_rate: audioContext.sampleRate
+            });
+          };
+
+          input.connect(mediaProcessor);
+          mediaProcessor.connect(audioContext.destination);
+        }
+
+        function stopRecording() {
+          stopButton.disabled = true;
+          startButton.disabled = false;
+          statusDiv.textContent = "🛑 Grabación detenida.";
+
+          // ✅ Enviamos evento especial para guardar
+          if (channel) {
+            channel.push("save_audio", {});
+          }
+
+          if (mediaProcessor) mediaProcessor.disconnect();
+          if (audioContext) audioContext.close();
+          if (mediaStream) mediaStream.getTracks().forEach(track => track.stop());
+          if (channel) channel.leave();
+          if (socket) socket.disconnect();
+        }
+
+        document.getElementById("startButton").onclick = startRecording;
+        document.getElementById("stopButton").onclick = stopRecording;
+      </script>
+
+      <style>
+        .last-word {
+          font-weight: bold;
+          color: orange;
+        }
+      </style>
+    </div>
+    """
+  end
+end