Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum Chat Core</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| quantum: { | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| neon: { | |
| 100: '#f0f9ff', | |
| 200: '#e0f2fe', | |
| 300: '#bae6fd', | |
| 400: '#7dd3fc', | |
| 500: '#38bdf8', | |
| 600: '#0ea5e9', | |
| 700: '#0284c7', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Header --> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-quantum-400 mb-2">Quantum Chat Core</h1> | |
| <p class="text-neon-300">Conversations with the future</p> | |
| </div> | |
| <!-- Chat Container --> | |
| <div class="bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-2xl border border-gray-700 shadow-xl shadow-quantum-900/20 overflow-hidden"> | |
| <!-- Chat Messages --> | |
| <div id="chat-messages" class="h-96 overflow-y-auto p-6 space-y-4"> | |
| <div class="message bot bg-gray-700 bg-opacity-50 rounded-xl p-4 border-l-4 border-quantum-500"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-quantum-600 flex items-center justify-center"> | |
| <i data-feather="cpu" class="text-white w-4 h-4"></i> | |
| </div> | |
| <div class="text-neon-100"> | |
| <p>Hello! I'm your quantum AI assistant. How can I help you today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="border-t border-gray-700 p-4 bg-gray-800"> | |
| <div class="flex space-x-2"> | |
| <input type="text" id="user-input" placeholder="Type your message..." | |
| class="flex-1 bg-gray-900 bg-opacity-70 border border-gray-700 rounded-xl px-4 py-3 text-neon-100 focus:outline-none focus:ring-2 focus:ring-quantum-500 focus:border-transparent placeholder-gray-500"> | |
| <button id="send-button" class="bg-gradient-to-r from-quantum-500 to-neon-500 text-white rounded-xl px-6 py-3 font-medium hover:opacity-90 transition-all transform hover:scale-105 shadow-lg shadow-quantum-500/30"> | |
| <i data-feather="send" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Panel --> | |
| <div class="mt-8 bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl border border-gray-700 p-6"> | |
| <h2 class="text-xl font-semibold text-quantum-300 mb-4">AI Configuration</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <label class="block text-neon-200 mb-2">System Prompt</label> | |
| <textarea class="w-full bg-gray-900 bg-opacity-70 border border-gray-700 rounded-lg px-4 py-2 text-neon-100 focus:outline-none focus:ring-2 focus:ring-quantum-500 focus:border-transparent" rows="3">You are a futuristic artificial intelligence core.</textarea> | |
| </div> | |
| <div> | |
| <label class="block text-neon-200 mb-2">Max Tokens</label> | |
| <input type="range" min="1" max="2048" value="512" class="w-full accent-quantum-500"> | |
| <div class="text-right text-neon-300">512</div> | |
| </div> | |
| <div> | |
| <label class="block text-neon-200 mb-2">Temperature</label> | |
| <input type="range" min="0.1" max="4.0" step="0.1" value="0.7" class="w-full accent-quantum-500"> | |
| <div class="text-right text-neon-300">0.7</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |