Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Simple AI Assistant</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"> | |
| <style> | |
| .chat-container { | |
| height: calc(100vh - 120px); | |
| } | |
| .message-animation { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .typing-indicator span { | |
| animation: bounce 1.4s infinite ease-in-out; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="max-w-4xl mx-auto p-4"> | |
| <!-- Header --> | |
| <header class="bg-indigo-600 text-white rounded-lg shadow-md p-4 mb-4"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-bold">AI Assistant</h1> | |
| <p class="text-indigo-100">How can I help you today?</p> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Chat Container --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden chat-container flex flex-col"> | |
| <!-- Messages --> | |
| <div class="flex-1 p-4 overflow-y-auto" id="chat-messages"> | |
| <!-- Initial greeting --> | |
| <div class="mb-4 message-animation"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <div class="bg-indigo-50 rounded-lg p-3 max-w-xs md:max-w-md lg:max-w-lg"> | |
| <p class="text-gray-800">Hello! I'm your AI assistant. Ask me anything and I'll do my best to help you.</p> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 ml-10 mt-1">Just now</p> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="border-t border-gray-200 p-4 bg-gray-50"> | |
| <div class="flex items-center"> | |
| <input | |
| type="text" | |
| id="user-input" | |
| placeholder="Type your message here..." | |
| class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" | |
| autocomplete="off" | |
| > | |
| <button | |
| id="send-btn" | |
| class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition duration-200 flex items-center justify-center" | |
| > | |
| <i class="fas fa-paper-plane mr-2"></i> Send | |
| </button> | |
| </div> | |
| <div class="flex justify-between mt-2 text-xs text-gray-500"> | |
| <div> | |
| <button class="mr-2 hover:text-indigo-600"><i class="fas fa-microphone"></i> Voice</button> | |
| <button class="hover:text-indigo-600"><i class="fas fa-image"></i> Image</button> | |
| </div> | |
| <div> | |
| <button class="hover:text-indigo-600"><i class="fas fa-ellipsis-h"></i> More</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const userInput = document.getElementById('user-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| // Sample AI responses | |
| const aiResponses = [ | |
| "I understand what you're asking. Here's what I can tell you about that...", | |
| "That's an interesting question! Based on my knowledge, I'd say...", | |
| "I'm not entirely sure about that, but I can look it up for you.", | |
| "Let me think about that for a moment...", | |
| "I'd be happy to help with that! Here's what I know...", | |
| "That's a great point. From my perspective...", | |
| "I'm designed to assist with questions like this. Here's my response..." | |
| ]; | |
| // Add a new message to the chat | |
| function addMessage(content, isUser = false) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `mb-4 message-animation`; | |
| const messageContent = ` | |
| <div class="flex items-start ${isUser ? 'justify-end' : ''}"> | |
| ${!isUser ? ` | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| ` : ''} | |
| <div class="${isUser ? 'bg-indigo-600 text-white' : 'bg-indigo-50'} rounded-lg p-3 max-w-xs md:max-w-md lg:max-w-lg"> | |
| <p>${content}</p> | |
| </div> | |
| ${isUser ? ` | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center ml-2"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| ` : ''} | |
| </div> | |
| <p class="text-xs text-gray-500 ${isUser ? 'text-right' : 'ml-10'} mt-1">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p> | |
| `; | |
| messageDiv.innerHTML = messageContent; | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| // Show typing indicator | |
| function showTypingIndicator() { | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.className = 'mb-4 message-animation'; | |
| typingDiv.id = 'typing-indicator'; | |
| typingDiv.innerHTML = ` | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <div class="bg-indigo-50 rounded-lg p-3 max-w-xs md:max-w-md lg:max-w-lg"> | |
| <div class="typing-indicator flex space-x-1"> | |
| <span class="w-2 h-2 bg-indigo-400 rounded-full"></span> | |
| <span class="w-2 h-2 bg-indigo-400 rounded-full"></span> | |
| <span class="w-2 h-2 bg-indigo-400 rounded-full"></span> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatMessages.appendChild(typingDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| return typingDiv; | |
| } | |
| // Remove typing indicator | |
| function removeTypingIndicator() { | |
| const typingIndicator = document.getElementById('typing-indicator'); | |
| if (typingIndicator) { | |
| typingIndicator.remove(); | |
| } | |
| } | |
| // Handle send button click | |
| sendBtn.addEventListener('click', sendMessage); | |
| // Handle Enter key press | |
| userInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| // Send message function | |
| function sendMessage() { | |
| const message = userInput.value.trim(); | |
| if (message === '') return; | |
| // Add user message | |
| addMessage(message, true); | |
| userInput.value = ''; | |
| // Show typing indicator | |
| const typingIndicator = showTypingIndicator(); | |
| // Simulate AI thinking (1-2 seconds delay) | |
| setTimeout(() => { | |
| removeTypingIndicator(); | |
| // Get random AI response | |
| const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)]; | |
| addMessage(randomResponse); | |
| }, 1000 + Math.random() * 1000); | |
| } | |
| // Sample questions for quick testing | |
| const sampleQuestions = [ | |
| "What's the weather today?", | |
| "Tell me a joke", | |
| "How do I reset my password?", | |
| "What's the capital of France?", | |
| "Explain quantum computing" | |
| ]; | |
| // Add sample questions to input placeholder on focus | |
| let currentPlaceholderIndex = 0; | |
| userInput.addEventListener('focus', function() { | |
| const placeholderInterval = setInterval(() => { | |
| currentPlaceholderIndex = (currentPlaceholderIndex + 1) % sampleQuestions.length; | |
| userInput.placeholder = sampleQuestions[currentPlaceholderIndex]; | |
| }, 3000); | |
| userInput.addEventListener('blur', function() { | |
| clearInterval(placeholderInterval); | |
| userInput.placeholder = "Type your message here..."; | |
| }, {once: true}); | |
| }); | |
| }); | |
| </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=vinnothj/test-ai-assistant" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |