assets/App-B7rRZFy4.js

import{j as e,r as s}from"./index-BSMha4W3.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 P(t){return A.sanitize(F.parse(t))}function U({messages:t}){const a=t.length===0;return s.useEffect(()=>{window.MathJax&&typeof window.MathJax.typeset=="function"&&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: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(_,{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 O(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 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 ${$(o)}`,")"]})})}const z=!!navigator.gpu,J=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 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(()=>{H()},[x]);function H(){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("/assets/worker-B0OaH1hR.js",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:T}=n.data;j(h),S(T),m(W=>{const g=[...W],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<J&&(r.scrollTop=r.scrollHeight)},[c,u]),z?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(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: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(O,{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};