Spaces:

HARISARAVANANM
/

Chatbot

Running

App Files Files Community

HARISARAVANANM commited on Jan 4

Commit

6c4a2c2

verified ·

1 Parent(s): b0bc8fa

Update index.html

Browse files

Files changed (1) hide show

index.html +28 -333

index.html CHANGED Viewed

@@ -3,352 +3,47 @@
 <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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chatbot - Smart Conversations</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <div class="container">
         <div class="header">
+            <div class="header-top">
+                <h1 class="title">✨ Neural Chat</h1>
+                <p class="subtitle">AI-Powered Conversations</p>
+            </div>
+            <div class="status-bar">
+                <span class="status-dot"></span>
+                <p id="status">Initializing...</p>
+            </div>
         </div>
         <div class="chat-area" id="chatArea">
             <div class="empty-state">
+                <div class="empty-icon">💬</div>
+                <p>Start an intelligent conversation</p>
+                <small>Powered by Advanced AI</small>
             </div>
         </div>
+        <div class="input-container">
+            <div class="input-area">
+                <input
+                    type="text"
+                    id="userInput"
+                    placeholder="Ask me anything..."
+                    disabled
+                    autocomplete="off"
+                >
+                <button id="sendBtn" class="send-button" disabled>
+                    <span class="send-icon">⚡</span>
+                </button>
+            </div>
+            <p class="hint">Press Enter to send • First load takes 20-30 seconds</p>
         </div>
     </div>
+    <script src="script.js"></script>
 </body>
 </html>