assets/App-sTQB9k_n.js

import{j as e,r}from"./index-BSMha4W3.js";function I(s){const t=s==0?0:Math.floor(Math.log(s)/Math.log(1024));return+(s/Math.pow(1024,t)).toFixed(2)*1+["B","kB","MB","GB","TB"][t]}function O({text:s,percentage:t,total:n}){return t??=0,e.jsx("div",{className:"w-full bg-gray-100 dark:bg-gray-700 text-left rounded-lg overflow-hidden mb-0.5",children:e.jsxs("div",{className:"bg-blue-400 whitespace-nowrap px-1 text-sm",style:{width:`${t}%`},children:[s," (",t.toFixed(2),"%",isNaN(n)?"":` of ${I(n)}`,")"]})})}const N="https://huggingface.co./datasets/Xenova/transformers.js-docs/resolve/main/beetle.png",R=({onImageChange:s,...t})=>{const[n,f]=r.useState(null),h=r.useRef(null),g=a=>{if(!a)return;const c=new FileReader;c.onloadend=()=>{f(c.result),s&&s(a,c.result)},c.readAsDataURL(a)},x=a=>{g(a.target.files[0])},o=a=>{a.preventDefault()},b=a=>{a.preventDefault(),g(a.dataTransfer.files[0])},m=()=>{h.current.click()};return e.jsxs("div",{...t,onClick:m,onDragOver:o,onDrop:b,children:[e.jsx("input",{type:"file",accept:"image/*",onChange:x,ref:h,className:"hidden"}),n?e.jsx("img",{src:n,alt:"Selected",className:"w-full max-h-[250px] h-full object-contain rounded-md"}):e.jsxs("div",{className:"w-full h-full flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-md",children:[e.jsxs("span",{className:"text-gray-600 text-center m-3",children:[e.jsx("u",{children:"Drag & drop"})," or ",e.jsx("u",{children:"click"}),e.jsx("br",{}),"to select an image"]}),e.jsxs("span",{className:"text-gray-500 text-sm hover:text-gray-800 dark:hover:text-gray-300",onClick:a=>{a.stopPropagation(),f(N),s(null,N)},children:["(or ",e.jsx("u",{children:"try an example"}),")"]})]})]})},C=!!navigator.gpu;function P(){const s=r.useRef(null),[t,n]=r.useState(null),[f,h]=r.useState(""),[g,x]=r.useState([]),[o,b]=r.useState("<CAPTION>"),[m,a]=r.useState(""),[c,y]=r.useState(null),[p,j]=r.useState(null),[v,w]=r.useState(null);r.useEffect(()=>{s.current??=new Worker(new URL("/assets/worker-JeQP5yZK.js",import.meta.url),{type:"module"});const i=l=>{switch(l.data.status){case"loading":n("loading"),h(l.data.data);break;case"initiate":x(d=>[...d,l.data]);break;case"progress":x(d=>d.map(u=>u.file===l.data.file?{...u,...l.data}:u));break;case"done":x(d=>d.filter(u=>u.file!==l.data.file));break;case"ready":n("ready");break;case"complete":j(l.data.result),w(l.data.time),n("ready");break}};return s.current.addEventListener("message",i),()=>{s.current.removeEventListener("message",i)}},[]);const k=r.useCallback(()=>{t===null?(n("loading"),s.current.postMessage({type:"load"})):(n("running"),s.current.postMessage({type:"run",data:{text:m,url:c,task:o}}))},[t,o,c,m]);return C?e.jsx("div",{className:"h-screen w-screen text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900",children:e.jsxs("div",{className:"flex flex-col mx-auto items justify-end max-w-[630px] h-full",children:[t==="loading"&&e.jsx("div",{className:"flex justify-center items-center fixed w-screen h-screen bg-black z-10 bg-opacity-[92%] top-0 left-0",children:e.jsxs("div",{className:"w-[500px]",children:[e.jsx("p",{className:"text-center mb-1 text-white text-md",children:f}),g.map(({file:i,progress:l,total:d},u)=>e.jsx(O,{text:i,percentage:l,total:d},u))]})}),e.jsxs("div",{className:"h-full overflow-auto scrollbar-thin flex justify-center items-center flex-col relative",children:[e.jsxs("div",{className:"flex flex-col items-center mb-1 text-center",children:[e.jsx("h1",{className:"text-6xl font-bold mb-2",children:"Florence-2 WebGPU"}),e.jsx("h2",{className:"text-xl font-semibold",children:"Powerful vision foundation model running locally in your browser."})]}),e.jsxs("div",{className:"w-full min-h-[220px] flex flex-col justify-center items-center p-2",children:[e.jsxs("p",{className:"mb-2",children:["You are about to download"," ",e.jsx("a",{href:"https://huggingface.co./onnx-community/Florence-2-base-ft",target:"_blank",rel:"noreferrer",className:"font-medium underline",children:"Florence-2-base-ft"}),", a 230 million parameter vision foundation model that uses a prompt-based approach to handle a wide range of vision and vision-language tasks like captioning, object detection, and segmentation. Once loaded, the model (340 MB) will be cached and reused when you revisit the page.",e.jsx("br",{}),e.jsx("br",{}),"Everything runs locally in your browser using"," ",e.jsx("a",{href:"https://huggingface.co./docs/transformers.js",target:"_blank",rel:"noreferrer",className:"underline",children:"🤗 Transformers.js"})," ","and ONNX Runtime Web, meaning no API calls are made to a server for inference. You can even disconnect from the internet after the model has loaded!"]}),e.jsxs("div",{className:"flex w-full justify-around m-4",children:[e.jsxs("div",{className:"flex flex-col gap-2 w-full max-w-[48%]",children:[e.jsxs("div",{className:"flex flex-col",children:[e.jsx("span",{className:"text-sm mb-0.5",children:"Task"}),e.jsxs("select",{className:"border rounded-md p-1 dark:bg-gray-800",value:o,onChange:i=>b(i.target.value),children:[e.jsx("option",{value:"<CAPTION>",children:"Caption"}),e.jsx("option",{value:"<DETAILED_CAPTION>",children:"Detailed Caption"}),e.jsx("option",{value:"<MORE_DETAILED_CAPTION>",children:"More Detailed Caption"}),e.jsx("option",{value:"<OCR>",children:"OCR"}),e.jsx("option",{value:"<OCR_WITH_REGION>",children:"OCR with Region"}),e.jsx("option",{value:"<OD>",children:"Object Detection"}),e.jsx("option",{value:"<DENSE_REGION_CAPTION>",children:"Dense Region Caption"}),e.jsx("option",{value:"<CAPTION_TO_PHRASE_GROUNDING>",children:"Caption to Phrase Grounding"})]})]}),e.jsxs("div",{className:"flex flex-col",children:[e.jsx("span",{className:"text-sm mb-0.5",children:"Input Image"}),e.jsx(R,{className:"flex flex-col items-center border border-gray-300 rounded-md cursor-pointer h-[250px]",onImageChange:(i,l)=>{s.current.postMessage({type:"reset"}),j(null),y(l)}})]})]}),e.jsxs("div",{className:"flex flex-col gap-2 w-full max-w-[48%] justify-end",children:[o==="<CAPTION_TO_PHRASE_GROUNDING>"&&e.jsxs("div",{className:"flex flex-col",children:[e.jsx("span",{className:"text-sm mb-0.5",children:"Text input"}),e.jsx("input",{className:"border rounded-md px-2 py-[3.5px]",value:m,onChange:i=>a(i.target.value)})]}),e.jsxs("div",{className:"flex flex-col relative",children:[e.jsx("span",{className:"text-sm mb-0.5",children:"Output"}),e.jsx("div",{className:"flex justify-center border border-gray-300 rounded-md h-[250px]",children:p?.[o]&&e.jsxs(e.Fragment,{children:[typeof p[o]=="string"?e.jsx("p",{className:"pt-4 px-4 text-center max-h-[205px] overflow-y-auto",children:p[o]}):e.jsx("pre",{className:"w-full h-full p-2 overflow-y-auto",children:JSON.stringify(p[o],null,2)}),v&&e.jsxs("p",{className:"text-sm text-gray-500 absolute bottom-2 bg-white p-1 rounded border",children:["Execution time: ",v.toFixed(2)," ms"]})]})})]})]})]}),e.jsx("button",{className:"border px-4 py-2 rounded-lg bg-blue-400 text-white hover:bg-blue-500 disabled:bg-blue-100 disabled:cursor-not-allowed select-none cursor-pointer",onClick:k,disabled:t==="running"||t!==null&&c===null,children:t===null?"Load model":t==="running"?"Running...":"Run model"})]})]})]})}):e.jsxs("div",{className:"fixed w-screen h-screen bg-black z-10 bg-opacity-[92%] text-white text-2xl font-semibold flex justify-center items-center text-center",children:["WebGPU is not supported",e.jsx("br",{}),"by this browser :("]})}export{P as default};