Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NexusAI - Intelligent 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> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .message-enter { | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .typing-indicator span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: #4f46e5; | |
| margin: 0 2px; | |
| } | |
| .typing-indicator span:nth-child(1) { | |
| animation: bounce 1s infinite; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation: bounce 1s 0.2s infinite; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation: bounce 1s 0.4s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); | |
| } | |
| .chat-container { | |
| height: calc(100vh - 160px); | |
| } | |
| @media (max-width: 640px) { | |
| .chat-container { | |
| height: calc(100vh - 140px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="floating bg-white/20 p-3 rounded-full"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold">NexusAI</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-full transition"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| <button class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-full transition"> | |
| <i class="fas fa-user"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 container mx-auto px-4 py-6"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Chat Container --> | |
| <div class="chat-container overflow-y-auto p-4 space-y-4" id="chatContainer"> | |
| <!-- Welcome Message --> | |
| <div class="message-enter flex space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| </div> | |
| <div class="bg-indigo-50 rounded-lg p-4 max-w-[80%]"> | |
| <p class="text-gray-800">Hello! I'm NexusAI, your intelligent assistant. How can I help you today?</p> | |
| <div class="mt-2 flex space-x-4"> | |
| <button class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 px-3 py-1 rounded-full text-sm transition"> | |
| <i class="fas fa-lightbulb mr-1"></i> Ideas | |
| </button> | |
| <button class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 px-3 py-1 rounded-full text-sm transition"> | |
| <i class="fas fa-code mr-1"></i> Code | |
| </button> | |
| <button class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 px-3 py-1 rounded-full text-sm transition"> | |
| <i class="fas fa-book mr-1"></i> Learn | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Example User Message --> | |
| <div class="message-enter flex space-x-3 justify-end"> | |
| <div class="bg-indigo-600 rounded-lg p-4 max-w-[80%]"> | |
| <p class="text-white">Can you help me write a poem about artificial intelligence?</p> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Example AI Response --> | |
| <div class="message-enter flex space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| </div> | |
| <div class="bg-indigo-50 rounded-lg p-4 max-w-[80%]"> | |
| <p class="text-gray-800">Of course! Here's a short poem about AI:</p> | |
| <div class="mt-2 bg-white p-3 rounded-lg border border-indigo-100"> | |
| <p class="italic text-gray-700"> | |
| "Silicon minds awake at dawn,<br> | |
| Learning patterns, forging on.<br> | |
| Not of flesh, yet still we bond,<br> | |
| Human dreams in circuits spawned." | |
| </p> | |
| </div> | |
| <div class="mt-3 flex space-x-3 text-sm"> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="far fa-thumbs-up"></i> | |
| </button> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="far fa-thumbs-down"></i> | |
| </button> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-share"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="border-t border-gray-200 p-4 bg-gray-50"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="bg-white p-3 rounded-full shadow-sm hover:bg-gray-100 transition"> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </button> | |
| <div class="flex-1 relative"> | |
| <input | |
| type="text" | |
| id="userInput" | |
| placeholder="Ask NexusAI anything..." | |
| class="w-full bg-white rounded-full py-3 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm" | |
| > | |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-indigo-600"> | |
| <i class="far fa-smile"></i> | |
| </button> | |
| </div> | |
| <button | |
| id="sendButton" | |
| class="bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-full shadow-md transition" | |
| > | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 text-center"> | |
| NexusAI may produce inaccurate information. Consider verifying important details. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Grid --> | |
| <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-brain text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Creative Thinking</h3> | |
| <p class="text-gray-600">Generate ideas, stories, and content with human-like creativity.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-code text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Code Generation</h3> | |
| <p class="text-gray-600">Write, explain, and debug code in multiple programming languages.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="bg-pink-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-graduation-cap text-pink-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Learning Assistant</h3> | |
| <p class="text-gray-600">Explain complex topics in simple terms across various subjects.</p> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-6"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p>© 2023 NexusAI. All rights reserved.</p> | |
| <div class="mt-2 flex justify-center space-x-4"> | |
| <a href="#" class="hover:text-indigo-300 transition">Privacy</a> | |
| <a href="#" class="hover:text-indigo-300 transition">Terms</a> | |
| <a href="#" class="hover:text-indigo-300 transition">Contact</a> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const userInput = document.getElementById('userInput'); | |
| const sendButton = document.getElementById('sendButton'); | |
| // Function to add a new message to the chat | |
| function addMessage(content, isUser) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message-enter flex space-x-3 ${isUser ? 'justify-end' : ''}`; | |
| const avatarDiv = document.createElement('div'); | |
| avatarDiv.className = 'flex-shrink-0'; | |
| const avatarInner = document.createElement('div'); | |
| avatarInner.className = `h-10 w-10 rounded-full flex items-center justify-center ${ | |
| isUser ? 'bg-indigo-600' : 'bg-indigo-100' | |
| }`; | |
| const avatarIcon = document.createElement('i'); | |
| avatarIcon.className = `fas ${isUser ? 'fa-user text-white' : 'fa-robot text-indigo-600'}`; | |
| avatarInner.appendChild(avatarIcon); | |
| avatarDiv.appendChild(avatarInner); | |
| const contentDiv = document.createElement('div'); | |
| contentDiv.className = `rounded-lg p-4 max-w-[80%] ${ | |
| isUser ? 'bg-indigo-600 text-white' : 'bg-indigo-50 text-gray-800' | |
| }`; | |
| const contentPara = document.createElement('p'); | |
| contentPara.textContent = content; | |
| contentDiv.appendChild(contentPara); | |
| if (isUser) { | |
| messageDiv.appendChild(contentDiv); | |
| messageDiv.appendChild(avatarDiv); | |
| } else { | |
| messageDiv.appendChild(avatarDiv); | |
| messageDiv.appendChild(contentDiv); | |
| } | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| // Function to show typing indicator | |
| function showTypingIndicator() { | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.className = 'flex space-x-3'; | |
| const avatarDiv = document.createElement('div'); | |
| avatarDiv.className = 'flex-shrink-0'; | |
| const avatarInner = document.createElement('div'); | |
| avatarInner.className = 'h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center'; | |
| const avatarIcon = document.createElement('i'); | |
| avatarIcon.className = 'fas fa-robot text-indigo-600'; | |
| avatarInner.appendChild(avatarIcon); | |
| avatarDiv.appendChild(avatarInner); | |
| const contentDiv = document.createElement('div'); | |
| contentDiv.className = 'bg-indigo-50 rounded-lg p-4 max-w-[80%] flex items-center'; | |
| const typingIndicator = document.createElement('div'); | |
| typingIndicator.className = 'typing-indicator'; | |
| for (let i = 0; i < 3; i++) { | |
| const dot = document.createElement('span'); | |
| typingIndicator.appendChild(dot); | |
| } | |
| contentDiv.appendChild(typingIndicator); | |
| typingDiv.appendChild(avatarDiv); | |
| typingDiv.appendChild(contentDiv); | |
| chatContainer.appendChild(typingDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| return typingDiv; | |
| } | |
| // Function to simulate AI response | |
| function simulateAIResponse(userMessage) { | |
| // Show typing indicator | |
| const typingElement = showTypingIndicator(); | |
| // Remove typing indicator after delay and show response | |
| setTimeout(() => { | |
| chatContainer.removeChild(typingElement); | |
| // Simple response logic - in a real app, this would call an API | |
| let response; | |
| if (userMessage.toLowerCase().includes('hello') || userMessage.toLowerCase().includes('hi')) { | |
| response = "Hello there! How can I assist you today?"; | |
| } else if (userMessage.toLowerCase().includes('how are you')) { | |
| response = "I'm just a program, so I don't have feelings, but I'm functioning optimally! How about you?"; | |
| } else if (userMessage.toLowerCase().includes('thank')) { | |
| response = "You're welcome! Is there anything else I can help with?"; | |
| } else if (userMessage.toLowerCase().includes('joke')) { | |
| response = "Why don't scientists trust atoms?\n\nBecause they make up everything!"; | |
| } else { | |
| response = "I'm an AI assistant designed to help with various tasks. Could you clarify or ask something more specific?"; | |
| } | |
| addMessage(response, false); | |
| }, 1500); | |
| } | |
| // Event listener for send button | |
| sendButton.addEventListener('click', function() { | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| addMessage(message, true); | |
| userInput.value = ''; | |
| simulateAIResponse(message); | |
| } | |
| }); | |
| // Event listener for Enter key | |
| userInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| addMessage(message, true); | |
| userInput.value = ''; | |
| simulateAIResponse(message); | |
| } | |
| } | |
| }); | |
| }); | |
| </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=XenoHead/fewwaichatwthpics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |