Publish static Gemma WebGPU app

README.md

@@ -1,10 +1,78 @@
 ---
-title: Gemma4 Webgpu
-emoji: 🐨
-colorFrom: gray
-colorTo: yellow
+title: Gemma 4 WebGPU
 sdk: static
-pinned: false
+app_file: dist/index.html
+app_build_command: npm install && npm run build
+models:
+  - google/gemma-4-E2B-it-qat-q4_0-gguf
+tags:
+  - webgpu
+  - gguf
+  - llama.cpp
+  - wllama
+  - gemma
+custom_headers:
+  cross-origin-embedder-policy: require-corp
+  cross-origin-opener-policy: same-origin
+  cross-origin-resource-policy: cross-origin
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Gemma 4 WebGPU
+
+Static browser chat app for `google/gemma-4-E2B-it-qat-q4_0-gguf`.
+
+The Space serves only HTML, CSS, JavaScript, and Wllama WASM assets. The GGUF files are downloaded by the browser and inference runs locally through Wllama / llama.cpp WebGPU.
+
+## Model Assets
+
+The official Google repository contains:
+
+| File | Size | Use |
+| --- | ---: | --- |
+| `gemma-4-E2B_q4_0-it.gguf` | 3.35 GB | language model |
+| `gemma-4-E2B-it-mmproj.gguf` | 987 MB | vision projector |
+
+Wllama supports split GGUF loading, so the app defaults to a public mirror containing split shards of the 3.35 GB model file plus the mmproj file. This keeps each browser-fetched LLM shard under the per-file browser/WASM limit while preserving the same model weights.
+
+## Local Development
+
+```powershell
+npm install
+npm run dev
+```
+
+Open:
+
+```text
+http://127.0.0.1:8030/
+```
+
+Cross-origin isolation headers are enabled in Vite because Wllama uses browser features such as WebGPU, WebAssembly, OPFS, and SharedArrayBuffer when available.
+
+## URL Overrides
+
+The app accepts:
+
+```text
+?modelUrl=https://huggingface.co/<repo>/resolve/main/model-00001-of-00005.gguf
+?mmprojUrl=https://huggingface.co/<repo>/resolve/main/gemma-4-E2B-it-mmproj.gguf
+?ctx=4096&threads=4&maxTokens=384
+```
+
+For split models, pass the first shard URL. Wllama discovers the remaining shards from the `-00001-of-00005.gguf` naming pattern.
+
+## Producing Split Shards
+
+Use the helper script after installing Docker and Hugging Face CLI auth:
+
+```powershell
+.\scripts\split-gemma-gguf.ps1
+```
+
+It downloads the official Google GGUF, uses the llama.cpp Docker image to run `llama-gguf-split`, and uploads the split shards plus the mmproj file to a public Hugging Face model repo.
+
+## References
+
+- Wllama supports direct browser inference, WebGPU, multimodal inputs, and split GGUF loading.
+- Hugging Face Static Spaces support custom COOP/COEP/CORP headers through README metadata.
+- `google/gemma-4-E2B-it-qat-q4_0-gguf` is Apache-2.0 licensed.

dist/assets/index-CyVSHnDs.css

@@ -0,0 +1 @@
+:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f4f0e8;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#10100f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.4}*{box-sizing:border-box}body{background:linear-gradient(#39453a38,#0000 360px),#10100f;min-width:320px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}button{border:0}.app{width:min(1180px,100vw - 32px);margin:0 auto;padding:24px 0 36px}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.brand{align-items:center;gap:12px;display:flex}.mark{color:#15170f;background:#d7ff7a;border:1px solid #f4f0e829;border-radius:8px;place-items:center;width:38px;height:38px;font-weight:800;display:grid}h1,h2,h3,p{margin:0}h1{letter-spacing:0;font-size:19px;font-weight:720}.subtle{color:#a7a093;font-size:13px}.actions{align-items:center;gap:8px;display:flex}.icon-button,.button{color:#f4f0e8;cursor:pointer;background:#24231f;border:1px solid #f4f0e81f;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:0 14px;display:inline-flex}.icon-button{width:38px;padding:0}.button.primary{color:#15170f;background:#d7ff7a;border-color:#d7ff7a;font-weight:740}.button.danger{color:#ffd9d9;background:#3a2525;border-color:#6e3737}.button:disabled,.icon-button:disabled{cursor:not-allowed;opacity:.55}.shell{grid-template-columns:minmax(0,1fr) 340px;gap:18px;display:grid}.panel{background:#1a1916f0;border:1px solid #f4f0e81f;border-radius:8px}.chat-panel{grid-template-rows:auto minmax(0,1fr) auto;min-height:690px;display:grid}.status-strip{background:#f4f0e814;border-bottom:1px solid #f4f0e81a;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;display:grid}.metric{background:#1a1916;min-width:0;padding:12px 14px}.metric span{color:#a7a093;text-transform:uppercase;font-size:11px;display:block}.metric strong{text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:14px;font-weight:680;display:block;overflow:hidden}.messages{padding:18px;overflow:auto}.message-list{flex-direction:column;gap:14px;display:flex}.message{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #f4f0e81a;border-radius:8px;max-width:86%;padding:13px 14px}.message.user{background:#243124;align-self:flex-end}.message.assistant{background:#22211d;align-self:flex-start}.empty{color:#a7a093;text-align:center;place-items:center;min-height:340px;display:grid}.composer{border-top:1px solid #f4f0e81a;gap:10px;padding:14px;display:grid}textarea,input,select{color:#f4f0e8;background:#121210;border:1px solid #f4f0e81f;border-radius:8px;outline:none;width:100%}textarea:focus,input:focus,select:focus{border-color:#d7ff7acc;box-shadow:0 0 0 3px #d7ff7a1f}textarea{resize:vertical;min-height:96px;padding:12px}input,select{min-height:38px;padding:0 10px}.composer-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.file-chip{color:#a7a093;flex:1;align-items:center;gap:8px;min-width:0;font-size:13px;display:flex}.file-chip input{display:none}.chip-button{color:#f4f0e8;cursor:pointer;background:#24231f;border-radius:8px;align-items:center;gap:7px;min-height:34px;padding:0 10px;display:inline-flex}.file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.side{flex-direction:column;gap:14px;display:flex}.card{padding:16px}.card h2{margin-bottom:10px;font-size:15px;font-weight:720}.field{gap:6px;margin-top:12px;display:grid}.field label{color:#c9c1b2;font-size:12px;font-weight:650}.field-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.progress{background:#11110f;border-radius:999px;height:10px;overflow:hidden}.bar{border-radius:inherit;background:#d7ff7a;width:0%;height:100%;transition:width .18s}.log{color:#c9c1b2;white-space:pre-wrap;background:#11110f;border-radius:8px;min-height:106px;max-height:190px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;overflow:auto}.pill-row{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.pill{color:#c9c1b2;border:1px solid #f4f0e81f;border-radius:999px;padding:5px 9px;font-size:12px}.source{overflow-wrap:anywhere}@media (max-width:900px){.app{width:min(100vw - 20px,720px);padding-top:14px}.shell{grid-template-columns:1fr}.status-strip{grid-template-columns:1fr 1fr}.message{max-width:94%}.topbar{flex-direction:column;align-items:flex-start}}

