Update with latest build

assets/App-BSbPtvSW.js

@@ -0,0 +1 @@
+import{j as e,r as s}from"./index-89fUx0Kn.js";import{p as A,m as F}from"./purify.es-CipTfxe2.js";function G(t){return e.jsxs("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M12 8V4H8"}),e.jsx("rect",{width:"16",height:"12",x:"4",y:"8",rx:"2"}),e.jsx("path",{d:"M2 14h2"}),e.jsx("path",{d:"M20 14h2"}),e.jsx("path",{d:"M15 13v2"}),e.jsx("path",{d:"M9 13v2"})]})}function _(t){return e.jsxs("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}),e.jsx("circle",{cx:"12",cy:"7",r:"4"})]})}function U(t){return A.sanitize(F.parse(t))}function P({messages:t}){const a=t.length===0;return s.useEffect(()=>{window.MathJax.typeset()},[t]),e.jsx("div",{className:`flex-1 p-6 max-w-[960px] w-full ${a?"flex flex-col items-center justify-end":"space-y-4"}`,children:a?e.jsx("div",{className:"text-xl",children:"Ready!"}):t.map((o,d)=>e.jsx("div",{className:"flex items-start space-x-4",children:o.role==="assistant"?e.jsxs(e.Fragment,{children:[e.jsx(G,{className:"h-6 w-6 min-h-6 min-w-6 my-3 text-gray-500 dark:text-gray-300"}),e.jsx("div",{className:"bg-gray-200 dark:bg-gray-700 rounded-lg p-4",children:e.jsx("p",{className:"min-h-6 text-gray-800 dark:text-gray-200 overflow-wrap-anywhere",children:o.content.length>0?e.jsx("span",{className:"markdown",dangerouslySetInnerHTML:{__html:U(o.content)}}):e.jsxs("span",{className:"h-6 flex items-center gap-1",children:[e.jsx("span",{className:"w-2.5 h-2.5 bg-gray-600 dark:bg-gray-300 rounded-full animate-pulse"}),e.jsx("span",{className:"w-2.5 h-2.5 bg-gray-600 dark:bg-gray-300 rounded-full animate-pulse animation-delay-200"}),e.jsx("span",{className:"w-2.5 h-2.5 bg-gray-600 dark:bg-gray-300 rounded-full animate-pulse animation-delay-400"})]})})})]}):e.jsxs(e.Fragment,{children:[e.jsx(_,{className:"h-6 w-6 min-h-6 min-w-6 my-3 text-gray-500 dark:text-gray-300"}),e.jsx("div",{className:"bg-blue-500 text-white rounded-lg p-4",children:e.jsx("p",{className:"min-h-6 overflow-wrap-anywhere",children:o.content})})]})},`message-${d}`))})}function L(t){return e.jsxs("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M5 12h14"}),e.jsx("path",{d:"m12 5 7 7-7 7"})]})}function $(t){return e.jsxs("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"}),e.jsx("path",{fill:"currentColor",d:"M9 9.563C9 9.252 9.252 9 9.563 9h4.874c.311 0 .563.252.563.563v4.874c0 .311-.252.563-.563.563H9.564A.562.562 0 0 1 9 14.437V9.564Z"})]})}function z(t){const a=t==0?0:Math.floor(Math.log(t)/Math.log(1024));return+(t/Math.pow(1024,a)).toFixed(2)*1+["B","kB","MB","GB","TB"][a]}function D({text:t,percentage:a,total:o}){return a??=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:`${a}%`},children:[t," (",a.toFixed(2),"%",isNaN(o)?"":` of ${z(o)}`,")"]})})}const O=!!navigator.gpu,K=120,V=["Give me some tips to improve my time management skills.","What is the difference between AI and ML?","Write python code to compute the nth fibonacci number."];function X(){const t=s.useRef(null),a=s.useRef(null),o=s.useRef(null),[d,p]=s.useState(null),[f,E]=s.useState(null),[I,R]=s.useState(""),[B,b]=s.useState([]),[u,k]=s.useState(!1),[x,v]=s.useState(""),[c,m]=s.useState([]),[y,j]=s.useState(null),[N,S]=s.useState(null);function w(r){m(i=>[...i,{role:"user",content:r}]),j(null),k(!0),v("")}function C(){t.current.postMessage({type:"interrupt"})}s.useEffect(()=>{W()},[x]);function W(){if(!a.current)return;const r=a.current;r.style.height="auto";const i=Math.min(Math.max(r.scrollHeight,24),200);r.style.height=`${i}px`}return s.useEffect(()=>{t.current||(t.current=new Worker(new URL(""+new URL("worker-B2HzWMJQ.js",import.meta.url).href,import.meta.url),{type:"module"}),t.current.postMessage({type:"check"}));const r=n=>{switch(n.data.status){case"loading":p("loading"),R(n.data.data);break;case"initiate":b(l=>[...l,n.data]);break;case"progress":b(l=>l.map(h=>h.file===n.data.file?{...h,...n.data}:h));break;case"done":b(l=>l.filter(h=>h.file!==n.data.file));break;case"ready":p("ready");break;case"start":m(l=>[...l,{role:"assistant",content:""}]);break;case"update":{const{output:l,tps:h,numTokens:H}=n.data;j(h),S(H),m(T=>{const g=[...T],M=g.at(-1);return g[g.length-1]={...M,content:M.content+l},g})}break;case"complete":k(!1);break;case"error":E(n.data.data);break}},i=n=>{console.error("Worker error:",n)};return t.current.addEventListener("message",r),t.current.addEventListener("error",i),()=>{t.current.removeEventListener("message",r),t.current.removeEventListener("error",i)}},[]),s.useEffect(()=>{c.filter(r=>r.role==="user").length!==0&&c.at(-1).role!=="assistant"&&(j(null),t.current.postMessage({type:"generate",data:c}))},[c,u]),s.useEffect(()=>{if(!o.current||!u)return;const r=o.current;r.scrollHeight-r.scrollTop-r.clientHeight<K&&(r.scrollTop=r.scrollHeight)},[c,u]),O?e.jsxs("div",{className:"flex flex-col h-screen mx-auto items justify-end text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900",children:[d===null&&c.length===0&&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 max-w-[340px] text-center",children:[e.jsx("img",{src:"logo.png",width:"75%",height:"auto",className:"block"}),e.jsx("h1",{className:"text-4xl font-bold mb-1",children:"Llama-3.2 WebGPU"}),e.jsxs("h2",{className:"font-semibold",children:["A private and powerful AI chatbot ",e.jsx("br",{}),"that runs locally in your browser."]})]}),e.jsxs("div",{className:"flex flex-col items-center px-4",children:[e.jsxs("p",{className:"max-w-[514px] mb-4",children:[e.jsx("br",{}),"You are about to load"," ",e.jsx("a",{href:"https://huggingface.co/onnx-community/Llama-3.2-1B-Instruct-q4f16",target:"_blank",rel:"noreferrer",className:"font-medium underline",children:"Llama-3.2-1B-Instruct"}),", a 1.24 billion parameter LLM that is optimized for inference on the web. Once downloaded, the model (1.15 GB) will be cached and reused when you revisit the page.",e.jsx("br",{}),e.jsx("br",{}),"Everything runs directly 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 your conversations aren't sent to a server. You can even disconnect from the internet after the model has loaded!",e.jsx("br",{}),"Want to learn more? Check out the demo's source code on"," ",e.jsx("a",{href:"https://github.com/huggingface/transformers.js-examples/tree/main/llama-3.2-webgpu",target:"_blank",rel:"noreferrer",className:"underline",children:"GitHub"}),"!"]}),f&&e.jsxs("div",{className:"text-red-500 text-center mb-2",children:[e.jsx("p",{className:"mb-1",children:"Unable to load model due to the following error:"}),e.jsx("p",{className:"text-sm",children:f})]}),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",onClick:()=>{t.current.postMessage({type:"load"}),p("loading")},disabled:d!==null||f!==null,children:"Load model"})]})]}),d==="loading"&&e.jsx(e.Fragment,{children:e.jsxs("div",{className:"w-full max-w-[500px] text-left mx-auto p-4 bottom-0 mt-auto",children:[e.jsx("p",{className:"text-center mb-1",children:I}),B.map(({file:r,progress:i,total:n},l)=>e.jsx(D,{text:r,percentage:i,total:n},l))]})}),d==="ready"&&e.jsxs("div",{ref:o,className:"overflow-y-auto scrollbar-thin w-full flex flex-col items-center h-full",children:[e.jsx(P,{messages:c}),c.length===0&&e.jsx("div",{children:V.map((r,i)=>e.jsx("div",{className:"m-1 border dark:border-gray-600 rounded-md p-2 bg-gray-100 dark:bg-gray-700 cursor-pointer",onClick:()=>w(r),children:r},i))}),e.jsx("p",{className:"text-center text-sm min-h-6 text-gray-500 dark:text-gray-300",children:y&&c.length>0&&e.jsxs(e.Fragment,{children:[!u&&e.jsxs("span",{children:["Generated ",N," tokens in"," ",(N/y).toFixed(2)," seconds ("]}),e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"font-medium text-center mr-1 text-black dark:text-white",children:y.toFixed(2)}),e.jsx("span",{className:"text-gray-500 dark:text-gray-300",children:"tokens/second"})]}),!u&&e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"mr-1",children:")."}),e.jsx("span",{className:"underline cursor-pointer",onClick:()=>{t.current.postMessage({type:"reset"}),m([])},children:"Reset"})]})]})})]}),e.jsxs("div",{className:"mt-2 border dark:bg-gray-700 rounded-lg w-[600px] max-w-[80%] max-h-[200px] mx-auto relative mb-3 flex",children:[e.jsx("textarea",{ref:a,className:"scrollbar-thin w-[550px] dark:bg-gray-700 px-3 py-4 rounded-lg bg-transparent border-none outline-none text-gray-800 disabled:text-gray-400 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 disabled:placeholder-gray-200 resize-none disabled:cursor-not-allowed",placeholder:"Type your message...",type:"text",rows:1,value:x,disabled:d!=="ready",title:d==="ready"?"Model is ready":"Model not loaded yet",onKeyDown:r=>{x.length>0&&!u&&r.key==="Enter"&&!r.shiftKey&&(r.preventDefault(),w(x))},onInput:r=>v(r.target.value)}),u?e.jsx("div",{className:"cursor-pointer",onClick:C,children:e.jsx($,{className:"h-8 w-8 p-1 rounded-md text-gray-800 dark:text-gray-100 absolute right-3 bottom-3"})}):x.length>0?e.jsx("div",{className:"cursor-pointer",onClick:()=>w(x),children:e.jsx(L,{className:"h-8 w-8 p-1 bg-gray-800 dark:bg-gray-100 text-white dark:text-black rounded-md absolute right-3 bottom-3"})}):e.jsx("div",{children:e.jsx(L,{className:"h-8 w-8 p-1 bg-gray-200 dark:bg-gray-600 text-gray-50 dark:text-gray-800 rounded-md absolute right-3 bottom-3"})})]}),e.jsx("p",{className:"text-xs text-gray-400 text-center mb-3",children:"Disclaimer: Generated content may be inaccurate or false."})]}):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{X as default};

assets/App-C7i5J2cl.js

@@ -0,0 +1 @@
+import{r,j as e}from"./index-89fUx0Kn.js";function v({audioUrl:c,mimeType:s}){const l=r.useRef(null),n=r.useRef(null);return r.useEffect(()=>{l.current&&n.current&&(n.current.src=c,l.current.load())},[c]),e.jsx("div",{className:"flex relative z-10 my-4 w-full",children:e.jsx("audio",{ref:l,controls:!0,className:"w-full h-14 rounded-lg bg-white shadow-xl shadow-black/5 ring-1 ring-slate-700/10",children:e.jsx("source",{ref:n,type:s})})})}function y({text:c,percentage:s}){return s??=0,e.jsx("div",{className:"relative text-black bg-white rounded-lg text-left overflow-hidden",children:e.jsxs("div",{className:"px-2 w-[1%] h-full bg-blue-500 whitespace-nowrap",style:{width:`${s}%`},children:[c," (",`${s.toFixed(2)}%`,")"]})})}const k={"US female 1":"cmu_us_slt_arctic-wav-arctic_a0001","US female 2":"cmu_us_clb_arctic-wav-arctic_a0001","US male 1":"cmu_us_bdl_arctic-wav-arctic_a0003","US male 2":"cmu_us_rms_arctic-wav-arctic_a0003","Canadian male":"cmu_us_jmk_arctic-wav-arctic_a0002","Scottish male":"cmu_us_awb_arctic-wav-arctic_b0002","Indian male":"cmu_us_ksp_arctic-wav-arctic_a0007"},S="cmu_us_slt_arctic-wav-arctic_a0001",E=()=>{const[c,s]=r.useState(null),[l,n]=r.useState(!1),[p,d]=r.useState([]),[x,b]=r.useState("I love Hugging Face!"),[f,g]=r.useState(S),[h,w]=r.useState(null),i=r.useRef(null);r.useEffect(()=>{i.current||(i.current=new Worker(new URL(""+new URL("worker-7MiA6Plm.js",import.meta.url).href,import.meta.url),{type:"module"}));const t=a=>{switch(a.data.status){case"initiate":s(!1),d(o=>[...o,a.data]);break;case"progress":d(o=>o.map(u=>u.file===a.data.file?{...u,progress:a.data.progress}:u));break;case"done":d(o=>o.filter(u=>u.file!==a.data.file));break;case"ready":s(!0);break;case"complete":n(!1);const _=URL.createObjectURL(a.data.output);w(_);break}};return i.current.addEventListener("message",t),()=>i.current.removeEventListener("message",t)});const j=()=>{n(!0),i.current.postMessage({text:x,speaker_id:f})},m=c===!1;return e.jsxs("div",{className:"min-h-screen flex items-center justify-center bg-gray-100",children:[e.jsxs("div",{className:"absolute gap-1 z-50 top-0 left-0 w-full h-full transition-all px-8 flex flex-col justify-center text-center",style:{opacity:m?1:0,pointerEvents:m?"all":"none",background:"rgba(0, 0, 0, 0.9)",backdropFilter:"blur(8px)"},children:[m&&e.jsx("label",{className:"text-white text-xl p-3",children:"Loading models... (only run once)"}),p.map(t=>e.jsx("div",{children:e.jsx(y,{text:`${t.name}/${t.file}`,percentage:t.progress})},`${t.name}/${t.file}`))]}),e.jsxs("div",{className:"bg-white p-8 rounded-lg shadow-lg w-full max-w-xl m-2",children:[e.jsx("h1",{className:"text-3xl font-semibold text-gray-800 mb-1 text-center",children:"In-browser Text to Speech"}),e.jsxs("h2",{className:"text-base font-medium text-gray-700 mb-2 text-center",children:["Made with"," ",e.jsx("a",{href:"https://huggingface.co/docs/transformers.js",target:"_blank",rel:"noreferrer",children:"🤗 Transformers.js"})]}),e.jsxs("div",{className:"mb-4",children:[e.jsx("label",{htmlFor:"text",className:"block text-sm font-medium text-gray-600",children:"Text"}),e.jsx("textarea",{id:"text",className:"border border-gray-300 rounded-md p-2 w-full",rows:"4",placeholder:"Enter text here",value:x,onChange:t=>b(t.target.value)})]}),e.jsxs("div",{className:"mb-4",children:[e.jsx("label",{htmlFor:"speaker",className:"block text-sm font-medium text-gray-600",children:"Speaker"}),e.jsx("select",{id:"speaker",className:"border border-gray-300 rounded-md p-2 w-full",value:f,onChange:t=>g(t.target.value),children:Object.entries(k).map(([t,a])=>e.jsx("option",{value:a,children:t},t))})]}),e.jsx("div",{className:"flex justify-center",children:e.jsx("button",{className:`${l?"bg-gray-400 cursor-not-allowed":"bg-blue-500 cursor-pointer hover:bg-blue-600"} text-white rounded-md py-2 px-4`,onClick:j,disabled:l,children:l?"Generating...":"Generate"})}),h&&e.jsx(v,{audioUrl:h,mimeType:"audio/wav"})]})]})};export{E as default};

assets/App-CO3ebtL-.js

@@ -0,0 +1,2 @@
+import{r,j as s}from"./index-89fUx0Kn.js";const v=["Disappointed with the battery life! The phone barely lasts half a day with regular use. Considering how much I paid for it, I expected better performance in this department.","I bought this phone a week ago, and I'm already frustrated with the battery life. It barely lasts half a day with normal usage. I expected more from a supposedly high-end device","The charging port is so finicky. Sometimes it takes forever to charge, and other times it doesn't even recognize the charger. Frustrating experience!","This phone heats up way too quickly, especially when using demanding apps. It's uncomfortable to hold, and I'm concerned it might damage the internal components over time. Not what I expected","This phone is like holding a hot potato. Video calls turn it into a scalding nightmare. Seriously, can't it keep its cool?","Forget about a heatwave outside; my phone's got its own. It's like a little portable heater. Not what I signed up for.","I dropped the phone from a short distance, and the screen cracked easily. Not as durable as I expected from a flagship device.","Took a slight bump in my bag, and the frame got dinged. Are we back in the flip phone era?","So, my phone's been in my pocket with just keys – no ninja moves or anything. Still, it managed to get some scratches. Disappointed with the build quality.","The software updates are a nightmare. Each update seems to introduce new bugs, and it takes forever for them to be fixed.","Constant crashes and freezes make me want to throw it into a black hole.","Every time I open Instagram, my phone freezes and crashes. It's so frustrating!","I'm not sure what to make of this phone. It's not bad, but it's not great either. I'm on the fence about it.","I hate the color of this phone. It's so ugly!","This phone sucks! I'm returning it."].sort(()=>Math.random()-.5),k=["Battery and charging problems","Overheating","Poor build quality","Software issues","Other"];function j(){const[u,x]=r.useState(v.join(`
+`)),[o,n]=r.useState(k.map(t=>({title:t,items:[]}))),[g,c]=r.useState("idle"),i=r.useRef(null);r.useEffect(()=>{i.current||(i.current=new Worker(new URL(""+new URL("worker-0oxnqtUs.js",import.meta.url).href,import.meta.url),{type:"module"}));const t=a=>{const e=a.data.status;if(e==="initiate")c("loading");else if(e==="ready")c("ready");else if(e==="output"){const{sequence:l,labels:d,scores:w}=a.data.output,y=w[0]>.5?d[0]:"Other",m=o.map(p=>p.title).indexOf(y)??o.length-1;n(p=>{const h=[...p];return h[m]={...h[m],items:[...h[m].items,l]},h})}else e==="complete"&&c("idle")};return i.current.addEventListener("message",t),()=>i.current.removeEventListener("message",t)},[o]);const b=r.useCallback(()=>{c("processing"),i.current.postMessage({text:u,labels:o.slice(0,o.length-1).map(t=>t.title)})},[u,o]),f=g!=="idle";return s.jsxs("div",{className:"flex flex-col h-screen w-screen p-1",children:[s.jsx("textarea",{className:"border w-full p-1 h-1/2",value:u,onChange:t=>x(t.target.value)}),s.jsxs("div",{className:"flex flex-col justify-center items-center m-2 gap-1",children:[s.jsx("button",{className:"border py-1 px-2 bg-blue-400 rounded text-white text-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer",disabled:f,onClick:b,children:f?g==="loading"?"Model loading...":"Processing":"Categorize"}),s.jsxs("div",{className:"flex gap-1",children:[s.jsx("button",{className:"border py-1 px-2 bg-green-400 rounded text-white text-sm font-medium cursor-pointer",onClick:t=>{n(a=>{const e=[...a];return e.splice(e.length-1,0,{title:"New Category",items:[]}),e})},children:"Add category"}),s.jsx("button",{className:"border py-1 px-2 bg-red-400 rounded text-white text-sm font-medium cursor-pointer",disabled:o.length<=1,onClick:t=>{n(a=>{const e=[...a];return e.splice(e.length-2,1),e})},children:"Remove category"}),s.jsx("button",{className:"border py-1 px-2 bg-orange-400 rounded text-white text-sm font-medium cursor-pointer",onClick:t=>{n(a=>a.map(e=>({...e,items:[]})))},children:"Clear"})]})]}),s.jsx("div",{className:"flex justify-between flex-grow overflow-x-auto max-h-[40%]",children:o.map((t,a)=>s.jsxs("div",{className:"flex flex-col w-full",children:[s.jsx("input",{disabled:t.title==="Other",className:"w-full border px-1 text-center",value:t.title,onChange:e=>{n(l=>{const d=[...l];return d[a].title=e.target.value,d})}}),s.jsx("div",{className:"overflow-y-auto h-full border",children:t.items.map((e,l)=>s.jsx("div",{className:"m-2 border bg-red-50 rounded p-1 text-sm",children:e},l))})]},a))})]})}export{j as default};

assets/App-Cu2_gDUw.js

@@ -0,0 +1 @@
+import{j as e,r as s}from"./index-89fUx0Kn.js";import{p as _,m as A}from"./purify.es-CipTfxe2.js";function F(t){return e.jsxs("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M12 8V4H8"}),e.jsx("rect",{width:"16",height:"12",x:"4",y:"8",rx:"2"}),e.jsx("path",{d:"M2 14h2"}),e.jsx("path",{d:"M20 14h2"}),e.jsx("path",{d:"M15 13v2"}),e.jsx("path",{d:"M9 13v2"})]})}function G(t){return e.jsxs("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}),e.jsx("circle",{cx:"12",cy:"7",r:"4"})]})}function P(t){return _.sanitize(A.parse(t))}function U({messages:t}){const n=t.length===0;return s.useEffect(()=>{window.MathJax.typeset()},[t]),e.jsx("div",{className:`flex-1 p-6 max-w-[960px] w-full ${n?"flex flex-col items-center justify-end":"space-y-4"}`,children:n?e.jsx("div",{className:"text-xl",children:"Ready!"}):t.map((o,d)=>e.jsx("div",{className:"flex items-start space-x-4",children:o.role==="assistant"?e.jsxs(e.Fragment,{children:[e.jsx(F,{className:"h-6 w-6 min-h-6 min-w-6 my-3 text-gray-500 dark:text-gray-300"}),e.jsx("div",{className:"bg-gray-200 dark:bg-gray-700 rounded-lg p-4",children:e.jsx("p",{className:"min-h-6 text-gray-800 dark:text-gray-200 overflow-wrap-anywhere",children:o.content.length>0?e.jsx("span",{className:"markdown",dangerouslySetInnerHTML:{__html:P(o.content)}}):e.jsxs("span",{className:"h-6 flex items-center gap-1",children:[e.jsx("span",{className:"w-2.5 h-2.5 bg-gray-600 dark:bg-gray-300 rounded-full animate-pulse"}),e.jsx("span",{className:"w-2.5 h-2.5 bg-gray-600 dark:bg-gray-300 rounded-full animate-pulse animation-delay-200"}),e.jsx("span",{className:"w-2.5 h-2.5 bg-gray-600 dark:bg-gray-300 rounded-full animate-pulse animation-delay-400"})]})})})]}):e.jsxs(e.Fragment,{children:[e.jsx(G,{className:"h-6 w-6 min-h-6 min-w-6 my-3 text-gray-500 dark:text-gray-300"}),e.jsx("div",{className:"bg-blue-500 text-white rounded-lg p-4",children:e.jsx("p",{className:"min-h-6 overflow-wrap-anywhere",children:o.content})})]})},`message-${d}`))})}function L(t){return e.jsxs("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M5 12h14"}),e.jsx("path",{d:"m12 5 7 7-7 7"})]})}function D(t){return e.jsxs("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"}),e.jsx("path",{fill:"currentColor",d:"M9 9.563C9 9.252 9.252 9 9.563 9h4.874c.311 0 .563.252.563.563v4.874c0 .311-.252.563-.563.563H9.564A.562.562 0 0 1 9 14.437V9.564Z"})]})}function $(t){const n=t==0?0:Math.floor(Math.log(t)/Math.log(1024));return+(t/Math.pow(1024,n)).toFixed(2)*1+["B","kB","MB","GB","TB"][n]}function O({text:t,percentage:n,total:o}){return n??=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:`${n}%`},children:[t," (",n.toFixed(2),"%",isNaN(o)?"":` of ${$(o)}`,")"]})})}const V=!!navigator.gpu,z=120,K=["Give me some tips to improve my time management skills.","What is the difference between AI and ML?","Write python code to compute the nth fibonacci number."];function Z(){const t=s.useRef(null),n=s.useRef(null),o=s.useRef(null),[d,p]=s.useState(null),[f,E]=s.useState(null),[R,S]=s.useState(""),[I,b]=s.useState([]),[u,k]=s.useState(!1),[x,v]=s.useState(""),[c,m]=s.useState([]),[y,j]=s.useState(null),[N,C]=s.useState(null);function w(r){m(i=>[...i,{role:"user",content:r}]),j(null),k(!0),v("")}function B(){t.current.postMessage({type:"interrupt"})}s.useEffect(()=>{T()},[x]);function T(){if(!n.current)return;const r=n.current;r.style.height="auto";const i=Math.min(Math.max(r.scrollHeight,24),200);r.style.height=`${i}px`}return s.useEffect(()=>{t.current||(t.current=new Worker(new URL(""+new URL("worker-Dk7V__Sq.js",import.meta.url).href,import.meta.url),{type:"module"}),t.current.postMessage({type:"check"}));const r=a=>{switch(a.data.status){case"loading":p("loading"),S(a.data.data);break;case"initiate":b(l=>[...l,a.data]);break;case"progress":b(l=>l.map(h=>h.file===a.data.file?{...h,...a.data}:h));break;case"done":b(l=>l.filter(h=>h.file!==a.data.file));break;case"ready":p("ready");break;case"start":m(l=>[...l,{role:"assistant",content:""}]);break;case"update":{const{output:l,tps:h,numTokens:W}=a.data;j(h),C(W),m(H=>{const g=[...H],M=g.at(-1);return g[g.length-1]={...M,content:M.content+l},g})}break;case"complete":k(!1);break;case"error":E(a.data.data);break}},i=a=>{console.error("Worker error:",a)};return t.current.addEventListener("message",r),t.current.addEventListener("error",i),()=>{t.current.removeEventListener("message",r),t.current.removeEventListener("error",i)}},[]),s.useEffect(()=>{c.filter(r=>r.role==="user").length!==0&&c.at(-1).role!=="assistant"&&(j(null),t.current.postMessage({type:"generate",data:c}))},[c,u]),s.useEffect(()=>{if(!o.current||!u)return;const r=o.current;r.scrollHeight-r.scrollTop-r.clientHeight<z&&(r.scrollTop=r.scrollHeight)},[c,u]),V?e.jsxs("div",{className:"flex flex-col h-screen mx-auto items justify-end text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900",children:[d===null&&c.length===0&&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 max-w-[300px] text-center",children:[e.jsx("img",{src:"logo.png",width:"85%",height:"auto",className:"block"}),e.jsx("h1",{className:"text-4xl font-bold mb-1",children:"Phi-3.5 WebGPU"}),e.jsxs("h2",{className:"font-semibold",children:["A private and powerful AI chatbot",e.jsx("br",{}),"that runs locally in your browser."]})]}),e.jsxs("div",{className:"flex flex-col items-center px-4",children:[e.jsxs("p",{className:"max-w-[514px] mb-4",children:[e.jsx("br",{}),"You are about to load"," ",e.jsx("a",{href:"onnx-community/Phi-3.5-mini-instruct-onnx-web",target:"_blank",rel:"noreferrer",className:"font-medium underline",children:"Phi-3.5-mini-instruct"}),", a 3.82 billion parameter LLM that is optimized for inference on the web. Once downloaded, the model (2.3 GB) will be cached and reused when you revisit the page.",e.jsx("br",{}),e.jsx("br",{}),"Everything runs directly 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 your conversations aren't sent to a server. You can even disconnect from the internet after the model has loaded!",e.jsx("br",{}),"Want to learn more? Check out the demo's source code on"," ",e.jsx("a",{href:"https://github.com/huggingface/transformers.js-examples/tree/main/phi-3.5-webgpu",target:"_blank",rel:"noreferrer",className:"underline",children:"GitHub"}),"!"]}),f&&e.jsxs("div",{className:"text-red-500 text-center mb-2",children:[e.jsx("p",{className:"mb-1",children:"Unable to load model due to the following error:"}),e.jsx("p",{className:"text-sm",children:f})]}),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",onClick:()=>{t.current.postMessage({type:"load"}),p("loading")},disabled:d!==null||f!==null,children:"Load model"})]})]}),d==="loading"&&e.jsx(e.Fragment,{children:e.jsxs("div",{className:"w-full max-w-[500px] text-left mx-auto p-4 bottom-0 mt-auto",children:[e.jsx("p",{className:"text-center mb-1",children:R}),I.map(({file:r,progress:i,total:a},l)=>e.jsx(O,{text:r,percentage:i,total:a},l))]})}),d==="ready"&&e.jsxs("div",{ref:o,className:"overflow-y-auto scrollbar-thin w-full flex flex-col items-center h-full",children:[e.jsx(U,{messages:c}),c.length===0&&e.jsx("div",{children:K.map((r,i)=>e.jsx("div",{className:"m-1 border dark:border-gray-600 rounded-md p-2 bg-gray-100 dark:bg-gray-700 cursor-pointer",onClick:()=>w(r),children:r},i))}),e.jsx("p",{className:"text-center text-sm min-h-6 text-gray-500 dark:text-gray-300",children:y&&c.length>0&&e.jsxs(e.Fragment,{children:[!u&&e.jsxs("span",{children:["Generated ",N," tokens in"," ",(N/y).toFixed(2)," seconds ("]}),e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"font-medium text-center mr-1 text-black dark:text-white",children:y.toFixed(2)}),e.jsx("span",{className:"text-gray-500 dark:text-gray-300",children:"tokens/second"})]}),!u&&e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"mr-1",children:")."}),e.jsx("span",{className:"underline cursor-pointer",onClick:()=>{t.current.postMessage({type:"reset"}),m([])},children:"Reset"})]})]})})]}),e.jsxs("div",{className:"mt-2 border dark:bg-gray-700 rounded-lg w-[600px] max-w-[80%] max-h-[200px] mx-auto relative mb-3 flex",children:[e.jsx("textarea",{ref:n,className:"scrollbar-thin w-[550px] dark:bg-gray-700 px-3 py-4 rounded-lg bg-transparent border-none outline-none text-gray-800 disabled:text-gray-400 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 disabled:placeholder-gray-200 resize-none disabled:cursor-not-allowed",placeholder:"Type your message...",type:"text",rows:1,value:x,disabled:d!=="ready",title:d==="ready"?"Model is ready":"Model not loaded yet",onKeyDown:r=>{x.length>0&&!u&&r.key==="Enter"&&!r.shiftKey&&(r.preventDefault(),w(x))},onInput:r=>v(r.target.value)}),u?e.jsx("div",{className:"cursor-pointer",onClick:B,children:e.jsx(D,{className:"h-8 w-8 p-1 rounded-md text-gray-800 dark:text-gray-100 absolute right-3 bottom-3"})}):x.length>0?e.jsx("div",{className:"cursor-pointer",onClick:()=>w(x),children:e.jsx(L,{className:"h-8 w-8 p-1 bg-gray-800 dark:bg-gray-100 text-white dark:text-black rounded-md absolute right-3 bottom-3"})}):e.jsx("div",{children:e.jsx(L,{className:"h-8 w-8 p-1 bg-gray-200 dark:bg-gray-600 text-gray-50 dark:text-gray-800 rounded-md absolute right-3 bottom-3"})})]}),e.jsx("p",{className:"text-xs text-gray-400 text-center mb-3",children:"Disclaimer: Generated content may be inaccurate or false."})]}):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{Z as default};

assets/App-DHGy8fDP.js

@@ -0,0 +1 @@
+import{j as e,r as a}from"./index-89fUx0Kn.js";import{p as J,m as X}from"./purify.es-CipTfxe2.js";function z(t){return e.jsxs("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M12 8V4H8"}),e.jsx("rect",{width:"16",height:"12",x:"4",y:"8",rx:"2"}),e.jsx("path",{d:"M2 14h2"}),e.jsx("path",{d:"M20 14h2"}),e.jsx("path",{d:"M15 13v2"}),e.jsx("path",{d:"M9 13v2"})]})}function K(t){return e.jsxs("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}),e.jsx("circle",{cx:"12",cy:"7",r:"4"})]})}function Y(t){return J.sanitize(X.parse(t))}function q({messages:t}){const o=t.length===0;return a.useEffect(()=>{window.MathJax.typeset()},[t]),e.jsx("div",{className:`flex-1 p-6 max-w-[960px] w-full ${o?"flex flex-col items-center justify-end":"space-y-4"}`,children:o?e.jsx("div",{className:"text-xl",children:"Ready!"}):t.map((n,p)=>e.jsx("div",{className:"flex items-start space-x-4",children:n.role==="assistant"?e.jsxs(e.Fragment,{children:[e.jsx(z,{className:"h-6 w-6 min-h-6 min-w-6 my-3 text-gray-500 dark:text-gray-300"}),e.jsx("div",{className:"bg-gray-200 dark:bg-gray-700 rounded-lg p-4",children:e.jsx("p",{className:"min-h-6 text-gray-800 dark:text-gray-200 overflow-wrap-anywhere",children:n.image?e.jsx("img",{src:n.image,className:"max-w-full w-[384px] rounded-md"}):n.content.length>0?e.jsx("span",{className:"markdown",dangerouslySetInnerHTML:{__html:Y(n.content)}}):e.jsxs("span",{className:"h-6 flex items-center gap-1",children:[e.jsx("span",{className:"w-2.5 h-2.5 bg-gray-600 dark:bg-gray-300 rounded-full animate-pulse"}),e.jsx("span",{className:"w-2.5 h-2.5 bg-gray-600 dark:bg-gray-300 rounded-full animate-pulse animation-delay-200"}),e.jsx("span",{className:"w-2.5 h-2.5 bg-gray-600 dark:bg-gray-300 rounded-full animate-pulse animation-delay-400"})]})})})]}):e.jsxs(e.Fragment,{children:[e.jsx(K,{className:"h-6 w-6 min-h-6 min-w-6 my-3 text-gray-500 dark:text-gray-300"}),e.jsxs("div",{className:"bg-blue-500 text-white rounded-lg p-4",children:[n.image&&e.jsx("img",{src:n.image,className:"max-w-full max-h-64 rounded-md mb-3"}),e.jsx("p",{className:"min-h-6 overflow-wrap-anywhere",children:n.content})]})]})},`message-${p}`))})}function F(t){return e.jsxs("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M5 12h14"}),e.jsx("path",{d:"m12 5 7 7-7 7"})]})}function Q(t){return e.jsxs("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"}),e.jsx("path",{fill:"currentColor",d:"M9 9.563C9 9.252 9.252 9 9.563 9h4.874c.311 0 .563.252.563.563v4.874c0 .311-.252.563-.563.563H9.564A.562.562 0 0 1 9 14.437V9.564Z"})]})}function ee(t){const o=t==0?0:Math.floor(Math.log(t)/Math.log(1024));return+(t/Math.pow(1024,o)).toFixed(2)*1+["B","kB","MB","GB","TB"][o]}function te({text:t,percentage:o,total:n}){return o??=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:`${o}%`},children:[t," (",o.toFixed(2),"%",isNaN(n)?"":` of ${ee(n)}`,")"]})})}function re(t){return e.jsx("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("path",{d:"m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"})})}function ae(t){return e.jsx("svg",{...t,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("path",{d:"m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"})})}function se({src:t,onRemove:o,...n}){const[p,l]=a.useState(!1);return e.jsxs("div",{...n,onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),children:[e.jsx(ae,{onClick:o,className:`absolute top-0 right-0 cursor-pointer dark:fill-gray-400 dark:text-gray-100 fill-gray-200 text-gray-800 ${p?"":"hidden"}`}),e.jsx("img",{src:t,alt:"Upload preview",className:"w-full h-full object-cover rounded-md"})]})}const ne=!!navigator.gpu,oe=120,le=[{display:"Generate an image of a cute baby fox.",prompt:"/imagine A cute and adorable baby fox with big brown eyes, autumn leaves in the background enchanting, immortal, fluffy, shiny mane, Petals, fairyism, unreal engine 5 and Octane Render, highly detailed, photorealistic, cinematic, natural colors."},{prompt:"Convert the formula into latex code.",image:"https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/quadratic_formula.png"},{prompt:"What is the difference between AI and ML?"},{prompt:"Write python code to compute the nth fibonacci number."}];function de(){const t=a.useRef(null),o=a.useRef(null),n=a.useRef(null),p=a.useRef(null),[l,w]=a.useState(null),[j,H]=a.useState(null),[W,A]=a.useState(""),[G,y]=a.useState([]),[u,M]=a.useState(!1),[g,R]=a.useState(""),[f,k]=a.useState(null),[m,b]=a.useState([]),[v,N]=a.useState(null),[I,E]=a.useState(null),[C,S]=a.useState(null),[U,B]=a.useState(null);function L(r,i){b(s=>[...s,{role:"user",content:r,image:i??f}]),N(null),M(!0),R(""),k(null),E(null),S(null),B(null)}function P(){t.current.postMessage({type:"interrupt"})}function _(){if(!o.current)return;const r=o.current;r.style.height="auto";const i=Math.min(Math.max(r.scrollHeight,24),200);r.style.height=`${i}px`}return a.useEffect(()=>{_()},[g]),a.useEffect(()=>{t.current||(t.current=new Worker(new URL(""+new URL("worker-CL0Y5A27.js",import.meta.url).href,import.meta.url),{type:"module"}),t.current.postMessage({type:"check"}));const r=s=>{switch(s.data.status){case"success":w("idle");break;case"error":H(s.data.data);break;case"loading":w("loading"),A(s.data.data);break;case"initiate":y(d=>[...d,s.data]);break;case"progress":y(d=>d.map(c=>c.file===s.data.file?{...c,...s.data}:c));break;case"done":y(d=>d.filter(c=>c.file!==s.data.file));break;case"ready":w("ready");break;case"start":b(d=>[...d,{role:"assistant",content:""}]);break;case"text-update":const{output:h,tps:O,numTokens:$}=s.data;N(O),E($),b(d=>{const c=[...d],x=c.at(-1);return c[c.length-1]={...x,content:x.content+h},c});break;case"image-update":const{blob:T,progress:Z,time:D}=s.data;if(T){const d=URL.createObjectURL(T);b(c=>{const x=[...c],V=x.at(-1);return x[x.length-1]={...V,image:d},x})}else S(Z),B(D);break;case"complete":M(!1);break}},i=s=>{console.error("Worker error:",s)};return t.current.addEventListener("message",r),t.current.addEventListener("error",i),()=>{t.current.removeEventListener("message",r),t.current.removeEventListener("error",i)}},[]),a.useEffect(()=>{m.filter(r=>r.role==="user").length!==0&&m.at(-1).role!=="assistant"&&(N(null),t.current.postMessage({type:"generate",data:m}))},[m,u]),a.useEffect(()=>{if(!n.current||!u)return;const r=n.current;r.scrollHeight-r.scrollTop-r.clientHeight<oe&&(r.scrollTop=r.scrollHeight)},[m,u]),ne?e.jsxs("div",{className:"flex flex-col h-screen mx-auto items justify-end text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900",children:[(l===null||l==="idle")&&m.length===0&&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 max-w-[350px] text-center",children:[e.jsx("img",{src:"logo.png",width:"80%",height:"auto",className:"block"}),e.jsx("h1",{className:"text-5xl font-bold mb-1",children:"Janus WebGPU"}),e.jsx("h2",{className:"font-semibold",children:"A novel autoregressive framework for unified multimodal understanding and generation."})]}),e.jsxs("div",{className:"flex flex-col items-center px-4",children:[e.jsxs("p",{className:"max-w-[452px] mb-4",children:[e.jsx("br",{}),"You are about to load"," ",e.jsx("a",{href:"https://huggingface.co/onnx-community/Janus-1.3B-ONNX",target:"_blank",rel:"noreferrer",className:"font-medium underline",children:"Janus-1.3B"}),", a multimodal vision-language model that is optimized for inference on the web. Everything runs 100% locally in your browser with"," ",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 data is sent to a server. Once the model has loaded, it can even be used offline. The source code for the demo can be found on"," ",e.jsx("a",{href:"https://github.com/huggingface/transformers.js-examples/tree/main/janus-webgpu",target:"_blank",rel:"noreferrer",className:"font-medium underline",children:"GitHub"}),"."]}),j&&e.jsxs("div",{className:"text-red-500 text-center mb-2",children:[e.jsx("p",{className:"mb-1",children:"Unable to load model due to the following error:"}),e.jsx("p",{className:"text-sm",children:j})]}),!j&&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",onClick:()=>{t.current.postMessage({type:"load"}),w("loading")},disabled:l===null||l==="loading",children:l===null?"Running feature checks...":"Load model"})]})]}),l==="loading"&&e.jsx(e.Fragment,{children:e.jsxs("div",{className:"w-full max-w-[500px] text-left mx-auto p-4 bottom-0 mt-auto",children:[e.jsx("p",{className:"text-center mb-1",children:W}),G.map(({file:r,progress:i,total:s},h)=>e.jsx(te,{text:r,percentage:i,total:s},h))]})}),l==="ready"&&e.jsxs("div",{ref:n,className:"overflow-y-auto scrollbar-thin w-full flex flex-col items-center h-full",children:[e.jsx(q,{messages:m}),m.length===0&&!f&&e.jsx("div",{className:"flex flex-col center",children:le.map(({display:r,prompt:i,image:s},h)=>e.jsx("div",{className:"max-w-[600px] m-1 border dark:border-gray-600 rounded-md p-2 bg-gray-100 dark:bg-gray-700 cursor-pointer",onClick:()=>L(i,s),children:r??i},h))}),e.jsx("p",{className:"text-center text-sm min-h-6 text-gray-500 dark:text-gray-300",children:m.length>0&&e.jsxs(e.Fragment,{children:[v?e.jsxs(e.Fragment,{children:[!u&&e.jsxs("span",{children:["Generated ",I," tokens in"," ",(I/v).toFixed(2)," seconds ("]}),e.jsx("span",{className:"font-medium font-mono text-center mr-1 text-black dark:text-white",children:v.toFixed(2)}),e.jsx("span",{className:"text-gray-500 dark:text-gray-300",children:"tokens/second"}),!u&&e.jsx("span",{className:"mr-1",children:")."})]}):C&&e.jsx(e.Fragment,{children:u?e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Generating image..."})," (",e.jsxs("span",{className:"font-medium font-mono text-center text-black dark:text-white",children:[(C*100).toFixed(2),"%"]}),e.jsx("span",{className:"mr-1",children:")"})]}):e.jsxs("span",{children:["Generated image in"," ",(U/1e3).toFixed(2)," ","seconds. "]})}),!u&&e.jsx("span",{className:"underline cursor-pointer",onClick:()=>b([]),children:"Reset"})]})})]}),e.jsxs("div",{className:"mt-2 border dark:bg-gray-700 rounded-lg w-[600px] max-w-[80%] max-h-[200px] mx-auto relative mb-3 flex",children:[e.jsxs("label",{htmlFor:"file-upload",className:l==="ready"?"cursor-pointer":"cursor-not-allowed pointer-events-none",children:[e.jsx(re,{className:`h-8 w-8 p-1 rounded-md ${l==="ready"?"text-gray-800 dark:text-gray-100":"text-gray-400 dark:text-gray-500"} absolute bottom-3 left-1.5`}),e.jsx("input",{ref:p,id:"file-upload",type:"file",accept:"image/*",className:"hidden",onInput:r=>{const i=r.target.files[0];if(!i)return;const s=new FileReader;s.onload=h=>{k(h.target.result),r.target.value=""},s.readAsDataURL(i)}})]}),e.jsxs("div",{className:"w-full flex flex-col",children:[f&&e.jsx(se,{onRemove:()=>{k(null)},src:f,className:"w-20 h-20 min-w-20 min-h-20 relative p-2"}),e.jsx("textarea",{ref:o,className:"scrollbar-thin w-full pl-11 pr-12 dark:bg-gray-700 py-4 rounded-lg bg-transparent border-none outline-none text-gray-800 disabled:text-gray-400 dark:text-gray-100 placeholder-gray-500 disabled:placeholder-gray-200 dark:placeholder-gray-300 dark:disabled:placeholder-gray-500 resize-none disabled:cursor-not-allowed",placeholder:"Type message or use '/imagine <prompt>' to generate an image.",type:"text",rows:1,value:g,disabled:l!=="ready",title:l==="ready"?"Model is ready":"Model not loaded yet",onKeyDown:r=>{g.length>0&&!u&&r.key==="Enter"&&!r.shiftKey&&(r.preventDefault(),L(g,f))},onInput:r=>R(r.target.value)})]}),u?e.jsx("div",{className:"cursor-pointer",onClick:P,children:e.jsx(Q,{className:"h-8 w-8 p-1 rounded-md text-gray-800 dark:text-gray-100 absolute right-3 bottom-3"})}):g.length>0?e.jsx("div",{className:"cursor-pointer",onClick:()=>L(g),children:e.jsx(F,{className:"h-8 w-8 p-1 bg-gray-800 dark:bg-gray-100 text-white dark:text-black rounded-md absolute right-3 bottom-3"})}):e.jsx("div",{children:e.jsx(F,{className:"h-8 w-8 p-1 bg-gray-200 dark:bg-gray-600 text-gray-50 dark:text-gray-800 rounded-md absolute right-3 bottom-3"})})]}),e.jsx("p",{className:"text-xs text-gray-400 text-center mb-3",children:"Disclaimer: Generated content may be inaccurate or false."})]}):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{de as default};

assets/App-DpCeKn2Q.js

@@ -0,0 +1,2 @@
+import{r as s,j as e}from"./index-89fUx0Kn.js";const p=["'To Kill a Mockingbird' is a novel by Harper Lee published in 1960. It was immediately successful, winning the Pulitzer Prize, and has become a classic of modern American literature.","The novel 'Moby-Dick' was written by Herman Melville and first published in 1851. It is considered a masterpiece of American literature and deals with complex themes of obsession, revenge, and the conflict between good and evil.","Harper Lee, an American novelist widely known for her novel 'To Kill a Mockingbird', was born in 1926 in Monroeville, Alabama. She received the Pulitzer Prize for Fiction in 1961.","Jane Austen was an English novelist known primarily for her six major novels, which interpret, critique and comment upon the British landed gentry at the end of the 18th century.","The 'Harry Potter' series, which consists of seven fantasy novels written by British author J.K. Rowling, is among the most popular and critically acclaimed books of the modern era.","'The Great Gatsby', a novel written by American author F. Scott Fitzgerald, was published in 1925. The story is set in the Jazz Age and follows the life of millionaire Jay Gatsby and his pursuit of Daisy Buchanan."].sort(()=>Math.random()-.5);function b(){const[d,a]=s.useState("idle"),[l,h]=s.useState("Who wrote 'To Kill a Mockingbird'?"),[i,x]=s.useState(p.join(`
+`)),[m,o]=s.useState([]),n=s.useRef(null);s.useEffect(()=>{n.current??=new Worker(new URL(""+new URL("worker-BTxae1Ew.js",import.meta.url).href,import.meta.url),{type:"module"});const t=r=>{const c=r.data.status;r.data.file?.endsWith(".onnx")?c==="initiate"?a("loading"):c==="done"&&a("ready"):c==="complete"&&(o(r.data.output),a("idle"))};return n.current.addEventListener("message",t),()=>n.current.removeEventListener("message",t)},[]);const f=s.useCallback(()=>{a("processing"),n.current.postMessage({query:l,documents:i})},[l,i]),u=d!=="idle";return e.jsxs("div",{className:"flex flex-col h-screen w-screen p-8",children:[e.jsx("h1",{className:"text-2xl md:text-4xl font-bold text-center mb-1",children:"Reranking w/ The Crispy mixedbread Rerank Models"}),e.jsxs("p",{className:"text-lg md:text-xl font-medium text-center mb-2",children:["Powered by"," ",e.jsx("a",{href:"https://huggingface.co/mixedbread-ai/mxbai-rerank-xsmall-v1",target:"_blank",rel:"noreferrer",children:"mxbai-rerank-xsmall-v1"})," ","and"," ",e.jsx("a",{href:"http://huggingface.co/docs/transformers.js",target:"_blank",rel:"noreferrer",children:"🤗 Transformers.js"})]}),e.jsxs("div",{className:"flex-grow flex flex-wrap p-4",children:[e.jsxs("div",{className:"flex flex-col items-center gap-y-1 w-full md:w-1/2",children:[e.jsx("label",{className:"text-lg font-medium",children:"Query"}),e.jsx("textarea",{placeholder:"Enter query.",className:"border w-full p-1 resize-none overflow-hidden h-10",value:l,onChange:t=>{h(t.target.value),o([])}}),e.jsx("label",{className:"text-lg font-medium mt-1",children:"Documents"}),e.jsx("textarea",{placeholder:"Enter documents to compare with the query. One sentence per line.",className:"border w-full p-1 h-full resize-none",value:i,onChange:t=>{x(t.target.value),o([])}}),e.jsx("button",{className:"border py-1 px-2 bg-green-400 rounded text-white text-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer",disabled:u,onClick:f,children:u?d==="loading"?"Model loading...":"Processing":"Rerank"})]}),e.jsx("div",{className:"flex flex-col items-center w-full md:w-1/2 gap-y-1",children:m.length>0&&e.jsx(e.Fragment,{children:e.jsxs("div",{className:"w-full flex flex-col gap-y-1",children:[e.jsx("label",{className:"text-lg font-medium text-center",children:"Results"}),e.jsx("div",{className:"flex flex-col gap-y-1",children:m.map((t,r)=>e.jsxs("div",{className:"flex gap-x-2 border mx-2 p-1",children:[e.jsx("span",{className:"font-bold",children:t.score.toFixed(3)}),e.jsx("span",{children:t.text})]},r))})]})})})]})]})}export{b as default};

assets/App-qHM7w8U_.js

@@ -0,0 +1 @@
+import{j as e,r}from"./index-89fUx0Kn.js";function O(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 R({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 ${O(n)}`,")"]})})}const N="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/beetle.png",I=({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 D(){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(""+new URL("worker-DO1kQc-G.js",import.meta.url).href,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(R,{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(I,{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{D as default};

index.html

@@ -13,8 +13,8 @@
       };
     </script>
     <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-    <script type="module" crossorigin src="/assets/index-DVHLcSXM.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BdmsDjw3.css">
+    <script type="module" crossorigin src="./assets/index-89fUx0Kn.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BdmsDjw3.css">
   </head>
   <body>
     <div id="root"></div>