Spaces:

krishna195
/

just

Running

App Files Files Community

krishna195 commited on 23 days ago

Commit

3952763

verified ·

1 Parent(s): 1e483c6

Update index.html

Browse files

Files changed (1) hide show

index.html +29 -109

index.html CHANGED Viewed

@@ -3,135 +3,55 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Chatbot</title>
-    <!-- Import the pipeline from transformers.js -->
     <script type="module">
-        import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
-        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>
-        <!-- Model Loading Status -->
-        <div id="loading-status" class="alert alert-warning text-center">⏳ Please wait, model is loading...</div>
-        <!-- Chatbot Interface -->
-        <div id="chat-container" class="p-3" style="height: 70vh; overflow-y: auto; background: #f8f9fa; border-radius: 10px; border: 1px solid #ddd;">
-            <!-- 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..." disabled />
-            <button id="send-button" class="btn btn-primary" onclick="handleUserInput()" disabled>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!");
-                // Update UI when model is loaded
-                document.getElementById('loading-status').className = "alert alert-success text-center";
-                document.getElementById('loading-status').innerHTML = "✅ Model Loaded! You can start chatting.";
-                // Enable input fields
-                document.getElementById('user-input').disabled = false;
-                document.getElementById('send-button').disabled = false;
             } catch (error) {
                 console.error("Error loading model:", error);
-                document.getElementById('loading-status').className = "alert alert-danger text-center";
-                document.getElementById('loading-status').innerHTML = "❌ Error loading model. Please refresh.";
             }
         }
-        // Display message in chat
-        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 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);
-        }
-        // 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 {
-            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>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Text-to-Text Generation</title>
     <script type="module">
+        import { pipeline } from '@huggingface/transformers';
+        let generator = null; // Global model reference
+        async function loadModel() {
+            const status = document.getElementById("status");
+            status.innerText = "🟡 Loading text generation model... Please wait.";
             try {
+                generator = await pipeline('text2text-generation', 'Xenova/LaMini-Flan-T5-783M', { quantized: true });
+                status.innerText = "✅ Model loaded! You can start the conversation.";
+                status.style.color = "green";
             } catch (error) {
+                status.innerText = "❌ Model failed to load. Check the console.";
                 console.error("Error loading model:", error);
             }
         }
+        async function generateText() {
+            const inputText = document.getElementById("userInput").value;
+            const outputDiv = document.getElementById("output");
             if (!generator) {
+                outputDiv.innerText = "❌ Model not loaded yet!";
                 return;
             }
+            outputDiv.innerText = "⏳ Generating response...";
             try {
+                const response = await generator(inputText);
+                outputDiv.innerText = "🤖 AI: " + response[0].generated_text;
             } catch (error) {
+                outputDiv.innerText = "❌ Error in response generation.";
+                console.error("Generation error:", error);
             }
         }
+        window.onload = loadModel;
     </script>
+</head>
+<body>
+    <h1>Text-to-Text Generation (Xenova/LaMini-Flan-T5-783M)</h1>
+    <p id="status" style="color: orange;">🟡 Initializing...</p>
+    <input type="text" id="userInput" placeholder="Type something..." />
+    <button onclick="generateText()">Generate</button>
+    <p id="output"></p>
 </body>
 </html>