dist/assets/wllama-ByHMPmd7.wasm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a3e827b9fc3536fd1b061eee8b130e46f6366d25b062438a791d8b17b2a72a30
+size 7308965

dist/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      http-equiv="origin-trial"
+      content=""
+    />
+    <title>Gemma 4 WebGPU</title>
+    <link rel="preconnect" href="https://huggingface.co" />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <script type="module" crossorigin src="./assets/index-CsOkhJZm.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CyVSHnDs.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

index.html

@@ -1,19 +1,22 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      http-equiv="origin-trial"
+      content=""
+    />
+    <title>Gemma 4 WebGPU</title>
+    <link rel="preconnect" href="https://huggingface.co" />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
 </html>

package-lock.json

@@ -0,0 +1,848 @@
+{
+  "name": "gemma4-webgpu",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "gemma4-webgpu",
+      "version": "1.0.0",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@wllama/wllama": "^3.4.1",
+        "typescript": "^6.0.3",
+        "vite": "^8.0.16"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
+      "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.133.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.133.0.tgz",
+      "integrity": "sha512-KzkdCd6Uxqnf6l3HOw1xfatAlUURA0g14cvBYFyJ5SaNOQbOUvBr9PKArcPcrNIeRsBdgcUzOGrhKveVpvOIGA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.3.tgz",
+      "integrity": "sha512-454rs7jHngixp/NMxd5srYD57OnzSlZ/eFTETjORQHLwJG1lRtmNOJcBerZlfu4GjKqeq8aCCIQrMdHyhI51Hw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.3.tgz",
+      "integrity": "sha512-PcAhP+ynjURNyy8SKGl5DQP94aGuB/7JrXJb/t7P+hanXvQVMWzUvRRhBAcg/lNRadBhoUPqSoP4xw5tR/KBEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.3.tgz",
+      "integrity": "sha512-9YpfeUvSE2RS7wysJ81uOZkXJz7f7Q55H2Gvp3VEw/EsahqDtrphrZ0EwDLK5vvKOzaCrBsjF8JmnMLcUt78Gg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.3.tgz",
+      "integrity": "sha512-yB1IlAsSNHncV6SCTL27/MVGR5htvQsoGxIv5KMGXALp+Ll1wYsn+x98M9MW7qa+NdSbvrrY7ANI4wLJ0n1e6g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.3.tgz",
+      "integrity": "sha512-Yi30IVAAfLUCy2MseFjbB1jAMDl1VMCAas5StnYp8da9+CKvMd2H2cbEjWcw5NPaPqzvYkVIaF1nNUG+b7u/sw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.3.tgz",
+      "integrity": "sha512-jsO7R8To+AdlYgUmN5sHSCZbfhtMBkO0WUx8iORQnPcMMdgr7qM2DQmMwgabs3GhNztdmoKkMKQFHD6DTMCIQw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.3.tgz",
+      "integrity": "sha512-VWkUHwWriDciit80wleYwKILoR/KMvxh/IdwS/paX+ZgpuRpCrKLUdadJbc0NpBEiyhpYawsJ73j9aCvOH+f7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.3.tgz",
+      "integrity": "sha512-5f1laC0SlIR0yDbFCd8acUhvJIag6N3zC5P7oUPN6wX0aOma+uKJ0wBDH5aq7I1PVI2ttTlhJwzwRIBnLiSGEg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.3.tgz",
+      "integrity": "sha512-Iq4ko0r4XsgbrF/LunNgHtAGLRRVE2kXonAXQ/MV0mC6jQpMOhW1SvtZja2EhC/kd05++bP78dsqBeIQyYJ6Yg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.3.tgz",
+      "integrity": "sha512-B8m6tD5+/N5FeNQFbKlLA/2yVq9ycQP1SeedyEYYKWBNR3ZQbkvIUcNnDNM03lO1l5F2roiiFJGgvoLLyZXtSg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.3.tgz",
+      "integrity": "sha512-pSdpdUJHkuCxun9LE7jvgUB9qsRgaiyNNCX7m/AvHTcq67AiT/Yhoxvw5zPfhrM8k/BfP8ce/hMOpthKDpEUow==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.3.tgz",
+      "integrity": "sha512-OXXS3RKJgX2uLwM+gYyuH5omcH8fL1LJs96pZGgtetVCahON57+d4SJHzTgZiOjxgGkSnpXpOsWuPDGAKAigEg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.3.tgz",
+      "integrity": "sha512-JTtb8BWFynicNSoPrehsCzBtOKjZ6jhMiPFEmOiuXg1Fl8dn2KHQob+GuPSGR0dryQa1PQJbzjF3dqO/whhjLg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.10.0",
+        "@emnapi/runtime": "1.10.0",
+        "@napi-rs/wasm-runtime": "^1.1.4"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.3.tgz",
+      "integrity": "sha512-gEdFFEN70A/jxb2svrWsN3aDL7OUtmvlOy+6fa2jxG8K0wQ1ZbdeLGnidov6Yu5/733dI5ySfzFlQ/cb0bSz1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.3.tgz",
+      "integrity": "sha512-eXB7CHuaQdqmJcc3koCNtNPmT/bj2gc999kUFgBxG8Ac0NdgXc4rkCHhqrgrhN3zddvvvrgzj1e90SuSfmyIXA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "license": "MIT"
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
+      "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@wllama/wllama": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@wllama/wllama/-/wllama-3.4.1.tgz",
+      "integrity": "sha512-izq3CLVsIIpFoi4lI5/yvpM1tbzTBnDU8WuVi6I1q1oQgImSXSGF8eZo8WwDNBgbmhVJpcPGyw8cg24jKk0sbg==",
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.3.tgz",
+      "integrity": "sha512-i00lAJ2ks1BYr7rjNjKC7BcqAS7nVfiT3QX1SI5aY+AFHblCmaUf9OE9dbdzDvW6dJxbi2ZCZiy9v3CcwOiX3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.133.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.3",
+        "@rolldown/binding-darwin-arm64": "1.0.3",
+        "@rolldown/binding-darwin-x64": "1.0.3",
+        "@rolldown/binding-freebsd-x64": "1.0.3",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.3",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.3",
+        "@rolldown/binding-linux-arm64-musl": "1.0.3",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.3",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.3",
+        "@rolldown/binding-linux-x64-gnu": "1.0.3",
+        "@rolldown/binding-linux-x64-musl": "1.0.3",
+        "@rolldown/binding-openharmony-arm64": "1.0.3",
+        "@rolldown/binding-wasm32-wasi": "1.0.3",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.3",
+        "@rolldown/binding-win32-x64-msvc": "1.0.3"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.0.16",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.16.tgz",
+      "integrity": "sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==",
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.15",
+        "rolldown": "1.0.3",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.1.18",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "gemma4-webgpu",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1 --port 8030",
+    "build": "tsc && vite build",
+    "preview": "vite preview --host 127.0.0.1 --port 8030",
+    "check": "tsc --noEmit && vite build"
+  },
+  "keywords": [
+    "gemma",
+    "gguf",
+    "webgpu",
+    "wllama",
+    "llama.cpp"
+  ],
+  "author": "ryanhlewis",
+  "license": "Apache-2.0",
+  "description": "Static browser WebGPU chat app for Gemma 4 E2B GGUF using Wllama.",
+  "dependencies": {
+    "@wllama/wllama": "^3.4.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
+  }
+}

