Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChatGPT Clone</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> | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Chat container animation */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .message-animation { | |
| animation: fadeIn 0.3s ease-out forwards; | |
| } | |
| /* Typing indicator */ | |
| .typing-indicator span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: #9ca3af; | |
| margin: 0 2px; | |
| } | |
| .typing-indicator span:nth-child(1) { | |
| animation: bounce 1s infinite; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation: bounce 1s infinite 0.2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation: bounce 1s infinite 0.4s; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 h-screen flex flex-col"> | |
| <!-- Sidebar --> | |
| <div class="fixed inset-y-0 left-0 w-64 bg-gray-900 text-white p-4 hidden md:block"> | |
| <div class="flex items-center mb-8"> | |
| <i class="fas fa-robot text-xl mr-2 text-green-400"></i> | |
| <h1 class="text-xl font-bold">ChatGPT</h1> | |
| </div> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded mb-4 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> New Chat | |
| </button> | |
| <div class="mb-6"> | |
| <h3 class="text-gray-400 uppercase text-xs font-semibold mb-2">Today</h3> | |
| <ul> | |
| <li class="py-2 px-2 hover:bg-gray-700 rounded cursor-pointer flex items-center"> | |
| <i class="fas fa-comment-alt mr-2 text-gray-400"></i> | |
| <span>Getting started with AI</span> | |
| </li> | |
| <li class="py-2 px-2 hover:bg-gray-700 rounded cursor-pointer flex items-center"> | |
| <i class="fas fa-comment-alt mr-2 text-gray-400"></i> | |
| <span>JavaScript tips</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-gray-400 uppercase text-xs font-semibold mb-2">Yesterday</h3> | |
| <ul> | |
| <li class="py-2 px-2 hover:bg-gray-700 rounded cursor-pointer flex items-center"> | |
| <i class="fas fa-comment-alt mr-2 text-gray-400"></i> | |
| <span>Python programming</span> | |
| </li> | |
| <li class="py-2 px-2 hover:bg-gray-700 rounded cursor-pointer flex items-center"> | |
| <i class="fas fa-comment-alt mr-2 text-gray-400"></i> | |
| <span>AI ethics discussion</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-700"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center mr-2"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <span>User Account</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile header --> | |
| <header class="md:hidden bg-gray-900 text-white p-4 flex items-center justify-between"> | |
| <button id="menuButton" class="text-white"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-xl mr-2 text-green-400"></i> | |
| <h1 class="text-xl font-bold">ChatGPT</h1> | |
| </div> | |
| <div class="w-6"></div> <!-- Spacer for alignment --> | |
| </header> | |
| <!-- Mobile sidebar (hidden by default) --> | |
| <div id="mobileSidebar" class="fixed inset-0 bg-gray-900 text-white p-4 z-50 hidden"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <button id="closeMenuButton" class="text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-xl mr-2 text-green-400"></i> | |
| <h1 class="text-xl font-bold">ChatGPT</h1> | |
| </div> | |
| </div> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded mb-4 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> New Chat | |
| </button> | |
| <div class="mb-6"> | |
| <h3 class="text-gray-400 uppercase text-xs font-semibold mb-2">Today</h3> | |
| <ul> | |
| <li class="py-2 px-2 hover:bg-gray-700 rounded cursor-pointer flex items-center"> | |
| <i class="fas fa-comment-alt mr-2 text-gray-400"></i> | |
| <span>Getting started with AI</span> | |
| </li> | |
| <li class="py-2 px-2 hover:bg-gray-700 rounded cursor-pointer flex items-center"> | |
| <i class="fas fa-comment-alt mr-2 text-gray-400"></i> | |
| <span>JavaScript tips</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-gray-400 uppercase text-xs font-semibold mb-2">Yesterday</h3> | |
| <ul> | |
| <li class="py-2 px-2 hover:bg-gray-700 rounded cursor-pointer flex items-center"> | |
| <i class="fas fa-comment-alt mr-2 text-gray-400"></i> | |
| <span>Python programming</span> | |
| </li> | |
| <li class="py-2 px-2 hover:bg-gray-700 rounded cursor-pointer flex items-center"> | |
| <i class="fas fa-comment-alt mr-2 text-gray-400"></i> | |
| <span>AI ethics discussion</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-700"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center mr-2"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <span>User Account</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <main class="flex-1 md:ml-64 overflow-hidden flex flex-col"> | |
| <!-- Chat container --> | |
| <div id="chatContainer" class="flex-1 overflow-y-auto p-4 space-y-6"> | |
| <!-- Welcome message --> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex-1"> | |
| <h2 class="text-xl font-bold mb-2">Hello! How can I help you today?</h2> | |
| <p class="text-gray-600">I'm an AI assistant here to answer your questions, help with creative tasks, and provide information on a wide range of topics. What would you like to know?</p> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <h3 class="font-semibold">Explain quantum computing</h3> | |
| <p class="text-sm text-gray-500">in simple terms</p> | |
| </div> | |
| <div class="p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <h3 class="font-semibold">Suggest fun activities</h3> | |
| <p class="text-sm text-gray-500">for a family with kids</p> | |
| </div> | |
| <div class="p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <h3 class="font-semibold">Write a poem</h3> | |
| <p class="text-sm text-gray-500">about artificial intelligence</p> | |
| </div> | |
| <div class="p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <h3 class="font-semibold">Help debug this code</h3> | |
| <p class="text-sm text-gray-500">that's not working</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input area --> | |
| <div class="p-4 border-t border-gray-200 bg-white"> | |
| <div class="max-w-3xl mx-auto relative"> | |
| <div class="relative"> | |
| <textarea | |
| id="messageInput" | |
| rows="1" | |
| placeholder="Message ChatGPT..." | |
| class="w-full p-4 pr-16 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none" | |
| style="min-height: 60px; max-height: 200px;" | |
| ></textarea> | |
| <button | |
| id="sendButton" | |
| class="absolute right-3 bottom-3 w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center hover:bg-green-600 disabled:bg-gray-300 disabled:cursor-not-allowed" | |
| disabled | |
| > | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2 text-center">ChatGPT can make mistakes. Consider checking important information.</p> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Mobile menu toggle | |
| const menuButton = document.getElementById('menuButton'); | |
| const closeMenuButton = document.getElementById('closeMenuButton'); | |
| const mobileSidebar = document.getElementById('mobileSidebar'); | |
| menuButton.addEventListener('click', () => { | |
| mobileSidebar.classList.remove('hidden'); | |
| }); | |
| closeMenuButton.addEventListener('click', () => { | |
| mobileSidebar.classList.add('hidden'); | |
| }); | |
| // Auto-resize textarea | |
| const messageInput = document.getElementById('messageInput'); | |
| const sendButton = document.getElementById('sendButton'); | |
| messageInput.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| // Enable/disable send button based on input | |
| sendButton.disabled = this.value.trim() === ''; | |
| }); | |
| // Send message functionality | |
| sendButton.addEventListener('click', sendMessage); | |
| messageInput.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (!message) return; | |
| // Add user message to chat | |
| addMessage(message, 'user'); | |
| // Clear input | |
| messageInput.value = ''; | |
| messageInput.style.height = '60px'; | |
| sendButton.disabled = true; | |
| // Show typing indicator | |
| showTypingIndicator(); | |
| // Simulate AI response after a delay | |
| setTimeout(() => { | |
| removeTypingIndicator(); | |
| const responses = [ | |
| "I'm an AI assistant designed to provide helpful and harmless responses.", | |
| "That's an interesting question! Here's what I know about that topic...", | |
| "I can certainly help with that. Let me explain how this works...", | |
| "Based on my training data, here's the information you requested...", | |
| "I'd be happy to assist! Here are some key points to consider..." | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| addMessage(randomResponse, 'ai'); | |
| }, 1500); | |
| } | |
| function addMessage(text, sender) { | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'max-w-3xl mx-auto message-animation'; | |
| if (sender === 'user') { | |
| messageDiv.innerHTML = ` | |
| <div class="flex items-start space-x-4 justify-end"> | |
| <div class="bg-green-100 p-4 rounded-lg shadow-sm flex-1 max-w-full"> | |
| <p class="text-gray-800">${text}</p> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center text-white"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </div> | |
| `; | |
| } else { | |
| messageDiv.innerHTML = ` | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex-1"> | |
| <p class="text-gray-800">${text}</p> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| function showTypingIndicator() { | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.className = 'max-w-3xl mx-auto message-animation'; | |
| typingDiv.id = 'typingIndicator'; | |
| typingDiv.innerHTML = ` | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex-1"> | |
| <div class="typing-indicator"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(typingDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| function removeTypingIndicator() { | |
| const typingIndicator = document.getElementById('typingIndicator'); | |
| if (typingIndicator) { | |
| typingIndicator.remove(); | |
| } | |
| } | |
| // Example conversation starter buttons | |
| document.querySelectorAll('.grid div').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const question = button.querySelector('h3').textContent + | |
| (button.querySelector('p') ? ' ' + button.querySelector('p').textContent : ''); | |
| messageInput.value = question; | |
| messageInput.style.height = 'auto'; | |
| messageInput.style.height = (messageInput.scrollHeight) + 'px'; | |
| sendButton.disabled = false; | |
| messageInput.focus(); | |
| }); | |
| }); | |
| </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=nayohan/sample-chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |