Spaces:

krishna195
/

just

Running

App Files Files Community

krishna195 commited on 25 days ago

Commit

67c5c5d

verified ·

1 Parent(s): 024f95f

Update index.html

Browse files

Files changed (1) hide show

index.html +109 -61

index.html CHANGED Viewed

@@ -9,61 +9,7 @@
     <!-- Import the pipeline from transformers.js -->
     <script type="module">
         import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
-        window.pipeline = pipeline;
-    </script>
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    <style>
-        /* Chat message styling */
-        .user-message {
-            text-align: right;
-            color: #004085;
-            margin: 10px 0;
-            padding: 10px;
-            border-radius: 15px;
-            background-color: #d1ecf1;
-            max-width: 75%;
-            margin-left: auto;
-            font-family: Arial, sans-serif;
-        }
-        .bot-message {
-            text-align: left;
-            color: #155724;
-            margin: 10px 0;
-            padding: 10px;
-            border-radius: 15px;
-            background-color: #d4edda;
-            max-width: 75%;
-            margin-right: auto;
-            font-family: Arial, sans-serif;
-        }
-        /* Scrollbar styling */
-        #chat-container::-webkit-scrollbar {
-            width: 6px;
-        }
-        #chat-container::-webkit-scrollbar-thumb {
-            background: #888;
-            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;
@@ -71,16 +17,20 @@
         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;
@@ -89,43 +39,63 @@
             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);
@@ -134,26 +104,104 @@
             };
         }
         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>

     <!-- Import the pipeline from transformers.js -->
     <script type="module">
         import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
         let transcriber, generator;
         let isRecording = false;
         let mediaRecorder;
         async function initializeModels() {
             try {
+                console.log("Loading models...");
                 transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en');
+                console.log("Transcriber model loaded successfully.");
                 generator = await pipeline('text2text-generation', 'Xenova/LaMini-Flan-T5-783M');
+                console.log("Generator model loaded successfully.");
             } catch (error) {
                 console.error("Error loading models:", error);
+                displayMessage("Error loading models. Try refreshing the page.", 'bot-message');
             }
         }
+        // Display message in the chat container
         function displayMessage(message, className) {
             const messageElement = document.createElement('div');
             messageElement.className = className;
             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 = "⏹️"; // Stop icon
+                startRecording();
+            } else {
+                document.getElementById('record-button').innerText = "🎙️"; // 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);
             };
         }
+        // Generate a response using text generation model
         async function generateResponse(inputText) {
+            if (!generator) {
+                console.error("Generator model is not loaded yet.");
+                displayMessage("Error: Model still loading. Please wait.", 'bot-message');
+                return;
+            }
             try {
                 console.log("Generating response for input:", inputText);
                 const result = await generator(inputText, { max_new_tokens: 100 });
+                const generatedText = result[0]?.generated_text || "I couldn't generate a response.";
+                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.", '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);
     </script>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        /* Chat message styling */
+        .user-message {
+            text-align: right;
+            color: #004085;
+            margin: 10px 0;
+            padding: 10px;
+            border-radius: 15px;
+            background-color: #d1ecf1;
+            max-width: 75%;
+            margin-left: auto;
+            font-family: Arial, sans-serif;
+        }
+        .bot-message {
+            text-align: left;
+            color: #155724;
+            margin: 10px 0;
+            padding: 10px;
+            border-radius: 15px;
+            background-color: #d4edda;
+            max-width: 75%;
+            margin-right: auto;
+            font-family: Arial, sans-serif;
+        }
+        /* Scrollbar styling */
+        #chat-container {
+            height: 70vh;
+            overflow-y: auto;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        #chat-container::-webkit-scrollbar {
+            width: 6px;
+        }
+        #chat-container::-webkit-scrollbar-thumb {
+            background: #888;
+            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>
+        <!-- Chatbot Interface -->
+        <div id="chat-container" class="p-3">
+            <!-- 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>
 </body>
 </html>