Upload README.md with huggingface_hub

README.md

@@ -22,6 +22,7 @@ tags:
 - reasoning
 - onnx
 - onnxruntime
+- webgpu
 base_model:
 - LiquidAI/LFM2.5-1.2B-Thinking
 ---
@@ -153,6 +154,135 @@ else:
     print(full_response)
 ```
 
+## WebGPU (Browser)
+
+### Installation
+
+```bash
+npm install onnxruntime-web @huggingface/transformers
+```
+
+### Enable WebGPU
+
+WebGPU is required for browser inference. To enable:
+
+1. **Chrome/Edge**: Navigate to `chrome://flags/#enable-unsafe-webgpu`, enable, and restart
+2. **Verify**: Check `chrome://gpu` for "WebGPU" status
+3. **Test**: Run `navigator.gpu.requestAdapter()` in DevTools console
+
+### Inference
+
+```javascript
+import * as ort from "onnxruntime-web/webgpu";
+import { AutoTokenizer } from "@huggingface/transformers";
+
+// Check WebGPU availability
+if (!navigator.gpu) {
+  throw new Error("WebGPU not available. Enable at chrome://flags/#enable-unsafe-webgpu");
+}
+const adapter = await navigator.gpu.requestAdapter();
+if (!adapter) {
+  throw new Error("WebGPU adapter not found. Check chrome://gpu for status.");
+}
+
+ort.env.wasm.numThreads = 1;
+
+const modelId = "LiquidAI/LFM2.5-1.2B-Thinking-ONNX";
+const modelBase = `https://huggingface.co/${modelId}/resolve/main`;
+
+// Load tokenizer
+const tokenizer = await AutoTokenizer.from_pretrained(modelId);
+
+// Load ONNX session with external data
+const onnxPath = `${modelBase}/onnx/model_q4.onnx`;
+const dataPath = `${modelBase}/onnx/model_q4.onnx_data`;
+const session = await ort.InferenceSession.create(onnxPath, {
+  executionProviders: ["webgpu"],
+  externalData: [{ path: "model_q4.onnx_data", data: dataPath }],
+});
+
+// Model config (from config.json)
+const hiddenSize = 2048;
+const numKVHeads = 8;
+const headDim = 256;
+
+// Initialize KV cache
+function initCache() {
+  const cache = {};
+  for (const name of session.inputNames) {
+    if (name.startsWith("past_conv")) {
+      cache[name] = new ort.Tensor("float32", new Float32Array(hiddenSize * 3), [1, hiddenSize, 3]);
+    } else if (name.startsWith("past_key_values")) {
+      cache[name] = new ort.Tensor("float32", new Float32Array(0), [1, numKVHeads, 0, headDim]);
+    }
+  }
+  return cache;
+}
+
+// Update cache from outputs
+function updateCache(cache, outputs) {
+  for (const [name, tensor] of Object.entries(outputs)) {
+    if (name.startsWith("present_conv")) {
+      cache[name.replace("present_conv", "past_conv")] = tensor;
+    } else if (name.startsWith("present.")) {
+      cache[name.replace("present.", "past_key_values.")] = tensor;
+    }
+  }
+}
+
+// Build prompt and tokenize
+const messages = [{ role: "user", content: "What is 25 * 37?" }];
+const prompt = tokenizer.apply_chat_template(messages, { add_generation_prompt: true, tokenize: false });
+const inputIds = tokenizer.encode(prompt);
+
+// Generation loop
+const cache = initCache();
+const eosTokenId = tokenizer.eos_token_id;
+const generatedTokens = [];
+let curLen = inputIds.length;
+let ids = inputIds;
+
+for (let step = 0; step < 512; step++) {
+  const inputIdsTensor = new ort.Tensor("int64", new BigInt64Array(ids.map(BigInt)), [1, ids.length]);
+  const attentionMask = new ort.Tensor("int64", new BigInt64Array(curLen).fill(1n), [1, curLen]);
+
+  const outputs = await session.run({ input_ids: inputIdsTensor, attention_mask: attentionMask, ...cache });
+
+  // Greedy decode: argmax of last token logits
+  const logits = outputs.logits;
+  const vocabSize = logits.dims[2];
+  const lastLogits = logits.data.slice((logits.dims[1] - 1) * vocabSize);
+  const nextToken = lastLogits.indexOf(Math.max(...lastLogits));
+
+  generatedTokens.push(nextToken);
+  if (nextToken === eosTokenId) break;
+
+  updateCache(cache, outputs);
+  ids = [nextToken];
+  curLen++;
+}
+
+// Parse thinking and response
+const fullResponse = tokenizer.decode(generatedTokens, { skip_special_tokens: true });
+const thinkMatch = fullResponse.match(/<think>([\s\S]*?)<\/think>/);
+if (thinkMatch) {
+  const thinking = thinkMatch[1].trim();
+  const answer = fullResponse.slice(thinkMatch.index + thinkMatch[0].length).trim();
+  console.log("Thinking:", thinking);
+  console.log("Answer:", answer);
+} else {
+  console.log(fullResponse);
+}
+```
+
+### WebGPU Notes
+
+- Recommended: `model_q4.onnx` for best performance/quality balance
+- For higher quality: `model_fp16.onnx`
+- Models use external data files (`.onnx_data`) that are loaded automatically
+- int64 tensors require `BigInt64Array`
+- Reasoning models may generate longer outputs; adjust max tokens as needed
+
 ## Output Format
 
 The model produces output in two parts: