Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <meta name="theme-color" content="#ffffff"> | |
| <meta name="description" content="Run Mario, Rubik’s Cube, and Tetris with jev-27b-vl. Follow each decision and its inference time live."> | |
| <title>Live Game Arena · AutoTrust</title> | |
| <link rel="icon" href="/autotrust-mark.svg" type="image/svg+xml"> | |
| <link rel="stylesheet" href="/arena-ui.css?v=1"> | |
| <script defer src="/arena-renderer.js?v=1"></script> | |
| <script defer src="/arena-ui.js?v=1"></script> | |
| <script>if(window.parent!==window&&new URLSearchParams(location.search).get("embed")==="1")document.documentElement.classList.add("embedded");</script> | |
| <style>.embedded .topbar,.embedded body>footer{display:none}.embedded main{width:calc(100% - 40px)}.embedded .intro{padding-top:26px}.embedded .bottom-note{margin-bottom:20px}@media(max-width:500px){.embedded main{width:calc(100% - 24px)}}</style> | |
| </head> | |
| <body> | |
| <header class="topbar"> | |
| <a class="brand" href="/" aria-label="AutoTrust home"><img src="/autotrust-mark.svg" alt="" width="42" height="42"><span>AutoTrust</span></a> | |
| <nav aria-label="Main navigation"><a href="/">Home</a><a href="/play">Decision playground</a><a href="https://huggingface.co/autotrust/JEV-27B" target="_blank" rel="noopener noreferrer">Get the model <span aria-hidden="true">↗</span></a></nav> | |
| </header> | |
| <main> | |
| <section class="intro"> | |
| <div><p class="eyebrow">Decision playground / Live games</p><h1>Watch decisions become actions.</h1><p class="lede">Start a fresh run. Follow the game, the model’s choices, and its inference time.</p></div> | |
| <div class="connection" id="connection"><span class="dot"></span><span id="connection-text">Connecting to GPU</span></div> | |
| </section> | |
| <div class="game-tabs" role="tablist" aria-label="Choose a game"> | |
| <button class="game-tab" id="tab-mario" type="button" role="tab" aria-controls="game-panel" aria-selected="true" data-game="mario"> | |
| <svg viewBox="0 0 32 32" fill="none" aria-hidden="true"><path d="M8 27V5m1 1h16l-4 6 4 6H9M4 27h11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span><strong>Mario</strong><small>Reach the flag · World 1-1</small></span><span class="tab-status" id="tab-status-mario"></span></button> | |
| <button class="game-tab" id="tab-cube" type="button" role="tab" aria-controls="game-panel" aria-selected="false" tabindex="-1" data-game="cube"> | |
| <svg viewBox="0 0 32 32" fill="none" aria-hidden="true"><path d="m16 3 12 7v13l-12 7-12-7V10L16 3Zm0 14 12-7M16 17 4 10m12 7v13M10 6l12 7v13M22 6l-12 7v13M4 16l12 7 12-7" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg><span><strong>Rubik’s Cube</strong><small>Solve a 25-turn scramble</small></span><span class="tab-status" id="tab-status-cube"></span></button> | |
| <button class="game-tab" id="tab-tetris" type="button" role="tab" aria-controls="game-panel" aria-selected="false" tabindex="-1" data-game="tetris"> | |
| <svg viewBox="0 0 32 32" fill="none" aria-hidden="true"><path d="M12 3h9v9h-9zm0 9h9v9h-9zm0 9h9v9h-9zm9 0h9v9h-9z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg><span><strong>Tetris</strong><small>Clear 20 lines · Rising speed</small></span><span class="tab-status" id="tab-status-tetris"></span></button> | |
| </div> | |
| <section id="game-panel" role="tabpanel" aria-labelledby="tab-mario"> | |
| <div class="arena-toolbar"> | |
| <div class="game-heading"><h2 id="game-title">Mario</h2><span class="state-pill" id="state-pill">Ready</span></div> | |
| <div class="controls"> | |
| <label for="seed">Seed <input id="seed" type="number" min="0" max="2147483647" step="1" value="0" inputmode="numeric" autocomplete="off"></label> | |
| <button class="icon-button" id="shuffle" type="button" aria-label="Choose a random seed" title="Choose a random seed" hidden><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 5h2.5L14 15h3m-3-3 3 3-3 3M3 15h2.5L14 5h3m-3-3 3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button> | |
| <button class="button start" id="start" type="button"><span aria-hidden="true">▶</span> Start model</button> | |
| <button class="button stop" id="stop" type="button" hidden>Stop run</button> | |
| </div></div> | |
| <div class="notice" id="notice" role="status" aria-live="polite" hidden></div> | |
| <div class="arena-grid"> | |
| <div class="game-stage"> | |
| <div class="stage-top"><span class="stage-label" id="stage-label">Opening state</span><button class="text-button" id="watch-example" type="button">Watch example <span aria-hidden="true">↗</span></button></div> | |
| <div class="canvas-wrap"><canvas id="game-canvas" width="1000" height="600" aria-label="Mario game view"></canvas><div class="canvas-loading" id="canvas-loading" hidden><span class="spinner"></span><span>Preparing game</span></div></div> | |
| <div class="game-caption"><span id="game-caption">The model controls movement and jumping, one decision at a time.</span><span class="live-source"><span class="mini-dot"></span>GPU inference</span></div> | |
| </div> | |
| <aside class="decision-panel" aria-label="Model decisions and game details"> | |
| <div class="model-header"><div><p class="eyebrow">Model</p><h3>jev-27b-vl</h3></div><span class="model-chip">SELF-HOSTED</span></div> | |
| <div class="metrics"> | |
| <div><span class="metric-value" id="current-inference">—<small>ms</small></span><span class="metric-label">Current inference</span></div> | |
| <div><span class="metric-value" id="average-inference">—<small>ms</small></span><span class="metric-label">Average inference</span></div> | |
| </div><p class="metric-note">Server inference · per individual model call</p> | |
| <div class="decision-heading"><h4>Current decision</h4><span id="call-count">0 calls</span></div> | |
| <div class="chosen-action" id="chosen-action">Waiting to start</div><p class="decision-description" id="decision-description">Choose a game and start the model.</p> | |
| <div class="options" id="options" aria-label="Action probabilities"></div> | |
| <div class="subdecisions" id="subdecisions" aria-label="Movement and jump inference"></div> | |
| <div class="stats-heading"><h4>Game state</h4><span id="game-progress">World 1-1</span></div><dl class="stats" id="stats"></dl> | |
| </aside> | |
| </div> | |
| <div class="bottom-note"><span id="game-note">The game runs on the server. You can switch tabs while a run is active.</span><a href="/play#lab" id="more-decisions">Explore more decisions <span aria-hidden="true">↗</span></a></div> | |
| </section> | |
| </main> | |
| <footer><a href="https://autotrust.ai" target="_blank" rel="noopener noreferrer">autotrust.ai</a><span>JEV-27B · Live interactive demonstrations</span></footer> | |
| <dialog id="example-dialog" aria-labelledby="example-title"><div class="dialog-head"><h2 id="example-title">Recorded example</h2><button class="icon-button" id="close-example" type="button" aria-label="Close recording">×</button></div><video id="example-video" controls playsinline preload="none"></video><p>Recorded demonstration</p></dialog> | |
| <noscript><p class="notice">Enable JavaScript to run the interactive games.</p></noscript> | |
| <script> | |
| if(document.documentElement.classList.contains("embedded")){ | |
| document.getElementById("more-decisions").target="_parent"; | |
| let previousHeight=0; | |
| function reportSize(){ | |
| const main=document.querySelector("main"); | |
| if(!main.getBoundingClientRect().width)return; | |
| const height=Math.ceil(main.getBoundingClientRect().bottom+window.scrollY+20); | |
| if(height!==previousHeight){previousHeight=height;window.parent.postMessage({type:"jev-arena-size",height},location.origin);} | |
| } | |
| new ResizeObserver(reportSize).observe(document.querySelector("main")); | |
| window.addEventListener("load",reportSize); | |
| window.addEventListener("resize",reportSize); | |
| reportSize(); | |
| } | |
| </script> | |
| </body></html> |