LFM2.5-VL-3B-WebGPU

Paused

App Files Files Community

shubeydoo commited on 23 days ago

Commit

6c30253

0 Parent(s):

Initial release

Browse files

Files changed (40) hide show

.dockerignore +6 -0
.gitattributes +38 -0
.gitignore +5 -0
Dockerfile +17 -0
README.md +42 -0
eslint.config.js +25 -0
index.html +14 -0
package-lock.json +0 -0
package.json +32 -0
public/LFM2-VL-tech-report.png +3 -0
public/charcuterie.jpg +3 -0
public/liquid-hero-white.png +0 -0
public/liquid-mark.svg +1 -0
public/model-manifest.json +27 -0
public/pad-thai.jpeg +3 -0
server/app.js +25 -0
server/index.js +17 -0
src/document-parsing.js +62 -0
src/engines/conversation-preparation.js +28 -0
src/engines/onnx-transformers-engine.js +346 -0
src/grounding.js +95 -0
src/image-input.js +15 -0
src/main.js +1088 -0
src/model-config.js +8 -0
src/model-precision.js +19 -0
src/runtime/runtime.js +116 -0
src/styles.css +352 -0
src/tools/mcp-client.js +85 -0
src/tools/tool-protocol.js +163 -0
src/tools/tool-registry.js +258 -0
src/webcam-session.js +37 -0
test/conversation-preparation.test.js +54 -0
test/document-parsing.test.js +63 -0
test/grounding.test.js +52 -0
test/image-input.test.js +36 -0
test/mcp-client.test.js +38 -0
test/model-precision.test.js +25 -0
test/tools.test.js +106 -0
test/webcam-session.test.js +33 -0
vite.config.js +13 -0

.dockerignore ADDED Viewed

	@@ -0,0 +1,6 @@

+.git
+.env
+.env.*
+dist
+node_modules
+npm-debug.log*

.gitattributes ADDED Viewed

	@@ -0,0 +1,38 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+public/LFM2-VL-tech-report.png filter=lfs diff=lfs merge=lfs -text
+public/charcuterie.jpg filter=lfs diff=lfs merge=lfs -text
+public/pad-thai.jpeg filter=lfs diff=lfs merge=lfs -text

.gitignore ADDED Viewed

	@@ -0,0 +1,5 @@

+node_modules/
+dist/
+.env
+.env.local
+npm-debug.log*

Dockerfile ADDED Viewed

	@@ -0,0 +1,17 @@

+FROM node:22-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+FROM node:22-alpine
+ENV NODE_ENV=production
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --omit=dev
+COPY --from=builder --chown=node:node /app/dist ./dist
+COPY --chown=node:node server ./server
+USER node
+EXPOSE 7860
+CMD ["node", "server/index.js"]

README.md ADDED Viewed

	@@ -0,0 +1,42 @@

+---
+title: LFM2.5-VL-3B WebGPU
+emoji: 💧
+colorFrom: purple
+colorTo: purple
+sdk: docker
+pinned: false
+models:
+  - LiquidAI/LFM2.5-VL-3B
+  - LiquidAI/LFM2.5-VL-3B-ONNX
+short_description: Run LFM2.5-VL-3B locally in your browser with WebGPU
+---
+# LFM2.5-VL-3B WebGPU
+Run the Q4 ONNX export of LFM2.5-VL-3B directly in a WebGPU-capable browser. Model files are downloaded from Hugging Face and cached locally; prompts, images, and generated responses remain on the user's device unless an explicitly enabled external tool is called.
+## Features
+- Text and multiple-image conversations
+- Paste, drag-and-drop, file upload, and webcam image input
+- Grounding and document-layout overlays
+- Built-in and MCP tool calling
+- Editable system prompts and generation settings
+- Persistent browser model cache
+- Strict WebGPU execution with visible runtime warnings and errors
+## Local development
+```bash
+npm install
+npm run dev
+```
+WebGPU requires HTTPS or localhost.
+For a production-style local run:
+```bash
+npm run build
+npm start
+```

eslint.config.js ADDED Viewed

	@@ -0,0 +1,25 @@

+import globals from 'globals';
+export default [
+  {
+    ignores: ['dist/**', 'node_modules/**'],
+  },
+  {
+    files: ['**/*.js'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: globals.browser,
+    },
+    rules: {
+      'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      'no-undef': 'error',
+    },
+  },
+  {
+    files: ['server/**/*.js', 'test/**/*.js'],
+    languageOptions: {
+      globals: globals.node,
+    },
+  },
+];

index.html ADDED Viewed

	@@ -0,0 +1,14 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#10100f" />
+    <meta name="description" content="On-device vision-language inference with LFM2.5-VL-3B and WebGPU." />
+    <title>LFM2.5-VL-3B · WebGPU</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,32 @@

+{
+  "name": "lfm2-5-vl-3b-webgpu",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "start": "node server/index.js",
+    "build": "vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 7860",
+    "test": "node --test",
+    "check": "eslint . && node --test && vite build"
+  },
+  "dependencies": {
+    "@huggingface/transformers": "4.2.0",
+    "@modelcontextprotocol/sdk": "1.30.0",
+    "dompurify": "^3.4.13",
+    "express": "5.2.1",
+    "lucide": "0.468.0",
+    "marked": "^18.0.9",
+    "onnxruntime-web": "1.26.0-dev.20260416-b7804b056c"
+  },
+  "devDependencies": {
+    "eslint": "9.39.5",
+    "globals": "16.4.0",
+    "vite": "8.2.0"
+  },
+  "overrides": {
+    "adm-zip": "0.6.0",
+    "sharp": "0.35.3"
+  }
+}

public/LFM2-VL-tech-report.png ADDED Viewed

Git LFS Details

SHA256: 29ac81f22109c6643b4d378ff27cef49c2bcb76649f0688d18f560f193f17b5b
Pointer size: 131 Bytes
Size of remote file: 507 kB

public/charcuterie.jpg ADDED Viewed

Git LFS Details

SHA256: 597703edba9a3871abf424fd68e2c47dd47bc75096f49f719cb63267ade49a0b
Pointer size: 132 Bytes
Size of remote file: 1.96 MB

public/liquid-hero-white.png ADDED Viewed

public/liquid-mark.svg ADDED Viewed

public/model-manifest.json ADDED Viewed

	@@ -0,0 +1,27 @@

+{
+  "schemaVersion": 1,
+  "model": "LiquidAI/LFM2.5-VL-3B-ONNX",
+  "revision": "main",
+  "quantization": "q4",
+  "engine": {
+    "format": "onnx",
+    "adapter": "onnx-transformers"
+  },
+  "runtime": {
+    "device": "webgpu",
+    "dtype": {
+      "decoder_model_merged": "q4",
+      "vision_encoder": "q4",
+      "embed_tokens": "fp32"
+    },
+    "externalDataChunks": {
+      "decoder_model_merged_q4.onnx": 5,
+      "vision_encoder_q4.onnx": 1
+    }
+  },
+  "artifacts": [
+    { "component": "decoder", "bytes": 2604444865 },
+    { "component": "vision_encoder", "bytes": 269391474 },
+    { "component": "token_embeddings", "bytes": 1048576359 }
+  ]
+}

public/pad-thai.jpeg ADDED Viewed

Git LFS Details

SHA256: 60fe4c2f42e64d9760ef29f945605d3d16543287720544d5cc99410022fa7be3
Pointer size: 132 Bytes
Size of remote file: 1.13 MB

server/app.js ADDED Viewed

	@@ -0,0 +1,25 @@

+import express from 'express';
+import { resolve } from 'node:path';
+export function createApp({ distDir = resolve(process.cwd(), 'dist') } = {}) {
+  const app = express();
+  app.disable('x-powered-by');
+  app.use((_request, response, next) => {
+    response.set({
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+      'Cross-Origin-Resource-Policy': 'same-origin',
+    });
+    next();
+  });
+  app.use('/assets', express.static(resolve(distDir, 'assets'), {
+    immutable: true,
+    maxAge: '1y',
+    setHeaders: response => response.setHeader('Cache-Control', 'public, max-age=31536000, immutable'),
+  }));
+  app.use(express.static(distDir, { index: false }));
+  app.use((_request, response) => response.sendFile(resolve(distDir, 'index.html')));
+  return { app };
+}

server/index.js ADDED Viewed

	@@ -0,0 +1,17 @@

+import { createApp } from './app.js';
+const port = Number(process.env.PORT || 7860);
+const { app } = createApp();
+const server = app.listen(port, '0.0.0.0', () => {
+  console.log(`[LFM WebGPU] listening on ${port}`);
+});
+function shutdown() {
+  server.close(() => {
+    process.exitCode = 0;
+  });
+  setTimeout(() => server.closeAllConnections?.(), 5_000).unref?.();
+}
+process.once('SIGINT', shutdown);
+process.once('SIGTERM', shutdown);

src/document-parsing.js ADDED Viewed

	@@ -0,0 +1,62 @@

+const COORDINATE = '(\\d+(?:\\.\\d+)?)';
+const HEADER_PATTERN = new RegExp(`^image_index\\s*=\\s*(\\d+)\\s+([^\\[\\]\\n]+?)\\s+\\[\\s*${COORDINATE}\\s*,\\s*${COORDINATE}\\s*,\\s*${COORDINATE}\\s*,\\s*${COORDINATE}\\s*\\]\\s*$`);
+function normalizeRegion(match, content, imageCount) {
+  if (!content) return null;
+  const [, rawImageIndex, rawLabel, ...rawCoordinates] = match;
+  const imageId = Number(rawImageIndex);
+  const label = rawLabel.trim();
+  let coordinates = rawCoordinates.map(Number);
+  if (imageId < 0 || imageId >= imageCount || !label) return null;
+  if (coordinates.every(value => value >= 0 && value <= 1)) {
+    coordinates = coordinates.map(value => Math.round(value * 1000));
+  } else if (coordinates.some(value => !Number.isInteger(value) || value < 0 || value > 1000)) {
+    return null;
+  }
+  const [xmin, ymin, xmax, ymax] = coordinates;
+  if (xmax <= xmin || ymax <= ymin) return null;
+  return { imageId, label, type: 'box', coordinates, content };
+}
+export function parseDocumentRegions(text, imageCount) {
+  if (!Number.isInteger(imageCount) || imageCount < 1 || typeof text !== 'string' || !text.trim()) return null;
+  const lines = text.trim().replace(/\r\n?/g, '\n').split('\n');
+  const regions = [];
+  let currentMatch = null;
+  let contentLines = [];
+  let sawHeader = false;
+  const finishCurrentRegion = () => {
+    if (!currentMatch) return;
+    const region = normalizeRegion(currentMatch, contentLines.join('\n').trim(), imageCount);
+    if (region) regions.push(region);
+  };
+  for (const line of lines) {
+    const match = HEADER_PATTERN.exec(line);
+    if (match) {
+      if (currentMatch) {
+        finishCurrentRegion();
+      } else if (!sawHeader && contentLines.some(value => value.trim())) {
+        return null;
+      }
+      sawHeader = true;
+      currentMatch = match;
+      contentLines = [];
+    } else if (/^\s*image_index\b/.test(line)) {
+      finishCurrentRegion();
+      sawHeader = true;
+      currentMatch = null;
+      contentLines = [];
+    } else if (currentMatch || !sawHeader) {
+      contentLines.push(line);
+    } else {
+      // Ignore content belonging to an incomplete or malformed region while
+      // retaining complete regions that were already parsed.
+    }
+  }
+  finishCurrentRegion();
+  return regions.length ? regions : null;
+}

src/engines/conversation-preparation.js ADDED Viewed

	@@ -0,0 +1,28 @@

+export function prepareConversation(messages) {
+  const imageUrls = [];
+  const preparedMessages = messages.map(message => {
+    if (!Array.isArray(message.content)) {
+      const prepared = { role: message.role, content: message.content };
+      if (message.tool_calls) prepared.tool_calls = message.tool_calls;
+      return prepared;
+    }
+    const imageCount = message.content.filter(item => item.type === 'image').length;
+    let imageIndex = 0;
+    const content = message.content.flatMap(item => {
+      if (item.type !== 'image') return [{ type: 'text', text: item.value || '' }];
+      imageUrls.push(item.value);
+      imageIndex += 1;
+      if (imageCount < 2) return [{ type: 'image' }];
+      return [
+        { type: 'text', text: `Media-${imageIndex}` },
+        { type: 'image' },
+        { type: 'text', text: '\n' },
+      ];
+    });
+    const prepared = { role: message.role, content };
+    if (message.tool_calls) prepared.tool_calls = message.tool_calls;
+    return prepared;
+  });
+  return { messages: preparedMessages, imageUrls };
+}

src/engines/onnx-transformers-engine.js ADDED Viewed

	@@ -0,0 +1,346 @@

