| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Michael's AI</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .stars { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: -1; |
| } |
| |
| .star { |
| position: absolute; |
| background: white; |
| border-radius: 50%; |
| animation: twinkle 3s infinite ease-in-out; |
| filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); |
| } |
| |
| .star:nth-child(odd) { |
| animation-delay: 1.5s; |
| } |
| |
| .star:nth-child(3n) { |
| animation-delay: 2.5s; |
| } |
| |
| @keyframes twinkle { |
| 0%, 100% { opacity: 0.3; transform: scale(1); } |
| 50% { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1)); } |
| } |
| |
| .shooting-star { |
| position: absolute; |
| width: 4px; |
| height: 4px; |
| background: linear-gradient(45deg, white, transparent); |
| border-radius: 50%; |
| filter: drop-shadow(0 0 5px white); |
| animation: shoot 4s linear infinite; |
| } |
| |
| @keyframes shoot { |
| 0% { |
| transform: translateX(-100px) translateY(0px) rotate(45deg); |
| opacity: 1; |
| } |
| 100% { |
| transform: translateX(calc(100vw + 100px)) translateY(calc(100vh + 100px)) rotate(45deg); |
| opacity: 0; |
| } |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .message-box { |
| transition: all 0.3s ease; |
| } |
| |
| .message-box:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); |
| } |
| </style> |
| </head> |
| <body class="flex justify-center items-center h-screen overflow-hidden bg-black font-sans text-center px-6"> |
| <div class="stars" id="stars"></div> |
| <h1 class="text-8xl font-bold mb-8 w-full text-center transition-all duration-500 transform hover:scale-110 text-white cursor-pointer" style="text-shadow: 0 0 10px rgba(255,255,255,0.5); filter: drop-shadow(0 0 5px transparent); hover:filter: drop-shadow(0 0 20px rgba(255,255,255,0.8));">Welcome</h1> |
| <div class="w-full max-w-2xl mx-auto bg-black/50 backdrop-blur-lg rounded-2xl shadow-2xl p-8 border border-white/20 message-box"> |
| <h1 class="text-4xl lg:text-6xl font-bold font-sans text-white mb-6"> |
| <span class="text-2xl lg:text-4xl text-white block font-medium mb-2">Michael's AI,</span> |
| <span class="text-white">Ask me anything</span> |
| </h1> |
|
|
| <div class="flex items-center mt-6 gap-3"> |
| <textarea id="user-input" rows="4" class="mt-4 p-4 border-2 border-gray-700 rounded-xl flex-grow focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 transition-all bg-gray-900/70 text-white placeholder-gray-400 resize-none" placeholder="Type your message here..."></textarea> |
| <button id="send-button" onclick="sendMessage()" class="mt-4 px-6 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-500 hover:to-purple-500 transition-all shadow-lg hover:shadow-xl active:scale-95 transform transition-transform duration-100"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /> |
| </svg> |
| </button> |
| </div> |
| <div id="response" class="mt-6 p-6 border-2 border-gray-700 rounded-xl w-full bg-gray-900/70 min-h-32 max-h-96 overflow-y-auto text-white prose prose-invert"> |
| <p class="text-gray-400 italic">Waiting for your question...</p> |
| </div> |
| </div> |
| <script> |
| |
| function createStars() { |
| const starsContainer = document.getElementById('stars'); |
| const numStars = 150; |
| |
| for (let i = 0; i < numStars; i++) { |
| const star = document.createElement('div'); |
| star.className = 'star'; |
| star.style.left = Math.random() * 100 + '%'; |
| star.style.top = Math.random() * 100 + '%'; |
| star.style.width = Math.random() * 3 + 1 + 'px'; |
| star.style.height = star.style.width; |
| star.style.animationDelay = Math.random() * 3 + 's'; |
| starsContainer.appendChild(star); |
| } |
| |
| |
| setInterval(() => { |
| const shootingStar = document.createElement('div'); |
| shootingStar.className = 'shooting-star'; |
| shootingStar.style.top = Math.random() * 50 + '%'; |
| starsContainer.appendChild(shootingStar); |
| |
| setTimeout(() => { |
| shootingStar.remove(); |
| }, 4000); |
| }, 3000); |
| } |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| createStars(); |
| |
| const userInput = document.getElementById('user-input'); |
| const sendButton = document.getElementById('send-button'); |
| const responseDiv = document.getElementById('response'); |
| |
| |
| sendButton.addEventListener('click', sendMessage); |
| |
| |
| userInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| sendMessage(); |
| } |
| }); |
| |
| function sendMessage() { |
| const message = userInput.value.trim(); |
| if (message === '') return; |
| |
| |
| responseDiv.innerHTML = ` |
| <div class="flex items-center space-x-2"> |
| <div class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></div> |
| <div class="w-2 h-2 rounded-full bg-blue-400 animate-pulse delay-75"></div> |
| <div class="w-2 h-2 rounded-full bg-blue-400 animate-pulse delay-150"></div> |
| <span class="text-blue-400 ml-2">AI is thinking...</span> |
| </div> |
| `; |
| |
| |
| fetch('http://127.0.0.1:8000/chat', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ message: message }) |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| |
| responseDiv.innerHTML = `<p class="text-white">${data.response}</p>`; |
| }) |
| .catch(error => { |
| console.error('Error:', error); |
| responseDiv.innerHTML = '<p class="text-red-400">Error: Could not connect to AI. Please try again.</p>'; |
| }); |
| |
| |
| userInput.value = ''; |
| } |
| }); |
| </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=Sureblo/exodus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
