Spaces:

LiquidAI
/

LFM2-VL-450M-WebGPU

Running

App Files Files Community

shubeydoo commited on Jan 14

Commit

accf76b

1 Parent(s): 6840ff4

Liquid AI LFM2-VL-450M-WebGPU Demo

Browse files

Files changed (16) hide show

.gitignore +3 -0
Dockerfile +37 -0
README.md +26 -5
assets/liquid-ai.svg +1 -0
config.js +54 -0
index.html +780 -0
infer.js +79 -0
main.js +214 -0
package-lock.json +1994 -0
package.json +18 -0
styles.css +1103 -0
ui.js +273 -0
vite.config.js +27 -0
vl-model.js +974 -0
vl-processor.js +497 -0
webgpu-inference.js +192 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,3 @@

+node_modules/
+dist/
+.claude/

Dockerfile ADDED Viewed

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

+# Build stage
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+# Production stage
+FROM nginx:alpine
+# Copy files
+COPY --from=builder /app/dist /usr/share/nginx/html/
+# Custom nginx config with COEP/COOP/CORP headers
+RUN echo 'server { \
+    listen 7860; \
+    location / { \
+        root /usr/share/nginx/html; \
+        index index.html; \
+        try_files $uri $uri/ /index.html; \
+        add_header Cross-Origin-Opener-Policy same-origin; \
+        add_header Cross-Origin-Embedder-Policy require-corp; \
+        add_header Cross-Origin-Resource-Policy cross-origin; \
+        add_header Cache-Control "no-cache, no-store, must-revalidate"; \
+    } \
+    location ~* \.(js|css|wasm)$ { \
+        root /usr/share/nginx/html; \
+        add_header Cross-Origin-Opener-Policy same-origin; \
+        add_header Cross-Origin-Embedder-Policy require-corp; \
+        add_header Cross-Origin-Resource-Policy cross-origin; \
+        add_header Cache-Control "no-cache, must-revalidate"; \
+    } \
+}' > /etc/nginx/conf.d/default.conf
+EXPOSE 7860

README.md CHANGED Viewed

@@ -1,10 +1,31 @@
 ---
-title: LFM2 VL 450M WebGPU
-emoji: 🐨
-colorFrom: gray
-colorTo: gray
 sdk: docker
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: LFM2-VL-450M WebGPU
+emoji: ⚡️
+colorFrom: purple
+colorTo: blue
 sdk: docker
 pinned: false
+models:
+  - onnx-community/LFM2-VL-450M-ONNX
+  - onnx-community/LFM2-VL-450M
+short_description: In-browser vision-language inference with LFM2-VL-450M
 ---
+# LFM2-VL-450M WebGPU Demo
+In-browser vision-language inference with LFM2-VL-450M, powered by ONNX Runtime and WebGPU.
+Everything runs entirely in your browser with WebGPU acceleration - no data is sent to a server.
+## Features
+- **Live Webcam Captioning**: Stream from your webcam with real-time AI-generated captions
+- **Multiple Precision Options**: Choose between FP16 (~1.05 GB) or FP32 (~2.1 GB)
+- **Browser Caching**: Models are cached locally after first download for faster subsequent loads
+- **Adjustable Resolution**: Configure capture resolution (256-512px) for performance tuning
+## Requirements
+- WebGPU-enabled browser
+- ~1-2 GB memory depending on precision choice
+- Webcam access for live captioning

assets/liquid-ai.svg ADDED Viewed

config.js ADDED Viewed

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

+/**
+ * Configuration for LFM2-VL-450M Demo
+ * WebGPU inference with ONNX models from HuggingFace Hub
+ */
+const HF_BASE = 'https://huggingface.co/onnx-community/LFM2-VL-450M-ONNX/resolve/main';
+// Model configurations
+export const MODELS = {
+  'LFM2-VL-450M-FP16': {
+    id: 'LFM2-VL-450M-FP16',
+    path: HF_BASE,
+    label: 'FP16 (Half Precision)',
+    size: '~1.05 GB',
+    quantization: { decoder: 'fp16', visionEncoder: 'fp16' }
+  },
+  'LFM2-VL-450M-FP32': {
+    id: 'LFM2-VL-450M-FP32',
+    path: HF_BASE,
+    label: 'FP32 (Full Precision)',
+    size: '~2.1 GB',
+    quantization: { decoder: null, visionEncoder: null }
+  }
+};
+// Default settings
+export const DEFAULT_CONFIG = {
+  defaultModel: 'LFM2-VL-450M-FP16',
+  maxNewTokens: 512,
+  temperature: 0.0
+};
+// Get config with optional env overrides
+export function getConfig() {
+  const config = { ...DEFAULT_CONFIG };
+  if (typeof import.meta !== 'undefined' && import.meta.env) {
+    if (import.meta.env.VITE_DEFAULT_MODEL) {
+      config.defaultModel = import.meta.env.VITE_DEFAULT_MODEL;
+    }
+  }
+  return config;
+}
+// Get model configuration by ID
+export function getModelConfig(modelId) {
+  return MODELS[modelId];
+}
+// Get all available models
+export function getAvailableModels() {
+  return Object.values(MODELS);
+}

index.html ADDED Viewed

	@@ -0,0 +1,780 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LFM2-VL-450M Demo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <!-- Loading Screen -->
+    <div id="loading-screen" class="loading-screen">
+        <!-- Animated Background Canvas -->
+        <canvas id="loading-canvas" class="loading-canvas"></canvas>
+        <!-- Vignette Overlay -->
+        <div class="loading-vignette"></div>
+        <!-- Main Content -->
+        <div class="loading-content">
+            <div class="loading-header" style="display: flex; justify-content: center; align-items: center;">
+                <img
+                    src="assets/liquid-ai.svg"
+                    alt="Liquid AI"
+                    class="loading-logo"
+                    style="
+                        width: min(16vw, 128px);
+                        height: min(16vw, 128px);
+                        max-width: 40vw;
+                        max-height: 40vw;
+                        min-width: 64px;
+                        min-height: 64px;
+                        object-fit: contain;
+                        transition: width 0.2s, height 0.2s;
+                    ">
+            </div>
+            <div class="loading-title-section">
+                <h1 class="loading-title">LFM2-VL-450M WebGPU</h1>
+                <p class="loading-subtitle">Vision-Language Model in Your Browser</p>
+            </div>
+            <div class="loading-description">
+                <p>This demo showcases in-browser vision-language inference with LFM2-VL-450M, powered by ONNX Runtime and WebGPU.</p>
+                <p>Everything runs entirely in your browser with WebGPU acceleration, meaning no data is sent to a server.</p>
+            </div>
+            <div class="loading-action-section">
+                <button id="loading-explore-btn" class="loading-explore-button">
+                    <span id="loading-btn-text">Explore</span>
+                    <span id="loading-spinner" class="loading-spinner hidden"></span>
+                    <span id="loading-progress-text" class="loading-progress-text hidden"></span>
+                </button>
+            </div>
+            <div id="loading-error" class="loading-error hidden">
+                <p id="loading-error-text"></p>
+                <button id="loading-retry-btn" class="loading-retry-button">Retry</button>
+            </div>
+        </div>
+    </div>
+    <div class="app-layout">
+        <!-- Top Navigation -->
+        <div class="top-nav">
+            <div class="nav-left">
+                <img src="assets/liquid-ai.svg" alt="Liquid AI" class="nav-logo-img">
+                <a href="https://www.liquid.ai" target="_blank" rel="noopener noreferrer" class="nav-logo-link">Liquid</a>
+            </div>
+            <div class="nav-center">
+                <span class="nav-title">LFM2-VL-450M</span>
+                <span class="nav-subtitle">Stream from your webcam with real-time captions,powered by your own hardware with WebGPU!</span>
+            </div>
+        </div>
+        <!-- Main Content Area -->
+        <div class="container">
+            <!-- Live Caption Mode -->
+            <div id="live-caption-mode" class="mode-container active">
+                <div class="live-caption-content">
+                    <div class="live-caption-video-section">
+                        <div class="live-caption-video-container">
+                            <video id="live-caption-video" autoplay></video>
+                            <!-- Capture Overlay (on video) -->
+                            <div class="capture-overlay">
+                                <button id="start-live-caption-btn" class="control-btn primary">Start</button>
+                                <div class="overlay-field">
+                                    <label class="overlay-label">Input:</label>
+                                    <select id="live-caption-resolution-select" class="control-select">
+                                    <option value="256">256px</option>
+                                    <option value="384">384px</option>
+                                    <option value="448">448px</option>
+                                    <option value="512" selected>512px</option>
+                                    </select>
+                                </div>
+                                <div class="capture-status">
+                                    <span class="status-indicator" id="live-status-indicator"></span>
+                                    <span class="status-text" id="live-status-text">Idle</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="controls-bar">
+                            <!-- Status Row -->
+                            <div class="controls-row status-row">
+                                <span class="model-status" id="model-status"></span>
+                                <!-- Progress Bar (shown during loading) -->
+                                <div class="progress-bar-row" id="loading-progress" style="display: none;">
+                                    <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <!-- Controls Row -->
+                            <div class="controls-row">
+                                <div class="control-group model-group">
+                                    <label class="control-label">Select quantization:</label>
+                                    <select id="model-select" class="control-select model-select">
+                                        <!-- Options populated from config.js -->
+                                    </select>
+                                    <button class="control-btn" id="reload-model-btn" title="Load Model">Load</button>
+                                </div>
+                                <div class="control-group cache-group">
+                                    <span class="cache-info" id="cache-info">0 MB</span>
+                                    <button class="control-btn small" id="clear-cache-btn" disabled title="Clear Cache">Clear</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="live-caption-text-section">
+                        <h3 class="caption-section-title">Captions</h3>
+                        <div class="latest-caption" id="latest-caption">Start capturing to see live captions...</div>
+                        <div class="caption-history" id="caption-history"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // ============================================
+        // LOADING SCREEN
+        // ============================================
+        let loadingScreenVisible = true;
+        let loadingCanvas = null;
+        let loadingCtx = null;
+        let loadingDots = [];
+        let loadingAnimationId = null;
+        function initLoadingScreen() {
+            // Initialize canvas animation
+            loadingCanvas = document.getElementById('loading-canvas');
+            if (!loadingCanvas) return;
+            loadingCtx = loadingCanvas.getContext('2d');
+            setupLoadingCanvas();
+            animateLoadingCanvas();
+            // Set up event listeners
+            setupLoadingScreenListeners();
+            // Handle window resize
+            window.addEventListener('resize', setupLoadingCanvas);
+        }
+        function setupLoadingCanvas() {
+            if (!loadingCanvas || !loadingCtx) return;
+            loadingCanvas.width = window.innerWidth;
+            loadingCanvas.height = window.innerHeight;
+            // Create dots
+            loadingDots = [];
+            const numDots = Math.floor((loadingCanvas.width * loadingCanvas.height) / 15000);
+            for (let i = 0; i < numDots; i++) {
+                loadingDots.push({
+                    x: Math.random() * loadingCanvas.width,
+                    y: Math.random() * loadingCanvas.height,
+                    radius: Math.random() * 1.5 + 0.5,
+                    speed: Math.random() * 0.5 + 0.1,
+                    opacity: Math.random() * 0.5 + 0.2,
+                    blur: Math.random() > 0.7 ? Math.random() * 2 + 1 : 0
+                });
+            }
+        }
+        function animateLoadingCanvas() {
+            if (!loadingCtx || !loadingCanvas) return;
+            loadingCtx.clearRect(0, 0, loadingCanvas.width, loadingCanvas.height);
+            loadingDots.forEach(dot => {
+                // Update position
+                dot.y += dot.speed;
+                if (dot.y > loadingCanvas.height) {
+                    dot.y = 0 - dot.radius;
+                    dot.x = Math.random() * loadingCanvas.width;
+                }
+                // Draw dot
+                loadingCtx.beginPath();
+                loadingCtx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
+                loadingCtx.fillStyle = `rgba(255, 255, 255, ${dot.opacity})`;
+                if (dot.blur > 0) {
+                    loadingCtx.filter = `blur(${dot.blur}px)`;
+                }
+                loadingCtx.fill();
+                loadingCtx.filter = 'none';
+            });
+            loadingAnimationId = requestAnimationFrame(animateLoadingCanvas);
+        }
+        function setupLoadingScreenListeners() {
+            // Explore button
+            const exploreBtn = document.getElementById('loading-explore-btn');
+            if (exploreBtn) {
+                exploreBtn.addEventListener('click', handleLoadingScreenLoad);
+            }
+            // Retry button
+            const retryBtn = document.getElementById('loading-retry-btn');
+            if (retryBtn) {
+                retryBtn.addEventListener('click', handleLoadingScreenLoad);
+            }
+        }
+        async function handleLoadingScreenLoad() {
+            const exploreBtn = document.getElementById('loading-explore-btn');
+            if (!exploreBtn) return;
+            // Simply hide the loading screen - user can load model manually via the input field
+            hideLoadingScreen();
+        }
+        function hideLoadingScreen() {
+            const screen = document.getElementById('loading-screen');
+            if (screen) {
+                screen.classList.add('hidden');
+                loadingScreenVisible = false;
+                // Stop canvas animation
+                if (loadingAnimationId) {
+                    cancelAnimationFrame(loadingAnimationId);
+                    loadingAnimationId = null;
+                }
+                // Clear any URL hash from old bookmarks/links
+                if (window.location.hash) {
+                    history.replaceState(null, '', window.location.pathname);
+                }
+            }
+        }
+        function showLoadingScreen() {
+            const screen = document.getElementById('loading-screen');
+            if (screen) {
+                screen.classList.remove('hidden');
+                loadingScreenVisible = true;
+                // Restart canvas animation if needed
+                if (!loadingAnimationId && loadingCanvas) {
+                    animateLoadingCanvas();
+                }
+            }
+        }
+        function isMobileDevice() {
+            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+                || (navigator.maxTouchPoints > 0 && window.innerWidth < 1024);
+        }
+        function showMobileWarning() {
+            if (!isMobileDevice()) return;
+            const warningDiv = document.createElement('div');
+            warningDiv.className = 'mobile-warning';
+            warningDiv.innerHTML = `
+                <div class="mobile-warning-title">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+                        <line x1="12" y1="9" x2="12" y2="13"></line>
+                        <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                    </svg>
+                    Mobile Device Detected
+                </div>
+                <p>This demo requires a desktop browser. Mobile browsers have memory limits smaller than the model size.</p>
+                <p>Please visit this page on a desktop computer.</p>
+            `;
+            const actionSection = document.querySelector('.loading-action-section');
+            if (actionSection) {
+                actionSection.parentNode.insertBefore(warningDiv, actionSection);
+            }
+            const btnText = document.getElementById('loading-btn-text');
+            if (btnText) {
+                btnText.textContent = 'Try Anyway';
+            }
+        }
+        function isSafariDesktop() {
+            const ua = navigator.userAgent;
+            // Safari has "Safari" in UA but Chrome/Edge also include it
+            // True Safari doesn't have "Chrome" or "Chromium" in UA
+            const isSafari = /Safari/.test(ua) && !/Chrome|Chromium/.test(ua);
+            // Exclude iOS (iPhone, iPad, iPod)
+            const isIOS = /iPhone|iPad|iPod/.test(ua);
+            return isSafari && !isIOS;
+        }
+        function showSafariWarning() {
+            if (!isSafariDesktop()) return;
+            // Add Safari class to body for CSS targeting
+            document.body.classList.add('is-safari');
+            const warningDiv = document.createElement('div');
+            warningDiv.className = 'safari-warning';
+            warningDiv.innerHTML = `
+                <div class="safari-warning-title">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="12" y1="8" x2="12" y2="12"></line>
+                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                    </svg>
+                    Safari requires WebGPU to be explicitly enabled
+                </div>
+                <p>WebGPU must be manually enabled in Safari. Go to <strong>Safari → Settings → Feature Flags </strong> and enable <strong>WebGPU</strong>.</p>
+                <p><a href="https://webkit.org/blog/14879/webgpu-now-available-for-testing-in-safari-technology-preview/" target="_blank" rel="noopener noreferrer">Learn more about WebGPU in Safari</a></p>
+            `;
+            const actionSection = document.querySelector('.loading-action-section');
+            if (actionSection) {
+                actionSection.parentNode.insertBefore(warningDiv, actionSection);
+            }
+        }
+        // Initialize loading screen on page load
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => {
+                initLoadingScreen();
+                showMobileWarning();
+                showSafariWarning();
+            });
+        } else {
+            initLoadingScreen();
+            showMobileWarning();
+            showSafariWarning();
+        }
+        // ============================================
+        // GENERATION CONFIG
+        // ============================================
+        const generationConfig = {
+            max_new_tokens: 128
+        };
+        function getModeConfig() {
+            return {
+                max_new_tokens: generationConfig.max_new_tokens
+            };
+        }
+        // Make getModeConfig available globally for main.js
+        window.getModeConfig = getModeConfig;
+        // ============================================
+        // LIVE CAPTION MODE
+        // ============================================
+        let liveCaptionStream = null;
+        let isCapturing = false;
+        let captureLoopRunning = false;
+        async function startLiveCaption() {
+            try {
+                const video = document.getElementById('live-caption-video');
+                const statusIndicator = document.getElementById('live-status-indicator');
+                const statusText = document.getElementById('live-status-text');
+                const startBtn = document.getElementById('start-live-caption-btn');
+                // Get webcam stream
+                liveCaptionStream = await navigator.mediaDevices.getUserMedia({
+                    video: { width: 1024, height: 1024 }
+                });
+                video.srcObject = liveCaptionStream;
+                // Wait for video to actually start playing before capturing
+                await new Promise((resolve) => {
+                    video.onloadeddata = () => {
+                        video.play();
+                        resolve();
+                    };
+                    // If already loaded, resolve immediately
+                    if (video.readyState >= 2) {
+                        video.play();
+                        resolve();
+                    }
+                });
+                // Wait for camera to warm up (avoid black first frame)
+                await new Promise(resolve => setTimeout(resolve, 500));
+                // Update UI
+                isCapturing = true;
+                statusIndicator.classList.add('active');
+                statusText.textContent = 'Capturing';
+                startBtn.textContent = 'Stop';
+                startBtn.classList.add('stop');
+                // Hide the initial placeholder text
+                const latestCaption = document.getElementById('latest-caption');
+                if (latestCaption) {
+                    latestCaption.style.display = 'none';
+                }
+                // Start capture loop (waits for each generation to complete)
+                captureLoop();
+            } catch (error) {
+                console.error('Error starting live caption:', error);
+                alert('Could not access webcam. Please check permissions.');
+            }
+        }
+        function stopLiveCaption() {
+            const video = document.getElementById('live-caption-video');
+            const statusIndicator = document.getElementById('live-status-indicator');
+            const statusText = document.getElementById('live-status-text');
+            const startBtn = document.getElementById('start-live-caption-btn');
+            // Setting isCapturing to false stops the capture loop
+            isCapturing = false;
+            if (liveCaptionStream) {
+                liveCaptionStream.getTracks().forEach(track => track.stop());
+                liveCaptionStream = null;
+            }
+            if (video) {
+                video.srcObject = null;
+            }
+            if (statusIndicator) statusIndicator.classList.remove('active');
+            if (statusText) statusText.textContent = 'Idle';
+            if (startBtn) {
+                startBtn.textContent = 'Start';
+                startBtn.classList.remove('stop');
+            }
+        }
+        // Expose globally so main.js can stop capture before loading new model
+        window.stopLiveCaption = stopLiveCaption;
+        /**
+         * Async capture loop - waits for each generation to complete before starting next
+         */
+        async function captureLoop() {
+            if (!isCapturing || captureLoopRunning) return;
+            captureLoopRunning = true;
+            while (isCapturing) {
+                await captureLiveCaptionFrame();
+            }
+            captureLoopRunning = false;
+        }
+        async function captureLiveCaptionFrame() {
+            if (!isCapturing) return;
+            const video = document.getElementById('live-caption-video');
+            const statusText = document.getElementById('live-status-text');
+            // Get resolution from dropdown
+            const resolutionSelect = document.getElementById('live-caption-resolution-select');
+            const resolution = parseInt(resolutionSelect?.value || '384', 10);
+            // Create canvas and capture frame
+            const canvas = document.createElement('canvas');
+            canvas.width = resolution;
+            canvas.height = resolution;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(video, 0, 0, resolution, resolution);
+            // Use DataURL - browser's native JPEG encoding is faster than JS ImageData handling
+            const dataURL = canvas.toDataURL('image/jpeg', 0.8);
+            try {
+                const config = getModeConfig();
+                // Wait for webgpuInit to be available
+                if (!window.webgpuInit) {
+                    await new Promise((resolve, reject) => {
+                        if (window.webgpuInit) {
+                            resolve();
+                        } else {
+                            const timeout = setTimeout(() => {
+                                reject(new Error('WebGPU system initialization timeout'));
+                            }, 10000);
+                            window.addEventListener('webgpu-ready', () => {
+                                clearTimeout(timeout);
+                                resolve();
+                            }, { once: true });
+                        }
+                    });
+                }
+                if (!window.webgpuInit.isModelLoaded()) {
+                    if (statusText) statusText.textContent = 'Model not loaded';
+                    return;
+                }
+                // Build message
+                const messages = [{
+                    role: 'user',
+                    content: [
+                        { type: 'image', value: dataURL },
+                        { type: 'text', value: 'Describe what you see in one sentence.' }
+                    ]
+                }];
+                const response = await window.webgpuInit.generate(messages, {
+                    maxNewTokens: config.max_new_tokens
+                });
+                updateLiveCaption(response);
+            } catch (error) {
+                console.error('Error generating caption:', error);
+                if (statusText) statusText.textContent = 'Error';
+            }
+        }
+        function updateLiveCaption(caption) {
+            // Skip empty or whitespace-only captions (happens when model is busy)
+            if (!caption || !caption.trim()) {
+                return;
+            }
+            const captionHistory = document.getElementById('caption-history');
+            // Remove 'latest' class from all existing items
+            const existingItems = captionHistory.querySelectorAll('.caption-history-item');
+            existingItems.forEach(item => item.classList.remove('latest'));
+            // Add to history at the top (most recent first)
+            const timestamp = new Date().toLocaleTimeString();
+            const historyItem = document.createElement('div');
+            historyItem.className = 'caption-history-item latest';
+            historyItem.innerHTML = `
+                <span class="caption-timestamp">${timestamp}</span>
+                <span class="caption-text">${caption.trim()}</span>
+            `;
+            captionHistory.prepend(historyItem);
+            // Keep only the last 7 items, remove oldest from bottom
+            while (captionHistory.children.length > 7) {
+                captionHistory.removeChild(captionHistory.lastChild);
+            }
+            // Apply fading effect: newest (first) is fully visible, older ones fade
+            const items = captionHistory.children;
+            for (let i = 0; i < items.length; i++) {
+                // First item is 1.0, then fade to 0.1 for older items
+                const opacity = Math.max(0.1, 1.0 - (i * 0.2));
+                items[i].style.opacity = opacity;
+            }
+        }
+        // Model state storage - don't restore from localStorage since model needs to be reloaded each session
+        let CURRENT_MODEL = '';
+        function formatModelName(modelId) {
+            // Convert "LFM2-VL-450M-FP16" to "LFM2-VL-450M FP16"
+            if (!modelId || modelId === 'Loading...') return modelId;
+            // Convert trailing "-FP16" or "-FP32" to " FP16" or " FP32"
+            let clean = modelId.replace(/-(FP16|FP32)$/, ' $1');
+            return clean;
+        }
+        function updateModelStatus(modelId = null) {
+            const statusEl = document.getElementById('model-status');
+            if (statusEl) {
+                if (modelId) {
+                    CURRENT_MODEL = modelId;
+                    localStorage.setItem('CURRENT_MODEL', modelId);
+                    statusEl.textContent = formatModelName(modelId);
+                    statusEl.style.color = 'var(--text-primary)';
+                } else {
+                    CURRENT_MODEL = '';
+                    localStorage.removeItem('CURRENT_MODEL');
+                    statusEl.textContent = 'No model loaded';
+                    statusEl.style.color = 'var(--text-secondary)';
+                }
+            }
+        }
+        async function loadSelectedModel(modelId) {
+            const modelSelect = document.getElementById('model-select');
+            const reloadBtn = document.getElementById('reload-model-btn');
+            // Show loading state
+            if (modelSelect) {
+                modelSelect.disabled = true;
+            }
+            if (reloadBtn) {
+                reloadBtn.disabled = true;
+                reloadBtn.style.opacity = '0.6';
+                reloadBtn.style.cursor = 'not-allowed';
+            }
+            // Update status to loading
+            updateModelStatus('Loading...');
+            try {
+                // Wait for webgpuInit to be available
+                if (!window.webgpuInit) {
+                    await new Promise((resolve, reject) => {
+                        if (window.webgpuInit) {
+                            resolve();
+                        } else {
+                            const timeout = setTimeout(() => {
+                                reject(new Error('WebGPU system initialization timeout. Please refresh the page.'));
+                            }, 10000);
+                            window.addEventListener('webgpu-ready', () => {
+                                clearTimeout(timeout);
+                                resolve();
+                            }, { once: true });
+                        }
+                    });
+                }
+                await window.webgpuInit.handleLoadModel();
+                // Store current model (status already updated by handleLoadModel)
+                CURRENT_MODEL = modelId;
+                localStorage.setItem('CURRENT_MODEL', CURRENT_MODEL);
+                // Enable buttons when model loads
+                if (window.webgpuInit && window.webgpuInit.updateButtonStates) {
+                    window.webgpuInit.updateButtonStates(true);
+                }
+            } catch (error) {
+                updateModelStatus(null);
+                alert(`Error loading model: ${error.message}`);
+                console.error('Error loading model:', error);
+            } finally {
+                // Restore UI state
+                if (modelSelect) {
+                    modelSelect.disabled = false;
+                }
+                if (reloadBtn) {
+                    reloadBtn.disabled = false;
+                    reloadBtn.style.opacity = '1';
+                    reloadBtn.style.cursor = 'pointer';
+                }
+            }
+        }
+        // Inference via WebGPU
+        async function generate(messages, options = {}) {
+            const config = getModeConfig();
+            // Wait for webgpuInit to be available
+            if (!window.webgpuInit) {
+                // Wait for webgpu-ready event
+                await new Promise((resolve, reject) => {
+                    if (window.webgpuInit) {
+                        resolve();
+                    } else {
+                        const timeout = setTimeout(() => {
+                            reject(new Error('WebGPU system initialization timeout. Please refresh the page.'));
+                        }, 10000);
+                        window.addEventListener('webgpu-ready', () => {
+                            clearTimeout(timeout);
+                            resolve();
+                        }, { once: true });
+                    }
+                });
+            }
+            if (!window.webgpuInit.isModelLoaded()) {
+                throw new Error('Model not loaded. Please load a model first.');
+            }
+            try {
+                // Generate using WebGPU with streaming support
+                const response = await window.webgpuInit.generate(messages, {
+                    maxNewTokens: config.max_new_tokens,
+                    onToken: options.onToken || ((token) => {
+                        // Default: do nothing if no callback provided
+                        return false;
+                    })
+                });
+                return response;
+            } catch (error) {
+                console.error('Error calling WebGPU inference:', error);
+                throw error;
+            }
+        }
+        // Initialize
+        function init() {
+            setupModeEventListeners();
+            // Clear any URL hash from old bookmarks/links
+            if (window.location.hash) {
+                history.replaceState(null, '', window.location.pathname);
+            }
+        }
+        function setupModeEventListeners() {
+            const reloadModelBtn = document.getElementById('reload-model-btn');
+            if (reloadModelBtn) {
+                reloadModelBtn.addEventListener('click', () => {
+                    const modelSelect = document.getElementById('model-select');
+                    const selectedModelId = modelSelect?.value;
+                    if (!selectedModelId) {
+                        alert('Please select a model first.');
+                        return;
+                    }
+                    loadSelectedModel(selectedModelId);
+                });
+            }
+            // Live Caption controls
+            const liveCaptionBtn = document.getElementById('start-live-caption-btn');
+            if (liveCaptionBtn) {
+                liveCaptionBtn.addEventListener('click', () => {
+                    if (isCapturing) {
+                        stopLiveCaption();
+                    } else {
+                        startLiveCaption();
+                    }
+                });
+            }
+            // Model selector dropdown
+            const modelSelect = document.getElementById('model-select');
+            if (modelSelect) {
+                // Restore last selected model if saved
+                const savedModelId = localStorage.getItem('SELECTED_MODEL_ID');
+                if (savedModelId && modelSelect.querySelector(`option[value="${savedModelId}"]`)) {
+                    modelSelect.value = savedModelId;
+                }
+                // Initialize model status display
+                if (CURRENT_MODEL) {
+                    updateModelStatus(CURRENT_MODEL);
+                } else {
+                    updateModelStatus(null);
+                }
+                // Save selection on change
+                modelSelect.addEventListener('change', (e) => {
+                    localStorage.setItem('SELECTED_MODEL_ID', e.target.value);
+                });
+            }
+        }
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', init);
+        } else {
+            init();
+        }
+    </script>
+    <!-- Load main.js module -->
+    <script type="module" src="./main.js"></script>
+</body>
+</html>

infer.js ADDED Viewed

	@@ -0,0 +1,79 @@

+/**
+ * Inference Router
+ * Routes inference requests to WebGPU
+ */
+import { getWebGPUInference, clearModelCache, getCacheInfo } from './webgpu-inference.js';
+// Re-export cache utilities for UI
+export { clearModelCache, getCacheInfo };
+// Engine instance (lazy initialized)
+let webgpuEngine = null;
+/**
+ * Load a model
+ * @param {string} modelId - Model ID from config
+ * @param {object} options - Loading options
+ */
+export async function loadModel(modelId, options = {}) {
+    if (!webgpuEngine) {
+        webgpuEngine = getWebGPUInference();
+    }
+    await webgpuEngine.loadModel(modelId, options);
+}
+/**
+ * Check if a model is loaded
+ * @returns {boolean}
+ */
+export function isModelLoaded() {
+    return webgpuEngine && webgpuEngine.isModelLoaded();
+}
+/**
+ * Get current model ID
+ * @returns {string|null}
+ */
+export function getCurrentModelId() {
+    return webgpuEngine ? webgpuEngine.getCurrentModelId() : null;
+}
+/**
+ * Generate a response from messages
+ * @param {Array<Object>} messages - Array of message objects with role and content
+ * @param {object} options - Generation options
+ * @param {function} options.onToken - Token callback for streaming
+ * @returns {Promise<string>} Generated response
+ */
+export async function generate(messages, options = {}) {
+    if (!webgpuEngine) {
+        webgpuEngine = getWebGPUInference();
+    }
+    if (!webgpuEngine.isModelLoaded()) {
+        throw new Error('Model not loaded. Please load a model first.');
+    }
+    return await webgpuEngine.generate(messages, options);
+}
+/**
+ * Clear the image embedding cache (call when starting a new conversation)
+ */
+export function clearImageCache() {
+    if (webgpuEngine) {
+        webgpuEngine.clearImageCache();
+    }
+}
+/**
+ * Dispose resources
+ */
+export function dispose() {
+    if (webgpuEngine) {
+        webgpuEngine.dispose();
+        webgpuEngine = null;
+    }
+}

main.js ADDED Viewed

	@@ -0,0 +1,214 @@

+/**
+ * Main application bootstrap
+ * Initializes the WebGPU model loading and wires up event handlers
+ */
+import {
+    setupEventListeners,
+    populateModelSelector,
+    toggleModelSection,
+    updateLoadingProgress,
+    showLoadingProgress,
+    showModelInputWrapper,
+    updateModelStatus,
+    updateWebGPUStatus,
+    setLoadModelButtonEnabled,
+    getSelectedModelId,
+    updateButtonStates,
+    updateCacheInfo,
+    setupClearCacheHandler,
+    setClearCacheButtonText
+} from './ui.js';
+import {
+    generate,
+    loadModel,
+    isModelLoaded,
+    getCurrentModelId,
+    clearImageCache,
+    clearModelCache,
+    getCacheInfo
+} from './infer.js';
+import { getAvailableModels, getModelConfig } from './config.js';
+/**
+ * Handle loading a model
+ */
+async function handleLoadModel() {
+    const modelId = getSelectedModelId();
+    if (!modelId) {
+        updateModelStatus('Please select a model', 'error');
+        return;
+    }
+    // Stop capturing if active (prevents crash)
+    if (window.stopLiveCaption) {
+        window.stopLiveCaption();
+    }
+    // Clear image cache when loading a new model
+    clearImageCache();
+    setLoadModelButtonEnabled(false);
+    showModelInputWrapper(false);
+    showLoadingProgress(true);
+    updateButtonStates(false);  // Disable Start button while loading
+    updateModelStatus('Loading model, will take a few minutes if not cached...', 'loading');
+    try {
+        await loadModel(modelId, {
+            progressCallback: (progress) => {
+                if (progress.status === 'loading') {
+                    const percent = Math.round(progress.progress || 0);
+                    updateLoadingProgress(percent);
+                    // Show file download progress (includes MB downloaded / total)
+                    const statusText = progress.file
+                        ? `Downloading: ${progress.file}`
+                        : 'Loading model...';
+                    updateModelStatus(statusText, 'loading');
+                } else if (progress.status === 'done') {
+                    updateLoadingProgress(100);
+                }
+            }
+        });
+        showLoadingProgress(false);
+        showModelInputWrapper(true);
+        const modelConfig = getModelConfig(modelId);
+        const modelLabel = modelConfig ? `LFM2-VL-450M ${modelConfig.label}` : modelId;
+        updateModelStatus(`Loaded ${modelLabel}`, 'success');
+        updateButtonStates(true);
+        await refreshCacheInfo();
+    } catch (error) {
+        console.error('Model loading error:', error);
+        if (error.message && error.message.includes('already loading')) {
+            updateModelStatus('Model loading in progress...', 'loading');
+            return;
+        }
+        showLoadingProgress(false);
+        showModelInputWrapper(true);
+        updateModelStatus(`Error: ${error.message}`, 'error');
+        updateButtonStates(false);
+    } finally {
+        setLoadModelButtonEnabled(true);
+    }
+}
+/**
+ * Handle reloading the current model
+ */
+async function handleReloadModel() {
+    const currentModelId = getCurrentModelId();
+    if (!currentModelId) {
+        updateModelStatus('No model loaded', 'error');
+        return;
+    }
+    await handleLoadModel();
+}
+/**
+ * Update cache storage info display
+ */
+async function refreshCacheInfo() {
+    const info = await getCacheInfo();
+    updateCacheInfo(info ? info.used : 0);
+}
+/**
+ * Handle clearing the model cache
+ */
+async function handleClearCache() {
+    const info = await getCacheInfo();
+    const usedMB = info ? (info.used / 1024 / 1024).toFixed(0) : 0;
+    const confirmed = confirm(
+        `Delete downloaded model files?\n\n` +
+        `This will free up ~${usedMB} MB of storage.\n` +
+        `Models will be re-downloaded next time you load them.`
+    );
+    if (!confirmed) return;
+    setClearCacheButtonText('Deleting...');
+    await clearModelCache();
+    setClearCacheButtonText('Clear');
+    await refreshCacheInfo();
+    updateModelStatus('Downloaded models deleted', 'success');
+}
+/**
+ * Check WebGPU availability
+ */
+async function checkWebGPU() {
+    if (!navigator.gpu) {
+        updateWebGPUStatus('WebGPU not available. Enable at chrome://flags/#enable-unsafe-webgpu', false);
+        return false;
+    }
+    try {
+        const adapter = await navigator.gpu.requestAdapter();
+        if (!adapter) {
+            updateWebGPUStatus('WebGPU adapter not found', false);
+            return false;
+        }
+        const info = adapter.info || {};
+        const desc = info.description || info.vendor || info.architecture || 'Available';
+        updateWebGPUStatus(`WebGPU: ${desc}`, true);
+        return true;
+    } catch (error) {
+        updateWebGPUStatus(`WebGPU error: ${error.message}`, false);
+        return false;
+    }
+}
+/**
+ * Initialize the application
+ */
+async function init() {
+    // Populate model selector
+    populateModelSelector(getAvailableModels());
+    // Check WebGPU availability
+    await checkWebGPU();
+    // Set up event listeners
+    setupEventListeners(null, handleLoadModel, handleReloadModel);
+    // Set up cache handler
+    setupClearCacheHandler(handleClearCache);
+    // Show model section (WebGPU only)
+    toggleModelSection(true);
+    // Initialize button states (disabled until model loads)
+    updateButtonStates(false);
+    // Initialize cache info display
+    await refreshCacheInfo();
+}
+// Export functions for use by inline script
+window.webgpuInit = {
+    init,
+    handleLoadModel,
+    handleReloadModel,
+    checkWebGPU,
+    populateModelSelector: () => populateModelSelector(getAvailableModels()),
+    toggleModelSection,
+    updateModelStatus,
+    getCurrentModelId,
+    isModelLoaded,
+    getAvailableModels,
+    generate,
+    updateButtonStates
+};
+// Signal that WebGPU module is ready
+window.dispatchEvent(new Event('webgpu-ready'));
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+} else {
+    init();
+}

package-lock.json ADDED Viewed

	@@ -0,0 +1,1994 @@

+{
+  "name": "lfm25-vl-webgpu",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "lfm25-vl-webgpu",
+      "version": "1.0.0",
+      "dependencies": {
+        "@huggingface/transformers": "^3.7.1",
+        "onnxruntime-web": "^1.23.2"
+      },
+      "devDependencies": {
+        "vite": "^5.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
+      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@huggingface/jinja": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@huggingface/jinja/-/jinja-0.5.3.tgz",
+      "integrity": "sha512-asqfZ4GQS0hD876Uw4qiUb7Tr/V5Q+JZuo2L+BtdrD4U40QU58nIRq3ZSgAzJgT874VLjhGVacaYfrdpXtEvtA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@huggingface/transformers": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@huggingface/transformers/-/transformers-3.8.1.tgz",
+      "integrity": "sha512-tsTk4zVjImqdqjS8/AOZg2yNLd1z9S5v+7oUPpXaasDRwEDhB+xnglK1k5cad26lL5/ZIaeREgWWy0bs9y9pPA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@huggingface/jinja": "^0.5.3",
+        "onnxruntime-node": "1.21.0",
+        "onnxruntime-web": "1.22.0-dev.20250409-89f8206ba4",
+        "sharp": "^0.34.1"
+      }
+    },
+    "node_modules/@huggingface/transformers/node_modules/onnxruntime-common": {
+      "version": "1.22.0-dev.20250409-89f8206ba4",
+      "resolved": "https://registry.npmjs.org/onnxruntime-common/-/onnxruntime-common-1.22.0-dev.20250409-89f8206ba4.tgz",
+      "integrity": "sha512-vDJMkfCfb0b1A836rgHj+ORuZf4B4+cc2bASQtpeoJLueuFc5DuYwjIZUBrSvx/fO5IrLjLz+oTrB3pcGlhovQ==",
+      "license": "MIT"
+    },
+    "node_modules/@huggingface/transformers/node_modules/onnxruntime-web": {
+      "version": "1.22.0-dev.20250409-89f8206ba4",
+      "resolved": "https://registry.npmjs.org/onnxruntime-web/-/onnxruntime-web-1.22.0-dev.20250409-89f8206ba4.tgz",
+      "integrity": "sha512-0uS76OPgH0hWCPrFKlL8kYVV7ckM7t/36HfbgoFw6Nd0CZVVbQC4PkrR8mBX8LtNUFZO25IQBqV2Hx2ho3FlbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "flatbuffers": "^25.1.24",
+        "guid-typescript": "^1.0.9",
+        "long": "^5.2.3",
+        "onnxruntime-common": "1.22.0-dev.20250409-89f8206ba4",
+        "platform": "^1.3.6",
+        "protobufjs": "^7.2.4"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.54.0.tgz",
+      "integrity": "sha512-OywsdRHrFvCdvsewAInDKCNyR3laPA2mc9bRYJ6LBp5IyvF3fvXbbNR0bSzHlZVFtn6E0xw2oZlyjg4rKCVcng==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.54.0.tgz",
+      "integrity": "sha512-Skx39Uv+u7H224Af+bDgNinitlmHyQX1K/atIA32JP3JQw6hVODX5tkbi2zof/E69M1qH2UoN3Xdxgs90mmNYw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.54.0.tgz",
+      "integrity": "sha512-k43D4qta/+6Fq+nCDhhv9yP2HdeKeP56QrUUTW7E6PhZP1US6NDqpJj4MY0jBHlJivVJD5P8NxrjuobZBJTCRw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.54.0.tgz",
+      "integrity": "sha512-cOo7biqwkpawslEfox5Vs8/qj83M/aZCSSNIWpVzfU2CYHa2G3P1UN5WF01RdTHSgCkri7XOlTdtk17BezlV3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.54.0.tgz",
+      "integrity": "sha512-miSvuFkmvFbgJ1BevMa4CPCFt5MPGw094knM64W9I0giUIMMmRYcGW/JWZDriaw/k1kOBtsWh1z6nIFV1vPNtA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.54.0.tgz",
+      "integrity": "sha512-KGXIs55+b/ZfZsq9aR026tmr/+7tq6VG6MsnrvF4H8VhwflTIuYh+LFUlIsRdQSgrgmtM3fVATzEAj4hBQlaqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.54.0.tgz",
+      "integrity": "sha512-EHMUcDwhtdRGlXZsGSIuXSYwD5kOT9NVnx9sqzYiwAc91wfYOE1g1djOEDseZJKKqtHAHGwnGPQu3kytmfaXLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.54.0.tgz",
+      "integrity": "sha512-+pBrqEjaakN2ySv5RVrj/qLytYhPKEUwk+e3SFU5jTLHIcAtqh2rLrd/OkbNuHJpsBgxsD8ccJt5ga/SeG0JmA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.54.0.tgz",
+      "integrity": "sha512-NSqc7rE9wuUaRBsBp5ckQ5CVz5aIRKCwsoa6WMF7G01sX3/qHUw/z4pv+D+ahL1EIKy6Enpcnz1RY8pf7bjwng==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.54.0.tgz",
+      "integrity": "sha512-gr5vDbg3Bakga5kbdpqx81m2n9IX8M6gIMlQQIXiLTNeQW6CucvuInJ91EuCJ/JYvc+rcLLsDFcfAD1K7fMofg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.54.0.tgz",
+      "integrity": "sha512-gsrtB1NA3ZYj2vq0Rzkylo9ylCtW/PhpLEivlgWe0bpgtX5+9j9EZa0wtZiCjgu6zmSeZWyI/e2YRX1URozpIw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.54.0.tgz",
+      "integrity": "sha512-y3qNOfTBStmFNq+t4s7Tmc9hW2ENtPg8FeUD/VShI7rKxNW7O4fFeaYbMsd3tpFlIg1Q8IapFgy7Q9i2BqeBvA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.54.0.tgz",
+      "integrity": "sha512-89sepv7h2lIVPsFma8iwmccN7Yjjtgz0Rj/Ou6fEqg3HDhpCa+Et+YSufy27i6b0Wav69Qv4WBNl3Rs6pwhebQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.54.0.tgz",
+      "integrity": "sha512-ZcU77ieh0M2Q8Ur7D5X7KvK+UxbXeDHwiOt/CPSBTI1fBmeDMivW0dPkdqkT4rOgDjrDDBUed9x4EgraIKoR2A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.54.0.tgz",
+      "integrity": "sha512-2AdWy5RdDF5+4YfG/YesGDDtbyJlC9LHmL6rZw6FurBJ5n4vFGupsOBGfwMRjBYH7qRQowT8D/U4LoSvVwOhSQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.54.0.tgz",
+      "integrity": "sha512-WGt5J8Ij/rvyqpFexxk3ffKqqbLf9AqrTBbWDk7ApGUzaIs6V+s2s84kAxklFwmMF/vBNGrVdYgbblCOFFezMQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.54.0.tgz",
+      "integrity": "sha512-JzQmb38ATzHjxlPHuTH6tE7ojnMKM2kYNzt44LO/jJi8BpceEC8QuXYA908n8r3CNuG/B3BV8VR3Hi1rYtmPiw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.54.0.tgz",
+      "integrity": "sha512-huT3fd0iC7jigGh7n3q/+lfPcXxBi+om/Rs3yiFxjvSxbSB6aohDFXbWvlspaqjeOh+hx7DDHS+5Es5qRkWkZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.54.0.tgz",
+      "integrity": "sha512-c2V0W1bsKIKfbLMBu/WGBz6Yci8nJ/ZJdheE0EwB73N3MvHYKiKGs3mVilX4Gs70eGeDaMqEob25Tw2Gb9Nqyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.54.0.tgz",
+      "integrity": "sha512-woEHgqQqDCkAzrDhvDipnSirm5vxUXtSKDYTVpZG3nUdW/VVB5VdCYA2iReSj/u3yCZzXID4kuKG7OynPnB3WQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.54.0.tgz",
+      "integrity": "sha512-dzAc53LOuFvHwbCEOS0rPbXp6SIhAf2txMP5p6mGyOXXw5mWY8NGGbPMPrs4P1WItkfApDathBj/NzMLUZ9rtQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.54.0.tgz",
+      "integrity": "sha512-hYT5d3YNdSh3mbCU1gwQyPgQd3T2ne0A3KG8KSBdav5TiBg6eInVmV+TeR5uHufiIgSFg0XsOWGW5/RhNcSvPg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "25.0.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.3.tgz",
+      "integrity": "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/boolean": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
+      "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "license": "MIT"
+    },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "license": "MIT"
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es6-error": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
+      "license": "MIT"
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flatbuffers": {
+      "version": "25.9.23",
+      "resolved": "https://registry.npmjs.org/flatbuffers/-/flatbuffers-25.9.23.tgz",
+      "integrity": "sha512-MI1qs7Lo4Syw0EOzUl0xjs2lsoeqFku44KpngfIduHBYvzm8h2+7K8YMQh1JtVVVrUvhLpNwqVi4DERegUJhPQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/global-agent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-agent/-/global-agent-3.0.0.tgz",
+      "integrity": "sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "boolean": "^3.0.1",
+        "es6-error": "^4.1.1",
+        "matcher": "^3.0.0",
+        "roarr": "^2.15.3",
+        "semver": "^7.3.2",
+        "serialize-error": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=10.0"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/guid-typescript": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/guid-typescript/-/guid-typescript-1.0.9.tgz",
+      "integrity": "sha512-Y8T4vYhEfwJOTbouREvG+3XDsjr8E3kIr7uf+JZ0BYloFsttiHU0WfvANVsR7TxNUJa/WpCnw/Ino/p+DeBhBQ==",
+      "license": "ISC"
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "license": "ISC"
+    },
+    "node_modules/long": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
+      "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/matcher": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
+      "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==",
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/onnxruntime-common": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/onnxruntime-common/-/onnxruntime-common-1.21.0.tgz",
+      "integrity": "sha512-Q632iLLrtCAVOTO65dh2+mNbQir/QNTVBG3h/QdZBpns7mZ0RYbLRBgGABPbpU9351AgYy7SJf1WaeVwMrBFPQ==",
+      "license": "MIT"
+    },
+    "node_modules/onnxruntime-node": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/onnxruntime-node/-/onnxruntime-node-1.21.0.tgz",
+      "integrity": "sha512-NeaCX6WW2L8cRCSqy3bInlo5ojjQqu2fD3D+9W5qb5irwxhEyWKXeH2vZ8W9r6VxaMPUan+4/7NDwZMtouZxEw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "os": [
+        "win32",
+        "darwin",
+        "linux"
+      ],
+      "dependencies": {
+        "global-agent": "^3.0.0",
+        "onnxruntime-common": "1.21.0",
+        "tar": "^7.0.1"
+      }
+    },
+    "node_modules/onnxruntime-web": {
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/onnxruntime-web/-/onnxruntime-web-1.23.2.tgz",
+      "integrity": "sha512-T09JUtMn+CZLk3mFwqiH0lgQf+4S7+oYHHtk6uhaYAAJI95bTcKi5bOOZYwORXfS/RLZCjDDEXGWIuOCAFlEjg==",
+      "license": "MIT",
+      "dependencies": {
+        "flatbuffers": "^25.1.24",
+        "guid-typescript": "^1.0.9",
+        "long": "^5.2.3",
+        "onnxruntime-common": "1.23.2",
+        "platform": "^1.3.6",
+        "protobufjs": "^7.2.4"
+      }
+    },
+    "node_modules/onnxruntime-web/node_modules/onnxruntime-common": {
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/onnxruntime-common/-/onnxruntime-common-1.23.2.tgz",
+      "integrity": "sha512-5LFsC9Dukzp2WV6kNHYLNzp8sT6V02IubLCbzw2Xd6X5GOlr65gAX6xiJwyi2URJol/s71gaQLC5F2C25AAR2w==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/platform": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz",
+      "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==",
+      "license": "MIT"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/protobufjs": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",
+      "integrity": "sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg==",
+      "hasInstallScript": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/node": ">=13.7.0",
+        "long": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/roarr": {
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/roarr/-/roarr-2.15.4.tgz",
+      "integrity": "sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "boolean": "^3.0.1",
+        "detect-node": "^2.0.4",
+        "globalthis": "^1.0.1",
+        "json-stringify-safe": "^5.0.1",
+        "semver-compare": "^1.0.0",
+        "sprintf-js": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
+      "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.54.0",
+        "@rollup/rollup-android-arm64": "4.54.0",
+        "@rollup/rollup-darwin-arm64": "4.54.0",
+        "@rollup/rollup-darwin-x64": "4.54.0",
+        "@rollup/rollup-freebsd-arm64": "4.54.0",
+        "@rollup/rollup-freebsd-x64": "4.54.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.54.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.54.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.54.0",
+        "@rollup/rollup-linux-arm64-musl": "4.54.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.54.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.54.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.54.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.54.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.54.0",
+        "@rollup/rollup-linux-x64-gnu": "4.54.0",
+        "@rollup/rollup-linux-x64-musl": "4.54.0",
+        "@rollup/rollup-openharmony-arm64": "4.54.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.54.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.54.0",
+        "@rollup/rollup-win32-x64-gnu": "4.54.0",
+        "@rollup/rollup-win32-x64-msvc": "4.54.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
+      "license": "MIT"
+    },
+    "node_modules/serialize-error": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-7.0.1.tgz",
+      "integrity": "sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/tar": {
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.2.tgz",
+      "integrity": "sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/type-fest": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}

package.json ADDED Viewed

	@@ -0,0 +1,18 @@

+{
+  "name": "lfm25-vl-webgpu",
+  "version": "1.0.0",
+  "description": "LFM2.5-VL Vision-Language Demo with WebGPU",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@huggingface/transformers": "^3.7.1",
+    "onnxruntime-web": "^1.23.2"
+  },
+  "devDependencies": {
+    "vite": "^5.4.0"
+  }
+}

styles.css ADDED Viewed

	@@ -0,0 +1,1103 @@

