reconocimiento elixir desde cero

recognition_VAD/assets/js/app.js

@@ -0,0 +1,45 @@
+// If you want to use Phoenix channels, run `mix help phx.gen.channel`
+// to get started and then uncomment the line below.
+// import "./user_socket.js"
+
+// You can include dependencies in two ways.
+//
+// The simplest option is to put them in assets/vendor and
+// import them using relative paths:
+//
+//     import "../vendor/some-package.js"
+//
+// Alternatively, you can `npm install some-package --prefix assets` and import
+// them using a path starting with the package name:
+//
+//     import "some-package"
+//
+
+// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
+import "phoenix_html"
+// Establish Phoenix Socket and LiveView configuration.
+import {Socket} from "phoenix"
+import {LiveSocket} from "phoenix_live_view"
+import topbar from "../vendor/topbar"
+import SttRecorder from "./stt_recorder.js";
+
+let liveSocket = new LiveSocket("/live", Socket, {
+  hooks: { SttRecorder },
+  params: { _csrf_token: csrfToken }
+});
+
+
+// Show progress bar on live navigation and form submits
+topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
+window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
+
+// connect if there are any LiveViews on the page
+liveSocket.connect()
+
+// expose liveSocket on window for web console debug logs and latency simulation:
+// >> liveSocket.enableDebug()
+// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
+// >> liveSocket.disableLatencySim()
+window.liveSocket = liveSocket
+

recognition_VAD/assets/js/stt_recorder.js

@@ -0,0 +1,119 @@
+// assets/js/stt_recorder.js
+
+let SttRecorder = {
+  mounted() {
+    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");
+
+    const controlURL = "ws://127.0.0.1:8011";
+    const dataURL = "ws://127.0.0.1:8012";
+    let dataSocket;
+    let audioContext;
+    let mediaStream;
+    let mediaProcessor;
+
+    // define startRecording and stopRecording here, or attach to this
+    window.startRecording = async function () {
+      try {
+        startButton.disabled = true;
+        stopButton.disabled = false;
+        statusDiv.textContent = "Recording...";
+        transcriptionDiv.textContent = "";
+        fullTextDiv.textContent = "";
+
+        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 audioData = event.inputBuffer.getChannelData(0);
+          sendAudioChunk(audioData, audioContext.sampleRate);
+        };
+
+        input.connect(mediaProcessor);
+        mediaProcessor.connect(audioContext.destination);
+
+        connectToDataSocket();
+      } catch (error) {
+        console.error("Error accessing microphone:", error);
+        statusDiv.textContent = "Error accessing microphone.";
+        stopRecording();
+      }
+    };
+
+    window.stopRecording = function () {
+      if (mediaProcessor && audioContext) {
+        mediaProcessor.disconnect();
+        audioContext.close();
+      }
+
+      if (mediaStream) {
+        mediaStream.getTracks().forEach((track) => track.stop());
+      }
+
+      if (dataSocket) {
+        dataSocket.close();
+      }
+
+      startButton.disabled = false;
+      stopButton.disabled = true;
+      statusDiv.textContent = "Stopped recording.";
+    };
+
+    function connectToDataSocket() {
+      dataSocket = new WebSocket(dataURL);
+
+      dataSocket.onopen = () => {
+        statusDiv.textContent = "Connected to STT server.";
+      };
+
+      dataSocket.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data);
+          if (message.type === "realtime") {
+            let words = message.text.split(" ");
+            let lastWord = words.pop();
+            transcriptionDiv.innerHTML = `${words.join(" ")} <span class="last-word">${lastWord}</span>`;
+          } else if (message.type === "fullSentence") {
+            fullTextDiv.innerHTML += message.text + " ";
+            transcriptionDiv.innerHTML = message.text;
+          }
+        } catch (e) {
+          console.error("Error parsing message:", e);
+        }
+      };
+
+      dataSocket.onerror = (error) => {
+        console.error("WebSocket error:", error);
+        statusDiv.textContent = "Error connecting to the STT server.";
+      };
+    }
+
+    function sendAudioChunk(audioData, sampleRate) {
+      if (dataSocket && dataSocket.readyState === WebSocket.OPEN) {
+        const float32Array = new Float32Array(audioData);
+        const pcm16Data = new Int16Array(float32Array.length);
+        for (let i = 0; i < float32Array.length; i++) {
+          pcm16Data[i] = Math.max(-1, Math.min(1, float32Array[i])) * 0x7fff;
+        }
+
+        const metadata = JSON.stringify({ sampleRate });
+        const metadataLength = new Uint32Array([metadata.length]);
+        const metadataBuffer = new TextEncoder().encode(metadata);
+
+        const message = new Uint8Array(metadataLength.byteLength + metadataBuffer.byteLength + pcm16Data.byteLength);
+        message.set(new Uint8Array(metadataLength.buffer), 0);
+        message.set(metadataBuffer, metadataLength.byteLength);
+        message.set(new Uint8Array(pcm16Data.buffer), metadataLength.byteLength + metadataBuffer.byteLength);
+
+        dataSocket.send(message);
+      }
+    }
+  },
+};
+
+export default SttRecorder;