Spaces:
Running
Running
| <html lang="en" class="h-full"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MindMeld Chatbot Wizard</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| </head> | |
| <body class="bg-gray-100 dark:bg-gray-900 h-full"> | |
| <custom-navbar></custom-navbar> | |
| <div class="container mx-auto px-4 py-8 h-[calc(100%-64px)]"> | |
| <div class="flex flex-col h-full"> | |
| <!-- Chat container --> | |
| <div class="flex-1 overflow-y-auto mb-4 rounded-lg shadow-lg bg-white dark:bg-gray-800 p-4" id="chat-container"> | |
| <div class="text-center py-12"> | |
| <div class="mx-auto w-24 h-24 bg-indigo-100 dark:bg-indigo-900 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="zap" class="w-12 h-12 text-indigo-600 dark:text-indigo-300"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800 dark:text-white">DeepSeek Chat</h2> | |
| <p class="text-gray-600 dark:text-gray-300 mt-2">Ask me anything, or try uploading an image!</p> | |
| </div> | |
| </div> | |
| <!-- Input area --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition"> | |
| <i data-feather="plus" class="text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| <button id="upload-btn" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition"> | |
| <i data-feather="image" class="text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| <input type="file" id="file-input" class="hidden" accept="image/*"> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <input type="text" id="user-input" | |
| class="flex-1 p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500" | |
| placeholder="Type your message..." autocomplete="off"> | |
| <button id="send-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition flex items-center"> | |
| <i data-feather="send" class="mr-2"></i> Send | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="components/navbar.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Initialize with DeepSeek Chat API | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const chatContainer = document.getElementById('chat-container'); | |
| const userInput = document.getElementById('user-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const uploadBtn = document.getElementById('upload-btn'); | |
| const fileInput = document.getElementById('file-input'); | |
| // Simple chat functionality | |
| sendBtn.addEventListener('click', sendMessage); | |
| userInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') sendMessage(); | |
| }); | |
| // File upload functionality | |
| uploadBtn.addEventListener('click', function() { | |
| fileInput.click(); | |
| }); | |
| fileInput.addEventListener('change', function(e) { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| handleFileUpload(file); | |
| } | |
| }); | |
| async function sendMessage() { | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| addMessage('user', message); | |
| userInput.value = ''; | |
| // Show loading state | |
| const loadingDiv = document.createElement('div'); | |
| loadingDiv.className = 'flex justify-start mb-4'; | |
| loadingDiv.innerHTML = ` | |
| <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-lg rounded-bl-none p-3 max-w-xs"> | |
| <div class="flex space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce"></div> | |
| <div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.2s"></div> | |
| <div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.4s"></div> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(loadingDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| try { | |
| const response = await callChatAPI(message); | |
| loadingDiv.remove(); | |
| addMessage('bot', response); | |
| } catch (error) { | |
| loadingDiv.remove(); | |
| addMessage('bot', "Sorry, I encountered an error processing your request. Please try again."); | |
| console.error(error); | |
| } | |
| } | |
| } | |
| function addMessage(sender, content) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex mb-4 ${sender === 'user' ? 'justify-end' : 'justify-start'}`; | |
| const bubble = document.createElement('div'); | |
| bubble.className = `max-w-xs md:max-w-md lg:max-w-lg rounded-lg p-3 ${sender === 'user' | |
| ? 'bg-indigo-600 text-white rounded-br-none' | |
| : 'bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-bl-none'}`; | |
| bubble.innerHTML = marked.parse(content); | |
| messageDiv.appendChild(bubble); | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| async function handleFileUpload(file) { | |
| if (file.type.match('image.*')) { | |
| const reader = new FileReader(); | |
| reader.onload = async function(e) { | |
| addMessage('user', `<img src="${e.target.result}" class="max-w-full h-auto rounded-lg" alt="Uploaded image">`); | |
| // Show loading state | |
| const loadingDiv = document.createElement('div'); | |
| loadingDiv.className = 'flex justify-start mb-4'; | |
| loadingDiv.innerHTML = ` | |
| <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-lg rounded-bl-none p-3 max-w-xs"> | |
| <div class="flex space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce"></div> | |
| <div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.2s"></div> | |
| <div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.4s"></div> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(loadingDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| try { | |
| const base64Image = await fileToBase64(file); | |
| const response = await callChatAPI("", base64Image); | |
| loadingDiv.remove(); | |
| addMessage('bot', response); | |
| } catch (error) { | |
| loadingDiv.remove(); | |
| addMessage('bot', "Sorry, I couldn't process that image. Please try another one."); | |
| console.error(error); | |
| } | |
| }; | |
| reader.readAsDataURL(file); | |
| } else { | |
| alert('Please upload an image file.'); | |
| } | |
| } | |
| }); | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/@deepseek/web@latest/dist/deepseek.min.js"></script> | |
| </body> | |
| </html> |