Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Browser LLM/SLM Chat - Vision & Text</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>🤖 Browser AI Chat</h1> | |
| <p class="subtitle">Run LLMs & Vision Models directly in your browser</p> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="attribution">Built with | |
| anycoder</a> | |
| </header> | |
| <div class="model-selector"> | |
| <label for="model-select">Select Model:</label> | |
| <select id="model-select"> | |
| <optgroup label="Vision-Language Models"> | |
| <option value="HuggingFaceTB/SmolVLM-256M-Instruct">SmolVLM-256M-Instruct (Vision)</option> | |
| <option value="HuggingFaceTB/SmolVLM-500M-Instruct">SmolVLM-500M-Instruct (Vision)</option> | |
| </optgroup> | |
| <optgroup label="Text-Only Models"> | |
| <option value="HuggingFaceTB/SmolLM2-135M-Instruct">SmolLM2-135M-Instruct</option> | |
| <option value="HuggingFaceTB/SmolLM2-360M-Instruct">SmolLM2-360M-Instruct</option> | |
| <option value="Qwen/Qwen2.5-0.5B-Instruct">Qwen2.5-0.5B-Instruct</option> | |
| </optgroup> | |
| </select> | |
| <button id="load-model-btn" class="btn btn-primary">Load Model</button> | |
| </div> | |
| <div id="loading-container" class="loading-container hidden"> | |
| <div class="loading-spinner"></div> | |
| <p id="loading-status">Initializing...</p> | |
| <div class="progress-bar-container"> | |
| <div id="progress-bar" class="progress-bar"></div> | |
| </div> | |
| <p id="progress-text">0%</p> | |
| </div> | |
| <div id="chat-container" class="chat-container hidden"> | |
| <div id="chat-messages" class="chat-messages"> | |
| <div class="welcome-message"> | |
| <p>👋 Welcome! Load a model to start chatting.</p> | |
| <p class="hint">Vision models can analyze images. Text models are for conversation only.</p> | |
| </div> | |
| </div> | |
| <div id="image-preview-container" class="image-preview-container hidden"> | |
| <img id="image-preview" alt="Preview"> | |
| <button id="remove-image-btn" class="remove-image-btn">×</button> | |
| </div> | |
| <div class="input-container"> | |
| <div class="input-row"> | |
| <input type="file" id="image-input" accept="image/*" class="hidden"> | |
| <button id="attach-image-btn" class="btn btn-icon" title="Attach Image"> | |
| 📷 | |
| </button> | |
| <input type="text" id="image-url-input" placeholder="Or paste image URL..." class="image-url-input"> | |
| <button id="load-url-btn" class="btn btn-secondary">Load URL</button> | |
| </div> | |
| <div class="input-row"> | |
| <textarea id="user-input" placeholder="Type your message..." rows="2"></textarea> | |
| <button id="send-btn" class="btn btn-primary" disabled>Send</button> | |
| </div> | |
| </div> | |
| <div class="settings-panel"> | |
| <details> | |
| <summary>⚙️ Generation Settings</summary> | |
| <div class="settings-grid"> | |
| <div class="setting-item"> | |
| <label for="max-tokens">Max Tokens: <span id="max-tokens-value">256</span></label> | |
| <input type="range" id="max-tokens" min="32" max="1024" value="256"> | |
| </div> | |
| <div class="setting-item"> | |
| <label for="temperature">Temperature: <span id="temperature-value">0.7</span></label> | |
| <input type="range" id="temperature" min="0" max="2" step="0.1" value="0.7"> | |
| </div> | |
| <div class="setting-item"> | |
| <label for="top-p">Top P: <span id="top-p-value">0.9</span></label> | |
| <input type="range" id="top-p" min="0" max="1" step="0.05" value="0.9"> | |
| </div> | |
| </div> | |
| </details> | |
| </div> | |
| </div> | |
| <div id="error-container" class="error-container hidden"> | |
| <p id="error-message"></p> | |
| <button id="dismiss-error-btn" class="btn btn-secondary">Dismiss</button> | |
| </div> | |
| <footer> | |
| <p>Models run entirely in your browser using <a href="https://huggingface.co/docs/transformers.js" | |
| target="_blank">Transformers.js</a> & WebGPU</p> | |
| </footer> | |
| </div> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> |