Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gemma Chatbot</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex flex-col h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm border-b border-gray-200"> | |
| <div class="max-w-4xl mx-auto px-4 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div | |
| class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center"> | |
| <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"> | |
| </path> | |
| </svg> | |
| </div> | |
| <div> | |
| <h1 class="text-xl font-semibold text-gray-900">Gemma Chatbot</h1> | |
| <p class="text-sm text-gray-500">Powered by Transformers.js</p> | |
| </div> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| class="text-sm text-gray-500 hover:text-gray-700 transition-colors"> | |
| Built with anycoder ↗ | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Loading Screen --> | |
| <div id="loadingScreen" class="flex-1 flex items-center justify-center bg-gray-50"> | |
| <div class="text-center"> | |
| <div class="inline-flex items-center justify-center w-16 h-16 mb-4"> | |
| <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-500"></div> | |
| </div> | |
| <h2 class="text-xl font-semibold text-gray-900 mb-2">Loading Model</h2> | |
| <p class="text-gray-500 mb-4">Downloading Gemma model...</p> | |
| <div class="w-64 bg-gray-200 rounded-full h-2 mx-auto"> | |
| <div id="progressBar" class="bg-purple-500 h-2 rounded-full transition-all duration-300" style="width: 0%"> | |
| </div> | |
| </div> | |
| <p id="progressText" class="text-sm text-gray-500 mt-2">0%</p> | |
| </div> | |
| </div> | |
| <!-- Chat Container --> | |
| <div id="chatContainer" class="flex-1 flex flex-col max-w-4xl w-full mx-auto hidden"> | |
| <!-- Messages Area --> | |
| <div id="messagesArea" class="flex-1 overflow-y-auto p-4 space-y-4"> | |
| <!-- Welcome Message --> | |
| <div class="flex items-start space-x-3"> | |
| <div | |
| class="w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"> | |
| </path> | |
| </svg> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4 max-w-md"> | |
| <p class="text-gray-800">Hello! I'm Gemma, your AI assistant. How can I help you today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="border-t border-gray-200 bg-white p-4"> | |
| <div class="flex space-x-3"> | |
| <textarea | |
| id="messageInput" | |
| placeholder="Type your message here..." | |
| class="flex-1 resize-none rounded-lg border border-gray-300 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" | |
| rows="1" | |
| ></textarea> | |
| <button | |
| id="sendButton" | |
| class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg hover:from-purple-600 hover:to-pink-600 transition-all duration-200 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed" | |
| > | |
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">Press Enter to send, Shift+Enter for new line</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |