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};