Spaces:

HARISARAVANANM
/

Chatbot

Running

App Files Files Community

HARISARAVANANM commited on Jan 4

Commit

b0bc8fa

verified ·

1 Parent(s): 6cb08b3

Update index.html

Browse files

Files changed (1) hide show

index.html +346 -21

index.html CHANGED Viewed

@@ -1,29 +1,354 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Transformers.js - Object Detection</title>
-</head>
 <body>
-    <h1>Object Detection w/ 🤗 Transformers.js</h1>
-    <label id="container" for="upload">
-        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#000"
-                d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
-            </path>
-        </svg>
-        Click to upload image
-        <label id="example">(or try example)</label>
-    </label>
-    <label id="status">Loading model...</label>
-    <input id="upload" type="file" accept="image/*" />
-    <script src="index.js" type="module"></script>
-</body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chatbot</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        .container {
+            width: 100%;
+            max-width: 600px;
+            height: 600px;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            text-align: center;
+        }
+        .header h1 {
+            font-size: 24px;
+            margin-bottom: 5px;
+        }
+        .header p {
+            font-size: 12px;
+            opacity: 0.9;
+        }
+        .chat-area {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            background: #f5f5f5;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .message {
+            display: flex;
+            margin-bottom: 10px;
+            animation: slideIn 0.3s ease-in-out;
+        }
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .user-message {
+            justify-content: flex-end;
+        }
+        .user-message .text {
+            background: #667eea;
+            color: white;
+            padding: 12px 15px;
+            border-radius: 15px 15px 0 15px;
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .bot-message {
+            justify-content: flex-start;
+        }
+        .bot-message .text {
+            background: white;
+            color: #333;
+            padding: 12px 15px;
+            border-radius: 15px 15px 15px 0;
+            max-width: 80%;
+            word-wrap: break-word;
+            border: 1px solid #e0e0e0;
+        }
+        .loading {
+            display: flex;
+            gap: 5px;
+            align-items: center;
+        }
+        .loading span {
+            width: 8px;
+            height: 8px;
+            background: #667eea;
+            border-radius: 50%;
+            animation: bounce 1.4s infinite;
+        }
+        .loading span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .loading span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes bounce {
+            0%, 80%, 100% {
+                opacity: 0.3;
+                transform: translateY(0);
+            }
+            40% {
+                opacity: 1;
+                transform: translateY(-10px);
+            }
+        }
+        .input-area {
+            padding: 15px;
+            background: white;
+            border-top: 1px solid #e0e0e0;
+            display: flex;
+            gap: 10px;
+        }
+        input {
+            flex: 1;
+            border: 1px solid #e0e0e0;
+            border-radius: 25px;
+            padding: 10px 15px;
+            font-size: 14px;
+            outline: none;
+            transition: border-color 0.3s;
+        }
+        input:focus {
+            border-color: #667eea;
+        }
+        button {
+            background: #667eea;
+            color: white;
+            border: none;
+            border-radius: 25px;
+            padding: 10px 25px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: background 0.3s;
+        }
+        button:hover {
+            background: #764ba2;
+        }
+        button:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+        }
+        .empty-state {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            color: #999;
+            text-align: center;
+        }
+        .empty-state p {
+            font-size: 14px;
+        }
+    </style>
+</head>
 <body>
+    <div class="container">
+        <div class="header">
+            <h1>🤖 AI Chatbot</h1>
+            <p>Powered by Transformers.js</p>
+        </div>
+        <div class="chat-area" id="chatArea">
+            <div class="empty-state">
+                <p>Start a conversation!</p>
+            </div>
+        </div>
+        <div class="input-area">
+            <input
+                type="text"
+                id="userInput"
+                placeholder="Type your message..."
+                autocomplete="off"
+            >
+            <button id="sendBtn" onclick="sendMessage()">Send</button>
+        </div>
+    </div>
+    <script type="module">
+        import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0';
+        let chatHistory = [];
+        let isLoading = false;
+        let generator = null;
+        const chatArea = document.getElementById('chatArea');
+        const userInput = document.getElementById('userInput');
+        const sendBtn = document.getElementById('sendBtn');
+        // Initialize the model
+        async function initModel() {
+            console.log('Loading model...');
+            sendBtn.disabled = true;
+            sendBtn.textContent = 'Loading...';
+            try {
+                generator = await pipeline(
+                    'text-generation',
+                    'Xenova/distilgpt2'
+                );
+                sendBtn.disabled = false;
+                sendBtn.textContent = 'Send';
+                console.log('Model loaded successfully!');
+            } catch (error) {
+                console.error('Error loading model:', error);
+                sendBtn.textContent = 'Error Loading Model';
+            }
+        }
+        // Send message function
+        window.sendMessage = async function() {
+            const message = userInput.value.trim();
+            if (!message || isLoading || !generator) return;
+            // Add user message to chat
+            addMessage(message, 'user');
+            userInput.value = '';
+            isLoading = true;
+            sendBtn.disabled = true;
+            // Add loading indicator
+            const loadingDiv = document.createElement('div');
+            loadingDiv.className = 'message bot-message';
+            loadingDiv.innerHTML = '<div class="text"><div class="loading"><span></span><span></span><span></span></div></div>';
+            chatArea.appendChild(loadingDiv);
+            chatArea.scrollTop = chatArea.scrollHeight;
+            try {
+                // Prepare input with conversation history
+                let inputText = message;
+                if (chatHistory.length > 0) {
+                    const recentHistory = chatHistory.slice(-4).map(m => `${m.role}: ${m.content}`).join('\n');
+                    inputText = `${recentHistory}\nUser: ${message}\nAssistant:`;
+                } else {
+                    inputText = `User: ${message}\nAssistant:`;
+                }
+                // Generate response
+                const result = await generator(inputText, {
+                    max_new_tokens: 100,
+                    temperature: 0.7,
+                    top_p: 0.9,
+                });
+                let response = result[0].generated_text;
+                // Extract only the assistant's response
+                const assistantIndex = response.lastIndexOf('Assistant:');
+                if (assistantIndex !== -1) {
+                    response = response.substring(assistantIndex + 10).trim();
+                }
+                // Clean up response
+                response = response.split('\n')[0].trim();
+                if (!response) {
+                    response = "I'm not sure how to respond to that. Could you rephrase?";
+                }
+                // Remove loading indicator
+                loadingDiv.remove();
+                // Add bot response
+                addMessage(response, 'bot');
+            } catch (error) {
+                console.error('Error generating response:', error);
+                loadingDiv.remove();
+                addMessage('Sorry, I encountered an error. Please try again.', 'bot');
+            }
+            isLoading = false;
+            sendBtn.disabled = false;
+        };
+        // Add message to chat
+        function addMessage(text, role) {
+            chatHistory.push({ role, content: text });
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${role === 'user' ? 'user-message' : 'bot-message'}`;
+            messageDiv.innerHTML = `<div class="text">${escapeHtml(text)}</div>`;
+            chatArea.appendChild(messageDiv);
+            chatArea.scrollTop = chatArea.scrollHeight;
+        }
+        // Escape HTML to prevent XSS
+        function escapeHtml(text) {
+            const map = {
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#039;'
+            };
+            return text.replace(/[&<>"']/g, m => map[m]);
+        }
+        // Handle Enter key
+        userInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !isLoading) {
+                sendMessage();
+            }
+        });
+        // Initialize on load
+        window.addEventListener('load', initModel);
+    </script>
+</body>
 </html>