+/* Brand color system for VLM Demo */
+:root {
+    /* Base brand colors */
+    --white: rgb(255, 255, 255);
+    --black: rgb(0, 0, 0);
+    --light-purple: rgb(205, 130, 240);
+    --purple: rgb(85, 5, 75);
+    --orange: rgb(255, 95, 30);
+    /* Alpha variations */
+    --white-70: rgba(255, 255, 255, 0.7);
+    --white-50: rgba(255, 255, 255, 0.5);
+    --white-30: rgba(255, 255, 255, 0.3);
+    --white-10: rgba(255, 255, 255, 0.1);
+    --black-70: rgba(0, 0, 0, 0.7);
+    --black-50: rgba(0, 0, 0, 0.5);
+    --black-30: rgba(0, 0, 0, 0.3);
+    --black-10: rgba(0, 0, 0, 0.1);
+    --light-purple-70: rgba(205, 130, 240, 0.7);
+    --light-purple-50: rgba(205, 130, 240, 0.5);
+    --light-purple-30: rgba(205, 130, 240, 0.3);
+    --light-purple-10: rgba(205, 130, 240, 0.1);
+    --purple-70: rgba(85, 5, 75, 0.7);
+    --purple-50: rgba(85, 5, 75, 0.5);
+    --purple-30: rgba(85, 5, 75, 0.3);
+    --purple-10: rgba(85, 5, 75, 0.1);
+    --orange-70: rgba(255, 95, 30, 0.7);
+    --orange-50: rgba(255, 95, 30, 0.5);
+    --orange-30: rgba(255, 95, 30, 0.3);
+    --orange-10: rgba(255, 95, 30, 0.1);
+    /* Border style controls - change these to customize all dividers */
+    --border-style: solid; /* Options: solid, dashed, dotted */
+    /* --border-width: 1px; */
+    --border-width: 2px;
+    --dash-length: 5px; /* Only applies when border-style is dashed */
+    /* Semantic color assignments */
+    --bg-primary: var(--black);
+    --bg-secondary: var(--black-70);
+    --bg-tertiary: var(--black-50);
+    --text-primary: var(--white);
+    --text-secondary: var(--white-70);
+    /* --border-color: var(--white-30); */
+    --border-color: var(--light-purple-30);
+    --accent-primary: var(--purple);
+    --accent-secondary: var(--light-purple);
+    --accent-hover: var(--light-purple);
+    --message-user-bg: var(--purple);
+    --message-assistant-bg: var(--black-70);
+    --input-bg: var(--black-30);
+    --input-border: var(--light-purple-30);
+    --input-focus: var(--light-purple);
+}
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+body {
+    font-family: 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    padding: 0;
+    margin: 0;
+    min-height: 100vh;
+}
+.app-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+}
+/* Top Navigation Bar */
+.top-nav {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--bg-secondary);
+    border-bottom: var(--border-width) var(--border-style) var(--border-color);
+    padding: 24px 24px;
+}
+.nav-left {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+    z-index: 1;
+}
+.nav-center {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+}
+.nav-title {
+    font-size: 22px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+.nav-subtitle {
+    font-size: 16px;
+    color: var(--text-secondary);
+    text-align: center;
+}
+.nav-logo-img {
+    height: 24px;
+    width: auto;
+}
+.nav-logo-link {
+    font-size: 28px;
+    font-weight: 600;
+    color: var(--text-primary);
+    text-decoration: none;
+    transition: color 0.2s ease;
+    display: inline-block;
+    line-height: 1;
+}
+.nav-logo-link:hover {
+    color: var(--light-purple);
+}
+.model-status {
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+.loading-progress {
+    width: 100%;
+    max-width: 300px;
+    margin: 8px 0;
+}
+.progress-bar {
+    width: 100%;
+    height: 6px;
+    background: var(--white-10);
+    border-radius: 3px;
+    overflow: hidden;
+}
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--light-purple), var(--orange));
+    border-radius: 3px;
+    transition: width 0.3s ease;
+}
+.progress-text {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-top: 4px;
+    text-align: center;
+}
+.model-input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+}
+.model-input {
+    flex: 1;
+    padding: 6px 12px;
+    background-color: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: 6px;
+    font-size: 13px;
+    color: var(--text-primary);
+    font-family: inherit;
+    min-width: 0;
+}
+select.model-input {
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    padding-right: 30px;
+}
+select.model-input option {
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+}
+.model-input:focus {
+    outline: none;
+    border-color: var(--input-focus);
+    box-shadow: 0 0 0 3px var(--light-purple-10);
+}
+.model-input:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+.cache-info {
+    font-size: 12px;
+    color: var(--text-secondary);
+    white-space: nowrap;
+}
+.container {
+    flex: 1;
+    background-color: var(--bg-primary);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-height: 0;
+}
+.mode-container {
+    display: none;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+.mode-container.active {
+    display: flex;
+}
+/* Live Caption Mode Styles */
+#live-caption-mode.active {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    padding: 32px;
+    gap: 24px;
+    background-color: var(--bg-primary);
+}
+.live-caption-content {
+    flex: 1;
+    display: flex;
+    gap: 24px;
+    min-height: 0;
+}
+.live-caption-video-section {
+    flex: 2;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 16px;
+    min-width: 0;
+}
+/* Safari: aspect-ratio on container causes incorrect width calculation */
+.is-safari .live-caption-video-container {
+    aspect-ratio: auto;
+    width: 100%;
+}
+.live-caption-video-container {
+    position: relative;
+    aspect-ratio: 1;
+    height: 100%;
+    max-height: calc(100vh - 220px);
+    border: 2px solid var(--light-purple-30);
+    border-radius: 12px;
+    background-color: var(--black-50);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+#live-caption-video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    background-color: var(--black);
+    transform: scaleX(-1); /* Mirror the video horizontally */
+}
+/* Capture Overlay (on video) */
+.capture-overlay {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 8px;
+    padding: 10px 12px;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(8px);
+    border-radius: 8px;
+    z-index: 10;
+    min-width: 100px;
+}
+.capture-overlay .control-btn {
+    padding: 8px 16px;
+    font-size: 14px;
+    width: 100%;
+}
+.capture-overlay .control-select {
+    padding: 6px 10px;
+    padding-right: 24px;
+    font-size: 14px;
+    background-position: right 6px center;
+}
+.overlay-field {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.overlay-label {
+    font-size: 14px;
+    color: var(--white-70);
+    white-space: nowrap;
+}
+.capture-status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+.capture-overlay .status-text {
+    font-size: 14px;
+    color: var(--white-70);
+}
+/* Controls Bar */
+.controls-bar {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 12px 16px;
+    background-color: var(--black-50);
+    border: 1px solid var(--light-purple-30);
+    border-radius: 12px;
+}
+.controls-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+.controls-row.status-row {
+    gap: 12px;
+}
+.control-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.control-label {
+    font-size: 13px;
+    color: var(--text-secondary);
+    white-space: nowrap;
+}
+.control-btn {
+    padding: 8px 16px;
+    background-color: var(--light-purple-30);
+    border: 1px solid var(--light-purple-50);
+    border-radius: 6px;
+    color: var(--text-primary);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+}
+.control-btn:hover:not(:disabled) {
+    background-color: var(--light-purple-50);
+    border-color: var(--light-purple);
+}
+.control-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.control-btn.primary {
+    background: linear-gradient(135deg, var(--purple) 0%, var(--light-purple) 100%);
+    border: none;
+    color: white;
+    padding: 8px 20px;
+}
+.control-btn.primary:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px var(--purple-50);
+}
+.control-btn.primary.stop {
+    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-70) 100%);
+}
+.control-btn.small {
+    padding: 6px 12px;
+    font-size: 12px;
+}
+.control-select {
+    padding: 8px 12px;
+    padding-right: 28px;
+    background-color: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: 6px;
+    color: var(--text-primary);
+    font-size: 13px;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+}
+.control-select:focus {
+    outline: none;
+    border-color: var(--input-focus);
+}
+.control-select option {
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+}
+.control-select.model-select {
+    min-width: 140px;
+}
+.status-text {
+    font-size: 13px;
+    color: var(--text-secondary);
+    min-width: 40px;
+}
+/* Progress Bar (inline in status row) */
+.progress-bar-row {
+    flex: 1;
+    max-width: 200px;
+    height: 4px;
+    background: var(--white-10);
+    border-radius: 2px;
+    overflow: hidden;
+}
+.progress-bar-row .progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--light-purple), var(--orange));
+    border-radius: 2px;
+    transition: width 0.3s ease;
+}
+/* Indeterminate progress animation for large downloads */
+.progress-bar-row.indeterminate .progress-fill {
+    width: 30% !important;
+    animation: indeterminate 1.5s ease-in-out infinite;
+}
+@keyframes indeterminate {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(400%); }
+}
+.status-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--text-secondary);
+}
+.status-indicator.active {
+    background-color: var(--light-purple);
+    box-shadow: 0 0 8px var(--light-purple);
+    animation: pulse 2s infinite;
+}
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+.live-caption-text-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 0;
+    padding: 20px;
+    background-color: var(--black-50);
+    border: 1px solid var(--light-purple-30);
+    border-radius: 12px;
+}
+.caption-section-title {
+    font-size: 22px;
+    font-weight: 600;
+    color: var(--text-primary);
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--light-purple-30);
+}
+.latest-caption {
+    font-size: 20px;
+    font-weight: 500;
+    color: var(--white);
+    line-height: 1.4;
+    padding: 12px;
+    background-color: var(--black-30);
+    border-radius: 8px;
+    border-left: 3px solid var(--light-purple);
+}
+.caption-history {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow-y: auto;
+}
+.caption-history-item {
+    display: flex;
+    gap: 12px;
+    padding: 12px 16px;
+    background-color: var(--black-30);
+    border-radius: 8px;
+    border: 1px solid var(--light-purple-30);
+    border-left: 3px solid transparent;
+    transition: opacity 0.3s ease, border-color 0.3s ease;
+}
+.caption-history-item.latest {
+    border-left-color: var(--light-purple);
+    background-color: var(--black-50);
+}
+.caption-timestamp {
+    font-size: 11px;
+    color: var(--text-secondary);
+    flex-shrink: 0;
+    font-family: 'JetBrains Mono', monospace;
+    opacity: 0.7;
+}
+.caption-text {
+    font-size: 14px;
+    color: var(--text-primary);
+    line-height: 1.4;
+}
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .live-caption-content {
+        flex-direction: column;
+    }
+    .live-caption-video-section,
+    .live-caption-text-section {
+        flex: none;
+        width: 100%;
+    }
+    .live-caption-text-section {
+        max-height: 300px;
+    }
+}
+@media (max-width: 768px) {
+    .top-nav {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+        padding: 12px 16px;
+    }
+    .nav-left,
+    .nav-center {
+        width: 100%;
+    }
+    .nav-center {
+        position: static;
+        transform: none;
+        align-items: flex-start;
+    }
+    .nav-subtitle {
+        text-align: left;
+        font-size: 14px;
+    }
+    .model-status {
+        max-width: 100%;
+    }
+    .model-input-wrapper {
+        width: 100%;
+    }
+    #live-caption-mode.active {
+        padding: 16px;
+        gap: 16px;
+    }
+    .live-caption-video-container {
+        min-height: 200px;
+    }
+    .live-caption-text-section {
+        padding: 16px;
+    }
+    .latest-caption {
+        font-size: 20px;
+        padding: 12px;
+    }
+    /* Controls bar mobile layout */
+    .controls-bar {
+        padding: 12px;
+    }
+    .controls-row {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 12px;
+    }
+    .control-group {
+        flex-wrap: wrap;
+        width: 100%;
+    }
+    .control-group.model-group {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+    }
+    .control-group.model-group .control-label {
+        margin-bottom: 4px;
+    }
+    .control-group.model-group .control-select {
+        width: 100%;
+        min-width: auto;
+    }
+    .control-group.model-group .control-btn {
+        width: 100%;
+        padding: 12px 16px;
+    }
+    .control-group.cache-group {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+    /* Allow scrolling on mobile */
+    .app-layout {
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .container {
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    #live-caption-mode.active {
+        overflow-y: auto;
+        min-height: auto;
+        height: auto;
+    }
+    .live-caption-content {
+        min-height: auto;
+    }
+    .live-caption-video-section {
+        flex-shrink: 0;
+    }
+}
+/* Smooth transitions */
+.mode-container {
+    transition: opacity 0.2s ease;
+}
+/* Scrollbar styling for webkit browsers */
+.caption-history::-webkit-scrollbar {
+    width: 6px;
+}
+.caption-history::-webkit-scrollbar-track {
+    background: var(--black-30);
+}
+.caption-history::-webkit-scrollbar-thumb {
+    background: var(--light-purple-50);
+    border-radius: 3px;
+}
+.caption-history::-webkit-scrollbar-thumb:hover {
+    background: var(--light-purple);
+}
+/* Loading states */
+@keyframes shimmer {
+    0% {
+        background-position: -1000px 0;
+    }
+    100% {
+        background-position: 1000px 0;
+    }
+}
+.loading {
+    background: linear-gradient(
+        90deg,
+        var(--bg-tertiary) 0%,
+        var(--bg-secondary) 50%,
+        var(--bg-tertiary) 100%
+    );
+    background-size: 1000px 100%;
+    animation: shimmer 2s infinite;
+}
+/* Focus visible for accessibility */
+button:focus-visible,
+input:focus-visible {
+    outline: 2px solid var(--light-purple);
+    outline-offset: 2px;
+}
+/* Ensure proper text rendering */
+body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+/* High contrast improvements */
+@media (prefers-contrast: high) {
+    button:not(:disabled) {
+        border: 2px solid var(--light-purple);
+    }
+}
+/* ===================================
+   LOADING SCREEN / WELCOME PAGE
+   =================================== */
+   .loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--black);
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.loading-screen.hidden {
+    display: none;
+}
+.loading-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+.loading-vignette {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
+    z-index: 2;
+}
+.loading-content {
+    position: relative;
+    z-index: 3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    max-width: 800px;
+    width: 100%;
+    text-align: center;
+    color: var(--white);
+    margin: auto;
+}
+.loading-header {
+    margin-bottom: 2rem;
+}
+.loading-logo {
+    height: 60px;
+    width: auto;
+    margin-bottom: 1rem;
+}
+.loading-title-section {
+    margin-bottom: 2rem;
+}
+.loading-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--white);
+    margin: 0 0 0.5rem 0;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+.loading-subtitle {
+    font-size: 1.25rem;
+    color: var(--white-70);
+    margin: 0;
+    font-weight: 400;
+}
+.loading-description {
+    margin-bottom: 3rem;
+    max-width: 600px;
+}
+.loading-description p {
+    font-size: 1rem;
+    color: var(--white-70);
+    line-height: 1.6;
+    margin: 0 0 1rem 0;
+}
+.loading-description p:last-child {
+    margin-bottom: 0;
+}
+.loading-action-section {
+    margin-bottom: 2rem;
+}
+.loading-explore-button {
+    padding: 16px 48px;
+    background: linear-gradient(135deg, var(--purple) 0%, var(--light-purple) 100%);
+    color: var(--white);
+    border: none;
+    border-radius: 12px;
+    font-size: 1.125rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 16px var(--purple-50);
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 200px;
+    justify-content: center;
+}
+.loading-explore-button:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 24px var(--purple-70);
+    background: linear-gradient(135deg, var(--light-purple) 0%, var(--purple) 100%);
+}
+.loading-explore-button:active:not(:disabled) {
+    transform: translateY(0);
+}
+.loading-explore-button:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+.loading-spinner {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid var(--white-30);
+    border-top-color: var(--white);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+.loading-progress-text {
+    font-size: 0.875rem;
+    color: var(--white-70);
+    font-weight: 500;
+}
+.loading-error {
+    margin-top: 2rem;
+    padding: 1.5rem;
+    background-color: var(--black-70);
+    border: 1px solid var(--orange-50);
+    border-radius: 8px;
+    max-width: 500px;
+}
+.loading-error p {
+    color: var(--orange);
+    margin: 0 0 1rem 0;
+    font-size: 0.95rem;
+}
+.loading-retry-button {
+    padding: 10px 24px;
+    background-color: var(--orange);
+    color: var(--white);
+    border: none;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+.loading-retry-button:hover {
+    background-color: var(--orange-70);
+    transform: translateY(-1px);
+}
+.hidden {
+    display: none !important;
+}
+@media (max-width: 768px) {
+    .loading-screen {
+        align-items: flex-start;
+    }
+    .loading-content {
+        padding: 2rem 1.5rem;
+        min-height: 100%;
+        justify-content: flex-start;
+        padding-top: 3rem;
+    }
+    .loading-title {
+        font-size: 1.75rem;
+    }
+    .loading-subtitle {
+        font-size: 1rem;
+    }
+    .loading-description p {
+        font-size: 0.9rem;
+    }
+    .loading-explore-button {
+        padding: 14px 36px;
+        font-size: 1rem;
+        min-width: 180px;
+    }
+}
+/* Mobile Warning */
+.mobile-warning {
+    margin-bottom: 1.5rem;
+    padding: 1rem 1.5rem;
+    background-color: rgba(255, 95, 30, 0.15);
+    border: 1px solid var(--orange-50);
+    border-radius: 8px;
+    max-width: 400px;
+}
+.mobile-warning-title {
+    color: var(--orange);
+    font-weight: 600;
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+.mobile-warning-title svg {
+    flex-shrink: 0;
+}
+.mobile-warning p {
+    color: var(--white-70);
+    font-size: 0.85rem;
+    line-height: 1.5;
+    margin: 0 0 0.5rem 0;
+    text-align: center;
+}
+.mobile-warning p:last-child {
+    margin-bottom: 0;
+}
+/* Safari Warning */
+.safari-warning {
+    margin-bottom: 1.5rem;
+    padding: 1rem 1.5rem;
+    background-color: rgba(205, 130, 240, 0.15);
+    border: 1px solid var(--light-purple-50);
+    border-radius: 8px;
+    max-width: 500px;
+}
+.safari-warning-title {
+    color: var(--light-purple);
+    font-weight: 600;
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+.safari-warning-title svg {
+    flex-shrink: 0;
+}
+.safari-warning p {
+    color: var(--white-70);
+    font-size: 0.85rem;
+    line-height: 1.5;
+    margin: 0 0 0.5rem 0;
+    text-align: center;
+}
+.safari-warning p:last-child {
+    margin-bottom: 0;
+}
+.safari-warning a {
+    color: var(--light-purple);
+    text-decoration: underline;
+}
+.safari-warning a:hover {
+    color: var(--white);
+}

ui.js ADDED Viewed

	@@ -0,0 +1,273 @@

+/**
+ * UI rendering and DOM manipulation
+ */
+// WebGPU/Model control getters
+function getModelSelect() {
+    return document.getElementById('model-select');
+}
+function getLoadModelBtn() {
+    return document.getElementById('load-model-btn');
+}
+function getLoadingProgress() {
+    return document.getElementById('loading-progress');
+}
+function getProgressFill() {
+    return document.getElementById('progress-fill');
+}
+function getProgressText() {
+    return document.getElementById('progress-text');
+}
+function getModelStatus() {
+    return document.getElementById('model-status');
+}
+function getWebGPUStatus() {
+    return document.getElementById('webgpu-status');
+}
+function getModelSection() {
+    return document.getElementById('model-section');
+}
+function getReloadModelBtn() {
+    return document.getElementById('reload-model-btn');
+}
+function getClearCacheBtn() {
+    return document.getElementById('clear-cache-btn');
+}
+function getCacheInfo() {
+    return document.getElementById('cache-info');
+}
+/**
+ * Populate model selector with available models
+ * @param {Array} models - Array of model configurations
+ */
+export function populateModelSelector(models) {
+    const modelSelect = getModelSelect();
+    if (!modelSelect) return;
+    modelSelect.innerHTML = '';
+    models.forEach(model => {
+        const option = document.createElement('option');
+        option.value = model.id;
+        const noteText = model.note ? ` - ${model.note}` : '';
+        option.textContent = `${model.label} (${model.size}${noteText})`;
+        modelSelect.appendChild(option);
+    });
+}
+/**
+ * Show/hide model section based on inference mode
+ * @param {boolean} show - Whether to show the model section
+ */
+export function toggleModelSection(show) {
+    const modelSection = getModelSection();
+    if (modelSection) {
+        if (show) {
+            modelSection.classList.remove('hidden');
+        } else {
+            modelSection.classList.add('hidden');
+        }
+    }
+}
+/**
+ * Update loading progress
+ * @param {number} percent - Progress percentage (0-100), or -1 for indeterminate
+ */
+export function updateLoadingProgress(percent) {
+    const progressFill = getProgressFill();
+    const progressBar = getLoadingProgress();
+    // Handle indeterminate state (percent < 0)
+    if (progressBar) {
+        if (percent < 0) {
+            progressBar.classList.add('indeterminate');
+        } else {
+            progressBar.classList.remove('indeterminate');
+        }
+    }
+    if (progressFill) {
+        progressFill.style.width = percent < 0 ? '30%' : `${percent}%`;
+    }
+}
+/**
+ * Show/hide loading progress
+ * @param {boolean} show - Whether to show the progress bar
+ */
+export function showLoadingProgress(show) {
+    const loadingProgress = getLoadingProgress();
+    if (loadingProgress) {
+        loadingProgress.style.display = show ? 'block' : 'none';
+    }
+}
+/**
+ * Show/hide the model input wrapper (dropdown + load button)
+ * @param {boolean} show - Whether to show the input wrapper
+ */
+export function showModelInputWrapper(show) {
+    const wrapper = document.querySelector('.model-input-wrapper');
+    if (wrapper) {
+        wrapper.style.display = show ? 'flex' : 'none';
+    }
+}
+/**
+ * Update model status display
+ * @param {string} message - Status message
+ * @param {string} type - Status type ('success', 'error', 'loading', or '')
+ */
+export function updateModelStatus(message, type = '') {
+    const modelStatus = getModelStatus();
+    if (modelStatus) {
+        modelStatus.textContent = message;
+        modelStatus.className = 'model-status';
+        if (type) {
+            modelStatus.classList.add(type);
+        }
+        modelStatus.style.display = message ? 'block' : 'none';
+    }
+}
+/**
+ * Update WebGPU status display
+ * @param {string} message - Status message
+ * @param {boolean} available - Whether WebGPU is available
+ */
+export function updateWebGPUStatus(message, available) {
+    const webgpuStatus = getWebGPUStatus();
+    if (webgpuStatus) {
+        webgpuStatus.textContent = message;
+        webgpuStatus.className = 'webgpu-status';
+        if (available) {
+            webgpuStatus.classList.add('available');
+        } else {
+            webgpuStatus.classList.add('unavailable');
+        }
+    }
+}
+/**
+ * Enable/disable model loading button
+ * @param {boolean} enabled - Whether to enable the button
+ */
+export function setLoadModelButtonEnabled(enabled) {
+    const loadModelBtn = getLoadModelBtn();
+    if (loadModelBtn) {
+        loadModelBtn.disabled = !enabled;
+    }
+}
+/**
+ * Get selected model ID
+ * @returns {string|null}
+ */
+export function getSelectedModelId() {
+    const modelSelect = getModelSelect();
+    return modelSelect ? modelSelect.value : null;
+}
+/**
+ * Update button states based on model load status
+ * @param {boolean} modelLoaded - Whether the model is loaded
+ */
+export function updateButtonStates(modelLoaded) {
+    const tooltipText = modelLoaded ? '' : 'Load a model first';
+    // Update live caption button
+    const liveCaptionBtn = document.getElementById('start-live-caption-btn');
+    if (liveCaptionBtn) {
+        liveCaptionBtn.disabled = !modelLoaded;
+        liveCaptionBtn.title = tooltipText;
+        // Update button text based on model state
+        if (!modelLoaded) {
+            liveCaptionBtn.textContent = 'Load Model Below';
+        } else {
+            liveCaptionBtn.textContent = 'Start';
+        }
+    }
+}
+/**
+ * Set up event listeners (simplified - only for model loading)
+ * @param {Function} onSend - Not used (kept for compatibility)
+ * @param {Function} onLoadModel - Callback for load model button
+ * @param {Function} onReloadModel - Callback for reload model button
+ */
+export function setupEventListeners(onSend, onLoadModel, onReloadModel) {
+    // Load model button
+    const loadModelBtn = getLoadModelBtn();
+    if (loadModelBtn && onLoadModel) {
+        loadModelBtn.addEventListener('click', onLoadModel);
+    }
+    // Reload model button
+    const reloadModelBtn = getReloadModelBtn();
+    if (reloadModelBtn && onReloadModel) {
+        reloadModelBtn.addEventListener('click', onReloadModel);
+    }
+}
+/**
+ * Update cache info display
+ * @param {number} usedBytes - Bytes used by cache
+ */
+export function updateCacheInfo(usedBytes) {
+    const cacheInfoEl = getCacheInfo();
+    const clearCacheBtn = getClearCacheBtn();
+    if (!cacheInfoEl) return;
+    if (usedBytes > 0) {
+        const usedMB = usedBytes / 1024 / 1024;
+        if (usedMB >= 1000) {
+            cacheInfoEl.textContent = `${(usedMB / 1024).toFixed(1)} GB cached`;
+        } else if (usedMB >= 1) {
+            cacheInfoEl.textContent = `${usedMB.toFixed(0)} MB cached`;
+        } else {
+            cacheInfoEl.textContent = 'No models cached';
+        }
+        if (clearCacheBtn) {
+            clearCacheBtn.disabled = usedMB < 1;
+        }
+    } else {
+        cacheInfoEl.textContent = 'No models cached';
+        if (clearCacheBtn) {
+            clearCacheBtn.disabled = true;
+        }
+    }
+}
+/**
+ * Set up clear cache button handler
+ * @param {Function} onClearCache - Callback for clear cache button
+ */
+export function setupClearCacheHandler(onClearCache) {
+    const clearCacheBtn = getClearCacheBtn();
+    if (clearCacheBtn && onClearCache) {
+        clearCacheBtn.addEventListener('click', onClearCache);
+    }
+}
+/**
+ * Set clear cache button text
+ * @param {string} text - Button text
+ */
+export function setClearCacheButtonText(text) {
+    const clearCacheBtn = getClearCacheBtn();
+    if (clearCacheBtn) {
+        clearCacheBtn.textContent = text;
+    }
+}

vite.config.js ADDED Viewed

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

+import { defineConfig } from 'vite';
+export default defineConfig({
+  server: {
+    port: 3000,
+    headers: {
+      // Required for SharedArrayBuffer (ONNX Runtime threading)
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    },
+  },
+  preview: {
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    },
+  },
+  optimizeDeps: {
+    exclude: ['@huggingface/transformers', 'onnxruntime-web'],
+  },
+  build: {
+    target: 'esnext',
+  },
+});

vl-model.js ADDED Viewed

	@@ -0,0 +1,974 @@

+/**
+ * LFM2-VL Model Runner for ONNX Runtime Web
+ *
+ * Runs VL model inference using three ONNX models:
+ * 1. embed_tokens.onnx - Text token embeddings
+ * 2. vision_encoder.onnx - Image embeddings from patches
+ * 3. decoder_model_merged.onnx - Autoregressive decoder with conv state cache
+ */
+import * as ort from 'onnxruntime-web';
+import { AutoTokenizer, env } from '@huggingface/transformers';
+import { processImage, loadImage } from './vl-processor.js';
+// Debug logging - set to false for production, toggle via setDebug(true) in console
+let DEBUG = false;
+export function setDebug(value) { DEBUG = value; console.log(`Debug logging ${value ? 'enabled' : 'disabled'}`); }
+const log = (...args) => { if (DEBUG) console.log(...args); };
+/**
+ * Convert float32 to float16 (IEEE 754 half-precision)
+ * @param {number} float32 - Float32 value
+ * @returns {number} - Float16 value as uint16
+ */
+function float32ToFloat16(float32) {
+  const view = new DataView(new ArrayBuffer(4));
+  view.setFloat32(0, float32, true);
+  const f32 = view.getUint32(0, true);
+  const sign = (f32 >> 31) & 0x1;
+  const exp = (f32 >> 23) & 0xff;
+  const frac = f32 & 0x7fffff;
+  let f16;
+  if (exp === 0) {
+    // Zero or denormal
+    f16 = (sign << 15) | (frac >> 13);
+  } else if (exp === 0xff) {
+    // Inf or NaN
+    f16 = (sign << 15) | 0x7c00 | (frac ? (frac >> 13) : 0);
+  } else {
+    // Normalized
+    const newExp = exp - 127 + 15;
+    if (newExp >= 31) {
+      // Overflow to infinity
+      f16 = (sign << 15) | 0x7c00;
+    } else if (newExp <= 0) {
+      // Underflow to zero
+      f16 = (sign << 15);
+    } else {
+      f16 = (sign << 15) | (newExp << 10) | (frac >> 13);
+    }
+  }
+  return f16;
+}
+/**
+ * Convert Float32Array to float16 Uint16Array
+ * @param {Float32Array} float32Array
+ * @returns {Uint16Array}
+ */
+function convertToFloat16(float32Array) {
+  const result = new Uint16Array(float32Array.length);
+  for (let i = 0; i < float32Array.length; i++) {
+    result[i] = float32ToFloat16(float32Array[i]);
+  }
+  return result;
+}
+/**
+ * Convert a float32 tensor to float16 tensor
+ * @param {ort.Tensor} tensor - Float32 tensor
+ * @returns {ort.Tensor} - Float16 tensor
+ */
+function tensorToFloat16(tensor) {
+  const float16Data = convertToFloat16(tensor.data);
+  return new ort.Tensor('float16', float16Data, tensor.dims);
+}
+// Cache configuration
+const CACHE_NAME = 'onnx-models-v1';
+// Threshold for URL-based ONNX loading (files too large for JS memory)
+// Set to 2GB - files larger than this will stream instead of loading into memory
+const LARGE_FILE_THRESHOLD = 2 * 1024 * 1024 * 1024; // 2GB
+/**
+ * Fetch with streaming progress tracking
+ * @param {string} url - URL to fetch
+ * @param {object} options - Fetch options
+ * @param {function} onProgress - Progress callback (received, total) => void
+ * @returns {Promise<Response>} - Response with complete body
+ */
+async function fetchWithProgress(url, options = {}, onProgress) {
+  const response = await fetch(url, options);
+  if (!response.ok) {
+    throw new Error(`Fetch failed: ${response.status}`);
+  }
+  const contentLength = parseInt(response.headers.get('content-length') || '0', 10);
+  if (!contentLength || !onProgress) {
+    // No size info or no callback - return as-is
+    return response;
+  }
+  const reader = response.body.getReader();
+  const chunks = [];
+  let received = 0;
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    chunks.push(value);
+    received += value.length;
+    onProgress(received, contentLength);
+  }
+  // Combine chunks into single buffer
+  const buffer = new Uint8Array(received);
+  let offset = 0;
+  for (const chunk of chunks) {
+    buffer.set(chunk, offset);
+    offset += chunk.length;
+  }
+  // Create new Response with fresh Headers for Cache API compatibility
+  // Using the original headers object from a consumed response can cause issues
+  return new Response(new Blob([buffer]), {
+    status: response.status,
+    headers: new Headers(response.headers),
+  });
+}
+/**
+ * Fetch with caching support using Cache API
+ * @param {string} url - URL to fetch
+ * @param {object} options - Fetch options
+ * @param {function} onProgress - Optional progress callback (received, total) => void
+ * @returns {Promise<Response>} - Response (from cache or network)
+ */
+async function fetchWithCache(url, options = {}, onProgress = null) {
+  // Skip caching for local files
+  if (!url.startsWith('http://') && !url.startsWith('https://')) {
+    return fetch(url, options);
+  }
+  const fileName = url.split('/').pop();
+  // 1. Try cache read with validation
+  try {
+    const cache = await caches.open(CACHE_NAME);
+    const cached = await cache.match(url);
+    if (cached) {
+      // Validate by reading body - catches corrupted entries from failed cache.put()
+      try {
+        const buffer = await cached.clone().arrayBuffer();
+        log(`[Cache HIT] ${fileName} (${(buffer.byteLength / 1024 / 1024).toFixed(1)} MB)`);
+        // Return a new Response with the validated buffer
+        return new Response(buffer, {
+          status: cached.status,
+          statusText: cached.statusText,
+          headers: cached.headers,
+        });
+      } catch (bodyError) {
+        // Corrupted cache entry - delete it and re-fetch
+        log(`[Cache CORRUPT] ${fileName} - deleting and re-fetching`);
+        await cache.delete(url);
+      }
+    }
+  } catch (e) {
+    log(`[Cache ERROR] ${e.message}`);
+  }
+  // 2. Fetch from network with progress tracking
+  log(`[Network] Fetching ${fileName}...`);
+  const response = await fetchWithProgress(url, options, onProgress);
+  // 3. Try to cache successful response (fire-and-forget)
+  if (response.ok) {
+    tryCacheResponse(url, response.clone());
+  }
+  return response;
+}
+/**
+ * Try to cache a response (non-blocking, best-effort)
+ * @param {string} url - URL to cache
+ * @param {Response} response - Response to cache
+ */
+async function tryCacheResponse(url, response) {
+  try {
+    // Check available space before caching
+    if (navigator.storage?.estimate) {
+      const { usage = 0, quota = 0 } = await navigator.storage.estimate();
+      const available = quota - usage;
+      const responseSize = parseInt(response.headers.get('content-length') || '0', 10);
+      // Skip if we don't have space for this file + 100MB buffer
+      const BUFFER = 100 * 1024 * 1024;
+      if (responseSize > 0 && available < responseSize + BUFFER) {
+        log(`[Cache SKIP] Not enough space (need ${((responseSize + BUFFER) / 1e9).toFixed(2)} GB, have ${(available / 1e9).toFixed(2)} GB)`);
+        return;
+      }
+    }
+    const cache = await caches.open(CACHE_NAME);
+    await cache.put(url, response);
+    log(`[Cached] ${url.split('/').pop()}`);
+  } catch (e) {
+    // Caching failed, but download succeeded - that's fine
+    console.warn(`[Cache WRITE ERROR] ${url.split('/').pop()}:`, e.name, e.message, e);
+  }
+}
+/**
+ * Clear the model cache
+ * @returns {Promise<boolean>} - True if cache was deleted
+ */
+export async function clearModelCache() {
+  const deleted = await caches.delete(CACHE_NAME);
+  log(deleted ? 'Model cache cleared' : 'No cache to clear');
+  return deleted;
+}
+/**
+ * Get cache storage usage info (specifically for model cache)
+ * @returns {Promise<{used: number, available: number}|null>}
+ */
+export async function getCacheInfo() {
+  try {
+    // Calculate actual size of just the model cache
+    const cache = await caches.open(CACHE_NAME);
+    const keys = await cache.keys();
+    let totalSize = 0;
+    for (const request of keys) {
+      const response = await cache.match(request);
+      if (response) {
+        // Get the response body as blob to measure size
+        const blob = await response.clone().blob();
+        totalSize += blob.size;
+      }
+    }
+    // Get quota info for available space
+    let available = 0;
+    if ('storage' in navigator && 'estimate' in navigator.storage) {
+      const estimate = await navigator.storage.estimate();
+      available = estimate.quota || 0;
+    }
+    return {
+      used: totalSize,
+      available: available,
+    };
+  } catch (e) {
+    console.warn('Error getting cache info:', e);
+    return null;
+  }
+}
+/**
+ * Load tokenizer from model path (local or S3)
+ * @param {string} modelPath - Path to model directory (local or S3 URL)
+ * @returns {Promise<{tokenizer: object, specialTokens: object}>} - Tokenizer instance and special token IDs
+ */
+async function loadTokenizerFromPath(modelPath) {
+  const isRemote = modelPath.startsWith('http://') || modelPath.startsWith('https://');
+  log(`Loading tokenizer from ${isRemote ? 'remote' : 'local'}: ${modelPath}`);
+  const fetchOptions = isRemote ? { mode: 'cors', credentials: 'omit' } : {};
+  // Fetch tokenizer files (with caching)
+  const [tokenizerResponse, configResponse] = await Promise.all([
+    fetchWithCache(`${modelPath}/tokenizer.json`, fetchOptions),
+    fetchWithCache(`${modelPath}/tokenizer_config.json`, fetchOptions),
+  ]);
+  if (!tokenizerResponse.ok) {
+    throw new Error(`Failed to fetch tokenizer.json: ${tokenizerResponse.status}`);
+  }
+  if (!configResponse.ok) {
+    throw new Error(`Failed to fetch tokenizer_config.json: ${configResponse.status}`);
+  }
+  const tokenizerJSON = await tokenizerResponse.text();
+  const configJSON = await configResponse.text();
+  log('Tokenizer files fetched, creating tokenizer...');
+  // Parse tokenizer.json to extract special token IDs from added_tokens
+  const tokenizerData = JSON.parse(tokenizerJSON);
+  const specialTokens = {};
+  if (tokenizerData.added_tokens) {
+    for (const token of tokenizerData.added_tokens) {
+      specialTokens[token.content] = token.id;
+    }
+    log('Found special tokens:', Object.keys(specialTokens).length);
+  }
+  // Create a unique fake model ID
+  const fakeModelId = `tokenizer-${Date.now()}`;
+  // Cache of files to serve
+  const fileCache = {
+    'tokenizer.json': tokenizerJSON,
+    'tokenizer_config.json': configJSON,
+  };
+  // Intercept fetch to serve our cached files
+  const originalFetch = globalThis.fetch;
+  globalThis.fetch = async (input, init) => {
+    const url = typeof input === 'string' ? input : input.url;
+    // Check if this is a request for our fake model
+    if (url.includes(fakeModelId)) {
+      for (const [filename, content] of Object.entries(fileCache)) {
+        if (url.includes(filename)) {
+          log(`Serving cached ${filename}`);
+          return new Response(content, {
+            status: 200,
+            headers: { 'Content-Type': 'application/json' },
+          });
+        }
+      }
+      // Return 404 for other files (like config.json which tokenizer doesn't need)
+      return new Response('Not found', { status: 404 });
+    }
+    return originalFetch(input, init);
+  };
+  // Disable local model check
+  const originalAllowLocal = env.allowLocalModels;
+  env.allowLocalModels = false;
+  try {
+    const tokenizer = await AutoTokenizer.from_pretrained(fakeModelId);
+    log('Tokenizer created successfully');
+    return { tokenizer, specialTokens };
+  } finally {
+    // Restore original state
+    globalThis.fetch = originalFetch;
+    env.allowLocalModels = originalAllowLocal;
+  }
+}
+export class VLModel {
+  constructor() {
+    this.tokenizer = null;
+    this.embedTokensSession = null;
+    this.visionEncoderSession = null;
+    this.decoderSession = null;
+    this.config = null;
+    this.imageTokenId = null;
+    this.eosTokenId = null;
+    this.hiddenSize = 1024;  // Default for 450M
+    // Image embedding cache (persists between turns)
+    this.imageCache = new Map();  // URL -> { embeddings, numTokens }
+  }
+  /**
+   * Clear the image embedding cache (call when starting a new conversation)
+   */
+  clearImageCache() {
+    this.imageCache.clear();
+  }
+  /**
+   * Load the VL model from a directory
+   * @param {string} modelPath - Path to model directory (S3 URL)
+   * @param {object} options - Loading options
+   * @param {function} options.progressCallback - Progress callback
+   * @param {string} options.device - Device to use ('webgpu' or 'wasm')
+   * @param {string} options.quantization - Quantization type ('q4', 'q8', or null for fp32)
+   */
+  async load(modelPath, options = {}) {
+    const { progressCallback, device = 'webgpu', quantization = null } = options;
+    const report = (status, progress = 0, file = '') => {
+      if (progressCallback) {
+        progressCallback({ status, progress, file });
+      }
+    };
+    // Determine execution provider
+    const executionProviders = device === 'webgpu'
+      ? ['webgpu', 'wasm']
+      : ['wasm'];
+    try {
+      // Load tokenizer and extract special token IDs
+      report('loading', 0, 'tokenizer');
+      const { tokenizer, specialTokens } = await loadTokenizerFromPath(modelPath);
+      this.tokenizer = tokenizer;
+      // Load chat template from S3 if not already set in tokenizer
+      if (!this.tokenizer.chat_template) {
+        try {
+          const templateResponse = await fetch(`${modelPath}/chat_template.jinja`, {
+            mode: 'cors',
+            credentials: 'omit',
+          });
+          if (templateResponse.ok) {
+            const template = await templateResponse.text();
+            this.tokenizer.chat_template = template;
+            log('Loaded chat template from model path');
+          }
+        } catch (e) {
+          console.warn('Could not load chat template:', e);
+        }
+      }
+      // Get special token IDs from parsed tokenizer.json
+      this.imageTokenId = specialTokens['<image>'] ?? null;
+      this.imageStartTokenId = specialTokens['<|image_start|>'] ?? null;
+      this.imageEndTokenId = specialTokens['<|image_end|>'] ?? null;
+      this.imageSplitTokenId = specialTokens['<|image_split|>'] ?? null;
+      this.eosTokenId = this.tokenizer.eos_token_id;
+      log('Image token ID:', this.imageTokenId);
+      log('Image start token ID:', this.imageStartTokenId);
+      log('Image end token ID:', this.imageEndTokenId);
+      log('EOS token ID:', this.eosTokenId);
+      if (this.imageTokenId === null) {
+        console.warn('Warning: <image> token not found in tokenizer');
+      }
+      // Load config
+      report('loading', 10, 'config');
+      const configResponse = await fetch(`${modelPath}/config.json`, {
+        mode: 'cors',
+        credentials: 'omit',
+      });
+      this.config = await configResponse.json();
+      // VL models have config in text_config
+      const textConfig = this.config.text_config || this.config;
+      this.hiddenSize = textConfig.hidden_size || 1024;
+      this.numKVHeads = textConfig.num_key_value_heads || 8;
+      this.headDim = Math.floor(this.hiddenSize / (textConfig.num_attention_heads || 16));
+      log('Model config:', { hiddenSize: this.hiddenSize, numKVHeads: this.numKVHeads, headDim: this.headDim });
+      // Get external data files (single file per component for 450M)
+      const getExternalDataFiles = async (basePath, fileName, fetchOptions) => {
+        const files = [];
+        // Get primary file
+        const primaryUrl = `${basePath}/onnx/${fileName}.onnx_data`;
+        try {
+          const headResp = await fetch(primaryUrl, { method: 'HEAD', ...fetchOptions });
+          if (!headResp.ok) return []; // No external data
+          files.push({
+            path: `${fileName}.onnx_data`,
+            url: primaryUrl,
+            size: parseInt(headResp.headers.get('content-length') || '0', 10)
+          });
+        } catch (e) {
+          return []; // No external data
+        }
+        return files;
+      };
+      // Helper to load ONNX model with external data (with caching and progress)
+      // customProviders allows overriding execution providers for specific sessions
+      const loadOnnxWithExternalData = async (name, progress, quantSuffix = quantization, customProviders = null) => {
+        // Build filename with optional quantization suffix
+        const suffix = quantSuffix ? `_${quantSuffix}` : '';
+        const fileName = `${name}${suffix}`;
+        report('loading', progress, `${fileName}.onnx`);
+        const onnxPath = `${modelPath}/onnx/${fileName}.onnx`;
+        const fetchOptions = { mode: 'cors', credentials: 'omit' };
+        log(`Loading ${fileName}...`);
+        // Progress callback for download progress
+        const makeProgressCallback = (file) => (received, total) => {
+          const mb = (received / 1024 / 1024).toFixed(0);
+          const totalMb = (total / 1024 / 1024).toFixed(0);
+          report('loading', progress, `${file}: ${mb} / ${totalMb} MB`);
+        };
+        // Get external data files (uses size-based format detection)
+        const dataFiles = await getExternalDataFiles(modelPath, fileName, fetchOptions);
+        const totalDataSize = dataFiles.reduce((sum, f) => sum + f.size, 0);
+        log(`Found ${dataFiles.length} external data file(s) for ${fileName}, total: ${(totalDataSize / 1024 / 1024).toFixed(1)} MB`);
+        // Use custom providers if specified, otherwise use default
+        const providers = customProviders || executionProviders;
+        const sessionOptions = {
+          executionProviders: providers,
+        };
+        // Fetch ONNX file (with caching and progress)
+        const onnxResponse = await fetchWithCache(onnxPath, fetchOptions, makeProgressCallback(`${fileName}.onnx`));
+        if (!onnxResponse.ok) {
+          throw new Error(`Failed to fetch ${fileName}.onnx: ${onnxResponse.status}`);
+        }
+        const onnxBuffer = await onnxResponse.arrayBuffer();
+        log(`Loaded ${fileName}.onnx: ${(onnxBuffer.byteLength / 1024 / 1024).toFixed(1)} MB`);
+        if (dataFiles.length > 0) {
+          // Load each file individually - use memory for cacheable files, URL for oversized
+          sessionOptions.externalData = [];
+          for (const f of dataFiles) {
+            if (f.size > LARGE_FILE_THRESHOLD) {
+              // File too large for JS memory - let ONNX Runtime stream it
+              log(`Large file ${f.path} (${(f.size / 1024 / 1024 / 1024).toFixed(2)} GB), using URL-based loading`);
+              report('loading', progress, `${fileName} (streaming ${f.path}...)`);
+              sessionOptions.externalData.push({
+                path: f.path,
+                data: f.url,
+              });
+            } else {
+              // File fits in memory - fetch with caching and progress
+              const dataResponse = await fetchWithCache(f.url, fetchOptions, makeProgressCallback(f.path));
+              if (!dataResponse.ok) {
+                throw new Error(`Failed to fetch ${f.path}: ${dataResponse.status}`);
+              }
+              const dataBuffer = await dataResponse.arrayBuffer();
+              log(`Loaded ${f.path}: ${(dataBuffer.byteLength / 1024 / 1024).toFixed(1)} MB`);
+              sessionOptions.externalData.push({
+                path: f.path,
+                data: new Uint8Array(dataBuffer),
+              });
+            }
+          }
+          report('loading', progress, `${fileName} (initializing)`);
+        } else {
+          report('loading', progress, `${fileName} (initializing)`);
+        }
+        const session = await ort.InferenceSession.create(new Uint8Array(onnxBuffer), sessionOptions);
+        log(`Session created for ${fileName}`);
+        return session;
+      };
+      // Parse quantization config (can be string for legacy or object for new format)
+      const quantConfig = typeof quantization === 'object' ? quantization : {
+        decoder: quantization,
+        visionEncoder: quantization,
+      };
+      // Load embed_tokens (use fp16 suffix if decoder is fp16, otherwise no suffix)
+      const embedTokensQuant = quantConfig.decoder || null;
+      this.embedTokensSession = await loadOnnxWithExternalData('embed_tokens', 20, embedTokensQuant);
+      // Load vision_encoder (use specified quantization)
+      const visionEncoderQuant = quantConfig.visionEncoder || null;
+      this.visionEncoderSession = await loadOnnxWithExternalData('vision_encoder', 40, visionEncoderQuant);
+      // Load decoder_model_merged (use specified quantization)
+      const decoderQuant = quantConfig.decoder || null;
+      this.decoderSession = await loadOnnxWithExternalData('decoder_model_merged', 60, decoderQuant);
+      report('done', 100, '');
+      return true;
+    } catch (error) {
+      // Better error reporting for ORT errors
+      let errorMessage = error;
+      if (typeof error === 'number') {
+        errorMessage = `ONNX Runtime error code: ${error}. This may indicate a WebGPU memory or compatibility issue.`;
+      } else if (error instanceof Error) {
+        errorMessage = error.message;
+      }
+      console.error('Failed to load VL model:', errorMessage);
+      throw new Error(errorMessage);
+    }
+  }
+  /**
+   * Process images and get embeddings (with caching)
+   * @param {string[]} imageInputs - Array of image URLs or data URLs
+   * @returns {Promise<{embeddings: Float32Array, numTokens: number, tokensPerImage: number[]}>}
+   */
+  async getImageEmbeddings(imageInputs) {
+    const allEmbeddings = [];
+    const tokensPerImage = [];
+    let totalTokens = 0;
+    let cacheHits = 0;
+    let cacheMisses = 0;
+    for (const input of imageInputs) {
+      // Check cache first
+      if (this.imageCache.has(input)) {
+        const cached = this.imageCache.get(input);
+        allEmbeddings.push(cached.embeddings);
+        tokensPerImage.push(cached.numTokens);
+        totalTokens += cached.numTokens;
+        cacheHits++;
+        continue;
+      }
+      // Cache miss - load and process the image
+      cacheMisses++;
+      const img = await loadImage(input);
+      const processed = await processImage(img);
+      log(`Image processed: ${processed.numTiles} tiles, shape [${processed.shape.join(', ')}]`);
+      // Create tensors - use shape from processed output
+      const patchesPerTile = processed.shape[1];  // 1024
+      const pixelValuesTensor = new ort.Tensor(
+        'float32',
+        processed.pixelValues,
+        processed.shape  // [num_tiles, patches_per_tile, 768]
+      );
+      const attentionMaskTensor = new ort.Tensor(
+        'int64',
+        processed.attentionMask,  // BigInt64Array
+        [processed.numTiles, patchesPerTile]  // [num_tiles, patches_per_tile]
+      );
+      const spatialShapesTensor = new ort.Tensor(
+        'int64',
+        processed.spatialShapes,  // BigInt64Array
+        [processed.numTiles, 2]  // [num_tiles, 2]
+      );
+      // Run vision_encoder
+      let outputs = await this.visionEncoderSession.run({
+        pixel_values: pixelValuesTensor,
+        pixel_attention_mask: attentionMaskTensor,
+        spatial_shapes: spatialShapesTensor,
+      });
+      // Output shape: [num_image_tokens, hidden_dim] (already flattened)
+      let embeddings = outputs.image_features;
+      log('Image embeddings shape:', embeddings.dims);
+      // Output is 2D: [num_tokens, hidden_dim]
+      const numTokens = embeddings.dims[0];
+      // Store in cache (copy the data since tensor might be reused)
+      const embeddingsCopy = new Float32Array(embeddings.data);
+      this.imageCache.set(input, { embeddings: embeddingsCopy, numTokens });
+      tokensPerImage.push(numTokens);
+      totalTokens += numTokens;
+      allEmbeddings.push(embeddingsCopy);
+    }
+    if (DEBUG && (cacheHits > 0 || cacheMisses > 1)) {
+      log(`Image embeddings: ${cacheHits} cached, ${cacheMisses} computed, ${totalTokens} total tokens`);
+    }
+    // Concatenate all image embeddings
+    const totalLength = allEmbeddings.reduce((sum, e) => sum + e.length, 0);
+    const combined = new Float32Array(totalLength);
+    let offset = 0;
+    for (const emb of allEmbeddings) {
+      combined.set(emb, offset);
+      offset += emb.length;
+    }
+    return { embeddings: combined, numTokens: totalTokens, tokensPerImage };
+  }
+  /**
+   * Get text embeddings from token IDs
+   * @param {number[]} inputIds - Token IDs as regular numbers
+   * @returns {Promise<ort.Tensor>} - Text embeddings tensor
+   */
+  async getTextEmbeddings(inputIds) {
+    const inputTensor = new ort.Tensor(
+      'int64',
+      new BigInt64Array(inputIds.map(id => BigInt(id))),
+      [1, inputIds.length]
+    );
+    const outputs = await this.embedTokensSession.run({ input_ids: inputTensor });
+    return outputs.inputs_embeds;
+  }
+  /**
+   * Build combined embeddings by replacing image tokens with image embeddings (1:1)
+   * Each <image> token position gets replaced with exactly one image embedding.
+   * The sequence length remains the same.
+   *
+   * @param {number[]} inputIds - Token IDs
+   * @param {ort.Tensor} textEmbeddings - Text embeddings tensor
+   * @param {Float32Array} imageEmbeddings - Concatenated image embeddings
+   */
+  buildCombinedEmbeddings1to1(inputIds, textEmbeddings, imageEmbeddings) {
+    const [, seqLen, hiddenDim] = textEmbeddings.dims;
+    const textEmb = textEmbeddings.data;
+    const imgEmb = imageEmbeddings;
+    // Find all image token positions
+    const imagePositions = [];
+    for (let i = 0; i < inputIds.length; i++) {
+      if (inputIds[i] === this.imageTokenId) {
+        imagePositions.push(i);
+      }
+    }
+    const numImageEmbeddings = imgEmb.length / hiddenDim;
+    if (imagePositions.length !== numImageEmbeddings) {
+      console.warn(`Image token mismatch: ${imagePositions.length} <image> tokens vs ${numImageEmbeddings} embeddings`);
+    }
+    // Copy text embeddings and replace image token positions
+    const result = new Float32Array(textEmb);
+    for (let i = 0; i < Math.min(imagePositions.length, numImageEmbeddings); i++) {
+      const pos = imagePositions[i];
+      const embStart = i * hiddenDim;
+      const dstStart = pos * hiddenDim;
+      result.set(imgEmb.slice(embStart, embStart + hiddenDim), dstStart);
+    }
+    return new ort.Tensor('float32', result, [1, seqLen, hiddenDim]);
+  }
+  /**
+   * Initialize cache for decoder (both conv states and KV cache)
+   * Uses float16 tensors as required by the 450M ONNX model
+   */
+  initializeCache() {
+    const cache = {};
+    for (const name of this.decoderSession.inputNames) {
+      if (name.startsWith('past_conv')) {
+        // Conv states: [batch, hidden_size, kernel_size-1]
+        // Kernel size is 4, so we need 3 states
+        // Use float16 (Uint16Array) for 450M model compatibility
+        cache[name] = new ort.Tensor(
+          'float16',
+          new Uint16Array(1 * this.hiddenSize * 3),
+          [1, this.hiddenSize, 3]
+        );
+      } else if (name.startsWith('past_key_values')) {
+        // KV cache: [batch, num_kv_heads, past_seq_len, head_dim]
+        // Initialize with 0 length sequence
+        // Use float16 (Uint16Array) for 450M model compatibility
+        cache[name] = new ort.Tensor(
+          'float16',
+          new Uint16Array(0),  // Empty cache initially
+          [1, this.numKVHeads, 0, this.headDim]
+        );
+      }
+    }
+    return cache;
+  }
+  /**
+   * Update cache from decoder outputs
+   */
+  updateCache(cache, outputs) {
+    for (const name of Object.keys(outputs)) {
+      if (name.startsWith('present_conv')) {
+        // Conv states: present_conv.X -> past_conv.X
+        const cacheName = name.replace('present_conv', 'past_conv');
+        if (cacheName in cache) {
+          cache[cacheName] = outputs[name];
+        }
+      } else if (name.startsWith('present.')) {
+        // KV cache: present.X.key -> past_key_values.X.key
+        const cacheName = name.replace('present.', 'past_key_values.');
+        if (cacheName in cache) {
+          cache[cacheName] = outputs[name];
+        }
+      }
+    }
+  }
+  /**
+   * Generate text given messages with optional images
+   * @param {Array} messages - Chat messages
+   * @param {object} options - Generation options
+   */
+  async generate(messages, options = {}) {
+    const { maxNewTokens = 256, onToken, images = [], messageImageMap = new Map() } = options;
+    log(`=== VL Generate: ${messages.length} messages, ${images.length} images ===`);
+    // Process images FIRST to get patch counts
+    let imageEmbeddings = null;
+    let tokensPerImage = [];
+    let totalImageTokens = 0;
+    if (images.length > 0) {
+      const result = await this.getImageEmbeddings(images);
+      imageEmbeddings = result.embeddings;
+      tokensPerImage = result.tokensPerImage;
+      totalImageTokens = result.numTokens;
+      log(`Image tokens: ${totalImageTokens} (per-image: [${tokensPerImage.join(', ')}])`);
+    }
+    // Build prompt with <image> tokens placed in EACH message that has images
+    // This is critical: each user message that sent an image needs its <image> token(s)
+    let promptMessages = messages;
+    if (images.length > 0) {
+      promptMessages = messages.map((msg, idx) => {
+        // Check if this message has images via messageImageMap
+        if (msg.role === 'user' && messageImageMap.has(idx)) {
+          const messageImages = messageImageMap.get(idx);
+          const imageTokens = messageImages.map(() => '<image>').join('');
+          return { ...msg, content: imageTokens + msg.content };
+        }
+        return msg;
+      });
+    }
+    // Apply chat template
+    const prompt = this.tokenizer.apply_chat_template(promptMessages, {
+      add_generation_prompt: true,
+      tokenize: false,
+    });
+    // Tokenize
+    const encoded = this.tokenizer.encode(prompt);
+    let inputIds = [...encoded];
+    // Expand each <image> token to the correct count for that image
+    // Add boundary tokens if available: <image_start> [tokens] <image_end>
+    if (images.length > 0) {
+      const expandedIds = [];
+      let imageIdx = 0;
+      for (const id of inputIds) {
+        if (id === this.imageTokenId && imageIdx < tokensPerImage.length) {
+          // Add start boundary if available
+          if (this.imageStartTokenId) {
+            expandedIds.push(this.imageStartTokenId);
+          }
+          // Replace single <image> with N copies
+          const count = tokensPerImage[imageIdx];
+          for (let i = 0; i < count; i++) {
+            expandedIds.push(this.imageTokenId);
+          }
+          // Add end boundary if available
+          if (this.imageEndTokenId) {
+            expandedIds.push(this.imageEndTokenId);
+          }
+          imageIdx++;
+        } else {
+          expandedIds.push(id);
+        }
+      }
+      inputIds = expandedIds;
+    }
+    // Get text embeddings for expanded sequence
+    const textEmbeddings = await this.getTextEmbeddings(inputIds);
+    // Replace image token embeddings with actual image embeddings (1:1)
+    let inputsEmbeds;
+    if (images.length > 0) {
+      inputsEmbeds = this.buildCombinedEmbeddings1to1(inputIds, textEmbeddings, imageEmbeddings);
+    } else {
+      inputsEmbeds = textEmbeddings;
+    }
+    log(`Input sequence: ${inputsEmbeds.dims[1]} tokens, ${(inputsEmbeds.data.length * 4 / 1024 / 1024).toFixed(1)} MB`);
+    // Initialize fresh cache for this generation
+    // (KV cache is used within generation for autoregressive decoding)
+    const cache = this.initializeCache();
+    // Generation loop
+    const seqLen = inputsEmbeds.dims[1];
+    let curLen = seqLen;
+    let currentEmbeds = inputsEmbeds;
+    const generatedTokens = [];
+    for (let step = 0; step < maxNewTokens; step++) {
+      // Prepare attention mask
+      const attentionMask = new ort.Tensor(
+        'int64',
+        new BigInt64Array(curLen).fill(1n),
+        [1, curLen]
+      );
+      // Run decoder (LFM2 models don't use position_ids - position is implicit from attention)
+      const feeds = {
+        inputs_embeds: currentEmbeds,
+        attention_mask: attentionMask,
+        ...cache,
+      };
+      const outputs = await this.decoderSession.run(feeds);
+      // Get logits - shape is [batch, seq_len, vocab_size]
+      const logits = outputs.logits;
+      const vocabSize = logits.dims[2];
+      const logitsData = logits.data;
+      // Get last token logits
+      const lastLogitStart = (logits.dims[1] - 1) * vocabSize;
+      const lastLogits = logitsData.slice(lastLogitStart, lastLogitStart + vocabSize);
+      // Greedy decoding - find max
+      let maxIdx = 0;
+      let maxVal = lastLogits[0];
+      for (let i = 1; i < vocabSize; i++) {
+        if (lastLogits[i] > maxVal) {
+          maxVal = lastLogits[i];
+          maxIdx = i;
+        }
+      }
+      generatedTokens.push(maxIdx);
+      // Callback with token
+      if (onToken) {
+        const tokenText = this.tokenizer.decode([maxIdx]);
+        const shouldStop = onToken(tokenText, maxIdx);
+        if (shouldStop) break;
+      }
+      // Check for EOS
+      if (maxIdx === this.eosTokenId) {
+        break;
+      }
+      // Update cache for next token
+      this.updateCache(cache, outputs);
+      // Get embedding for next token
+      const nextEmbeds = await this.getTextEmbeddings([maxIdx]);
+      currentEmbeds = nextEmbeds;
+      curLen++;
+    }
+    return this.tokenizer.decode(generatedTokens, { skip_special_tokens: true });
+  }
+  /**
+   * Free resources
+   */
+  async dispose() {
+    this.clearImageCache();
+    this.tokenizer = null;
+    // Properly release ONNX sessions to free GPU resources
+    if (this.embedTokensSession) {
+      try {
+        await this.embedTokensSession.release();
+      } catch (e) {
+        console.warn('Error releasing embedTokensSession:', e);
+      }
+      this.embedTokensSession = null;
+    }
+    if (this.visionEncoderSession) {
+      try {
+        await this.visionEncoderSession.release();
+      } catch (e) {
+        console.warn('Error releasing visionEncoderSession:', e);
+      }
+      this.visionEncoderSession = null;
+    }
+    if (this.decoderSession) {
+      try {
+        await this.decoderSession.release();
+      } catch (e) {
+        console.warn('Error releasing decoderSession:', e);
+      }
+      this.decoderSession = null;
+    }
+  }
+}
+export default VLModel;

vl-processor.js ADDED Viewed

	@@ -0,0 +1,497 @@

+/**
+ * LFM2-VL Image Processor for WebGPU/ONNX Runtime Web
+ *
+ * Implements the image preprocessing logic from Lfm2VlImageProcessorFast:
+ * 1. Split image into tiles (512x512)
+ * 2. Extract 16x16 patches from each tile (32x32 = 1024 patches per tile)
+ * 3. Flatten each patch to 768 values (16*16*3)
+ * 4. Normalize: (pixel / 255 - 0.5) / 0.5 = pixel / 127.5 - 1
+ *
+ * Output shapes match Python processor:
+ * - pixel_values: [num_tiles, 1024, 768]
+ * - pixel_attention_mask: [num_tiles, 1024]
+ */
+// Configuration from preprocessor_config.json
+const CONFIG = {
+  tileSize: 512,
+  maxTiles: 10,
+  minTiles: 2,
+  imageMean: [0.5, 0.5, 0.5],
+  imageStd: [0.5, 0.5, 0.5],
+  rescaleFactor: 1 / 255,
+  useThumbnail: false,  // LFM2-VL-450M does not use thumbnail
+  patchSize: 16,  // Each patch is 16x16 pixels
+  patchesPerTile: 32,  // 512 / 16 = 32 patches per side = 1024 per tile
+  downsampleFactor: 2,
+  minImageTokens: 64,
+  maxImageTokens: 256,
+  maxPixelsTolerance: 2.0,
+};
+// Pre-computed normalization constants for faster patch extraction
+// Formula: (pixel / 255 - 0.5) / 0.5 = pixel / 127.5 - 1.0
+const NORM_SCALE = 1 / 127.5;
+const NORM_OFFSET = -1.0;
+// Pre-computed patch info for common live-caption resolutions (all 32-aligned)
+const PRECOMPUTED_SIZES = {
+  256: { width: 256, height: 256, patchesH: 16, patchesW: 16 },  // 256/16 = 16
+  384: { width: 384, height: 384, patchesH: 24, patchesW: 24 },  // 384/16 = 24
+  448: { width: 448, height: 448, patchesH: 28, patchesW: 28 },  // 448/16 = 28
+  512: { width: 512, height: 512, patchesH: 32, patchesW: 32 },  // 512/16 = 32
+};
+/**
+ * Round number to closest value divisible by factor
+ */
+function roundByFactor(number, factor) {
+  return Math.round(number / factor) * factor;
+}
+/**
+ * Ceil number to smallest value >= number divisible by factor
+ */
+function ceilByFactor(number, factor) {
+  return Math.ceil(number / factor) * factor;
+}
+/**
+ * Floor number to largest value <= number divisible by factor
+ */
+function floorByFactor(number, factor) {
+  return Math.floor(number / factor) * factor;
+}
+/**
+ * Find the closest aspect ratio from target ratios to match input aspect ratio
+ * Matches Python's find_closest_aspect_ratio()
+ */
+function findClosestAspectRatio(aspectRatio, targetRatios, width, height, imageSize) {
+  let bestRatioDiff = Infinity;
+  let bestRatio = [1, 1];
+  const area = width * height;
+  for (const ratio of targetRatios) {
+    const targetAspectRatio = ratio[0] / ratio[1];
+    const ratioDiff = Math.abs(aspectRatio - targetAspectRatio);
+    if (ratioDiff < bestRatioDiff) {
+      bestRatioDiff = ratioDiff;
+      bestRatio = ratio;
+    } else if (ratioDiff === bestRatioDiff) {
+      // If equally close, prefer ratio that better matches original image area
+      const targetArea = imageSize * imageSize * ratio[0] * ratio[1];
+      if (area > 0.5 * targetArea) {
+        bestRatio = ratio;
+      }
+    }
+  }
+  return bestRatio;
+}
+/**
+ * Check if image is too large to process as one tile
+ * Matches Python's _is_img_too_large()
+ */
+function isImageTooLarge(width, height) {
+  const { patchSize, maxImageTokens, downsampleFactor, maxPixelsTolerance } = CONFIG;
+  const hBar = Math.max(patchSize, roundByFactor(height, patchSize));
+  const wBar = Math.max(patchSize, roundByFactor(width, patchSize));
+  const maxPixels = maxImageTokens * (patchSize ** 2) * (downsampleFactor ** 2) * maxPixelsTolerance;
+  return hBar * wBar > maxPixels;
+}
+/**
+ * Smart resize to ensure dimensions divisible by patchSize * downsampleFactor
+ * and total pixels within [minPixels, maxPixels]
+ * Matches Python's _smart_resize()
+ * @returns {{width: number, height: number}}
+ */
+function smartResize(width, height) {
+  const { patchSize, downsampleFactor, minImageTokens, maxImageTokens } = CONFIG;
+  const totalFactor = patchSize * downsampleFactor;  // 32
+  const minPixels = minImageTokens * (patchSize ** 2) * (downsampleFactor ** 2);
+  const maxPixels = maxImageTokens * (patchSize ** 2) * (downsampleFactor ** 2);
+  let hBar = Math.max(totalFactor, roundByFactor(height, totalFactor));
+  let wBar = Math.max(totalFactor, roundByFactor(width, totalFactor));
+  if (hBar * wBar > maxPixels) {
+    const beta = Math.sqrt((height * width) / maxPixels);
+    hBar = Math.max(totalFactor, floorByFactor(height / beta, totalFactor));
+    wBar = Math.max(totalFactor, floorByFactor(width / beta, totalFactor));
+  } else if (hBar * wBar < minPixels) {
+    const beta = Math.sqrt(minPixels / (height * width));
+    hBar = ceilByFactor(height * beta, totalFactor);
+    wBar = ceilByFactor(width * beta, totalFactor);
+  }
+  return { width: wBar, height: hBar };
+}
+/**
+ * Get number of tokens for an image of given dimensions
+ * Matches Python's _get_tokens_num()
+ */
+function getTokensNum(height, width) {
+  const { patchSize, downsampleFactor } = CONFIG;
+  const numPatchesHeight = Math.floor(height / patchSize);
+  const numPatchesWidth = Math.floor(width / patchSize);
+  const dwnNumPatchesHeight = Math.ceil(numPatchesHeight / downsampleFactor);
+  const dwnNumPatchesWidth = Math.ceil(numPatchesWidth / downsampleFactor);
+  return dwnNumPatchesHeight * dwnNumPatchesWidth;
+}
+/**
+ * Calculate optimal tile grid for an image
+ * Matches Python's _high_res_preprocessor() grid selection
+ * @param {number} width - Image width
+ * @param {number} height - Image height
+ * @returns {{rows: number, cols: number}} - Tile grid dimensions
+ */
+function calculateTileGrid(width, height) {
+  const { tileSize, minTiles, maxTiles } = CONFIG;
+  const aspectRatio = width / height;
+  // Generate valid patch grid configurations (width, height)
+  // Matches Python: [(w, h) for n in range(min_tiles, max_tiles + 1) for w in range(1, n + 1) for h in range(1, n + 1) if min_tiles <= w * h <= max_tiles]
+  const targetRatios = [];
+  for (let n = minTiles; n <= maxTiles; n++) {
+    for (let w = 1; w <= n; w++) {
+      for (let h = 1; h <= n; h++) {
+        if (w * h >= minTiles && w * h <= maxTiles) {
+          // Check if already exists
+          if (!targetRatios.some(r => r[0] === w && r[1] === h)) {
+            targetRatios.push([w, h]);
+          }
+        }
+      }
+    }
+  }
+  // Sort by total tiles
+  targetRatios.sort((a, b) => (a[0] * a[1]) - (b[0] * b[1]));
+  if (targetRatios.length === 0) {
+    return { rows: 1, cols: 1 };
+  }
+  // Find best matching grid configuration
+  const [gridWidth, gridHeight] = findClosestAspectRatio(
+    aspectRatio, targetRatios, width, height, tileSize
+  );
+  return { rows: gridHeight, cols: gridWidth };
+}
+/**
+ * Process an image into flattened patches for VL model
+ * Matches Python's _resize_and_maybe_split() logic
+ * @param {HTMLImageElement|HTMLCanvasElement|ImageData} image - Input image or raw ImageData
+ * @returns {Promise<{pixelValues: Float32Array, attentionMask: BigInt64Array, numTiles: number, shape: number[]}>}
+ */
+export async function processImage(image) {
+  let width, height;
+  let inputImageData = null;  // For direct ImageData input
+  if (image instanceof ImageData) {
+    // Direct ImageData input - skip canvas creation entirely
+    width = image.width;
+    height = image.height;
+    inputImageData = image;
+  } else if (image instanceof HTMLImageElement) {
+    width = image.naturalWidth;
+    height = image.naturalHeight;
+  } else {
+    width = image.width;
+    height = image.height;
+  }
+  const { tileSize, patchSize, useThumbnail } = CONFIG;
+  const patchesPerSide = CONFIG.patchesPerTile;  // 32
+  const maxPatchesPerTile = patchesPerSide * patchesPerSide;  // 1024
+  const patchDim = patchSize * patchSize * 3;  // 768
+  // Check if image needs splitting (matches Python's _resize_and_maybe_split)
+  const needsSplitting = isImageTooLarge(width, height);
+  if (needsSplitting) {
+    // HIGH-RES PATH: Split into tiles + optional thumbnail
+    // Matches Python's _high_res_preprocessor()
+    const { rows, cols } = calculateTileGrid(width, height);
+    const totalGridTiles = rows * cols;
+    // Only use tiling if we get more than 1 tile
+    if (totalGridTiles > 1) {
+      const numTiles = totalGridTiles + (useThumbnail ? 1 : 0);
+      // Output arrays - use max patches per tile for uniform shape
+      const pixelValues = new Float32Array(numTiles * maxPatchesPerTile * patchDim);
+      const attentionMask = new BigInt64Array(numTiles * maxPatchesPerTile);
+      const spatialShapes = new BigInt64Array(numTiles * 2);
+      // STEP 1: Resize ENTIRE image to target grid dimensions (matches Python)
+      const targetWidth = tileSize * cols;
+      const targetHeight = tileSize * rows;
+      const resizedCanvas = document.createElement('canvas');
+      resizedCanvas.width = targetWidth;
+      resizedCanvas.height = targetHeight;
+      const resizedCtx = resizedCanvas.getContext('2d');
+      resizedCtx.drawImage(image, 0, 0, targetWidth, targetHeight);
+      // STEP 2: Extract tiles by CROPPING from resized image (matches Python)
+      let tileIdx = 0;
+      for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+          const tileCanvas = document.createElement('canvas');
+          tileCanvas.width = tileSize;
+          tileCanvas.height = tileSize;
+          const tileCtx = tileCanvas.getContext('2d');
+          // Crop tile from resized image
+          tileCtx.drawImage(
+            resizedCanvas,
+            col * tileSize, row * tileSize, tileSize, tileSize,  // source crop
+            0, 0, tileSize, tileSize  // dest (same size, no scaling)
+          );
+          const tileData = tileCtx.getImageData(0, 0, tileSize, tileSize);
+          extractPatchesFromFullTile(tileData, pixelValues, attentionMask, tileIdx, patchesPerSide, maxPatchesPerTile);
+          // Spatial shape for this tile
+          spatialShapes[tileIdx * 2] = BigInt(patchesPerSide);      // height in patches
+          spatialShapes[tileIdx * 2 + 1] = BigInt(patchesPerSide);  // width in patches
+          tileIdx++;
+        }
+      }
+      // STEP 3: Add thumbnail LAST (matches Python - thumbnail is appended)
+      // Thumbnail uses smart resize to variable dimensions (like single-tile path)
+      if (useThumbnail) {
+        const thumbResized = smartResize(width, height);
+        const thumbWidth = thumbResized.width;
+        const thumbHeight = thumbResized.height;
+        const thumbCanvas = document.createElement('canvas');
+        thumbCanvas.width = thumbWidth;
+        thumbCanvas.height = thumbHeight;
+        const thumbCtx = thumbCanvas.getContext('2d');
+        thumbCtx.drawImage(image, 0, 0, thumbWidth, thumbHeight);
+        const thumbData = thumbCtx.getImageData(0, 0, thumbWidth, thumbHeight);
+        const thumbPatchesH = thumbHeight / patchSize;
+        const thumbPatchesW = thumbWidth / patchSize;
+        extractPatchesFromVariableSize(thumbData, pixelValues, attentionMask, tileIdx, thumbPatchesH, thumbPatchesW, maxPatchesPerTile);
+        // Spatial shape for thumbnail (variable based on smart resize)
+        spatialShapes[tileIdx * 2] = BigInt(thumbPatchesH);
+        spatialShapes[tileIdx * 2 + 1] = BigInt(thumbPatchesW);
+        tileIdx++;
+      }
+      return {
+        pixelValues,
+        attentionMask,
+        spatialShapes,
+        numTiles,
+        shape: [numTiles, maxPatchesPerTile, patchDim],
+      };
+    }
+  }
+  // SINGLE-TILE PATH: Smart resize only (no splitting)
+  // Matches Python's else branch in _resize_and_maybe_split()
+  let resizedWidth, resizedHeight, actualPatchesH, actualPatchesW;
+  let imageData;
+  // OPTIMIZATION: Check if dimensions are pre-computed (32-aligned live caption sizes)
+  const precomputed = PRECOMPUTED_SIZES[width];
+  const isAlreadyAligned = precomputed && width === height;
+  if (inputImageData && isAlreadyAligned) {
+    // FAST PATH: Direct ImageData with known dimensions - skip all resizing
+    resizedWidth = width;
+    resizedHeight = height;
+    actualPatchesH = precomputed.patchesH;
+    actualPatchesW = precomputed.patchesW;
+    imageData = inputImageData;
+  } else if (isAlreadyAligned) {
+    // Dimensions already 32-aligned, skip smartResize computation
+    resizedWidth = width;
+    resizedHeight = height;
+    actualPatchesH = precomputed.patchesH;
+    actualPatchesW = precomputed.patchesW;
+    // Still need to get ImageData from the image
+    const resizedCanvas = document.createElement('canvas');
+    resizedCanvas.width = resizedWidth;
+    resizedCanvas.height = resizedHeight;
+    const resizedCtx = resizedCanvas.getContext('2d');
+    resizedCtx.drawImage(image, 0, 0, resizedWidth, resizedHeight);
+    imageData = resizedCtx.getImageData(0, 0, resizedWidth, resizedHeight);
+  } else {
+    // Standard path: compute smart resize
+    const resized = smartResize(width, height);
+    resizedWidth = resized.width;
+    resizedHeight = resized.height;
+    actualPatchesH = resizedHeight / patchSize;
+    actualPatchesW = resizedWidth / patchSize;
+    // Create canvas at actual resized dimensions
+    const resizedCanvas = document.createElement('canvas');
+    resizedCanvas.width = resizedWidth;
+    resizedCanvas.height = resizedHeight;
+    const resizedCtx = resizedCanvas.getContext('2d');
+    resizedCtx.drawImage(image, 0, 0, resizedWidth, resizedHeight);
+    imageData = resizedCtx.getImageData(0, 0, resizedWidth, resizedHeight);
+  }
+  const numTiles = 1;
+  const pixelValues = new Float32Array(numTiles * maxPatchesPerTile * patchDim);
+  const attentionMask = new BigInt64Array(numTiles * maxPatchesPerTile);
+  const spatialShapes = new BigInt64Array(numTiles * 2);
+  extractPatchesFromVariableSize(imageData, pixelValues, attentionMask, 0, actualPatchesH, actualPatchesW, maxPatchesPerTile);
+  spatialShapes[0] = BigInt(actualPatchesH);
+  spatialShapes[1] = BigInt(actualPatchesW);
+  return {
+    pixelValues,
+    attentionMask,
+    spatialShapes,
+    numTiles,
+    shape: [numTiles, maxPatchesPerTile, patchDim],
+  };
+}
+/**
+ * Extract patches from a full 512x512 tile (all patches are valid)
+ * @param {ImageData} tileData - Tile image data (512x512)
+ * @param {Float32Array} pixelValues - Output pixel values array
+ * @param {BigInt64Array} attentionMask - Output attention mask array
+ * @param {number} tileIdx - Index of this tile
+ * @param {number} patchesPerSide - Number of patches per side (32 for 512x512)
+ * @param {number} maxPatchesPerTile - Max patches per tile for array indexing (1024)
+ */
+function extractPatchesFromFullTile(tileData, pixelValues, attentionMask, tileIdx, patchesPerSide, maxPatchesPerTile) {
+  const patchSize = CONFIG.patchSize;
+  const patchDim = patchSize * patchSize * 3;
+  const tileWidth = tileData.width;
+  const pixels = tileData.data;
+  const tileOffset = tileIdx * maxPatchesPerTile * patchDim;
+  const maskOffset = tileIdx * maxPatchesPerTile;
+  let patchIdx = 0;
+  for (let py = 0; py < patchesPerSide; py++) {
+    for (let px = 0; px < patchesPerSide; px++) {
+      const patchStartX = px * patchSize;
+      const patchStartY = py * patchSize;
+      // All patches in full tile are valid
+      attentionMask[maskOffset + patchIdx] = 1n;
+      // Extract and normalize patch pixels using pre-computed constants
+      const patchOffset = tileOffset + patchIdx * patchDim;
+      let outIdx = 0;
+      // Flatten patch: iterate over pixels in patch, then channels
+      // Optimized: srcIdx calculated once per pixel, use pre-computed normalization
+      for (let dy = 0; dy < patchSize; dy++) {
+        const rowOffset = (patchStartY + dy) * tileWidth;
+        for (let dx = 0; dx < patchSize; dx++) {
+          const srcIdx = (rowOffset + patchStartX + dx) * 4;
+          // Optimized normalization: pixel * (1/127.5) - 1.0
+          pixelValues[patchOffset + outIdx++] = pixels[srcIdx] * NORM_SCALE + NORM_OFFSET;
+          pixelValues[patchOffset + outIdx++] = pixels[srcIdx + 1] * NORM_SCALE + NORM_OFFSET;
+          pixelValues[patchOffset + outIdx++] = pixels[srcIdx + 2] * NORM_SCALE + NORM_OFFSET;
+        }
+      }
+      patchIdx++;
+    }
+  }
+}
+/**
+ * Extract patches from variable-sized image and pad to maxPatchesPerTile
+ * Matches Python's convert_image_to_patches + pad_along_first_dim
+ * @param {ImageData} imageData - Image data at actual dimensions
+ * @param {Float32Array} pixelValues - Output pixel values array
+ * @param {BigInt64Array} attentionMask - Output attention mask array
+ * @param {number} tileIdx - Index of this tile
+ * @param {number} patchesH - Number of patches in height
+ * @param {number} patchesW - Number of patches in width
+ * @param {number} maxPatchesPerTile - Max patches per tile for padding (1024)
+ */
+function extractPatchesFromVariableSize(imageData, pixelValues, attentionMask, tileIdx, patchesH, patchesW, maxPatchesPerTile) {
+  const patchSize = CONFIG.patchSize;
+  const patchDim = patchSize * patchSize * 3;
+  const imageWidth = imageData.width;
+  const pixels = imageData.data;
+  const tileOffset = tileIdx * maxPatchesPerTile * patchDim;
+  const maskOffset = tileIdx * maxPatchesPerTile;
+  const actualPatches = patchesH * patchesW;
+  // Extract actual patches
+  let patchIdx = 0;
+  for (let py = 0; py < patchesH; py++) {
+    for (let px = 0; px < patchesW; px++) {
+      const patchStartX = px * patchSize;
+      const patchStartY = py * patchSize;
+      // Mark as valid
+      attentionMask[maskOffset + patchIdx] = 1n;
+      // Extract and normalize patch pixels using pre-computed constants
+      const patchOffset = tileOffset + patchIdx * patchDim;
+      let outIdx = 0;
+      // Flatten patch: iterate over pixels in patch, then channels
+      // Optimized: srcIdx calculated once per pixel, use pre-computed normalization
+      for (let dy = 0; dy < patchSize; dy++) {
+        const rowOffset = (patchStartY + dy) * imageWidth;
+        for (let dx = 0; dx < patchSize; dx++) {
+          const srcIdx = (rowOffset + patchStartX + dx) * 4;
+          // Optimized normalization: pixel * (1/127.5) - 1.0
+          pixelValues[patchOffset + outIdx++] = pixels[srcIdx] * NORM_SCALE + NORM_OFFSET;
+          pixelValues[patchOffset + outIdx++] = pixels[srcIdx + 1] * NORM_SCALE + NORM_OFFSET;
+          pixelValues[patchOffset + outIdx++] = pixels[srcIdx + 2] * NORM_SCALE + NORM_OFFSET;
+        }
+      }
+      patchIdx++;
+    }
+  }
+  // Pad remaining patches with zeros and mask = 0
+  for (let i = actualPatches; i < maxPatchesPerTile; i++) {
+    attentionMask[maskOffset + i] = 0n;
+    // pixelValues already initialized to 0
+  }
+}
+/**
+ * Load an image from URL or data URL
+ * @param {string} src - Image URL or data URL
+ * @returns {Promise<HTMLImageElement>}
+ */
+export function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+}

