Spaces:

awacke1
/

InstantASRforYouNow

Running

App Files Files Community

awacke1 commited on Nov 26, 2024

Commit

2da09a8

verified ·

1 Parent(s): 2b113b3

Update index.html

Browse files

Files changed (1) hide show

index.html +64 -141

index.html CHANGED Viewed

@@ -3,175 +3,98 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ASR Client</title>
     <style>
         body {
-            font-family: system-ui, -apple-system, sans-serif;
             max-width: 800px;
-            margin: 2rem auto;
-            padding: 0 1rem;
-        }
-        .container {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-            align-items: center;
         }
-        #status {
-            margin: 1rem 0;
-            padding: 0.5rem;
-            border-radius: 4px;
-        }
-        #transcription {
-            width: 100%;
-            min-height: 200px;
-            padding: 1rem;
             border: 1px solid #ccc;
-            border-radius: 4px;
-            margin: 1rem 0;
-        }
-        button {
-            padding: 0.5rem 1rem;
-            font-size: 1rem;
-            cursor: pointer;
-            background: #0066ff;
-            color: white;
-            border: none;
-            border-radius: 4px;
-        }
-        button:disabled {
-            background: #cccccc;
-            cursor: not-allowed;
-        }
-        .status-loading {
-            background: #fff3cd;
-        }
-        .status-ready {
-            background: #d4edda;
-        }
-        .status-error {
-            background: #f8d7da;
-        }
-        #progress {
-            width: 100%;
-            margin-top: 10px;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>Speech Recognition Client</h1>
-        <div id="status">Loading model...</div>
-        <div id="progress"></div>
-        <button id="startButton" disabled>Start Recording</button>
-        <div id="transcription"></div>
-    </div>
     <script type="module">
-        import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.9.0/+esm';
         let isRecording = false;
-        let model = null;
-        const startButton = document.getElementById('startButton');
-        const statusDiv = document.getElementById('status');
-        const progressDiv = document.getElementById('progress');
-        const transcriptionDiv = document.getElementById('transcription');
-        // Set environment variables for better progress tracking
-        env.allowLocalModels = false;
-        env.backends.onnx.wasm.numThreads = 1;
-        class MyProgressCallback {
-            constructor() {
-                this.progress = 0;
-            }
-            onDownloadProgress(progress) {
-                progressDiv.textContent = `Downloading: ${(progress * 100).toFixed(2)}%`;
-            }
-            onProgress(progress) {
-                progressDiv.textContent = `Loading: ${(progress * 100).toFixed(2)}%`;
-            }
-        }
         // Initialize the model
-        async function initializeModel() {
-            try {
-                statusDiv.textContent = 'Loading model...';
-                statusDiv.className = 'status-loading';
-                // Initialize model with progress callback
-                model = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny', {
-                    progress_callback: new MyProgressCallback(),
-                });
-                statusDiv.textContent = 'Model ready! Click Start Recording to begin.';
-                statusDiv.className = 'status-ready';
-                progressDiv.textContent = '';
-                startButton.disabled = false;
-                console.log('Model loaded successfully');
-            } catch (error) {
-                console.error('Model loading error:', error);
-                statusDiv.textContent = 'Error loading model: ' + error.message;
-                statusDiv.className = 'status-error';
-            }
         }
-        // Handle recording
-        async function toggleRecording() {
             if (!isRecording) {
                 try {
                     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                    isRecording = true;
-                    startButton.textContent = 'Stop Recording';
-                    statusDiv.textContent = 'Recording...';
-                    statusDiv.className = 'status-loading';
-                    // Create processor and start processing audio
-                    const audioTrack = stream.getAudioTracks()[0];
-                    const processor = new MediaStreamTrackProcessor({ track: audioTrack });
-                    const transformer = new TransformStream({
-                        async transform(chunk, controller) {
-                            try {
-                                const result = await model(chunk.data);
-                                if (result && result.text) {
-                                    transcriptionDiv.textContent += ' ' + result.text;
-                                }
-                            } catch (error) {
-                                console.error('Error processing audio:', error);
-                            }
                         }
-                    });
-                    await processor.readable.pipeTo(transformer.writable);
-                } catch (error) {
-                    console.error('Recording error:', error);
-                    statusDiv.textContent = 'Error accessing microphone: ' + error.message;
-                    statusDiv.className = 'status-error';
-                    isRecording = false;
                 }
             } else {
                 // Stop recording
                 isRecording = false;
-                startButton.textContent = 'Start Recording';
-                statusDiv.textContent = 'Recording stopped. Click Start Recording to begin again.';
-                statusDiv.className = 'status-ready';
             }
-        }
-        // Initialize the app
-        startButton.addEventListener('click', toggleRecording);
-        window.addEventListener('load', initializeModel);
-        // Add error logging
-        window.addEventListener('error', function(e) {
-            console.error('Global error:', e.error);
-            statusDiv.textContent = 'An error occurred: ' + e.error.message;
-            statusDiv.className = 'status-error';
-        });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple ASR Client</title>
+    <script type="importmap">
+    {
+        "imports": {
+            "@xenova/transformers": "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.9.0/+esm"
+        }
+    }
+    </script>
     <style>
         body {
+            font-family: Arial, sans-serif;
             max-width: 800px;
+            margin: 20px auto;
+            padding: 20px;
         }
+        #output {
+            margin-top: 20px;
+            padding: 10px;
             border: 1px solid #ccc;
+            min-height: 100px;
         }
     </style>
 </head>
 <body>
+    <h1>Simple Speech Recognition</h1>
+    <div id="status">Loading model...</div>
+    <button id="startBtn" disabled>Start Recording</button>
+    <div id="output"></div>
     <script type="module">
+        import { pipeline } from '@xenova/transformers';
         let isRecording = false;
+        let mediaRecorder = null;
+        let audioChunks = [];
+        const statusElement = document.getElementById('status');
+        const startBtn = document.getElementById('startBtn');
+        const output = document.getElementById('output');
         // Initialize the model
+        let model;
+        try {
+            model = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny');
+            statusElement.textContent = 'Model loaded! Ready to record.';
+            startBtn.disabled = false;
+        } catch (e) {
+            statusElement.textContent = 'Error loading model: ' + e.message;
+            console.error(e);
         }
+        startBtn.onclick = async () => {
             if (!isRecording) {
+                // Start recording
                 try {
                     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    mediaRecorder = new MediaRecorder(stream);
+                    audioChunks = [];
+                    mediaRecorder.ondataavailable = (event) => {
+                        audioChunks.push(event.data);
+                    };
+                    mediaRecorder.onstop = async () => {
+                        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                        try {
+                            const result = await model(audioBlob);
+                            output.textContent += result.text + ' ';
+                        } catch (e) {
+                            console.error('Transcription error:', e);
+                            statusElement.textContent = 'Error during transcription';
                         }
+                        audioChunks = [];
+                    };
+                    mediaRecorder.start(1000);
+                    isRecording = true;
+                    startBtn.textContent = 'Stop Recording';
+                    statusElement.textContent = 'Recording...';
+                } catch (e) {
+                    console.error('Recording error:', e);
+                    statusElement.textContent = 'Error accessing microphone';
                 }
             } else {
                 // Stop recording
+                mediaRecorder.stop();
+                mediaRecorder.stream.getTracks().forEach(track => track.stop());
                 isRecording = false;
+                startBtn.textContent = 'Start Recording';
+                statusElement.textContent = 'Processing...';
             }
+        };
     </script>
 </body>
 </html>