Spaces:
Running
Running
| <html lang="en" data-theme="light"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>OpenVLHarness</title> | |
| <meta name="description" content="Demo of OpenVLHarness: a visual tool-use agent running on your own model."> | |
| <!-- Backend snapshot; demo.js discovers the current URL from the original shared demo page. --> | |
| <meta name="ovh-demo-server" content="https://trackbacks-powerful-barry-champion.trycloudflare.com"> | |
| <link rel="preconnect" href="https://trackbacks-powerful-barry-champion.trycloudflare.com"> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 32 32%22%3E%3Cdefs%3E%3CclipPath id%3D%22c%22%3E%3Crect x%3D%2210%22 y%3D%2210%22 width%3D%2212%22 height%3D%2212%22 rx%3D%222.2%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg clip-path%3D%22url%28%23c%29%22%3E%3Crect x%3D%2210%22 y%3D%2210%22 width%3D%2212%22 height%3D%223.05%22 fill%3D%22%232a1b5c%22%2F%3E%3Crect x%3D%2210%22 y%3D%2213%22 width%3D%2212%22 height%3D%223.05%22 fill%3D%22%238a2f6f%22%2F%3E%3Crect x%3D%2210%22 y%3D%2216%22 width%3D%2212%22 height%3D%223.05%22 fill%3D%22%23d4552a%22%2F%3E%3Crect x%3D%2210%22 y%3D%2219%22 width%3D%2212%22 height%3D%223.05%22 fill%3D%22%23f1b33c%22%2F%3E%3C%2Fg%3E%3Cpath d%3D%22M3 9.5V3h6.5M22.5 3H29v6.5M29 22.5V29h-6.5M9.5 29H3v-6.5%22 fill%3D%22none%22 stroke%3D%22%232653c1%22 stroke-width%3D%222.8%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"> | |
| <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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="static/css/style.css?v=81"> | |
| <script> | |
| // light by default; a stored choice (light or dark) wins | |
| try { var t = localStorage.getItem('ovh-theme'); document.documentElement.setAttribute('data-theme', t === 'dark' ? 'dark' : 'light'); } catch (e) {} | |
| </script> | |
| </head> | |
| <body> | |
| <svg width="0" height="0" style="position:absolute" aria-hidden="true"> | |
| <defs> | |
| <symbol id="i-zoom" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="6.5"/><path d="M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6"/></symbol> | |
| <symbol id="i-ground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5"/><rect x="8" y="8" width="8" height="8" rx="1.5" transform="rotate(45 12 12)"/></symbol> | |
| <symbol id="i-ocr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 7V3h4M17 3h4v4M21 17v4h-4M7 21H3v-4"/><path d="M8 8h8M8 12h8M8 16h5"/></symbol> | |
| <symbol id="i-depth" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><rect x="3" y="9" width="12" height="12" rx="2"/><path d="M7 9V5.5A2.5 2.5 0 0 1 9.5 3H19a2 2 0 0 1 2 2v9.5a2.5 2.5 0 0 1-2.5 2.5H15"/></symbol> | |
| <symbol id="i-camera" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M3 8.5A1.5 1.5 0 0 1 4.5 7h2.3L8.5 4.5h5L15.2 7h2.3A1.5 1.5 0 0 1 19 8.5V17a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 3 17z"/><circle cx="11" cy="12.5" r="3"/><path d="M19.5 12.5 22 10M19.5 12.5V16" stroke-linecap="round"/></symbol> | |
| <symbol id="i-tsearch" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M13 21H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8l4 4v4"/><path d="M8 8h5M8 12h4"/><circle cx="17" cy="16.5" r="3"/><path d="m19.2 18.7 2 2"/></symbol> | |
| <symbol id="i-isearch" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4"/><path d="m3 15 4-4 4 4"/><circle cx="14" cy="8" r="1.4"/><circle cx="17" cy="16" r="3"/><path d="m19.2 18.2 2 2"/></symbol> | |
| <symbol id="i-web" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="15" rx="2"/><path d="M3 8.5h18M6 6.3h.01M8.5 6.3h.01"/><path d="m12 11 6 2.5-2.5 1-1 2.5z" fill="currentColor"/></symbol> | |
| <symbol id="i-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="m7 10 3 2.5L7 15M12.5 15H17"/></symbol> | |
| <symbol id="i-mem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><ellipse cx="12" cy="5.5" rx="8" ry="2.5"/><path d="M4 5.5v13c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5v-13M4 12c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5"/></symbol> | |
| <symbol id="i-img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="9.5" r="1.6"/><path d="m4 18 5.5-5.5L13 16l3-3 4 4"/></symbol> | |
| <symbol id="i-data" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h1M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v5a2 2 0 0 1-2 2h-1"/></symbol> | |
| <symbol id="i-link" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z"/></symbol> | |
| <symbol id="i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></symbol> | |
| <symbol id="i-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7.5" r="4"/><path d="M4 21v-1.5A6.5 6.5 0 0 1 10.5 13h3a6.5 6.5 0 0 1 6.5 6.5V21"/></symbol> | |
| <symbol id="i-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></symbol> | |
| <symbol id="i-paper" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6M8 13h8M8 17h6"/></symbol> | |
| <symbol id="i-arxiv" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="m5 4 14 16M19 4l-6.5 7.5M5 20l4.5-5"/></symbol> | |
| <symbol id="i-github" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.5 9.5 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85v2.75c0 .27.18.58.69.48A10 10 0 0 0 12 2z"/></symbol> | |
| <symbol id="i-play" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15a1 1 0 0 0 1.5.86l12-7.5a1 1 0 0 0 0-1.72l-12-7.5A1 1 0 0 0 7 4.5z"/></symbol> | |
| <symbol id="i-pause" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4.5" width="4" height="15" rx="1"/><rect x="14" y="4.5" width="4" height="15" rx="1"/></symbol> | |
| <symbol id="i-prev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m15 5-7 7 7 7"/></symbol> | |
| <symbol id="i-next" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></symbol> | |
| <symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></symbol> | |
| <symbol id="i-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></symbol> | |
| <symbol id="i-upload" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="9.5" r="1.6"/><path d="m4 18 5.5-5.5L13 16l3-3 4 4"/></symbol> | |
| <symbol id="i-restart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></symbol> | |
| </defs> | |
| </svg> | |
| <nav class="nav"> | |
| <div class="wrap"> | |
| <a class="brand" href="https://openvlharness.github.io/" target="_blank" rel="noopener"> | |
| <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true"><defs><clipPath id="bmClip"><rect x="10" y="10" width="12" height="12" rx="2.2"/></clipPath></defs><g clip-path="url(#bmClip)"><rect class="bm-b" x="10" y="10" width="12" height="3.05" fill="#2a1b5c"/><rect class="bm-b" x="10" y="13" width="12" height="3.05" fill="#8a2f6f"/><rect class="bm-b" x="10" y="16" width="12" height="3.05" fill="#d4552a"/><rect class="bm-b" x="10" y="19" width="12" height="3.05" fill="#f1b33c"/></g><path class="bm-br" d="M3 9.5V3h6.5M22.5 3H29v6.5M29 22.5V29h-6.5M9.5 29H3v-6.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| OpenVLHarness | |
| </a> | |
| <div class="nav-links"> | |
| <a href="https://openvlharness.github.io/" target="_blank" rel="noopener">Project page</a> | |
| <a href="https://openvlharness.github.io/#results" target="_blank" rel="noopener">Results</a> | |
| </div> | |
| <button class="theme-switch" id="themeBtn" type="button" role="switch" aria-checked="false" aria-label="Dark mode"> | |
| <svg class="ts-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg> | |
| <svg class="ts-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></svg> | |
| <span class="ts-knob"></span> | |
| </button> | |
| </div> | |
| </nav> | |
| <main id="top"> | |
| <section class="block" id="playground"> | |
| <div class="wrap"> | |
| <div class="sec-head reveal"> | |
| <h2>Demo</h2> | |
| <p class="lead">The agent loop and perception tools run on our server; your model (OpenAI, or an OpenAI-compatible endpoint with tool calling) orchestrates, writes the coding tool's Python and summarizes web results.</p> | |
| </div> | |
| <div class="dm reveal" id="dm"> | |
| <div class="dm-status" id="dmStatus"><span class="dot"></span><span class="txt">Connecting to the demo server…</span></div> | |
| <div class="dm-grid"> | |
| <form class="card dm-setup" id="dmForm" autocomplete="off"> | |
| <div class="dm-f"> | |
| <label class="dm-l" for="dmFiles">Images <span>up to 4 · 10 MB each · resized to 1536 px</span></label> | |
| <label class="dm-drop" id="dmDrop" for="dmFiles"><input type="file" id="dmFiles" accept="image/*" multiple hidden><span>Drop images here or click to choose</span></label> | |
| <div class="dm-thumbs" id="dmThumbs"></div> | |
| <div class="dm-samples"><span class="dm-l2">Samples <em>web = requires a Serper key</em></span><div id="dmSamples"></div></div> | |
| </div> | |
| <div class="dm-f"> | |
| <label class="dm-l" for="dmQ">Question</label> | |
| <textarea id="dmQ" rows="3" placeholder="Ask a question about the images"></textarea> | |
| </div> | |
| <fieldset class="dm-f dm-model"> | |
| <legend class="dm-l">Orchestrator model</legend> | |
| <div class="seg dm-prov" id="dmProv" role="radiogroup" aria-label="Provider"> | |
| <button type="button" role="radio" data-v="OpenAI" aria-checked="true">OpenAI</button> | |
| <button type="button" role="radio" data-v="OpenAI-compatible (vLLM / SGLang)" aria-checked="false">OpenAI-compatible</button> | |
| </div> | |
| <p class="dm-keynote" id="dmCompatHelp" hidden>Hosting your own model? <a href="https://github.com/uclanlp/OpenVLHarness/blob/main/docs/demo_endpoint.md" target="_blank" rel="noopener">Follow this guide</a> to serve your model and find its Base URL and Model name.</p> | |
| <div class="dm-row"> | |
| <label class="dm-in" id="dmBaseW" hidden><span>Base URL</span><input id="dmBase" type="url" placeholder="https://your-server.example.com/v1" spellcheck="false"></label> | |
| <label class="dm-in"><span>Model</span><input id="dmModel" type="text" value="gpt-6.1-sol" spellcheck="false"></label> | |
| </div> | |
| <div class="dm-row"> | |
| <label class="dm-in"><span>Model API key</span><input id="dmKey" type="password" placeholder="sk-…" spellcheck="false"></label> | |
| <label class="dm-in"><span>Serper key <em>optional · <a href="https://serper.dev/signup" target="_blank" rel="noopener">free key</a></em></span><input id="dmSerper" type="password" spellcheck="false"></label> | |
| </div> | |
| <p class="dm-keynote">Keys are used for the request only and are not stored.<br>A <a href="https://serper.dev/signup" target="_blank" rel="noopener">Serper key</a> is free: 2,500 queries, no credit card.</p> | |
| <div class="dm-row dm-test"><button type="button" class="dm-btn ghost" id="dmTest">Test connection</button><span id="dmTestOut" class="dm-note"></span></div> | |
| </fieldset> | |
| <div class="dm-actions"> | |
| <button type="submit" class="dm-btn primary" id="dmRun">Run</button> | |
| <button type="button" class="dm-btn ghost" id="dmStop" hidden>Stop</button> | |
| <span class="dm-note" id="dmRunNote"></span> | |
| </div> | |
| </form> | |
| <div class="card dm-trace" id="dmTrace" aria-live="polite"> | |
| <div class="dm-trace-h"><span>Trajectory</span><span class="dm-meta" id="dmMeta"></span></div> | |
| <ol class="dm-steps" id="dmSteps"><li class="dm-empty">The trajectory appears here while the agent runs.</li></ol> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <div class="lightbox" id="lightbox" hidden><img alt=""><span class="lb-cap"></span></div> | |
| <script src="static/js/examples.js?v=12"></script> | |
| <script type="module" src="static/js/demo.js?v=16"></script> | |
| <script> | |
| // The parts of main.js this page needs: show revealed blocks, close the image lightbox, theme switch. | |
| document.querySelectorAll('.reveal').forEach(function (e) { e.classList.add('in'); }); | |
| var lb = document.getElementById('lightbox'); | |
| lb.addEventListener('click', function () { lb.hidden = true; }); | |
| document.addEventListener('keydown', function (e) { if (e.key === 'Escape') lb.hidden = true; }); | |
| var themeBtn = document.getElementById('themeBtn'); | |
| function syncTheme() { themeBtn.setAttribute('aria-checked', document.documentElement.getAttribute('data-theme') === 'dark'); } | |
| syncTheme(); | |
| themeBtn.addEventListener('click', function () { | |
| var next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; | |
| document.documentElement.setAttribute('data-theme', next); | |
| try { localStorage.setItem('ovh-theme', next); } catch (e) {} | |
| syncTheme(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |