Spaces:

krishna195
/

just

Running

App Files Files Community

krishna195 commited on 23 days ago

Commit

5e20069

verified ·

1 Parent(s): 67c5c5d

Update index.html

Browse files

Files changed (1) hide show

index.html +38 -118

index.html CHANGED Viewed

@@ -4,33 +4,50 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Conversational Chatbot with Voice Input</title>
     <!-- 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;
-        let audioChunks = [];
-        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;
@@ -39,7 +56,7 @@
             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;
@@ -50,96 +67,28 @@
             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);
-                    displayMessage("Error in transcription.", 'bot-message');
-                }
-            };
-        }
-        // 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 {
@@ -153,7 +102,6 @@
             margin-left: auto;
             font-family: Arial, sans-serif;
         }
         .bot-message {
             text-align: left;
             color: #155724;
@@ -165,43 +113,15 @@
             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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Text Generation Chatbot</title>
     <!-- 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">
+</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;">AI 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>
+        </div>
+    </div>
+    <script>
+        let generator;
+        // Initialize the text-to-text model
+        async function initializeModel() {
+            try {
+                console.log("Loading text generation model...");
                 generator = await pipeline('text2text-generation', 'Xenova/LaMini-Flan-T5-783M');
+                console.log("Model loaded successfully!");
             } catch (error) {
+                console.error("Error loading model:", error);
+                displayMessage("Error loading model.", 'bot-message');
             }
         }
+        // Display message in chat
         function displayMessage(message, className) {
             const messageElement = document.createElement('div');
             messageElement.className = className;
             document.getElementById('chat-container').scrollTop = document.getElementById('chat-container').scrollHeight;
         }
+        // Handle user input
         async function handleUserInput() {
             const userInput = document.getElementById('user-input').value.trim();
             if (!userInput) return;
             await generateResponse(userInput);
         }
+        // Generate response
         async function generateResponse(inputText) {
             if (!generator) {
+                displayMessage("Model is still loading. Please wait...", 'bot-message');
                 return;
             }
             try {
+                console.log("Generating response...");
                 const result = await generator(inputText, { max_new_tokens: 100 });
+                const generatedText = result[0]?.generated_text || "Sorry, I couldn't generate a response.";
                 displayMessage("Bot: " + generatedText, 'bot-message');
             } catch (error) {
                 console.error("Error in response generation:", error);
                 displayMessage("Error in response generation.", 'bot-message');
             }
         }
+        // Load model on page load
+        window.addEventListener("DOMContentLoaded", initializeModel);
     </script>
     <style>
         /* Chat message styling */
         .user-message {
             margin-left: auto;
             font-family: Arial, sans-serif;
         }
         .bot-message {
             text-align: left;
             color: #155724;
             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>
 </body>
 </html>