Update script.js

script.js

@@ -1,24 +1,47 @@
+let transcriber;
+let recording = false;
 let mediaRecorder;
 let audioChunks = [];
-let recording = false;
-let transcriber;
 
-// Function to load the model
+// Function to Load Model
 async function loadModel() {
     document.getElementById("modelStatus").innerText = "⏳ Loading Whisper model...";
-    
-    transcriber = await window.Transformers.pipeline(
-        'automatic-speech-recognition',
-        'Xenova/whisper-tiny.en'
-    );
+    try {
+        const timeout = new Promise((_, reject) =>
+            setTimeout(() => reject(new Error("Model took too long to load!")), 60000) // 60s timeout
+        );
+
+        transcriber = await Promise.race([
+            window.Transformers.pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en'),
+            timeout
+        ]);
 
-    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.";
+        document.getElementById("modelStatus").innerText = "✅ Model Loaded!";
+        document.getElementById("recordButton").disabled = false;
+        document.getElementById("recordButton").innerText = "🎤 Start Recording";
+        document.getElementById("testModel").disabled = false;
+    } catch (error) {
+        document.getElementById("modelStatus").innerText = "❌ Model failed to load!";
+        document.getElementById("error").innerText = error.message;
+        console.error("Error loading model:", error);
+    }
 }
 
-// Function to start recording
+// Function to Test Model
+async function testModel() {
+    try {
+        document.getElementById("status").innerText = "⏳ Running test...";
+        let output = await transcriber("https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav");
+        document.getElementById("output").innerText = "Test Passed: " + output.text;
+        document.getElementById("status").innerText = "✅ Model Test Passed!";
+    } catch (error) {
+        document.getElementById("status").innerText = "❌ Model Test Failed!";
+        document.getElementById("error").innerText = error.message;
+        console.error("Test Error:", error);
+    }
+}
+
+// Function to Start Recording
 async function startRecording() {
     let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
     mediaRecorder = new MediaRecorder(stream);
@@ -41,6 +64,7 @@ async function startRecording() {
                 document.getElementById("status").innerText = "✅ Done!";
             } catch (error) {
                 document.getElementById("status").innerText = "❌ Error during transcription.";
+                document.getElementById("error").innerText = error.message;
                 console.error(error);
             }
         };
@@ -55,7 +79,7 @@ async function startRecording() {
     document.getElementById("status").innerText = "🎙️ Recording...";
 }
 
-// Function to stop recording
+// Function to Stop Recording
 function stopRecording() {
     if (mediaRecorder && recording) {
         mediaRecorder.stop();
@@ -65,7 +89,7 @@ function stopRecording() {
     }
 }
 
-// Toggle recording
+// Attach event listeners
 document.getElementById("recordButton").addEventListener("click", () => {
     if (!recording) {
         startRecording();
@@ -74,5 +98,7 @@ document.getElementById("recordButton").addEventListener("click", () => {
     }
 });
 
-// Load the model on page load
+document.getElementById("testModel").addEventListener("click", testModel);
+
+// Load model on page start
 loadModel();