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>DeepSeek Chat</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| deepseek: { | |
| light: '#4f46e5', | |
| dark: '#3730a3', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .chat-container { | |
| height: calc(100vh - 140px); | |
| } | |
| @media (min-width: 768px) { | |
| .chat-container { | |
| height: calc(100vh - 120px); | |
| } | |
| } | |
| .message-bubble { | |
| max-width: 90%; | |
| } | |
| @media (min-width: 768px) { | |
| .message-bubble { | |
| max-width: 80%; | |
| } | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| width: 0; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .message-bubble { | |
| max-width: 80%; | |
| } | |
| .dark .message-user { | |
| background-color: #3730a3; | |
| color: white; | |
| } | |
| .dark .message-assistant { | |
| background-color: #1e1b4b; | |
| color: white; | |
| } | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| background-color: #4f46e5; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #3730a3; | |
| } | |
| </style> | |
| </head> | |
| <body class="h-full bg-gray-100 dark:bg-gray-900 transition-colors duration-300"> | |
| <div class="flex h-full overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col"> | |
| <!-- Header --> | |
| <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between"> | |
| <h2 class="text-xl font-bold text-gray-800 dark:text-white">DeepSeek Chat</h2> | |
| <button id="sidebar-toggle" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"> | |
| <i class="fas fa-times md:hidden"></i> | |
| </button> | |
| </div> | |
| <!-- New Chat Button --> | |
| <div class="p-4"> | |
| <button class="w-full bg-deepseek-light dark:bg-deepseek-dark text-white py-2 px-4 rounded-full hover:bg-indigo-600 dark:hover:bg-indigo-700 transition-colors flex items-center justify-center gap-2"> | |
| <i class="fas fa-plus"></i> | |
| <span>New Chat</span> | |
| </button> | |
| </div> | |
| <!-- Chat History --> | |
| <div class="flex-1 overflow-y-auto"> | |
| <h3 class="px-4 py-2 text-gray-500 dark:text-gray-400 font-medium">Recent Chats</h3> | |
| <ul> | |
| <li class="px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer flex items-center gap-3"> | |
| <i class="fas fa-comment text-gray-400"></i> | |
| <span class="text-gray-700 dark:text-gray-300 truncate">How to use DeepSeek API</span> | |
| </li> | |
| <li class="px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer flex items-center gap-3"> | |
| <i class="fas fa-comment text-gray-400"></i> | |
| <span class="text-gray-700 dark:text-gray-300 truncate">Python code examples</span> | |
| </li> | |
| <li class="px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer flex items-center gap-3"> | |
| <i class="fas fa-comment text-gray-400"></i> | |
| <span class="text-gray-700 dark:text-gray-300 truncate">DeepSeek R1 vs V3</span> | |
| </li> | |
| <li class="px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer flex items-center gap-3"> | |
| <i class="fas fa-comment text-gray-400"></i> | |
| <span class="text-gray-700 dark:text-gray-300 truncate">GPT-4.1 capabilities</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- User Section --> | |
| <div class="p-4 border-t border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-full bg-deepseek-light dark:bg-deepseek-dark flex items-center justify-center text-white"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-gray-800 dark:text-white font-medium">Guest User</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Free Plan</p> | |
| </div> | |
| <button id="settings-toggle" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Panel --> | |
| <div id="settings-panel" class="sidebar w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col hidden"> | |
| <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between"> | |
| <h2 class="text-xl font-bold text-gray-800 dark:text-white">Settings</h2> | |
| <button id="settings-close" class="text-gray-500 dark:text-gray-400"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 flex-1 overflow-y-auto"> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-4">Appearance</h3> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-gray-700 dark:text-gray-300">Dark Mode</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" id="dark-mode-toggle" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-4">Model Settings</h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Default Model</label> | |
| <select class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>DeepSeek R1</option> | |
| <option>DeepSeek V3</option> | |
| <option>GPT-4.1</option> | |
| <option>GPT-5-mini</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API Key</label> | |
| <input type="password" placeholder="Enter your API key" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-4">Chat Background</h3> | |
| <div class="grid grid-cols-3 gap-2 mb-4"> | |
| <div class="h-16 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 cursor-pointer" onclick="changeBackground('bg-gradient-to-br from-indigo-500 to-purple-600')"></div> | |
| <div class="h-16 rounded-lg bg-gradient-to-br from-blue-500 to-teal-400 cursor-pointer" onclick="changeBackground('bg-gradient-to-br from-blue-500 to-teal-400')"></div> | |
| <div class="h-16 rounded-lg bg-gradient-to-br from-pink-500 to-rose-500 cursor-pointer" onclick="changeBackground('bg-gradient-to-br from-pink-500 to-rose-500')"></div> | |
| <div class="h-16 rounded-lg bg-gray-100 dark:bg-gray-700 cursor-pointer" onclick="changeBackground('bg-gray-100 dark:bg-gray-700')"></div> | |
| <div class="h-16 rounded-lg bg-white dark:bg-gray-800 cursor-pointer" onclick="changeBackground('bg-white dark:bg-gray-800')"></div> | |
| <div class="h-16 rounded-lg bg-black cursor-pointer" onclick="changeBackground('bg-black')"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-4">Account</h3> | |
| <button id="login-register-btn" class="w-full bg-deepseek-light dark:bg-deepseek-dark text-white py-2 px-4 rounded-full hover:bg-indigo-600 dark:hover:bg-indigo-700 transition-colors"> | |
| Login / Register | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Chat Area --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Chat Header --> | |
| <div class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-4 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <button id="mobile-sidebar-toggle" class="md:hidden text-gray-500 dark:text-gray-400"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h2 class="text-xl font-bold text-gray-800 dark:text-white">DeepSeek Chat</h2> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <span class="text-sm text-gray-500 dark:text-gray-400">Model: DeepSeek V3</span> | |
| <button id="model-switcher" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"> | |
| <i class="fas fa-exchange-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat Messages --> | |
| <div class="chat-container overflow-y-auto p-4 bg-gray-50 dark:bg-gray-900"> | |
| <div class="max-w-3xl mx-auto space-y-4"> | |
| <!-- Sample messages --> | |
| <div class="flex justify-start gap-2"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center"> | |
| <img src="https://www.deepseek.com/favicon.ico" alt="AI" class="w-5 h-5"> | |
| </div> | |
| <div class="message-bubble bg-white dark:bg-gray-800 rounded-3xl rounded-tl-none px-3 py-2 md:px-5 md:py-3 shadow-sm border border-gray-200 dark:border-gray-700"> | |
| <p class="text-gray-800 dark:text-gray-200">Hello! I'm DeepSeek AI. How can I help you today?</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end gap-2"> | |
| <div class="message-bubble message-user bg-deepseek-light dark:bg-deepseek-dark rounded-3xl rounded-tr-none px-5 py-3 text-white"> | |
| <p>What's the difference between DeepSeek R1 and V3?</p> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center"> | |
| <img src="https://www.gravatar.com/avatar/default?s=200&d=identicon" alt="User" class="w-5 h-5"> | |
| </div> | |
| </div> | |
| <div class="flex justify-start"> | |
| <div class="message-bubble message-assistant bg-indigo-50 dark:bg-gray-800 rounded-3xl rounded-tl-none px-5 py-3 shadow-sm border border-gray-200 dark:border-gray-700"> | |
| <p class="text-gray-800 dark:text-gray-200">DeepSeek R1 is our earlier model with 1.3B parameters, while V3 is our latest version with 3.7B parameters. V3 has improved reasoning, longer context understanding (up to 8K tokens), and better multilingual support.</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <div class="message-bubble message-user bg-deepseek-light dark:bg-deepseek-dark rounded-3xl rounded-tr-none px-5 py-3 text-white"> | |
| <p>Can I use GPT-4.1 with this interface?</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-start"> | |
| <div class="message-bubble message-assistant bg-indigo-50 dark:bg-gray-800 rounded-3xl rounded-tl-none px-5 py-3 shadow-sm border border-gray-200 dark:border-gray-700"> | |
| <p class="text-gray-800 dark:text-gray-200">Yes! You can switch between models in the settings panel. Just click the gear icon in the bottom left to access model settings and enter your API key for GPT-4.1 if needed.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-2 md:p-4"> | |
| <div class="max-w-3xl mx-auto px-2"> | |
| <form id="chat-form" class="flex items-end gap-2"> | |
| <div class="flex-1 relative"> | |
| <textarea id="message-input" rows="1" placeholder="Type your message..." class="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-2xl px-4 py-3 pr-16 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none" style="min-height: 50px;"></textarea> | |
| <div class="absolute right-3 top-1/2 transform -translate-y-1/2 flex gap-2"> | |
| <input type="file" id="file-upload" class="hidden" accept=".pdf,.doc,.docx,.txt,.csv,.xlsx,.pptx"> | |
| <button type="button" onclick="document.getElementById('file-upload').click()" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <input type="file" id="image-upload" class="hidden" accept="image/*"> | |
| <button type="button" onclick="document.getElementById('image-upload').click()" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-image"></i> | |
| </button> | |
| </div> | |
| <div id="upload-preview" class="mt-2 flex gap-2"></div> | |
| </div> | |
| <button type="submit" class="bg-deepseek-light dark:bg-deepseek-dark text-white w-12 h-12 rounded-full flex items-center justify-center hover:bg-indigo-600 dark:hover:bg-indigo-700 transition-colors" style="min-height: 50px;"> | |
| <i class="fas fa-paper-plane text-lg"></i> | |
| </button> | |
| </form> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">DeepSeek Chat may produce inaccurate information about people, places, or facts.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Login/Register Modal --> | |
| <div id="login-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl w-full max-w-md mx-4 p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800 dark:text-white">Login / Register</h3> | |
| <button id="close-modal" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label> | |
| <input type="email" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter your email"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label> | |
| <input type="password" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter your password"> | |
| </div> | |
| <div class="flex gap-4"> | |
| <button type="button" class="flex-1 bg-deepseek-light dark:bg-deepseek-dark text-white py-3 rounded-xl hover:bg-indigo-600 dark:hover:bg-indigo-700 transition-colors"> | |
| Login | |
| </button> | |
| <button type="button" class="flex-1 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white py-3 rounded-xl hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"> | |
| Register | |
| </button> | |
| </div> | |
| <div class="text-center pt-4"> | |
| <p class="text-sm text-gray-600 dark:text-gray-400"> | |
| By continuing, you agree to our <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Terms of Service</a> | |
| </p> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // API endpoints | |
| const API_PROXY = 'https://your-vercel-app.vercel.app/api/proxy'; | |
| // Login/Register Modal | |
| const loginModal = document.getElementById('login-modal'); | |
| const loginBtn = document.getElementById('login-register-btn'); | |
| const closeModalBtn = document.getElementById('close-modal'); | |
| loginBtn.addEventListener('click', () => { | |
| loginModal.classList.remove('hidden'); | |
| }); | |
| closeModalBtn.addEventListener('click', () => { | |
| loginModal.classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| loginModal.addEventListener('click', (e) => { | |
| if (e.target === loginModal) { | |
| loginModal.classList.add('hidden'); | |
| } | |
| }); | |
| // Toggle dark mode | |
| const darkModeToggle = document.getElementById('dark-mode-toggle'); | |
| const html = document.documentElement; | |
| // Check for saved user preference or use system preference | |
| if (localStorage.getItem('darkMode') === 'true' || | |
| (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| darkModeToggle.checked = true; | |
| } | |
| darkModeToggle.addEventListener('change', () => { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('darkMode', html.classList.contains('dark')); | |
| }); | |
| // Sidebar elements | |
| const sidebarToggle = document.getElementById('mobile-sidebar-toggle'); | |
| const sidebar = document.querySelector('.sidebar:first-of-type'); | |
| const sidebarCloseBtn = document.getElementById('sidebar-toggle'); | |
| const settingsToggle = document.getElementById('settings-toggle'); | |
| const settingsClose = document.getElementById('settings-close'); | |
| const settingsPanel = document.getElementById('settings-panel'); | |
| // Toggle sidebar | |
| function toggleSidebar() { | |
| sidebar.classList.toggle('collapsed'); | |
| if (!sidebar.classList.contains('collapsed')) { | |
| settingsPanel.classList.add('hidden'); | |
| } | |
| } | |
| // Toggle settings panel | |
| function toggleSettingsPanel() { | |
| settingsPanel.classList.toggle('hidden'); | |
| if (!settingsPanel.classList.contains('hidden')) { | |
| sidebar.classList.add('collapsed'); | |
| } | |
| } | |
| // Event listeners | |
| sidebarToggle.addEventListener('click', toggleSidebar); | |
| sidebarCloseBtn.addEventListener('click', toggleSidebar); | |
| settingsToggle.addEventListener('click', toggleSettingsPanel); | |
| settingsClose.addEventListener('click', () => { | |
| settingsPanel.classList.add('hidden'); | |
| sidebar.classList.remove('collapsed'); | |
| }); | |
| // Close sidebar when clicking outside on mobile | |
| document.addEventListener('click', (e) => { | |
| const isMobile = window.innerWidth < 768; | |
| const isSidebarToggle = e.target === sidebarToggle || e.target.closest('#mobile-sidebar-toggle'); | |
| const isSidebarContent = e.target.closest('.sidebar:first-of-type'); | |
| const isSettingsContent = e.target.closest('#settings-panel'); | |
| if (isMobile && !isSidebarToggle && !isSidebarContent && !isSettingsContent) { | |
| sidebar.classList.add('collapsed'); | |
| } | |
| }); | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| if (window.innerWidth >= 768) { | |
| sidebar.classList.remove('collapsed'); | |
| } | |
| }); | |
| // Auto-resize textarea | |
| const textarea = document.querySelector('textarea'); | |
| textarea.addEventListener('input', () => { | |
| textarea.style.height = 'auto'; | |
| textarea.style.height = (textarea.scrollHeight) + 'px'; | |
| }); | |
| // Handle file uploads | |
| const fileUpload = document.getElementById('file-upload'); | |
| const imageUpload = document.getElementById('image-upload'); | |
| const uploadPreview = document.getElementById('upload-preview'); | |
| fileUpload.addEventListener('change', handleFileUpload); | |
| imageUpload.addEventListener('change', handleFileUpload); | |
| function handleFileUpload(e) { | |
| const files = e.target.files; | |
| for (let i = 0; i < files.length; i++) { | |
| const file = files[i]; | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| const previewItem = document.createElement('div'); | |
| previewItem.className = 'flex items-center gap-2 bg-gray-100 dark:bg-gray-700 px-3 py-1 rounded-full'; | |
| if (file.type.startsWith('image/')) { | |
| previewItem.innerHTML = ` | |
| <img src="${event.target.result}" class="w-6 h-6 object-cover rounded-full"> | |
| <span class="text-xs truncate max-w-xs">${file.name}</span> | |
| <button type="button" onclick="this.parentElement.remove()" class="text-gray-500 hover:text-red-500"> | |
| <i class="fas fa-times text-xs"></i> | |
| </button> | |
| `; | |
| } else { | |
| previewItem.innerHTML = ` | |
| <i class="fas fa-file text-indigo-500"></i> | |
| <span class="text-xs truncate max-w-xs">${file.name}</span> | |
| <button type="button" onclick="this.parentElement.remove()" class="text-gray-500 hover:text-red-500"> | |
| <i class="fas fa-times text-xs"></i> | |
| </button> | |
| `; | |
| } | |
| uploadPreview.appendChild(previewItem); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| // Loading indicator element | |
| const loadingIndicator = document.createElement('div'); | |
| loadingIndicator.className = 'flex justify-start gap-2'; | |
| loadingIndicator.innerHTML = ` | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center"> | |
| <img src="https://www.deepseek.com/favicon.ico" alt="AI" class="w-5 h-5"> | |
| </div> | |
| <div class="message-bubble bg-white dark:bg-gray-800 rounded-3xl rounded-tl-none px-5 py-3 shadow-sm border border-gray-200 dark:border-gray-700"> | |
| <div class="flex gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-indigo-300 animate-bounce"></div> | |
| <div class="w-2 h-2 rounded-full bg-indigo-400 animate-bounce" style="animation-delay: 0.2s"></div> | |
| <div class="w-2 h-2 rounded-full bg-indigo-500 animate-bounce" style="animation-delay: 0.4s"></div> | |
| </div> | |
| </div> | |
| `; | |
| // Handle chat form submission | |
| const chatForm = document.getElementById('chat-form'); | |
| chatForm.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const messageInput = document.getElementById('message-input'); | |
| const message = messageInput.value.trim(); | |
| if (!message && uploadPreview.children.length === 0) return; | |
| // Add user message to chat | |
| addMessage(message, 'user'); | |
| messageInput.value = ''; | |
| uploadPreview.innerHTML = ''; | |
| // Show loading indicator | |
| const chatContainer = document.querySelector('.chat-container .space-y-4'); | |
| chatContainer.appendChild(loadingIndicator); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Call API | |
| try { | |
| const response = await fetch(API_PROXY, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| message, | |
| files: Array.from(uploadPreview.children).map(el => { | |
| const img = el.querySelector('img'); | |
| return img ? img.src : null; | |
| }).filter(Boolean) | |
| }) | |
| }); | |
| const data = await response.json(); | |
| loadingIndicator.remove(); | |
| addMessage(data.response, 'assistant'); | |
| } catch (error) { | |
| addMessage("Sorry, I'm having trouble connecting to the server.", 'assistant'); | |
| console.error('API Error:', error); | |
| } | |
| }); | |
| function addMessage(text, sender) { | |
| const chatContainer = document.querySelector('.chat-container .space-y-4'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex justify-${sender === 'user' ? 'end' : 'start'} gap-2`; | |
| if (sender === 'user') { | |
| messageDiv.innerHTML = ` | |
| <div class="message-bubble message-user bg-deepseek-light dark:bg-deepseek-dark rounded-3xl rounded-tr-none px-5 py-3 text-white"> | |
| <p>${text}</p> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center"> | |
| <i class="fas fa-user text-white text-sm"></i> | |
| </div> | |
| `; | |
| } else { | |
| messageDiv.innerHTML = ` | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center"> | |
| <img src="https://deepseek.com/favicon.ico" alt="AI" class="w-5 h-5"> | |
| </div> | |
| <div class="message-bubble bg-white dark:bg-gray-800 rounded-3xl rounded-tl-none px-5 py-3 shadow-sm border border-gray-200 dark:border-gray-700"> | |
| <p class="text-gray-800 dark:text-gray-200">${text}</p> | |
| </div> | |
| `; | |
| } | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| function changeBackground(className) { | |
| const chatContainer = document.querySelector('.chat-container'); | |
| chatContainer.className = `chat-container overflow-y-auto p-4 ${className}`; | |
| localStorage.setItem('chatBackground', className); | |
| } | |
| // Load saved background | |
| const savedBackground = localStorage.getItem('chatBackground'); | |
| if (savedBackground) { | |
| changeBackground(savedBackground); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Herishop/deepseek-chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |