Update script.js

script.js

@@ -1,6 +1,22 @@
 let mediaRecorder;
 let audioChunks = [];
 let recording = false;
+let transcriber;
+
+// Function to load the model
+async function loadModel() {
+    document.getElementById("modelStatus").innerText = "⏳ Loading Whisper model...";
+    
+    transcriber = await window.Transformers.pipeline(
+        'automatic-speech-recognition',
+        'Xenova/whisper-tiny.en'
+    );
+
+    document.getElementById("modelStatus").innerText = "✅ Model loaded!";
+    document.getElementById("recordButton").innerText = "🎤 Start Recording";
+    document.getElementById("recordButton").disabled = false;
+    document.getElementById("status").innerText = "Press the button to record.";
+}
 
 // Function to start recording
 async function startRecording() {
@@ -17,19 +33,16 @@ async function startRecording() {
 
         reader.onloadend = async () => {
             let audioURL = reader.result;
+            document.getElementById("status").innerText = "⏳ Transcribing...";
 
-            document.getElementById("status").innerText = "Processing...";
-            
-            // Load Whisper model
-            let transcriber = await window.Transformers.pipeline(
-                'automatic-speech-recognition',
-                'Xenova/whisper-tiny.en'
-            );
-
-            // Transcribe audio
-            let output = await transcriber(audioURL);
-            document.getElementById("output").innerText = output.text;
-            document.getElementById("status").innerText = "Done!";
+            try {
+                let output = await transcriber(audioURL);
+                document.getElementById("output").innerText = output.text;
+                document.getElementById("status").innerText = "✅ Done!";
+            } catch (error) {
+                document.getElementById("status").innerText = "❌ Error during transcription.";
+                console.error(error);
+            }
         };
 
         reader.readAsDataURL(audioBlob);
@@ -39,7 +52,7 @@ async function startRecording() {
     audioChunks = [];
     recording = true;
     document.getElementById("recordButton").innerText = "⏹ Stop Recording";
-    document.getElementById("status").innerText = "Recording...";
+    document.getElementById("status").innerText = "🎙️ Recording...";
 }
 
 // Function to stop recording
@@ -48,7 +61,7 @@ function stopRecording() {
         mediaRecorder.stop();
         recording = false;
         document.getElementById("recordButton").innerText = "🎤 Start Recording";
-        document.getElementById("status").innerText = "Processing...";
+        document.getElementById("status").innerText = "⏳ Processing audio...";
     }
 }
 
@@ -60,3 +73,6 @@ document.getElementById("recordButton").addEventListener("click", () => {
         stopRecording();
     }
 });
+
+// Load the model on page load
+loadModel();