@tryhamster/gerbil 1.0.0-rc.0 → 1.0.0-rc.10

package/dist/{chrome-backend-C5Un08O4.mjs → chrome-backend-CORwaIyC.mjs}

@@ -1,8 +1,8 @@
-import { execSync } from "child_process";
-import { existsSync, mkdirSync, readFileSync, rmSync, unlinkSync, writeFileSync } from "fs";
-import { createServer } from "http";
-import { homedir } from "os";
-import { join } from "path";
+import { execSync } from "node:child_process";
+import { existsSync, mkdirSync, readFileSync, rmSync, unlinkSync, writeFileSync } from "node:fs";
+import { createServer } from "node:http";
+import { homedir } from "node:os";
+import { join } from "node:path";
 import puppeteer from "puppeteer-core";
 
 //#region src/core/chrome-backend.ts
@@ -24,6 +24,29 @@ function getChromeCachedModels() {
 		return [];
 	}
 }
+/** Fetch model context length from HuggingFace (config.json preferred for actual limit) */
+async function fetchContextLength(modelId) {
+	try {
+		const res = await fetch(`https://huggingface.co/${modelId}/raw/main/config.json`);
+		if (res.ok) {
+			const config = await res.json();
+			const textConfig = config.text_config || {};
+			const ctxLen = config.max_position_embeddings || textConfig.max_position_embeddings || config.sliding_window || textConfig.sliding_window || config.max_seq_len || config.max_sequence_length || config.n_ctx || config.n_positions;
+			if (ctxLen) return ctxLen;
+		}
+	} catch {}
+	try {
+		const tokRes = await fetch(`https://huggingface.co/${modelId}/raw/main/tokenizer_config.json`);
+		if (tokRes.ok) {
+			const tokConfig = await tokRes.json();
+			if (tokConfig.model_max_length && tokConfig.model_max_length < 1e6) return tokConfig.model_max_length;
+		}
+	} catch {}
+}
+/** Get file size from HuggingFace tree entry (handles both regular and LFS files) */
+function getFileSize(file) {
+	return file.lfs?.size || file.size || 0;
+}
 /** Fetch model size from HuggingFace API */
 async function fetchModelSize(modelId) {
 	try {
@@ -35,14 +58,18 @@ async function fetchModelSize(modelId) {
 			const fp16 = files.find((f) => f.path.includes("fp16") && f.path.endsWith(".onnx"));
 			const anyOnnx = files.find((f) => f.path.endsWith(".onnx"));
 			const bestFile = q4f16 || q4 || fp16 || anyOnnx;
-			if (bestFile?.size) return bestFile.size;
+			if (bestFile) {
+				const baseName = bestFile.path.replace(".onnx", "");
+				const totalSize = files.filter((f) => f.path === bestFile.path || f.path.startsWith(`${baseName}.onnx_data`)).reduce((sum, f) => sum + getFileSize(f), 0);
+				if (totalSize > 0) return totalSize;
+			}
 		}
 		const res = await fetch(`https://huggingface.co/api/models/${modelId}`);
 		if (res.ok) return (await res.json()).usedStorage;
 	} catch {}
 }
 /** Track a model as cached */
-function trackCachedModel(modelId, sizeBytes) {
+function trackCachedModel(modelId, sizeBytes, contextLength) {
 	try {
 		const dir = join(homedir(), ".gerbil");
 		if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
@@ -52,37 +79,42 @@ function trackCachedModel(modelId, sizeBytes) {
 		if (existing) {
 			existing.lastUsed = now;
 			if (sizeBytes) existing.sizeBytes = sizeBytes;
+			if (contextLength) existing.contextLength = contextLength;
 		} else models.push({
 			modelId,
 			downloadedAt: now,
 			lastUsed: now,
-			sizeBytes
+			sizeBytes,
+			contextLength
 		});
 		writeFileSync(CACHED_MODELS_FILE, JSON.stringify({ models }, null, 2));
-		if (!sizeBytes) fetchModelSize(modelId).then((size) => {
-			if (size) {
-				const updatedModels = getChromeCachedModels();
-				const model = updatedModels.find((m) => m.modelId === modelId);
-				if (model) {
-					model.sizeBytes = size;
-					writeFileSync(CACHED_MODELS_FILE, JSON.stringify({ models: updatedModels }, null, 2));
-				}
+		const needsSize = !(sizeBytes || existing?.sizeBytes);
+		const needsContext = !(contextLength || existing?.contextLength);
+		if (needsSize || needsContext) Promise.all([needsSize ? fetchModelSize(modelId) : Promise.resolve(void 0), needsContext ? fetchContextLength(modelId) : Promise.resolve(void 0)]).then(([size, context]) => {
+			const updatedModels = getChromeCachedModels();
+			const model = updatedModels.find((m) => m.modelId === modelId);
+			if (model) {
+				if (size) model.sizeBytes = size;
+				if (context) model.contextLength = context;
+				writeFileSync(CACHED_MODELS_FILE, JSON.stringify({ models: updatedModels }, null, 2));
 			}
 		}).catch(() => {});
 	} catch {}
 }
-/** Refresh sizes for cached models that don't have them */
+/** Refresh metadata (size, context length) for cached models that need it */
 async function refreshCachedModelSizes() {
 	try {
 		const models = getChromeCachedModels();
-		const needsSize = models.filter((m) => !m.sizeBytes);
-		if (needsSize.length === 0) return;
+		const MIN_EXPECTED_SIZE = 1e6;
+		const needsRefresh = models.filter((m) => !m.sizeBytes || m.sizeBytes < MIN_EXPECTED_SIZE || !m.contextLength);
+		if (needsRefresh.length === 0) return;
 		const batchSize = 3;
-		for (let i = 0; i < needsSize.length; i += batchSize) {
-			const batch = needsSize.slice(i, i + batchSize);
+		for (let i = 0; i < needsRefresh.length; i += batchSize) {
+			const batch = needsRefresh.slice(i, i + batchSize);
 			await Promise.all(batch.map(async (model) => {
-				const size = await fetchModelSize(model.modelId);
+				const [size, context] = await Promise.all([!model.sizeBytes || model.sizeBytes < MIN_EXPECTED_SIZE ? fetchModelSize(model.modelId) : Promise.resolve(void 0), model.contextLength ? Promise.resolve(void 0) : fetchContextLength(model.modelId)]);
 				if (size) model.sizeBytes = size;
+				if (context) model.contextLength = context;
 			}));
 		}
 		writeFileSync(CACHED_MODELS_FILE, JSON.stringify({ models }, null, 2));
@@ -93,8 +125,10 @@ let globalBrowser = null;
 let globalBrowserPromise = null;
 let globalServer = null;
 let globalServerPort = 0;
+let globalServerHtml = "";
 let activePagesCount = 0;
 const MAX_CONCURRENT_PAGES = 5;
+const activeBackends = /* @__PURE__ */ new Set();
 const CHROME_PATHS = {
 	darwin: [
 		"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
@@ -138,7 +172,7 @@ function getChromeFlags(userDataDir, _debuggingPort) {
 	else if (process.platform === "darwin") {} else flags.push("--enable-unsafe-webgpu");
 	return flags;
 }
-function getWorkerPageHTML(modelPath) {
+function getWorkerPageHTML(modelPath, contextLength = 32768, isVision = false) {
 	return `
 <!DOCTYPE html>
 <html>
@@ -148,31 +182,67 @@ function getWorkerPageHTML(modelPath) {
     import {
       AutoTokenizer,
       AutoModelForCausalLM,
+      AutoProcessor,
+      AutoModelForImageTextToText,
+      RawImage,
       TextStreamer,
       InterruptableStoppingCriteria,
-    } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.0";
+      env,
+    } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1";
+
+    // Enable IndexedDB caching (prevents re-downloading models)
+    env.useBrowserCache = true;
+    env.allowLocalModels = false;
 
+    const IS_VISION = ${isVision};
+    
     class ModelPipeline {
       static tokenizer = null;
+      static processor = null;
       static model = null;
       static modelId = "${modelPath}";
+      static isVision = IS_VISION;
 
       static async getInstance(progressCallback) {
-        if (!this.tokenizer) {
-          this.tokenizer = await AutoTokenizer.from_pretrained(this.modelId, {
-            progress_callback: progressCallback,
-          });
-        }
-
-        if (!this.model) {
-          this.model = await AutoModelForCausalLM.from_pretrained(this.modelId, {
-            dtype: "q4f16",
-            device: "webgpu",
-            progress_callback: progressCallback,
-          });
+        if (this.isVision) {
+          // Vision model: use AutoProcessor + AutoModelForImageTextToText
+          if (!this.processor) {
+            this.processor = await AutoProcessor.from_pretrained(this.modelId, {
+              progress_callback: progressCallback,
+            });
+          }
+          if (!this.model) {
+            this.model = await AutoModelForImageTextToText.from_pretrained(this.modelId, {
+              device: "webgpu",
+              progress_callback: progressCallback,
+            });
+          }
+          return { 
+            processor: this.processor, 
+            tokenizer: this.processor.tokenizer, 
+            model: this.model,
+            isVision: true 
+          };
+        } else {
+          // Text model: use AutoTokenizer + AutoModelForCausalLM
+          if (!this.tokenizer) {
+            this.tokenizer = await AutoTokenizer.from_pretrained(this.modelId, {
+              progress_callback: progressCallback,
+            });
+          }
+          if (!this.model) {
+            this.model = await AutoModelForCausalLM.from_pretrained(this.modelId, {
+              dtype: "q4f16",
+              device: "webgpu",
+              progress_callback: progressCallback,
+            });
+          }
+          return { 
+            tokenizer: this.tokenizer, 
+            model: this.model,
+            isVision: false 
+          };
         }
-
-        return { tokenizer: this.tokenizer, model: this.model };
       }
     }
 
@@ -180,16 +250,15 @@ function getWorkerPageHTML(modelPath) {
     let pastKeyValuesCache = null;
     let totalTokensInCache = 0;
     
-    // Context length for auto-reset (Qwen3 default: 2048)
-    // Cache beyond this provides no benefit and wastes memory
-    const CONTEXT_LENGTH = 2048;
+    // Context length for auto-reset (passed from model config)
+    const CONTEXT_LENGTH = ${contextLength};
 
     // Auto-load model on page init
     (async function() {
-      console.log(JSON.stringify({ type: "progress", status: "Loading model..." }));
+      console.log(JSON.stringify({ type: "progress", status: IS_VISION ? "Loading vision model..." : "Loading model..." }));
       
       try {
-        const { tokenizer, model } = await ModelPipeline.getInstance((progress) => {
+        const result = await ModelPipeline.getInstance((progress) => {
           if (progress.status === "progress" && progress.file) {
             console.log(JSON.stringify({
               type: "progress",
@@ -201,20 +270,62 @@ function getWorkerPageHTML(modelPath) {
         });
 
         console.log(JSON.stringify({ type: "progress", status: "Compiling shaders..." }));
-        const warmupInputs = tokenizer("a");
-        await model.generate({ ...warmupInputs, max_new_tokens: 1 });
-
-        console.log(JSON.stringify({ type: "ready" }));
+        
+        // Warmup generation to compile shaders and initialize model
+        // Always do text warmup first
+        const textWarmupInputs = result.tokenizer("hello");
+        await result.model.generate({ ...textWarmupInputs, max_new_tokens: 1 });
+        
+        // Vision models also need vision warmup
+        if (result.isVision) {
+          console.log(JSON.stringify({ type: "progress", status: "Warming up vision encoder..." }));
+          try {
+            // Create a tiny 8x8 red test image
+            const canvas = new OffscreenCanvas(8, 8);
+            const ctx = canvas.getContext('2d');
+            ctx.fillStyle = 'red';
+            ctx.fillRect(0, 0, 8, 8);
+            const blob = await canvas.convertToBlob({ type: 'image/png' });
+            const warmupImage = await RawImage.fromBlob(blob);
+            
+            // Process with vision pipeline
+            const warmupContent = [{ type: "image" }, { type: "text", text: "hi" }];
+            const warmupMessages = [{ role: "user", content: warmupContent }];
+            const warmupPrompt = result.processor.apply_chat_template(warmupMessages);
+            const warmupInputs = await result.processor(warmupImage, warmupPrompt, { add_special_tokens: false });
+            
+            // Run vision warmup generation
+            await result.model.generate({
+              ...warmupInputs,
+              max_new_tokens: 1,
+              do_sample: false,
+            });
+          } catch {
+            // Vision warmup failed, text warmup was done so continue
+          }
+        }
+        
+        // Set page title to model ID for cross-process identification
+        document.title = "Gerbil: " + ModelPipeline.modelId;
+        
+        console.log(JSON.stringify({ type: "ready", isVision: result.isVision }));
       } catch (error) {
         console.log(JSON.stringify({ type: "error", error: error.message || String(error) }));
       }
     })();
 
+    // Text generation (for non-vision models or vision without images)
     window.gerbilGenerate = async function(messages, options = {}) {
-      const { maxTokens = 256, temperature = 0.7, topP = 0.9, topK = 20, thinking = false } = options;
+      const { maxTokens = 256, temperature = 0.7, topP = 0.9, topK = 20, thinking = false, images = [] } = options;
+      
+      const result = await ModelPipeline.getInstance();
+      
+      // Route to vision generation if we have images and this is a vision model
+      if (images.length > 0 && result.isVision) {
+        return window.gerbilGenerateVision(messages, images, options);
+      }
       
       // Auto-reset KV cache if it exceeds context length
-      // This prevents unbounded memory growth while preserving performance
       if (totalTokensInCache > CONTEXT_LENGTH) {
         console.log(JSON.stringify({ 
           type: "cache_reset", 
@@ -227,7 +338,7 @@ function getWorkerPageHTML(modelPath) {
       }
 
       try {
-        const { tokenizer, model } = await ModelPipeline.getInstance();
+        const { tokenizer, model } = result;
 
         const inputs = tokenizer.apply_chat_template(messages, {
           add_generation_prompt: true,
@@ -247,7 +358,7 @@ function getWorkerPageHTML(modelPath) {
 
         const tokenCallback = (tokens) => {
           startTime ??= performance.now();
-          numTokens++;
+          numTokens += 1;
           
           const tokenId = Number(tokens[0]);
           if (tokenId === START_THINKING_TOKEN_ID) {
@@ -260,7 +371,6 @@ function getWorkerPageHTML(modelPath) {
         const streamCallback = (text) => {
           const tps = startTime ? (numTokens / (performance.now() - startTime)) * 1000 : 0;
           
-          // Inject <think> markers when state changes (since skip_special_tokens removes them)
           let outputText = text;
           if (thinking) {
             if (state === "thinking" && prevState !== "thinking") {
@@ -298,14 +408,12 @@ function getWorkerPageHTML(modelPath) {
 
         pastKeyValuesCache = past_key_values;
         
-        // Track total tokens in cache (input + generated)
         const inputLength = inputs.input_ids.dims[1];
         totalTokensInCache += inputLength + numTokens;
 
         const endTime = performance.now();
         const totalTime = startTime ? endTime - startTime : 0;
         
-        // Extract only the generated tokens (exclude input prompt)
         const generatedTokens = sequences.slice(null, [inputLength, null]);
         const decoded = tokenizer.batch_decode(generatedTokens, { skip_special_tokens: true });
 
@@ -325,6 +433,99 @@ function getWorkerPageHTML(modelPath) {
       }
     };
 
+    // Vision generation (for vision models with images)
+    window.gerbilGenerateVision = async function(messages, imageUrls, options = {}) {
+      const { maxTokens = 2048, temperature = 0.7, topP = 0.9, topK = 20 } = options;
+
+      try {
+        const { processor, tokenizer, model } = await ModelPipeline.getInstance();
+
+        // Build message content with image placeholders for the user prompt
+        const lastMessage = messages[messages.length - 1];
+        const content = [];
+        for (let i = 0; i < imageUrls.length; i += 1) {
+          content.push({ type: "image" });
+        }
+        content.push({ type: "text", text: lastMessage.content });
+
+        // For vision models, include a brief system instruction for concise responses
+        const visionMessages = [
+          { role: "system", content: "You are a helpful assistant. Be concise and direct in your responses." },
+          { role: "user", content }
+        ];
+
+        // Apply chat template with generation prompt
+        const chatPrompt = processor.apply_chat_template(visionMessages, { 
+          add_generation_prompt: true 
+        });
+
+        // Load images
+        console.log(JSON.stringify({ type: "progress", status: "Loading images..." }));
+        const loadedImages = await Promise.all(
+          imageUrls.map(url => RawImage.fromURL(url))
+        );
+
+        // Process inputs
+        const inputs = await processor(
+          loadedImages.length === 1 ? loadedImages[0] : loadedImages,
+          chatPrompt,
+          { add_special_tokens: false }
+        );
+
+        let startTime = null;
+        let numTokens = 0;
+
+        const streamCallback = (text) => {
+          startTime ??= performance.now();
+          numTokens += 1;
+          const tps = (numTokens / (performance.now() - startTime)) * 1000;
+          console.log(JSON.stringify({ type: "token", text, state: "answering", numTokens, tps }));
+        };
+
+        const streamer = new TextStreamer(tokenizer, {
+          skip_prompt: true,
+          skip_special_tokens: true,
+          callback_function: streamCallback,
+        });
+
+        console.log(JSON.stringify({ type: "start" }));
+
+        const outputs = await model.generate({
+          ...inputs,
+          max_new_tokens: maxTokens,
+          do_sample: temperature > 0,
+          temperature: temperature > 0 ? temperature : undefined,
+          top_p: topP,
+          top_k: topK,
+          streamer,
+          stopping_criteria: stoppingCriteria,
+        });
+
+        // Decode output (skip prompt)
+        const inputLength = inputs.input_ids.dims?.at(-1) || 0;
+        const decoded = processor.batch_decode(
+          outputs.slice(null, [inputLength, null]),
+          { skip_special_tokens: true }
+        );
+
+        const endTime = performance.now();
+        const totalTime = startTime ? endTime - startTime : 0;
+
+        console.log(JSON.stringify({
+          type: "complete",
+          text: decoded[0] || "",
+          numTokens,
+          totalTime,
+          tps: totalTime > 0 ? (numTokens / totalTime) * 1000 : 0,
+        }));
+
+        return decoded[0] || "";
+      } catch (error) {
+        console.log(JSON.stringify({ type: "error", error: error.message || String(error) }));
+        throw error;
+      }
+    };
+
     window.gerbilInterrupt = function() {
       stoppingCriteria.interrupt();
     };
@@ -351,31 +552,84 @@ var ChromeGPUBackend = class ChromeGPUBackend {
 	browser = null;
 	page = null;
 	cdp = null;
+	server = null;
 	serverPort = 0;
 	userDataDir = GERBIL_CACHE_DIR;
 	modelId;
 	isReady = false;
+	isVisionModel = false;
 	messageHandlers = /* @__PURE__ */ new Map();
 	pendingRejects = [];
-	server = null;
-	constructor(modelId) {
+	constructor(modelId, isVision = false) {
 		this.modelId = modelId;
+		this.isVisionModel = isVision;
 	}
 	/**
 	* Create and initialize a Chrome GPU backend
 	*/
 	static async create(options = {}) {
-		const backend = new ChromeGPUBackend(options.modelId || "onnx-community/Qwen3-0.6B-ONNX");
+		const modelId = options.modelId || "onnx-community/Qwen3-0.6B-ONNX";
+		const backend = new ChromeGPUBackend(modelId, options.isVision ?? ChromeGPUBackend.detectVisionModel(modelId));
 		await backend.launch(options);
 		return backend;
 	}
 	/**
+	* Detect if a model is a vision model based on its ID
+	*/
+	static detectVisionModel(modelId) {
+		return [
+			/ministral/i,
+			/pixtral/i,
+			/llava/i,
+			/vision/i,
+			/vl/i,
+			/image-text/i,
+			/multimodal/i
+		].some((pattern) => pattern.test(modelId));
+	}
+	/**
+	* Check if this backend is for a vision model
+	*/
+	isVision() {
+		return this.isVisionModel;
+	}
+	/**
+	* Clean up orphan Gerbil pages from previous sessions
+	* These are pages that were left behind when process exited without proper cleanup
+	*/
+	async cleanupOrphanPages(browser, options) {
+		try {
+			const gerbilPages = (await browser.pages()).filter((p) => {
+				const url = p.url();
+				return /127\.0\.0\.1:4\d{4}/.test(url);
+			});
+			const orphanCount = gerbilPages.length - activeBackends.size;
+			if (orphanCount > 0) {
+				options.onProgress?.({ status: `Cleaning up ${orphanCount} orphan page(s)...` });
+				for (const page of gerbilPages) {
+					let isOwned = false;
+					for (const backend of activeBackends) if (backend.page === page) {
+						isOwned = true;
+						break;
+					}
+					if (!isOwned) try {
+						await page.close();
+					} catch {}
+				}
+			}
+			return orphanCount;
+		} catch {
+			return 0;
+		}
+	}
+	/**
 	* Get existing browser or launch a new one (singleton pattern)
 	* Multiple Gerbil instances share the same browser process
 	*/
 	async getOrCreateBrowser(chromePath, options) {
 		if (globalBrowser?.connected) {
 			options.onProgress?.({ status: "Reusing existing Chrome..." });
+			await this.cleanupOrphanPages(globalBrowser, options);
 			return globalBrowser;
 		}
 		if (globalBrowserPromise) {
@@ -386,6 +640,7 @@ var ChromeGPUBackend = class ChromeGPUBackend {
 			const wsEndpoint = readFileSync(WS_ENDPOINT_FILE, "utf-8").trim();
 			options.onProgress?.({ status: "Connecting to existing Chrome..." });
 			globalBrowser = await puppeteer.connect({ browserWSEndpoint: wsEndpoint });
+			await this.cleanupOrphanPages(globalBrowser, options);
 			return globalBrowser;
 		} catch {
 			try {
@@ -443,16 +698,17 @@ var ChromeGPUBackend = class ChromeGPUBackend {
 		const chromePath = options.chromePath || findChrome();
 		this.userDataDir = GERBIL_CACHE_DIR;
 		if (!existsSync(this.userDataDir)) mkdirSync(this.userDataDir, { recursive: true });
-		const html = getWorkerPageHTML(this.modelId);
+		const contextLength = options.contextLength || 32768;
+		const html = getWorkerPageHTML(this.modelId, contextLength, this.isVisionModel);
 		await this.startServer(html);
 		options.onProgress?.({ status: "Starting Chrome..." });
 		this.browser = await this.getOrCreateBrowser(chromePath, options);
 		this.page = await this.browser.newPage();
 		this.cdp = await this.page.createCDPSession();
-		activePagesCount++;
+		activePagesCount += 1;
+		activeBackends.add(this);
 		options.onProgress?.({ status: `Active pages: ${activePagesCount}/${MAX_CONCURRENT_PAGES}` });
 		this.browser.on("disconnected", () => {
-			console.error("[Chrome] Browser disconnected unexpectedly");
 			this.isReady = false;
 			this.browser = null;
 			this.page = null;
@@ -470,13 +726,12 @@ var ChromeGPUBackend = class ChromeGPUBackend {
 				if (text.length < 500 && !text.includes("Float32Array") && !text.includes("past_key_values")) {}
 			}
 			else if (event.type === "error" || event.type === "warning") {
-				if (!(text.includes("onnxruntime") || text.includes("content-length") || text.includes("Float32Array") || text.includes("past_key_values")) && text.length < 1e3) console.error(`[Chrome ${event.type}]`, text);
+				if (!(text.includes("onnxruntime") || text.includes("content-length") || text.includes("Float32Array") || text.includes("past_key_values")) && text.length < 1e3) {}
 			}
 		});
 		this.cdp.on("Runtime.exceptionThrown", (event) => {
 			const errText = event.exceptionDetails?.text || event.exceptionDetails?.exception?.description || "";
 			if (errText.includes("Float32Array") || errText.includes("past_key_values") || errText.length > 1e3) return;
-			console.error("[Chrome Exception]", errText);
 		});
 		await this.page.goto(`http://127.0.0.1:${this.serverPort}/`, {
 			waitUntil: "domcontentloaded",
@@ -564,9 +819,7 @@ var ChromeGPUBackend = class ChromeGPUBackend {
 	async checkMemoryAndCleanup(thresholdGB = 8) {
 		const mem = await this.getMemoryUsage();
 		if (!mem) return false;
-		const usedGB = mem.jsHeapUsed / 1024 ** 3;
-		if (usedGB > thresholdGB) {
-			console.warn(`[Gerbil] Memory usage high (${usedGB.toFixed(1)}GB > ${thresholdGB}GB), clearing KV cache...`);
+		if (mem.jsHeapUsed / 1024 ** 3 > thresholdGB) {
 			await this.reset();
 			return true;
 		}
@@ -597,15 +850,16 @@ var ChromeGPUBackend = class ChromeGPUBackend {
 			content: prompt
 		}];
 		const genOptions = {
-			maxTokens: options.maxTokens ?? 256,
+			maxTokens: options.maxTokens ?? (this.isVisionModel ? 2048 : 256),
 			temperature: options.temperature ?? .7,
 			topP: options.topP ?? .9,
 			topK: options.topK ?? 20,
-			thinking: options.thinking ?? false
+			thinking: options.thinking ?? false,
+			images: options.images ?? []
 		};
 		if (options.onToken) this.messageHandlers.set("token", options.onToken);
 		try {
-			const resultPromise = this.page.evaluate((msgs, opts) => window.gerbilGenerate(msgs, opts), messages, genOptions);
+			const resultPromise = this.page?.evaluate((msgs, opts) => window.gerbilGenerate(msgs, opts), messages, genOptions);
 			const completeData = await this.waitForMessage("complete", 6e5);
 			this.messageHandlers.delete("token");
 			await resultPromise;
@@ -636,8 +890,10 @@ var ChromeGPUBackend = class ChromeGPUBackend {
 	/**
 	* Start or reuse the global HTTP server
 	* Uses singleton pattern to prevent killing our own server
+	* Updates HTML content for new model loads
 	*/
 	async startServer(html) {
+		globalServerHtml = html;
 		if (globalServer && globalServerPort) {
 			this.server = globalServer;
 			this.serverPort = globalServerPort;
@@ -646,7 +902,7 @@ var ChromeGPUBackend = class ChromeGPUBackend {
 		return new Promise((resolve, reject) => {
 			const server = createServer((_req, res) => {
 				res.writeHead(200, { "Content-Type": "text/html" });
-				res.end(html);
+				res.end(globalServerHtml);
 			});
 			server.on("error", (err) => {
 				if (err.code === "EADDRINUSE") {
@@ -667,21 +923,36 @@ var ChromeGPUBackend = class ChromeGPUBackend {
 	/**
 	* Dispose of the backend and clean up
 	* Note: We keep the shared browser running for other backends
+	* @param disconnect If true, also disconnect from shared browser (for clean script exit)
 	*/
-	async dispose() {
+	async dispose(disconnect = false) {
 		this.isReady = false;
 		this.pendingRejects = [];
 		this.messageHandlers.clear();
+		if (this.cdp) {
+			try {
+				await this.cdp.detach();
+			} catch {}
+			this.cdp = null;
+		}
 		if (this.page) {
 			try {
-				await this.page.close();
+				await this.page.goto("about:blank").catch(() => {});
+				await new Promise((r) => setTimeout(r, 50));
+				await this.page.close({ runBeforeUnload: false });
 				activePagesCount = Math.max(0, activePagesCount - 1);
 			} catch {}
 			this.page = null;
 		}
-		this.cdp = null;
+		activeBackends.delete(this);
 		this.browser = null;
 		this.server = null;
+		if (disconnect) await new Promise((r) => setTimeout(r, 100));
+		if (disconnect && activeBackends.size === 0 && globalBrowser) try {
+			globalBrowser.disconnect();
+			globalBrowser = null;
+			globalBrowserPromise = null;
+		} catch {}
 	}
 	/**
 	* Reject all pending waits (called on browser disconnect or dispose)
@@ -716,6 +987,176 @@ var ChromeGPUBackend = class ChromeGPUBackend {
 		};
 	}
 	/**
+	* Get global browser status (even if no active backends)
+	*/
+	static getGlobalBrowserStatus() {
+		let pid = null;
+		let wsEndpoint = null;
+		if (globalBrowser?.connected) {
+			const browserProcess = globalBrowser.process?.();
+			if (browserProcess?.pid) pid = browserProcess.pid;
+			wsEndpoint = globalBrowser.wsEndpoint();
+		}
+		return {
+			running: globalBrowser?.connected ?? false,
+			pid,
+			port: globalServerPort,
+			activePagesCount,
+			maxPages: MAX_CONCURRENT_PAGES,
+			wsEndpoint
+		};
+	}
+	/**
+	* Get total page count from Chrome (all processes)
+	*/
+	static async getTotalPageCount() {
+		if (!globalBrowser?.connected) return 0;
+		try {
+			return (await globalBrowser.pages()).filter((p) => {
+				return p.url().includes(`127.0.0.1:${globalServerPort}`);
+			}).length;
+		} catch {
+			return 0;
+		}
+	}
+	/**
+	* Get all active backends with their memory usage (this process only)
+	*/
+	static async getAllBackendsInfo() {
+		const results = [];
+		for (const backend of activeBackends) {
+			const mem = await backend.getMemoryStats();
+			results.push({
+				modelId: backend.modelId,
+				isVision: backend.isVisionModel,
+				isReady: backend.isReady,
+				memory: mem
+			});
+		}
+		return results;
+	}
+	/**
+	* Get ALL pages in Chrome browser (cross-process visibility)
+	* This shows pages from ALL Gerbil processes sharing the browser
+	*/
+	static async getAllChromePages() {
+		if (!globalBrowser?.connected) return [];
+		try {
+			const pages = await globalBrowser.pages();
+			const results = [];
+			for (const page of pages) {
+				const url = page.url();
+				const title = await page.title().catch(() => "");
+				if (url === "about:blank" || !url.includes(`127.0.0.1:${globalServerPort}`)) continue;
+				let modelId = null;
+				let isOurs = false;
+				let memory = null;
+				for (const backend of activeBackends) if (backend.page === page) {
+					isOurs = true;
+					modelId = backend.modelId;
+					const mem = await backend.getMemoryStats();
+					if (mem) memory = {
+						usedGB: mem.usedGB,
+						totalGB: mem.totalGB
+					};
+					break;
+				}
+				if (!isOurs) {
+					if (title.startsWith("Gerbil: ")) modelId = title.replace("Gerbil: ", "");
+					try {
+						const cdp = await page.createCDPSession();
+						await cdp.send("Performance.enable");
+						const { metrics } = await cdp.send("Performance.getMetrics");
+						const jsHeapUsed = metrics.find((m) => m.name === "JSHeapUsedSize")?.value ?? 0;
+						const jsHeapTotal = metrics.find((m) => m.name === "JSHeapTotalSize")?.value ?? 0;
+						memory = {
+							usedGB: jsHeapUsed / 1024 ** 3,
+							totalGB: jsHeapTotal / 1024 ** 3
+						};
+						await cdp.detach();
+					} catch {}
+				}
+				results.push({
+					url,
+					title: title || "Gerbil WebGPU Backend",
+					isOurs,
+					modelId,
+					memory
+				});
+			}
+			return results;
+		} catch {
+			return [];
+		}
+	}
+	/**
+	* Kill a Chrome page by index (works cross-process)
+	*/
+	static async killPageByIndex(index) {
+		if (!globalBrowser?.connected) return false;
+		try {
+			const gerbilPages = (await globalBrowser.pages()).filter((p) => {
+				return p.url().includes(`127.0.0.1:${globalServerPort}`);
+			});
+			if (index < 0 || index >= gerbilPages.length) return false;
+			const page = gerbilPages[index];
+			for (const backend of activeBackends) if (backend.page === page) {
+				await backend.dispose();
+				return true;
+			}
+			await page.close();
+			return true;
+		} catch {
+			return false;
+		}
+	}
+	/**
+	* Kill a specific backend by index (this process only)
+	*/
+	static async killBackendByIndex(index) {
+		const backends = [...activeBackends];
+		if (index < 0 || index >= backends.length) return false;
+		const backend = backends[index];
+		try {
+			await backend.dispose();
+			return true;
+		} catch {
+			return false;
+		}
+	}
+	/**
+	* Force kill all backends (for zombie cleanup)
+	*/
+	static async killAllBackends() {
+		const count = activeBackends.size;
+		for (const backend of [...activeBackends]) try {
+			await backend.dispose();
+		} catch {}
+		activeBackends.clear();
+		let browserKilled = false;
+		if (globalBrowser) {
+			try {
+				await globalBrowser.close();
+				browserKilled = true;
+			} catch {}
+			globalBrowser = null;
+			globalBrowserPromise = null;
+		}
+		if (globalServer) {
+			globalServer.close();
+			globalServer = null;
+			globalServerPort = 0;
+		}
+		activePagesCount = 0;
+		try {
+			unlinkSync(WS_ENDPOINT_FILE);
+		} catch {}
+		return {
+			pagesKilled: count,
+			browserKilled
+		};
+	}
+	/**
 	* Gracefully close the shared browser (call on process exit)
 	*/
 	static async closeSharedBrowser() {
@@ -768,4 +1209,4 @@ registerCleanup();
 
 //#endregion
 export { trackCachedModel as i, getChromeCachedModels as n, refreshCachedModelSizes as r, ChromeGPUBackend as t };
-//# sourceMappingURL=chrome-backend-C5Un08O4.mjs.map
+//# sourceMappingURL=chrome-backend-CORwaIyC.mjs.map