Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Apple Style Chatbot - Powered by Transformers.js</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2L2 7V17L12 22L22 17V7L12 2Z" stroke="url(#gradient)" stroke-width="2" stroke-linecap="round" | |
| stroke-linejoin="round" /> | |
| <path d="M12 22V12" stroke="url(#gradient)" stroke-width="2" stroke-linecap="round" | |
| stroke-linejoin="round" /> | |
| <path d="M22 7L12 12L2 7" stroke="url(#gradient)" stroke-width="2" stroke-linecap="round" | |
| stroke-linejoin="round" /> | |
| <defs> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#007AFF;stop-opacity:1" /> | |
| <stop offset="100%" style="stop-color:#5856D6;stop-opacity:1" /> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <span>AI Chatbot</span> | |
| </div> | |
| <div class="header-actions"> | |
| <button id="clearBtn" class="header-btn"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14zM10 11v6M14 11v6"/> | |
| </svg> | |
| Clear | |
| </button> | |
| <button id="settingsBtn" class="header-btn"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="3"/> | |
| <path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 1.54l4.24 4.24M1 12h6m6 0h6"/> | |
| </svg> | |
| Settings | |
| </button> | |
| </div> | |
| </div> | |
| <div class="attribution"> | |
| Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Loading Screen --> | |
| <div id="loadingScreen" class="loading-screen"> | |
| <div class="loading-content"> | |
| <div class="loading-spinner"></div> | |
| <h2>Loading AI Model</h2> | |
| <p>Initializing Gemma-3-270M model...</p> | |
| <div class="progress-bar"> | |
| <div id="progressFill" class="progress-fill"></div> | |
| </div> | |
| <div id="loadingStatus" class="loading-status">Preparing...</div> | |
| </div> | |
| </div> | |
| <!-- Chat Container --> | |
| <div id="chatContainer" class="chat-container" style="display: none;"> | |
| <div id="messagesList" class="messages-list"> | |
| <!-- Welcome Message --> | |
| <div class="message assistant"> | |
| <div class="message-avatar"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2L2 7V17L12 22L22 17V7L12 2Z" /> | |
| </svg> | |
| </div> | |
| <div class="message-content"> | |
| <div class="message-text"> | |
| Hello! I'm your AI assistant powered by Gemma-3. How can I help you today? | |
| </div> | |
| <div class="message-time">Just now</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div id="inputArea" class="input-area" style="display: none;"> | |
| <div class="input-container"> | |
| <textarea | |
| id="messageInput" | |
| class="message-input" | |
| placeholder="Type your message here..." | |
| rows="1" | |
| maxlength="1000" | |
| ></textarea> | |
| <button id="sendBtn" class="send-btn" disabled> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="input-footer"> | |
| <span id="charCount">0 / 1000</span> | |
| <span class="model-info">Gemma-3-270M • Transformers.js</span> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Settings Modal --> | |
| <div id="settingsModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2>Settings</h2> | |
| <button class="close-btn" id="closeSettings"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M18 6L6 18M6 6l12 12"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="setting-group"> | |
| <label for="maxTokens">Max Tokens</label> | |
| <input type="range" id="maxTokens" min="128" max="1024" value="512" step="128"> | |
| <span id="maxTokensValue">512</span> | |
| </div> | |
| <div class="setting-group"> | |
| <label for="temperature">Temperature</label> | |
| <input type="range" id="temperature" min="0" max="1" value="0.7" step="0.1"> | |
| <span id="temperatureValue">0.7</span> | |
| </div> | |
| <div class="setting-group"> | |
| <label> | |
| <input type="checkbox" id="streaming" checked> | |
| Enable streaming | |
| </label> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn btn-primary" id="saveSettings">Save Settings</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> |