+import {
+  AutoConfig,
+  AutoModelForImageTextToText,
+  AutoProcessor,
+  env,
+  InterruptableStoppingCriteria,
+  RawImage,
+  TextStreamer,
+} from '@huggingface/transformers';
+import { createToolStreamFilter, displayTextFromRaw, parseToolCalls } from '../tools/tool-protocol.js';
+import { prepareConversation } from './conversation-preparation.js';
+const MODEL_CACHE_KEY = 'liquid-lfm-models-v4';
+export async function createEngine({ manifest, telemetry }) {
+  let model = null;
+  let processor = null;
+  let gpuDevice = null;
+  const gpuHealth = {
+    lost: false,
+    lossReason: null,
+    lossMessage: null,
+    lastUncapturedError: null,
+  };
+  const repo = manifest.model;
+  let revision = manifest.revision || 'main';
+  function emit(level, message, detail = '') {
+    telemetry({ level, message, detail });
+  }
+  function configureRuntime() {
+    env.allowLocalModels = false;
+    env.allowRemoteModels = true;
+    env.useBrowserCache = true;
+    env.cacheKey = MODEL_CACHE_KEY;
+    env.backends.onnx.logLevel = 'warning';
+    env.backends.onnx.webgpu.powerPreference = 'high-performance';
+  }
+  async function attachGpuErrorHandlers() {
+    gpuDevice = await env.backends.onnx.webgpu.device;
+    if (!gpuDevice) return;
+    gpuDevice.addEventListener?.('uncapturederror', event => {
+      const error = event.error;
+      const detail = {
+        type: error?.constructor?.name || error?.name || 'GPUError',
+        message: error?.message || String(error || 'Unknown WebGPU error'),
+      };
+      gpuHealth.lastUncapturedError = { ...detail, time: new Date().toISOString() };
+      emit('error', 'WebGPU reported an uncaptured error', detail);
+    });
+    void gpuDevice.lost.then(info => {
+      gpuHealth.lost = true;
+      gpuHealth.lossReason = info?.reason || 'unknown';
+      gpuHealth.lossMessage = info?.message || '';
+      emit('error', 'WebGPU device lost', {
+        reason: gpuHealth.lossReason,
+        message: gpuHealth.lossMessage,
+        recovery: 'Reload the page to create a fresh GPU device. Cached model files will be reused.',
+      });
+    });
+  }
+  function progressHandler(onProgress) {
+    let lastPercent = -1;
+    let lastLoaded = 0;
+    let lastSampleAt = performance.now();
+    let lastObservedLoaded = 0;
+    let smoothedBytesPerSecond = 0;
+    const handler = progress => {
+      if (progress.status !== 'progress_total') return;
+      const percent = Math.max(0, Math.min(100, progress.progress || 0));
+      if (progress.loaded > lastObservedLoaded) {
+        lastObservedLoaded = progress.loaded;
+        handler.lastUpdateAt = performance.now();
+      }
+      if (percent - lastPercent < 0.25 && percent < 100) return;
+      lastPercent = percent;
+      const now = performance.now();
+      const elapsedSeconds = (now - lastSampleAt) / 1000;
+      if (elapsedSeconds >= 0.5 && progress.loaded >= lastLoaded) {
+        const currentRate = (progress.loaded - lastLoaded) / elapsedSeconds;
+        smoothedBytesPerSecond = smoothedBytesPerSecond
+          ? (smoothedBytesPerSecond * 0.7) + (currentRate * 0.3)
+          : currentRate;
+        lastLoaded = progress.loaded;
+        lastSampleAt = now;
+      }
+      const activeFiles = Object.entries(progress.files || {}).filter(([, value]) => value.loaded < value.total);
+      const activeName = [...activeFiles].sort(([, left], [, right]) => (right.total - right.loaded) - (left.total - left.loaded))[0]?.[0];
+      const activeLabel = activeName?.split('/').at(-1);
+      const rate = smoothedBytesPerSecond > 0 ? formatRate(smoothedBytesPerSecond) : '';
+      const remainingSeconds = smoothedBytesPerSecond > 0
+        ? Math.max(0, progress.total - progress.loaded) / smoothedBytesPerSecond
+        : 0;
+      const eta = remainingSeconds > 1 ? formatDuration(remainingSeconds) : '';
+      const transferSummary = [rate, eta ? `${eta} left` : ''].filter(Boolean).join(' · ');
+      const file = activeFiles.length > 1
+        ? `Downloading ${activeLabel} +${activeFiles.length - 1}${transferSummary ? ` · ${transferSummary}` : ''}`
+        : activeLabel || `Preparing ${repo}`;
+      const snapshot = {
+        status: 'loading',
+        progress: percent,
+        file,
+        loaded: progress.loaded,
+        total: progress.total,
+        activeDownloads: activeFiles.length,
+        activeFile: activeName || null,
+        bytesPerSecond: Math.round(smoothedBytesPerSecond),
+      };
+      handler.latest = snapshot;
+      handler.lastUpdateAt = performance.now();
+      onProgress(snapshot);
+    };
+    handler.latest = null;
+    handler.lastUpdateAt = performance.now();
+    return handler;
+  }
+  return {
+    backend: 'ONNX · Transformers.js · strict WebGPU',
+    async load(onProgress) {
+      configureRuntime();
+      await navigator.storage?.persist?.().catch(() => false);
+      if (revision === 'main') {
+        revision = await resolveMainRevision(repo);
+      }
+      const options = {
+        revision,
+        device: 'webgpu',
+        dtype: manifest.runtime.dtype,
+        use_external_data_format: manifest.runtime.externalDataChunks,
+        session_options: {
+          executionProviders: ['webgpu'],
+          logSeverityLevel: 2,
+        },
+      };
+      const trackedProgress = progressHandler(onProgress);
+      options.progress_callback = trackedProgress;
+      const modelConfig = await AutoConfig.from_pretrained(repo, { ...options, progress_callback: null });
+      modelConfig['transformers.js_config'] = {
+        ...(modelConfig['transformers.js_config'] || {}),
+        dtype: manifest.runtime.dtype,
+        device: manifest.runtime.device,
+        use_external_data_format: manifest.runtime.externalDataChunks,
+      };
+      options.config = modelConfig;
+      let stallReported = false;
+      const stallWatchdog = setInterval(() => {
+        const idleSeconds = Math.floor((performance.now() - trackedProgress.lastUpdateAt) / 1000);
+        if (!trackedProgress.latest || trackedProgress.latest.progress >= 100 || idleSeconds < 30) return;
+        onProgress({
+          ...trackedProgress.latest,
+          bytesPerSecond: 0,
+          file: `No transfer progress for ${idleSeconds}s · waiting on a large model shard`,
+        });
+        if (!stallReported && idleSeconds >= 90) {
+          stallReported = true;
+          emit('warn', 'Model download has not advanced for 90 seconds', {
+            progress: Math.round(trackedProgress.latest.progress),
+            activeDownloads: trackedProgress.latest.activeDownloads,
+            activeFile: trackedProgress.latest.activeFile,
+            likelyCause: 'Large browser shard, memory pressure, cache serialization, or interrupted CDN stream',
+          });
+        }
+      }, 5000);
+      try {
+        [processor, model] = await Promise.all([
+          AutoProcessor.from_pretrained(repo, options),
+          AutoModelForImageTextToText.from_pretrained(repo, options),
+        ]);
+      } finally {
+        clearInterval(stallWatchdog);
+      }
+      await attachGpuErrorHandlers();
+      onProgress({ status: 'done', progress: 100, file: 'Model ready' });
+    },
+    async generate(messages, options = {}) {
+      if (!model || !processor) throw new Error('The model is not loaded.');
+      const prepared = prepareConversation(messages);
+      const prompt = processor.apply_chat_template(prepared.messages, {
+        add_generation_prompt: true,
+        tokenize: false,
+        tools: options.tools || [],
+      });
+      const images = await Promise.all(prepared.imageUrls.map(url => RawImage.read(url)));
+      const inputs = images.length
+        ? await processor(images, prompt)
+        : processor.tokenizer(prompt, { add_special_tokens: false });
+      const promptTokens = inputs.input_ids?.dims?.at(-1)
+        ?? inputs.inputs_embeds?.dims?.at(-2)
+        ?? inputs.attention_mask?.dims?.at(-1)
+        ?? null;
+      const stopping = new InterruptableStoppingCriteria();
+      const abort = () => stopping.interrupt();
+      options.signal?.addEventListener('abort', abort, { once: true });
+      let streamedText = '';
+      const streamFilter = createToolStreamFilter(chunk => {
+        streamedText += chunk;
+        options.onToken?.(chunk, null);
+      }, {
+        onToolCallStart: () => options.onToolCallState?.('preparing'),
+        onToolCallEnd: () => options.onToolCallState?.('parsing'),
+      });
+      const streamer = new TextStreamer(processor.tokenizer, {
+        skip_prompt: true,
+        skip_special_tokens: false,
+        callback_function: chunk => streamFilter.push(chunk),
+      });
+      let generated;
+      try {
+        try {
+          generated = await model.generate({
+            ...inputs,
+            max_new_tokens: options.maxNewTokens || 384,
+            do_sample: (options.temperature || 0) > 0,
+            temperature: Math.max(options.temperature || 0, 0.01),
+            top_p: options.topP || 0.9,
+            top_k: Number.isInteger(options.topK) ? options.topK : 50,
+            streamer,
+            stopping_criteria: [stopping],
+          });
+        } catch (error) {
+          const isInvalidBuffer = /Mapping WebGPU buffer failed: Invalid buffer/i.test(error.message);
+          const gpuError = gpuHealth.lastUncapturedError;
+          const isOutOfMemory = gpuError?.type === 'GPUOutOfMemoryError'
+            || /out of memory/i.test(gpuError?.message || '')
+            || /out of memory/i.test(error.message);
+          emit('error', isInvalidBuffer ? 'WebGPU buffer readback failed' : 'WebGPU generation failed', {
+            error: error.message,
+            promptTokens,
+            requestedMaxNewTokens: options.maxNewTokens || 384,
+            deviceLost: gpuHealth.lost,
+            deviceLossReason: gpuHealth.lossReason,
+            deviceLossMessage: gpuHealth.lossMessage,
+            lastUncapturedGpuError: gpuHealth.lastUncapturedError,
+            interpretation: isInvalidBuffer
+              ? 'ORT could not map a GPU result staging buffer. Inspect the preceding GPU error/device-loss event; this is not a context-length error by itself.'
+              : null,
+          });
+          if (isOutOfMemory) {
+            throw new Error("This browser's WebGPU session ran out of available GPU memory. This is a browser/WebGPU memory limit, not the model's context-length limit. Try a shorter conversation, fewer or smaller images, or a lower max-new-tokens setting, then reload the page.", { cause: error });
+          }
+          if (isInvalidBuffer) {
+            throw new Error('The browser could not read a WebGPU model buffer. This often follows browser GPU-memory or resource exhaustion. Reload the page to reset the GPU session; cached model files will be reused.', { cause: error });
+          }
+          throw error;
+        }
+      } finally {
+        streamFilter.finish();
+        options.signal?.removeEventListener('abort', abort);
+      }
+      const sequences = generated?.sequences ?? generated;
+      const promptLength = inputs.input_ids?.dims?.at(-1) || 0;
+      const generatedIds = sequences?.tolist?.()?.[0]?.slice(promptLength) || [];
+      const decodedText = generatedIds.length
+        ? processor.tokenizer.decode(generatedIds, { skip_special_tokens: false }).trim()
+        : '';
+      const rawText = decodedText || streamedText.trim();
+      let toolCalls;
+      try {
+        toolCalls = parseToolCalls(rawText);
+      } catch (error) {
+        error.rawModelOutput = rawText;
+        emit('warn', 'Tool-call parsing failed', {
+          error: error.message,
+          rawOutputCharacters: rawText.length,
+        });
+        throw error;
+      }
+      const finalText = displayTextFromRaw(rawText) || streamedText.trim();
+      if (!finalText) {
+        emit('warn', 'Generation returned no displayable text', {
+          sequenceTokens: generatedIds.length,
+        });
+      }
+      return {
+        text: finalText,
+        toolCalls,
+        rawOutput: rawText,
+        finishReason: toolCalls.length ? 'tool_calls' : options.signal?.aborted ? 'stopped' : 'stop',
+      };
+    },
+    async clearCache() {
+      if (!globalThis.caches) return { cleared: false, entriesDeleted: 0 };
+      const cacheName = env.cacheKey || MODEL_CACHE_KEY;
+      const cache = await caches.open(cacheName);
+      const entriesDeleted = (await cache.keys()).length;
+      const cleared = await caches.delete(cacheName);
+      if (!cleared) emit('warn', 'Browser model cache was already empty', { cacheName, entriesDeleted });
+      return { cleared, entriesDeleted };
+    },
+    async cacheInfo() {
+      if (!globalThis.caches) return { used: 0, available: 0 };
+      const cache = await caches.open(env.cacheKey || MODEL_CACHE_KEY);
+      const keys = await cache.keys();
+      let used = 0;
+      for (const key of keys) {
+        const response = await cache.match(key);
+        used += Number(response?.headers.get('content-length') || 0);
+      }
+      const estimate = await navigator.storage?.estimate?.();
+      return { used, available: estimate?.quota || 0 };
+    },
+    clearConversationCache() {},
+    async dispose() {
+      await model?.dispose?.();
+      model = null;
+      processor = null;
+    },
+  };
+}
+async function resolveMainRevision(repo) {
+  const response = await env.fetch(`https://huggingface.co/api/models/${repo}`);
+  if (!response.ok) throw new Error(`Could not resolve the model main branch (${response.status}).`);
+  const info = await response.json();
+  if (!/^[0-9a-f]{40}$/i.test(info.sha || '')) throw new Error('Hugging Face returned an invalid model revision.');
+  return info.sha;
+}
+function formatRate(bytesPerSecond) {
+  return `${(bytesPerSecond / 1024 / 1024).toFixed(1)} MB/s`;
+}
+function formatDuration(seconds) {
+  if (seconds < 60) return `${Math.ceil(seconds)}s`;
+  const minutes = Math.ceil(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ${minutes % 60}m`;
+}

src/grounding.js ADDED Viewed

	@@ -0,0 +1,95 @@

+const ALLOWED_KEYS = new Set(['image_id', 'label', 'bbox_2d', 'point_2d']);
+function normalizeCoordinateArray(value, length) {
+  if (!Array.isArray(value) || value.length !== length ||
+    !value.every(coordinate => typeof coordinate === 'number' && Number.isFinite(coordinate))) return null;
+  if (value.every(coordinate => coordinate >= 0 && coordinate <= 1)) {
+    return value.map(coordinate => Math.round(coordinate * 1000));
+  }
+  if (value.every(coordinate => Number.isInteger(coordinate) && coordinate >= 0 && coordinate <= 1000)) {
+    return value.slice();
+  }
+  return null;
+}
+function parseBareBoxes(text) {
+  const number = '(-?(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:[eE][+-]?\\d+)?)';
+  const pattern = new RegExp(`\\[\\s*${number}\\s*,\\s*${number}\\s*,\\s*${number}\\s*,\\s*${number}\\s*\\]`, 'g');
+  const boxes = [];
+  for (const match of text.matchAll(pattern)) {
+    const coordinates = normalizeCoordinateArray(match.slice(1, 5).map(Number), 4);
+    if (!coordinates) continue;
+    const [xmin, ymin, xmax, ymax] = coordinates;
+    if (xmax <= xmin || ymax <= ymin) continue;
+    boxes.push({
+      imageId: 0,
+      label: boxes.length ? `Bounding box ${boxes.length + 1}` : 'Bounding box',
+      type: 'box',
+      coordinates,
+    });
+  }
+  return boxes;
+}
+export function parseGroundingResponse(text, imageCount) {
+  if (!Number.isInteger(imageCount) || imageCount < 1 || typeof text !== 'string') return null;
+  let parsed;
+  try {
+    parsed = JSON.parse(text.trim());
+  } catch {
+    const boxes = parseBareBoxes(text);
+    return boxes.length ? boxes : null;
+  }
+  if (!Array.isArray(parsed)) {
+    const boxes = parseBareBoxes(text);
+    return boxes.length ? boxes : null;
+  }
+  const structuredCandidate = parsed.length === 0 || parsed.every(item => item && typeof item === 'object' && !Array.isArray(item));
+  if (!structuredCandidate) {
+    const boxes = parseBareBoxes(text);
+    return boxes.length ? boxes : null;
+  }
+  const normalized = [];
+  let structured = true;
+  for (const item of parsed) {
+    if (!item || typeof item !== 'object' || Array.isArray(item) ||
+      Object.keys(item).some(key => !ALLOWED_KEYS.has(key)) ||
+      !Number.isInteger(item.image_id) || item.image_id < 0 || item.image_id >= imageCount ||
+      typeof item.label !== 'string' || !item.label.trim()) {
+      structured = false;
+      break;
+    }
+    const hasBox = Object.hasOwn(item, 'bbox_2d');
+    const hasPoint = Object.hasOwn(item, 'point_2d');
+    if (hasBox === hasPoint) {
+      structured = false;
+      break;
+    }
+    if (hasBox) {
+      const coordinates = normalizeCoordinateArray(item.bbox_2d, 4);
+      if (!coordinates) {
+        structured = false;
+        break;
+      }
+      const [xmin, ymin, xmax, ymax] = coordinates;
+      if (xmax <= xmin || ymax <= ymin) {
+        structured = false;
+        break;
+      }
+      normalized.push({ imageId: item.image_id, label: item.label.trim(), type: 'box', coordinates });
+    } else {
+      const coordinates = normalizeCoordinateArray(item.point_2d, 2);
+      if (!coordinates) {
+        structured = false;
+        break;
+      }
+      normalized.push({ imageId: item.image_id, label: item.label.trim(), type: 'point', coordinates });
+    }
+  }
+  if (structured) return normalized;
+  return null;
+}

src/image-input.js ADDED Viewed

	@@ -0,0 +1,15 @@

+export function imageFilesFromClipboard(clipboardData) {
+  const items = [...(clipboardData?.items || [])];
+  if (items.length) {
+    return items.flatMap(item => {
+      if (item.kind !== 'file' || !item.type?.startsWith('image/')) return [];
+      const file = item.getAsFile?.();
+      return file ? [file] : [];
+    });
+  }
+  return [...(clipboardData?.files || [])].filter(file => file.type?.startsWith('image/'));
+}
+export function imageFilesFromDataTransfer(dataTransfer) {
+  return [...(dataTransfer?.files || [])].filter(file => file.type?.startsWith('image/'));
+}

src/main.js ADDED Viewed

	@@ -0,0 +1,1088 @@

+import {
+  createIcons,
+  Camera,
+  ChevronDown,
+  Database,
+  Edit3,
+  FileScan,
+  FileText,
+  Image,
+  Info,
+  Menu,
+  MessageSquarePlus,
+  Paperclip,
+  Send,
+  Settings2,
+  Scan,
+  ScanSearch,
+  Trash2,
+  Wrench,
+  X,
+  Zap,
+} from 'lucide';
+import DOMPurify from 'dompurify';
+import { marked } from 'marked';
+import { runtime } from './runtime/runtime.js';
+import { MODEL, MODEL_REPO } from './model-config.js';
+import { parseGroundingResponse } from './grounding.js';
+import { parseDocumentRegions } from './document-parsing.js';
+import { imageFilesFromClipboard, imageFilesFromDataTransfer } from './image-input.js';
+import { WebcamSession } from './webcam-session.js';
+import { executeBuiltin, loadTools, modelToolDefinitions, prepareToolCall, saveTools } from './tools/tool-registry.js';
+import { callMcpTool, connectMcpServer, disconnectMcpServer } from './tools/mcp-client.js';
+import './styles.css';
+const iconSet = { Camera, ChevronDown, Database, Edit3, FileScan, FileText, Image, Info, Menu, MessageSquarePlus, Paperclip, Scan, ScanSearch, Send, Settings2, Trash2, Wrench, X, Zap };
+const app = document.querySelector('#app');
+let scrollToBottomAfterRender = false;
+let conversationScrollAfterRender = null;
+let lightboxItems = [];
+const SYSTEM_PROMPT_KEY = 'liquid-lfm-system-prompt-v1';
+const MCP_SETTINGS_KEY = 'liquid-lfm-mcp-v1';
+const TOOL_USE_POLICY = [
+  'You are an AI assistant with access to a set of tools.',
+  "Tool use is optional. Only call a tool when the user's request requires information or an action that an available tool can provide. Otherwise, answer directly.",
+  'If a tool is needed, respond with a tool call using the following format:',
+  '<|tool_call_start|>[tool_function_call_1, tool_function_call_2, ...]<|tool_call_end|>.',
+  'Each tool function call should use Python-like syntax, e.g., calculate(expression="2 + 2").',
+  'When a successful tool result includes source_url, include it as a Markdown link in the final answer.',
+  'If a tool returns an error, explain the error to the user.',
+  'Be concise and helpful.',
+].join(' ');
+const CHARCUTERIE_SYSTEM_PROMPT = `When asked for bounding boxes for objects, return a valid JSON array.
+Each array item must be an object with:
+- image_id: the 0-based index of the image
+- bbox_2d: [xmin, ymin, xmax, ymax] normalized integer coordinates in [0, 1000]
+- label: a concise label you choose for the predicted object or region
+Return one item per visible matching object or region. Return [] if none are visible.`;
+const POINT_GROUNDING_SYSTEM_PROMPT = `When asked for points corresponding to objects or regions, return a valid JSON array.
+Each array item must be an object with:
+- image_id: the 0-based index of the image
+- point_2d: [x, y] normalized integer coordinates in [0, 1000]
+- label: a concise label you choose for the predicted object or region
+Return one item per visible matching object or region. Return [] if none are visible.`;
+const CHARCUTERIE_USER_PROMPT = 'Provide bounding boxes for the grapes on the far side of the table as well as the nearest glass';
+const PAD_THAI_USER_PROMPT = 'How do I make this dish?';
+const DOCUMENT_PARSING_PROMPT = `If asked to parse a document, parse it into its layout regions using the following format. The pages are provided as images in reading order. For every region, in reading order across all pages, output a header line immediately followed by the region's content:
+image_index=<n> <label> [xmin, ymin, xmax, ymax]
+<content>
+where:
+- image_index is the zero-based index of the page image the region appears on (0 for the first image, 1 for the second, and so on)
+- <label> is one of these layout labels: text, title, list, table, table_caption, table_footnote, image, image_block, image_caption, image_footnote, chart, equation, formula_number, code, code_caption, algorithm, aside_text, ref_text, phonetic, page_header, page_footer, page_number, page_footnote
+- [xmin, ymin, xmax, ymax] are normalized integer coordinates in [0, 1000]
+- <content> is the region's content: plain text for text regions, LaTeX for equations, OTSL for tables, and a short description for images and charts
+Separate each region block with one blank line. Return only the parsed regions.`;
+const SYSTEM_PROMPT_PRESETS = {
+  boxes: CHARCUTERIE_SYSTEM_PROMPT,
+  points: POINT_GROUNDING_SYSTEM_PROMPT,
+  document: DOCUMENT_PARSING_PROMPT,
+};
+function loadPersistedSystemPrompt() {
+  try {
+    return localStorage.getItem(SYSTEM_PROMPT_KEY) || '';
+  } catch {
+    return '';
+  }
+}
+const initialSystemPrompt = loadPersistedSystemPrompt();
+const initialMcpSettings = (() => {
+  try { return JSON.parse(localStorage.getItem(MCP_SETTINGS_KEY) || '{}'); } catch { return {}; }
+})();
+const state = {
+  messages: [],
+  attachments: [],
+  promptDraft: '',
+  loading: false,
+  generating: false,
+  settingsOpen: false,
+  cacheOpen: false,
+  toolsOpen: false,
+  systemPromptOpen: false,
+  systemPrompt: initialSystemPrompt,
+  exampleSystemPromptActive: false,
+  lightbox: null,
+  tools: loadTools(),
+  mcp: {
+    url: initialMcpSettings.url || 'https://gitmcp.io/huggingface/transformers.js',
+    enabled: new Set(Array.isArray(initialMcpSettings.enabled) ? initialMcpSettings.enabled : []),
+    status: 'disconnected',
+    error: '',
+  },
+  sidebarOpen: false,
+  webcamOpen: false,
+  progress: { progress: 0, file: 'Waiting to load' },
+  cache: null,
+  adapter: null,
+  error: '',
+  generation: { maxNewTokens: 1024, temperature: 0.2, topP: 0.9, topK: 50 },
+  abortController: null,
+};
+let exampleConfigSnapshot = null;
+function restoreExampleConfig({ clear = true } = {}) {
+  if (!exampleConfigSnapshot) return;
+  state.systemPrompt = exampleConfigSnapshot.systemPrompt;
+  state.tools.forEach(tool => {
+    if (exampleConfigSnapshot.toolEnabled.has(tool.id)) {
+      tool.enabled = exampleConfigSnapshot.toolEnabled.get(tool.id);
+    }
+  });
+  state.exampleSystemPromptActive = false;
+  if (clear) exampleConfigSnapshot = null;
+}
+function beginExampleConfig() {
+  if (!exampleConfigSnapshot) {
+    exampleConfigSnapshot = {
+      systemPrompt: state.systemPrompt,
+      toolEnabled: new Map(state.tools.map(tool => [tool.id, tool.enabled])),
+    };
+  } else {
+    restoreExampleConfig({ clear: false });
+  }
+  state.exampleSystemPromptActive = true;
+}
+function persistTools() {
+  const tools = exampleConfigSnapshot
+    ? state.tools.map(tool => ({
+        ...tool,
+        enabled: exampleConfigSnapshot.toolEnabled.has(tool.id)
+          ? exampleConfigSnapshot.toolEnabled.get(tool.id)
+          : tool.enabled,
+      }))
+    : state.tools;
+  saveTools(tools);
+}
+function icon(name, label = '') {
+  const lucideName = name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+  return `<i data-lucide="${lucideName}"${label ? ` aria-label="${label}"` : ''}></i>`;
+}
+function refreshIcons() {
+  createIcons({ icons: iconSet, attrs: { 'stroke-width': 1.8 } });
+}
+function formatBytes(bytes) {
+  if (!bytes) return '0 MB';
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
+}
+function captureConversationScroll(conversation) {
+  if (!conversation) return null;
+  return { top: conversation.scrollTop };
+}
+function applyConversationScroll(conversation, snapshot, followBottom) {
+  if (!conversation) return;
+  const maximum = Math.max(0, conversation.scrollHeight - conversation.clientHeight);
+  if (followBottom) conversation.scrollTop = maximum;
+  else if (snapshot) conversation.scrollTop = snapshot.top;
+}
+function render() {
+  const previousConversationScroll = captureConversationScroll(document.querySelector('#conversation'));
+  const previousToolsScroll = document.querySelector('.tools-drawer')?.scrollTop;
+  const requestedConversationScroll = conversationScrollAfterRender || previousConversationScroll;
+  const followConversationBottom = scrollToBottomAfterRender;
+  conversationScrollAfterRender = null;
+  scrollToBottomAfterRender = false;
+  lightboxItems = [];
+  app.innerHTML = `
+    <div class="shell">
+      <aside class="sidebar ${state.sidebarOpen ? 'open' : ''}">
+        <div class="brand-row">
+          <a class="brand-link" href="https://huggingface.co/LiquidAI" target="_blank" rel="noreferrer" aria-label="Liquid AI on Hugging Face">
+            <img src="/liquid-hero-white.png" alt="Liquid" class="brand-logo" />
+          </a>
+          <button class="icon-button sidebar-close" data-action="close-sidebar" aria-label="Close menu">${icon('X')}</button>
+        </div>
+        ${isRuntimeActive() ? `<button class="new-chat" data-action="new-chat">${icon('MessageSquarePlus')}<span>New conversation</span></button>` : '<div class="sidebar-spacer"></div>'}
+        <div class="side-section model-card">
+          <a class="model-name" href="https://huggingface.co/${MODEL_REPO}" target="_blank" rel="noreferrer"><span class="model-identity"><span class="model-orb"></span><span>${MODEL.sidebarLabel}</span></span><span aria-hidden="true">↗</span></a>
+        </div>
+        <div class="side-section examples-side">
+          <div class="section-label">TRY AN EXAMPLE</div>
+          <button class="example-row" data-action="example-charcuterie"><img src="/charcuterie.jpg" alt="Charcuterie table" /><span><small>Grounding</small>${escapeHtml(CHARCUTERIE_USER_PROMPT)}</span></button>
+          <button class="example-row" data-action="example-document"><img src="/LFM2-VL-tech-report.png" alt="LFM2-VL technical report page" /><span><small>Document parsing</small>Parse the LFM2-VL technical report into layout regions</span></button>
+          <button class="example-row" data-action="example-pad-thai"><img src="/pad-thai.jpeg" alt="Pad Thai" /><span><small>Tool calling</small>${escapeHtml(PAD_THAI_USER_PROMPT)}</span></button>
+        </div>
+        <div class="sidebar-bottom">
+          <button class="side-link" data-action="cache">${icon('Database')} ${state.cache ? `${formatBytes(state.cache.used)} cached` : 'Browser model cache'}</button>
+          <a class="side-link" href="https://www.liquid.ai" target="_blank" rel="noreferrer">${icon('Info')} About Liquid AI</a>
+        </div>
+      </aside>
+      <main class="main">
+        <header class="topbar">
+          <button class="icon-button menu-button" data-action="open-sidebar" aria-label="Open menu">${icon('Menu')}</button>
+          <div class="mobile-brand"><img src="/liquid-mark.svg" alt="" /> LFM2.5-VL-3B</div>
+          <div class="topbar-status"><span class="privacy-dot"></span> Runs locally</div>
+          <div class="runtime-status"><span class="status-dot ${isRuntimeActive() ? 'online' : ''}"></span>${isRuntimeActive() ? 'WebGPU active' : 'WebGPU'}</div>
+        </header>
+        <section class="conversation" id="conversation">
+        ${state.messages.length ? renderMessages() : renderWelcome()}
+        </section>
+        ${isRuntimeActive() ? `<section class="composer-zone">
+          ${state.error ? `<div class="error-banner"><span>${escapeHtml(state.error)}</span><button data-action="dismiss-error">${icon('X')}</button></div>` : ''}
+          ${state.attachments.length ? `<div class="attachment-strip">${state.attachments.map((item, index) => `
+            <div class="attachment">${renderEnlargeableImage(item)}<button class="attachment-remove" data-remove="${index}" aria-label="Remove image">${icon('X')}</button></div>
+          `).join('')}</div>` : ''}
+          <div class="composer ${state.generating ? 'busy' : ''}">
+            ${renderSystemPromptEditor()}
+            <textarea id="prompt" rows="1" maxlength="8000" placeholder="Ask about an image, a document, or anything else…" ${state.generating ? 'disabled' : ''}>${escapeHtml(state.promptDraft)}</textarea>
+            <div class="composer-actions">
+              <div class="composer-tools">
+                <label class="icon-button" aria-label="Attach images" title="Attach images">${icon('Paperclip')}<input id="image-input" type="file" accept="image/*" multiple hidden /></label>
+                <button class="icon-button" data-action="webcam" aria-label="Use webcam" title="Use webcam">${icon('Camera')}</button>
+                <button class="icon-button ${state.settingsOpen ? 'active' : ''}" data-action="settings" aria-label="Generation settings" title="Generation settings">${icon('Settings2')}</button>
+              </div>
+              <span class="composer-hint">Enter to send · Shift + Enter for newline</span>
+              <button class="send-button ${state.generating ? 'stop-button' : ''}" data-action="${state.generating ? 'stop' : 'send'}" aria-label="${state.generating ? 'Stop generation' : 'Send message'}" title="${state.generating ? 'Stop generation' : 'Send message'}">
+                ${state.generating ? '<span class="stop-symbol" aria-hidden="true"></span>' : icon('Send')}
+              </button>
+            </div>
+            ${state.settingsOpen ? renderSettings() : ''}
+          </div>
+        </section>` : ''}
+      </main>
+    </div>
+    ${state.cacheOpen ? renderCacheManager() : ''}
+    ${state.toolsOpen ? renderToolsDrawer() : ''}
+    ${state.webcamOpen ? renderWebcam() : ''}
+    ${state.lightbox ? renderLightbox() : ''}
+    ${!isRuntimeActive() ? renderModelLoader() : ''}
+  `;
+  bindEvents();
+  refreshIcons();
+  const toolsDrawer = document.querySelector('.tools-drawer');
+  if (toolsDrawer && previousToolsScroll !== undefined) toolsDrawer.scrollTop = previousToolsScroll;
+  const conversation = document.querySelector('#conversation');
+  const restoreScroll = () => {
+    if (conversation?.isConnected) applyConversationScroll(conversation, requestedConversationScroll, followConversationBottom);
+  };
+  restoreScroll();
+  requestAnimationFrame(() => {
+    restoreScroll();
+  });
+  const pendingImages = conversation ? [...conversation.querySelectorAll('img')].filter(image => !image.complete) : [];
+  if (pendingImages.length) {
+    void Promise.all(pendingImages.map(image => new Promise(resolve => {
+      if (image.complete) { resolve(); return; }
+      image.addEventListener('load', resolve, { once: true });
+      image.addEventListener('error', resolve, { once: true });
+    }))).then(() => requestAnimationFrame(restoreScroll));
+  }
+}
+function preserveConversationScroll() {
+  const conversation = document.querySelector('#conversation');
+  if (conversation) conversationScrollAfterRender = captureConversationScroll(conversation);
+  scrollToBottomAfterRender = false;
+}
+function renderWelcome() {
+  return `
+    <div class="welcome">
+      <h1><img class="hero-mark" src="/liquid-mark.svg" alt="" /><span>LFM2.5 <em>VL</em> 3B</span></h1>
+      <p class="hero-copy">A Better <em>and</em> Faster Vision-Language Model for the Edge</p>
+      <div class="example-grid">
+        <button class="example-card" data-action="example-charcuterie"><img src="/charcuterie.jpg" alt="Charcuterie table" /><span><small>Grounding</small>${escapeHtml(CHARCUTERIE_USER_PROMPT)}${icon('ScanSearch')}</span></button>
+        <button class="example-card" data-action="example-document"><img src="/LFM2-VL-tech-report.png" alt="LFM2-VL technical report page" /><span><small>Document parsing</small>Parse the LFM2-VL technical report into layout regions${icon('FileScan')}</span></button>
+        <button class="example-card" data-action="example-pad-thai"><img src="/pad-thai.jpeg" alt="Pad Thai" /><span><small>Tool calling</small>${escapeHtml(PAD_THAI_USER_PROMPT)}${icon('Wrench')}</span></button>
+      </div>
+    </div>`;
+}
+function renderMessages() {
+  return `<div class="messages">${state.messages.map((message, index) => message.role === 'tool'
+    ? renderToolResultMessage(message)
+    : `
+    <article class="message ${message.role}">
+      <div class="message-label">${message.role === 'user' ? 'You' : `<img src="/liquid-mark.svg" alt=""/> Liquid`}</div>
+      <div class="message-content">
+        ${message.images?.length ? `<div class="message-images">${message.images.map(image => renderEnlargeableImage(image)).join('')}</div>` : ''}
+        <div class="message-text ${message.role === 'assistant' ? 'markdown-body' : 'plain-text'}">${message.text ? message.role === 'assistant' ? renderMarkdown(message.text) : escapeHtml(message.text) : message.streaming && !message.toolCalls?.length ? '<span class="response-spinner" role="status" aria-label="Generating response"></span>' : ''}</div>
+        ${message.groundings?.length ? renderGroundings(message, index) : ''}
+        ${message.documentRegions?.length ? renderDocumentRegions(message, index) : ''}
+        ${message.toolCalls?.length ? `<div class="tool-call-list">${message.toolCalls.map(call => renderToolCall(call)).join('')}</div>` : ''}
+        ${message.role === 'user' && !state.generating ? `<button class="edit-message" data-edit="${index}">${icon('Edit3')} Edit</button>` : ''}
+      </div>
+    </article>
+  `).join('')}</div>`;
+}
+function renderEnlargeableImage(image, overlays = [], className = '') {
+  const lightboxIndex = lightboxItems.push({ image, overlays }) - 1;
+  return `<button class="image-enlarge ${className}" data-lightbox="${lightboxIndex}" aria-label="Enlarge ${escapeHtml(image.name || 'image')}">
+    <span class="overlay-image"><img src="${image.url}" alt="${escapeHtml(image.name || 'Attached image')}" />${renderOverlayLayer(overlays)}</span>
+  </button>`;
+}
+function renderOverlayLayer(overlays) {
+  if (!overlays.length) return '';
+  let pointIndex = 0;
+  return `<span class="grounding-overlay">${overlays.map(item => {
+    const label = `<span class="grounding-label">${escapeHtml(item.label)}</span>`;
+    if (item.type === 'box') {
+      const [xmin, ymin, xmax, ymax] = item.coordinates;
+      return `<span class="grounding-box" style="left:${xmin / 10}%;top:${ymin / 10}%;width:${(xmax - xmin) / 10}%;height:${(ymax - ymin) / 10}%">${label}</span>`;
+    }
+    pointIndex += 1;
+    const [x, y] = item.coordinates;
+    return `<span class="grounding-point" style="left:${x / 10}%;top:${y / 10}%"><i></i>${label}<b>${pointIndex}</b></span>`;
+  }).join('')}</span>`;
+}
+function renderGroundings(message, messageIndex) {
+  const grouped = new Map();
+  for (const item of message.groundings) grouped.set(item.imageId, [...(grouped.get(item.imageId) || []), item]);
+  const regionCount = message.groundings.length;
+  return `<details class="grounding-results" data-rendering-message="${messageIndex}" ${message.renderingCollapsed ? '' : 'open'}>
+    <summary class="grounding-heading"><span>${icon('Scan')} Grounding overlay</span><small>${grouped.size} ${grouped.size === 1 ? 'image' : 'images'} · ${regionCount} ${regionCount === 1 ? 'region' : 'regions'}</small><i aria-hidden="true">›</i></summary>
+    <div class="grounding-grid">${[...grouped].map(([imageId, overlays]) => {
+    const image = message.groundingImages?.[imageId];
+    return image ? `<figure>${renderEnlargeableImage(image, overlays, 'grounding-image')}<figcaption>Image ${imageId + 1} · ${overlays.length} ${overlays.length === 1 ? 'region' : 'regions'}</figcaption></figure>` : '';
+  }).join('')}</div></details>`;
+}
+function renderDocumentRegions(message, messageIndex) {
+  const grouped = new Map();
+  for (const region of message.documentRegions) grouped.set(region.imageId, [...(grouped.get(region.imageId) || []), region]);
+  const regionCount = message.documentRegions.length;
+  return `<details class="grounding-results document-results" data-rendering-message="${messageIndex}" ${message.renderingCollapsed ? '' : 'open'}>
+    <summary class="grounding-heading"><span>${icon('FileText')} Document layout</span><small>${grouped.size} ${grouped.size === 1 ? 'page' : 'pages'} · ${regionCount} ${regionCount === 1 ? 'region' : 'regions'}</small><i aria-hidden="true">›</i></summary>
+    <div class="grounding-grid">${[...grouped].map(([imageId, regions]) => {
+    const image = message.groundingImages?.[imageId];
+    if (!image) return '';
+    const numberedRegions = regions.map((region, index) => ({ ...region, label: `${index + 1} · ${region.label}` }));
+    return `<figure>${renderEnlargeableImage(image, numberedRegions, 'grounding-image')}<figcaption>Page ${imageId + 1} · ${regions.length} ${regions.length === 1 ? 'region' : 'regions'}</figcaption>
+      <div class="document-region-list">${regions.map((region, index) => `<div><span>${index + 1}</span><strong>${escapeHtml(region.label)}</strong><p>${escapeHtml(region.content)}</p></div>`).join('')}</div>
+    </figure>`;
+  }).join('')}</div></details>`;
+}
+function renderLightbox() {
+  return `<div class="modal-scrim lightbox-scrim" data-action="close-lightbox"><div class="lightbox" onclick="event.stopPropagation()">
+    <button class="lightbox-close" data-action="close-lightbox" aria-label="Close enlarged image">${icon('X')}</button>
+    <span class="overlay-image"><img src="${state.lightbox.image.url}" alt="${escapeHtml(state.lightbox.image.name || 'Enlarged image')}" />${renderOverlayLayer(state.lightbox.overlays)}</span>
+  </div></div>`;
+}
+function renderSystemPromptEditor() {
+  const enabledToolCount = state.tools.filter(tool => tool.enabled).length;
+  const systemPromptActive = Boolean(state.systemPrompt.trim());
+  return `<div class="system-prompt-inline ${state.systemPromptOpen ? 'open' : ''}">
+    <div class="composer-context-row">
+      <button type="button" class="system-prompt-toggle ${systemPromptActive ? 'enabled' : ''}" data-action="system-prompt" aria-expanded="${state.systemPromptOpen}"><span>System Prompt${systemPromptActive ? ' · Active' : ''}</span><span class="system-prompt-chevron" aria-hidden="true">▾</span></button>
+      <button type="button" class="tool-calling-toggle ${enabledToolCount ? 'enabled' : ''}" data-action="tools" aria-expanded="${state.toolsOpen}"><span>Tool Calling · ${enabledToolCount ? `${enabledToolCount} on` : 'Off'}</span><span aria-hidden="true">›</span></button>
+    </div>
+    ${state.systemPromptOpen ? `<div class="system-prompt-form">
+      <div class="system-prompt-presets"><span>Defaults</span><button type="button" data-system-preset="boxes" class="${state.systemPrompt === SYSTEM_PROMPT_PRESETS.boxes ? 'active' : ''}">Bounding boxes</button><button type="button" data-system-preset="points" class="${state.systemPrompt === SYSTEM_PROMPT_PRESETS.points ? 'active' : ''}">Grounding points</button><button type="button" data-system-preset="document" class="${state.systemPrompt === SYSTEM_PROMPT_PRESETS.document ? 'active' : ''}">Document parsing</button></div>
+      <textarea id="system-prompt-editor" rows="6" maxlength="12000" placeholder="No custom system prompt. The model will use its native chat template.">${escapeHtml(state.systemPrompt)}</textarea>
+      <div class="system-prompt-meta"><span>${state.exampleSystemPromptActive ? 'Example preset · applied automatically for this conversation' : 'Applied automatically · saved in this browser · tools are injected separately'}</span><div class="system-prompt-actions"><button type="button" data-action="clear-system-prompt">Clear</button></div></div>
+    </div>` : ''}
+  </div>`;
+}
+function renderToolCall(call) {
+  return `<div class="tool-call-card ${call.status || 'proposed'}">
+    <div><span class="tool-state"></span><strong>${escapeHtml(call.name)}</strong><small>${escapeHtml(call.statusLabel || call.status || 'requested')}</small></div>
+    ${call.arguments === null ? '' : `<pre>${escapeHtml(JSON.stringify(call.arguments, null, 2))}</pre>`}
+    ${call.status === 'error' && call.rawOutput ? `<details class="tool-raw-output" open><summary>Raw model output</summary><pre>${escapeHtml(call.rawOutput)}</pre></details>` : ''}
+  </div>`;
+}
+function renderToolResultMessage(message) {
+  return `<article class="message tool"><div class="message-label">Tools</div><div class="message-content"><div class="tool-result-list">
+    ${(message.executions || []).map(execution => `<div class="tool-result-card ${execution.status}">
+      <div><strong>${escapeHtml(execution.name)}</strong><span>${escapeHtml(execution.status)} · ${Math.round(execution.durationMs)} ms</span></div>
+      <pre>${escapeHtml(JSON.stringify(execution.status === 'success' ? execution.result : execution.error, null, 2))}</pre>
+    </div>`).join('')}
+  </div></div></article>`;
+}
+function renderSettings() {
+  return `<div class="settings-popover">
+    <div class="popover-title">Generation settings</div>
+    <label><span>Max new tokens <output>${state.generation.maxNewTokens}</output></span><input data-setting="maxNewTokens" type="range" min="128" max="2048" step="128" value="${state.generation.maxNewTokens}" /></label>
+    <label><span>Temperature <output>${state.generation.temperature.toFixed(1)}</output></span><input data-setting="temperature" type="range" min="0" max="1.5" step="0.1" value="${state.generation.temperature}" /></label>
+    <label><span>Top P <output>${state.generation.topP.toFixed(2)}</output></span><input data-setting="topP" type="range" min="0.1" max="1" step="0.05" value="${state.generation.topP}" /></label>
+    <label><span>Top K <output>${state.generation.topK}</output></span><input data-setting="topK" type="range" min="1" max="100" step="1" value="${state.generation.topK}" /></label>
+  </div>`;
+}
+function renderCacheManager() {
+  const cached = state.cache ? formatBytes(state.cache.used) : 'Calculating…';
+  return `<div class="modal-scrim" data-action="cache"><section class="cache-modal" onclick="event.stopPropagation()">
+    <div class="drawer-head"><div><div class="section-label">STORAGE</div><h2>Model cache</h2></div><button class="icon-button" data-action="cache" aria-label="Close model cache">${icon('X')}</button></div>
+    <p>Model files stay in this browser so returning visits do not download them again.</p>
+    <div class="cache-total"><span>Cached model data</span><strong>${cached}</strong></div>
+    <button class="secondary-button cache-clear" data-action="clear-cache" ${state.loading ? 'disabled' : ''}>${icon('Trash2')} ${state.loading ? 'Cache in use' : 'Clear model cache'}</button>
+  </section></div>`;
+}
+function renderToolsDrawer() {
+  const builtins = state.tools.filter(tool => tool.source === 'builtin');
+  const mcpTools = state.tools.filter(tool => tool.source === 'mcp');
+  return `<div class="drawer-scrim" data-action="tools"><aside class="drawer-panel tools-drawer" onclick="event.stopPropagation()">
+    <div class="drawer-head"><div><div class="section-label">MODEL-DIRECTED</div><h2>Tool Calling</h2></div><button class="icon-button" data-action="tools">${icon('X')}</button></div>
+    <p class="drawer-intro">Tools start disabled. Enabled schemas are included in the model prompt. Built-ins and connected MCP tools run automatically.</p>
+    <div class="tool-section-head"><span>Browser tools</span><small>${builtins.filter(tool => tool.enabled).length}/${builtins.length} enabled</small></div>
+    <div class="tool-config-list">${builtins.map(renderToolConfig).join('')}</div>
+    <div class="tool-section-head"><span>MCP server</span><small>${state.mcp.status === 'connected' ? `${mcpTools.length} tools` : state.mcp.status}</small></div>
+    <form id="mcp-server-form" class="mcp-server-form">
+      <input id="mcp-server-url" type="url" required spellcheck="false" aria-label="MCP server URL" value="${escapeHtml(state.mcp.url)}" placeholder="https://example.com/mcp" ${state.mcp.status === 'connecting' ? 'disabled' : ''}/>
+      ${state.mcp.status === 'connected'
+        ? '<button type="button" class="secondary-button" data-action="disconnect-mcp">Disconnect</button>'
+        : `<button type="submit" class="primary-small" ${state.mcp.status === 'connecting' ? 'disabled' : ''}>${state.mcp.status === 'connecting' ? 'Connecting…' : 'Connect'}</button>`}
+    </form>
+    ${state.mcp.error ? `<div class="inline-form-error mcp-error">${escapeHtml(state.mcp.error)}</div>` : ''}
+    ${mcpTools.length ? `<div class="tool-config-list mcp-tools">${mcpTools.map(renderToolConfig).join('')}</div>` : ''}
+    <div class="tool-privacy-note"><b>Explicit external access.</b> MCP tool arguments are sent directly from this browser to the connected server. The server must support browser access (CORS). Images remain local unless included in a tool argument.</div>
+  </aside></div>`;
+}
+function renderToolConfig(tool) {
+  const modelDefinition = { name: tool.name, description: tool.description, parameters: tool.parameters };
+  return `<div class="tool-config-row">
+    <label class="switch"><input type="checkbox" data-tool-toggle="${escapeHtml(tool.id)}" ${tool.enabled ? 'checked' : ''}/><i></i></label>
+    <div><strong>${escapeHtml(tool.name)}</strong><p>${escapeHtml(tool.description)}</p><small>${tool.external ? 'External · TheMealDB' : tool.source === 'builtin' ? 'Automatic browser tool' : 'MCP · automatic'}</small>
+      <details class="tool-definition"><summary>View definition</summary><pre>${escapeHtml(JSON.stringify(modelDefinition, null, 2))}</pre></details>
+    </div>
+  </div>`;
+}
+function renderModelLoader() {
+  return `<div class="loader-screen">
+    <div class="loader-glow"></div>
+    <div class="loader-card">
+      <div class="loader-brand"><img src="/liquid-hero-white.png" alt="Liquid" /></div>
+      <div class="loader-orb" aria-hidden="true"></div>
+      <div class="eyebrow"><span></span> LOCAL VISION-LANGUAGE MODEL</div>
+      <h1>Intelligence that<br /><em>stays with you.</em></h1>
+      <p>Download LFM2.5-VL-3B from Hugging Face, then run it entirely in your browser.</p>
+      ${isFirefoxBasedBrowser() ? `<div class="browser-performance-note">${icon('Info')}<span>This model may run more slowly in Firefox-based browsers. For the best WebGPU performance, use the latest Chrome or Edge.</span></div>` : ''}
+      ${state.error ? `<div class="loader-error">${escapeHtml(state.error)}</div>` : ''}
+      <div class="model-loader">
+        <button class="load-model-button" type="button" data-action="load" ${state.loading ? 'disabled' : ''}>
+          ${state.loading ? `<span class="spinner"></span><span>Loading model</span><b>${Math.round(state.progress.progress || 0)}%</b>` : `${icon('Zap')} Load model`}
+        </button>
+        ${state.loading ? `<div class="loader-progress"><span style="width:${state.progress.progress || 2}%"></span></div><div class="loader-progress-file">${escapeHtml(state.progress.file)}</div>${renderEmbeddingPrecision()}` : '<div class="loader-cache-note">Model files are downloaded once and cached by this browser.</div>'}
+      </div>
+    </div>
+  </div>`;
+}
+function renderEmbeddingPrecision() {
+  if (runtime.embeddingPrecision === 'fp16') return '<div class="loader-precision-note">FP16 embeddings · shader-f16 available</div>';
+  if (runtime.embeddingPrecision === 'fp32') return '<div class="loader-precision-note">FP32 embeddings · shader-f16 unavailable</div>';
+  return '';
+}
+function renderWebcam() {
+  return `<div class="modal-scrim"><div class="webcam-modal"><div class="drawer-head"><div><div class="section-label">CAMERA</div><h2>Capture an image</h2></div><button class="icon-button" data-action="close-webcam">${icon('X')}</button></div><div class="video-frame"><video id="webcam-video" autoplay playsinline muted></video><div class="camera-wait">Waiting for camera…</div></div><button class="capture-button" data-action="capture">${icon('Camera')} Capture frame</button></div></div>`;
+}
+function escapeHtml(value = '') {
+  return String(value).replace(/[&<>'"]/g, character => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' })[character]);
+}
+function renderMarkdown(value = '') {
+  const sanitized = DOMPurify.sanitize(marked.parse(String(value), { gfm: true, breaks: true }), {
+    FORBID_TAGS: ['img'],
+  });
+  const template = document.createElement('template');
+  template.innerHTML = sanitized;
+  for (const link of template.content.querySelectorAll('a')) {
+    link.target = '_blank';
+    link.rel = 'noopener noreferrer';
+  }
+  return template.innerHTML;
+}
+function isRuntimeActive() {
+  return runtime.status === 'ready' || runtime.status === 'generating';
+}
+function bindEvents() {
+  document.querySelectorAll('[data-action]').forEach(element => element.addEventListener('click', handleAction));
+  document.querySelectorAll('[data-lightbox]').forEach(element => element.addEventListener('click', () => {
+    preserveConversationScroll();
+    state.lightbox = lightboxItems[Number(element.dataset.lightbox)] || null;
+    render();
+  }));
+  document.querySelectorAll('[data-remove]').forEach(element => element.addEventListener('click', () => { state.attachments.splice(Number(element.dataset.remove), 1); render(); }));
+  document.querySelectorAll('[data-edit]').forEach(element => element.addEventListener('click', () => editMessage(Number(element.dataset.edit))));
+  document.querySelectorAll('[data-rendering-message]').forEach(element => element.addEventListener('toggle', event => {
+    const message = state.messages[Number(event.currentTarget.dataset.renderingMessage)];
+    if (message) message.renderingCollapsed = !event.currentTarget.open;
+  }));
+  document.querySelector('#image-input')?.addEventListener('change', event => addFiles(event.target.files));
+  document.querySelector('#mcp-server-form')?.addEventListener('submit', connectMcp);
+  document.querySelector('#system-prompt-editor')?.addEventListener('input', updateSystemPrompt);
+  document.querySelectorAll('[data-system-preset]').forEach(button => button.addEventListener('click', applySystemPromptPreset));
+  document.querySelector('#mcp-server-url')?.addEventListener('input', event => { state.mcp.url = event.currentTarget.value; });
+  document.querySelectorAll('[data-tool-toggle]').forEach(input => input.addEventListener('change', toggleTool));
+  document.querySelectorAll('[data-setting]').forEach(input => input.addEventListener('input', updateSetting));
+  const prompt = document.querySelector('#prompt');
+  prompt?.addEventListener('input', event => {
+    state.promptDraft = event.currentTarget.value;
+    resizePrompt(event);
+  });
+  prompt?.addEventListener('keydown', event => {
+    if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {
+      event.preventDefault();
+      sendMessage();
+    }
+  });
+  prompt?.addEventListener('paste', handlePromptPaste);
+  const composer = document.querySelector('.composer');
+  composer?.addEventListener('dragenter', handleComposerDragOver);
+  composer?.addEventListener('dragover', handleComposerDragOver);
+  composer?.addEventListener('dragleave', handleComposerDragLeave);
+  composer?.addEventListener('drop', handleComposerDrop);
+  if (state.webcamOpen) startWebcam();
+}
+async function handleAction(event) {
+  const action = event.currentTarget.dataset.action;
+  if (action === 'load') loadModel();
+  if (action === 'send') sendMessage();
+  if (action === 'stop') {
+    state.abortController?.abort();
+  }
+  if (action === 'new-chat') {
+    state.messages = [];
+    state.attachments = [];
+    state.promptDraft = '';
+    restoreExampleConfig();
+    if (Object.values(SYSTEM_PROMPT_PRESETS).includes(state.systemPrompt)) {
+      state.systemPrompt = '';
+      state.exampleSystemPromptActive = false;
+      localStorage.removeItem(SYSTEM_PROMPT_KEY);
+    }
+    runtime.clearConversationCache();
+    state.sidebarOpen = false;
+    render();
+  }
+  if (action === 'example-charcuterie') applyCharcuterieExample();
+  if (action === 'example-document') applyDocumentExample();
+  if (action === 'example-pad-thai') applyPadThaiExample();
+  if (action === 'settings') { state.settingsOpen = !state.settingsOpen; render(); document.querySelector('#prompt')?.focus(); }
+  if (action === 'tools') { state.toolsOpen = !state.toolsOpen; state.systemPromptOpen = false; state.settingsOpen = false; render(); }
+  if (action === 'system-prompt') {
+    state.systemPromptOpen = !state.systemPromptOpen;
+    state.toolsOpen = false;
+    state.settingsOpen = false;
+    render();
+  }
+  if (action === 'clear-system-prompt') {
+    state.systemPrompt = '';
+    if (exampleConfigSnapshot) exampleConfigSnapshot.systemPrompt = '';
+    localStorage.removeItem(SYSTEM_PROMPT_KEY);
+    state.exampleSystemPromptActive = false;
+    runtime.clearConversationCache();
+    render();
+  }
+  if (action === 'close-lightbox') { preserveConversationScroll(); state.lightbox = null; render(); }
+  if (action === 'disconnect-mcp') await disconnectMcp();
+  if (action === 'cache') { state.cacheOpen = !state.cacheOpen; state.sidebarOpen = false; render(); if (state.cacheOpen) updateCacheInfo(); }
+  if (action === 'clear-cache' && !state.loading) { await runtime.clearCache(); await updateCacheInfo(); render(); }
+  if (action === 'open-sidebar') { state.sidebarOpen = true; render(); }
+  if (action === 'close-sidebar') { state.sidebarOpen = false; render(); }
+  if (action === 'dismiss-error') { state.error = ''; render(); }
+  if (action === 'webcam') { state.webcamOpen = true; render(); }
+  if (action === 'close-webcam') closeWebcam();
+  if (action === 'capture') captureWebcam();
+}
+function applyCharcuterieExample() {
+  beginExampleConfig();
+  state.messages = [];
+  state.attachments = [{ name: 'charcuterie.jpg', url: '/charcuterie.jpg', source: 'example' }];
+  state.promptDraft = CHARCUTERIE_USER_PROMPT;
+  state.systemPrompt = CHARCUTERIE_SYSTEM_PROMPT;
+  state.exampleSystemPromptActive = true;
+  state.sidebarOpen = false;
+  state.settingsOpen = false;
+  runtime.clearConversationCache();
+  render();
+  const prompt = document.querySelector('#prompt');
+  if (prompt) {
+    resizePrompt({ currentTarget: prompt });
+    prompt.focus();
+  }
+}
+function applyDocumentExample() {
+  beginExampleConfig();
+  state.messages = [];
+  state.attachments = [{ name: 'LFM2-VL-tech-report.png', url: '/LFM2-VL-tech-report.png', source: 'example' }];
+  state.promptDraft = 'Parse this document into its layout regions.';
+  state.systemPrompt = DOCUMENT_PARSING_PROMPT;
+  state.exampleSystemPromptActive = true;
+  state.sidebarOpen = false;
+  state.settingsOpen = false;
+  state.systemPromptOpen = false;
+  runtime.clearConversationCache();
+  render();
+  const prompt = document.querySelector('#prompt');
+  if (prompt) {
+    resizePrompt({ currentTarget: prompt });
+    prompt.focus();
+  }
+}
+function applyPadThaiExample() {
+  beginExampleConfig();
+  state.messages = [];
+  state.attachments = [{ name: 'pad-thai.jpeg', url: '/pad-thai.jpeg', source: 'example' }];
+  state.promptDraft = PAD_THAI_USER_PROMPT;
+  state.systemPrompt = '';
+  state.exampleSystemPromptActive = true;
+  state.tools.forEach(tool => { tool.enabled = tool.name === 'search_recipe_by_dish'; });
+  state.sidebarOpen = false;
+  state.settingsOpen = false;
+  state.systemPromptOpen = false;
+  runtime.clearConversationCache();
+  render();
+  const prompt = document.querySelector('#prompt');
+  if (prompt) {
+    resizePrompt({ currentTarget: prompt });
+    prompt.focus();
+  }
+}
+function updateSystemPrompt(event) {
+  state.systemPrompt = event.currentTarget.value;
+  if (exampleConfigSnapshot) exampleConfigSnapshot.systemPrompt = state.systemPrompt;
+  if (state.systemPrompt.trim()) localStorage.setItem(SYSTEM_PROMPT_KEY, state.systemPrompt);
+  else localStorage.removeItem(SYSTEM_PROMPT_KEY);
+  state.exampleSystemPromptActive = false;
+  runtime.clearConversationCache();
+  const toggle = document.querySelector('.system-prompt-toggle');
+  const active = Boolean(state.systemPrompt.trim());
+  toggle?.classList.toggle('enabled', active);
+  const label = toggle?.querySelector('span:first-child');
+  if (label) label.textContent = `System Prompt${active ? ' · Active' : ''}`;
+  document.querySelectorAll('[data-system-preset]').forEach(button => {
+    button.classList.toggle('active', state.systemPrompt === SYSTEM_PROMPT_PRESETS[button.dataset.systemPreset]);
+  });
+}
+function applySystemPromptPreset(event) {
+  const prompt = SYSTEM_PROMPT_PRESETS[event.currentTarget.dataset.systemPreset];
+  if (!prompt) return;
+  const nextPrompt = state.systemPrompt === prompt ? '' : prompt;
+  state.systemPrompt = nextPrompt;
+  if (exampleConfigSnapshot) exampleConfigSnapshot.systemPrompt = nextPrompt;
+  state.exampleSystemPromptActive = false;
+  if (nextPrompt) localStorage.setItem(SYSTEM_PROMPT_KEY, nextPrompt);
+  else localStorage.removeItem(SYSTEM_PROMPT_KEY);
+  runtime.clearConversationCache();
+  render();
+  document.querySelector('#system-prompt-editor')?.focus();
+}
+function toggleTool(event) {
+  const tool = state.tools.find(candidate => candidate.id === event.currentTarget.dataset.toolToggle);
+  if (!tool) return;
+  tool.enabled = event.currentTarget.checked;
+  if (tool.source === 'mcp') {
+    if (tool.enabled) state.mcp.enabled.add(tool.name);
+    else state.mcp.enabled.delete(tool.name);
+    saveMcpSettings();
+  }
+  if (exampleConfigSnapshot) exampleConfigSnapshot.toolEnabled.set(tool.id, tool.enabled);
+  persistTools();
+  render();
+}
+async function connectMcp(event) {
+  event.preventDefault();
+  state.mcp.status = 'connecting';
+  state.mcp.error = '';
+  render();
+  try {
+    const discovered = await connectMcpServer(state.mcp.url);
+    const existing = new Set(state.tools.filter(tool => tool.source !== 'mcp').map(tool => tool.name));
+    const accepted = discovered.filter(tool => !existing.has(tool.name)).map(tool => ({ ...tool, enabled: state.mcp.enabled.has(tool.name) }));
+    const skipped = discovered.length - accepted.length;
+    state.tools = [...state.tools.filter(tool => tool.source !== 'mcp'), ...accepted];
+    state.mcp.status = 'connected';
+    state.mcp.error = skipped ? `${skipped} MCP tool${skipped === 1 ? ' was' : 's were'} skipped because its name conflicts with another tool.` : '';
+    saveMcpSettings();
+  } catch (error) {
+    state.tools = state.tools.filter(tool => tool.source !== 'mcp');
+    state.mcp.status = 'disconnected';
+    state.mcp.error = `Connection failed: ${error.message}`;
+  }
+  render();
+}
+async function disconnectMcp() {
+  await disconnectMcpServer();
+  state.tools = state.tools.filter(tool => tool.source !== 'mcp');
+  state.mcp.status = 'disconnected';
+  state.mcp.error = '';
+  render();
+}
+function saveMcpSettings() {
+  localStorage.setItem(MCP_SETTINGS_KEY, JSON.stringify({ url: state.mcp.url, enabled: [...state.mcp.enabled] }));
+}
+async function loadModel() {
+  state.loading = true; state.error = ''; render();
+  try {
+    await runtime.load();
+    await updateCacheInfo();
+  } catch (error) {
+    state.error = error.message;
+  } finally {
+    state.loading = false; render();
+  }
+}
+async function sendMessage() {
+  const prompt = document.querySelector('#prompt');
+  const text = prompt?.value.trim() || '';
+  if ((!text && !state.attachments.length) || state.generating) return;
+  if (runtime.status !== 'ready') {
+    state.error = 'Load the on-device model before sending a message.'; render(); return;
+  }
+  state.systemPromptOpen = false;
+  const userMessage = { role: 'user', text, images: state.attachments.slice() };
+  state.messages.push(userMessage);
+  state.attachments = [];
+  state.promptDraft = '';
+  state.generating = true;
+  state.error = '';
+  state.abortController = new AbortController();
+  scrollToBottomAfterRender = true;
+  render();
+  try {
+    let toolRounds = 0;
+    while (!state.abortController.signal.aborted) {
+      const assistant = { role: 'assistant', text: '', streaming: true, toolCalls: [] };
+      state.messages.push(assistant);
+      scrollToBottomAfterRender = true;
+      render();
+      const promptMessages = state.messages.slice(0, -1);
+      const groundingImages = conversationImages(promptMessages);
+      // Once the model has converted the image into tool arguments, the result
+      // round only needs the textual call and result. Re-encoding the same image
+      // substantially increases WebGPU prefill memory without adding information.
+      const enabledTools = modelToolDefinitions(state.tools);
+      const result = await runtime.generate(toModelConversation(promptMessages, state.systemPrompt, toolRounds === 0, enabledTools.length > 0), {
+        ...state.generation,
+        tools: enabledTools,
+        signal: state.abortController.signal,
+        onToken: token => streamAssistantToken(assistant, token),
+        onToolCallState: phase => streamToolCallState(assistant, phase),
+      });
+      assistant.text = result.text || assistant.text;
+      assistant.streaming = false;
+      assistant.toolCalls = result.toolCalls.map((call, index) => ({
+        id: globalThis.crypto?.randomUUID?.() || `${Date.now()}-${index}`,
+        name: call.name,
+        arguments: call.arguments,
+        positional: call.positional,
+        rawOutput: result.rawOutput,
+        status: 'proposed',
+        statusLabel: 'requested',
+      }));
+      if (!assistant.toolCalls.length) {
+        const documentRegions = parseDocumentRegions(assistant.text, groundingImages.length);
+        if (documentRegions?.length) {
+          assistant.documentRegions = documentRegions;
+          assistant.groundingImages = groundingImages;
+        } else {
+          const groundings = parseGroundingResponse(assistant.text, groundingImages.length);
+          if (groundings?.length) {
+            assistant.groundings = groundings;
+            assistant.groundingImages = groundingImages;
+          }
+        }
+        if (!assistant.text) assistant.text = result.finishReason === 'stopped' ? 'Generation stopped.' : 'The model returned no displayable text.';
+        break;
+      }
+      if (toolRounds >= 3) {
+        assistant.toolCalls.forEach(call => { call.status = 'error'; call.statusLabel = 'round limit reached'; });
+        assistant.text ||= 'Tool execution stopped because the three-round limit was reached.';
+        state.error = 'Tool execution exceeded the three-round safety limit.';
+        break;
+      }
+      if (assistant.toolCalls.length > 4) {
+        assistant.toolCalls.forEach(call => { call.status = 'error'; call.statusLabel = 'call limit reached'; });
+        assistant.text ||= 'Tool execution stopped because more than four calls were requested in one round.';
+        state.error = 'The model requested more than four tools in one round.';
+        break;
+      }
+      render();
+      const executions = [];
+      for (const call of assistant.toolCalls) {
+        executions.push(await executeToolCall(call, state.abortController.signal));
+      }
+      state.messages.push({ role: 'tool', text: '', executions, modelContent: JSON.stringify(executions.map(execution => ({
+        tool_call_id: execution.id,
+        name: execution.name,
+        status: execution.status,
+        ...(execution.status === 'success' ? { result: execution.result } : { error: execution.error }),
+      }))) });
+      toolRounds += 1;
+      scrollToBottomAfterRender = true;
+      render();
+    }
+  } catch (error) {
+    if (error.name !== 'AbortError') state.error = error.message;
+    const assistant = state.messages.at(-1)?.role === 'assistant' ? state.messages.at(-1) : null;
+    const pendingCall = assistant?.toolCalls?.find(call => call.pending);
+    if (pendingCall) {
+      pendingCall.status = 'error';
+      pendingCall.statusLabel = error.name === 'AbortError' ? 'stopped' : 'request failed';
+      if (error.rawModelOutput) pendingCall.rawOutput = error.rawModelOutput;
+    }
+    if (assistant && !assistant.text && !assistant.toolCalls?.length) assistant.text = error.name === 'AbortError' ? 'Generation stopped.' : 'I could not complete that response.';
+    } finally {
+    const assistant = [...state.messages].reverse().find(message => message.role === 'assistant');
+    if (assistant) assistant.streaming = false;
+    state.generating = false; state.abortController = null;
+    scrollToBottomAfterRender = true;
+    render();
+  }
+}
+function toModelConversation(messages, systemPrompt = '', includeImages = true, hasTools = false) {
+  const conversation = messages.map(message => {
+    if (message.role === 'tool') return { role: 'tool', content: message.modelContent };
+    const content = includeImages && message.images?.length ? [
+      ...message.images.map(image => ({ type: 'image', value: image.url })),
+      { type: 'text', value: message.text },
+    ] : message.text;
+    if (message.role === 'assistant' && message.toolCalls?.length) {
+      return {
+        role: 'assistant',
+        content,
+        tool_calls: message.toolCalls.map(call => ({ type: 'function', id: call.id, function: { name: call.name, arguments: call.arguments } })),
+      };
+    }
+    return { role: message.role, content };
+  });
+  const internalSystemPrompt = [systemPrompt, hasTools ? TOOL_USE_POLICY : ''].filter(Boolean).join('\n\n');
+  return internalSystemPrompt ? [{ role: 'system', content: internalSystemPrompt }, ...conversation] : conversation;
+}
+function conversationImages(messages) {
+  return messages.flatMap(message => message.images || []);
+}
+function streamAssistantToken(assistant, token) {
+  const conversation = document.querySelector('#conversation');
+  const followOutput = isNearBottom(conversation);
+  assistant.text += token;
+  const textNodes = document.querySelectorAll('.message.assistant .message-text');
+  const textNode = textNodes[textNodes.length - 1];
+  if (textNode) textNode.innerHTML = renderMarkdown(assistant.text);
+  if (followOutput) requestAnimationFrame(() => { conversation.scrollTop = conversation.scrollHeight; });
+}
+function streamToolCallState(assistant, phase) {
+  const pending = assistant.toolCalls?.find(call => call.pending);
+  const statusLabel = phase === 'preparing' ? 'preparing request' : 'validating request';
+  if (pending) pending.statusLabel = statusLabel;
+  else assistant.toolCalls = [{
+    id: 'streaming-tool-call',
+    name: 'Tool call',
+    arguments: null,
+    positional: [],
+    pending: true,
+    status: 'running',
+    statusLabel,
+  }];
+  render();
+}
+async function executeToolCall(call, signal) {
+  const startedAt = performance.now();
+  let source = 'unregistered';
+  let outcome;
+  try {
+    const prepared = prepareToolCall(call, state.tools);
+    source = prepared.tool.source;
+    call.arguments = prepared.args;
+    call.status = 'running';
+    call.statusLabel = source === 'mcp' ? 'calling MCP server' : prepared.tool.external ? 'searching TheMealDB' : 'running locally';
+    render();
+    outcome = source === 'builtin'
+      ? { status: 'success', result: await executeBuiltin(prepared.tool.name, prepared.args, signal) }
+      : { status: 'success', result: await callMcpTool(prepared.tool.name, prepared.args, signal) };
+    if (signal.aborted) throw new DOMException('Generation stopped.', 'AbortError');
+  } catch (error) {
+    if (error.name === 'AbortError') throw error;
+    outcome = { status: 'error', error: { code: 'tool_error', message: error.message } };
+  }
+  const durationMs = performance.now() - startedAt;
+  call.status = outcome.status;
+  call.statusLabel = outcome.status === 'success' ? `completed in ${Math.round(durationMs)} ms` : outcome.error.message;
+  const execution = { id: call.id, name: call.name, source, status: outcome.status, durationMs, ...(outcome.status === 'success' ? { result: outcome.result } : { error: outcome.error }) };
+  render();
+  return execution;
+}
+function isNearBottom(element, threshold = 120) {
+  if (!element) return false;
+  return element.scrollHeight - element.scrollTop - element.clientHeight <= threshold;
+}
+function addFiles(fileList) {
+  const candidates = [...fileList].filter(file => file.type?.startsWith('image/'));
+  const files = candidates.slice(0, Math.max(0, 6 - state.attachments.length));
+  state.attachments.push(...files.map((file, index) => ({
+    name: file.name || `Pasted image ${index + 1}`,
+    url: URL.createObjectURL(file),
+    source: 'upload',
+  })));
+  if (files.length < candidates.length) state.error = 'You can attach up to six images per message.';
+  render();
+  return files.length;
+}
+function handlePromptPaste(event) {
+  const files = imageFilesFromClipboard(event.clipboardData);
+  if (!files.length) return;
+  event.preventDefault();
+  const selectionStart = event.currentTarget.selectionStart;
+  const selectionEnd = event.currentTarget.selectionEnd;
+  addFiles(files);
+  requestAnimationFrame(() => {
+    const prompt = document.querySelector('#prompt');
+    if (!prompt) return;
+    prompt.focus();
+    prompt.setSelectionRange(selectionStart, selectionEnd);
+    resizePrompt({ currentTarget: prompt });
+  });
+}
+function handleComposerDragOver(event) {
+  if (![...(event.dataTransfer?.types || [])].includes('Files')) return;
+  event.preventDefault();
+  event.dataTransfer.dropEffect = 'copy';
+  event.currentTarget.classList.add('drag-active');
+}
+function handleComposerDragLeave(event) {
+  if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) return;
+  event.currentTarget.classList.remove('drag-active');
+}
+function handleComposerDrop(event) {
+  event.preventDefault();
+  event.currentTarget.classList.remove('drag-active');
+  const files = imageFilesFromDataTransfer(event.dataTransfer);
+  if (!files.length) return;
+  addFiles(files);
+  requestAnimationFrame(() => document.querySelector('#prompt')?.focus());
+}
+function editMessage(index) {
+  const message = state.messages[index];
+  state.messages = state.messages.slice(0, index);
+  state.attachments = message.images?.slice() || [];
+  state.promptDraft = message.text;
+  render();
+  const prompt = document.querySelector('#prompt');
+  resizePrompt({ currentTarget: prompt });
+  prompt.focus();
+}
+function updateSetting(event) {
+  const input = event.currentTarget;
+  const key = input.dataset.setting;
+  const value = Number(input.value);
+  state.generation[key] = value;
+  const output = input.closest('label')?.querySelector('output');
+  if (output) output.textContent = key === 'temperature' ? value.toFixed(1) : key === 'topP' ? value.toFixed(2) : String(value);
+}
+function isFirefoxBasedBrowser() {
+  return /Firefox\//i.test(navigator.userAgent);
+}
+function resizePrompt(event) {
+  const textarea = event.currentTarget;
+  textarea.style.height = 'auto';
+  textarea.style.height = `${Math.min(textarea.scrollHeight, 180)}px`;
+}
+const webcamSession = new WebcamSession(constraints => navigator.mediaDevices.getUserMedia(constraints));
+async function startWebcam() {
+  try {
+    const stream = await webcamSession.open({ video: { facingMode: 'environment', width: { ideal: 1280 } }, audio: false });
+    if (!stream || !state.webcamOpen) return;
+    const video = document.querySelector('#webcam-video');
+    if (video) { video.srcObject = stream; video.addEventListener('loadeddata', () => document.querySelector('.camera-wait')?.remove(), { once: true }); }
+  } catch (error) {
+    if (!state.webcamOpen) return;
+    state.error = `Camera unavailable: ${error.message}`; closeWebcam();
+  }
+}
+function captureWebcam() {
+  const video = document.querySelector('#webcam-video');
+  if (!video?.videoWidth) return;
+  const max = 1280;
+  const scale = Math.min(1, max / video.videoWidth);
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.round(video.videoWidth * scale); canvas.height = Math.round(video.videoHeight * scale);
+  const context = canvas.getContext('2d');
+  context.translate(canvas.width, 0);
+  context.scale(-1, 1);
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
+  state.attachments.push({ name: `Webcam ${new Date().toLocaleTimeString()}`, url: canvas.toDataURL('image/jpeg', 0.9), source: 'webcam' });
+  closeWebcam();
+}
+function closeWebcam() {
+  webcamSession.close(); state.webcamOpen = false; render();
+}
+async function updateCacheInfo() {
+  state.cache = await runtime.cacheInfo();
+  render();
+}
+runtime.addEventListener('progress', event => { state.progress = event.detail; if (state.loading) render(); });
+runtime.addEventListener('status', () => render());
+document.addEventListener('click', event => {
+  if (!state.settingsOpen) return;
+  if (event.target.closest('.settings-popover, [data-action="settings"]')) return;
+  state.settingsOpen = false;
+  render();
+});
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape' && state.lightbox) {
+    preserveConversationScroll();
+    state.lightbox = null;
+    render();
+  }
+});
+window.addEventListener('beforeunload', () => { void disconnectMcpServer(); });
+render();
+updateCacheInfo();

src/model-config.js ADDED Viewed

	@@ -0,0 +1,8 @@

+export const MODEL = {
+  id: 'lfm2-5-vl-3b',
+  label: 'LFM2.5-VL-3B · Q4',
+  sidebarLabel: 'LFM2.5-VL-3B · ONNX Q4',
+};
+export const MODEL_REPO = import.meta.env.VITE_MODEL_REPO ||
+  'LiquidAI/LFM2.5-VL-3B-ONNX';

src/model-precision.js ADDED Viewed

	@@ -0,0 +1,19 @@

+export function selectEmbeddingPrecision(manifest, adapterFeatures = []) {
+  const features = adapterFeatures instanceof Set ? adapterFeatures : new Set(adapterFeatures);
+  const precision = features.has('shader-f16') ? 'fp16' : 'fp32';
+  const externalDataChunks = { ...manifest.runtime.externalDataChunks };
+  delete externalDataChunks['embed_tokens_fp16.onnx'];
+  if (precision === 'fp16') externalDataChunks['embed_tokens_fp16.onnx'] = 1;
+  return {
+    precision,
+    manifest: {
+      ...manifest,
+      runtime: {
+        ...manifest.runtime,
+        dtype: { ...manifest.runtime.dtype, embed_tokens: precision },
+        externalDataChunks,
+      },
+    },
+  };
+}

src/runtime/runtime.js ADDED Viewed

	@@ -0,0 +1,116 @@

+import { selectEmbeddingPrecision } from '../model-precision.js';
+/**
+ * Format-neutral runtime boundary.
+ *
+ * An ONNX or GGUF implementation must satisfy the same adapter contract. The
+ * product UI intentionally has no dependency on either runtime.
+ */
+class Runtime extends EventTarget {
+  adapter = null;
+  status = 'idle';
+  backend = 'Engine not selected';
+  webgpu = null;
+  embeddingPrecision = null;
+  emit(type, detail) {
+    this.dispatchEvent(new CustomEvent(type, { detail }));
+  }
+  log(level, message, detail = '') {
+    if (level !== 'error' && level !== 'warn') return;
+    console[level](`[LFM edge runtime] ${message}`, detail || '');
+  }
+  async probe() {
+    if (!globalThis.isSecureContext) throw new Error('WebGPU requires HTTPS or localhost.');
+    if (!navigator.gpu) throw new Error('WebGPU is unavailable in this browser.');
+    const adapter = await navigator.gpu.requestAdapter({ powerPreference: 'high-performance' });
+    if (!adapter) throw new Error('The browser did not return a WebGPU adapter.');
+    const info = adapter.info || {};
+    this.webgpu = {
+      adapter,
+      name: info.description || info.device || info.architecture || 'WebGPU adapter',
+      vendor: info.vendor || 'Not exposed',
+      architecture: info.architecture || 'Not exposed',
+      features: [...adapter.features].sort(),
+      limits: adapter.limits,
+    };
+    return this.webgpu;
+  }
+  async load() {
+    if (this.status === 'loading') return;
+    this.status = 'loading';
+    this.emit('status', { status: this.status, backend: this.backend });
+    try {
+      await this.probe();
+      const baseManifest = await fetch('/model-manifest.json', { cache: 'no-store' }).then(response => response.json());
+      const selection = selectEmbeddingPrecision(baseManifest, this.webgpu.features);
+      const manifest = selection.manifest;
+      this.embeddingPrecision = selection.precision;
+      this.emit('status', { status: this.status, backend: this.backend });
+      const loaders = {
+        'onnx-transformers': () => import('../engines/onnx-transformers-engine.js'),
+      };
+      const loadEngine = loaders[manifest.engine?.adapter];
+      if (!loadEngine) throw new Error(`Unknown or unselected inference adapter: ${manifest.engine?.adapter || 'none'}.`);
+      const module = await loadEngine();
+      this.adapter = await module.createEngine({ manifest, telemetry: event => this.log(event.level, event.message, event.detail) });
+      await this.adapter.load(progress => this.emit('progress', progress));
+      this.backend = this.adapter.backend;
+      this.status = 'ready';
+    } catch (error) {
+      this.status = 'error';
+      this.log('error', 'Engine load stopped', error.message);
+      throw error;
+    } finally {
+      this.emit('status', { status: this.status, backend: this.backend });
+    }
+  }
+  /** Returns { text, toolCalls, finishReason } for every inference adapter. */
+  async generate(messages, options) {
+    if (!this.adapter || this.status !== 'ready') throw new Error('No inference engine is configured.');
+    this.status = 'generating';
+    this.emit('status', { status: this.status, backend: this.backend });
+    try {
+      return await this.adapter.generate(messages, options);
+    } finally {
+      this.status = 'ready';
+      this.emit('status', { status: this.status, backend: this.backend });
+    }
+  }
+  async clearCache() {
+    const result = this.adapter?.clearCache ? await this.adapter.clearCache() : { cleared: false, entriesDeleted: 0 };
+    const cleared = typeof result === 'object' ? result.cleared : Boolean(result);
+    return cleared;
+  }
+  async cacheInfo() {
+    if (this.adapter?.cacheInfo) return this.adapter.cacheInfo();
+    if (globalThis.caches) {
+      const cacheNames = await caches.keys();
+      const modelCacheNames = cacheNames.filter(name => name === 'liquid-lfm-models-v4');
+      let used = 0;
+      for (const cacheName of modelCacheNames) {
+        const cache = await caches.open(cacheName);
+        for (const request of await cache.keys()) {
+          const response = await cache.match(request);
+          used += Number(response?.headers.get('content-length') || 0);
+        }
+      }
+      const estimate = await navigator.storage?.estimate?.();
+      return { used, available: estimate?.quota || 0 };
+    }
+    const estimate = await navigator.storage?.estimate?.();
+    return { used: 0, available: estimate?.quota || 0 };
+  }
+  clearConversationCache() {
+    this.adapter?.clearConversationCache?.();
+  }
+}
+export const runtime = new Runtime();

src/styles.css ADDED Viewed

	@@ -0,0 +1,352 @@

+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
+:root {
+  --ink: #000;
+  --muted: rgb(0 0 0 / 58%);
+  --line: rgb(0 0 0 / 16%);
+  --soft-line: rgb(0 0 0 / 9%);
+  --paper: #fff;
+  --white: #fff;
+  --light-purple: #cd82f0;
+  --purple: #5505af;
+  --orange: #ff5f1e;
+  --sidebar: 294px;
+  color: var(--ink);
+  font-family: Söhne, 'Helvetica Neue', Arial, sans-serif;
+  font-synthesis: none;
+}
+* { box-sizing: border-box; }
+html, body, #app { height: 100%; min-height: 0; margin: 0; }
+body { background: var(--paper); overflow: hidden; }
+button, input, textarea { font: inherit; }
+button, label { -webkit-tap-highlight-color: transparent; }
+button { color: inherit; }
+svg { width: 18px; height: 18px; }
+.shell { height: 100%; height: 100dvh; min-height: 0; overflow: hidden; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
+.sidebar { height: 100%; background: #121310; color: #f2f3ec; padding: 24px 18px 17px; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; z-index: 20; }
+.brand-row { height: 34px; display: flex; align-items: center; padding: 0 4px; }
+.brand-link { display: inline-flex; align-items: center; color: inherit; }
+.brand-logo { display: block; width: 86px; height: auto; }
+.sidebar-close { display: none !important; margin-left: auto; }
+.new-chat { margin: 27px 0 24px; height: 44px; border: 1px solid #3b3d36; color: white; background: transparent; border-radius: 11px; display: flex; align-items: center; gap: 10px; padding: 0 14px; cursor: pointer; transition: .2s; }
+.new-chat:hover { background: #23251f; border-color: #62655a; }
+.sidebar-spacer { height: 51px; }
+.side-section { border-top: 1px solid #2e302a; padding: 22px 5px 18px; }
+.section-label { font: 500 10px/1.2 'JetBrains Mono', monospace; letter-spacing: .12em; color: #8d9085; }
+.model-name { display: flex; align-items: center; justify-content: space-between; gap: 9px; color: #f2f3ec; text-decoration: none; font-size: 14px; font-weight: 600; }
+.model-identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
+.model-orb { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 70% 30%, #fff 0 7%, var(--light-purple) 10% 34%, var(--purple) 66%, #000 72%); }
+.model-name > span:last-child { color: #74776d; font: 13px/1 'JetBrains Mono', monospace; transition: color .15s, transform .15s; }
+.model-name:hover > span:last-child { color: var(--light-purple); transform: translate(1px, -1px); }
+.load-button { width: 100%; border: 0; border-radius: 8px; background: var(--light-purple); color: #000; height: 38px; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
+.load-button:disabled { cursor: wait; opacity: .85; }
+.load-button svg { width: 15px; }
+.progress-track { height: 3px; background: #32352c; border-radius: 4px; margin-top: 11px; overflow: hidden; }
+.progress-track span { height: 100%; display: block; background: var(--light-purple); transition: width .25s; }
+.progress-file { font: 9px/1.4 'JetBrains Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #8e9186; margin-top: 6px; }
+.runtime-pill { display: inline-flex; align-items: center; gap: 7px; color: #afb2a7; font-size: 11px; background: #20221d; border: 1px solid #32352d; border-radius: 99px; padding: 7px 9px; }
+.runtime-pill span { width: 6px; height: 6px; border-radius: 50%; background: #777; }
+.runtime-pill.good span { background: var(--light-purple); box-shadow: 0 0 7px var(--light-purple); }
+.runtime-pill.loading span { background: var(--light-purple); animation: pulse 1.2s ease-in-out infinite; }
+.examples-side { flex: 1 1 auto; min-height: 100px; overflow-y: auto; }
+.example-row { display: grid; grid-template-columns: 52px 1fr; gap: 10px; width: 100%; border: 0; background: transparent; color: #d2d4cb; text-align: left; padding: 10px 0; cursor: pointer; }
+.example-row img { width: 52px; height: 44px; object-fit: cover; border-radius: 7px; border: 1px solid #3b3d36; }
+.example-row span { font-size: 10px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.example-row small { display: block; color: #7f8278; font: 8px 'JetBrains Mono', monospace; text-transform: uppercase; margin-bottom: 4px; }
+.example-row:disabled, .example-card:disabled { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }
+.sidebar-bottom { flex: 0 0 auto; margin-top: auto; border-top: 1px solid #2e302a; padding-top: 10px; }
+.side-link { width: 100%; min-height: 36px; padding: 0 6px; display: flex; align-items: center; gap: 10px; border: 0; background: none; text-decoration: none; color: #9da095; font-size: 11px; cursor: pointer; }
+.side-link:hover { color: white; }
+.side-link svg { width: 15px; }
+.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #777a71; margin-left: auto; }
+.status-dot.online { background: var(--light-purple); box-shadow: 0 0 7px var(--light-purple); }
+.main { height: 100%; min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: 58px minmax(0, 1fr) auto; background: #fff; position: relative; }
+.topbar { border-bottom: 1px solid var(--soft-line); display: flex; align-items: center; justify-content: flex-end; padding: 0 28px; }
+.topbar-status, .runtime-status { font: 10px 'JetBrains Mono', monospace; color: #777970; letter-spacing: .02em; }
+.topbar-status { display: flex; align-items: center; gap: 7px; margin-right: 22px; }
+.privacy-dot { width: 6px; height: 6px; background: var(--purple); border-radius: 50%; }
+.runtime-status { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; }
+.runtime-status .status-dot { margin: 0; }
+.menu-button, .mobile-brand { display: none !important; }
+.icon-button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
+.icon-button:hover, .icon-button.active { background: #eff0e9; }
+.conversation { overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d9dad3 transparent; }
+.welcome { width: min(790px, calc(100% - 48px)); min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 54px 0 30px; }
+.welcome h1, .loader-card h1 { font: 500 clamp(42px, 5.1vw, 67px)/.98 Söhne, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.03em; text-align: center; margin: 0 0 18px; }
+.welcome h1 { display: flex; align-items: center; justify-content: center; gap: clamp(15px, 1.5vw, 23px); }
+.hero-mark { width: clamp(42px, 4.6vw, 62px); height: auto; flex: 0 0 auto; }
+.welcome h1 em, .loader-card h1 em { font-style: normal; color: var(--purple); }
+.hero-copy { max-width: 610px; text-align: center; color: #686b61; font-size: 14px; line-height: 1.6; margin: 0 0 36px; }
+.example-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; width: 100%; }
+.example-card { border: 1px solid var(--line); border-radius: 14px; background: white; overflow: hidden; text-align: left; padding: 0; cursor: pointer; transition: transform .2s, box-shadow .2s; }
+.example-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - 13px) / 2); justify-self: center; }
+.example-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px #28291d12; }
+.example-card img { width: 100%; height: 112px; object-fit: cover; display: block; }
+.example-card > span { display: grid; grid-template-columns: 1fr 20px; padding: 13px 15px 15px; font-size: 11px; line-height: 1.45; }
+.example-card small { grid-column: 1 / -1; font: 8px 'JetBrains Mono', monospace; letter-spacing: .08em; color: #8c8f84; text-transform: uppercase; margin-bottom: 5px; }
+.example-card svg { grid-column: 2; grid-row: 2; color: var(--purple); width: 15px; }
+.examples-coming-soon { width: 100%; min-height: 118px; border: 1px dashed rgb(0 0 0 / 28%); border-radius: 14px; display: grid; place-items: center; color: #8a8d83; font: 10px 'JetBrains Mono', monospace; letter-spacing: .02em; }
+.examples-coming-soon.compact { min-height: 72px; margin-top: 13px; border-color: rgb(255 255 255 / 24%); color: #85887d; border-radius: 9px; }
+.messages { width: min(820px, calc(100% - 48px)); margin: 0 auto; padding: 46px 0 112px; }
+.message { display: grid; grid-template-columns: 88px 1fr; gap: 24px; border-bottom: 1px solid var(--soft-line); padding: 29px 0; }
+.message:first-child { padding-top: 0; }
+.message-label { font: 500 10px 'JetBrains Mono', monospace; color: #74776d; display: flex; gap: 7px; align-items: flex-start; padding-top: 3px; }
+.message-label img { width: 14px; height: 14px; }
+.message.assistant .message-label { color: var(--purple); }
+.message-content { min-width: 0; position: relative; }
+.message-text { font-size: 14px; line-height: 1.75; color: #30322c; overflow-wrap: anywhere; }
+.message-text.plain-text { white-space: pre-wrap; }
+.markdown-body > :first-child { margin-top: 0; }
+.markdown-body > :last-child { margin-bottom: 0; }
+.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body pre, .markdown-body table { margin: 0 0 12px; }
+.markdown-body ul, .markdown-body ol { padding-left: 22px; }
+.markdown-body li + li { margin-top: 3px; }
+.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { margin: 18px 0 8px; color: #22241f; line-height: 1.3; }
+.markdown-body h1 { font-size: 20px; }
+.markdown-body h2 { font-size: 17px; }
+.markdown-body h3, .markdown-body h4 { font-size: 15px; }
+.markdown-body a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
+.markdown-body blockquote { padding-left: 12px; border-left: 3px solid rgb(85 5 175 / 28%); color: #66695f; }
+.markdown-body code { padding: 2px 4px; border-radius: 4px; background: #f1f0ec; font: 12px/1.5 'JetBrains Mono', monospace; }
+.markdown-body pre { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f7f7f3; overflow: auto; }
+.markdown-body pre code { padding: 0; background: transparent; }
+.markdown-body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
+.markdown-body th, .markdown-body td { padding: 7px 9px; border: 1px solid var(--line); text-align: left; }
+.response-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgb(85 5 175 / 18%); border-top-color: var(--purple); border-radius: 50%; animation: spin .75s linear infinite; vertical-align: middle; }
+.message-images { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
+.image-enlarge { display: block; border: 0; padding: 0; background: transparent; cursor: zoom-in; text-align: left; }
+.overlay-image { display: block; position: relative; width: fit-content; max-width: 100%; }
+.overlay-image > img { display: block; max-width: 100%; }
+.message-images .image-enlarge { max-width: min(230px, 100%); }
+.message-images img { width: 100%; height: auto; max-height: 220px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: #f6f6f2; }
+.edit-message { border: 0; background: transparent; color: #8a8d83; padding: 8px 0 0; display: flex; gap: 5px; align-items: center; font-size: 10px; cursor: pointer; }
+.edit-message svg { width: 12px; }
+.composer-zone { width: min(820px, calc(100% - 48px)); justify-self: center; padding: 7px 0 14px; position: relative; }
+.composer-zone::before { content: ''; position: absolute; left: -30px; right: -30px; bottom: 0; top: -45px; pointer-events: none; background: linear-gradient(transparent, #fff 42%); z-index: 0; }
+.composer { min-height: 106px; border: 1px solid #d4d5ce; background: white; border-radius: 16px; box-shadow: 0 8px 28px #28291d12; padding: 15px 16px 11px; position: relative; z-index: 2; }
+.composer.drag-active { border-color: var(--purple); background: rgb(205 130 240 / 7%); box-shadow: 0 0 0 4px rgb(85 5 175 / 10%), 0 8px 28px #28291d12; }
+.composer textarea { display: block; width: 100%; min-height: 42px; max-height: 180px; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; line-height: 1.5; font-size: 13px; }
+.composer textarea::placeholder { color: #9a9c94; }
+.composer-actions { display: flex; align-items: center; min-height: 33px; }
+.composer-tools { display: flex; gap: 2px; }
+.composer-tools .icon-button { width: 30px; height: 30px; color: #777a70; }
+.composer-tools svg { width: 16px; }
+.composer-hint { margin-left: auto; margin-right: 11px; color: #a0a299; font: 9px 'JetBrains Mono', monospace; }
+.send-button { border: 0; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #181916; color: white; cursor: pointer; }
+.send-button:hover { background: var(--purple); }
+.send-button svg { width: 15px; }
+.stop-button { background: #181916; }
+.stop-symbol { width: 11px; height: 11px; border-radius: 1px; background: white; }
+.local-note { position: relative; z-index: 1; text-align: center; color: #9a9d93; font: 9px 'JetBrains Mono', monospace; margin: 9px 0 0; }
+.attachment-strip { position: relative; z-index: 1; display: flex; gap: 8px; padding: 9px 12px 10px; overflow-x: auto; }
+.attachment { width: 65px; height: 55px; flex: 0 0 auto; border: 2px solid white; outline: 1px solid #d3d4cc; border-radius: 9px; position: relative; }
+.attachment .image-enlarge, .attachment .overlay-image { width: 100%; height: 100%; }
+.attachment img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
+.attachment .attachment-remove { position: absolute; z-index: 2; top: -7px; right: -7px; width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #171815; color: white; cursor: pointer; padding: 0; }
+.attachment .attachment-remove svg { width: 10px; }
+.error-banner { z-index: 3; position: relative; display: flex; justify-content: space-between; align-items: center; background: #fff0ec; border: 1px solid #efb7aa; color: #8d3422; border-radius: 9px; padding: 9px 12px; font-size: 11px; margin-bottom: 8px; }
+.error-banner button { border: 0; background: transparent; color: inherit; padding: 0; cursor: pointer; }
+.error-banner svg { width: 14px; }
+.settings-popover { position: absolute; z-index: 3; left: 10px; bottom: 54px; width: 310px; background: white; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 18px 50px #22231825; padding: 16px; }
+.popover-title { font-size: 12px; font-weight: 600; margin-bottom: 15px; }
+.settings-popover > label { display: block; margin-top: 13px; }
+.settings-popover label > span { display: flex; justify-content: space-between; font-size: 10px; color: #62655b; }
+.settings-popover output { font-family: 'JetBrains Mono', monospace; }
+.settings-popover input[type=range] { width: 100%; accent-color: #7569ed; }
+.toggle-row { display: flex !important; justify-content: space-between; align-items: center; border-top: 1px solid var(--soft-line); padding-top: 13px; }
+.toggle-row > span { display: block !important; }
+.toggle-row b { display: block; font-size: 10px; color: #34362f; }
+.toggle-row small { display: block; margin-top: 3px; font-size: 8px; color: #8c8e86; max-width: 220px; }
+.toggle-row input { accent-color: #7569ed; }
+.drawer-scrim, .modal-scrim { position: fixed; inset: 0; background: #11120f66; backdrop-filter: blur(3px); z-index: 110; }
+.drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(440px, 100%); background: #fbfbf8; padding: 27px; box-shadow: -20px 0 60px #11120f25; overflow-y: auto; }
+.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; }
+.drawer-head h2 { font: 600 25px Söhne, 'Helvetica Neue', Arial, sans-serif; margin: 5px 0 0; letter-spacing: -.03em; }
+.secondary-button { height: 38px; border: 1px solid var(--line); background: white; border-radius: 8px; padding: 0 13px; font-size: 10px; display: flex; gap: 7px; align-items: center; cursor: pointer; }
+.secondary-button svg { width: 14px; }
+.secondary-button:disabled { cursor: not-allowed; opacity: .5; }
+.drawer-intro { color: #6f7268; font-size: 11px; line-height: 1.55; margin: 18px 0 24px; }
+.tool-section-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 9px; font-size: 11px; font-weight: 600; }
+.tool-section-head small { color: #898c82; font: 8px 'JetBrains Mono', monospace; }
+.tool-section-head button { border: 0; background: none; color: var(--purple); font-size: 10px; cursor: pointer; }
+.tool-config-list { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: white; }
+.tool-config-list.custom { margin-top: 10px; }
+.tool-config-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 9px; align-items: start; padding: 13px; border-bottom: 1px solid var(--soft-line); }
+.tool-config-row > div:nth-child(2) { min-width: 0; }
+.tool-config-row:last-child { border-bottom: 0; }
+.tool-config-row strong { display: block; font: 600 11px 'JetBrains Mono', monospace; }
+.tool-config-row p { color: #6f7268; font-size: 9px; line-height: 1.45; margin: 4px 0; }
+.tool-config-row small { color: #979a90; font-size: 8px; }
+.tool-definition { margin-top: 8px; }
+.tool-definition summary { width: fit-content; color: var(--purple); cursor: pointer; list-style-position: inside; font: 8px 'JetBrains Mono', monospace; }
+.tool-definition pre { max-width: 100%; max-height: 260px; margin: 8px 0 0; padding: 9px; overflow: auto; border: 1px solid var(--soft-line); border-radius: 7px; background: #f6f6f2; color: #4f5249; white-space: pre-wrap; overflow-wrap: anywhere; font: 8px/1.55 'JetBrains Mono', monospace; }
+.switch input { position: absolute; opacity: 0; pointer-events: none; }
+.switch i { display: block; width: 30px; height: 17px; border-radius: 9px; background: #d5d6cf; position: relative; cursor: pointer; transition: .15s; }
+.switch i::after { content: ''; position: absolute; width: 13px; height: 13px; left: 2px; top: 2px; border-radius: 50%; background: white; transition: .15s; box-shadow: 0 1px 3px #0003; }
+.switch input:checked + i { background: var(--purple); }
+.switch input:checked + i::after { transform: translateX(13px); }
+.inline-form-error { color: #8d3422; background: #fff0ec; border: 1px solid #efb7aa; border-radius: 7px; padding: 8px 9px; margin-bottom: 11px; font-size: 9px; line-height: 1.45; }
+.primary-small { min-height: 36px; border: 0; border-radius: 8px; background: #171815; color: white; padding: 0 14px; font-size: 10px; cursor: pointer; }
+.mcp-server-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
+.mcp-server-form input { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; outline: none; color: #252720; background: white; font: 9px/1.4 'JetBrains Mono', monospace; }
+.mcp-server-form input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgb(85 5 175 / 10%); }
+.mcp-server-form .secondary-button { min-height: 36px; }
+.mcp-error { margin: 8px 0 0; }
+.mcp-tools { margin-top: 9px; }
+.tool-privacy-note { margin-top: 19px; border-radius: 9px; background: rgb(205 130 240 / 16%); color: #4c1a83; padding: 12px; font-size: 9px; line-height: 1.55; }
+.system-prompt-inline { margin: -3px 0 8px; padding-bottom: 7px; border-bottom: 1px solid transparent; }
+.system-prompt-inline.open { border-bottom-color: var(--soft-line); }
+.composer-context-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.system-prompt-toggle { min-height: 29px; margin: 0; padding: 0 9px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 7px; background: #fafaf7; color: #686b61; cursor: pointer; font: 8px 'JetBrains Mono', monospace; }
+.system-prompt-toggle:hover, .system-prompt-toggle.enabled, .system-prompt-inline.open .system-prompt-toggle { color: var(--purple); border-color: rgb(85 5 175 / 38%); background: rgb(205 130 240 / 9%); }
+.tool-calling-toggle { min-height: 29px; margin: 0 0 0 auto; padding: 0 9px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 7px; background: #fafaf7; color: #686b61; cursor: pointer; font: 8px 'JetBrains Mono', monospace; }
+.tool-calling-toggle:hover, .tool-calling-toggle.enabled { color: var(--purple); border-color: rgb(85 5 175 / 38%); background: rgb(205 130 240 / 9%); }
+.tool-calling-toggle > span:last-child { font: 14px/1 Arial, sans-serif; }
+.system-prompt-chevron { display: inline-block; color: currentColor; font: 12px/1 Arial, sans-serif; transition: transform .16s; }
+.system-prompt-inline.open .system-prompt-chevron { transform: rotate(180deg); }
+.system-prompt-form { margin-top: 5px; }
+.system-prompt-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
+.system-prompt-presets > span { margin-right: 2px; color: #999c92; font: 7px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .05em; }
+.system-prompt-presets button { min-height: 27px; padding: 0 9px; border: 1px solid var(--line); border-radius: 99px; background: white; color: #686b61; cursor: pointer; font-size: 8px; }
+.system-prompt-presets button:hover, .system-prompt-presets button.active { border-color: rgb(85 5 175 / 38%); background: rgb(205 130 240 / 9%); color: var(--purple); }
+.system-prompt-form textarea { width: 100%; max-height: 190px; padding: 10px; resize: vertical; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: #252720; background: #fafaf7; font: 10px/1.55 'JetBrains Mono', monospace; }
+.system-prompt-form textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgb(85 5 175 / 10%); }
+.system-prompt-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: #999c92; font: 7px 'JetBrains Mono', monospace; }
+.system-prompt-actions { display: flex; gap: 5px; margin-left: auto; }
+.system-prompt-actions button { min-height: 27px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: white; color: #686b61; cursor: pointer; font-size: 8px; }
+.system-prompt-actions button[type=submit] { border-color: #181916; background: #181916; color: white; }
+.grounding-results { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--soft-line); }
+.grounding-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 9px; color: var(--purple); cursor: pointer; list-style: none; font: 600 9px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
+.grounding-heading::-webkit-details-marker { display: none; }
+.grounding-heading > span { display: flex; align-items: center; gap: 7px; min-width: 0; }
+.grounding-heading svg { width: 14px; }
+.grounding-heading small { color: #92958b; font: 8px 'JetBrains Mono', monospace; letter-spacing: 0; text-transform: none; }
+.grounding-heading > i { font: 17px/1 Arial, sans-serif; transition: transform .16s; }
+.grounding-results[open] .grounding-heading > i { transform: rotate(90deg); }
+.grounding-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 280px)); align-items: start; gap: 13px; margin-top: 11px; }
+.grounding-results figure { width: 100%; margin: 0; }
+.grounding-image { width: 100%; }
+.grounding-image .overlay-image { width: fit-content; max-width: 100%; }
+.grounding-image img { width: auto; height: auto; max-width: 100%; max-height: 260px; border: 1px solid var(--line); border-radius: 10px; background: #f6f6f2; }
+.grounding-results figcaption { margin-top: 6px; color: #85887d; font: 8px 'JetBrains Mono', monospace; }
+.document-region-list { display: grid; gap: 5px; max-height: 280px; margin-top: 9px; overflow: auto; }
+.document-region-list > div { display: grid; grid-template-columns: 18px minmax(62px, 82px) minmax(0, 1fr); gap: 7px; align-items: start; padding: 7px 8px; border: 1px solid var(--soft-line); border-radius: 7px; background: #fafaf7; }
+.document-region-list span { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: white; font: 7px 'JetBrains Mono', monospace; }
+.document-region-list strong { color: var(--purple); font: 8px/1.6 'JetBrains Mono', monospace; }
+.document-region-list p { min-width: 0; margin: 0; color: #5d6056; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 9px; line-height: 1.45; }
+.grounding-overlay { position: absolute; inset: 0; pointer-events: none; }
+.grounding-box { position: absolute; border: 1.5px solid var(--light-purple); box-shadow: 0 0 0 1px rgb(0 0 0 / 35%), inset 0 0 0 1px rgb(0 0 0 / 20%); }
+.grounding-label { position: absolute; left: -1px; top: -1px; max-width: 180px; padding: 3px 5px; background: var(--purple); color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 9px/1.2 'JetBrains Mono', monospace; transform: translateY(-100%); }
+.grounding-point { position: absolute; width: 0; height: 0; }
+.grounding-point > i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border: 2px solid white; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 1px rgb(0 0 0 / 55%); }
+.grounding-point > b { position: absolute; left: -4px; top: -4px; width: 8px; color: white; text-align: center; font: 600 6px/8px 'JetBrains Mono', monospace; }
+.grounding-point .grounding-label { left: 9px; top: 0; transform: translateY(-50%); }
+.lightbox-scrim { z-index: 140; background: rgb(10 10 9 / 88%); }
+.lightbox { position: relative; display: grid; place-items: center; width: min(94vw, 1400px); height: min(92dvh, 1000px); }
+.lightbox > .overlay-image { width: auto; max-width: 100%; max-height: 100%; }
+.lightbox > .overlay-image > img { width: auto; max-width: 100%; max-height: 92dvh; object-fit: contain; }
+.lightbox-close { position: fixed; z-index: 2; right: 22px; top: 20px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 25%); border-radius: 50%; background: rgb(0 0 0 / 42%); color: white; cursor: pointer; }
+.lightbox-close svg { width: 18px; }
+.tool-call-list, .tool-result-list { display: grid; gap: 8px; margin-top: 12px; }
+.tool-call-card, .tool-result-card { border: 1px solid var(--line); border-radius: 9px; background: #fafaf7; overflow: hidden; }
+.tool-call-card > div, .tool-result-card > div { display: flex; align-items: center; gap: 7px; padding: 9px 11px; }
+.tool-call-card strong, .tool-result-card strong { font: 600 10px 'JetBrains Mono', monospace; }
+.tool-call-card small, .tool-result-card span { margin-left: auto; color: #85887d; font: 8px 'JetBrains Mono', monospace; }
+.tool-state { width: 7px; height: 7px; border-radius: 50%; background: #9a9c94; }
+.tool-call-card.running .tool-state { background: var(--purple); box-shadow: 0 0 0 3px rgb(205 130 240 / 25%); }
+.tool-call-card.success .tool-state { background: var(--purple); }
+.tool-call-card.error .tool-state { background: var(--orange); }
+.tool-call-card pre, .tool-result-card pre { margin: 0; padding: 10px 11px; border-top: 1px solid var(--soft-line); background: white; color: #4f5249; overflow: auto; white-space: pre-wrap; font: 9px/1.5 'JetBrains Mono', monospace; }
+.tool-raw-output { min-width: 0; max-width: 100%; border-top: 1px solid var(--soft-line); background: #fffaf4; overflow: hidden; }
+.tool-raw-output summary { padding: 8px 11px; cursor: pointer; color: #7b5a36; font: 8px 'JetBrains Mono', monospace; }
+.tool-raw-output pre { box-sizing: border-box; width: 100%; max-width: 100%; max-height: 240px; margin: 0; padding: 10px 11px; overflow: auto; border: 0; border-top: 1px solid #eee2d2; background: #fffdf9; color: #4f5249; white-space: pre; overflow-wrap: normal; font: 9px/1.5 'JetBrains Mono', monospace; }
+.tool-result-card.success { border-left: 3px solid var(--purple); }
+.tool-result-card.error { border-left: 3px solid var(--orange); }
+.message.tool .message-label { color: #777970; }
+.loader-screen { position: fixed; inset: 0; z-index: 100; background: #11120f; display: grid; place-items: center; overflow: auto; padding: 30px; color: white; }
+.loader-screen::before { content: ''; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(#ffffff09 1px, transparent 1px), linear-gradient(90deg, #ffffff09 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle, black, transparent 72%); }
+.loader-glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgb(205 130 240 / 24%), rgb(85 5 175 / 12%) 35%, transparent 68%); }
+.loader-card { width: min(450px, 100%); position: relative; text-align: center; }
+.loader-brand { display: flex; align-items: center; justify-content: center; }
+.loader-brand img { width: 96px; height: auto; }
+.loader-orb { width: 51px; height: 51px; margin: 42px auto 20px; border-radius: 50%; background: radial-gradient(circle at 65% 25%, #fff, var(--light-purple) 28%, var(--purple) 64%, #000); box-shadow: 0 0 38px rgb(205 130 240 / 42%); }
+.loader-card .eyebrow { justify-content: center; color: #a5a89c; }
+.loader-card h1 { font-size: clamp(41px, 6vw, 58px); margin: 15px 0; }
+.loader-card > p { color: #aaada1; font-size: 12px; line-height: 1.65; max-width: 390px; margin: 0 auto 27px; }
+.browser-performance-note { max-width: 390px; margin: -12px auto 20px; padding: 10px 11px; display: flex; align-items: flex-start; gap: 8px; border: 1px solid #393b34; border-radius: 8px; color: #aaada1; text-align: left; font-size: 9px; line-height: 1.5; }
+.browser-performance-note svg { width: 14px; flex: 0 0 14px; color: var(--light-purple); }
+.model-loader { text-align: left; }
+.load-model-button { width: 100%; height: 47px; margin-top: 4px; border-radius: 9px; border: 0; background: var(--light-purple); color: #000; font-weight: 700; font-size: 12px; display: flex; justify-content: center; gap: 10px; align-items: center; cursor: pointer; }
+.load-model-button:disabled { cursor: wait; opacity: .9; }
+.load-model-button svg { width: 15px; }
+.load-model-button b { margin-left: auto; margin-right: 14px; font: 600 10px 'JetBrains Mono', monospace; }
+.model-loader .spinner { border-color: rgb(0 0 0 / 20%); border-top-color: #000; }
+.loader-progress { height: 4px; border-radius: 3px; background: #30322b; overflow: hidden; margin-top: 12px; }
+.loader-progress span { display: block; height: 100%; background: var(--light-purple); transition: width .25s; }
+.loader-progress-file { color: #7f8277; font: 9px/1.4 'JetBrains Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 8px; }
+.loader-cache-note { color: #777a70; text-align: center; font: 8px/1.5 'JetBrains Mono', monospace; margin-top: 10px; }
+.loader-precision-note { color: var(--light-purple); text-align: center; font: 8px/1.5 'JetBrains Mono', monospace; margin-top: 7px; }
+.loader-error { color: #ffb59a; background: rgb(255 95 30 / 10%); border: 1px solid rgb(255 95 30 / 35%); border-radius: 8px; padding: 10px 12px; margin: -10px 0 14px; font-size: 10px; line-height: 1.5; text-align: left; }
+.modal-scrim { display: grid; place-items: center; padding: 24px; }
+.cache-modal { width: min(420px, 100%); padding: 22px; border-radius: 16px; background: #fbfbf8; box-shadow: 0 24px 80px rgb(0 0 0 / 18%); }
+.cache-modal > p { margin: 18px 0; color: #6f7268; font-size: 11px; line-height: 1.55; }
+.cache-total { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; }
+.cache-total strong { font: 600 11px 'JetBrains Mono', monospace; }
+.cache-clear { margin-top: 18px; }
+.webcam-modal { width: min(660px, 100%); background: #fbfbf8; border-radius: 18px; padding: 22px; }
+.video-frame { aspect-ratio: 16/10; margin-top: 19px; border-radius: 12px; overflow: hidden; background: #151612; position: relative; display: grid; place-items: center; }
+.video-frame video { width: 100%; height: 100%; object-fit: cover; position: absolute; transform: scaleX(-1); }
+.camera-wait { color: #8d9085; font: 10px 'JetBrains Mono', monospace; }
+.capture-button { width: 100%; height: 43px; border: 0; border-radius: 9px; background: #191a17; color: white; margin-top: 14px; display: flex; justify-content: center; align-items: center; gap: 9px; cursor: pointer; }
+.spinner { width: 13px; height: 13px; border: 2px solid #1b1c1740; border-top-color: #1b1c17; border-radius: 50%; animation: spin .8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes pulse { 50% { opacity: .35; } }
+@media (max-width: 800px) {
+  :root { --sidebar: min(310px, 88vw); }
+  .shell { display: block; }
+  .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); transform: translateX(-102%); transition: transform .25s; box-shadow: 20px 0 55px #11130f45; }
+  .sidebar.open { transform: translateX(0); }
+  .sidebar-close { display: inline-flex !important; color: white; }
+  .main { height: 100%; }
+  .topbar { justify-content: space-between; padding: 0 14px; }
+  .menu-button { display: inline-flex !important; }
+  .mobile-brand { display: flex !important; align-items: center; gap: 8px; font: 600 12px Söhne, 'Helvetica Neue', Arial, sans-serif; }
+  .mobile-brand img { width: 17px; }
+  .topbar-status { display: none; }
+  .welcome { width: calc(100% - 28px); padding-top: 35px; justify-content: flex-start; }
+  .welcome h1 { font-size: 40px; }
+  .hero-copy { font-size: 12px; margin-bottom: 24px; }
+  .example-grid { grid-template-columns: 1fr; }
+  .example-card:last-child:nth-child(odd) { width: 100%; }
+  .example-card img { height: 92px; }
+  .messages { width: calc(100% - 28px); padding-top: 25px; }
+  .message { display: block; padding: 21px 0; }
+  .message-label { margin-bottom: 12px; }
+  .composer-zone { width: calc(100% - 20px); padding-bottom: 8px; }
+  .composer-hint { display: none; }
+  .system-prompt-meta { align-items: flex-start; flex-wrap: wrap; }
+  .settings-popover { left: 4px; width: calc(100% - 8px); }
+  .local-note { font-size: 8px; }
+  .loader-screen { padding: 24px 18px; }
+  .loader-card h1 { font-size: 40px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
+}

src/tools/mcp-client.js ADDED Viewed

	@@ -0,0 +1,85 @@

+const MAX_RESULT_CHARACTERS = 4000;
+const TOOL_NAME = /^[A-Za-z_][A-Za-z0-9_]{0,63}$/;
+let client = null;
+export async function connectMcpServer(rawUrl) {
+  const url = validateServerUrl(rawUrl);
+  await disconnectMcpServer();
+  const [{ Client }, { StreamableHTTPClientTransport }] = await Promise.all([
+    import('@modelcontextprotocol/sdk/client/index.js'),
+    import('@modelcontextprotocol/sdk/client/streamableHttp.js'),
+  ]);
+  const nextClient = new Client({ name: 'lfm-webgpu', version: '1.0.0' }, { capabilities: {} });
+  try {
+    await nextClient.connect(new StreamableHTTPClientTransport(url, { fetch: postOnlyFetch }));
+    const response = await nextClient.listTools();
+    client = nextClient;
+    return normalizeMcpTools(response.tools);
+  } catch (error) {
+    await nextClient.close().catch(() => {});
+    throw error;
+  }
+}
+export async function disconnectMcpServer() {
+  const active = client;
+  client = null;
+  if (active) await active.close().catch(() => {});
+}
+export async function callMcpTool(name, args, signal) {
+  if (!client) throw new Error('The MCP server is not connected.');
+  if (signal?.aborted) throw new DOMException('Generation stopped.', 'AbortError');
+  const response = await client.callTool({ name, arguments: args });
+  if (signal?.aborted) throw new DOMException('Generation stopped.', 'AbortError');
+  if (response.isError) throw new Error(errorMessage(response.content));
+  return compactMcpResult(response);
+}
+export function compactMcpResult(response) {
+  const result = response.structuredContent ?? { content: response.content || [] };
+  const serialized = JSON.stringify(result);
+  if (serialized.length <= MAX_RESULT_CHARACTERS) return result;
+  const text = (response.content || []).filter(item => item.type === 'text').map(item => item.text).join('\n');
+  return {
+    truncated: true,
+    content: [{ type: 'text', text: (text || serialized).slice(0, MAX_RESULT_CHARACTERS) }],
+  };
+}
+export function normalizeMcpTools(tools = []) {
+  return (Array.isArray(tools) ? tools : []).flatMap(normalizeDiscoveredTool);
+}
+function normalizeDiscoveredTool(tool) {
+  const name = String(tool?.name || '');
+  const parameters = tool?.inputSchema;
+  if (!TOOL_NAME.test(name) || !parameters || parameters.type !== 'object' || !parameters.properties || Array.isArray(parameters.properties)) return [];
+  return [{
+    id: `mcp:${name}`,
+    name,
+    description: String(tool.description || `MCP tool: ${name}`),
+    parameters: structuredClone(parameters),
+    source: 'mcp',
+    enabled: false,
+  }];
+}
+function validateServerUrl(rawUrl) {
+  let url;
+  try { url = new URL(String(rawUrl || '').trim()); } catch { throw new Error('Enter a valid MCP server URL.'); }
+  const localHttp = url.protocol === 'http:' && ['localhost', '127.0.0.1', '[::1]'].includes(url.hostname);
+  if (url.protocol !== 'https:' && !localHttp) throw new Error('MCP servers must use HTTPS, except on localhost.');
+  return url;
+}
+function errorMessage(content) {
+  const text = (content || []).filter(item => item.type === 'text').map(item => item.text).join('\n').trim();
+  return text || 'The MCP tool returned an error.';
+}
+function postOnlyFetch(input, init = {}) {
+  if (String(init.method || 'GET').toUpperCase() === 'GET') return Promise.resolve(new Response(null, { status: 405 }));
+  return fetch(input, init);
+}

src/tools/tool-protocol.js ADDED Viewed

	@@ -0,0 +1,163 @@

+export const TOOL_CALL_START = '<|tool_call_start|>';
+export const TOOL_CALL_END = '<|tool_call_end|>';
+const CONTROL_TOKENS = /<\|(?:im_start|im_end|tool_call_start|tool_call_end)\|>/g;
+export function parseToolCalls(rawText) {
+  const calls = [];
+  let cursor = 0;
+  while (cursor < rawText.length) {
+    const start = rawText.indexOf(TOOL_CALL_START, cursor);
+    if (start < 0) break;
+    const contentStart = start + TOOL_CALL_START.length;
+    const end = rawText.indexOf(TOOL_CALL_END, contentStart);
+    if (end < 0) throw new Error('The model emitted an incomplete tool call.');
+    calls.push(...parseCallList(rawText.slice(contentStart, end)));
+    cursor = end + TOOL_CALL_END.length;
+  }
+  return calls;
+}
+export function displayTextFromRaw(rawText) {
+  let output = '';
+  let cursor = 0;
+  while (cursor < rawText.length) {
+    const start = rawText.indexOf(TOOL_CALL_START, cursor);
+    if (start < 0) {
+      output += rawText.slice(cursor);
+      break;
+    }
+    output += rawText.slice(cursor, start);
+    const end = rawText.indexOf(TOOL_CALL_END, start + TOOL_CALL_START.length);
+    if (end < 0) break;
+    cursor = end + TOOL_CALL_END.length;
+  }
+  return output.replace(CONTROL_TOKENS, '').replace(/^assistant\s*\n/i, '').trim();
+}
+export function createToolStreamFilter(onText, { onToolCallStart, onToolCallEnd } = {}) {
+  let buffer = '';
+  let insideCall = false;
+  const reserve = Math.max(TOOL_CALL_START.length, TOOL_CALL_END.length) - 1;
+  function flush(force = false) {
+    while (buffer) {
+      const marker = insideCall ? TOOL_CALL_END : TOOL_CALL_START;
+      const markerIndex = buffer.indexOf(marker);
+      if (markerIndex >= 0) {
+        if (!insideCall && markerIndex > 0) emit(buffer.slice(0, markerIndex));
+        buffer = buffer.slice(markerIndex + marker.length);
+        insideCall = !insideCall;
+        if (insideCall) onToolCallStart?.();
+        else onToolCallEnd?.();
+        continue;
+      }
+      const length = force ? buffer.length : Math.max(0, buffer.length - reserve);
+      if (!length) break;
+      if (!insideCall) emit(buffer.slice(0, length));
+      buffer = buffer.slice(length);
+    }
+  }
+  function emit(value) {
+    const clean = value.replace(CONTROL_TOKENS, '');
+    if (clean) onText(clean);
+  }
+  return {
+    push(chunk) { buffer += chunk; flush(false); },
+    finish() { flush(true); },
+  };
+}
+function parseCallList(source) {
+  const trimmed = source.trim();
+  const body = trimmed.startsWith('[') && trimmed.endsWith(']')
+    ? trimmed.slice(1, -1)
+    : trimmed;
+  if (!body.trim()) return [];
+  return splitTopLevel(body).map(parseCall);
+}
+function parseCall(source) {
+  const match = /^([A-Za-z_][A-Za-z0-9_]*)\s*\(([\s\S]*)\)$/.exec(source.trim());
+  if (!match) throw new Error(`Malformed tool call: ${source.trim().slice(0, 80)}`);
+  const args = {};
+  const positional = [];
+  for (const part of splitTopLevel(match[2])) {
+    const assignment = findTopLevelAssignment(part);
+    if (assignment < 0) positional.push(parsePythonValue(part));
+    else {
+      const key = part.slice(0, assignment).trim();
+      if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) throw new Error(`Invalid argument name: ${key}`);
+      if (Object.hasOwn(args, key)) throw new Error(`Duplicate argument: ${key}`);
+      args[key] = parsePythonValue(part.slice(assignment + 1));
+    }
+  }
+  return { name: match[1], arguments: args, positional };
+}
+function splitTopLevel(source) {
+  if (!source.trim()) return [];
+  const parts = [];
+  let start = 0;
+  let quote = '';
+  let escaped = false;
+  const stack = [];
+  for (let index = 0; index < source.length; index += 1) {
+    const character = source[index];
+    if (quote) {
+      if (escaped) escaped = false;
+      else if (character === '\\') escaped = true;
+      else if (character === quote) quote = '';
+      continue;
+    }
+    if (character === '"' || character === "'") { quote = character; continue; }
+    if ('([{'.includes(character)) stack.push(character);
+    else if (')]}'.includes(character)) stack.pop();
+    else if (character === ',' && stack.length === 0) {
+      parts.push(source.slice(start, index).trim());
+      start = index + 1;
+    }
+  }
+  if (quote || stack.length) throw new Error('Unbalanced tool-call arguments.');
+  const finalPart = source.slice(start).trim();
+  if (finalPart) parts.push(finalPart);
+  return parts;
+}
+function findTopLevelAssignment(source) {
+  let quote = '';
+  let escaped = false;
+  let depth = 0;
+  for (let index = 0; index < source.length; index += 1) {
+    const character = source[index];
+    if (quote) {
+      if (escaped) escaped = false;
+      else if (character === '\\') escaped = true;
+      else if (character === quote) quote = '';
+    } else if (character === '"' || character === "'") quote = character;
+    else if ('([{'.includes(character)) depth += 1;
+    else if (')]}'.includes(character)) depth -= 1;
+    else if (character === '=' && depth === 0) return index;
+  }
+  return -1;
+}
+function parsePythonValue(source) {
+  const value = source.trim();
+  if (!value) throw new Error('Missing tool argument value.');
+  if (value === 'True' || value === 'true') return true;
+  if (value === 'False' || value === 'false') return false;
+  if (value === 'None' || value === 'null') return null;
+  if (/^-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i.test(value)) return Number(value);
+  if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) {
+    if (value[0] === '"') return JSON.parse(value);
+    return value.slice(1, -1).replace(/\\(['\\nrt])/g, (_, escaped) => ({ "'": "'", '\\': '\\', n: '\n', r: '\r', t: '\t' })[escaped]);
+  }
+  if (value.startsWith('[') && value.endsWith(']')) return splitTopLevel(value.slice(1, -1)).map(parsePythonValue);
+  if (value.startsWith('{') && value.endsWith('}')) {
+    try { return JSON.parse(value); } catch { throw new Error('Object arguments must use valid JSON.'); }
+  }
+  throw new Error(`Unsupported tool argument value: ${value.slice(0, 80)}`);
+}

src/tools/tool-registry.js ADDED Viewed

	@@ -0,0 +1,258 @@

+const STORAGE_KEY = 'liquid-webgpu-tools-v1';
+const STORAGE_VERSION = 2;
+export const BUILTIN_TOOLS = [
+  definition('calculate', 'Evaluate arithmetic and trigonometric expressions. sin/cos/tan and asin/acos/atan use radians; append _deg for degree input/output (for example, sin_deg(30)). Also supports sqrt, abs, pi, and e.', {
+    expression: { type: 'string', description: 'Expression using numbers, +, -, *, /, %, ^, parentheses, pi/e, sqrt/abs, or sin/cos/tan/asin/acos/atan. Trig uses radians unless the function name ends in _deg.' },
+  }, ['expression']),
+  definition('current_datetime', 'Get the current date and time, optionally in an IANA time zone.', {
+    time_zone: { type: 'string', description: 'Optional IANA time zone, such as America/New_York.' },
+  }),
+  definition('random_integer', 'Generate a cryptographically random integer in an inclusive range.', {
+    min: { type: 'integer', description: 'Inclusive lower bound.' },
+    max: { type: 'integer', description: 'Inclusive upper bound.' },
+  }, ['min', 'max']),
+  definition('get_geolocation', 'Request the device location using the browser permission prompt.', {
+    high_accuracy: { type: 'boolean', description: 'Whether to request high-accuracy location.' },
+  }),
+  definition('search_recipe_by_dish', 'Search for one recipe matching the name of a completed dish.', {
+    dish_name: { type: 'string', description: 'The conventional name of the dish.' },
+  }, ['dish_name'], { external: true }),
+];
+function definition(name, description, properties, required = [], metadata = {}) {
+  return { id: `builtin:${name}`, name, description, source: 'builtin', enabled: false, ...metadata, parameters: { type: 'object', properties, required, additionalProperties: false } };
+}
+export function loadTools() {
+  let saved = {};
+  try { saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}'); } catch { saved = {}; }
+  const enabled = saved.enabled || {};
+  const resetEnabledState = saved.version !== STORAGE_VERSION;
+  const builtins = BUILTIN_TOOLS.map(tool => ({ ...tool, enabled: resetEnabledState ? false : enabled[tool.id] ?? false }));
+  if (resetEnabledState || saved.custom) saveTools(builtins);
+  return builtins;
+}
+export function saveTools(tools) {
+  const enabled = Object.fromEntries(tools.filter(tool => tool.source === 'builtin').map(tool => [tool.id, Boolean(tool.enabled)]));
+  localStorage.setItem(STORAGE_KEY, JSON.stringify({ version: STORAGE_VERSION, enabled }));
+}
+export function modelToolDefinitions(tools) {
+  return tools.filter(tool => tool.enabled).map(({ name, description, parameters }) => ({ name, description, parameters }));
+}
+export function prepareToolCall(call, tools) {
+  const tool = tools.find(candidate => candidate.enabled && candidate.name === call.name);
+  if (!tool) throw new Error(`Unknown or disabled tool: ${call.name}`);
+  const propertyNames = Object.keys(tool.parameters.properties || {});
+  if (call.positional.length > propertyNames.length) throw new Error(`${tool.name} received too many positional arguments.`);
+  const args = { ...call.arguments };
+  call.positional.forEach((value, index) => {
+    const key = propertyNames[index];
+    if (Object.hasOwn(args, key)) throw new Error(`${tool.name} received ${key} twice.`);
+    args[key] = value;
+  });
+  validateArguments(tool.parameters, args);
+  return { tool, args };
+}
+export async function executeBuiltin(name, args, signal) {
+  if (signal?.aborted) throw new DOMException('Generation stopped.', 'AbortError');
+  if (name === 'calculate') return { value: calculate(args.expression) };
+  if (name === 'current_datetime') return currentDatetime(args.time_zone);
+  if (name === 'random_integer') return { value: randomInteger(args.min, args.max), min: args.min, max: args.max };
+  if (name === 'get_geolocation') return geolocate(args.high_accuracy, signal);
+  if (name === 'search_recipe_by_dish') return searchRecipeByDish(args.dish_name, signal);
+  throw new Error(`No built-in executor exists for ${name}.`);
+}
+export async function searchRecipeByDish(rawDishName, signal, fetcher = globalThis.fetch) {
+  const dishName = typeof rawDishName === 'string' ? rawDishName.trim() : '';
+  if (!dishName || dishName.length > 100) throw new Error('dish_name must contain between 1 and 100 characters.');
+  if (typeof fetcher !== 'function') throw new Error('Recipe search is unavailable in this browser.');
+  const response = await fetcher(`https://www.themealdb.com/api/json/v1/1/search.php?s=${encodeURIComponent(dishName)}`, { signal });
+  if (!response.ok) throw new Error(`TheMealDB search failed (${response.status}).`);
+  const queryWords = normalizedWords(dishName);
+  const candidates = (await response.json()).meals || [];
+  const relevant = candidates.filter(meal => {
+    const titleWords = normalizedWords(meal.strMeal || '');
+    return queryWords.every(word => titleWords.includes(word));
+  });
+  const exact = relevant.find(meal => normalizedWords(meal.strMeal || '').join(' ') === queryWords.join(' '));
+  const meal = exact || relevant[0] || null;
+  const recipes = meal ? [{
+    id: meal.idMeal,
+    name: meal.strMeal,
+    category: meal.strCategory || null,
+    cuisine: meal.strArea || null,
+    ingredients: extractRecipeIngredients(meal).map(item => [item.measure, item.name].filter(Boolean).join(' ')),
+    instructions: String(meal.strInstructions || '').trim().slice(0, 800),
+    source_url: meal.strSource || `https://www.themealdb.com/meal/${meal.idMeal}`,
+  }] : [];
+  return {
+    provider: 'TheMealDB',
+    recipes,
+  };
+}
+function extractRecipeIngredients(meal) {
+  const ingredients = [];
+  for (let index = 1; index <= 20; index += 1) {
+    const name = String(meal[`strIngredient${index}`] || '').trim();
+    if (name) ingredients.push({ name, measure: String(meal[`strMeasure${index}`] || '').trim() });
+  }
+  return ingredients;
+}
+function normalizedWords(value) {
+  return String(value).toLowerCase().normalize('NFKD').replace(/[\u0300-\u036f]/g, '').match(/[a-z0-9]+/g)?.map(word => {
+    if (word.endsWith('oes') && word.length > 4) return word.slice(0, -2);
+    if (word.endsWith('ies') && word.length > 4) return `${word.slice(0, -3)}y`;
+    if (word.endsWith('s') && !word.endsWith('ss') && word.length > 3) return word.slice(0, -1);
+    return word;
+  }) || [];
+}
+export function calculate(expression) {
+  if (typeof expression !== 'string' || !expression.trim() || expression.length > 256) throw new Error('Expression must contain 1–256 characters.');
+  const tokens = tokenize(expression);
+  let position = 0;
+  const peek = value => tokens[position]?.value === value;
+  const consume = value => {
+    if (!peek(value)) throw new Error(`Expected ${value || 'a number'}.`);
+    return tokens[position++];
+  };
+  function primary() {
+    if (peek('+') || peek('-')) {
+      const operator = tokens[position++].value;
+      const operand = primary();
+      return operator === '-' ? -operand : operand;
+    }
+    if (peek('(')) { consume('('); const value = additive(); consume(')'); return value; }
+    const token = tokens[position++];
+    if (token?.type === 'identifier') {
+      if (Object.hasOwn(CALCULATOR_CONSTANTS, token.value)) return CALCULATOR_CONSTANTS[token.value];
+      const operation = CALCULATOR_FUNCTIONS[token.value];
+      if (!operation) throw new Error(`Unsupported function or constant: ${token.value}`);
+      consume('(');
+      const argument = additive();
+      consume(')');
+      return operation(argument);
+    }
+    if (!token || token.type !== 'number') throw new Error('Expected a number.');
+    return token.number;
+  }
+  function power() { let left = primary(); if (peek('^')) { consume('^'); left **= power(); } return left; }
+  function multiplicative() {
+    let left = power();
+    while (peek('*') || peek('/') || peek('%')) {
+      const operator = tokens[position++].value; const right = power();
+      if ((operator === '/' || operator === '%') && right === 0) throw new Error('Division by zero is undefined.');
+      left = operator === '*' ? left * right : operator === '/' ? left / right : left % right;
+    }
+    return left;
+  }
+  function additive() {
+    let left = multiplicative();
+    while (peek('+') || peek('-')) { const operator = tokens[position++].value; const right = multiplicative(); left = operator === '+' ? left + right : left - right; }
+    return left;
+  }
+  const result = additive();
+  if (position !== tokens.length) throw new Error(`Unexpected token: ${tokens[position].value}`);
+  if (!Number.isFinite(result)) throw new Error('The expression did not produce a finite number.');
+  return result;
+}
+const toDegrees = value => value * 180 / Math.PI;
+const toRadians = value => value * Math.PI / 180;
+const CALCULATOR_CONSTANTS = Object.freeze({ pi: Math.PI, e: Math.E });
+const CALCULATOR_FUNCTIONS = Object.freeze({
+  sin: Math.sin,
+  cos: Math.cos,
+  tan: Math.tan,
+  asin: Math.asin,
+  acos: Math.acos,
+  atan: Math.atan,
+  sin_deg: value => Math.sin(toRadians(value)),
+  cos_deg: value => Math.cos(toRadians(value)),
+  tan_deg: value => Math.tan(toRadians(value)),
+  asin_deg: value => toDegrees(Math.asin(value)),
+  acos_deg: value => toDegrees(Math.acos(value)),
+  atan_deg: value => toDegrees(Math.atan(value)),
+  sqrt: Math.sqrt,
+  abs: Math.abs,
+});
+function tokenize(expression) {
+  const tokens = [];
+  let cursor = 0;
+  while (cursor < expression.length) {
+    const rest = expression.slice(cursor);
+    const whitespace = /^\s+/.exec(rest);
+    if (whitespace) { cursor += whitespace[0].length; continue; }
+    const number = /^(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?/i.exec(rest);
+    if (number) { tokens.push({ type: 'number', value: number[0], number: Number(number[0]) }); cursor += number[0].length; continue; }
+    const identifier = /^[A-Za-z_][A-Za-z0-9_]*/.exec(rest);
+    if (identifier) { tokens.push({ type: 'identifier', value: identifier[0].toLowerCase() }); cursor += identifier[0].length; continue; }
+    if ('+-*/%^()'.includes(rest[0])) { tokens.push({ type: 'operator', value: rest[0] }); cursor += 1; continue; }
+    throw new Error(`Unsupported character: ${rest[0]}`);
+  }
+  return tokens;
+}
+function currentDatetime(timeZone) {
+  const options = { dateStyle: 'full', timeStyle: 'long' };
+  if (timeZone) options.timeZone = timeZone;
+  let formatted;
+  try { formatted = new Intl.DateTimeFormat(undefined, options).format(new Date()); }
+  catch { throw new Error(`Invalid IANA time zone: ${timeZone}`); }
+  return { iso_utc: new Date().toISOString(), time_zone: timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone, formatted };
+}
+function randomInteger(min, max) {
+  const range = max - min + 1;
+  if (!Number.isSafeInteger(min) || !Number.isSafeInteger(max) || min > max) throw new Error('min and max must be safe integers with min ≤ max.');
+  if (range > 0x100000000) throw new Error('The requested random range must contain at most 2^32 integers.');
+  if (range === 0x100000000) return min + crypto.getRandomValues(new Uint32Array(1))[0];
+  const limit = Math.floor(0x100000000 / range) * range;
+  let value;
+  do { value = crypto.getRandomValues(new Uint32Array(1))[0]; } while (value >= limit);
+  return min + (value % range);
+}
+function geolocate(highAccuracy = false, signal) {
+  if (!navigator.geolocation) throw new Error('Geolocation is unavailable in this browser.');
+  return new Promise((resolve, reject) => {
+    let watchId;
+    const cleanup = () => { if (watchId !== undefined) navigator.geolocation.clearWatch(watchId); signal?.removeEventListener('abort', abort); };
+    const abort = () => { cleanup(); reject(new DOMException('Generation stopped.', 'AbortError')); };
+    signal?.addEventListener('abort', abort, { once: true });
+    watchId = navigator.geolocation.watchPosition(position => {
+      cleanup();
+      resolve({ latitude: position.coords.latitude, longitude: position.coords.longitude, accuracy_meters: position.coords.accuracy, captured_at: new Date(position.timestamp).toISOString() });
+    }, error => { cleanup(); reject(new Error(`Geolocation failed: ${error.message}`)); }, { enableHighAccuracy: Boolean(highAccuracy), timeout: 15000, maximumAge: 0 });
+  });
+}
+function validateArguments(schema, args) {
+  if (!isPlainObject(args)) throw new Error('Tool arguments must be an object.');
+  for (const required of schema.required || []) if (!Object.hasOwn(args, required)) throw new Error(`Missing required argument: ${required}`);
+  if (schema.additionalProperties === false) for (const name of Object.keys(args)) if (!Object.hasOwn(schema.properties, name)) throw new Error(`Unknown argument: ${name}`);
+  for (const [name, value] of Object.entries(args)) {
+    const property = schema.properties[name];
+    if (!property) continue;
+    const valid = property.type === 'integer' ? Number.isInteger(value)
+      : property.type === 'number' ? typeof value === 'number' && Number.isFinite(value)
+        : property.type === 'array' ? Array.isArray(value)
+          : property.type === 'object' ? isPlainObject(value)
+            : typeof value === property.type;
+    if (!valid) throw new Error(`${name} must be ${property.type}.`);
+    if (property.enum && !property.enum.includes(value)) throw new Error(`${name} must be one of the allowed values.`);
+  }
+}
+function isPlainObject(value) { return Boolean(value) && typeof value === 'object' && !Array.isArray(value); }

src/webcam-session.js ADDED Viewed

	@@ -0,0 +1,37 @@

+function stopStream(stream) {
+  stream?.getTracks?.().forEach(track => track.stop());
+}
+export class WebcamSession {
+  constructor(acquire) {
+    this.acquire = acquire;
+    this.stream = null;
+    this.pending = null;
+    this.version = 0;
+  }
+  async open(constraints) {
+    if (this.stream) return this.stream;
+    if (this.pending) return this.pending;
+    const version = this.version;
+    const pending = Promise.resolve(this.acquire(constraints)).then(stream => {
+      if (version !== this.version) {
+        stopStream(stream);
+        return null;
+      }
+      this.stream = stream;
+      return stream;
+    }).finally(() => {
+      if (this.pending === pending) this.pending = null;
+    });
+    this.pending = pending;
+    return pending;
+  }
+  close() {
+    this.version += 1;
+    this.pending = null;
+    stopStream(this.stream);
+    this.stream = null;
+  }
+}

test/conversation-preparation.test.js ADDED Viewed

	@@ -0,0 +1,54 @@

+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { prepareConversation } from '../src/engines/conversation-preparation.js';
+test('single-image messages retain the native image then text structure', () => {
+  const prepared = prepareConversation([{
+    role: 'user',
+    content: [
+      { type: 'image', value: 'blob:one' },
+      { type: 'text', value: 'Describe this image.' },
+    ],
+  }]);
+  assert.deepEqual(prepared.imageUrls, ['blob:one']);
+  assert.deepEqual(prepared.messages[0].content, [
+    { type: 'image' },
+    { type: 'text', text: 'Describe this image.' },
+  ]);
+});
+test('multi-image messages add ordered textual boundaries around every image', () => {
+  const prepared = prepareConversation([{
+    role: 'user',
+    content: [
+      { type: 'image', value: 'blob:one' },
+      { type: 'image', value: 'blob:two' },
+      { type: 'image', value: 'blob:three' },
+      { type: 'text', value: 'What is in each image?' },
+    ],
+  }]);
+  assert.deepEqual(prepared.imageUrls, ['blob:one', 'blob:two', 'blob:three']);
+  assert.deepEqual(prepared.messages[0].content, [
+    { type: 'text', text: 'Media-1' },
+    { type: 'image' },
+    { type: 'text', text: '\n' },
+    { type: 'text', text: 'Media-2' },
+    { type: 'image' },
+    { type: 'text', text: '\n' },
+    { type: 'text', text: 'Media-3' },
+    { type: 'image' },
+    { type: 'text', text: '\n' },
+    { type: 'text', text: 'What is in each image?' },
+  ]);
+});
+test('media numbering restarts for each user message while URL order stays global', () => {
+  const prepared = prepareConversation([
+    { role: 'user', content: [{ type: 'image', value: 'blob:a' }, { type: 'image', value: 'blob:b' }, { type: 'text', value: 'Compare.' }] },
+    { role: 'assistant', content: 'Done.' },
+    { role: 'user', content: [{ type: 'image', value: 'blob:c' }, { type: 'image', value: 'blob:d' }, { type: 'text', value: 'Compare these.' }] },
+  ]);
+  assert.deepEqual(prepared.imageUrls, ['blob:a', 'blob:b', 'blob:c', 'blob:d']);
+  assert.equal(prepared.messages[0].content[0].text, 'Media-1');
+  assert.equal(prepared.messages[2].content[0].text, 'Media-1');
+});

test/document-parsing.test.js ADDED Viewed

	@@ -0,0 +1,63 @@

+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { parseDocumentRegions } from '../src/document-parsing.js';
+test('parses document regions across multiple page images', () => {
+  const text = `image_index=0 title [58, 78, 677, 100]
+Stellar engines and Dyson bubbles can be stable
+image_index=0 text [58, 116, 235, 131]
+Colin R. McInnes*
+image_index=1 equation [100, 200, 800, 300]
+E = mc^2`;
+  assert.deepEqual(parseDocumentRegions(text, 2), [
+    { imageId: 0, label: 'title', type: 'box', coordinates: [58, 78, 677, 100], content: 'Stellar engines and Dyson bubbles can be stable' },
+    { imageId: 0, label: 'text', type: 'box', coordinates: [58, 116, 235, 131], content: 'Colin R. McInnes*' },
+    { imageId: 1, label: 'equation', type: 'box', coordinates: [100, 200, 800, 300], content: 'E = mc^2' },
+  ]);
+});
+test('preserves multiline region content', () => {
+  const [region] = parseDocumentRegions('image_index=0 code [0, 0, 500, 500]\nconst x = 1;\nreturn x;', 1);
+  assert.equal(region.content, 'const x = 1;\nreturn x;');
+});
+test('accepts harmless header whitespace', () => {
+  const parsed = parseDocumentRegions(`image_index = 0   title [ 58,78, 677 , 100 ]
+Liquid Foundation Model`, 1);
+  assert.equal(parsed.length, 1);
+  assert.deepEqual(parsed[0].coordinates, [58, 78, 677, 100]);
+});
+test('accepts model-chosen labels and zero-to-one coordinates', () => {
+  const parsed = parseDocumentRegions(`image_index=0 Quoted label / callout [0.318, 0.045, 0.707, 0.067]
+The second image shows the cows in their natural habitat.
+image_index=0 image [202, 78, 797, 486]
+Diagram of Liquid Foundation Model architecture.`, 1);
+  assert.deepEqual(parsed, [
+    { imageId: 0, label: 'Quoted label / callout', type: 'box', coordinates: [318, 45, 707, 67], content: 'The second image shows the cows in their natural habitat.' },
+    { imageId: 0, label: 'image', type: 'box', coordinates: [202, 78, 797, 486], content: 'Diagram of Liquid Foundation Model architecture.' },
+  ]);
+});
+test('keeps complete regions when the final generated region is truncated', () => {
+  const parsed = parseDocumentRegions(`image_index=0 title [58, 78, 677, 100]
+Liquid Foundation Model
+image_index=0 text [58, 116, 530, 155]
+Model architecture description
+image_index=0 table [`, 1);
+  assert.equal(parsed.length, 2);
+  assert.equal(parsed[1].content, 'Model architecture description');
+});
+test('rejects malformed document layouts', () => {
+  assert.equal(parseDocumentRegions('ordinary answer', 1), null);
+  assert.equal(parseDocumentRegions('image_index=1 text [0, 0, 1, 1]\ncontent', 1), null);
+  assert.equal(parseDocumentRegions('image_index=0 text [10, 10, 5, 20]\ncontent', 1), null);
+  assert.equal(parseDocumentRegions('image_index=0 text [0, nope, 1, 1]\ncontent', 1), null);
+  assert.equal(parseDocumentRegions('image_index=0 text [0, 0, 1, 1]', 1), null);
+});

test/grounding.test.js ADDED Viewed

	@@ -0,0 +1,52 @@

+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { parseGroundingResponse } from '../src/grounding.js';
+test('parses normalized boxes and points', () => {
+  assert.deepEqual(parseGroundingResponse(JSON.stringify([
+    { image_id: 0, bbox_2d: [10, 20, 500, 600], label: 'cat' },
+    { image_id: 1, point_2d: [750, 125], label: 'nose' },
+  ]), 2), [
+    { imageId: 0, label: 'cat', type: 'box', coordinates: [10, 20, 500, 600] },
+    { imageId: 1, label: 'nose', type: 'point', coordinates: [750, 125] },
+  ]);
+});
+test('accepts a valid empty grounding response', () => {
+  assert.deepEqual(parseGroundingResponse('[]', 1), []);
+});
+test('renders bare four-number lists as boxes on the first image', () => {
+  assert.deepEqual(parseGroundingResponse('Detected regions: [10, 20, 500, 600] and [600, 100, 900, 800].', 2), [
+    { imageId: 0, label: 'Bounding box', type: 'box', coordinates: [10, 20, 500, 600] },
+    { imageId: 0, label: 'Bounding box 2', type: 'box', coordinates: [600, 100, 900, 800] },
+  ]);
+});
+test('normalizes zero-to-one boxes in structured and bare output', () => {
+  assert.deepEqual(parseGroundingResponse('[{"image_id":0,"label":"cat","bbox_2d":[0.1,0.2,0.8,0.9]}]', 1), [
+    { imageId: 0, label: 'cat', type: 'box', coordinates: [100, 200, 800, 900] },
+  ]);
+  assert.deepEqual(parseGroundingResponse('box: [0.125, 0.25, 0.75, 1]', 1), [
+    { imageId: 0, label: 'Bounding box', type: 'box', coordinates: [125, 250, 750, 1000] },
+  ]);
+});
+test('does not treat fenced or unrelated JSON as grounding', () => {
+  assert.equal(parseGroundingResponse('```json\n[]\n```', 1), null);
+  assert.equal(parseGroundingResponse('{"answer": 4}', 1), null);
+  assert.equal(parseGroundingResponse('[{"image_id":0,"label":"cat","bbox_2d":[0,0,1,1],"score":1}]', 1), null);
+});
+test('rejects invalid image references and coordinates', () => {
+  assert.equal(parseGroundingResponse('[{"image_id":1,"label":"cat","bbox_2d":[0,0,10,10]}]', 1), null);
+  assert.equal(parseGroundingResponse('[{"image_id":0,"label":"cat","point_2d":[1.5,2]}]', 1), null);
+  assert.equal(parseGroundingResponse('[{"image_id":0,"label":"cat","point_2d":[1001,2]}]', 1), null);
+  assert.equal(parseGroundingResponse('[{"image_id":0,"label":"cat","bbox_2d":[20,20,10,30]}]', 1), null);
+});
+test('requires one and only one supported geometry', () => {
+  assert.equal(parseGroundingResponse('[{"image_id":0,"label":"cat"}]', 1), null);
+  assert.equal(parseGroundingResponse('[{"image_id":0,"label":"cat","point_2d":[1,2],"bbox_2d":[0,0,2,3]}]', 1), null);
+  assert.equal(parseGroundingResponse('[{"image_id":0,"label":"","point_2d":[1,2]}]', 1), null);
+});

test/image-input.test.js ADDED Viewed

	@@ -0,0 +1,36 @@

+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { imageFilesFromClipboard, imageFilesFromDataTransfer } from '../src/image-input.js';
+test('extracts one or more image files from clipboard items', () => {
+  const first = { name: 'first.png', type: 'image/png' };
+  const second = { name: 'second.jpg', type: 'image/jpeg' };
+  const files = imageFilesFromClipboard({
+    items: [
+      { kind: 'string', type: 'text/plain', getAsFile: () => null },
+      { kind: 'file', type: 'image/png', getAsFile: () => first },
+      { kind: 'file', type: 'application/pdf', getAsFile: () => ({ type: 'application/pdf' }) },
+      { kind: 'file', type: 'image/jpeg', getAsFile: () => second },
+    ],
+  });
+  assert.deepEqual(files, [first, second]);
+});
+test('falls back to clipboard files and ignores non-images', () => {
+  const image = { name: 'screenshot.webp', type: 'image/webp' };
+  const files = imageFilesFromClipboard({
+    files: [image, { name: 'notes.txt', type: 'text/plain' }],
+  });
+  assert.deepEqual(files, [image]);
+  assert.deepEqual(imageFilesFromClipboard(null), []);
+});
+test('extracts only image files from a drag data transfer', () => {
+  const image = { name: 'photo.png', type: 'image/png' };
+  const files = imageFilesFromDataTransfer({ files: [
+    { name: 'notes.txt', type: 'text/plain' },
+    image,
+  ] });
+  assert.deepEqual(files, [image]);
+  assert.deepEqual(imageFilesFromDataTransfer(null), []);
+});

test/mcp-client.test.js ADDED Viewed

	@@ -0,0 +1,38 @@

+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { compactMcpResult, normalizeMcpTools } from '../src/tools/mcp-client.js';
+import { prepareToolCall } from '../src/tools/tool-registry.js';
+test('normalizes compatible MCP tools for the existing tool loop', () => {
+  const [tool] = normalizeMcpTools([{
+    name: 'search_docs',
+    description: 'Search documentation.',
+    inputSchema: {
+      type: 'object',
+      properties: { query: { type: 'string' } },
+      required: ['query'],
+      additionalProperties: false,
+    },
+  }]);
+  assert.equal(tool.source, 'mcp');
+  assert.equal(tool.enabled, false);
+  tool.enabled = true;
+  const prepared = prepareToolCall({ name: 'search_docs', arguments: { query: 'WebGPU' }, positional: [] }, [tool]);
+  assert.deepEqual(prepared.args, { query: 'WebGPU' });
+});
+test('skips MCP tools with unsupported names or non-object schemas', () => {
+  const tools = normalizeMcpTools([
+    { name: 'bad-name', inputSchema: { type: 'object', properties: {} } },
+    { name: 'primitive', inputSchema: { type: 'string' } },
+    { name: 'valid_tool', inputSchema: { type: 'object', properties: {} } },
+  ]);
+  assert.deepEqual(tools.map(tool => tool.name), ['valid_tool']);
+});
+test('compacts large MCP text results before returning them to the model', () => {
+  const result = compactMcpResult({ content: [{ type: 'text', text: 'x'.repeat(18000) }] });
+  assert.equal(result.truncated, true);
+  assert.equal(result.content[0].text.length, 4000);
+  assert.ok(JSON.stringify(result).length < 4200);
+});

test/model-precision.test.js ADDED Viewed

	@@ -0,0 +1,25 @@

+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { selectEmbeddingPrecision } from '../src/model-precision.js';
+const manifest = {
+  runtime: {
+    dtype: { decoder_model_merged: 'q4', vision_encoder: 'q4', embed_tokens: 'fp32' },
+    externalDataChunks: { 'decoder_model_merged_q4.onnx': 5, 'vision_encoder_q4.onnx': 1 },
+  },
+};
+test('selects FP16 embeddings and their external shard when shader-f16 is available', () => {
+  const selected = selectEmbeddingPrecision(manifest, ['shader-f16']);
+  assert.equal(selected.precision, 'fp16');
+  assert.equal(selected.manifest.runtime.dtype.embed_tokens, 'fp16');
+  assert.equal(selected.manifest.runtime.externalDataChunks['embed_tokens_fp16.onnx'], 1);
+  assert.equal(manifest.runtime.dtype.embed_tokens, 'fp32');
+});
+test('keeps FP32 embeddings when shader-f16 is unavailable', () => {
+  const selected = selectEmbeddingPrecision(manifest, new Set(['timestamp-query']));
+  assert.equal(selected.precision, 'fp32');
+  assert.equal(selected.manifest.runtime.dtype.embed_tokens, 'fp32');
+  assert.equal(selected.manifest.runtime.externalDataChunks['embed_tokens_fp16.onnx'], undefined);
+});

test/tools.test.js ADDED Viewed

	@@ -0,0 +1,106 @@

+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { calculate, executeBuiltin, prepareToolCall, searchRecipeByDish } from '../src/tools/tool-registry.js';
+import { createToolStreamFilter, displayTextFromRaw, parseToolCalls } from '../src/tools/tool-protocol.js';
+test('calculator evaluates arithmetic without JavaScript evaluation', () => {
+  assert.equal(calculate('2 + 3 * (4 - 1)^2'), 29);
+  assert.equal(calculate('1.5e2 / 3'), 50);
+  assert.throws(() => calculate('globalThis.alert(1)'), /Unsupported character/);
+  assert.throws(() => calculate('2 / 0'), /Division by zero/);
+});
+test('calculator supports safe trigonometry for geometry problems', () => {
+  assert.ok(Math.abs(calculate('sin(pi / 2)') - 1) < 1e-12);
+  assert.ok(Math.abs(calculate('10 * tan_deg(30)') - 5.773502691896257) < 1e-12);
+  assert.ok(Math.abs(calculate('sqrt(3^2 + 4^2)') - 5) < 1e-12);
+  assert.ok(Math.abs(calculate('asin_deg(0.5)') - 30) < 1e-12);
+  assert.throws(() => calculate('fetch(1)'), /Unsupported function/);
+  assert.throws(() => calculate('sqrt(-1)'), /finite number/);
+});
+test('native Python-style protocol parses single and multiple calls', () => {
+  const calls = parseToolCalls("before<|tool_call_start|>[calculate(expression='2 + 2'), current_datetime(time_zone='UTC')]<|tool_call_end|>");
+  assert.deepEqual(calls.map(call => call.name), ['calculate', 'current_datetime']);
+  assert.deepEqual(calls[0].arguments, { expression: '2 + 2' });
+  assert.deepEqual(calls[1].arguments, { time_zone: 'UTC' });
+  assert.equal(displayTextFromRaw("Answer<|tool_call_start|>[calculate(expression='1')]<|tool_call_end|><|im_end|>"), 'Answer');
+});
+test('protocol supports positional, primitive, and nested JSON values', () => {
+  const [call] = parseToolCalls('<|tool_call_start|>random_integer(1, max=4)<|tool_call_end|>');
+  assert.deepEqual(call.positional, [1]);
+  assert.deepEqual(call.arguments, { max: 4 });
+  const [nested] = parseToolCalls('<|tool_call_start|>custom(payload={"ok":true,"items":[1,2]}, optional=None)<|tool_call_end|>');
+  assert.deepEqual(nested.arguments, { payload: { ok: true, items: [1, 2] }, optional: null });
+  assert.throws(() => parseToolCalls('<|tool_call_start|>broken(a=1'), /incomplete/);
+});
+test('stream filter suppresses tool syntax even across chunks', () => {
+  let visible = '';
+  const states = [];
+  const filter = createToolStreamFilter(chunk => { visible += chunk; }, {
+    onToolCallStart: () => states.push('start'),
+    onToolCallEnd: () => states.push('end'),
+  });
+  for (const chunk of ['Hello ', '<|tool_', "call_start|>[calculate(expression='2')]<|tool_call_", 'end|>', ' world']) filter.push(chunk);
+  filter.finish();
+  assert.equal(visible, 'Hello  world');
+  assert.deepEqual(states, ['start', 'end']);
+});
+test('tool schemas and arguments are validated', () => {
+  const tool = { id: 'test:lookup_order', source: 'test', enabled: true, name: 'lookup_order', description: 'Look up an order.', parameters: { type: 'object', properties: { order_id: { type: 'string' } }, required: ['order_id'], additionalProperties: false } };
+  const prepared = prepareToolCall({ name: 'lookup_order', arguments: { order_id: 'A-1' }, positional: [] }, [tool]);
+  assert.deepEqual(prepared.args, { order_id: 'A-1' });
+  assert.throws(() => prepareToolCall({ name: 'lookup_order', arguments: {}, positional: [] }, [tool]), /Missing required/);
+  tool.enabled = false;
+  assert.throws(() => prepareToolCall({ name: 'lookup_order', arguments: { order_id: 'A-1' }, positional: [] }, [tool]), /Unknown or disabled/);
+});
+test('datetime and random built-ins reject invalid inputs', async () => {
+  await assert.rejects(executeBuiltin('current_datetime', { time_zone: 'Definitely/Invalid' }), /Invalid IANA time zone/);
+  await assert.rejects(executeBuiltin('random_integer', { min: 5, max: 4 }), /min ≤ max/);
+  for (let index = 0; index < 20; index += 1) {
+    const result = await executeBuiltin('random_integer', { min: -2, max: 2 });
+    assert.ok(result.value >= -2 && result.value <= 2);
+  }
+});
+test('dish recipe search prefers an exact completed-dish name', async () => {
+  const fetcher = async url => {
+    assert.equal(new URL(url).searchParams.get('s'), 'Pad Thai');
+    return {
+      ok: true,
+      status: 200,
+      json: async () => ({ meals: [
+        { idMeal: '2', strMeal: 'Quick Pad Thai', strIngredient1: 'Noodles' },
+        { idMeal: '1', strMeal: 'Pad Thai', strCategory: 'Main', strArea: 'Thai', strIngredient1: 'Rice Noodles', strMeasure1: '200g', strInstructions: 'Cook it.', strSource: 'https://example.com/pad-thai' },
+      ] }),
+    };
+  };
+  const result = await searchRecipeByDish('Pad Thai', undefined, fetcher);
+  assert.equal(result.provider, 'TheMealDB');
+  assert.equal(result.recipes[0].name, 'Pad Thai');
+  assert.deepEqual(result.recipes[0].ingredients, ['200g Rice Noodles']);
+  assert.equal(result.recipes[0].source_url, 'https://example.com/pad-thai');
+});
+test('dish recipe search accepts whole-word title matches and rejects partial false matches', async () => {
+  const response = meals => ({ ok: true, status: 200, json: async () => ({ meals }) });
+  const friedRice = await searchRecipeByDish('fried rice', undefined, async () => response([
+    { idMeal: '1', strMeal: 'Chicken Fried Rice' },
+  ]));
+  assert.equal(friedRice.recipes[0].name, 'Chicken Fried Rice');
+  const falsePartial = await searchRecipeByDish('chicken parm', undefined, async () => response([
+    { idMeal: '2', strMeal: 'Chicken Parmentier' },
+  ]));
+  assert.deepEqual(falsePartial.recipes, []);
+});
+test('dish recipe search validates names and handles no result', async () => {
+  await assert.rejects(searchRecipeByDish('', undefined, async () => {}), /between 1 and 100/);
+  await assert.rejects(searchRecipeByDish('x'.repeat(101), undefined, async () => {}), /between 1 and 100/);
+  const result = await searchRecipeByDish('Caesar Salad', undefined, async () => ({ ok: true, status: 200, json: async () => ({ meals: null }) }));
+  assert.deepEqual(result.recipes, []);
+});

test/webcam-session.test.js ADDED Viewed

	@@ -0,0 +1,33 @@

+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { WebcamSession } from '../src/webcam-session.js';
+function fakeStream() {
+  const track = { stopped: false, stop() { this.stopped = true; } };
+  return { track, getTracks: () => [track] };
+}
+test('reuses one webcam stream across repeated renders and closes every track', async () => {
+  let acquisitions = 0;
+  const stream = fakeStream();
+  const session = new WebcamSession(async () => { acquisitions += 1; return stream; });
+  const [first, second] = await Promise.all([session.open({ video: true }), session.open({ video: true })]);
+  assert.equal(first, stream);
+  assert.equal(second, stream);
+  assert.equal(acquisitions, 1);
+  session.close();
+  assert.equal(stream.track.stopped, true);
+  assert.equal(session.stream, null);
+});
+test('stops a stream that resolves after the webcam was closed', async () => {
+  const stream = fakeStream();
+  let resolveAcquire;
+  const session = new WebcamSession(() => new Promise(resolve => { resolveAcquire = resolve; }));
+  const opening = session.open({ video: true });
+  session.close();
+  resolveAcquire(stream);
+  assert.equal(await opening, null);
+  assert.equal(stream.track.stopped, true);
+  assert.equal(session.stream, null);
+});

vite.config.js ADDED Viewed

	@@ -0,0 +1,13 @@

+import { defineConfig } from 'vite';
+export default defineConfig({
+  server: {
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    },
+  },
+  build: {
+    target: 'es2022',
+  },
+});