Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Gemma 3 1B Chat</title> | |
| <style> | |
| :root { | |
| color-scheme: light; | |
| --bg: #f6f3ee; | |
| --panel: #ffffff; | |
| --line: #e7dfd4; | |
| --text: #1f1a16; | |
| --muted: #6d6256; | |
| --accent: #b35a2b; | |
| --accent-soft: #f7eee8; | |
| --user: #f3ede5; | |
| --assistant: #fcfaf7; | |
| --error: #a53f2b; | |
| --shadow: 0 16px 48px rgba(36, 24, 15, 0.08); | |
| --radius: 22px; | |
| --radius-sm: 16px; | |
| --radius-pill: 999px; | |
| --sans: "Avenir Next", "Segoe UI", sans-serif; | |
| --mono: "SFMono-Regular", Consolas, monospace; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| font-family: var(--sans); | |
| background: linear-gradient(180deg, #faf7f2 0%, var(--bg) 100%); | |
| color: var(--text); | |
| display: grid; | |
| place-items: center; | |
| padding: 20px; | |
| } | |
| .app { | |
| width: min(760px, 100%); | |
| height: min(840px, calc(100vh - 40px)); | |
| background: var(--panel); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| display: grid; | |
| grid-template-rows: auto 1fr auto; | |
| overflow: hidden; | |
| } | |
| .header { | |
| padding: 18px 20px; | |
| border-bottom: 1px solid var(--line); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| } | |
| .title { | |
| margin: 0; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| } | |
| .subtitle { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 0.92rem; | |
| text-align: right; | |
| } | |
| .spinner { | |
| width: 18px; | |
| height: 18px; | |
| border: 2px solid rgba(179, 90, 43, 0.2); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| flex: 0 0 auto; | |
| } | |
| .spinner.hidden { | |
| display: none; | |
| } | |
| .chat { | |
| padding: 18px; | |
| overflow: auto; | |
| background: #fcfbf8; | |
| display: grid; | |
| align-content: start; | |
| gap: 12px; | |
| position: relative; | |
| } | |
| .message { | |
| max-width: 85%; | |
| padding: 14px 16px; | |
| border-radius: 18px; | |
| line-height: 1.55; | |
| white-space: pre-wrap; | |
| border: 1px solid var(--line); | |
| } | |
| .message.user { | |
| margin-left: auto; | |
| background: var(--user); | |
| } | |
| .message.assistant { | |
| background: var(--assistant); | |
| } | |
| .message.placeholder { | |
| max-width: 100%; | |
| color: var(--muted); | |
| background: #fffdfb; | |
| text-align: left; | |
| padding: 18px; | |
| } | |
| .message.placeholder strong { | |
| display: block; | |
| margin-bottom: 10px; | |
| color: var(--text); | |
| } | |
| .examples { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .example { | |
| width: 100%; | |
| text-align: left; | |
| min-width: 0; | |
| padding: 12px 14px; | |
| border-radius: 14px; | |
| border: 1px solid var(--line); | |
| background: #faf6f1; | |
| color: var(--text); | |
| font-weight: 500; | |
| } | |
| .example:hover:not(:disabled) { | |
| background: var(--accent-soft); | |
| } | |
| .center-state { | |
| position: absolute; | |
| inset: 0; | |
| display: grid; | |
| place-items: center; | |
| padding: 24px; | |
| text-align: center; | |
| color: var(--muted); | |
| } | |
| .center-card { | |
| display: grid; | |
| justify-items: center; | |
| gap: 14px; | |
| } | |
| .center-card .spinner { | |
| width: 28px; | |
| height: 28px; | |
| border-width: 3px; | |
| } | |
| .composer { | |
| padding: 16px; | |
| border-top: 1px solid var(--line); | |
| background: var(--panel); | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .toolbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .metrics { | |
| display: flex; | |
| justify-content: flex-end; | |
| color: var(--muted); | |
| font-size: 0.82rem; | |
| font-family: var(--mono); | |
| } | |
| .reset { | |
| border: 1px solid var(--line); | |
| background: #fffdfb; | |
| color: var(--muted); | |
| padding: 10px 14px; | |
| min-width: 0; | |
| } | |
| .input-row { | |
| position: relative; | |
| } | |
| textarea { | |
| width: 100%; | |
| min-height: 64px; | |
| max-height: 180px; | |
| resize: vertical; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| padding: 16px 110px 16px 16px; | |
| font: inherit; | |
| color: var(--text); | |
| background: #fffdfb; | |
| outline: none; | |
| } | |
| textarea:focus { | |
| border-color: #d8b49f; | |
| box-shadow: 0 0 0 4px rgba(179, 90, 43, 0.08); | |
| } | |
| button { | |
| appearance: none; | |
| border: 0; | |
| border-radius: var(--radius-pill); | |
| padding: 12px 16px; | |
| background: var(--accent); | |
| color: white; | |
| font: inherit; | |
| font-weight: 400; | |
| cursor: pointer; | |
| min-width: 84px; | |
| } | |
| .send { | |
| position: absolute; | |
| right: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| z-index: 1; | |
| width: 44px; | |
| height: 44px; | |
| min-width: 44px; | |
| padding: 0; | |
| display: grid; | |
| place-items: center; | |
| border-radius: 14px; | |
| } | |
| .send svg { | |
| width: 18px; | |
| height: 18px; | |
| fill: currentColor; | |
| } | |
| .send.stop { | |
| background: #8b4a28; | |
| } | |
| button:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.6; | |
| } | |
| .error { | |
| color: var(--error); | |
| } | |
| .cursor { | |
| display: inline-block; | |
| width: 0.75ch; | |
| color: var(--accent); | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes blink { | |
| 50% { | |
| opacity: 0; | |
| } | |
| } | |
| @media (max-width: 720px) { | |
| .app { | |
| height: calc(100vh - 20px); | |
| } | |
| .header, | |
| .toolbar { | |
| align-items: start; | |
| flex-direction: column; | |
| } | |
| .subtitle { | |
| text-align: left; | |
| } | |
| .message { | |
| max-width: 92%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="app"> | |
| <header class="header"> | |
| <h1 class="title">Gemma 3 1B Chat</h1> | |
| <p class="subtitle">Powered by Transformers.js v4 (preview)</p> | |
| </header> | |
| <section id="chat" class="chat"> | |
| <div id="loadingState" class="center-state"> | |
| <div class="center-card"> | |
| <span class="spinner"></span> | |
| <div id="statusText">Loading model...</div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="composer"> | |
| <div class="toolbar"> | |
| <button id="resetButton" class="reset" type="button" disabled> | |
| Reset | |
| </button> | |
| <div class="metrics" id="metrics">tokens/sec: -</div> | |
| </div> | |
| <div class="input-row"> | |
| <textarea | |
| id="prompt" | |
| placeholder="Enter text here" | |
| disabled | |
| ></textarea> | |
| <button | |
| id="sendButton" | |
| class="send" | |
| type="button" | |
| disabled | |
| aria-label="Send message" | |
| title="Send message" | |
| ></button> | |
| </div> | |
| </section> | |
| </main> | |
| <script type="module"> | |
| import { | |
| pipeline, | |
| TextStreamer, | |
| InterruptableStoppingCriteria, | |
| } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.0.0-next.7"; | |
| const MODEL_ID = "onnx-community/gemma-3-1b-it-ONNX"; | |
| const DTYPE = "q4"; | |
| const REVISION = "main"; | |
| const MAX_NEW_TOKENS = 256; | |
| const SYSTEM_PROMPT = | |
| "You are a helpful assistant who responds clearly and concisely."; | |
| const chatEl = document.getElementById("chat"); | |
| const promptEl = document.getElementById("prompt"); | |
| const sendButton = document.getElementById("sendButton"); | |
| const resetButton = document.getElementById("resetButton"); | |
| const statusTextEl = document.getElementById("statusText"); | |
| const metricsEl = document.getElementById("metrics"); | |
| const loadingStateEl = document.getElementById("loadingState"); | |
| const SEND_ICON = ` | |
| <svg viewBox="0 0 24 24" aria-hidden="true"> | |
| <path d="M3.4 20.6 21 13 3.4 5.4l.1 5.8 11 1.8-11 1.8z"></path> | |
| </svg> | |
| `; | |
| const STOP_ICON = ` | |
| <svg viewBox="0 0 24 24" aria-hidden="true"> | |
| <path d="M7 7h10v10H7z"></path> | |
| </svg> | |
| `; | |
| let generator = null; | |
| let isGenerating = false; | |
| let loadFailed = false; | |
| const stoppingCriteria = new InterruptableStoppingCriteria(); | |
| const conversation = [{ role: "system", content: SYSTEM_PROMPT }]; | |
| const examplePrompts = [ | |
| "What is the capital of France?", | |
| "Explain photosynthesis in one sentence.", | |
| "Write a poem about the ocean.", | |
| ]; | |
| function setStatus(message, { error = false } = {}) { | |
| statusTextEl.textContent = message; | |
| statusTextEl.classList.toggle("error", error); | |
| } | |
| function setMetrics(text) { | |
| metricsEl.textContent = text; | |
| } | |
| function scrollChatToBottom() { | |
| chatEl.scrollTop = chatEl.scrollHeight; | |
| } | |
| function removePlaceholder() { | |
| const placeholder = chatEl.querySelector(".placeholder"); | |
| if (placeholder) { | |
| placeholder.remove(); | |
| } | |
| } | |
| function clearCenterState() { | |
| if (loadingStateEl) { | |
| loadingStateEl.remove(); | |
| } | |
| } | |
| function showExamples() { | |
| clearCenterState(); | |
| removePlaceholder(); | |
| if (chatEl.querySelector(".examples")) { | |
| return; | |
| } | |
| const card = document.createElement("div"); | |
| card.className = "message assistant placeholder"; | |
| card.innerHTML = "<strong>Try one of these</strong>"; | |
| const list = document.createElement("div"); | |
| list.className = "examples"; | |
| for (const prompt of examplePrompts) { | |
| const button = document.createElement("button"); | |
| button.type = "button"; | |
| button.className = "example"; | |
| button.textContent = prompt; | |
| button.addEventListener("click", () => { | |
| promptEl.value = prompt; | |
| sendMessage(prompt); | |
| }); | |
| list.appendChild(button); | |
| } | |
| card.appendChild(list); | |
| chatEl.appendChild(card); | |
| } | |
| function addMessage(role, text = "") { | |
| removePlaceholder(); | |
| const node = document.createElement("div"); | |
| node.className = `message ${role}`; | |
| node.textContent = text; | |
| chatEl.appendChild(node); | |
| scrollChatToBottom(); | |
| return node; | |
| } | |
| function setStreamingMessage(node, text) { | |
| node.textContent = text; | |
| const cursor = document.createElement("span"); | |
| cursor.className = "cursor"; | |
| cursor.textContent = "▋"; | |
| node.appendChild(cursor); | |
| scrollChatToBottom(); | |
| } | |
| function updateComposer() { | |
| const ready = Boolean(generator) && !loadFailed; | |
| promptEl.disabled = !ready || isGenerating; | |
| sendButton.disabled = !ready; | |
| resetButton.disabled = !ready || isGenerating; | |
| sendButton.classList.toggle("stop", isGenerating); | |
| sendButton.innerHTML = isGenerating ? STOP_ICON : SEND_ICON; | |
| sendButton.setAttribute( | |
| "aria-label", | |
| isGenerating ? "Stop generation" : "Send message", | |
| ); | |
| sendButton.setAttribute( | |
| "title", | |
| isGenerating ? "Stop generation" : "Send message", | |
| ); | |
| } | |
| function resetChat() { | |
| if (isGenerating) { | |
| return; | |
| } | |
| conversation.length = 1; | |
| chatEl.innerHTML = ""; | |
| showExamples(); | |
| setStatus("Ready"); | |
| setMetrics("tokens/sec: -"); | |
| promptEl.value = ""; | |
| promptEl.focus(); | |
| } | |
| async function loadModel() { | |
| if (!window.isSecureContext) { | |
| throw new Error( | |
| "WebGPU requires a secure context like https:// or localhost.", | |
| ); | |
| } | |
| if (!("gpu" in navigator)) { | |
| throw new Error("This browser does not support WebGPU."); | |
| } | |
| setStatus("Loading model..."); | |
| setMetrics("tokens/sec: -"); | |
| const startedAt = performance.now(); | |
| generator = await pipeline("text-generation", MODEL_ID, { | |
| dtype: DTYPE, | |
| revision: REVISION, | |
| device: "webgpu", | |
| progress_callback: (p) => { | |
| if (p.status !== "progress_total") return; | |
| const percent = Math.round(p.progress); | |
| setStatus(`Downloading model... ${percent}%`); | |
| }, | |
| }); | |
| const seconds = ((performance.now() - startedAt) / 1000).toFixed(1); | |
| setStatus(`Ready in ${seconds}s`); | |
| setMetrics("tokens/sec: -"); | |
| showExamples(); | |
| updateComposer(); | |
| } | |
| async function sendMessage(overrideText) { | |
| if (isGenerating) { | |
| stoppingCriteria.interrupt(); | |
| setStatus("Stopping..."); | |
| return; | |
| } | |
| const text = (overrideText ?? promptEl.value).trim(); | |
| if (!text || !generator) { | |
| return; | |
| } | |
| isGenerating = true; | |
| updateComposer(); | |
| stoppingCriteria.reset(); | |
| addMessage("user", text); | |
| const assistantNode = addMessage("assistant", ""); | |
| promptEl.value = ""; | |
| conversation.push({ role: "user", content: text }); | |
| let streamedText = ""; | |
| let tokenCount = 0; | |
| let decodeStartedAt = null; | |
| clearCenterState(); | |
| setStatus("Generating..."); | |
| setMetrics("tokens/sec: -"); | |
| try { | |
| const output = await generator(conversation, { | |
| max_new_tokens: MAX_NEW_TOKENS, | |
| do_sample: false, | |
| stopping_criteria: stoppingCriteria, | |
| streamer: new TextStreamer(generator.tokenizer, { | |
| skip_prompt: true, | |
| skip_special_tokens: true, | |
| callback_function: (chunk) => { | |
| streamedText += chunk; | |
| setStreamingMessage(assistantNode, streamedText); | |
| }, | |
| token_callback_function: () => { | |
| const now = performance.now(); | |
| if (decodeStartedAt === null) { | |
| decodeStartedAt = now; | |
| } | |
| tokenCount += 1; | |
| if (tokenCount < 2) { | |
| setMetrics("tokens/sec: -"); | |
| return; | |
| } | |
| const elapsedSeconds = Math.max( | |
| (now - decodeStartedAt) / 1000, | |
| 0.001, | |
| ); | |
| const tokensPerSecond = ( | |
| (tokenCount - 1) / | |
| elapsedSeconds | |
| ).toFixed(1); | |
| setMetrics(`tokens/sec: ${tokensPerSecond}`); | |
| }, | |
| }), | |
| }); | |
| const assistantText = | |
| output?.[0]?.generated_text?.at(-1)?.content?.trim() || | |
| streamedText.trim() || | |
| "No response generated."; | |
| assistantNode.textContent = assistantText; | |
| conversation.push({ role: "assistant", content: assistantText }); | |
| if (tokenCount >= 2 && decodeStartedAt !== null) { | |
| const elapsedSeconds = Math.max( | |
| (performance.now() - decodeStartedAt) / 1000, | |
| 0.001, | |
| ); | |
| const tokensPerSecond = ((tokenCount - 1) / elapsedSeconds).toFixed( | |
| 1, | |
| ); | |
| setMetrics(`tokens/sec: ${tokensPerSecond}`); | |
| } else { | |
| setMetrics("tokens/sec: -"); | |
| } | |
| setStatus("Ready"); | |
| } catch (error) { | |
| console.error(error); | |
| assistantNode.textContent = | |
| "Something went wrong while generating a response."; | |
| assistantNode.classList.add("error"); | |
| setStatus(error.message, { error: true }); | |
| setMetrics("tokens/sec: -"); | |
| } finally { | |
| isGenerating = false; | |
| updateComposer(); | |
| if (generator && !loadFailed) { | |
| promptEl.focus(); | |
| } | |
| } | |
| } | |
| sendButton.addEventListener("click", sendMessage); | |
| resetButton.addEventListener("click", resetChat); | |
| promptEl.addEventListener("keydown", (event) => { | |
| if (event.key === "Enter" && !event.shiftKey) { | |
| event.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| updateComposer(); | |
| loadModel().catch((error) => { | |
| console.error(error); | |
| loadFailed = true; | |
| setStatus(error.message, { error: true }); | |
| setMetrics("tokens/sec: -"); | |
| updateComposer(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |