Spaces:

krishna195
/

just

Running

App Files Files Community

krishna195 commited on Apr 3

Commit

024f95f

verified ·

1 Parent(s): 9b2050e

Update index.html

Browse files

Files changed (1) hide show

index.html +108 -23

index.html CHANGED Viewed

@@ -14,28 +14,7 @@
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-</head>
-<body style="font-family: Arial, sans-serif;">
-    <div class="container mt-5" style="max-width: 800px; margin: 0 auto;">
-        <h1 class="text-center mb-4" style="font-weight: bold; color: #333;">Conversational Voice Chatbot</h1>
-        <!-- Chatbot Interface -->
-        <div id="chat-container" class="p-3" style="height: 70vh; overflow-y: auto;">
-            <!-- Chat messages will appear here -->
-        </div>
-        <!-- Input and Button Section -->
-        <div class="input-group mt-3">
-            <input id="user-input" type="text" class="form-control" placeholder="Type your message..." />
-            <button id="send-button" class="btn btn-primary" onclick="handleUserInput()">Send</button>
-            <button id="record-button" class="btn btn-secondary" onclick="toggleRecording()">🎙️</button>
-        </div>
-    </div>
-    <!-- External JavaScript -->
-    <script src="script.js"></script>
     <style>
         /* Chat message styling */
         .user-message {
@@ -69,6 +48,112 @@
             border-radius: 10px;
         }
     </style>
 </body>
-</html>

     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         /* Chat message styling */
         .user-message {
             border-radius: 10px;
         }
     </style>
+</head>
+<body style="font-family: Arial, sans-serif;">
+    <div class="container mt-5" style="max-width: 800px; margin: 0 auto;">
+        <h1 class="text-center mb-4" style="font-weight: bold; color: #333;">Conversational Voice Chatbot</h1>
+        <div id="chat-container" class="p-3" style="height: 70vh; overflow-y: auto;"></div>
+        <div class="input-group mt-3">
+            <input id="user-input" type="text" class="form-control" placeholder="Type your message..." />
+            <button id="send-button" class="btn btn-primary" onclick="handleUserInput()">Send</button>
+            <button id="record-button" class="btn btn-secondary" onclick="toggleRecording()">🎙️</button>
+        </div>
+    </div>
+    <script>
+        let transcriber, generator;
+        let isRecording = false;
+        let mediaRecorder;
+        let audioChunks = [];
+        async function initializeModels() {
+            try {
+                console.log("Loading transcriber model...");
+                transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en');
+                console.log("Loading generator model...");
+                generator = await pipeline('text2text-generation', 'Xenova/LaMini-Flan-T5-783M');
+            } catch (error) {
+                console.error("Error loading models:", error);
+                displayMessage("Error loading models.", 'bot-message');
+            }
+        }
+        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;
+        }
+        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);
+        }
+        async function toggleRecording() {
+            isRecording = !isRecording;
+            document.getElementById('record-button').innerText = isRecording ? "⏹️" : "🎙️";
+            isRecording ? startRecording() : stopRecording();
+        }
+        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();
+            } catch (error) {
+                console.error("Error starting recording:", error);
+                displayMessage("Error starting recording.", 'bot-message');
+            }
+        }
+        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.";
+                    displayMessage("You (voice): " + transcribedText, 'user-message');
+                    await generateResponse(transcribedText);
+                } catch (error) {
+                    console.error("Error in transcription:", error);
+                    displayMessage("Error in transcription.", 'bot-message');
+                }
+            };
+        }
+        async function generateResponse(inputText) {
+            try {
+                console.log("Generating response for input:", inputText);
+                const result = await generator(inputText, { max_new_tokens: 100 });
+                const generatedText = result;
+                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');
+            }
+        }
+        function speakText(text) {
+            const utterance = new SpeechSynthesisUtterance(text);
+            window.speechSynthesis.speak(utterance);
+        }
+        window.addEventListener("DOMContentLoaded", initializeModels);
+    </script>
 </body>
+</html>