scripts/split-gemma-gguf.ps1

@@ -0,0 +1,64 @@
+param(
+  [string]$SourceRepo = "google/gemma-4-E2B-it-qat-q4_0-gguf",
+  [string]$TargetRepo = "ryanhlewis/gemma-4-E2B-it-qat-q4_0-gguf-webgpu",
+  [string]$ModelFile = "gemma-4-E2B_q4_0-it.gguf",
+  [string]$MmprojFile = "gemma-4-E2B-it-mmproj.gguf",
+  [string]$SplitMaxSize = "512M",
+  [string]$WorkDir = "model-cache"
+)
+
+$ErrorActionPreference = "Stop"
+
+New-Item -ItemType Directory -Force -Path $WorkDir | Out-Null
+
+Write-Host "Downloading $SourceRepo / $ModelFile"
+hf download $SourceRepo $ModelFile --local-dir $WorkDir
+
+Write-Host "Downloading $SourceRepo / $MmprojFile"
+hf download $SourceRepo $MmprojFile --local-dir $WorkDir
+
+$dockerWork = (Resolve-Path $WorkDir).Path
+
+Write-Host "Splitting model into $SplitMaxSize shards"
+docker run --rm --entrypoint /app/llama-gguf-split -v "${dockerWork}:/work" ghcr.io/ggml-org/llama.cpp:full `
+  --split-max-size $SplitMaxSize "/work/$ModelFile" "/work/gemma-4-E2B_q4_0-it"
+
+Write-Host "Creating or updating Hugging Face model repo $TargetRepo"
+hf repo create $TargetRepo --type model --yes
+
+@"
+---
+license: apache-2.0
+base_model: google/gemma-4-E2B-it
+tags:
+  - gguf
+  - webgpu
+  - wllama
+  - llama.cpp
+  - gemma
+---
+
+# Gemma 4 E2B IT QAT Q4_0 GGUF WebGPU Shards
+
+Browser-safe split mirror of `google/gemma-4-E2B-it-qat-q4_0-gguf`.
+
+The LLM GGUF is split with `llama-gguf-split --split-max-size $SplitMaxSize` for Wllama/WebGPU browser loading. The mirror also includes the matching mmproj file:
+
+`gemma-4-E2B-it-mmproj.gguf`
+
+Use the first shard URL in Wllama:
+
+```text
+gemma-4-E2B_q4_0-it-00001-of-00005.gguf
+```
+"@ | Set-Content -Path (Join-Path $WorkDir "README.md") -Encoding UTF8
+
+Write-Host "Uploading split shards and README"
+$env:HF_HUB_DISABLE_XET = "1"
+hf upload $TargetRepo (Join-Path $WorkDir "README.md") README.md --repo-type model
+Get-ChildItem $WorkDir -Filter "gemma-4-E2B_q4_0-it-*.gguf" | Sort-Object Name | ForEach-Object {
+  hf upload $TargetRepo $_.FullName $_.Name --repo-type model
+}
+hf upload $TargetRepo (Join-Path $WorkDir $MmprojFile) $MmprojFile --repo-type model
+
+Write-Host "Done."

src/main.ts

@@ -0,0 +1,530 @@
+import { LoggerWithoutDebug, Wllama } from "@wllama/wllama";
+import type { ChatCompletionChunk, ChatCompletionMessage, ResultTimings } from "@wllama/wllama";
+import wasmUrl from "@wllama/wllama/esm/wasm/wllama.wasm?url";
+import "./style.css";
+
+const DEFAULT_LLM_URL =
+  "https://huggingface.co/ryanhlewis/gemma-4-E2B-it-qat-q4_0-gguf-webgpu/resolve/main/gemma-4-E2B_q4_0-it-00001-of-00005.gguf";
+const DEFAULT_MMPROJ_URL =
+  "https://huggingface.co/ryanhlewis/gemma-4-E2B-it-qat-q4_0-gguf-webgpu/resolve/main/gemma-4-E2B-it-mmproj.gguf";
+const GOOGLE_SINGLE_GGUF =
+  "https://huggingface.co/google/gemma-4-E2B-it-qat-q4_0-gguf/resolve/main/gemma-4-E2B_q4_0-it.gguf";
+const TOTAL_DOWNLOAD_BYTES = 4_340_000_000;
+
+type Role = "user" | "assistant";
+
+type ChatEntry = {
+  role: Role;
+  content: string;
+};
+
+type LoadStats = {
+  loaded: number;
+  total: number;
+  startedAt: number;
+  doneAt?: number;
+};
+
+const params = new URLSearchParams(window.location.search);
+const root = document.querySelector<HTMLDivElement>("#app");
+if (!root) throw new Error("#app missing");
+const app = root;
+
+let wllama: Wllama | null = null;
+let modelLoaded = false;
+let loading = false;
+let generating = false;
+let loadStats: LoadStats = { loaded: 0, total: TOTAL_DOWNLOAD_BYTES, startedAt: 0 };
+let chat: ChatEntry[] = [];
+let imageFile: File | null = null;
+let abortController: AbortController | null = null;
+let lastTimings: ResultTimings | undefined;
+
+const state = {
+  llmUrl: params.get("modelUrl") || params.get("llmUrl") || DEFAULT_LLM_URL,
+  mmprojUrl: params.get("mmprojUrl") || DEFAULT_MMPROJ_URL,
+  context: Number(params.get("ctx") || 4096),
+  threads: Number(params.get("threads") || 4),
+  batch: Number(params.get("batch") || 512),
+  gpuLayers: Number(params.get("gpuLayers") || 999),
+  maxTokens: Number(params.get("maxTokens") || 384),
+  temperature: Number(params.get("temperature") || 0.7),
+  topP: Number(params.get("topP") || 0.95),
+  seed: Number(params.get("seed") || -1),
+  prompt:
+    params.get("prompt") ||
+    "Explain what makes Gemma 4 E2B useful for browser-local AI in three concise bullets.",
+};
+
+function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
+  const units = ["B", "KiB", "MiB", "GiB"];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${value.toFixed(unit === 0 ? 0 : 1)} ${units[unit]}`;
+}
+
+function formatSeconds(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) return "0.0s";
+  return `${seconds.toFixed(1)}s`;
+}
+
+function elapsedLoadSeconds(): number {
+  if (!loadStats.startedAt) return 0;
+  const end = loadStats.doneAt || performance.now();
+  return (end - loadStats.startedAt) / 1000;
+}
+
+function loadPercent(): number {
+  if (!loadStats.total) return 0;
+  return Math.max(0, Math.min(100, (loadStats.loaded / loadStats.total) * 100));
+}
+
+function webgpuStatus(): string {
+  if (!("gpu" in navigator)) return "unavailable";
+  return modelLoaded && wllama?.isSupportWebGPU() ? "ready" : "available";
+}
+
+function setLog(message: string): void {
+  currentLog = message;
+  const el = document.querySelector<HTMLDivElement>("#log");
+  if (el) el.textContent = message;
+}
+
+function appendLog(message: string): void {
+  currentLog = `${currentLog ? `${currentLog}\n` : ""}${message}`;
+  const el = document.querySelector<HTMLDivElement>("#log");
+  if (!el) return;
+  el.textContent = currentLog;
+  el.scrollTop = el.scrollHeight;
+}
+
+function render(): void {
+  const progress = loadPercent();
+  const loadLabel = modelLoaded
+    ? "Model ready"
+    : loading
+      ? `${formatBytes(loadStats.loaded)} / ${formatBytes(loadStats.total)}`
+      : "Download model assets";
+  const loadSub = loading
+    ? `${progress.toFixed(1)}% | ${formatBytes(loadStats.loaded / Math.max(elapsedLoadSeconds(), 0.1))}/s | ${formatSeconds(elapsedLoadSeconds())}`
+    : "4.34 GB";
+
+  app.innerHTML = `
+    <main class="app">
+      <header class="topbar">
+        <div class="brand">
+          <div class="mark">G4</div>
+          <div>
+            <h1>Gemma 4 WebGPU</h1>
+            <p class="subtle">GGUF chat running locally in your browser with Wllama and llama.cpp WebGPU.</p>
+          </div>
+        </div>
+        <div class="actions">
+          <button class="icon-button" id="clearButton" title="Clear chat">C</button>
+          <button class="icon-button" id="cacheButton" title="Clear model cache">R</button>
+        </div>
+      </header>
+
+      <section class="shell">
+        <section class="panel chat-panel">
+          <div class="status-strip">
+            <div class="metric"><span>Status</span><strong>${modelLoaded ? "ready" : loading ? "loading" : "idle"}</strong></div>
+            <div class="metric"><span>WebGPU</span><strong>${webgpuStatus()}</strong></div>
+            <div class="metric"><span>Prompt</span><strong>${lastTimings ? `${lastTimings.prompt_per_second.toFixed(1)} tok/s` : "-"}</strong></div>
+            <div class="metric"><span>Generate</span><strong>${lastTimings ? `${lastTimings.predicted_per_second.toFixed(1)} tok/s` : "-"}</strong></div>
+          </div>
+
+          <div class="messages">
+            ${
+              chat.length
+                ? `<div class="message-list">${chat
+                    .map((item) => `<div class="message ${item.role}">${escapeHtml(item.content)}</div>`)
+                    .join("")}</div>`
+                : `<div class="empty"><div><h2>Ask Gemma 4 locally</h2><p class="subtle">Download once, then chat from browser cache.</p></div></div>`
+            }
+          </div>
+
+          <form class="composer" id="chatForm">
+            <textarea id="promptInput" placeholder="Message Gemma">${escapeHtml(state.prompt)}</textarea>
+            <div class="composer-row">
+              <label class="file-chip">
+                <span class="chip-button">Add image</span>
+                <input id="imageInput" type="file" accept="image/*" />
+                <span class="file-name">${imageFile ? escapeHtml(imageFile.name) : "Optional image input"}</span>
+              </label>
+              ${imageFile ? `<button class="button" type="button" id="removeImageButton">Remove image</button>` : ""}
+              ${
+                generating
+                  ? `<button class="button danger" id="stopButton" type="button">Stop</button>`
+                  : `<button class="button primary" type="submit" ${!modelLoaded ? "disabled" : ""}>Send</button>`
+              }
+            </div>
+          </form>
+        </section>
+
+        <aside class="side">
+          <section class="panel card">
+            <h2>${loadLabel}</h2>
+            <p class="subtle">${loadSub}</p>
+            <div class="field">
+              <div class="progress" aria-label="Download progress">
+                <div class="bar" style="width: ${progress}%"></div>
+              </div>
+            </div>
+            <div class="field">
+              <button class="button primary" id="loadButton" ${loading || modelLoaded ? "disabled" : ""}>Start download</button>
+            </div>
+            <div class="pill-row">
+              <span class="pill">LLM q4_0 split</span>
+              <span class="pill">mmproj</span>
+              <span class="pill">WebGPU layers</span>
+            </div>
+          </section>
+
+          <section class="panel card">
+            <h2>Generation</h2>
+            <div class="field-grid">
+              <div class="field">
+                <label for="maxTokens">Max tokens</label>
+                <input id="maxTokens" type="number" min="16" max="4096" step="16" value="${state.maxTokens}" />
+              </div>
+              <div class="field">
+                <label for="temperature">Temperature</label>
+                <input id="temperature" type="number" min="0" max="2" step="0.05" value="${state.temperature}" />
+              </div>
+            </div>
+            <div class="field-grid">
+              <div class="field">
+                <label for="topP">Top-p</label>
+                <input id="topP" type="number" min="0.01" max="1" step="0.01" value="${state.topP}" />
+              </div>
+              <div class="field">
+                <label for="seed">Seed</label>
+                <input id="seed" type="number" step="1" value="${state.seed}" />
+              </div>
+            </div>
+          </section>
+
+          <section class="panel card">
+            <h2>Runtime</h2>
+            <div class="field-grid">
+              <div class="field">
+                <label for="context">Context</label>
+                <input id="context" type="number" min="512" max="32768" step="512" value="${state.context}" />
+              </div>
+              <div class="field">
+                <label for="threads">Threads</label>
+                <input id="threads" type="number" min="1" max="16" step="1" value="${state.threads}" />
+              </div>
+            </div>
+            <div class="field-grid">
+              <div class="field">
+                <label for="batch">Batch</label>
+                <input id="batch" type="number" min="64" max="2048" step="64" value="${state.batch}" />
+              </div>
+              <div class="field">
+                <label for="gpuLayers">GPU layers</label>
+                <input id="gpuLayers" type="number" min="0" max="999" step="1" value="${state.gpuLayers}" />
+              </div>
+            </div>
+          </section>
+
+          <section class="panel card">
+            <h2>Model source</h2>
+            <div class="field">
+              <label for="llmUrl">LLM GGUF first shard</label>
+              <input id="llmUrl" class="source" value="${escapeAttr(state.llmUrl)}" />
+            </div>
+            <div class="field">
+              <label for="mmprojUrl">mmproj GGUF</label>
+              <input id="mmprojUrl" class="source" value="${escapeAttr(state.mmprojUrl)}" />
+            </div>
+            <div class="field">
+              <button class="button" id="googleSingleButton" type="button">Use Google single file</button>
+            </div>
+          </section>
+
+          <section class="panel card">
+            <h2>Console</h2>
+            <div class="log" id="log">${escapeHtml(currentLog)}</div>
+          </section>
+        </aside>
+      </section>
+    </main>
+  `;
+
+  bindEvents();
+  requestAnimationFrame(() => {
+    const messages = document.querySelector<HTMLDivElement>(".messages");
+    if (messages) messages.scrollTop = messages.scrollHeight;
+  });
+}
+
+let currentLog = "Ready.";
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+function escapeAttr(value: string): string {
+  return escapeHtml(value).replaceAll("\n", " ");
+}
+
+function syncInputs(): void {
+  state.prompt = getTextAreaValue("promptInput", state.prompt);
+  state.llmUrl = getInputValue("llmUrl", state.llmUrl);
+  state.mmprojUrl = getInputValue("mmprojUrl", state.mmprojUrl);
+  state.context = getNumberValue("context", state.context);
+  state.threads = getNumberValue("threads", state.threads);
+  state.batch = getNumberValue("batch", state.batch);
+  state.gpuLayers = getNumberValue("gpuLayers", state.gpuLayers);
+  state.maxTokens = getNumberValue("maxTokens", state.maxTokens);
+  state.temperature = getNumberValue("temperature", state.temperature);
+  state.topP = getNumberValue("topP", state.topP);
+  state.seed = getNumberValue("seed", state.seed);
+}
+
+function getInputValue(id: string, fallback: string): string {
+  return document.querySelector<HTMLInputElement>(`#${id}`)?.value.trim() || fallback;
+}
+
+function getTextAreaValue(id: string, fallback: string): string {
+  return document.querySelector<HTMLTextAreaElement>(`#${id}`)?.value.trim() || fallback;
+}
+
+function getNumberValue(id: string, fallback: number): number {
+  const value = Number(document.querySelector<HTMLInputElement>(`#${id}`)?.value);
+  return Number.isFinite(value) ? value : fallback;
+}
+
+function bindEvents(): void {
+  document.querySelector<HTMLButtonElement>("#loadButton")?.addEventListener("click", () => {
+    void loadModel();
+  });
+
+  document.querySelector<HTMLFormElement>("#chatForm")?.addEventListener("submit", (event) => {
+    event.preventDefault();
+    void sendMessage();
+  });
+
+  document.querySelector<HTMLButtonElement>("#stopButton")?.addEventListener("click", () => {
+    abortController?.abort();
+  });
+
+  document.querySelector<HTMLInputElement>("#imageInput")?.addEventListener("change", (event) => {
+    const files = (event.target as HTMLInputElement).files;
+    imageFile = files?.[0] || null;
+    render();
+  });
+
+  document.querySelector<HTMLButtonElement>("#removeImageButton")?.addEventListener("click", () => {
+    imageFile = null;
+    render();
+  });
+
+  document.querySelector<HTMLButtonElement>("#clearButton")?.addEventListener("click", () => {
+    chat = [];
+    lastTimings = undefined;
+    render();
+  });
+
+  document.querySelector<HTMLButtonElement>("#cacheButton")?.addEventListener("click", () => {
+    void clearCache();
+  });
+
+  document.querySelector<HTMLButtonElement>("#googleSingleButton")?.addEventListener("click", () => {
+    state.llmUrl = GOOGLE_SINGLE_GGUF;
+    modelLoaded = false;
+    render();
+    appendLog("Switched to the official single GGUF URL. Browsers may reject files over 2 GB; split shards are recommended.");
+  });
+}
+
+async function loadModel(): Promise<void> {
+  if (loading || modelLoaded) return;
+  syncInputs();
+
+  loading = true;
+  loadStats = { loaded: 0, total: TOTAL_DOWNLOAD_BYTES, startedAt: performance.now() };
+  currentLog = "Creating Wllama runtime...";
+  render();
+
+  try {
+    wllama = new Wllama(
+      { default: wasmUrl },
+      {
+        logger: LoggerWithoutDebug,
+        suppressNativeLog: true,
+        parallelDownloads: 5,
+      }
+    );
+    wllama.setCompat(null);
+
+    if (!wllama.isSupportWebGPU()) {
+      appendLog("WebGPU is not available. Wllama may fall back or fail depending on this browser.");
+    }
+
+    appendLog(`Loading ${state.llmUrl}`);
+    await wllama.loadModelFromUrl(
+      {
+        url: state.llmUrl,
+        mmprojUrl: state.mmprojUrl || undefined,
+      },
+      {
+        useCache: true,
+        n_ctx: state.context,
+        n_threads: state.threads,
+        n_batch: state.batch,
+        n_gpu_layers: state.gpuLayers,
+        flash_attn: true,
+        cache_type_k: "f16",
+        cache_type_v: "f16",
+        mmproj_offload: true,
+        seed: state.seed >= 0 ? state.seed : Math.floor(Math.random() * 2_147_483_647),
+        progressCallback: ({ loaded, total }) => {
+          loadStats.loaded = loaded;
+          loadStats.total = total || loadStats.total || TOTAL_DOWNLOAD_BYTES;
+          currentLog = `Downloading model assets...\n${formatBytes(loadStats.loaded)} / ${formatBytes(loadStats.total)}`;
+          render();
+        },
+      }
+    );
+
+    loadStats.doneAt = performance.now();
+    modelLoaded = true;
+    currentLog = [
+      `Loaded in ${formatSeconds(elapsedLoadSeconds())}`,
+      `libllama ${Wllama.getLibllamaVersion()}`,
+      `threads ${wllama.getNumThreads()}${wllama.isMultithread() ? " multi-thread" : " single-thread"}`,
+      `modalities image=${safeSupport("image")} audio=${safeSupport("audio")}`,
+    ].join("\n");
+  } catch (error) {
+    currentLog = `Load failed:\n${errorToText(error)}`;
+    modelLoaded = false;
+    void wllama?.exit().catch(() => undefined);
+    wllama = null;
+  } finally {
+    loading = false;
+    render();
+  }
+}
+
+function safeSupport(kind: "image" | "audio"): string {
+  try {
+    return wllama?.supportInputModality(kind) ? "yes" : "no";
+  } catch {
+    return "unknown";
+  }
+}
+
+async function clearCache(): Promise<void> {
+  if (!wllama) {
+    wllama = new Wllama({ default: wasmUrl }, { logger: LoggerWithoutDebug, suppressNativeLog: true });
+  }
+  await wllama.cacheManager.clear();
+  modelLoaded = false;
+  currentLog = "Browser model cache cleared.";
+  render();
+}
+
+async function sendMessage(): Promise<void> {
+  if (!wllama || !modelLoaded || generating) return;
+  syncInputs();
+  if (!state.prompt) return;
+
+  const userMessage = state.prompt;
+  const imageData = imageFile ? await imageFile.arrayBuffer() : null;
+  const content = imageData
+    ? [
+        { type: "text" as const, text: userMessage },
+        { type: "image" as const, data: imageData },
+      ]
+    : userMessage;
+
+  const history: ChatCompletionMessage[] = chat.map((entry) => ({
+    role: entry.role,
+    content: entry.content,
+  }));
+
+  chat.push({ role: "user", content: imageFile ? `${userMessage}\n[image: ${imageFile.name}]` : userMessage });
+  chat.push({ role: "assistant", content: "" });
+  state.prompt = "";
+  generating = true;
+  abortController = new AbortController();
+  lastTimings = undefined;
+  const startedAt = performance.now();
+  render();
+
+  try {
+    await wllama.createChatCompletion({
+      messages: [
+        ...history,
+        {
+          role: "user",
+          content,
+        },
+      ],
+      stream: true,
+      max_tokens: state.maxTokens,
+      temperature: state.temperature,
+      top_p: state.topP,
+      cache_prompt: true,
+      timings_per_token: true,
+      abortSignal: abortController.signal,
+      onData: (chunk) => {
+        const delta = chunk.choices?.[0]?.delta?.content || "";
+        lastTimings = chunk.timings || lastTimings;
+        const last = chat[chat.length - 1];
+        if (last?.role === "assistant") last.content += delta;
+        const elapsed = (performance.now() - startedAt) / 1000;
+        currentLog = [
+          `Generating ${formatSeconds(elapsed)}`,
+          lastTimings ? `Prompt ${lastTimings.prompt_per_second.toFixed(1)} tok/s` : "",
+          lastTimings ? `Output ${lastTimings.predicted_per_second.toFixed(1)} tok/s` : "",
+        ]
+          .filter(Boolean)
+          .join("\n");
+        render();
+      },
+    });
+    const elapsed = (performance.now() - startedAt) / 1000;
+    currentLog = formatDoneLog(elapsed, lastTimings);
+  } catch (error) {
+    const last = chat[chat.length - 1];
+    if (last?.role === "assistant" && !last.content) {
+      last.content = `Error: ${errorToText(error)}`;
+    }
+    currentLog = `Generation stopped:\n${errorToText(error)}`;
+  } finally {
+    generating = false;
+    abortController = null;
+    render();
+  }
+}
+
+function formatDoneLog(elapsed: number, timings?: ResultTimings): string {
+  return [
+    `Done in ${formatSeconds(elapsed)}`,
+    timings ? `Prompt ${timings.prompt_n} tokens at ${timings.prompt_per_second.toFixed(1)} tok/s` : "",
+    timings ? `Generated ${timings.predicted_n} tokens at ${timings.predicted_per_second.toFixed(1)} tok/s` : "",
+  ]
+    .filter(Boolean)
+    .join("\n");
+}
+
+function errorToText(error: unknown): string {
+  if (error instanceof Error) return error.stack || error.message;
+  return String(error);
+}
+
+render();

