Update script.js

script.js

@@ -1,105 +1,122 @@
-let transcriber;
-let recording = false;
+let transcriber, generator;
+let isRecording = false;
 let mediaRecorder;
 let audioChunks = [];
 
-// Function to Load Model
-async function loadModel() {
-    document.getElementById("modelStatus").innerText = "⏳ Loading Whisper model...";
+// Initialize models
+async function initializeModels() {
     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").disabled = false;
-        document.getElementById("recordButton").innerText = "🎤 Start Recording";
-        document.getElementById("testModel").disabled = false;
+        console.log("Loading transcriber model...");
+        transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en');
+        console.log("Transcriber model loaded successfully:", transcriber);
+
+        console.log("Loading generator model...");
+        generator = await pipeline('text2text-generation', 'Xenova/LaMini-Flan-T5-783M');
+        console.log("Generator model loaded successfully:", generator);
     } catch (error) {
-        document.getElementById("modelStatus").innerText = "❌ Model failed to load!";
-        document.getElementById("error").innerText = error.message;
-        console.error("Error loading model:", error);
+        console.error("Error loading models:", error);
+        displayMessage("Error loading models.", 'bot-message');
     }
 }
 
-// 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);
+// Display message in the chat container
+function displayMessage(message, className) {
+    const messageElement = document.createElement('div');
+    messageElement.className = className;
+    messageElement.innerText = message;
+    document.getElementById('chat-container').appendChild(messageElement);
+    document.getElementById('chat-container').scrollTop = document.getElementById('chat-container').scrollHeight;
+}
+
+// Handle user text input
+async function handleUserInput() {
+    const userInput = document.getElementById('user-input').value.trim();
+    if (!userInput) return;
+    
+    displayMessage("You: " + userInput, 'user-message');
+    document.getElementById('user-input').value = "";
+
+    await generateResponse(userInput);
+}
+
+// Toggle recording
+async function toggleRecording() {
+    isRecording = !isRecording;
+
+    if (isRecording) {
+        document.getElementById('record-button').innerText = "⏹️"; // Change to Stop icon
+        startRecording();
+    } else {
+        document.getElementById('record-button').innerText = "🎙️"; // Change to Mic icon
+        stopRecording();
     }
 }
 
-// Function to Start Recording
+// Start audio recording
 async function startRecording() {
-    let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    mediaRecorder = new MediaRecorder(stream);
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        mediaRecorder = new MediaRecorder(stream);
+        audioChunks = [];
 
-    mediaRecorder.ondataavailable = (event) => {
-        audioChunks.push(event.data);
-    };
+        mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
+        mediaRecorder.start();
+        console.log("Recording started.");
+    } catch (error) {
+        console.error("Error starting recording:", error);
+        displayMessage("Error starting recording.", 'bot-message');
+    }
+}
 
+// Stop recording and transcribe
+async function stopRecording() {
+    mediaRecorder.stop();
     mediaRecorder.onstop = async () => {
-        let audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-        let reader = new FileReader();
-
-        reader.onloadend = async () => {
-            let audioURL = reader.result;
-            document.getElementById("status").innerText = "⏳ Transcribing...";
-
-            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.";
-                document.getElementById("error").innerText = error.message;
-                console.error(error);
-            }
-        };
-
-        reader.readAsDataURL(audioBlob);
+        const audioBlob = new Blob(audioChunks);
+        const url = URL.createObjectURL(audioBlob);
+
+        try {
+            console.log("Transcribing audio...");
+            const result = await transcriber(url);
+            const transcribedText = result?.text || "Error in transcription.";
+            console.log("Transcription result:", transcribedText);
+
+            // Display transcribed text
+            displayMessage("You (voice): " + transcribedText, 'user-message');
+
+            // Generate response based on transcribed text
+            await generateResponse(transcribedText);
+        } catch (error) {
+            console.error("Error in transcription:", error);
+            displayMessage("Error in transcription.", 'bot-message');
+        }
     };
-
-    mediaRecorder.start();
-    audioChunks = [];
-    recording = true;
-    document.getElementById("recordButton").innerText = "⏹ Stop Recording";
-    document.getElementById("status").innerText = "🎙️ Recording...";
 }
 
-// Function to Stop Recording
-function stopRecording() {
-    if (mediaRecorder && recording) {
-        mediaRecorder.stop();
-        recording = false;
-        document.getElementById("recordButton").innerText = "🎤 Start Recording";
-        document.getElementById("status").innerText = "⏳ Processing audio...";
-    }
-}
+// Generate a response using text generation model
+async function generateResponse(inputText) {
+    console.log("Generating response for input:", inputText);
 
-// Attach event listeners
-document.getElementById("recordButton").addEventListener("click", () => {
-    if (!recording) {
-        startRecording();
-    } else {
-        stopRecording();
+    try {
+        console.log("Input text before sending to generator:", inputText);
+        
+        const result = await generator(inputText, { max_new_tokens: 100 });
+        const generatedText = result;
+        console.log("Generated response text:", generatedText);
+
+        displayMessage("Bot: " + generatedText, 'bot-message');
+        speakText(generatedText);
+    } catch (error) {
+        console.error("Error in response generation:", error);
+        displayMessage("Error in response generation: " + error.message, 'bot-message');
     }
-});
-
-document.getElementById("testModel").addEventListener("click", testModel);
+}
 
-// Load model on page start
-loadModel();
+// Speak the generated text
+function speakText(text) {
+    const utterance = new SpeechSynthesisUtterance(text);
+    window.speechSynthesis.speak(utterance);
+}
 
+// Initialize models when the page loads
+window.addEventListener("DOMContentLoaded", initializeModels);