Wire VLM toggle + result badge across all tools (02-19 + obs)

Each tool now routes API calls through getVLMClient() so switching between Moondream and GPT-4o-mini in the toggle actually changes the engine used. Added vlm-result-badge.js script to all index.html files. Fixed containerSelector from .control-panel h2 to .app-header h1 so the toggle actually renders. Added VLMResultBadge.showCurrent(elapsed) after API results to show which engine produced the output. Tools 15 (Whisper) and 04b (Tesseract) only got the script tag since they don't make VLM calls.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

Author: streamgeeks

02-detection-boxes/app.js

@@ -26,6 +26,12 @@ document.addEventListener('DOMContentLoaded', async function() {
     let isRunning = false;
     let detectionResults = {};
 
+    // VLM-aware client helper: routes through toggle when available
+    function getVLMClient() {
+        if (window.vlmToggle) return window.vlmToggle.getClient();
+        return client;
+    }
+
     const DEFAULT_COLORS = ['#93CCEA', '#2A9D8F', '#E9C46A', '#E76F51', '#9B5DE5', '#F72585'];
 
     const DEFAULT_OBJECTS = [
@@ -55,7 +61,7 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     // Initialize VLM Toggle
     window.vlmToggle = new VLMToggle({
-        containerSelector: '.control-panel h2',
+        containerSelector: '.app-header h1',
         toolId: 'detection-boxes',
         onChange: (engine) => {
             window.reasoningConsole.logInfo('Switched to ' + engine + ' VLM');
@@ -229,9 +235,10 @@ document.addEventListener('DOMContentLoaded', async function() {
     }
 
     async function detectAll() {
-        if (!client) {
+        const activeClient = getVLMClient();
+        if (!activeClient) {
             window.reasoningConsole.logError('No API key configured');
-            updateStatus('Please configure your API key', true);
+            updateStatus('Please configure an API key', true);
             window.apiKeyManager.showModal();
             return;
         }
@@ -252,7 +259,7 @@ document.addEventListener('DOMContentLoaded', async function() {
         try {
             const promises = enabledObjects.map(async (obj) => {
                 try {
-                    const result = await client.detectInVideo(video, obj.name);
+                    const result = await activeClient.detectInVideo(video, obj.name);
                     detectionResults[obj.name] = {
                         objects: result.objects,
                         color: obj.color
@@ -288,6 +295,7 @@ document.addEventListener('DOMContentLoaded', async function() {
                 updateStatus(`No objects found (${elapsed}ms)`);
             }
 
+            VLMResultBadge.showCurrent(elapsed);
         } catch (error) {
             window.reasoningConsole.logError(error.message);
             updateStatus('Error: ' + error.message, true);

02-detection-boxes/index.html

@@ -216,6 +216,7 @@ <h4>Box Style</h4>
     <script src="../shared/video-source-adapter.js"></script>
     <script src="../shared/openai-client.js"></script>
     <script src="../shared/vlm-toggle.js"></script>
+    <script src="../shared/vlm-result-badge.js"></script>
     <script src="app.js"></script>
     <script src="../shared/ux-utils.js"></script>
     <script src="../shared/playground-header.js"></script>

03-gesture-obs/app.js

@@ -30,6 +30,12 @@ document.addEventListener('DOMContentLoaded', async function() {
     let detectionLoopId = null;
     let isDetecting = false;
 
+    // VLM-aware client helper: routes through toggle when available
+    function getVLMClient() {
+        if (window.vlmToggle) return window.vlmToggle.getClient();
+        return moondreamClient;
+    }
+
     let lastActionTime = 0;
     let thumbsUpDetections = 0;
     let thumbsDownDetections = 0;
@@ -52,7 +58,7 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     // Initialize VLM Toggle
     window.vlmToggle = new VLMToggle({
-        containerSelector: '.control-panel h2',
+        containerSelector: '.app-header h1',
         toolId: 'gesture-obs',
         onChange: (engine) => {
             window.reasoningConsole.logInfo('Switched to ' + engine + ' VLM');
@@ -223,12 +229,12 @@ document.addEventListener('DOMContentLoaded', async function() {
     }
 
     async function detectGesture(gestureDescription) {
-        if (!moondreamClient) return { detected: false, confidence: 0 };
+        if (!getVLMClient()) return { detected: false, confidence: 0 };
 
         const prompt = `Look at this image carefully. Is there a ${gestureDescription} gesture clearly visible? Answer with only YES or NO.`;
 
         try {
-            const result = await moondreamClient.askVideo(video, prompt);
+            const result = await getVLMClient().askVideo(video, prompt);
             const answer = result.answer.toUpperCase().trim();
             const detected = answer.includes('YES');
 
@@ -365,8 +371,8 @@ document.addEventListener('DOMContentLoaded', async function() {
     }
 
     function startDetection() {
-        if (!moondreamClient) {
-            window.reasoningConsole.logError('Please configure Moondream API key first');
+        if (!getVLMClient()) {
+            window.reasoningConsole.logError('Please configure an API key first');
             window.apiKeyManager.showModal();
             return;
         }

03-gesture-obs/index.html

@@ -662,6 +662,7 @@ <h3>📋 Activity Log</h3>
     <script src="obs-client.js"></script>
     <script src="../shared/openai-client.js"></script>
     <script src="../shared/vlm-toggle.js"></script>
+    <script src="../shared/vlm-result-badge.js"></script>
     <script src="app.js"></script>
     <script src="../shared/ux-utils.js"></script>
     <script src="../shared/playground-header.js"></script>

04-scoreboard-extractor/app.js

@@ -22,6 +22,12 @@ document.addEventListener('DOMContentLoaded', async function() {
     let currentStream = null;
     let extractionLoopId = null;
     let isExtracting = false;
+
+    // VLM-aware client helper
+    function getVLMClient() {
+        if (window.vlmToggle) return window.vlmToggle.getClient();
+        return client;
+    }
 
     let stats = {
         extractions: 0,
@@ -48,7 +54,7 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     // Initialize VLM Toggle
     window.vlmToggle = new VLMToggle({
-        containerSelector: '.side-panel h3',
+        containerSelector: '.app-header h1',
         toolId: 'scoreboard-extractor',
         onChange: (engine) => {
             window.reasoningConsole.logInfo('Switched to ' + engine + ' VLM');
@@ -164,7 +170,8 @@ document.addEventListener('DOMContentLoaded', async function() {
     }
 
     async function extractScoreboard() {
-        if (!client) {
+        const activeClient = getVLMClient();
+        if (!activeClient) {
             window.reasoningConsole.logError('No API key configured');
             window.apiKeyManager.showModal();
             return null;
@@ -186,8 +193,9 @@ Return ONLY valid JSON with no other text:
             window.reasoningConsole.logApiCall('/query', 0);
             updateStatus('Extracting...', true);
 
-            const result = await client.askVideo(video, prompt);
+            const result = await activeClient.askVideo(video, prompt);
             const elapsed = Date.now() - startTime;
+            VLMResultBadge.showCurrent(elapsed);
 
             window.reasoningConsole.logInfo(`Response: ${result.answer}`);
 
@@ -237,8 +245,8 @@ Return ONLY valid JSON with no other text:
     }
 
     function startExtraction() {
-        if (!client) {
-            window.reasoningConsole.logError('Please configure Moondream API key first');
+        if (!getVLMClient()) {
+            window.reasoningConsole.logError('Please configure an API key first');
             window.apiKeyManager.showModal();
             return;
         }

04-scoreboard-extractor/index.html

@@ -447,6 +447,7 @@ <h3>⚙️ Settings</h3>
     <script src="../shared/video-source-adapter.js"></script>
     <script src="../shared/openai-client.js"></script>
     <script src="../shared/vlm-toggle.js"></script>
+    <script src="../shared/vlm-result-badge.js"></script>
     <script src="app.js"></script>
     <script src="../shared/ux-utils.js"></script>
     <script src="../shared/playground-header.js"></script>

04b-scoreboard-ocr/index.html

@@ -555,6 +555,7 @@ <h3>⚙️ Controls</h3>
     <script src="../shared/video-source-adapter.js"></script>
     <script src="../shared/openai-client.js"></script>
     <script src="../shared/vlm-toggle.js"></script>
+    <script src="../shared/vlm-result-badge.js"></script>
     <script src="app.js"></script>
     <script src="../shared/ux-utils.js"></script>
     <script src="../shared/playground-header.js"></script>

05-smart-counter/app.js

@@ -27,6 +27,12 @@ document.addEventListener('DOMContentLoaded', async function() {
     let client = null;
     let countingLoop = null;
     let isRunning = false;
+
+    // VLM-aware client helper
+    function getVLMClient() {
+        if (window.vlmToggle) return window.vlmToggle.getClient();
+        return client;
+    }
 
     let currentCount = 0;
     let totalEntries = 0;
@@ -50,7 +56,7 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     // Initialize VLM Toggle
     window.vlmToggle = new VLMToggle({
-        containerSelector: '.control-panel h2',
+        containerSelector: '.app-header h1',
         toolId: 'smart-counter',
         onChange: (engine) => {
             window.reasoningConsole.logInfo('Switched to ' + engine + ' VLM');
@@ -190,8 +196,9 @@ document.addEventListener('DOMContentLoaded', async function() {
         const startTime = Date.now();
 
         try {
-            const result = await client.detectInVideo(video, targetInput.value);
+            const result = await getVLMClient().detectInVideo(video, targetInput.value);
             const latency = Date.now() - startTime;
+            VLMResultBadge.showCurrent(latency);
             const linePos = parseInt(linePositionSlider.value) / 100;
             const isLeftToRight = directionSelect.value === 'left-to-right';
 

05-smart-counter/index.html

@@ -152,6 +152,7 @@ <h2>Settings</h2>
     <script src="../shared/video-source-adapter.js"></script>
     <script src="../shared/openai-client.js"></script>
     <script src="../shared/vlm-toggle.js"></script>
+    <script src="../shared/vlm-result-badge.js"></script>
     <script src="app.js"></script>
     <script src="../shared/ux-utils.js"></script>
     <script src="../shared/playground-header.js"></script>

06-scene-analyzer/app.js

@@ -20,6 +20,12 @@ document.addEventListener('DOMContentLoaded', async function() {
     let totalResponseTime = 0;
     let currentStream = null;
 
+    // VLM-aware client helper
+    function getVLMClient() {
+        if (window.vlmToggle) return window.vlmToggle.getClient();
+        return client;
+    }
+
     window.apiKeyManager = new APIKeyManager({
         requireMoondream: true,
         requireOpenAI: false,
@@ -34,7 +40,7 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     // Initialize VLM Toggle
     window.vlmToggle = new VLMToggle({
-        containerSelector: '.control-panel h2',
+        containerSelector: '.app-header h1',
         toolId: 'scene-analyzer',
         onChange: (engine) => {
             window.reasoningConsole.logInfo('Switched to ' + engine + ' VLM');
@@ -167,7 +173,7 @@ document.addEventListener('DOMContentLoaded', async function() {
         const startTime = Date.now();
 
         try {
-            const result = await client.ask(currentSnapshot, question);
+            const result = await getVLMClient().ask(currentSnapshot, question);
             const elapsed = Date.now() - startTime;
 
             window.reasoningConsole.logApiCall('/ask', elapsed);
@@ -179,6 +185,7 @@ document.addEventListener('DOMContentLoaded', async function() {
 
             addMessage('assistant', result.answer);
             updateStatus(`Answered in ${elapsed}ms`);
+            VLMResultBadge.showCurrent(elapsed);
             window.reasoningConsole.logDecision('Answer generated', `Response time: ${elapsed}ms`);
 
         } catch (error) {