stt-4

Running

App Files Files Community

bcci commited on Feb 27

Commit

c8231f4

verified ·

1 Parent(s): 1027960

Update app.py

Browse files

Files changed (1) hide show

app.py +46 -7

app.py CHANGED Viewed

@@ -142,23 +142,35 @@ async def get_home():
      <head>
      <meta charset="UTF-8">
      <title>AssemblyAI Realtime Transcription</title>
      </head>
-     <body>
-     <h1>Realtime Transcription</h1>
-     <button onclick="startTranscription()">Start Transcription</button>
-     <select id="modelSelect" onchange="switchModel()">
      <option value="tiny">Tiny Model</option>
      <option value="base">Base Model</option>
      </select>
-     <p id="status">Click start to begin transcription.</p>
-     <div id="transcription" style="border:1px solid #ccc; padding:10px; margin-top:10px; height:200px; overflow:auto;"></div>
      <script>
      let ws;
      let audioContext;
      let scriptProcessor;
      let mediaStream;
      let currentLine = document.createElement('span');
      document.getElementById('transcription').appendChild(currentLine);
      async function startTranscription() {
      document.getElementById("status").innerText = "Connecting...";
      ws = new WebSocket("wss://" + location.host + "/ws/transcribe");
@@ -169,6 +181,11 @@ async def get_home():
      mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
      audioContext = new AudioContext({ sampleRate: 16000 });
      const source = audioContext.createMediaStreamSource(mediaStream);
      scriptProcessor = audioContext.createScriptProcessor(512, 1, 1);
      scriptProcessor.onaudioprocess = function(event) {
      const inputData = event.inputBuffer.getChannelData(0);
@@ -176,6 +193,26 @@ async def get_home():
      if (ws.readyState === WebSocket.OPEN) {
      ws.send(pcm16);
      }
      };
      source.connect(scriptProcessor);
      scriptProcessor.connect(audioContext.destination);
@@ -203,6 +240,7 @@ async def get_home():
      document.getElementById("status").innerText = "Closed";
      };
      }
      function switchModel() {
      const model = document.getElementById("modelSelect").value;
      if (ws && ws.readyState === WebSocket.OPEN) {
@@ -213,6 +251,7 @@ async def get_home():
      }
      }
      }
      function floatTo16BitPCM(input) {
      const buffer = new ArrayBuffer(input.length * 2);
      const output = new DataView(buffer);
@@ -229,4 +268,4 @@ async def get_home():
 if __name__ == "__main__":
     import uvicorn
-    uvicorn.run(app, host="0.0.0.0", port=7860)

      <head>
      <meta charset="UTF-8">
      <title>AssemblyAI Realtime Transcription</title>
+     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
      </head>
+     <body class="bg-gray-100 p-6">
+     <div class="max-w-3xl mx-auto bg-white p-6 rounded-lg shadow-md">
+     <h1 class="text-2xl font-bold mb-4">Realtime Transcription</h1>
+     <button onclick="startTranscription()" class="bg-blue-500 text-white px-4 py-2 rounded mb-4">Start Transcription</button>
+     <select id="modelSelect" onchange="switchModel()" class="bg-gray-200 px-4 py-2 rounded mb-4">
      <option value="tiny">Tiny Model</option>
      <option value="base">Base Model</option>
      </select>
+     <p id="status" class="text-gray-600 mb-4">Click start to begin transcription.</p>
+     <div id="transcription" class="border p-4 rounded mb-4 h-64 overflow-auto"></div>
+     <div id="visualizer" class="border p-4 rounded h-64">
+     <canvas id="audioCanvas" class="w-full h-full"></canvas>
+     </div>
+     </div>
      <script>
      let ws;
      let audioContext;
      let scriptProcessor;
      let mediaStream;
      let currentLine = document.createElement('span');
+     let analyser;
+     let canvas, canvasContext;
      document.getElementById('transcription').appendChild(currentLine);
+     canvas = document.getElementById('audioCanvas');
+     canvasContext = canvas.getContext('2d');
      async function startTranscription() {
      document.getElementById("status").innerText = "Connecting...";
      ws = new WebSocket("wss://" + location.host + "/ws/transcribe");
      mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
      audioContext = new AudioContext({ sampleRate: 16000 });
      const source = audioContext.createMediaStreamSource(mediaStream);
+     analyser = audioContext.createAnalyser();
+     analyser.fftSize = 2048;
+     const bufferLength = analyser.frequencyBinCount;
+     const dataArray = new Uint8Array(bufferLength);
+     source.connect(analyser);
      scriptProcessor = audioContext.createScriptProcessor(512, 1, 1);
      scriptProcessor.onaudioprocess = function(event) {
      const inputData = event.inputBuffer.getChannelData(0);
      if (ws.readyState === WebSocket.OPEN) {
      ws.send(pcm16);
      }
+     analyser.getByteTimeDomainData(dataArray);
+     canvasContext.fillStyle = 'rgb(200, 200, 200)';
+     canvasContext.fillRect(0, 0, canvas.width, canvas.height);
+     canvasContext.lineWidth = 2;
+     canvasContext.strokeStyle = 'rgb(0, 0, 0)';
+     canvasContext.beginPath();
+     let sliceWidth = canvas.width * 1.0 / bufferLength;
+     let x = 0;
+     for (let i = 0; i < bufferLength; i++) {
+     let v = dataArray[i] / 128.0;
+     let y = v * canvas.height / 2;
+     if (i === 0) {
+     canvasContext.moveTo(x, y);
+     } else {
+     canvasContext.lineTo(x, y);
+     }
+     x += sliceWidth;
+     }
+     canvasContext.lineTo(canvas.width, canvas.height / 2);
+     canvasContext.stroke();
      };
      source.connect(scriptProcessor);
      scriptProcessor.connect(audioContext.destination);
      document.getElementById("status").innerText = "Closed";
      };
      }
      function switchModel() {
      const model = document.getElementById("modelSelect").value;
      if (ws && ws.readyState === WebSocket.OPEN) {
      }
      }
      }
      function floatTo16BitPCM(input) {
      const buffer = new ArrayBuffer(input.length * 2);
      const output = new DataView(buffer);
 if __name__ == "__main__":
     import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)