Spaces:
Running
Running
| let transcriber, generator; | |
| let isRecording = false; | |
| let mediaRecorder; | |
| let audioChunks = []; | |
| // Initialize models | |
| async function initializeModels() { | |
| try { | |
| 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) { | |
| console.error("Error loading models:", error); | |
| displayMessage("Error loading models.", 'bot-message'); | |
| } | |
| } | |
| // 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(); | |
| } | |
| } | |
| // Start audio recording | |
| async function startRecording() { | |
| try { | |
| const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); | |
| mediaRecorder = new MediaRecorder(stream); | |
| audioChunks = []; | |
| 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 () => { | |
| 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'); | |
| } | |
| }; | |
| } | |
| // Generate a response using text generation model | |
| async function generateResponse(inputText) { | |
| console.log("Generating response for input:", inputText); | |
| 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'); | |
| } | |
| } | |
| // 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); |