webgpu-inference.js ADDED Viewed

	@@ -0,0 +1,192 @@

+/**
+ * WebGPU Inference Wrapper
+ * Provides a clean interface between the app and the VL model
+ */
+import { VLModel, clearModelCache, getCacheInfo, setDebug } from './vl-model.js';
+import { getModelConfig } from './config.js';
+// Expose debug toggle on window for browser console access
+window.setDebug = setDebug;
+// Re-export cache utilities
+export { clearModelCache, getCacheInfo, setDebug };
+export class WebGPUInference {
+  constructor() {
+    this.model = null;
+    this.currentModelId = null;
+    this.isLoading = false;
+    this.isReady = false;
+  }
+  /**
+   * Load a model
+   * @param {string} modelId - Model ID from config
+   * @param {object} options - Loading options
+   * @param {function} options.progressCallback - Progress callback
+   */
+  async loadModel(modelId, options = {}) {
+    if (this.isLoading) {
+      throw new Error('Model is already loading');
+    }
+    if (this.currentModelId === modelId && this.isReady) {
+      return;
+    }
+    this.isLoading = true;
+    this.isReady = false;
+    try {
+      const modelConfig = getModelConfig(modelId);
+      if (!modelConfig) {
+        throw new Error(`Model configuration not found: ${modelId}`);
+      }
+      // Dispose old model if exists
+      if (this.model) {
+        this.model.dispose();
+        this.model = null;
+      }
+      // Create new model instance
+      this.model = new VLModel();
+      // Load the model with quantization from config
+      await this.model.load(modelConfig.path, {
+        device: 'webgpu',
+        quantization: modelConfig.quantization || { decoder: null, visionEncoder: null },
+        progressCallback: options.progressCallback,
+      });
+      this.currentModelId = modelId;
+      this.isReady = true;
+    } catch (error) {
+      this.model = null;
+      this.currentModelId = null;
+      this.isReady = false;
+      throw error;
+    } finally {
+      this.isLoading = false;
+    }
+  }
+  /**
+   * Generate a response from messages
+   * @param {Array<Object>} messages - Array of message objects with role and content
+   * @param {object} options - Generation options
+   * @param {function} options.onToken - Token callback for streaming
+   * @returns {Promise<string>} Generated response
+   */
+  async generate(messages, options = {}) {
+    if (!this.isReady || !this.model) {
+      throw new Error('Model not loaded. Please load a model first.');
+    }
+    // Convert app message format to VL model format
+    const { vlMessages, images, messageImageMap } = this.convertMessages(messages);
+    // Generate response
+    return await this.model.generate(vlMessages, {
+      maxNewTokens: options.maxNewTokens || 512,
+      images: images,
+      messageImageMap: messageImageMap,
+      onToken: options.onToken,
+    });
+  }
+  /**
+   * Convert app message format to VL model format
+   * @param {Array<Object>} messages - App messages
+   * @returns {{vlMessages: Array, images: Array<string>, messageImageMap: Map}}
+   */
+  convertMessages(messages) {
+    const vlMessages = [];
+    const images = [];
+    const messageImageMap = new Map();
+    for (const message of messages) {
+      const { role, content } = message;
+      if (typeof content === 'string') {
+        vlMessages.push({ role, content });
+      } else if (Array.isArray(content)) {
+        let textContent = '';
+        const messageImages = [];
+        for (const item of content) {
+          if (item.type === 'text') {
+            textContent += item.value;
+          } else if (item.type === 'image') {
+            messageImages.push(item.value);
+            images.push(item.value);
+          }
+        }
+        if (textContent.trim() || messageImages.length > 0) {
+          if (messageImages.length > 0) {
+            messageImageMap.set(vlMessages.length, messageImages);
+          }
+          vlMessages.push({ role, content: textContent || '' });
+        }
+      } else {
+        vlMessages.push({ role, content: String(content || '') });
+      }
+    }
+    return { vlMessages, images, messageImageMap };
+  }
+  /**
+   * Check if a model is loaded
+   * @returns {boolean}
+   */
+  isModelLoaded() {
+    return this.isReady;
+  }
+  /**
+   * Get current model ID
+   * @returns {string|null}
+   */
+  getCurrentModelId() {
+    return this.currentModelId;
+  }
+  /**
+   * Clear the image embedding cache
+   */
+  clearImageCache() {
+    if (this.model) {
+      this.model.clearImageCache();
+    }
+  }
+  /**
+   * Dispose the model and free resources
+   */
+  dispose() {
+    if (this.model) {
+      this.model.dispose();
+      this.model = null;
+    }
+    this.currentModelId = null;
+    this.isReady = false;
+  }
+}
+// Singleton instance
+let webgpuInstance = null;
+/**
+ * Get the WebGPU inference singleton
+ * @returns {WebGPUInference}
+ */
+export function getWebGPUInference() {
+  if (!webgpuInstance) {
+    webgpuInstance = new WebGPUInference();
+  }
+  return webgpuInstance;
+}