browser testing

app/hooks/useSpeechRecognition.ts

@@ -1,29 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-import { useTranscriber } from "./useTranscriber";
-
-const useSpeechRecognition = () => {
-    const [recognizedText, setRecognizedText] = useState('');
-    const transcriber = useTranscriber();
-
-    const startListening = useCallback((audioData: any) => {
-        if (!transcriber.isBusy && !transcriber.isModelLoading) {
-            transcriber.start(audioData);
-        }
-    }, [transcriber]);
-
-    const stopListening = useCallback(() => {
-        console.log("Stopped listening...", recognizedText);
-    }, [recognizedText]); // Updated dependency array
-
-    useEffect(() => {
-        if (transcriber.output && !transcriber.isBusy) {
-            setRecognizedText(transcriber.output.text);
-        }
-    }, [transcriber.output, transcriber.isBusy]);
-
-    return { startListening, stopListening, recognizedText };
-};
-
-export default useSpeechRecognition;

app/input.tsx

@@ -1,11 +1,12 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import styles from './page.module.css';
-import useSpeechRecognition from './hooks/useSpeechRecognition';
 import { useMicVAD } from "@ricky0123/vad-react";
 import * as ort from "onnxruntime-web";
 import MicIcon from '@mui/icons-material/Mic';
 import StopIcon from '@mui/icons-material/Stop';
 import { webmFixDuration } from './BlobFix';
+import Progress from './progress';
+import { useTranscriber } from "./hooks/useTranscriber";
 
 ort.env.wasm.wasmPaths = "/_next/static/chunks/";
 
@@ -46,9 +47,20 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
     const streamRef = useRef<MediaStream | null>(null);
     const mediaRecorderRef = useRef<MediaRecorder | null>(null);
     const chunksRef = useRef<Blob[]>([]);
-    const audioRef = useRef<HTMLAudioElement | null>(null);
+    const [recognizedText, setRecognizedText] = useState('');
+    const transcriber = useTranscriber();
 
-    const { startListening, recognizedText } = useSpeechRecognition();
+    const startListening = useCallback((audioData: any) => {
+        if (!transcriber.isBusy && !transcriber.isModelLoading) {
+            transcriber.start(audioData);
+        }
+    }, [transcriber]);
+
+    useEffect(() => {
+        if (transcriber.output) {
+            setRecognizedText(transcriber.output.text);
+        }
+    }, [transcriber.output, transcriber.isBusy]);
 
     useEffect(() => {
         if (recognizedText) {
@@ -69,7 +81,7 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
         };
 
         processRecording();
-    }, [recordedBlob, startListening]);
+    }, [recording, recordedBlob, startListening]);
 
     const vad = useMicVAD({
         modelURL: "/_next/static/chunks/silero_vad.onnx",
@@ -77,10 +89,7 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
         startOnLoad: false,
         onSpeechEnd: async () => {
             if (recording) {
-                await stopRecording(); // Stop the recording
-                
-                console.log('input', input);
-    
+                await stopRecording(); // Stop the recording    
                 setRecording(!recording); // Update the recording state
             }
         },
@@ -94,17 +103,17 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
             mediaRecorderRef.current.stop(); // set state to inactive
             setDuration(0);
             setRecording(false);
-            vad.toggle();
         }
     };
 
     const startRecording = async () => {
         // Reset recording (if any)
         setRecordedBlob(null);
-        vad.toggle();
 
         let startTime = Date.now();
 
+        vad.start();
+
         try {
             if (!streamRef.current) {
                 streamRef.current = await navigator.mediaDevices.getUserMedia({
@@ -175,6 +184,21 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
 
     return (
         <div>
+            {transcriber.progressItems.length > 0 && (
+                <div>
+                    <label>
+                        Loading model files... (only run once)
+                    </label>
+                    {transcriber.progressItems.map((data) => (
+                        <div key={data.file}>
+                            <Progress
+                                text={data.file}
+                                percentage={data.progress}
+                            />
+                        </div>
+                    ))}
+                </div>
+            )}
             <form onSubmit={handleSubmit} className={styles.form}>
                 <input
                     type="text"
@@ -190,7 +214,7 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
                 onClick={handleToggleRecording}
             >
                 {recording ? <StopIcon /> : <MicIcon />}
-            </button>          
+            </button>
         </div>
     );
 };

app/progress.tsx

@@ -0,0 +1,19 @@
+export default function Progress({
+    text,
+    percentage,
+}: {
+    text: string;
+    percentage: number;
+}) {
+    percentage = percentage ?? 0;
+    return (
+        <div className='mt-0.5 w-full relative text-sm text-white background-bg-cyan-400 bg-gray-200 border-1 border-gray-400 rounded-lg text-left overflow-hidden'>
+            <div
+                className='top-0 h-full bg-blue-500 whitespace-nowrap px-2'
+                style={{ width: `${percentage}%` }}
+            >
+                {text} ({`${percentage.toFixed(2)}%`})
+            </div>
+        </div>
+    );
+}