Spaces:
Running
Running
File size: 15,685 Bytes
f782783 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 |
<!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> |