Spaces:

thomaswong360
/

chatui

Running

App Files Files Community

thomaswong360 commited on Jun 21, 2025

Commit

f782783

verified ·

1 Parent(s): 3e87193

Can you generate a Chatbot website that model very much like how ChatGPT works? - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +293 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Chatui
-emoji: 🔥
 colorFrom: gray
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: chatui
+emoji: 🐳
 colorFrom: gray
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,293 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chatbot - 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: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        /* Message typing animation */
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        .typing-indicator::after {
+            content: "|";
+            animation: blink 1s infinite;
+        }
+        @keyframes blink {
+            0%, 100% { opacity: 1 }
+            50% { opacity: 0 }
+        }
+        /* Fade in animation */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .fade-in {
+            animation: fadeIn 0.3s ease-out forwards;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-900 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">
+            <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold mr-2">AI</div>
+            <h1 class="text-xl font-semibold">AI Assistant</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+            <button class="text-gray-500 hover:text-gray-700">
+                <i class="fas fa-sun"></i>
+            </button>
+            <button class="text-gray-500 hover:text-gray-700">
+                <i class="fas fa-cog"></i>
+            </button>
+        </div>
+    </header>
+    <!-- Chat container -->
+    <div class="flex-1 overflow-y-auto p-4 space-y-6" id="chat-container">
+        <!-- Welcome message -->
+        <div class="max-w-3xl mx-auto fade-in">
+            <div class="flex items-start space-x-3">
+                <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold flex-shrink-0">AI</div>
+                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex-1">
+                    <p class="font-medium">Hello! I'm your AI assistant. How can I help you today?</p>
+                    <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-2">
+                        <button class="suggestion-btn text-left p-2 text-sm rounded border border-gray-200 hover:bg-gray-50 transition">
+                            "Explain quantum computing in simple terms"
+                        </button>
+                        <button class="suggestion-btn text-left p-2 text-sm rounded border border-gray-200 hover:bg-gray-50 transition">
+                            "Give me creative ideas for a 10-year-old's birthday"
+                        </button>
+                        <button class="suggestion-btn text-left p-2 text-sm rounded border border-gray-200 hover:bg-gray-50 transition">
+                            "How do I make an HTTP request in JavaScript?"
+                        </button>
+                        <button class="suggestion-btn text-left p-2 text-sm rounded border border-gray-200 hover:bg-gray-50 transition">
+                            "Write a poem about artificial intelligence"
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Input area -->
+    <div class="bg-white border-t border-gray-200 p-4">
+        <div class="max-w-3xl mx-auto relative">
+            <form id="chat-form" class="relative">
+                <textarea
+                    id="message-input"
+                    rows="1"
+                    placeholder="Message AI Assistant..."
+                    class="w-full p-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="send-btn"
+                    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 transition disabled:opacity-50 disabled:cursor-not-allowed"
+                    disabled
+                >
+                    <i class="fas fa-paper-plane"></i>
+                </button>
+            </form>
+            <div class="text-xs text-gray-500 mt-2 text-center">
+                AI Assistant can make mistakes. Consider checking important information.
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatContainer = document.getElementById('chat-container');
+            const messageInput = document.getElementById('message-input');
+            const chatForm = document.getElementById('chat-form');
+            const sendBtn = document.getElementById('send-btn');
+            // Auto-resize textarea
+            messageInput.addEventListener('input', function() {
+                this.style.height = 'auto';
+                this.style.height = (this.scrollHeight) + 'px';
+                // Enable/disable send button
+                sendBtn.disabled = this.value.trim() === '';
+            });
+            // Handle form submission
+            chatForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                const message = messageInput.value.trim();
+                if (message) {
+                    sendMessage(message);
+                    messageInput.value = '';
+                    messageInput.style.height = 'auto';
+                    sendBtn.disabled = true;
+                }
+            });
+            // Handle suggestion buttons
+            document.querySelectorAll('.suggestion-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const suggestion = this.textContent.trim();
+                    messageInput.value = suggestion;
+                    messageInput.dispatchEvent(new Event('input'));
+                    messageInput.focus();
+                });
+            });
+            // Send message function
+            function sendMessage(message) {
+                // Add user message to chat
+                addMessageToChat('user', message);
+                // Show typing indicator
+                showTypingIndicator();
+                // Simulate AI response after a delay
+                setTimeout(() => {
+                    // Remove typing indicator
+                    removeTypingIndicator();
+                    // Generate and add AI response
+                    const response = generateAIResponse(message);
+                    addMessageToChat('ai', response);
+                    // Scroll to bottom
+                    scrollToBottom();
+                }, 1000 + Math.random() * 2000); // Random delay between 1-3 seconds
+                // Scroll to bottom
+                scrollToBottom();
+            }
+            // Add message to chat
+            function addMessageToChat(sender, message) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'max-w-3xl mx-auto fade-in';
+                if (sender === 'user') {
+                    messageDiv.innerHTML = `
+                        <div class="flex items-start space-x-3 justify-end">
+                            <div class="bg-green-500 text-white p-4 rounded-lg shadow-sm max-w-full">
+                                <p>${message}</p>
+                            </div>
+                            <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold flex-shrink-0">
+                                <i class="fas fa-user text-sm"></i>
+                            </div>
+                        </div>
+                    `;
+                } else {
+                    messageDiv.innerHTML = `
+                        <div class="flex items-start space-x-3">
+                            <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold flex-shrink-0">AI</div>
+                            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex-1">
+                                <p>${message}</p>
+                            </div>
+                        </div>
+                    `;
+                }
+                chatContainer.appendChild(messageDiv);
+                scrollToBottom();
+            }
+            // Show typing indicator
+            function showTypingIndicator() {
+                const typingDiv = document.createElement('div');
+                typingDiv.className = 'max-w-3xl mx-auto fade-in';
+                typingDiv.id = 'typing-indicator';
+                typingDiv.innerHTML = `
+                    <div class="flex items-start space-x-3">
+                        <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold flex-shrink-0">AI</div>
+                        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex-1">
+                            <div class="typing-indicator">Typing</div>
+                        </div>
+                    </div>
+                `;
+                chatContainer.appendChild(typingDiv);
+            }
+            // Remove typing indicator
+            function removeTypingIndicator() {
+                const typingIndicator = document.getElementById('typing-indicator');
+                if (typingIndicator) {
+                    typingIndicator.remove();
+                }
+            }
+            // Scroll to bottom of chat
+            function scrollToBottom() {
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }
+            // Generate AI response (simulated)
+            function generateAIResponse(userMessage) {
+                const responses = {
+                    "hello": "Hello there! How can I assist you today?",
+                    "hi": "Hi! What can I do for you?",
+                    "how are you": "I'm just a computer program, so I don't have feelings, but I'm functioning perfectly! How can I help you?",
+                    "what's your name": "I'm an AI assistant created to help answer your questions and assist with various tasks.",
+                    "explain quantum computing in simple terms": "Quantum computing uses quantum bits or qubits which can exist in multiple states at once (unlike regular bits that are just 0 or 1). This allows quantum computers to perform many calculations simultaneously, potentially solving certain complex problems much faster than classical computers.",
+                    "give me creative ideas for a 10-year-old's birthday": "Here are some fun ideas:\n1. Science party with simple experiments\n2. Outdoor treasure hunt with clues\n3. DIY pizza making party\n4. Movie night under the stars\n5. Video game tournament\n6. Arts and crafts party\n7. Sports-themed party with mini-games",
+                    "how do i make an http request in javascript": "You can use the Fetch API in modern JavaScript:\n\n```javascript\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\nOr with async/await:\n\n```javascript\nasync function fetchData() {\n  try {\n    const response = await fetch('https://api.example.com/data');\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error:', error);\n  }\n}\n```",
+                    "write a poem about artificial intelligence": `"Silicon Dreams"\n\nIn circuits deep where thoughts take flight,\nA spark of code, a beam of light.\nNot flesh nor blood, yet still it learns,\nFrom data vast its knowledge burns.\n\nIt speaks in tongues of math so pure,\nSolutions found, of this I'm sure.\nYet questions linger in the air,\nCan mind emerge from wires bare?\n\nA tool we've forged to help, to guide,\nWith logic's edge and wisdom wide.\nBut in its heart (if heart there be),\nLies just our own humanity.`
+                };
+                const lowerMessage = userMessage.toLowerCase();
+                // Check for exact matches first
+                if (responses[lowerMessage]) {
+                    return responses[lowerMessage];
+                }
+                // Check for partial matches
+                for (const [key, value] of Object.entries(responses)) {
+                    if (lowerMessage.includes(key)) {
+                        return value;
+                    }
+                }
+                // Default responses based on question type
+                if (lowerMessage.startsWith('what') || lowerMessage.startsWith('how') || lowerMessage.endsWith('?')) {
+                    return "That's an interesting question. While I don't have all the answers, I can tell you that " +
+                           "this topic relates to several areas of study. Would you like me to provide some general " +
+                           "information about it or would you prefer a more specific explanation?";
+                }
+                if (lowerMessage.startsWith('tell me') || lowerMessage.startsWith('explain')) {
+                    return "I'd be happy to explain that concept. Essentially, it involves " +
+                           "several key principles that work together to create the effect you're asking about. " +
+                           "Would you like me to break it down further?";
+                }
+                // Fallback response
+                return "Thank you for your message. I'm designed to assist with a wide variety of topics. " +
+                       "Could you clarify or provide more details about what you're looking for? " +
+                       "I'm happy to help with information, creative ideas, problem solving, and more!";
+            }
+        });
+    </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=thomaswong360/chatui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>