(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),t.credentials=e.crossOrigin===`use-credentials`?`include`:e.crossOrigin===`anonymous`?`omit`:`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();var e=[`rock`,`paper`,`scissors`],t={rock:`scissors`,paper:`rock`,scissors:`paper`},n=e=>document.getElementById(e),r=new URLSearchParams(location.search),i=r.get(`models`)===`local`?`/models/`:`hub`,a=Number(r.get(`frame`)??384),o=600,s=Number(r.get(`tokens`)??128),c={vision:r.get(`vision`)??`q8`,decoder:r.get(`decoder`)??`q8`},l=.45,u=.1,d={rock:`✊`,paper:`✋`,scissors:`✌️`,none:`·`},f=new Worker(new URL(new URL(`worker-8R7nd9yW.js`,import.meta.url).href,``+import.meta.url),{type:`module`}),p=1,m=new Map,h=null;f.onmessage=e=>{let t=e.data;t.type===`read`?(m.get(t.id)?.(t),m.delete(t.id)):t.type===`error`?v(`d1 failed: ${t.message.split(`
`)[0]}`,!0):h?.(t)};var g=e=>f.postMessage(e);function _(e){let t=p++;return new Promise(n=>{m.set(t,n),g({type:`read`,id:t,frame:e})})}function v(e,t=!1){n(`status`).textContent=e,n(`status`).className=t?`error`:`muted`}function y(){return new Promise(e=>{n(`progress`).hidden=!1,v(`Downloading d1-3B (about 3.8 GB, cached after the first time)…`),h=t=>{t.type===`progress`&&t.total&&(n(`progress`).firstElementChild.style.width=`${100*t.loaded/t.total}%`),t.type===`loaded`&&(n(`progress`).hidden=!0,v(`d1 is ready (${(t.ms/1e3).toFixed(0)} s to load).`),e())},g({type:`load`,source:i,imageTokens:s,dtype:c})})}var b=n(`video`),x=document.createElement(`canvas`);async function S(){b.srcObject=await navigator.mediaDevices.getUserMedia({video:{width:640,height:480,facingMode:`user`},audio:!1}),await b.play(),n(`cam-off`).hidden=!0}function C(){let e=Math.min(1,a/Math.max(b.videoWidth,b.videoHeight)),t=Math.round(b.videoWidth*e),n=Math.round(b.videoHeight*e);x.width=t,x.height=n;let r=x.getContext(`2d`,{willReadFrequently:!0});return r.setTransform(-1,0,0,1,t,0),r.drawImage(b,0,0,t,n),{data:r.getImageData(0,0,t,n).data,width:t,height:n}}function w(t){let r=[...e,`none`].map(e=>`<div class="bar ${e}"><span>${d[e]} ${e}</span><i style="width:${(100*t.probabilities[e]).toFixed(0)}%"></i><b>${(100*t.probabilities[e]).toFixed(0)}%</b></div>`).join(``);n(`meter`).innerHTML=r,n(`read-info`).textContent=`read in ${Math.round(t.ms)} ms · ${t.tokens} tokens`}var T=e=>{let[[t,n],[,r]]=Object.entries(e.probabilities).sort((e,t)=>t[1]-e[1]);return[t,n,n-r]},E=!1;async function D(){for(E=!0;E;)O?await new Promise(e=>setTimeout(e,100)):w(await _(C()))}var O=!1,k=0,A=0,j=0,M=e=>new Promise(t=>setTimeout(t,e));function N(e){n(`card`).className=e?`card up`:`card down`,n(`card-face`).textContent=e?d[e]:`?`}async function P(){if(O)return;O=!0,n(`play`).disabled=!0,n(`result`).textContent=``;let r=e[Math.floor(Math.random()*3)];N(null);let i=n(`beat`);i.hidden=!1;for(let e of[`Rock…`,`Paper…`,`Scissors…`])i.textContent=e,await M(o);i.textContent=`Shoot!`;let a=_(C());i.textContent=`d1 is looking…`;let s=await a;w(s),N(r);let[c,f,p]=T(s);if(c===`none`||f<l||p<u)n(`result`).textContent=`d1 couldn't tell your gesture (${c} ${(100*f).toFixed(0)}%). Replay the round.`,i.textContent=`Couldn't see that 🤔`;else{j++;let e=c===r?`Draw`:t[c]===r?`You win the round`:`Bot wins the round`;i.innerHTML=`<span class="verdict">${d[c]} vs ${d[r]}<small>${e.replace(` the round`,``)} · ${Math.round(s.ms)} ms</small></span>`,e.startsWith(`You`)&&k++,e.startsWith(`Bot`)&&A++,n(`score-you`).textContent=String(k),n(`score-bot`).textContent=String(A),n(`result`).textContent=`d1 read ${d[c]} ${c} (${(100*f).toFixed(0)}% sure, ${Math.round(s.ms)} ms) vs ${d[r]} ${r}: ${e}.`,(k===3||A===3)&&(n(`result`).textContent+=k===3?` You win the match! 🎉`:` The bot wins the match.`,k=A=j=0),n(`round`).textContent=j?`Round ${j+1}`:`Best of 5`}await M(2200),i.hidden=!0,O=!1,n(`play`).disabled=!1}n(`start`).addEventListener(`click`,async()=>{if(!(`gpu`in navigator))return v(`This needs WebGPU (desktop Chrome or Edge).`,!0);n(`start`).disabled=!0;try{await Promise.all([S(),y()])}catch(e){return n(`start`).disabled=!1,v(`Could not start: ${e.message}`,!0)}n(`start`).hidden=!0,n(`play`).hidden=!1,v(`Show rock, paper or scissors: the bars are d1 reading your hand live. Press Play when ready.`),D()}),n(`play`).addEventListener(`click`,P),r.has(`bench`)&&(async()=>{await y();let t=[];for(let n of[256,384,512])for(let r of[...e,`none`]){let e=new OffscreenCanvas(n,Math.round(n*.75)),i=e.getContext(`2d`);i.fillStyle=`#d9cfc4`,i.fillRect(0,0,e.width,e.height),r!==`none`&&(i.font=`${Math.round(e.height*.6)}px "Apple Color Emoji", "Segoe UI Emoji", sans-serif`,i.textAlign=`center`,i.textBaseline=`middle`,i.fillText(d[r],e.width/2,e.height/2));let a=await _({data:i.getImageData(0,0,e.width,e.height).data,width:e.width,height:e.height}),[o,s]=T(a);t.push(`${n}px ${r} -> ${o} ${(100*s).toFixed(0)}% · ${Math.round(a.ms)} ms · ${a.tokens} tok`)}window.benchOut=t,v(t.join(` | `)),console.log(`[bench]
`+t.join(`
`))})();