_next/static/chunks/app/page-275c87454c123a8f.js

(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[931],{4973:function(e,t,s){Promise.resolve().then(s.bind(s,2453))},2453:function(e,t,s){"use strict";s.r(t),s.d(t,{default:function(){return x}});var r=s(2872),i=s(6115),l=s(4209),h=e=>{let{progress:t}=e;return(0,r.jsx)(r.Fragment,{children:t>0&&t<100&&(0,r.jsx)("div",{className:"flex flex-col gap-2",children:(0,r.jsx)("div",{className:"h-1.5 outline outline-gray-200 bg-gray-200",children:(0,r.jsx)("div",{className:"bg-emerald-600 h-1.5",style:{width:"".concat(t,"%")}})})})})},n=s(8077),a=()=>{let[e,t]=(0,l.useState)(!1),[s,i]=(0,l.useState)(!1);(0,l.useEffect)(()=>{if(!navigator.gpu){i(!0);return}t(!0)},[]);let h=(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"50",height:"50",viewBox:"0 0 78 97.5",fill:"currentColor",children:(0,r.jsxs)("g",{children:[(0,r.jsx)("rect",{x:"54",y:"54",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"36",y:"36",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"30",y:"42",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"24",y:"48",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"18",y:"54",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"42",y:"30",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"48",y:"24",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"54",y:"18",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"42",y:"42",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"48",y:"48",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"30",y:"30",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"18",y:"18",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"24",y:"24",width:"6",height:"6"})]})});return(0,r.jsx)(r.Fragment,{children:e?(0,r.jsx)(r.Fragment,{}):(0,r.jsx)(n.Z,{classNames:{modal:"outline w-1/2 md:w-1/2 xl:w-1/3 2xl:w-1/4 overflow-x-hidden text-black"},open:s,onClose:()=>{i(!1)},center:!0,closeIcon:h,children:(0,r.jsx)("div",{className:"flex flex-col text-2xl h-full text-center",children:(0,r.jsx)("div",{className:"mx-8 mt-8",children:(0,r.jsx)("p",{children:"Uh oh! It looks like your browser doesn't support WebGPU. Please try again in supported browser (Chrome 121+)."})})})})})},o=e=>{let{isModalOpen:t,setIsModalOpen:s,loadModel:i}=e,l=(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"50",height:"50",viewBox:"0 0 78 97.5",fill:"currentColor",children:(0,r.jsxs)("g",{children:[(0,r.jsx)("rect",{x:"54",y:"54",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"36",y:"36",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"30",y:"42",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"24",y:"48",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"18",y:"54",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"42",y:"30",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"48",y:"24",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"54",y:"18",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"42",y:"42",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"48",y:"48",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"30",y:"30",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"18",y:"18",width:"6",height:"6"}),(0,r.jsx)("rect",{x:"24",y:"24",width:"6",height:"6"})]})});return(0,r.jsx)(r.Fragment,{children:t?(0,r.jsx)(n.Z,{classNames:{modal:"outline w-1/2 md:w-1/2 xl:w-1/3 2xl:w-1/4 overflow-x-hidden text-black"},open:t,onClose:()=>{s(!1)},center:!0,closeIcon:l,children:(0,r.jsx)("div",{className:"flex flex-col text-2xl h-full text-center",children:(0,r.jsxs)("div",{className:"mx-8 mt-8",children:[(0,r.jsx)("p",{children:"⚠️  You are about to download a 2.9GB file. Click to confirm."}),(0,r.jsx)("button",{className:"bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mt-4",onClick:()=>{s(!1),i()},children:"Confirm"})]})})}):(0,r.jsx)(r.Fragment,{})})};function x(){let[e,t]=(0,l.useState)({Phi:"phi3"}),[s,n]=(0,l.useState)(null),[x,d]=(0,l.useState)(null),[c,u]=(0,l.useState)(!1),[g,w]=(0,l.useState)(0),[m,j]=(0,l.useState)(""),[f,b]=(0,l.useState)("What is the meaning of life?"),[p,y]=(0,l.useState)(!1),[v,N]=(0,l.useState)(!1),[k,C]=(0,l.useState)(!1);async function S(){y(!0),d(await i.Hn.load(e,i.qX.Q8_0,e=>w(e))),n(e),w(0),y(!1)}async function _(){x&&!c&&(u(!0),j(""),await x.run({prompt:f,callback:e=>{j(t=>t+e.replace(/\n/g,"<br />"))}}),u(!1))}return(0,l.useEffect)(()=>{(async()=>{await (0,i.ZP)(),C((await window.indexedDB.databases()).map(e=>e.name).includes("ratchet"))})()},[]),(0,r.jsxs)("div",{className:"flex flex-col min-h-screen",children:[(0,r.jsxs)("div",{className:"w-full mx-auto p-8 flex-grow",children:[(0,r.jsx)("h1",{className:"text-4xl font-bold mb-8 text-blue-600",children:"Ratchet + Phi3"}),m?(0,r.jsx)("div",{className:"border border-gray-300 bg-white p-6 rounded-lg shadow-md",children:(0,r.jsx)("p",{className:"text-md text-gray-800",dangerouslySetInnerHTML:{__html:m}})}):(0,r.jsx)(r.Fragment,{})]}),(0,r.jsxs)("div",{className:"p-8",children:[(0,r.jsx)("label",{htmlFor:"prompt",className:"block mb-2 font-bold text-gray-700",children:"Prompt:"}),(0,r.jsx)("textarea",{id:"prompt",value:f,onChange:e=>b(e.target.value),disabled:c,className:"w-full h-32 p-4 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800",placeholder:"Enter your prompt here..."})]}),(0,r.jsx)(h,{progress:g}),(0,r.jsxs)("div",{className:"px-8 flex justify-end space-x-4",children:[s?(0,r.jsx)(r.Fragment,{}):(0,r.jsx)("button",{className:"bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300",onClick:()=>{k?S():N(!0)},disabled:c||null!==s,children:p?"Loading Model...":"Load Model"}),(0,r.jsx)("button",{className:"bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300",onClick:_,disabled:!x||c,children:"Run Model"})]}),(0,r.jsxs)("footer",{className:"w-full mt-8 py-6 bg-white border-t border-gray-300 flex justify-between mx-auto px-8",children:[(0,r.jsx)("a",{href:"https://huggingface.co/microsoft/phi3",className:"text-blue-500 hover:text-blue-600 transition duration-300",children:"Model Checkpoints"}),(0,r.jsx)("a",{href:"https://huggingface.co/papers/2404.14219",className:"text-blue-500 hover:text-blue-600 transition duration-300",children:"Technical Report"}),(0,r.jsx)("a",{href:"https://github.com/huggingface/ratchet",className:"text-blue-500 hover:text-blue-600 transition duration-300",children:"Ratchet"})]}),(0,r.jsx)(o,{isModalOpen:v,setIsModalOpen:N,loadModel:S}),(0,r.jsx)(a,{})]})}}},function(e){e.O(0,[784,577,726,744],function(){return e(e.s=4973)}),_N_E=e.O()}]);