src/style.css

@@ -0,0 +1,399 @@
+:root {
+  color-scheme: dark;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+  background: #10100f;
+  color: #f4f0e8;
+  line-height: 1.4;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background:
+    linear-gradient(180deg, rgba(57, 69, 58, 0.22), transparent 360px),
+    #10100f;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+button {
+  border: 0;
+}
+
+.app {
+  width: min(1180px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 24px 0 36px;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.mark {
+  display: grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  border: 1px solid rgba(244, 240, 232, 0.16);
+  border-radius: 8px;
+  background: #d7ff7a;
+  color: #15170f;
+  font-weight: 800;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+
+h1 {
+  font-size: 19px;
+  font-weight: 720;
+  letter-spacing: 0;
+}
+
+.subtle {
+  color: #a7a093;
+  font-size: 13px;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon-button,
+.button {
+  display: inline-flex;
+  min-height: 38px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border-radius: 8px;
+  padding: 0 14px;
+  border: 1px solid rgba(244, 240, 232, 0.12);
+  background: #24231f;
+  color: #f4f0e8;
+  cursor: pointer;
+}
+
+.icon-button {
+  width: 38px;
+  padding: 0;
+}
+
+.button.primary {
+  background: #d7ff7a;
+  border-color: #d7ff7a;
+  color: #15170f;
+  font-weight: 740;
+}
+
+.button.danger {
+  background: #3a2525;
+  border-color: #6e3737;
+  color: #ffd9d9;
+}
+
+.button:disabled,
+.icon-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.shell {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  gap: 18px;
+}
+
+.panel {
+  border: 1px solid rgba(244, 240, 232, 0.12);
+  border-radius: 8px;
+  background: rgba(26, 25, 22, 0.94);
+}
+
+.chat-panel {
+  min-height: 690px;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+}
+
+.status-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1px;
+  border-bottom: 1px solid rgba(244, 240, 232, 0.1);
+  background: rgba(244, 240, 232, 0.08);
+}
+
+.metric {
+  min-width: 0;
+  padding: 12px 14px;
+  background: #1a1916;
+}
+
+.metric span {
+  display: block;
+  color: #a7a093;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.metric strong {
+  display: block;
+  overflow: hidden;
+  margin-top: 2px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 680;
+}
+
+.messages {
+  overflow: auto;
+  padding: 18px;
+}
+
+.message-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.message {
+  max-width: 86%;
+  padding: 13px 14px;
+  border: 1px solid rgba(244, 240, 232, 0.1);
+  border-radius: 8px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.message.user {
+  align-self: flex-end;
+  background: #243124;
+}
+
+.message.assistant {
+  align-self: flex-start;
+  background: #22211d;
+}
+
+.empty {
+  display: grid;
+  min-height: 340px;
+  place-items: center;
+  color: #a7a093;
+  text-align: center;
+}
+
+.composer {
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+  border-top: 1px solid rgba(244, 240, 232, 0.1);
+}
+
+textarea,
+input,
+select {
+  width: 100%;
+  border: 1px solid rgba(244, 240, 232, 0.12);
+  border-radius: 8px;
+  background: #121210;
+  color: #f4f0e8;
+  outline: none;
+}
+
+textarea:focus,
+input:focus,
+select:focus {
+  border-color: rgba(215, 255, 122, 0.8);
+  box-shadow: 0 0 0 3px rgba(215, 255, 122, 0.12);
+}
+
+textarea {
+  min-height: 96px;
+  resize: vertical;
+  padding: 12px;
+}
+
+input,
+select {
+  min-height: 38px;
+  padding: 0 10px;
+}
+
+.composer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.file-chip {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: 8px;
+  color: #a7a093;
+  font-size: 13px;
+}
+
+.file-chip input {
+  display: none;
+}
+
+.chip-button {
+  display: inline-flex;
+  min-height: 34px;
+  align-items: center;
+  gap: 7px;
+  border-radius: 8px;
+  padding: 0 10px;
+  background: #24231f;
+  color: #f4f0e8;
+  cursor: pointer;
+}
+
+.file-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.side {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.card {
+  padding: 16px;
+}
+
+.card h2 {
+  margin-bottom: 10px;
+  font-size: 15px;
+  font-weight: 720;
+}
+
+.field {
+  display: grid;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.field label {
+  color: #c9c1b2;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.field-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.progress {
+  height: 10px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #11110f;
+}
+
+.bar {
+  height: 100%;
+  width: 0%;
+  border-radius: inherit;
+  background: #d7ff7a;
+  transition: width 180ms ease;
+}
+
+.log {
+  min-height: 106px;
+  max-height: 190px;
+  overflow: auto;
+  padding: 10px;
+  border-radius: 8px;
+  background: #11110f;
+  color: #c9c1b2;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
+.pill-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.pill {
+  border: 1px solid rgba(244, 240, 232, 0.12);
+  border-radius: 999px;
+  padding: 5px 9px;
+  color: #c9c1b2;
+  font-size: 12px;
+}
+
+.source {
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 900px) {
+  .app {
+    width: min(100vw - 20px, 720px);
+    padding-top: 14px;
+  }
+
+  .shell {
+    grid-template-columns: 1fr;
+  }
+
+  .status-strip {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .message {
+    max-width: 94%;
+  }
+
+  .topbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "vite";
+
+const crossOriginHeaders = {
+  "Cross-Origin-Embedder-Policy": "require-corp",
+  "Cross-Origin-Opener-Policy": "same-origin",
+  "Cross-Origin-Resource-Policy": "cross-origin",
+};
+
+export default defineConfig({
+  base: "./",
+  server: {
+    headers: crossOriginHeaders,
+  },
+  preview: {
+    headers: crossOriginHeaders,
+  },
+  build: {
+    target: "es2022",
+    assetsInlineLimit: 0,
+  },
+});