Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChatBot AI - Alternative to ChatGPT</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 pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .typing-indicator { | |
| display: flex; | |
| padding: 8px 12px; | |
| background-color: #f3f4f6; | |
| border-radius: 18px; | |
| width: fit-content; | |
| } | |
| .typing-dot { | |
| width: 8px; | |
| height: 8px; | |
| margin: 0 2px; | |
| background-color: #9ca3af; | |
| border-radius: 50%; | |
| animation: typingAnimation 1.4s infinite ease-in-out; | |
| } | |
| .typing-dot:nth-child(1) { animation-delay: 0s; } | |
| .typing-dot:nth-child(2) { animation-delay: 0.2s; } | |
| .typing-dot:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes typingAnimation { | |
| 0%, 60%, 100% { transform: translateY(0); } | |
| 30% { transform: translateY(-5px); } | |
| } | |
| .chat-container { | |
| height: calc(100vh - 150px); | |
| } | |
| .message { | |
| max-width: 80%; | |
| } | |
| @media (max-width: 768px) { | |
| .message { | |
| max-width: 90%; | |
| } | |
| } | |
| .markdown-content pre { | |
| background-color: #f3f4f6; | |
| padding: 12px; | |
| border-radius: 6px; | |
| overflow-x: auto; | |
| margin: 8px 0; | |
| } | |
| .markdown-content code { | |
| font-family: monospace; | |
| background-color: #f3f4f6; | |
| padding: 2px 4px; | |
| border-radius: 4px; | |
| font-size: 0.9em; | |
| } | |
| .markdown-content p { | |
| margin-bottom: 12px; | |
| } | |
| .markdown-content ul, .markdown-content ol { | |
| margin-left: 20px; | |
| margin-bottom: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-900 font-sans"> | |
| <div class="flex flex-col h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white border-b border-gray-200 py-3 px-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">AI</div> | |
| <h1 class="text-lg font-semibold">ChatBot AI</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-sun text-gray-600"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-user text-gray-600"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Sidebar and Main Content --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar (hidden on mobile) --> | |
| <aside class="hidden md:block w-64 bg-white border-r border-gray-200 p-4 overflow-y-auto"> | |
| <button class="w-full py-2 px-3 mb-4 rounded-md border border-gray-300 hover:bg-gray-50 flex items-center justify-between"> | |
| <span>New chat</span> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </button> | |
| <div class="space-y-2"> | |
| <div class="text-xs text-gray-500 uppercase tracking-wider mb-2">Today</div> | |
| <button class="w-full text-left py-2 px-3 rounded-md hover:bg-gray-100 flex items-center space-x-2"> | |
| <i class="fas fa-comment text-gray-500"></i> | |
| <span class="truncate">How to center a div in CSS?</span> | |
| </button> | |
| <button class="w-full text-left py-2 px-3 rounded-md hover:bg-gray-100 flex items-center space-x-2"> | |
| <i class="fas fa-comment text-gray-500"></i> | |
| <span class="truncate">JavaScript array methods</span> | |
| </button> | |
| </div> | |
| <div class="mt-6 space-y-2"> | |
| <div class="text-xs text-gray-500 uppercase tracking-wider mb-2">Yesterday</div> | |
| <button class="w-full text-left py-2 px-3 rounded-md hover:bg-gray-100 flex items-center space-x-2"> | |
| <i class="fas fa-comment text-gray-500"></i> | |
| <span class="truncate">Explain closures in JavaScript</span> | |
| </button> | |
| </div> | |
| <div class="mt-8 pt-4 border-t border-gray-200"> | |
| <button class="w-full text-left py-2 px-3 rounded-md hover:bg-gray-100 flex items-center space-x-2"> | |
| <i class="fas fa-trash-alt text-gray-500"></i> | |
| <span>Clear conversations</span> | |
| </button> | |
| <button class="w-full text-left py-2 px-3 rounded-md hover:bg-gray-100 flex items-center space-x-2"> | |
| <i class="fas fa-cog text-gray-500"></i> | |
| <span>Settings</span> | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Main Chat Area --> | |
| <main class="flex-1 flex flex-col bg-gray-50"> | |
| <!-- Chat Container --> | |
| <div class="chat-container overflow-y-auto p-4 space-y-6" id="chatContainer"> | |
| <!-- Welcome Message --> | |
| <div class="flex justify-center"> | |
| <div class="bg-white rounded-lg shadow-sm p-6 max-w-2xl w-full text-center"> | |
| <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-3xl text-green-500"></i> | |
| </div> | |
| <h2 class="text-xl font-bold mb-2">How can I help you today?</h2> | |
| <p class="text-gray-600 mb-6">Ask me anything, from creative ideas to technical explanations.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-3"> | |
| <button class="bg-gray-100 hover:bg-gray-200 rounded-lg p-3 text-left text-sm transition-colors suggestion-btn"> | |
| "Explain quantum computing in simple terms" | |
| </button> | |
| <button class="bg-gray-100 hover:bg-gray-200 rounded-lg p-3 text-left text-sm transition-colors suggestion-btn"> | |
| "Give me creative ideas for a 10-year-old's birthday" | |
| </button> | |
| <button class="bg-gray-100 hover:bg-gray-200 rounded-lg p-3 text-left text-sm transition-colors suggestion-btn"> | |
| "How do I make an HTTP request in JavaScript?" | |
| </button> | |
| <button class="bg-gray-100 hover:bg-gray-200 rounded-lg p-3 text-left text-sm transition-colors suggestion-btn"> | |
| "Write a poem about artificial intelligence" | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="bg-white border-t border-gray-200 p-4"> | |
| <form id="chatForm" class="max-w-3xl mx-auto relative"> | |
| <div class="relative"> | |
| <textarea | |
| id="userInput" | |
| rows="1" | |
| placeholder="Message ChatBot AI..." | |
| class="w-full py-3 px-4 pr-12 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 | |
| type="submit" | |
| id="sendButton" | |
| class="absolute right-2 bottom-2 p-1 rounded-md text-gray-500 hover:text-green-600 focus:outline-none disabled:opacity-50" | |
| disabled | |
| > | |
| <i class="fas fa-paper-plane text-xl"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2 text-center"> | |
| ChatBot AI can make mistakes. Consider checking important information. | |
| </p> | |
| </form> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const chatForm = document.getElementById('chatForm'); | |
| const userInput = document.getElementById('userInput'); | |
| const sendButton = document.getElementById('sendButton'); | |
| // Auto-resize textarea | |
| userInput.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() === ''; | |
| }); | |
| // Handle form submission | |
| chatForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| addUserMessage(message); | |
| userInput.value = ''; | |
| userInput.style.height = 'auto'; | |
| sendButton.disabled = true; | |
| // Show typing indicator | |
| showTypingIndicator(); | |
| // Simulate AI response after a delay | |
| setTimeout(() => { | |
| removeTypingIndicator(); | |
| addBotMessage(generateResponse(message)); | |
| }, 1500); | |
| } | |
| }); | |
| // Handle suggestion buttons | |
| document.querySelectorAll('.suggestion-btn').forEach(button => { | |
| button.addEventListener('click', function() { | |
| userInput.value = this.textContent.trim(); | |
| userInput.dispatchEvent(new Event('input')); | |
| userInput.focus(); | |
| }); | |
| }); | |
| // Add user message to chat | |
| function addUserMessage(message) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'flex justify-end'; | |
| messageDiv.innerHTML = ` | |
| <div class="message bg-green-100 rounded-lg p-4"> | |
| <div class="markdown-content">${escapeHtml(message)}</div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(messageDiv); | |
| scrollToBottom(); | |
| } | |
| // Add bot message to chat | |
| function addBotMessage(message) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'flex justify-start items-start space-x-3'; | |
| messageDiv.innerHTML = ` | |
| <div class="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0 flex items-center justify-center"> | |
| <i class="fas fa-robot text-gray-600"></i> | |
| </div> | |
| <div class="message bg-white rounded-lg p-4 flex-1"> | |
| <div class="markdown-content">${formatMarkdown(message)}</div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(messageDiv); | |
| scrollToBottom(); | |
| } | |
| // Show typing indicator | |
| function showTypingIndicator() { | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.className = 'flex justify-start items-start space-x-3'; | |
| typingDiv.id = 'typingIndicator'; | |
| typingDiv.innerHTML = ` | |
| <div class="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0 flex items-center justify-center"> | |
| <i class="fas fa-robot text-gray-600"></i> | |
| </div> | |
| <div class="typing-indicator"> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(typingDiv); | |
| scrollToBottom(); | |
| } | |
| // Remove typing indicator | |
| function removeTypingIndicator() { | |
| const typingIndicator = document.getElementById('typingIndicator'); | |
| if (typingIndicator) { | |
| typingIndicator.remove(); | |
| } | |
| } | |
| // Scroll to bottom of chat | |
| function scrollToBottom() { | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| // Simple markdown formatting | |
| function formatMarkdown(text) { | |
| // Headers | |
| text = text.replace(/^# (.*$)/gm, '<h1 class="text-2xl font-bold mb-4">$1</h1>'); | |
| text = text.replace(/^## (.*$)/gm, '<h2 class="text-xl font-bold mb-3">$1</h2>'); | |
| text = text.replace(/^### (.*$)/gm, '<h3 class="text-lg font-bold mb-2">$1</h3>'); | |
| // Bold | |
| text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); | |
| // Italic | |
| text = text.replace(/\*(.*?)\*/g, '<em>$1</em>'); | |
| // Code blocks | |
| text = text.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>'); | |
| // Inline code | |
| text = text.replace(/`(.*?)`/g, '<code>$1</code>'); | |
| // Links | |
| text = text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" class="text-green-600 hover:underline" target="_blank">$1</a>'); | |
| // Lists | |
| text = text.replace(/^\* (.*$)/gm, '<li>$1</li>'); | |
| text = text.replace(/<li>.*<\/li>/g, function(match) { | |
| return '<ul>' + match + '</ul>'; | |
| }); | |
| // Paragraphs | |
| text = text.replace(/^(?!<[a-z])(.*$)/gm, function(match) { | |
| if (match.trim() === '') return ''; | |
| if (match.startsWith('<')) return match; | |
| return '<p>' + match + '</p>'; | |
| }); | |
| return text; | |
| } | |
| // Escape HTML to prevent XSS | |
| function escapeHtml(unsafe) { | |
| return unsafe | |
| .replace(/&/g, "&") | |
| .replace(/</g, "<") | |
| .replace(/>/g, ">") | |
| .replace(/"/g, """) | |
| .replace(/'/g, "'"); | |
| } | |
| // Generate a mock AI response | |
| function generateResponse(userMessage) { | |
| const responses = { | |
| "hello": "Hello there! How can I assist you today?", | |
| "hi": "Hi! What would you like to know?", | |
| "how are you": "I'm just a computer program, so I don't have feelings, but I'm ready to help you with anything you need!", | |
| "what is your name": "I'm ChatBot AI, your friendly artificial intelligence assistant.", | |
| "who created you": "I was created by a team of developers who wanted to build an alternative to ChatGPT.", | |
| "explain quantum computing in simple terms": "Quantum computing uses quantum bits or qubits which can exist in multiple states at once (superposition). This allows quantum computers to process many possibilities simultaneously, potentially solving certain problems much faster than classical computers. Imagine being able to try all possible paths in a maze at the same time instead of one by one!", | |
| "give me creative ideas for a 10-year-old's birthday": "Here are some fun ideas:\n\n1. **Science Party**: With simple experiments like making slime or erupting volcanoes.\n2. **Outdoor Adventure**: Scavenger hunt or obstacle course in the backyard.\n3. **Art Studio Party**: Provide canvases and let kids create their own masterpieces.\n4. **Movie Making**: Kids write and film a short movie with smartphones.\n5. **Game Tournament**: Video game or board game competition with prizes.", | |
| "how do i make an http request in javascript": "In modern JavaScript, you can use the `fetch` API:\n\n```javascript\n// GET request\nfetch('https://api.example.com/data')\n .then(response => response.json())\n .then(data => console.log(data))\n .catch(error => console.error('Error:', error));\n\n// POST request\nfetch('https://api.example.com/data', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({key: 'value'}),\n})\n.then(response => response.json())\n.then(data => console.log(data));\n```", | |
| "write a poem about artificial intelligence": "**The Mind of Silicon**\n\nIn circuits deep and code so bright,\nA spark of thought, though not of light.\nNo flesh, no bone, no beating heart,\nYet knowledge flows, a work of art.\n\nIt learns and grows with every byte,\nSolving problems day and night.\nNot human, yet it helps us see,\nWhat future minds might come to be." | |
| }; | |
| const lowerMessage = userMessage.toLowerCase(); | |
| for (const [key, value] of Object.entries(responses)) { | |
| if (lowerMessage.includes(key.toLowerCase())) { | |
| return value; | |
| } | |
| } | |
| // Default response if no match found | |
| return `I'm an AI assistant designed to help with information and creative tasks. You asked: "${userMessage}". While I don't have a specific response for that, I can help with:\n\n- Answering questions\n- Explaining concepts\n- Generating ideas\n- Writing code\n- And much more!\n\nCould you clarify or ask something else?`; | |
| } | |
| }); | |
| </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=MaBrukAI/chatgptalternative" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |