import{S as Yc,i as Vc,s as _c,e as n,k as M,w as y,t as a,M as $c,c as o,d as e,m as h,a as p,x as j,h as t,b as c,T as Xc,G as s,g as i,y as d,L as zc,q as w,o as u,B as U,v as Hc}from"../../chunks/vendor-hf-doc-builder.js";import{I as E}from"../../chunks/IconCopyLink-hf-doc-builder.js";import{C as m}from"../../chunks/CodeBlock-hf-doc-builder.js";function Fc(Qr){let G,da,S,O,Ks,Bl,nn,le,on,wa,v,pn,Gs,rn,cn,Ss,Mn,hn,Nl,yn,jn,ua,Ws,Rs,Yr,Ua,xs,dn,fa,q,K,wn,Gl,un,Un,Sl,fn,Jn,ll,mn,Wl,Tn,bn,Rl,Cn,Ja,W,sl,se,xl,In,ee,vn,ma,Qs,Ys,Ql,En,gn,Ta,R,el,ae,Yl,kn,te,An,ba,x,al,ne,Vl,Zn,oe,Bn,Ca,tl,Nn,pe,Gn,Sn,Ia,_l,va,Vs,Wn,Ea,f,Rn,re,xn,Qn,ie,Yn,Vn,ce,_n,$n,Me,Xn,zn,he,Hn,Fn,ye,Ln,Pn,ga,Q,nl,je,$l,Dn,de,On,ka,ol,qn,Xl,Kn,lo,Aa,zl,Za,pl,so,we,eo,ao,Ba,Hl,Na,T,to,Fl,no,oo,Ll,ue,po,ro,Pl,io,co,Ue,Mo,ho,Ga,Dl,Sa,Y,rl,fe,Ol,yo,Je,jo,Wa,g,wo,me,uo,Uo,il,Te,fo,Jo,mo,Ra,ql,xa,cl,To,be,bo,Co,Qa,Kl,Ya,Ml,Io,Ce,vo,Eo,Va,ls,_a,hl,go,Ie,ko,Ao,$a,ss,Xa,_s,Zo,za,es,Ha,yl,Bo,as,No,Go,Fa,V,jl,ve,ts,So,Ee,Wo,La,$s,Ro,Pa,ns,Da,dl,xo,ge,Qo,Yo,Oa,k,Vo,os,_o,$o,ps,Xo,zo,qa,A,rs,Ho,is,Fo,Lo,Po,ke,Do,Oo,cs,qo,Ae,Ko,lp,Ka,_,Ze,sp,ep,Be,ap,tp,lt,$,wl,Ne,Ms,np,Ge,op,st,ul,pp,hs,rp,ip,et,X,Ul,Se,ys,cp,We,Mp,at,fl,hp,Re,yp,jp,tt,js,nt,Xs,dp,ot,J,wp,xe,up,Up,Qe,fp,Jp,Ye,mp,Tp,Ve,bp,Cp,_e,Ip,vp,$e,Ep,gp,pt,z,Jl,Xe,ds,kp,ze,Ap,rt,ml,Zp,ws,Bp,Np,it,us,ct,Tl,Gp,He,Sp,Wp,Mt,Us,ht,bl,Rp,Fe,xp,Qp,yt,Cl,fs,zs,Le,Yp,Vp,_p,Js,$p,ms,Il,Pe,Xp,zp,De,Hp,Fp,Lp,Ts,jt,H,vl,Oe,bs,Pp,qe,Dp,dt,El,Op,Ke,qp,Kp,wt,Cs,ut,Hs,lr,Ut,Is,ft,gl,sr,vs,er,ar,Jt,F,kl,la,Es,tr,sa,nr,mt,Z,or,gs,pr,rr,ks,ir,cr,Tt,b,L,Mr,ea,hr,yr,As,jr,dr,wr,Zs,ur,Bs,Ur,fr,Jr,aa,mr,Tr,P,br,ta,Cr,Ir,na,vr,Er,gr,Al,kr,oa,Ar,Zr,Ns,bt,D,pa,Br,Nr,ra,Gr,Sr,Ct;return Bl=new E({}),xl=new E({}),Yl=new E({}),Vl=new E({}),_l=new m({props:{code:"bnB4JTIwY3JlYXRlLW5leHQtYXBwJTQwbGF0ZXN0",highlighted:"npx create-next-app@latest"}}),$l=new E({}),zl=new m({props:{code:"bnBtJTIwaSUyMCU0MHhlbm92YSUyRnRyYW5zZm9ybWVycw==",highlighted:"npm i @xenova/transformers"}}),Hl=new m({props:{code:"JTJGKiolMjAlNDB0eXBlJTIwJTdCaW1wb3J0KCduZXh0JykuTmV4dENvbmZpZyU3RCUyMColMkYlMEFjb25zdCUyMG5leHRDb25maWclMjAlM0QlMjAlN0IlMEElMjAlMjAlMjAlMjAlMkYlMkYlMjAoT3B0aW9uYWwpJTIwRXhwb3J0JTIwYXMlMjBhJTIwc3RhdGljJTIwc2l0ZSUwQSUyMCUyMCUyMCUyMCUyRiUyRiUyMFNlZSUyMGh0dHBzJTNBJTJGJTJGbmV4dGpzLm9yZyUyRmRvY3MlMkZwYWdlcyUyRmJ1aWxkaW5nLXlvdXItYXBwbGljYXRpb24lMkZkZXBsb3lpbmclMkZzdGF0aWMtZXhwb3J0cyUyM2NvbmZpZ3VyYXRpb24lMEElMjAlMjAlMjAlMjBvdXRwdXQlM0ElMjAnZXhwb3J0JyUyQyUyMCUyRiUyRiUyMEZlZWwlMjBmcmVlJTIwdG8lMjBtb2RpZnklMkZyZW1vdmUlMjB0aGlzJTIwb3B0aW9uJTBBJTBBJTIwJTIwJTIwJTIwJTJGJTJGJTIwT3ZlcnJpZGUlMjB0aGUlMjBkZWZhdWx0JTIwd2VicGFjayUyMGNvbmZpZ3VyYXRpb24lMEElMjAlMjAlMjAlMjB3ZWJwYWNrJTNBJTIwKGNvbmZpZyklMjAlM0QlM0UlMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMkYlMkYlMjBTZWUlMjBodHRwcyUzQSUyRiUyRndlYnBhY2suanMub3JnJTJGY29uZmlndXJhdGlvbiUyRnJlc29sdmUlMkYlMjNyZXNvbHZlYWxpYXMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBjb25maWcucmVzb2x2ZS5hbGlhcyUyMCUzRCUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMC4uLmNvbmZpZy5yZXNvbHZlLmFsaWFzJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIyc2hhcnAlMjQlMjIlM0ElMjBmYWxzZSUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMm9ubnhydW50aW1lLW5vZGUlMjQlMjIlM0ElMjBmYWxzZSUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHJldHVybiUyMGNvbmZpZyUzQiUwQSUyMCUyMCUyMCUyMCU3RCUyQyUwQSU3RCUwQSUwQW1vZHVsZS5leHBvcnRzJTIwJTNEJTIwbmV4dENvbmZpZw==",highlighted:`<span class="hljs-comment">/** <span class="hljs-doctag">@type</span> {<span class="hljs-type">import(&#x27;next&#x27;).NextConfig</span>} */</span>
<span class="hljs-keyword">const</span> nextConfig = {
    <span class="hljs-comment">// (Optional) Export as a static site</span>
    <span class="hljs-comment">// See https://nextjs.org/docs/pages/building-your-application/deploying/static-exports#configuration</span>
    <span class="hljs-attr">output</span>: <span class="hljs-string">&#x27;export&#x27;</span>, <span class="hljs-comment">// Feel free to modify/remove this option</span>

    <span class="hljs-comment">// Override the default webpack configuration</span>
    <span class="hljs-attr">webpack</span>: <span class="hljs-function">(<span class="hljs-params">config</span>) =&gt;</span> {
        <span class="hljs-comment">// See https://webpack.js.org/configuration/resolve/#resolvealias</span>
        config.<span class="hljs-property">resolve</span>.<span class="hljs-property">alias</span> = {
            ...config.<span class="hljs-property">resolve</span>.<span class="hljs-property">alias</span>,
            <span class="hljs-string">&quot;sharp$&quot;</span>: <span class="hljs-literal">false</span>,
            <span class="hljs-string">&quot;onnxruntime-node$&quot;</span>: <span class="hljs-literal">false</span>,
        }
        <span class="hljs-keyword">return</span> config;
    },
}

<span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = nextConfig`}}),Dl=new m({props:{code:"aW1wb3J0JTIwJTdCJTIwcGlwZWxpbmUlMkMlMjBlbnYlMjAlN0QlMjBmcm9tJTIwJTIyJTQweGVub3ZhJTJGdHJhbnNmb3JtZXJzJTIyJTNCJTBBJTBBJTJGJTJGJTIwU2tpcCUyMGxvY2FsJTIwbW9kZWwlMjBjaGVjayUwQWVudi5hbGxvd0xvY2FsTW9kZWxzJTIwJTNEJTIwZmFsc2UlM0IlMEElMEElMkYlMkYlMjBVc2UlMjB0aGUlMjBTaW5nbGV0b24lMjBwYXR0ZXJuJTIwdG8lMjBlbmFibGUlMjBsYXp5JTIwY29uc3RydWN0aW9uJTIwb2YlMjB0aGUlMjBwaXBlbGluZS4lMEFjbGFzcyUyMFBpcGVsaW5lU2luZ2xldG9uJTIwJTdCJTBBJTIwJTIwJTIwJTIwc3RhdGljJTIwdGFzayUyMCUzRCUyMCd0ZXh0LWNsYXNzaWZpY2F0aW9uJyUzQiUwQSUyMCUyMCUyMCUyMHN0YXRpYyUyMG1vZGVsJTIwJTNEJTIwJ1hlbm92YSUyRmRpc3RpbGJlcnQtYmFzZS11bmNhc2VkLWZpbmV0dW5lZC1zc3QtMi1lbmdsaXNoJyUzQiUwQSUyMCUyMCUyMCUyMHN0YXRpYyUyMGluc3RhbmNlJTIwJTNEJTIwbnVsbCUzQiUwQSUwQSUyMCUyMCUyMCUyMHN0YXRpYyUyMGFzeW5jJTIwZ2V0SW5zdGFuY2UocHJvZ3Jlc3NfY2FsbGJhY2slMjAlM0QlMjBudWxsKSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGlmJTIwKHRoaXMuaW5zdGFuY2UlMjAlM0QlM0QlM0QlMjBudWxsKSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHRoaXMuaW5zdGFuY2UlMjAlM0QlMjBwaXBlbGluZSh0aGlzLnRhc2slMkMlMjB0aGlzLm1vZGVsJTJDJTIwJTdCJTIwcHJvZ3Jlc3NfY2FsbGJhY2slMjAlN0QpJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcmV0dXJuJTIwdGhpcy5pbnN0YW5jZSUzQiUwQSUyMCUyMCUyMCUyMCU3RCUwQSU3RCUwQSUwQSUyRiUyRiUyMExpc3RlbiUyMGZvciUyMG1lc3NhZ2VzJTIwZnJvbSUyMHRoZSUyMG1haW4lMjB0aHJlYWQlMEFzZWxmLmFkZEV2ZW50TGlzdGVuZXIoJ21lc3NhZ2UnJTJDJTIwYXN5bmMlMjAoZXZlbnQpJTIwJTNEJTNFJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTJGJTJGJTIwUmV0cmlldmUlMjB0aGUlMjBjbGFzc2lmaWNhdGlvbiUyMHBpcGVsaW5lLiUyMFdoZW4lMjBjYWxsZWQlMjBmb3IlMjB0aGUlMjBmaXJzdCUyMHRpbWUlMkMlMEElMjAlMjAlMjAlMjAlMkYlMkYlMjB0aGlzJTIwd2lsbCUyMGxvYWQlMjB0aGUlMjBwaXBlbGluZSUyMGFuZCUyMHNhdmUlMjBpdCUyMGZvciUyMGZ1dHVyZSUyMHVzZS4lMEElMjAlMjAlMjAlMjBsZXQlMjBjbGFzc2lmaWVyJTIwJTNEJTIwYXdhaXQlMjBQaXBlbGluZVNpbmdsZXRvbi5nZXRJbnN0YW5jZSh4JTIwJTNEJTNFJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwV2UlMjBhbHNvJTIwYWRkJTIwYSUyMHByb2dyZXNzJTIwY2FsbGJhY2slMjB0byUyMHRoZSUyMHBpcGVsaW5lJTIwc28lMjB0aGF0JTIwd2UlMjBjYW4lMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMkYlMkYlMjB0cmFjayUyMG1vZGVsJTIwbG9hZGluZy4lMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBzZWxmLnBvc3RNZXNzYWdlKHgpJTNCJTBBJTIwJTIwJTIwJTIwJTdEKSUzQiUwQSUwQSUyMCUyMCUyMCUyMCUyRiUyRiUyMEFjdHVhbGx5JTIwcGVyZm9ybSUyMHRoZSUyMGNsYXNzaWZpY2F0aW9uJTBBJTIwJTIwJTIwJTIwbGV0JTIwb3V0cHV0JTIwJTNEJTIwYXdhaXQlMjBjbGFzc2lmaWVyKGV2ZW50LmRhdGEudGV4dCklM0IlMEElMEElMjAlMjAlMjAlMjAlMkYlMkYlMjBTZW5kJTIwdGhlJTIwb3V0cHV0JTIwYmFjayUyMHRvJTIwdGhlJTIwbWFpbiUyMHRocmVhZCUwQSUyMCUyMCUyMCUyMHNlbGYucG9zdE1lc3NhZ2UoJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwc3RhdHVzJTNBJTIwJ2NvbXBsZXRlJyUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMG91dHB1dCUzQSUyMG91dHB1dCUyQyUwQSUyMCUyMCUyMCUyMCU3RCklM0IlMEElN0QpJTNCJTBB",highlighted:`<span class="hljs-keyword">import</span> { pipeline, env } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@xenova/transformers&quot;</span>;

<span class="hljs-comment">// Skip local model check</span>
env.<span class="hljs-property">allowLocalModels</span> = <span class="hljs-literal">false</span>;

<span class="hljs-comment">// Use the Singleton pattern to enable lazy construction of the pipeline.</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">PipelineSingleton</span> {
    <span class="hljs-keyword">static</span> task = <span class="hljs-string">&#x27;text-classification&#x27;</span>;
    <span class="hljs-keyword">static</span> model = <span class="hljs-string">&#x27;Xenova/distilbert-base-uncased-finetuned-sst-2-english&#x27;</span>;
    <span class="hljs-keyword">static</span> instance = <span class="hljs-literal">null</span>;

    <span class="hljs-keyword">static</span> <span class="hljs-keyword">async</span> <span class="hljs-title function_">getInstance</span>(<span class="hljs-params">progress_callback = <span class="hljs-literal">null</span></span>) {
        <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">instance</span> === <span class="hljs-literal">null</span>) {
            <span class="hljs-variable language_">this</span>.<span class="hljs-property">instance</span> = <span class="hljs-title function_">pipeline</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">task</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">model</span>, { progress_callback });
        }
        <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">instance</span>;
    }
}

<span class="hljs-comment">// Listen for messages from the main thread</span>
self.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;message&#x27;</span>, <span class="hljs-keyword">async</span> (event) =&gt; {
    <span class="hljs-comment">// Retrieve the classification pipeline. When called for the first time,</span>
    <span class="hljs-comment">// this will load the pipeline and save it for future use.</span>
    <span class="hljs-keyword">let</span> classifier = <span class="hljs-keyword">await</span> <span class="hljs-title class_">PipelineSingleton</span>.<span class="hljs-title function_">getInstance</span>(<span class="hljs-function"><span class="hljs-params">x</span> =&gt;</span> {
        <span class="hljs-comment">// We also add a progress callback to the pipeline so that we can</span>
        <span class="hljs-comment">// track model loading.</span>
        self.<span class="hljs-title function_">postMessage</span>(x);
    });

    <span class="hljs-comment">// Actually perform the classification</span>
    <span class="hljs-keyword">let</span> output = <span class="hljs-keyword">await</span> <span class="hljs-title function_">classifier</span>(event.<span class="hljs-property">data</span>.<span class="hljs-property">text</span>);

    <span class="hljs-comment">// Send the output back to the main thread</span>
    self.<span class="hljs-title function_">postMessage</span>({
        <span class="hljs-attr">status</span>: <span class="hljs-string">&#x27;complete&#x27;</span>,
        <span class="hljs-attr">output</span>: output,
    });
});
`}}),Ol=new E({}),ql=new m({props:{code:"J3VzZSUyMGNsaWVudCclMEElMEFpbXBvcnQlMjAlN0IlMjB1c2VTdGF0ZSUyQyUyMHVzZUVmZmVjdCUyQyUyMHVzZVJlZiUyQyUyMHVzZUNhbGxiYWNrJTIwJTdEJTIwZnJvbSUyMCdyZWFjdCclMEElMEFleHBvcnQlMjBkZWZhdWx0JTIwZnVuY3Rpb24lMjBIb21lKCklMjAlN0IlMEElMjAlMjAlMkYqJTIwVE9ETyUzQSUyMEFkZCUyMHN0YXRlJTIwdmFyaWFibGVzJTIwKiUyRiUwQSUwQSUyMCUyMCUyRiUyRiUyMENyZWF0ZSUyMGElMjByZWZlcmVuY2UlMjB0byUyMHRoZSUyMHdvcmtlciUyMG9iamVjdC4lMEElMjAlMjBjb25zdCUyMHdvcmtlciUyMCUzRCUyMHVzZVJlZihudWxsKSUzQiUwQSUwQSUyMCUyMCUyRiUyRiUyMFdlJTIwdXNlJTIwdGhlJTIwJTYwdXNlRWZmZWN0JTYwJTIwaG9vayUyMHRvJTIwc2V0JTIwdXAlMjB0aGUlMjB3b3JrZXIlMjBhcyUyMHNvb24lMjBhcyUyMHRoZSUyMCU2MEFwcCU2MCUyMGNvbXBvbmVudCUyMGlzJTIwbW91bnRlZC4lMEElMjAlMjB1c2VFZmZlY3QoKCklMjAlM0QlM0UlMjAlN0IlMEElMjAlMjAlMjAlMjBpZiUyMCghd29ya2VyLmN1cnJlbnQpJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwQ3JlYXRlJTIwdGhlJTIwd29ya2VyJTIwaWYlMjBpdCUyMGRvZXMlMjBub3QlMjB5ZXQlMjBleGlzdC4lMEElMjAlMjAlMjAlMjAlMjAlMjB3b3JrZXIuY3VycmVudCUyMCUzRCUyMG5ldyUyMFdvcmtlcihuZXclMjBVUkwoJy4lMkZ3b3JrZXIuanMnJTJDJTIwaW1wb3J0Lm1ldGEudXJsKSUyQyUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHR5cGUlM0ElMjAnbW9kdWxlJyUwQSUyMCUyMCUyMCUyMCUyMCUyMCU3RCklM0IlMEElMjAlMjAlMjAlMjAlN0QlMEElMEElMjAlMjAlMjAlMjAlMkYlMkYlMjBDcmVhdGUlMjBhJTIwY2FsbGJhY2slMjBmdW5jdGlvbiUyMGZvciUyMG1lc3NhZ2VzJTIwZnJvbSUyMHRoZSUyMHdvcmtlciUyMHRocmVhZC4lMEElMjAlMjAlMjAlMjBjb25zdCUyMG9uTWVzc2FnZVJlY2VpdmVkJTIwJTNEJTIwKGUpJTIwJTNEJTNFJTIwJTdCJTIwJTJGKiUyMFRPRE8lM0ElMjBTZWUlMjBiZWxvdyUyMColMkYlN0QlM0IlMEElMEElMjAlMjAlMjAlMjAlMkYlMkYlMjBBdHRhY2glMjB0aGUlMjBjYWxsYmFjayUyMGZ1bmN0aW9uJTIwYXMlMjBhbiUyMGV2ZW50JTIwbGlzdGVuZXIuJTBBJTIwJTIwJTIwJTIwd29ya2VyLmN1cnJlbnQuYWRkRXZlbnRMaXN0ZW5lcignbWVzc2FnZSclMkMlMjBvbk1lc3NhZ2VSZWNlaXZlZCklM0IlMEElMEElMjAlMjAlMjAlMjAlMkYlMkYlMjBEZWZpbmUlMjBhJTIwY2xlYW51cCUyMGZ1bmN0aW9uJTIwZm9yJTIwd2hlbiUyMHRoZSUyMGNvbXBvbmVudCUyMGlzJTIwdW5tb3VudGVkLiUwQSUyMCUyMCUyMCUyMHJldHVybiUyMCgpJTIwJTNEJTNFJTIwd29ya2VyLmN1cnJlbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbWVzc2FnZSclMkMlMjBvbk1lc3NhZ2VSZWNlaXZlZCklM0IlMEElMjAlMjAlN0QpJTNCJTBBJTBBJTIwJTIwY29uc3QlMjBjbGFzc2lmeSUyMCUzRCUyMHVzZUNhbGxiYWNrKCh0ZXh0KSUyMCUzRCUzRSUyMCU3QiUwQSUyMCUyMCUyMCUyMGlmJTIwKHdvcmtlci5jdXJyZW50KSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMHdvcmtlci5jdXJyZW50LnBvc3RNZXNzYWdlKCU3QiUyMHRleHQlMjAlN0QpJTNCJTBBJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTdEJTJDJTIwJTVCJTVEKSUzQiUwQSUwQSUyMCUyMHJldHVybiUyMCglMjAlMkYqJTIwVE9ETyUzQSUyMFNlZSUyMGJlbG93JTIwKiUyRiUyMCklMEElN0Q=",highlighted:`<span class="hljs-string">&#x27;use client&#x27;</span>

<span class="hljs-keyword">import</span> { useState, useEffect, useRef, useCallback } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">Home</span>(<span class="hljs-params"></span>) {
  <span class="hljs-comment">/* <span class="hljs-doctag">TODO:</span> Add state variables */</span>

  <span class="hljs-comment">// Create a reference to the worker object.</span>
  <span class="hljs-keyword">const</span> worker = <span class="hljs-title function_">useRef</span>(<span class="hljs-literal">null</span>);

  <span class="hljs-comment">// We use the \`useEffect\` hook to set up the worker as soon as the \`App\` component is mounted.</span>
  <span class="hljs-title function_">useEffect</span>(<span class="hljs-function">() =&gt;</span> {
    <span class="hljs-keyword">if</span> (!worker.<span class="hljs-property">current</span>) {
      <span class="hljs-comment">// Create the worker if it does not yet exist.</span>
      worker.<span class="hljs-property">current</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Worker</span>(<span class="hljs-keyword">new</span> <span class="hljs-title function_">URL</span>(<span class="hljs-string">&#x27;./worker.js&#x27;</span>, <span class="hljs-keyword">import</span>.<span class="hljs-property">meta</span>.<span class="hljs-property">url</span>), {
        <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;module&#x27;</span>
      });
    }

    <span class="hljs-comment">// Create a callback function for messages from the worker thread.</span>
    <span class="hljs-keyword">const</span> <span class="hljs-title function_">onMessageReceived</span> = (<span class="hljs-params">e</span>) =&gt; { <span class="hljs-comment">/* <span class="hljs-doctag">TODO:</span> See below */</span>};

    <span class="hljs-comment">// Attach the callback function as an event listener.</span>
    worker.<span class="hljs-property">current</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;message&#x27;</span>, onMessageReceived);

    <span class="hljs-comment">// Define a cleanup function for when the component is unmounted.</span>
    <span class="hljs-keyword">return</span> <span class="hljs-function">() =&gt;</span> worker.<span class="hljs-property">current</span>.<span class="hljs-title function_">removeEventListener</span>(<span class="hljs-string">&#x27;message&#x27;</span>, onMessageReceived);
  });

  <span class="hljs-keyword">const</span> classify = <span class="hljs-title function_">useCallback</span>(<span class="hljs-function">(<span class="hljs-params">text</span>) =&gt;</span> {
    <span class="hljs-keyword">if</span> (worker.<span class="hljs-property">current</span>) {
      worker.<span class="hljs-property">current</span>.<span class="hljs-title function_">postMessage</span>({ text });
    }
  }, []);

  <span class="hljs-keyword">return</span> ( <span class="hljs-comment">/* <span class="hljs-doctag">TODO:</span> See below */</span> )
}`}}),Kl=new m({props:{code:"JTJGJTJGJTIwS2VlcCUyMHRyYWNrJTIwb2YlMjB0aGUlMjBjbGFzc2lmaWNhdGlvbiUyMHJlc3VsdCUyMGFuZCUyMHRoZSUyMG1vZGVsJTIwbG9hZGluZyUyMHN0YXR1cy4lMEFjb25zdCUyMCU1QnJlc3VsdCUyQyUyMHNldFJlc3VsdCU1RCUyMCUzRCUyMHVzZVN0YXRlKG51bGwpJTNCJTBBY29uc3QlMjAlNUJyZWFkeSUyQyUyMHNldFJlYWR5JTVEJTIwJTNEJTIwdXNlU3RhdGUobnVsbCklM0I=",highlighted:`<span class="hljs-comment">// Keep track of the classification result and the model loading status.</span>
<span class="hljs-keyword">const</span> [result, setResult] = <span class="hljs-title function_">useState</span>(<span class="hljs-literal">null</span>);
<span class="hljs-keyword">const</span> [ready, setReady] = <span class="hljs-title function_">useState</span>(<span class="hljs-literal">null</span>);`}}),ls=new m({props:{code:"Y29uc3QlMjBvbk1lc3NhZ2VSZWNlaXZlZCUyMCUzRCUyMChlKSUyMCUzRCUzRSUyMCU3QiUwQSUyMCUyMHN3aXRjaCUyMChlLmRhdGEuc3RhdHVzKSUyMCU3QiUwQSUyMCUyMCUyMCUyMGNhc2UlMjAnaW5pdGlhdGUnJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwc2V0UmVhZHkoZmFsc2UpJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwYnJlYWslM0IlMEElMjAlMjAlMjAlMjBjYXNlJTIwJ3JlYWR5JyUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMHNldFJlYWR5KHRydWUpJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwYnJlYWslM0IlMEElMjAlMjAlMjAlMjBjYXNlJTIwJ2NvbXBsZXRlJyUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMHNldFJlc3VsdChlLmRhdGEub3V0cHV0JTVCMCU1RCklMEElMjAlMjAlMjAlMjAlMjAlMjBicmVhayUzQiUwQSUyMCUyMCU3RCUwQSU3RCUzQg==",highlighted:`<span class="hljs-keyword">const</span> <span class="hljs-title function_">onMessageReceived</span> = (<span class="hljs-params">e</span>) =&gt; {
  <span class="hljs-keyword">switch</span> (e.<span class="hljs-property">data</span>.<span class="hljs-property">status</span>) {
    <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;initiate&#x27;</span>:
      <span class="hljs-title function_">setReady</span>(<span class="hljs-literal">false</span>);
      <span class="hljs-keyword">break</span>;
    <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;ready&#x27;</span>:
      <span class="hljs-title function_">setReady</span>(<span class="hljs-literal">true</span>);
      <span class="hljs-keyword">break</span>;
    <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;complete&#x27;</span>:
      <span class="hljs-title function_">setResult</span>(e.<span class="hljs-property">data</span>.<span class="hljs-property">output</span>[<span class="hljs-number">0</span>])
      <span class="hljs-keyword">break</span>;
  }
};`}}),ss=new m({props:{code:"JTNDbWFpbiUyMGNsYXNzTmFtZSUzRCUyMmZsZXglMjBtaW4taC1zY3JlZW4lMjBmbGV4LWNvbCUyMGl0ZW1zLWNlbnRlciUyMGp1c3RpZnktY2VudGVyJTIwcC0xMiUyMiUzRSUwQSUyMCUyMCUzQ2gxJTIwY2xhc3NOYW1lJTNEJTIydGV4dC01eGwlMjBmb250LWJvbGQlMjBtYi0yJTIwdGV4dC1jZW50ZXIlMjIlM0VUcmFuc2Zvcm1lcnMuanMlM0MlMkZoMSUzRSUwQSUyMCUyMCUzQ2gyJTIwY2xhc3NOYW1lJTNEJTIydGV4dC0yeGwlMjBtYi00JTIwdGV4dC1jZW50ZXIlMjIlM0VOZXh0LmpzJTIwdGVtcGxhdGUlM0MlMkZoMiUzRSUwQSUwQSUyMCUyMCUzQ2lucHV0JTBBJTIwJTIwJTIwJTIwY2xhc3NOYW1lJTNEJTIydy1mdWxsJTIwbWF4LXcteHMlMjBwLTIlMjBib3JkZXIlMjBib3JkZXItZ3JheS0zMDAlMjByb3VuZGVkJTIwbWItNCUyMiUwQSUyMCUyMCUyMCUyMHR5cGUlM0QlMjJ0ZXh0JTIyJTBBJTIwJTIwJTIwJTIwcGxhY2Vob2xkZXIlM0QlMjJFbnRlciUyMHRleHQlMjBoZXJlJTIyJTBBJTIwJTIwJTIwJTIwb25JbnB1dCUzRCU3QmUlMjAlM0QlM0UlMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBjbGFzc2lmeShlLnRhcmdldC52YWx1ZSklM0IlMEElMjAlMjAlMjAlMjAlN0QlN0QlMEElMjAlMjAlMkYlM0UlMEElMEElMjAlMjAlN0JyZWFkeSUyMCElM0QlM0QlMjBudWxsJTIwJTI2JTI2JTIwKCUwQSUyMCUyMCUyMCUyMCUzQ3ByZSUyMGNsYXNzTmFtZSUzRCUyMmJnLWdyYXktMTAwJTIwcC0yJTIwcm91bmRlZCUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCU3QiUyMCghcmVhZHklMjAlN0MlN0MlMjAhcmVzdWx0KSUyMCUzRiUyMCdMb2FkaW5nLi4uJyUyMCUzQSUyMEpTT04uc3RyaW5naWZ5KHJlc3VsdCUyQyUyMG51bGwlMkMlMjAyKSUyMCU3RCUwQSUyMCUyMCUyMCUyMCUzQyUyRnByZSUzRSUwQSUyMCUyMCklN0QlMEElM0MlMkZtYWluJTNF",highlighted:`&lt;main className=<span class="hljs-string">&quot;flex min-h-screen flex-col items-center justify-center p-12&quot;</span>&gt;
  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;text-5xl font-bold mb-2 text-center&quot;</span>&gt;</span>Transformers.js<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>
  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;text-2xl mb-4 text-center&quot;</span>&gt;</span>Next.js template<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span>

  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span>
    <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;w-full max-w-xs p-2 border border-gray-300 rounded mb-4&quot;</span>
    <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span>
    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Enter text here&quot;</span>
    <span class="hljs-attr">onInput</span>=<span class="hljs-string">{e</span> =&gt;</span> {
        classify(e.target.value);
    }}
  /&gt;</span>

  {ready !== <span class="hljs-literal">null</span> &amp;&amp; (
    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;bg-gray-100 p-2 rounded&quot;</span>&gt;</span>
      { (!ready || !result) ? &#x27;Loading...&#x27; : JSON.stringify(result, null, 2) }
    <span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span></span>
  )}
&lt;/main&gt;`}}),es=new m({props:{code:"bnBtJTIwcnVuJTIwZGV2",highlighted:"npm run dev"}}),ts=new E({}),ns=new m({props:{code:"bnBtJTIwcnVuJTIwYnVpbGQ=",highlighted:"npm run build"}}),Ms=new E({}),ys=new E({}),js=new m({props:{code:"bnB4JTIwY3JlYXRlLW5leHQtYXBwJTQwbGF0ZXN0",highlighted:"npx create-next-app@latest"}}),ds=new E({}),us=new m({props:{code:"bnBtJTIwaSUyMCU0MHhlbm92YSUyRnRyYW5zZm9ybWVycw==",highlighted:"npm i @xenova/transformers"}}),Us=new m({props:{code:"JTJGKiolMjAlNDB0eXBlJTIwJTdCaW1wb3J0KCduZXh0JykuTmV4dENvbmZpZyU3RCUyMColMkYlMEFjb25zdCUyMG5leHRDb25maWclMjAlM0QlMjAlN0IlMEElMjAlMjAlMjAlMjAlMkYlMkYlMjAoT3B0aW9uYWwpJTIwRXhwb3J0JTIwYXMlMjBhJTIwc3RhbmRhbG9uZSUyMHNpdGUlMEElMjAlMjAlMjAlMjAlMkYlMkYlMjBTZWUlMjBodHRwcyUzQSUyRiUyRm5leHRqcy5vcmclMkZkb2NzJTJGcGFnZXMlMkZhcGktcmVmZXJlbmNlJTJGbmV4dC1jb25maWctanMlMkZvdXRwdXQlMjNhdXRvbWF0aWNhbGx5LWNvcHlpbmctdHJhY2VkLWZpbGVzJTBBJTIwJTIwJTIwJTIwb3V0cHV0JTNBJTIwJ3N0YW5kYWxvbmUnJTJDJTIwJTJGJTJGJTIwRmVlbCUyMGZyZWUlMjB0byUyMG1vZGlmeSUyRnJlbW92ZSUyMHRoaXMlMjBvcHRpb24lMEElMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMkYlMkYlMjBJbmRpY2F0ZSUyMHRoYXQlMjB0aGVzZSUyMHBhY2thZ2VzJTIwc2hvdWxkJTIwbm90JTIwYmUlMjBidW5kbGVkJTIwYnklMjB3ZWJwYWNrJTBBJTIwJTIwJTIwJTIwZXhwZXJpbWVudGFsJTNBJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwc2VydmVyQ29tcG9uZW50c0V4dGVybmFsUGFja2FnZXMlM0ElMjAlNUInc2hhcnAnJTJDJTIwJ29ubnhydW50aW1lLW5vZGUnJTVEJTJDJTBBJTIwJTIwJTIwJTIwJTdEJTJDJTBBJTdEJTNCJTBBJTBBbW9kdWxlLmV4cG9ydHMlMjAlM0QlMjBuZXh0Q29uZmln",highlighted:`<span class="hljs-comment">/** <span class="hljs-doctag">@type</span> {<span class="hljs-type">import(&#x27;next&#x27;).NextConfig</span>} */</span>
<span class="hljs-keyword">const</span> nextConfig = {
    <span class="hljs-comment">// (Optional) Export as a standalone site</span>
    <span class="hljs-comment">// See https://nextjs.org/docs/pages/api-reference/next-config-js/output#automatically-copying-traced-files</span>
    <span class="hljs-attr">output</span>: <span class="hljs-string">&#x27;standalone&#x27;</span>, <span class="hljs-comment">// Feel free to modify/remove this option</span>
    
    <span class="hljs-comment">// Indicate that these packages should not be bundled by webpack</span>
    <span class="hljs-attr">experimental</span>: {
        <span class="hljs-attr">serverComponentsExternalPackages</span>: [<span class="hljs-string">&#x27;sharp&#x27;</span>, <span class="hljs-string">&#x27;onnxruntime-node&#x27;</span>],
    },
};

<span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = nextConfig`}}),Js=new m({props:{code:"aW1wb3J0JTIwJTdCJTIwcGlwZWxpbmUlMjAlN0QlMjBmcm9tJTIwJTIyJTQweGVub3ZhJTJGdHJhbnNmb3JtZXJzJTIyJTNCJTBBJTBBJTJGJTJGJTIwVXNlJTIwdGhlJTIwU2luZ2xldG9uJTIwcGF0dGVybiUyMHRvJTIwZW5hYmxlJTIwbGF6eSUyMGNvbnN0cnVjdGlvbiUyMG9mJTIwdGhlJTIwcGlwZWxpbmUuJTBBJTJGJTJGJTIwTk9URSUzQSUyMFdlJTIwd3JhcCUyMHRoZSUyMGNsYXNzJTIwaW4lMjBhJTIwZnVuY3Rpb24lMjB0byUyMHByZXZlbnQlMjBjb2RlJTIwZHVwbGljYXRpb24lMjAoc2VlJTIwYmVsb3cpLiUwQWNvbnN0JTIwUCUyMCUzRCUyMCgpJTIwJTNEJTNFJTIwY2xhc3MlMjBQaXBlbGluZVNpbmdsZXRvbiUyMCU3QiUwQSUyMCUyMCUyMCUyMHN0YXRpYyUyMHRhc2slMjAlM0QlMjAndGV4dC1jbGFzc2lmaWNhdGlvbiclM0IlMEElMjAlMjAlMjAlMjBzdGF0aWMlMjBtb2RlbCUyMCUzRCUyMCdYZW5vdmElMkZkaXN0aWxiZXJ0LWJhc2UtdW5jYXNlZC1maW5ldHVuZWQtc3N0LTItZW5nbGlzaCclM0IlMEElMjAlMjAlMjAlMjBzdGF0aWMlMjBpbnN0YW5jZSUyMCUzRCUyMG51bGwlM0IlMEElMEElMjAlMjAlMjAlMjBzdGF0aWMlMjBhc3luYyUyMGdldEluc3RhbmNlKHByb2dyZXNzX2NhbGxiYWNrJTIwJTNEJTIwbnVsbCklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBpZiUyMCh0aGlzLmluc3RhbmNlJTIwJTNEJTNEJTNEJTIwbnVsbCklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjB0aGlzLmluc3RhbmNlJTIwJTNEJTIwcGlwZWxpbmUodGhpcy50YXNrJTJDJTIwdGhpcy5tb2RlbCUyQyUyMCU3QiUyMHByb2dyZXNzX2NhbGxiYWNrJTIwJTdEKSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHJldHVybiUyMHRoaXMuaW5zdGFuY2UlM0IlMEElMjAlMjAlMjAlMjAlN0QlMEElN0QlMEElMEFsZXQlMjBQaXBlbGluZVNpbmdsZXRvbiUzQiUwQWlmJTIwKHByb2Nlc3MuZW52Lk5PREVfRU5WJTIwISUzRCUzRCUyMCdwcm9kdWN0aW9uJyklMjAlN0IlMEElMjAlMjAlMjAlMjAlMkYlMkYlMjBXaGVuJTIwcnVubmluZyUyMGluJTIwZGV2ZWxvcG1lbnQlMjBtb2RlJTJDJTIwYXR0YWNoJTIwdGhlJTIwcGlwZWxpbmUlMjB0byUyMHRoZSUwQSUyMCUyMCUyMCUyMCUyRiUyRiUyMGdsb2JhbCUyMG9iamVjdCUyMHNvJTIwdGhhdCUyMGl0J3MlMjBwcmVzZXJ2ZWQlMjBiZXR3ZWVuJTIwaG90JTIwcmVsb2Fkcy4lMEElMjAlMjAlMjAlMjAlMkYlMkYlMjBGb3IlMjBtb3JlJTIwaW5mb3JtYXRpb24lMkMlMjBzZWUlMjBodHRwcyUzQSUyRiUyRnZlcmNlbC5jb20lMkZndWlkZXMlMkZuZXh0anMtcHJpc21hLXBvc3RncmVzJTBBJTIwJTIwJTIwJTIwaWYlMjAoIWdsb2JhbC5QaXBlbGluZVNpbmdsZXRvbiklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBnbG9iYWwuUGlwZWxpbmVTaW5nbGV0b24lMjAlM0QlMjBQKCklM0IlMEElMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlMjAlMjBQaXBlbGluZVNpbmdsZXRvbiUyMCUzRCUyMGdsb2JhbC5QaXBlbGluZVNpbmdsZXRvbiUzQiUwQSU3RCUyMGVsc2UlMjAlN0IlMEElMjAlMjAlMjAlMjBQaXBlbGluZVNpbmdsZXRvbiUyMCUzRCUyMFAoKSUzQiUwQSU3RCUwQWV4cG9ydCUyMGRlZmF1bHQlMjBQaXBlbGluZVNpbmdsZXRvbiUzQg==",highlighted:`<span class="hljs-keyword">import</span> { pipeline } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@xenova/transformers&quot;</span>;

<span class="hljs-comment">// Use the Singleton pattern to enable lazy construction of the pipeline.</span>
<span class="hljs-comment">// <span class="hljs-doctag">NOTE:</span> We wrap the class in a function to prevent code duplication (see below).</span>
<span class="hljs-keyword">const</span> <span class="hljs-title function_">P</span> = (<span class="hljs-params"></span>) =&gt; <span class="hljs-keyword">class</span> <span class="hljs-title class_">PipelineSingleton</span> {
    <span class="hljs-keyword">static</span> task = <span class="hljs-string">&#x27;text-classification&#x27;</span>;
    <span class="hljs-keyword">static</span> model = <span class="hljs-string">&#x27;Xenova/distilbert-base-uncased-finetuned-sst-2-english&#x27;</span>;
    <span class="hljs-keyword">static</span> instance = <span class="hljs-literal">null</span>;

    <span class="hljs-keyword">static</span> <span class="hljs-keyword">async</span> <span class="hljs-title function_">getInstance</span>(<span class="hljs-params">progress_callback = <span class="hljs-literal">null</span></span>) {
        <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">instance</span> === <span class="hljs-literal">null</span>) {
            <span class="hljs-variable language_">this</span>.<span class="hljs-property">instance</span> = <span class="hljs-title function_">pipeline</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">task</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">model</span>, { progress_callback });
        }
        <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">instance</span>;
    }
}

<span class="hljs-keyword">let</span> <span class="hljs-title class_">PipelineSingleton</span>;
<span class="hljs-keyword">if</span> (process.<span class="hljs-property">env</span>.<span class="hljs-property">NODE_ENV</span> !== <span class="hljs-string">&#x27;production&#x27;</span>) {
    <span class="hljs-comment">// When running in development mode, attach the pipeline to the</span>
    <span class="hljs-comment">// global object so that it&#x27;s preserved between hot reloads.</span>
    <span class="hljs-comment">// For more information, see https://vercel.com/guides/nextjs-prisma-postgres</span>
    <span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">global</span>.<span class="hljs-property">PipelineSingleton</span>) {
        <span class="hljs-variable language_">global</span>.<span class="hljs-property">PipelineSingleton</span> = <span class="hljs-title function_">P</span>();
    }
    <span class="hljs-title class_">PipelineSingleton</span> = <span class="hljs-variable language_">global</span>.<span class="hljs-property">PipelineSingleton</span>;
} <span class="hljs-keyword">else</span> {
    <span class="hljs-title class_">PipelineSingleton</span> = <span class="hljs-title function_">P</span>();
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">PipelineSingleton</span>;`}}),Ts=new m({props:{code:"aW1wb3J0JTIwJTdCJTIwTmV4dFJlc3BvbnNlJTIwJTdEJTIwZnJvbSUyMCduZXh0JTJGc2VydmVyJyUwQWltcG9ydCUyMFBpcGVsaW5lU2luZ2xldG9uJTIwZnJvbSUyMCcuJTJGcGlwZWxpbmUuanMnJTNCJTBBJTBBZXhwb3J0JTIwYXN5bmMlMjBmdW5jdGlvbiUyMEdFVChyZXF1ZXN0KSUyMCU3QiUwQSUyMCUyMCUyMCUyMGNvbnN0JTIwdGV4dCUyMCUzRCUyMHJlcXVlc3QubmV4dFVybC5zZWFyY2hQYXJhbXMuZ2V0KCd0ZXh0JyklM0IlMEElMjAlMjAlMjAlMjBpZiUyMCghdGV4dCklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjByZXR1cm4lMjBOZXh0UmVzcG9uc2UuanNvbiglN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBlcnJvciUzQSUyMCdNaXNzaW5nJTIwdGV4dCUyMHBhcmFtZXRlciclMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0QlMkMlMjAlN0IlMjBzdGF0dXMlM0ElMjA0MDAlMjAlN0QpJTNCJTBBJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTJGJTJGJTIwR2V0JTIwdGhlJTIwY2xhc3NpZmljYXRpb24lMjBwaXBlbGluZS4lMjBXaGVuJTIwY2FsbGVkJTIwZm9yJTIwdGhlJTIwZmlyc3QlMjB0aW1lJTJDJTBBJTIwJTIwJTIwJTIwJTJGJTJGJTIwdGhpcyUyMHdpbGwlMjBsb2FkJTIwdGhlJTIwcGlwZWxpbmUlMjBhbmQlMjBjYWNoZSUyMGl0JTIwZm9yJTIwZnV0dXJlJTIwdXNlLiUwQSUyMCUyMCUyMCUyMGNvbnN0JTIwY2xhc3NpZmllciUyMCUzRCUyMGF3YWl0JTIwUGlwZWxpbmVTaW5nbGV0b24uZ2V0SW5zdGFuY2UoKSUzQiUwQSUwQSUyMCUyMCUyMCUyMCUyRiUyRiUyMEFjdHVhbGx5JTIwcGVyZm9ybSUyMHRoZSUyMGNsYXNzaWZpY2F0aW9uJTBBJTIwJTIwJTIwJTIwY29uc3QlMjByZXN1bHQlMjAlM0QlMjBhd2FpdCUyMGNsYXNzaWZpZXIodGV4dCklM0IlMEElMEElMjAlMjAlMjAlMjByZXR1cm4lMjBOZXh0UmVzcG9uc2UuanNvbihyZXN1bHQpJTNCJTBBJTdE",highlighted:`<span class="hljs-keyword">import</span> { <span class="hljs-title class_">NextResponse</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;next/server&#x27;</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">PipelineSingleton</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./pipeline.js&#x27;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">GET</span>(<span class="hljs-params">request</span>) {
    <span class="hljs-keyword">const</span> text = request.<span class="hljs-property">nextUrl</span>.<span class="hljs-property">searchParams</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">&#x27;text&#x27;</span>);
    <span class="hljs-keyword">if</span> (!text) {
        <span class="hljs-keyword">return</span> <span class="hljs-title class_">NextResponse</span>.<span class="hljs-title function_">json</span>({
            <span class="hljs-attr">error</span>: <span class="hljs-string">&#x27;Missing text parameter&#x27;</span>,
        }, { <span class="hljs-attr">status</span>: <span class="hljs-number">400</span> });
    }
    <span class="hljs-comment">// Get the classification pipeline. When called for the first time,</span>
    <span class="hljs-comment">// this will load the pipeline and cache it for future use.</span>
    <span class="hljs-keyword">const</span> classifier = <span class="hljs-keyword">await</span> <span class="hljs-title class_">PipelineSingleton</span>.<span class="hljs-title function_">getInstance</span>();

    <span class="hljs-comment">// Actually perform the classification</span>
    <span class="hljs-keyword">const</span> result = <span class="hljs-keyword">await</span> <span class="hljs-title function_">classifier</span>(text);

    <span class="hljs-keyword">return</span> <span class="hljs-title class_">NextResponse</span>.<span class="hljs-title function_">json</span>(result);
}`}}),bs=new E({}),Cs=new m({props:{code:"J3VzZSUyMGNsaWVudCclMEElMEFpbXBvcnQlMjAlN0IlMjB1c2VTdGF0ZSUyMCU3RCUyMGZyb20lMjAncmVhY3QnJTBBJTBBZXhwb3J0JTIwZGVmYXVsdCUyMGZ1bmN0aW9uJTIwSG9tZSgpJTIwJTdCJTBBJTBBJTIwJTIwJTJGJTJGJTIwS2VlcCUyMHRyYWNrJTIwb2YlMjB0aGUlMjBjbGFzc2lmaWNhdGlvbiUyMHJlc3VsdCUyMGFuZCUyMHRoZSUyMG1vZGVsJTIwbG9hZGluZyUyMHN0YXR1cy4lMEElMjAlMjBjb25zdCUyMCU1QnJlc3VsdCUyQyUyMHNldFJlc3VsdCU1RCUyMCUzRCUyMHVzZVN0YXRlKG51bGwpJTNCJTBBJTIwJTIwY29uc3QlMjAlNUJyZWFkeSUyQyUyMHNldFJlYWR5JTVEJTIwJTNEJTIwdXNlU3RhdGUobnVsbCklM0IlMEElMEElMjAlMjBjb25zdCUyMGNsYXNzaWZ5JTIwJTNEJTIwYXN5bmMlMjAodGV4dCklMjAlM0QlM0UlMjAlN0IlMEElMjAlMjAlMjAlMjBpZiUyMCghdGV4dCklMjByZXR1cm4lM0IlMEElMjAlMjAlMjAlMjBpZiUyMChyZWFkeSUyMCUzRCUzRCUzRCUyMG51bGwpJTIwc2V0UmVhZHkoZmFsc2UpJTNCJTBBJTBBJTIwJTIwJTIwJTIwJTJGJTJGJTIwTWFrZSUyMGElMjByZXF1ZXN0JTIwdG8lMjB0aGUlMjAlMkZjbGFzc2lmeSUyMHJvdXRlJTIwb24lMjB0aGUlMjBzZXJ2ZXIuJTBBJTIwJTIwJTIwJTIwY29uc3QlMjByZXN1bHQlMjAlM0QlMjBhd2FpdCUyMGZldGNoKCU2MCUyRmNsYXNzaWZ5JTNGdGV4dCUzRCUyNCU3QmVuY29kZVVSSUNvbXBvbmVudCh0ZXh0KSU3RCU2MCklM0IlMEElMEElMjAlMjAlMjAlMjAlMkYlMkYlMjBJZiUyMHRoaXMlMjBpcyUyMHRoZSUyMGZpcnN0JTIwdGltZSUyMHdlJ3ZlJTIwbWFkZSUyMGElMjByZXF1ZXN0JTJDJTIwc2V0JTIwdGhlJTIwcmVhZHklMjBmbGFnLiUwQSUyMCUyMCUyMCUyMGlmJTIwKCFyZWFkeSklMjBzZXRSZWFkeSh0cnVlKSUzQiUwQSUwQSUyMCUyMCUyMCUyMGNvbnN0JTIwanNvbiUyMCUzRCUyMGF3YWl0JTIwcmVzdWx0Lmpzb24oKSUzQiUwQSUyMCUyMCUyMCUyMHNldFJlc3VsdChqc29uKSUzQiUwQSUyMCUyMCU3RCUzQiUwQSUyMCUyMHJldHVybiUyMCglMEElMjAlMjAlMjAlMjAlM0NtYWluJTIwY2xhc3NOYW1lJTNEJTIyZmxleCUyMG1pbi1oLXNjcmVlbiUyMGZsZXgtY29sJTIwaXRlbXMtY2VudGVyJTIwanVzdGlmeS1jZW50ZXIlMjBwLTEyJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDaDElMjBjbGFzc05hbWUlM0QlMjJ0ZXh0LTV4bCUyMGZvbnQtYm9sZCUyMG1iLTIlMjB0ZXh0LWNlbnRlciUyMiUzRVRyYW5zZm9ybWVycy5qcyUzQyUyRmgxJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDaDIlMjBjbGFzc05hbWUlM0QlMjJ0ZXh0LTJ4bCUyMG1iLTQlMjB0ZXh0LWNlbnRlciUyMiUzRU5leHQuanMlMjB0ZW1wbGF0ZSUyMChzZXJ2ZXItc2lkZSklM0MlMkZoMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2lucHV0JTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwdHlwZSUzRCUyMnRleHQlMjIlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBjbGFzc05hbWUlM0QlMjJ3LWZ1bGwlMjBtYXgtdy14cyUyMHAtMiUyMGJvcmRlciUyMGJvcmRlci1ncmF5LTMwMCUyMHJvdW5kZWQlMjBtYi00JTIyJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcGxhY2Vob2xkZXIlM0QlMjJFbnRlciUyMHRleHQlMjBoZXJlJTIyJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwb25JbnB1dCUzRCU3QmUlMjAlM0QlM0UlMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBjbGFzc2lmeShlLnRhcmdldC52YWx1ZSklM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0QlN0QlMEElMjAlMjAlMjAlMjAlMjAlMjAlMkYlM0UlMEElMEElMjAlMjAlMjAlMjAlMjAlMjAlN0JyZWFkeSUyMCElM0QlM0QlMjBudWxsJTIwJTI2JTI2JTIwKCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ3ByZSUyMGNsYXNzTmFtZSUzRCUyMmJnLWdyYXktMTAwJTIwcC0yJTIwcm91bmRlZCUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCghcmVhZHklMjAlN0MlN0MlMjAhcmVzdWx0KSUyMCUzRiUyMCdMb2FkaW5nLi4uJyUyMCUzQSUyMEpTT04uc3RyaW5naWZ5KHJlc3VsdCUyQyUyMG51bGwlMkMlMjAyKSU3RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRnByZSUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCklN0QlMEElMjAlMjAlMjAlMjAlM0MlMkZtYWluJTNFJTBBJTIwJTIwKSUwQSU3RA==",highlighted:`<span class="hljs-string">&#x27;use client&#x27;</span>

<span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">Home</span>(<span class="hljs-params"></span>) {

  <span class="hljs-comment">// Keep track of the classification result and the model loading status.</span>
  <span class="hljs-keyword">const</span> [result, setResult] = <span class="hljs-title function_">useState</span>(<span class="hljs-literal">null</span>);
  <span class="hljs-keyword">const</span> [ready, setReady] = <span class="hljs-title function_">useState</span>(<span class="hljs-literal">null</span>);

  <span class="hljs-keyword">const</span> <span class="hljs-title function_">classify</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">text</span>) =&gt; {
    <span class="hljs-keyword">if</span> (!text) <span class="hljs-keyword">return</span>;
    <span class="hljs-keyword">if</span> (ready === <span class="hljs-literal">null</span>) <span class="hljs-title function_">setReady</span>(<span class="hljs-literal">false</span>);

    <span class="hljs-comment">// Make a request to the /classify route on the server.</span>
    <span class="hljs-keyword">const</span> result = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(<span class="hljs-string">\`/classify?text=<span class="hljs-subst">\${<span class="hljs-built_in">encodeURIComponent</span>(text)}</span>\`</span>);

    <span class="hljs-comment">// If this is the first time we&#x27;ve made a request, set the ready flag.</span>
    <span class="hljs-keyword">if</span> (!ready) <span class="hljs-title function_">setReady</span>(<span class="hljs-literal">true</span>);

    <span class="hljs-keyword">const</span> json = <span class="hljs-keyword">await</span> result.<span class="hljs-title function_">json</span>();
    <span class="hljs-title function_">setResult</span>(json);
  };
  <span class="hljs-keyword">return</span> (
    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">main</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;flex min-h-screen flex-col items-center justify-center p-12&quot;</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;text-5xl font-bold mb-2 text-center&quot;</span>&gt;</span>Transformers.js<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;text-2xl mb-4 text-center&quot;</span>&gt;</span>Next.js template (server-side)<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">input</span>
        <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span>
        <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;w-full max-w-xs p-2 border border-gray-300 rounded mb-4&quot;</span>
        <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Enter text here&quot;</span>
        <span class="hljs-attr">onInput</span>=<span class="hljs-string">{e</span> =&gt;</span> {
          classify(e.target.value);
        }}
      /&gt;

      {ready !== null &amp;&amp; (
        <span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;bg-gray-100 p-2 rounded&quot;</span>&gt;</span>
          {
            (!ready || !result) ? &#x27;Loading...&#x27; : JSON.stringify(result, null, 2)}
        <span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span>
      )}
    <span class="hljs-tag">&lt;/<span class="hljs-name">main</span>&gt;</span></span>
  )
}`}}),Is=new m({props:{code:"bnBtJTIwcnVuJTIwZGV2",highlighted:"npm run dev"}}),Es=new E({}),Ns=new m({props:{code:"LS0tJTBBdGl0bGUlM0ElMjBOZXh0JTIwU2VydmVyJTIwRXhhbXBsZSUyMEFwcCUwQWVtb2ppJTNBJTIwJUYwJTlGJTk0JUE1JTBBY29sb3JGcm9tJTNBJTIweWVsbG93JTBBY29sb3JUbyUzQSUyMHJlZCUwQXNkayUzQSUyMGRvY2tlciUwQXBpbm5lZCUzQSUyMGZhbHNlJTBBYXBwX3BvcnQlM0ElMjAzMDAwJTBBLS0t",highlighted:`<span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Next</span> <span class="hljs-string">Server</span> <span class="hljs-string">Example</span> <span class="hljs-string">App</span>
<span class="hljs-attr">emoji:</span> <span class="hljs-string">\u{1F525}</span>
<span class="hljs-attr">colorFrom:</span> <span class="hljs-string">yellow</span>
<span class="hljs-attr">colorTo:</span> <span class="hljs-string">red</span>
<span class="hljs-attr">sdk:</span> <span class="hljs-string">docker</span>
<span class="hljs-attr">pinned:</span> <span class="hljs-literal">false</span>
<span class="hljs-attr">app_port:</span> <span class="hljs-number">3000</span>
<span class="hljs-meta">---</span>`}}),{c(){G=n("meta"),da=M(),S=n("h1"),O=n("a"),Ks=n("span"),y(Bl.$$.fragment),nn=M(),le=n("span"),on=a("Building a Next.js application"),wa=M(),v=n("p"),pn=a(`In this tutorial, we\u2019ll build a simple Next.js application that performs sentiment analysis using Transformers.js!
Since Transformers.js can run in the browser or in Node.js, you can choose whether you want to perform inference `),Gs=n("a"),rn=a("client-side"),cn=a(" or "),Ss=n("a"),Mn=a("server-side"),hn=a(" (we\u2019ll show you how to do both). In either case, we will be developing with the new "),Nl=n("a"),yn=a("App Router"),jn=a(` paradigm.
The final product will look something like this:`),ua=M(),Ws=n("p"),Rs=n("img"),Ua=M(),xs=n("p"),dn=a("Useful links:"),fa=M(),q=n("ul"),K=n("li"),wn=a("Demo site: "),Gl=n("a"),un=a("client-side"),Un=a(" or "),Sl=n("a"),fn=a("server-side"),Jn=M(),ll=n("li"),mn=a("Source code: "),Wl=n("a"),Tn=a("client-side"),bn=a(" or "),Rl=n("a"),Cn=a("server-side"),Ja=M(),W=n("h2"),sl=n("a"),se=n("span"),y(xl.$$.fragment),In=M(),ee=n("span"),vn=a("Prerequisites"),ma=M(),Qs=n("ul"),Ys=n("li"),Ql=n("a"),En=a("Node.js"),gn=a(" version 16.8+"),Ta=M(),R=n("h2"),el=n("a"),ae=n("span"),y(Yl.$$.fragment),kn=M(),te=n("span"),An=a("Client-side inference"),ba=M(),x=n("h3"),al=n("a"),ne=n("span"),y(Vl.$$.fragment),Zn=M(),oe=n("span"),Bn=a("Step 1: Initialise the project"),Ca=M(),tl=n("p"),Nn=a("Start by creating a new Next.js application using "),pe=n("code"),Gn=a("create-next-app"),Sn=a(":"),Ia=M(),y(_l.$$.fragment),va=M(),Vs=n("p"),Wn=a("On installation, you\u2019ll see various prompts. For this demo, we\u2019ll be selecting those shown below in bold:"),Ea=M(),f=n("pre"),Rn=a(`\u221A What is your project named? ... next
\u221A Would you like to use TypeScript? ... `),re=n("b"),xn=a("No"),Qn=a(` / Yes
\u221A Would you like to use ESLint? ... No / `),ie=n("b"),Yn=a("Yes"),Vn=a(`
\u221A Would you like to use Tailwind CSS? ... No / `),ce=n("b"),_n=a("Yes"),$n=a("\n\u221A Would you like to use `src/` directory? ... No / "),Me=n("b"),Xn=a("Yes"),zn=a(`
\u221A Would you like to use App Router? (recommended) ... No / `),he=n("b"),Hn=a("Yes"),Fn=a(`
\u221A Would you like to customize the default import alias? ... `),ye=n("b"),Ln=a("No"),Pn=a(` / Yes
`),ga=M(),Q=n("h3"),nl=n("a"),je=n("span"),y($l.$$.fragment),Dn=M(),de=n("span"),On=a("Step 2: Install and configure Transformers.js"),ka=M(),ol=n("p"),qn=a("You can install Transformers.js from "),Xl=n("a"),Kn=a("NPM"),lo=a(" with the following command:"),Aa=M(),y(zl.$$.fragment),Za=M(),pl=n("p"),so=a("We also need to update the "),we=n("code"),eo=a("next.config.js"),ao=a(" file to ignore node-specific modules when bundling for the browser:"),Ba=M(),y(Hl.$$.fragment),Na=M(),T=n("p"),to=a("Next, we\u2019ll create a new "),Fl=n("a"),no=a("Web Worker"),oo=a(" script where we\u2019ll place all ML-related code. This is to ensure that the main thread is not blocked while the model is loading and performing inference. For this application, we\u2019ll be using "),Ll=n("a"),ue=n("code"),po=a("Xenova/distilbert-base-uncased-finetuned-sst-2-english"),ro=a(", a ~67M parameter model finetuned on the "),Pl=n("a"),io=a("Stanford Sentiment Treebank"),co=a(" dataset. Add the following code to "),Ue=n("code"),Mo=a("./src/app/worker.js"),ho=a(":"),Ga=M(),y(Dl.$$.fragment),Sa=M(),Y=n("h3"),rl=n("a"),fe=n("span"),y(Ol.$$.fragment),yo=M(),Je=n("span"),jo=a("Step 3: Design the user interface"),Wa=M(),g=n("p"),wo=a("We\u2019ll now modify the default "),me=n("code"),uo=a("./src/app/page.js"),Uo=a(" file so that it connects to our worker thread. Since we\u2019ll only be performing in-browser inference, we can opt-in to Client components using the "),il=n("a"),Te=n("code"),fo=a("'use client'"),Jo=a(" directive"),mo=a("."),Ra=M(),y(ql.$$.fragment),xa=M(),cl=n("p"),To=a("Initialise the following state variables at the beginning of the "),be=n("code"),bo=a("Home"),Co=a(" component:"),Qa=M(),y(Kl.$$.fragment),Ya=M(),Ml=n("p"),Io=a("and fill in the "),Ce=n("code"),vo=a("onMessageReceived"),Eo=a(" function to update these variables when the worker thread sends a message:"),Va=M(),y(ls.$$.fragment),_a=M(),hl=n("p"),go=a("Finally, we can add a simple UI to the "),Ie=n("code"),ko=a("Home"),Ao=a(" component, consisting of an input textbox and a preformatted text element to display the classification result:"),$a=M(),y(ss.$$.fragment),Xa=M(),_s=n("p"),Zo=a("You can now run your application using the following command:"),za=M(),y(es.$$.fragment),Ha=M(),yl=n("p"),Bo=a("Visit the URL shown in the terminal (e.g., "),as=n("a"),No=a("http://localhost:3000/"),Go=a(") to see your application in action!"),Fa=M(),V=n("h3"),jl=n("a"),ve=n("span"),y(ts.$$.fragment),So=M(),Ee=n("span"),Wo=a("(Optional) Step 4: Build and deploy"),La=M(),$s=n("p"),Ro=a("To build your application, simply run:"),Pa=M(),y(ns.$$.fragment),Da=M(),dl=n("p"),xo=a("This will bundle your application and output the static files to the "),ge=n("code"),Qo=a("out"),Yo=a(" folder."),Oa=M(),k=n("p"),Vo=a("For this demo, we will deploy our application as a static "),os=n("a"),_o=a("Hugging Face Space"),$o=a(", but you can deploy it anywhere you like! If you haven\u2019t already, you can create a free Hugging Face account "),ps=n("a"),Xo=a("here"),zo=a("."),qa=M(),A=n("ol"),rs=n("li"),Ho=a("Visit "),is=n("a"),Fo=a("https://huggingface.co/new-space"),Lo=a(" and fill in the form. Remember to select \u201CStatic\u201D as the space type."),Po=M(),ke=n("li"),Do=a("Click the \u201CCreate space\u201D button at the bottom of the page."),Oo=M(),cs=n("li"),qo=a("Go to \u201CFiles\u201D \u2192 \u201CAdd file\u201D \u2192 \u201CUpload files\u201D. Drag the files from the "),Ae=n("code"),Ko=a("out"),lp=a(" folder into the upload box and click \u201CUpload\u201D. After they have uploaded, scroll down to the button and click \u201CCommit changes to main\u201D."),Ka=M(),_=n("p"),Ze=n("strong"),sp=a("That\u2019s it!"),ep=a(" Your application should now be live at "),Be=n("code"),ap=a("https://huggingface.co/spaces/<your-username>/<your-space-name>"),tp=a("!"),lt=M(),$=n("h2"),wl=n("a"),Ne=n("span"),y(Ms.$$.fragment),np=M(),Ge=n("span"),op=a("Server-side inference"),st=M(),ul=n("p"),pp=a("While there are many different ways to perform server-side inference, the simplest (which we will discuss in this tutorial) is using the new "),hs=n("a"),rp=a("Route Handlers"),ip=a(" feature."),et=M(),X=n("h3"),Ul=n("a"),Se=n("span"),y(ys.$$.fragment),cp=M(),We=n("span"),Mp=a("Step 1: Initialise the project"),at=M(),fl=n("p"),hp=a("Start by creating a new Next.js application using "),Re=n("code"),yp=a("create-next-app"),jp=a(":"),tt=M(),y(js.$$.fragment),nt=M(),Xs=n("p"),dp=a("On installation, you\u2019ll see various prompts. For this demo, we\u2019ll be selecting those shown below in bold:"),ot=M(),J=n("pre"),wp=a(`\u221A What is your project named? ... next
\u221A Would you like to use TypeScript? ... `),xe=n("b"),up=a("No"),Up=a(` / Yes
\u221A Would you like to use ESLint? ... No / `),Qe=n("b"),fp=a("Yes"),Jp=a(`
\u221A Would you like to use Tailwind CSS? ... No / `),Ye=n("b"),mp=a("Yes"),Tp=a("\n\u221A Would you like to use `src/` directory? ... No / "),Ve=n("b"),bp=a("Yes"),Cp=a(`
\u221A Would you like to use App Router? (recommended) ... No / `),_e=n("b"),Ip=a("Yes"),vp=a(`
\u221A Would you like to customize the default import alias? ... `),$e=n("b"),Ep=a("No"),gp=a(` / Yes
`),pt=M(),z=n("h3"),Jl=n("a"),Xe=n("span"),y(ds.$$.fragment),kp=M(),ze=n("span"),Ap=a("Step 2: Install and configure Transformers.js"),rt=M(),ml=n("p"),Zp=a("You can install Transformers.js from "),ws=n("a"),Bp=a("NPM"),Np=a(" with the following command:"),it=M(),y(us.$$.fragment),ct=M(),Tl=n("p"),Gp=a("We also need to update the "),He=n("code"),Sp=a("next.config.js"),Wp=a(" file to prevent Webpack from bundling certain packages:"),Mt=M(),y(Us.$$.fragment),ht=M(),bl=n("p"),Rp=a("Next, let\u2019s set up our Route Handler. We can do this by creating two files in a new "),Fe=n("code"),xp=a("./src/app/classify/"),Qp=a(" directory:"),yt=M(),Cl=n("ol"),fs=n("li"),zs=n("p"),Le=n("code"),Yp=a("pipeline.js"),Vp=a(" - to handle the construction of our pipeline."),_p=M(),y(Js.$$.fragment),$p=M(),ms=n("li"),Il=n("p"),Pe=n("code"),Xp=a("route.js"),zp=a(" - to process requests made to the "),De=n("code"),Hp=a("/classify"),Fp=a(" route."),Lp=M(),y(Ts.$$.fragment),jt=M(),H=n("h3"),vl=n("a"),Oe=n("span"),y(bs.$$.fragment),Pp=M(),qe=n("span"),Dp=a("Step 3: Design the user interface"),dt=M(),El=n("p"),Op=a("We\u2019ll now modify the default "),Ke=n("code"),qp=a("./src/app/page.js"),Kp=a(" file to make requests to our newly-created Route Handler."),wt=M(),y(Cs.$$.fragment),ut=M(),Hs=n("p"),lr=a("You can now run your application using the following command:"),Ut=M(),y(Is.$$.fragment),ft=M(),gl=n("p"),sr=a("Visit the URL shown in the terminal (e.g., "),vs=n("a"),er=a("http://localhost:3000/"),ar=a(") to see your application in action!"),Jt=M(),F=n("h3"),kl=n("a"),la=n("span"),y(Es.$$.fragment),tr=M(),sa=n("span"),nr=a("(Optional) Step 4: Build and deploy"),mt=M(),Z=n("p"),or=a("For this demo, we will build and deploy our application to "),gs=n("a"),pr=a("Hugging Face Spaces"),rr=a(". If you haven\u2019t already, you can create a free Hugging Face account "),ks=n("a"),ir=a("here"),cr=a("."),Tt=M(),b=n("ol"),L=n("li"),Mr=a("Create a new "),ea=n("code"),hr=a("Dockerfile"),yr=a(" in your project\u2019s root folder. You can use our "),As=n("a"),jr=a("example Dockerfile"),dr=a(" as a template."),wr=M(),Zs=n("li"),ur=a("Visit "),Bs=n("a"),Ur=a("https://huggingface.co/new-space"),fr=a(" and fill in the form. Remember to select \u201CDocker\u201D as the space type (you can choose the \u201CBlank\u201D Docker template)."),Jr=M(),aa=n("li"),mr=a("Click the \u201CCreate space\u201D button at the bottom of the page."),Tr=M(),P=n("li"),br=a("Go to \u201CFiles\u201D \u2192 \u201CAdd file\u201D \u2192 \u201CUpload files\u201D. Drag the files from your project folder (excluding "),ta=n("code"),Cr=a("node_modules"),Ir=a(" and "),na=n("code"),vr=a(".next"),Er=a(", if present) into the upload box and click \u201CUpload\u201D. After they have uploaded, scroll down to the button and click \u201CCommit changes to main\u201D."),gr=M(),Al=n("li"),kr=a("Add the following lines to the top of your "),oa=n("code"),Ar=a("README.md"),Zr=a(`:
	`),y(Ns.$$.fragment),bt=M(),D=n("p"),pa=n("strong"),Br=a("That\u2019s it!"),Nr=a(" Your application should now be live at "),ra=n("code"),Gr=a("https://huggingface.co/spaces/<your-username>/<your-space-name>"),Sr=a("!"),this.h()},l(l){const r=$c('[data-svelte="svelte-1phssyn"]',document.head);G=o(r,"META",{name:!0,content:!0}),r.forEach(e),da=h(l),S=o(l,"H1",{class:!0});var It=p(S);O=o(It,"A",{id:!0,class:!0,href:!0});var Vr=p(O);Ks=o(Vr,"SPAN",{});var _r=p(Ks);j(Bl.$$.fragment,_r),_r.forEach(e),Vr.forEach(e),nn=h(It),le=o(It,"SPAN",{});var $r=p(le);on=t($r,"Building a Next.js application"),$r.forEach(e),It.forEach(e),wa=h(l),v=o(l,"P",{});var Zl=p(v);pn=t(Zl,`In this tutorial, we\u2019ll build a simple Next.js application that performs sentiment analysis using Transformers.js!
Since Transformers.js can run in the browser or in Node.js, you can choose whether you want to perform inference `),Gs=o(Zl,"A",{href:!0});var Xr=p(Gs);rn=t(Xr,"client-side"),Xr.forEach(e),cn=t(Zl," or "),Ss=o(Zl,"A",{href:!0});var zr=p(Ss);Mn=t(zr,"server-side"),zr.forEach(e),hn=t(Zl," (we\u2019ll show you how to do both). In either case, we will be developing with the new "),Nl=o(Zl,"A",{href:!0,rel:!0});var Hr=p(Nl);yn=t(Hr,"App Router"),Hr.forEach(e),jn=t(Zl,` paradigm.
The final product will look something like this:`),Zl.forEach(e),ua=h(l),Ws=o(l,"P",{});var Fr=p(Ws);Rs=o(Fr,"IMG",{src:!0,alt:!0}),Fr.forEach(e),Ua=h(l),xs=o(l,"P",{});var Lr=p(xs);dn=t(Lr,"Useful links:"),Lr.forEach(e),fa=h(l),q=o(l,"UL",{});var vt=p(q);K=o(vt,"LI",{});var ia=p(K);wn=t(ia,"Demo site: "),Gl=o(ia,"A",{href:!0,rel:!0});var Pr=p(Gl);un=t(Pr,"client-side"),Pr.forEach(e),Un=t(ia," or "),Sl=o(ia,"A",{href:!0,rel:!0});var Dr=p(Sl);fn=t(Dr,"server-side"),Dr.forEach(e),ia.forEach(e),Jn=h(vt),ll=o(vt,"LI",{});var ca=p(ll);mn=t(ca,"Source code: "),Wl=o(ca,"A",{href:!0,rel:!0});var Or=p(Wl);Tn=t(Or,"client-side"),Or.forEach(e),bn=t(ca," or "),Rl=o(ca,"A",{href:!0,rel:!0});var qr=p(Rl);Cn=t(qr,"server-side"),qr.forEach(e),ca.forEach(e),vt.forEach(e),Ja=h(l),W=o(l,"H2",{class:!0});var Et=p(W);sl=o(Et,"A",{id:!0,class:!0,href:!0});var Kr=p(sl);se=o(Kr,"SPAN",{});var li=p(se);j(xl.$$.fragment,li),li.forEach(e),Kr.forEach(e),In=h(Et),ee=o(Et,"SPAN",{});var si=p(ee);vn=t(si,"Prerequisites"),si.forEach(e),Et.forEach(e),ma=h(l),Qs=o(l,"UL",{});var ei=p(Qs);Ys=o(ei,"LI",{});var Wr=p(Ys);Ql=o(Wr,"A",{href:!0,rel:!0});var ai=p(Ql);En=t(ai,"Node.js"),ai.forEach(e),gn=t(Wr," version 16.8+"),Wr.forEach(e),ei.forEach(e),Ta=h(l),R=o(l,"H2",{class:!0});var gt=p(R);el=o(gt,"A",{id:!0,class:!0,href:!0});var ti=p(el);ae=o(ti,"SPAN",{});var ni=p(ae);j(Yl.$$.fragment,ni),ni.forEach(e),ti.forEach(e),kn=h(gt),te=o(gt,"SPAN",{});var oi=p(te);An=t(oi,"Client-side inference"),oi.forEach(e),gt.forEach(e),ba=h(l),x=o(l,"H3",{class:!0});var kt=p(x);al=o(kt,"A",{id:!0,class:!0,href:!0});var pi=p(al);ne=o(pi,"SPAN",{});var ri=p(ne);j(Vl.$$.fragment,ri),ri.forEach(e),pi.forEach(e),Zn=h(kt),oe=o(kt,"SPAN",{});var ii=p(oe);Bn=t(ii,"Step 1: Initialise the project"),ii.forEach(e),kt.forEach(e),Ca=h(l),tl=o(l,"P",{});var At=p(tl);Nn=t(At,"Start by creating a new Next.js application using "),pe=o(At,"CODE",{});var ci=p(pe);Gn=t(ci,"create-next-app"),ci.forEach(e),Sn=t(At,":"),At.forEach(e),Ia=h(l),j(_l.$$.fragment,l),va=h(l),Vs=o(l,"P",{});var Mi=p(Vs);Wn=t(Mi,"On installation, you\u2019ll see various prompts. For this demo, we\u2019ll be selecting those shown below in bold:"),Mi.forEach(e),Ea=h(l),f=o(l,"PRE",{});var C=p(f);Rn=t(C,`\u221A What is your project named? ... next
\u221A Would you like to use TypeScript? ... `),re=o(C,"B",{});var hi=p(re);xn=t(hi,"No"),hi.forEach(e),Qn=t(C,` / Yes
\u221A Would you like to use ESLint? ... No / `),ie=o(C,"B",{});var yi=p(ie);Yn=t(yi,"Yes"),yi.forEach(e),Vn=t(C,`
\u221A Would you like to use Tailwind CSS? ... No / `),ce=o(C,"B",{});var ji=p(ce);_n=t(ji,"Yes"),ji.forEach(e),$n=t(C,"\n\u221A Would you like to use `src/` directory? ... No / "),Me=o(C,"B",{});var di=p(Me);Xn=t(di,"Yes"),di.forEach(e),zn=t(C,`
\u221A Would you like to use App Router? (recommended) ... No / `),he=o(C,"B",{});var wi=p(he);Hn=t(wi,"Yes"),wi.forEach(e),Fn=t(C,`
\u221A Would you like to customize the default import alias? ... `),ye=o(C,"B",{});var ui=p(ye);Ln=t(ui,"No"),ui.forEach(e),Pn=t(C,` / Yes
`),C.forEach(e),ga=h(l),Q=o(l,"H3",{class:!0});var Zt=p(Q);nl=o(Zt,"A",{id:!0,class:!0,href:!0});var Ui=p(nl);je=o(Ui,"SPAN",{});var fi=p(je);j($l.$$.fragment,fi),fi.forEach(e),Ui.forEach(e),Dn=h(Zt),de=o(Zt,"SPAN",{});var Ji=p(de);On=t(Ji,"Step 2: Install and configure Transformers.js"),Ji.forEach(e),Zt.forEach(e),ka=h(l),ol=o(l,"P",{});var Bt=p(ol);qn=t(Bt,"You can install Transformers.js from "),Xl=o(Bt,"A",{href:!0,rel:!0});var mi=p(Xl);Kn=t(mi,"NPM"),mi.forEach(e),lo=t(Bt," with the following command:"),Bt.forEach(e),Aa=h(l),j(zl.$$.fragment,l),Za=h(l),pl=o(l,"P",{});var Nt=p(pl);so=t(Nt,"We also need to update the "),we=o(Nt,"CODE",{});var Ti=p(we);eo=t(Ti,"next.config.js"),Ti.forEach(e),ao=t(Nt," file to ignore node-specific modules when bundling for the browser:"),Nt.forEach(e),Ba=h(l),j(Hl.$$.fragment,l),Na=h(l),T=o(l,"P",{});var B=p(T);to=t(B,"Next, we\u2019ll create a new "),Fl=o(B,"A",{href:!0,rel:!0});var bi=p(Fl);no=t(bi,"Web Worker"),bi.forEach(e),oo=t(B," script where we\u2019ll place all ML-related code. This is to ensure that the main thread is not blocked while the model is loading and performing inference. For this application, we\u2019ll be using "),Ll=o(B,"A",{href:!0,rel:!0});var Ci=p(Ll);ue=o(Ci,"CODE",{});var Ii=p(ue);po=t(Ii,"Xenova/distilbert-base-uncased-finetuned-sst-2-english"),Ii.forEach(e),Ci.forEach(e),ro=t(B,", a ~67M parameter model finetuned on the "),Pl=o(B,"A",{href:!0,rel:!0});var vi=p(Pl);io=t(vi,"Stanford Sentiment Treebank"),vi.forEach(e),co=t(B," dataset. Add the following code to "),Ue=o(B,"CODE",{});var Ei=p(Ue);Mo=t(Ei,"./src/app/worker.js"),Ei.forEach(e),ho=t(B,":"),B.forEach(e),Ga=h(l),j(Dl.$$.fragment,l),Sa=h(l),Y=o(l,"H3",{class:!0});var Gt=p(Y);rl=o(Gt,"A",{id:!0,class:!0,href:!0});var gi=p(rl);fe=o(gi,"SPAN",{});var ki=p(fe);j(Ol.$$.fragment,ki),ki.forEach(e),gi.forEach(e),yo=h(Gt),Je=o(Gt,"SPAN",{});var Ai=p(Je);jo=t(Ai,"Step 3: Design the user interface"),Ai.forEach(e),Gt.forEach(e),Wa=h(l),g=o(l,"P",{});var Fs=p(g);wo=t(Fs,"We\u2019ll now modify the default "),me=o(Fs,"CODE",{});var Zi=p(me);uo=t(Zi,"./src/app/page.js"),Zi.forEach(e),Uo=t(Fs," file so that it connects to our worker thread. Since we\u2019ll only be performing in-browser inference, we can opt-in to Client components using the "),il=o(Fs,"A",{href:!0,rel:!0});var Rr=p(il);Te=o(Rr,"CODE",{});var Bi=p(Te);fo=t(Bi,"'use client'"),Bi.forEach(e),Jo=t(Rr," directive"),Rr.forEach(e),mo=t(Fs,"."),Fs.forEach(e),Ra=h(l),j(ql.$$.fragment,l),xa=h(l),cl=o(l,"P",{});var St=p(cl);To=t(St,"Initialise the following state variables at the beginning of the "),be=o(St,"CODE",{});var Ni=p(be);bo=t(Ni,"Home"),Ni.forEach(e),Co=t(St," component:"),St.forEach(e),Qa=h(l),j(Kl.$$.fragment,l),Ya=h(l),Ml=o(l,"P",{});var Wt=p(Ml);Io=t(Wt,"and fill in the "),Ce=o(Wt,"CODE",{});var Gi=p(Ce);vo=t(Gi,"onMessageReceived"),Gi.forEach(e),Eo=t(Wt," function to update these variables when the worker thread sends a message:"),Wt.forEach(e),Va=h(l),j(ls.$$.fragment,l),_a=h(l),hl=o(l,"P",{});var Rt=p(hl);go=t(Rt,"Finally, we can add a simple UI to the "),Ie=o(Rt,"CODE",{});var Si=p(Ie);ko=t(Si,"Home"),Si.forEach(e),Ao=t(Rt," component, consisting of an input textbox and a preformatted text element to display the classification result:"),Rt.forEach(e),$a=h(l),j(ss.$$.fragment,l),Xa=h(l),_s=o(l,"P",{});var Wi=p(_s);Zo=t(Wi,"You can now run your application using the following command:"),Wi.forEach(e),za=h(l),j(es.$$.fragment,l),Ha=h(l),yl=o(l,"P",{});var xt=p(yl);Bo=t(xt,"Visit the URL shown in the terminal (e.g., "),as=o(xt,"A",{href:!0,rel:!0});var Ri=p(as);No=t(Ri,"http://localhost:3000/"),Ri.forEach(e),Go=t(xt,") to see your application in action!"),xt.forEach(e),Fa=h(l),V=o(l,"H3",{class:!0});var Qt=p(V);jl=o(Qt,"A",{id:!0,class:!0,href:!0});var xi=p(jl);ve=o(xi,"SPAN",{});var Qi=p(ve);j(ts.$$.fragment,Qi),Qi.forEach(e),xi.forEach(e),So=h(Qt),Ee=o(Qt,"SPAN",{});var Yi=p(Ee);Wo=t(Yi,"(Optional) Step 4: Build and deploy"),Yi.forEach(e),Qt.forEach(e),La=h(l),$s=o(l,"P",{});var Vi=p($s);Ro=t(Vi,"To build your application, simply run:"),Vi.forEach(e),Pa=h(l),j(ns.$$.fragment,l),Da=h(l),dl=o(l,"P",{});var Yt=p(dl);xo=t(Yt,"This will bundle your application and output the static files to the "),ge=o(Yt,"CODE",{});var _i=p(ge);Qo=t(_i,"out"),_i.forEach(e),Yo=t(Yt," folder."),Yt.forEach(e),Oa=h(l),k=o(l,"P",{});var Ls=p(k);Vo=t(Ls,"For this demo, we will deploy our application as a static "),os=o(Ls,"A",{href:!0,rel:!0});var $i=p(os);_o=t($i,"Hugging Face Space"),$i.forEach(e),$o=t(Ls,", but you can deploy it anywhere you like! If you haven\u2019t already, you can create a free Hugging Face account "),ps=o(Ls,"A",{href:!0,rel:!0});var Xi=p(ps);Xo=t(Xi,"here"),Xi.forEach(e),zo=t(Ls,"."),Ls.forEach(e),qa=h(l),A=o(l,"OL",{});var Ps=p(A);rs=o(Ps,"LI",{});var Vt=p(rs);Ho=t(Vt,"Visit "),is=o(Vt,"A",{href:!0,rel:!0});var zi=p(is);Fo=t(zi,"https://huggingface.co/new-space"),zi.forEach(e),Lo=t(Vt," and fill in the form. Remember to select \u201CStatic\u201D as the space type."),Vt.forEach(e),Po=h(Ps),ke=o(Ps,"LI",{});var Hi=p(ke);Do=t(Hi,"Click the \u201CCreate space\u201D button at the bottom of the page."),Hi.forEach(e),Oo=h(Ps),cs=o(Ps,"LI",{});var _t=p(cs);qo=t(_t,"Go to \u201CFiles\u201D \u2192 \u201CAdd file\u201D \u2192 \u201CUpload files\u201D. Drag the files from the "),Ae=o(_t,"CODE",{});var Fi=p(Ae);Ko=t(Fi,"out"),Fi.forEach(e),lp=t(_t," folder into the upload box and click \u201CUpload\u201D. After they have uploaded, scroll down to the button and click \u201CCommit changes to main\u201D."),_t.forEach(e),Ps.forEach(e),Ka=h(l),_=o(l,"P",{});var Ma=p(_);Ze=o(Ma,"STRONG",{});var Li=p(Ze);sp=t(Li,"That\u2019s it!"),Li.forEach(e),ep=t(Ma," Your application should now be live at "),Be=o(Ma,"CODE",{});var Pi=p(Be);ap=t(Pi,"https://huggingface.co/spaces/<your-username>/<your-space-name>"),Pi.forEach(e),tp=t(Ma,"!"),Ma.forEach(e),lt=h(l),$=o(l,"H2",{class:!0});var $t=p($);wl=o($t,"A",{id:!0,class:!0,href:!0});var Di=p(wl);Ne=o(Di,"SPAN",{});var Oi=p(Ne);j(Ms.$$.fragment,Oi),Oi.forEach(e),Di.forEach(e),np=h($t),Ge=o($t,"SPAN",{});var qi=p(Ge);op=t(qi,"Server-side inference"),qi.forEach(e),$t.forEach(e),st=h(l),ul=o(l,"P",{});var Xt=p(ul);pp=t(Xt,"While there are many different ways to perform server-side inference, the simplest (which we will discuss in this tutorial) is using the new "),hs=o(Xt,"A",{href:!0,rel:!0});var Ki=p(hs);rp=t(Ki,"Route Handlers"),Ki.forEach(e),ip=t(Xt," feature."),Xt.forEach(e),et=h(l),X=o(l,"H3",{class:!0});var zt=p(X);Ul=o(zt,"A",{id:!0,class:!0,href:!0});var lc=p(Ul);Se=o(lc,"SPAN",{});var sc=p(Se);j(ys.$$.fragment,sc),sc.forEach(e),lc.forEach(e),cp=h(zt),We=o(zt,"SPAN",{});var ec=p(We);Mp=t(ec,"Step 1: Initialise the project"),ec.forEach(e),zt.forEach(e),at=h(l),fl=o(l,"P",{});var Ht=p(fl);hp=t(Ht,"Start by creating a new Next.js application using "),Re=o(Ht,"CODE",{});var ac=p(Re);yp=t(ac,"create-next-app"),ac.forEach(e),jp=t(Ht,":"),Ht.forEach(e),tt=h(l),j(js.$$.fragment,l),nt=h(l),Xs=o(l,"P",{});var tc=p(Xs);dp=t(tc,"On installation, you\u2019ll see various prompts. For this demo, we\u2019ll be selecting those shown below in bold:"),tc.forEach(e),ot=h(l),J=o(l,"PRE",{});var I=p(J);wp=t(I,`\u221A What is your project named? ... next
\u221A Would you like to use TypeScript? ... `),xe=o(I,"B",{});var nc=p(xe);up=t(nc,"No"),nc.forEach(e),Up=t(I,` / Yes
\u221A Would you like to use ESLint? ... No / `),Qe=o(I,"B",{});var oc=p(Qe);fp=t(oc,"Yes"),oc.forEach(e),Jp=t(I,`
\u221A Would you like to use Tailwind CSS? ... No / `),Ye=o(I,"B",{});var pc=p(Ye);mp=t(pc,"Yes"),pc.forEach(e),Tp=t(I,"\n\u221A Would you like to use `src/` directory? ... No / "),Ve=o(I,"B",{});var rc=p(Ve);bp=t(rc,"Yes"),rc.forEach(e),Cp=t(I,`
\u221A Would you like to use App Router? (recommended) ... No / `),_e=o(I,"B",{});var ic=p(_e);Ip=t(ic,"Yes"),ic.forEach(e),vp=t(I,`
\u221A Would you like to customize the default import alias? ... `),$e=o(I,"B",{});var cc=p($e);Ep=t(cc,"No"),cc.forEach(e),gp=t(I,` / Yes
`),I.forEach(e),pt=h(l),z=o(l,"H3",{class:!0});var Ft=p(z);Jl=o(Ft,"A",{id:!0,class:!0,href:!0});var Mc=p(Jl);Xe=o(Mc,"SPAN",{});var hc=p(Xe);j(ds.$$.fragment,hc),hc.forEach(e),Mc.forEach(e),kp=h(Ft),ze=o(Ft,"SPAN",{});var yc=p(ze);Ap=t(yc,"Step 2: Install and configure Transformers.js"),yc.forEach(e),Ft.forEach(e),rt=h(l),ml=o(l,"P",{});var Lt=p(ml);Zp=t(Lt,"You can install Transformers.js from "),ws=o(Lt,"A",{href:!0,rel:!0});var jc=p(ws);Bp=t(jc,"NPM"),jc.forEach(e),Np=t(Lt," with the following command:"),Lt.forEach(e),it=h(l),j(us.$$.fragment,l),ct=h(l),Tl=o(l,"P",{});var Pt=p(Tl);Gp=t(Pt,"We also need to update the "),He=o(Pt,"CODE",{});var dc=p(He);Sp=t(dc,"next.config.js"),dc.forEach(e),Wp=t(Pt," file to prevent Webpack from bundling certain packages:"),Pt.forEach(e),Mt=h(l),j(Us.$$.fragment,l),ht=h(l),bl=o(l,"P",{});var Dt=p(bl);Rp=t(Dt,"Next, let\u2019s set up our Route Handler. We can do this by creating two files in a new "),Fe=o(Dt,"CODE",{});var wc=p(Fe);xp=t(wc,"./src/app/classify/"),wc.forEach(e),Qp=t(Dt," directory:"),Dt.forEach(e),yt=h(l),Cl=o(l,"OL",{});var Ot=p(Cl);fs=o(Ot,"LI",{});var qt=p(fs);zs=o(qt,"P",{});var xr=p(zs);Le=o(xr,"CODE",{});var uc=p(Le);Yp=t(uc,"pipeline.js"),uc.forEach(e),Vp=t(xr," - to handle the construction of our pipeline."),xr.forEach(e),_p=h(qt),j(Js.$$.fragment,qt),qt.forEach(e),$p=h(Ot),ms=o(Ot,"LI",{});var Kt=p(ms);Il=o(Kt,"P",{});var ha=p(Il);Pe=o(ha,"CODE",{});var Uc=p(Pe);Xp=t(Uc,"route.js"),Uc.forEach(e),zp=t(ha," - to process requests made to the "),De=o(ha,"CODE",{});var fc=p(De);Hp=t(fc,"/classify"),fc.forEach(e),Fp=t(ha," route."),ha.forEach(e),Lp=h(Kt),j(Ts.$$.fragment,Kt),Kt.forEach(e),Ot.forEach(e),jt=h(l),H=o(l,"H3",{class:!0});var ln=p(H);vl=o(ln,"A",{id:!0,class:!0,href:!0});var Jc=p(vl);Oe=o(Jc,"SPAN",{});var mc=p(Oe);j(bs.$$.fragment,mc),mc.forEach(e),Jc.forEach(e),Pp=h(ln),qe=o(ln,"SPAN",{});var Tc=p(qe);Dp=t(Tc,"Step 3: Design the user interface"),Tc.forEach(e),ln.forEach(e),dt=h(l),El=o(l,"P",{});var sn=p(El);Op=t(sn,"We\u2019ll now modify the default "),Ke=o(sn,"CODE",{});var bc=p(Ke);qp=t(bc,"./src/app/page.js"),bc.forEach(e),Kp=t(sn," file to make requests to our newly-created Route Handler."),sn.forEach(e),wt=h(l),j(Cs.$$.fragment,l),ut=h(l),Hs=o(l,"P",{});var Cc=p(Hs);lr=t(Cc,"You can now run your application using the following command:"),Cc.forEach(e),Ut=h(l),j(Is.$$.fragment,l),ft=h(l),gl=o(l,"P",{});var en=p(gl);sr=t(en,"Visit the URL shown in the terminal (e.g., "),vs=o(en,"A",{href:!0,rel:!0});var Ic=p(vs);er=t(Ic,"http://localhost:3000/"),Ic.forEach(e),ar=t(en,") to see your application in action!"),en.forEach(e),Jt=h(l),F=o(l,"H3",{class:!0});var an=p(F);kl=o(an,"A",{id:!0,class:!0,href:!0});var vc=p(kl);la=o(vc,"SPAN",{});var Ec=p(la);j(Es.$$.fragment,Ec),Ec.forEach(e),vc.forEach(e),tr=h(an),sa=o(an,"SPAN",{});var gc=p(sa);nr=t(gc,"(Optional) Step 4: Build and deploy"),gc.forEach(e),an.forEach(e),mt=h(l),Z=o(l,"P",{});var Ds=p(Z);or=t(Ds,"For this demo, we will build and deploy our application to "),gs=o(Ds,"A",{href:!0,rel:!0});var kc=p(gs);pr=t(kc,"Hugging Face Spaces"),kc.forEach(e),rr=t(Ds,". If you haven\u2019t already, you can create a free Hugging Face account "),ks=o(Ds,"A",{href:!0,rel:!0});var Ac=p(ks);ir=t(Ac,"here"),Ac.forEach(e),cr=t(Ds,"."),Ds.forEach(e),Tt=h(l),b=o(l,"OL",{});var N=p(b);L=o(N,"LI",{});var Os=p(L);Mr=t(Os,"Create a new "),ea=o(Os,"CODE",{});var Zc=p(ea);hr=t(Zc,"Dockerfile"),Zc.forEach(e),yr=t(Os," in your project\u2019s root folder. You can use our "),As=o(Os,"A",{href:!0,rel:!0});var Bc=p(As);jr=t(Bc,"example Dockerfile"),Bc.forEach(e),dr=t(Os," as a template."),Os.forEach(e),wr=h(N),Zs=o(N,"LI",{});var tn=p(Zs);ur=t(tn,"Visit "),Bs=o(tn,"A",{href:!0,rel:!0});var Nc=p(Bs);Ur=t(Nc,"https://huggingface.co/new-space"),Nc.forEach(e),fr=t(tn," and fill in the form. Remember to select \u201CDocker\u201D as the space type (you can choose the \u201CBlank\u201D Docker template)."),tn.forEach(e),Jr=h(N),aa=o(N,"LI",{});var Gc=p(aa);mr=t(Gc,"Click the \u201CCreate space\u201D button at the bottom of the page."),Gc.forEach(e),Tr=h(N),P=o(N,"LI",{});var qs=p(P);br=t(qs,"Go to \u201CFiles\u201D \u2192 \u201CAdd file\u201D \u2192 \u201CUpload files\u201D. Drag the files from your project folder (excluding "),ta=o(qs,"CODE",{});var Sc=p(ta);Cr=t(Sc,"node_modules"),Sc.forEach(e),Ir=t(qs," and "),na=o(qs,"CODE",{});var Wc=p(na);vr=t(Wc,".next"),Wc.forEach(e),Er=t(qs,", if present) into the upload box and click \u201CUpload\u201D. After they have uploaded, scroll down to the button and click \u201CCommit changes to main\u201D."),qs.forEach(e),gr=h(N),Al=o(N,"LI",{});var ya=p(Al);kr=t(ya,"Add the following lines to the top of your "),oa=o(ya,"CODE",{});var Rc=p(oa);Ar=t(Rc,"README.md"),Rc.forEach(e),Zr=t(ya,`:
	`),j(Ns.$$.fragment,ya),ya.forEach(e),N.forEach(e),bt=h(l),D=o(l,"P",{});var ja=p(D);pa=o(ja,"STRONG",{});var xc=p(pa);Br=t(xc,"That\u2019s it!"),xc.forEach(e),Nr=t(ja," Your application should now be live at "),ra=o(ja,"CODE",{});var Qc=p(ra);Gr=t(Qc,"https://huggingface.co/spaces/<your-username>/<your-space-name>"),Qc.forEach(e),Sr=t(ja,"!"),ja.forEach(e),this.h()},h(){c(G,"name","hf:doc:metadata"),c(G,"content",JSON.stringify(Lc)),c(O,"id","building-a-nextjs-application"),c(O,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),c(O,"href","#building-a-nextjs-application"),c(S,"class","relative group"),c(Gs,"href","#client-side-inference"),c(Ss,"href","#server-side-inference"),c(Nl,"href","https://nextjs.org/docs/app"),c(Nl,"rel","nofollow"),Xc(Rs.src,Yr="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/next-demo.gif")||c(Rs,"src",Yr),c(Rs,"alt","Demo"),c(Gl,"href","https://huggingface.co/spaces/Xenova/next-example-app"),c(Gl,"rel","nofollow"),c(Sl,"href","https://huggingface.co/spaces/Xenova/next-server-example-app"),c(Sl,"rel","nofollow"),c(Wl,"href","https://github.com/xenova/transformers.js/tree/main/examples/next-client"),c(Wl,"rel","nofollow"),c(Rl,"href","https://github.com/xenova/transformers.js/tree/main/examples/next-server"),c(Rl,"rel","nofollow"),c(sl,"id","prerequisites"),c(sl,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),c(sl,"href","#prerequisites"),c(W,"class","relative group"),c(Ql,"href","https://nodejs.org/en/"),c(Ql,"rel","nofollow"),c(el,"id","clientside-inference"),c(el,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),c(el,"href","#clientside-inference"),c(R,"class","relative group"),c(al,"id","step-1-initialise-the-project"),c(al,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),c(al,"href","#step-1-initialise-the-project"),c(x,"class","relative group"),c(nl,"id","step-2-install-and-configure-transformersjs"),c(nl,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),c(nl,"href","#step-2-install-and-configure-transformersjs"),c(Q,"class","relative group"),c(Xl,"href","https://www.npmjs.com/package/@xenova/transformers"),c(Xl,"rel","nofollow"),c(Fl,"href","https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers"),c(Fl,"rel","nofollow"),c(Ll,"href","https://huggingface.co/Xenova/distilbert-base-uncased-finetuned-sst-2-english"),c(Ll,"rel","nofollow"),c(Pl,"href","https://huggingface.co/datasets/sst"),c(Pl,"rel","nofollow"),c(rl,"id","step-3-design-the-user-interface"),c(rl,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),c(rl,"href","#step-3-design-the-user-interface"),c(Y,"class","relative group"),c(il,"href","https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive"),c(il,"rel","nofollow"),c(as,"href","http://localhost:3000/"),c(as,"rel","nofollow"),c(jl,"id","optional-step-4-build-and-deploy"),c(jl,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),c(jl,"href","#optional-step-4-build-and-deploy"),c(V,"class","relative group"),c(os,"href","https://huggingface.co/docs/hub/spaces"),c(os,"rel","nofollow"),c(ps,"href","https://huggingface.co/join"),c(ps,"rel","nofollow"),c(is,"href","https://huggingface.co/new-space"),c(is,"rel","nofollow"),c(wl,"id","serverside-inference"),c(wl,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),c(wl,"href","#serverside-inference"),c($,"class","relative group"),c(hs,"href","https://nextjs.org/docs/app/building-your-application/routing/router-handlers"),c(hs,"rel","nofollow"),c(Ul,"id","step-1-initialise-the-project"),c(Ul,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),c(Ul,"href","#step-1-initialise-the-project"),c(X,"class","relative group"),c(Jl,"id","step-2-install-and-configure-transformersjs"),c(Jl,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),c(Jl,"href","#step-2-install-and-configure-transformersjs"),c(z,"class","relative group"),c(ws,"href","https://www.npmjs.com/package/@xenova/transformers"),c(ws,"rel","nofollow"),c(vl,"id","step-3-design-the-user-interface"),c(vl,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),c(vl,"href","#step-3-design-the-user-interface"),c(H,"class","relative group"),c(vs,"href","http://localhost:3000/"),c(vs,"rel","nofollow"),c(kl,"id","optional-step-4-build-and-deploy"),c(kl,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),c(kl,"href","#optional-step-4-build-and-deploy"),c(F,"class","relative group"),c(gs,"href","https://huggingface.co/docs/hub/spaces"),c(gs,"rel","nofollow"),c(ks,"href","https://huggingface.co/join"),c(ks,"rel","nofollow"),c(As,"href","https://github.com/xenova/transformers.js/blob/main/examples/next-server/Dockerfile"),c(As,"rel","nofollow"),c(Bs,"href","https://huggingface.co/new-space"),c(Bs,"rel","nofollow")},m(l,r){s(document.head,G),i(l,da,r),i(l,S,r),s(S,O),s(O,Ks),d(Bl,Ks,null),s(S,nn),s(S,le),s(le,on),i(l,wa,r),i(l,v,r),s(v,pn),s(v,Gs),s(Gs,rn),s(v,cn),s(v,Ss),s(Ss,Mn),s(v,hn),s(v,Nl),s(Nl,yn),s(v,jn),i(l,ua,r),i(l,Ws,r),s(Ws,Rs),i(l,Ua,r),i(l,xs,r),s(xs,dn),i(l,fa,r),i(l,q,r),s(q,K),s(K,wn),s(K,Gl),s(Gl,un),s(K,Un),s(K,Sl),s(Sl,fn),s(q,Jn),s(q,ll),s(ll,mn),s(ll,Wl),s(Wl,Tn),s(ll,bn),s(ll,Rl),s(Rl,Cn),i(l,Ja,r),i(l,W,r),s(W,sl),s(sl,se),d(xl,se,null),s(W,In),s(W,ee),s(ee,vn),i(l,ma,r),i(l,Qs,r),s(Qs,Ys),s(Ys,Ql),s(Ql,En),s(Ys,gn),i(l,Ta,r),i(l,R,r),s(R,el),s(el,ae),d(Yl,ae,null),s(R,kn),s(R,te),s(te,An),i(l,ba,r),i(l,x,r),s(x,al),s(al,ne),d(Vl,ne,null),s(x,Zn),s(x,oe),s(oe,Bn),i(l,Ca,r),i(l,tl,r),s(tl,Nn),s(tl,pe),s(pe,Gn),s(tl,Sn),i(l,Ia,r),d(_l,l,r),i(l,va,r),i(l,Vs,r),s(Vs,Wn),i(l,Ea,r),i(l,f,r),s(f,Rn),s(f,re),s(re,xn),s(f,Qn),s(f,ie),s(ie,Yn),s(f,Vn),s(f,ce),s(ce,_n),s(f,$n),s(f,Me),s(Me,Xn),s(f,zn),s(f,he),s(he,Hn),s(f,Fn),s(f,ye),s(ye,Ln),s(f,Pn),i(l,ga,r),i(l,Q,r),s(Q,nl),s(nl,je),d($l,je,null),s(Q,Dn),s(Q,de),s(de,On),i(l,ka,r),i(l,ol,r),s(ol,qn),s(ol,Xl),s(Xl,Kn),s(ol,lo),i(l,Aa,r),d(zl,l,r),i(l,Za,r),i(l,pl,r),s(pl,so),s(pl,we),s(we,eo),s(pl,ao),i(l,Ba,r),d(Hl,l,r),i(l,Na,r),i(l,T,r),s(T,to),s(T,Fl),s(Fl,no),s(T,oo),s(T,Ll),s(Ll,ue),s(ue,po),s(T,ro),s(T,Pl),s(Pl,io),s(T,co),s(T,Ue),s(Ue,Mo),s(T,ho),i(l,Ga,r),d(Dl,l,r),i(l,Sa,r),i(l,Y,r),s(Y,rl),s(rl,fe),d(Ol,fe,null),s(Y,yo),s(Y,Je),s(Je,jo),i(l,Wa,r),i(l,g,r),s(g,wo),s(g,me),s(me,uo),s(g,Uo),s(g,il),s(il,Te),s(Te,fo),s(il,Jo),s(g,mo),i(l,Ra,r),d(ql,l,r),i(l,xa,r),i(l,cl,r),s(cl,To),s(cl,be),s(be,bo),s(cl,Co),i(l,Qa,r),d(Kl,l,r),i(l,Ya,r),i(l,Ml,r),s(Ml,Io),s(Ml,Ce),s(Ce,vo),s(Ml,Eo),i(l,Va,r),d(ls,l,r),i(l,_a,r),i(l,hl,r),s(hl,go),s(hl,Ie),s(Ie,ko),s(hl,Ao),i(l,$a,r),d(ss,l,r),i(l,Xa,r),i(l,_s,r),s(_s,Zo),i(l,za,r),d(es,l,r),i(l,Ha,r),i(l,yl,r),s(yl,Bo),s(yl,as),s(as,No),s(yl,Go),i(l,Fa,r),i(l,V,r),s(V,jl),s(jl,ve),d(ts,ve,null),s(V,So),s(V,Ee),s(Ee,Wo),i(l,La,r),i(l,$s,r),s($s,Ro),i(l,Pa,r),d(ns,l,r),i(l,Da,r),i(l,dl,r),s(dl,xo),s(dl,ge),s(ge,Qo),s(dl,Yo),i(l,Oa,r),i(l,k,r),s(k,Vo),s(k,os),s(os,_o),s(k,$o),s(k,ps),s(ps,Xo),s(k,zo),i(l,qa,r),i(l,A,r),s(A,rs),s(rs,Ho),s(rs,is),s(is,Fo),s(rs,Lo),s(A,Po),s(A,ke),s(ke,Do),s(A,Oo),s(A,cs),s(cs,qo),s(cs,Ae),s(Ae,Ko),s(cs,lp),i(l,Ka,r),i(l,_,r),s(_,Ze),s(Ze,sp),s(_,ep),s(_,Be),s(Be,ap),s(_,tp),i(l,lt,r),i(l,$,r),s($,wl),s(wl,Ne),d(Ms,Ne,null),s($,np),s($,Ge),s(Ge,op),i(l,st,r),i(l,ul,r),s(ul,pp),s(ul,hs),s(hs,rp),s(ul,ip),i(l,et,r),i(l,X,r),s(X,Ul),s(Ul,Se),d(ys,Se,null),s(X,cp),s(X,We),s(We,Mp),i(l,at,r),i(l,fl,r),s(fl,hp),s(fl,Re),s(Re,yp),s(fl,jp),i(l,tt,r),d(js,l,r),i(l,nt,r),i(l,Xs,r),s(Xs,dp),i(l,ot,r),i(l,J,r),s(J,wp),s(J,xe),s(xe,up),s(J,Up),s(J,Qe),s(Qe,fp),s(J,Jp),s(J,Ye),s(Ye,mp),s(J,Tp),s(J,Ve),s(Ve,bp),s(J,Cp),s(J,_e),s(_e,Ip),s(J,vp),s(J,$e),s($e,Ep),s(J,gp),i(l,pt,r),i(l,z,r),s(z,Jl),s(Jl,Xe),d(ds,Xe,null),s(z,kp),s(z,ze),s(ze,Ap),i(l,rt,r),i(l,ml,r),s(ml,Zp),s(ml,ws),s(ws,Bp),s(ml,Np),i(l,it,r),d(us,l,r),i(l,ct,r),i(l,Tl,r),s(Tl,Gp),s(Tl,He),s(He,Sp),s(Tl,Wp),i(l,Mt,r),d(Us,l,r),i(l,ht,r),i(l,bl,r),s(bl,Rp),s(bl,Fe),s(Fe,xp),s(bl,Qp),i(l,yt,r),i(l,Cl,r),s(Cl,fs),s(fs,zs),s(zs,Le),s(Le,Yp),s(zs,Vp),s(fs,_p),d(Js,fs,null),s(Cl,$p),s(Cl,ms),s(ms,Il),s(Il,Pe),s(Pe,Xp),s(Il,zp),s(Il,De),s(De,Hp),s(Il,Fp),s(ms,Lp),d(Ts,ms,null),i(l,jt,r),i(l,H,r),s(H,vl),s(vl,Oe),d(bs,Oe,null),s(H,Pp),s(H,qe),s(qe,Dp),i(l,dt,r),i(l,El,r),s(El,Op),s(El,Ke),s(Ke,qp),s(El,Kp),i(l,wt,r),d(Cs,l,r),i(l,ut,r),i(l,Hs,r),s(Hs,lr),i(l,Ut,r),d(Is,l,r),i(l,ft,r),i(l,gl,r),s(gl,sr),s(gl,vs),s(vs,er),s(gl,ar),i(l,Jt,r),i(l,F,r),s(F,kl),s(kl,la),d(Es,la,null),s(F,tr),s(F,sa),s(sa,nr),i(l,mt,r),i(l,Z,r),s(Z,or),s(Z,gs),s(gs,pr),s(Z,rr),s(Z,ks),s(ks,ir),s(Z,cr),i(l,Tt,r),i(l,b,r),s(b,L),s(L,Mr),s(L,ea),s(ea,hr),s(L,yr),s(L,As),s(As,jr),s(L,dr),s(b,wr),s(b,Zs),s(Zs,ur),s(Zs,Bs),s(Bs,Ur),s(Zs,fr),s(b,Jr),s(b,aa),s(aa,mr),s(b,Tr),s(b,P),s(P,br),s(P,ta),s(ta,Cr),s(P,Ir),s(P,na),s(na,vr),s(P,Er),s(b,gr),s(b,Al),s(Al,kr),s(Al,oa),s(oa,Ar),s(Al,Zr),d(Ns,Al,null),i(l,bt,r),i(l,D,r),s(D,pa),s(pa,Br),s(D,Nr),s(D,ra),s(ra,Gr),s(D,Sr),Ct=!0},p:zc,i(l){Ct||(w(Bl.$$.fragment,l),w(xl.$$.fragment,l),w(Yl.$$.fragment,l),w(Vl.$$.fragment,l),w(_l.$$.fragment,l),w($l.$$.fragment,l),w(zl.$$.fragment,l),w(Hl.$$.fragment,l),w(Dl.$$.fragment,l),w(Ol.$$.fragment,l),w(ql.$$.fragment,l),w(Kl.$$.fragment,l),w(ls.$$.fragment,l),w(ss.$$.fragment,l),w(es.$$.fragment,l),w(ts.$$.fragment,l),w(ns.$$.fragment,l),w(Ms.$$.fragment,l),w(ys.$$.fragment,l),w(js.$$.fragment,l),w(ds.$$.fragment,l),w(us.$$.fragment,l),w(Us.$$.fragment,l),w(Js.$$.fragment,l),w(Ts.$$.fragment,l),w(bs.$$.fragment,l),w(Cs.$$.fragment,l),w(Is.$$.fragment,l),w(Es.$$.fragment,l),w(Ns.$$.fragment,l),Ct=!0)},o(l){u(Bl.$$.fragment,l),u(xl.$$.fragment,l),u(Yl.$$.fragment,l),u(Vl.$$.fragment,l),u(_l.$$.fragment,l),u($l.$$.fragment,l),u(zl.$$.fragment,l),u(Hl.$$.fragment,l),u(Dl.$$.fragment,l),u(Ol.$$.fragment,l),u(ql.$$.fragment,l),u(Kl.$$.fragment,l),u(ls.$$.fragment,l),u(ss.$$.fragment,l),u(es.$$.fragment,l),u(ts.$$.fragment,l),u(ns.$$.fragment,l),u(Ms.$$.fragment,l),u(ys.$$.fragment,l),u(js.$$.fragment,l),u(ds.$$.fragment,l),u(us.$$.fragment,l),u(Us.$$.fragment,l),u(Js.$$.fragment,l),u(Ts.$$.fragment,l),u(bs.$$.fragment,l),u(Cs.$$.fragment,l),u(Is.$$.fragment,l),u(Es.$$.fragment,l),u(Ns.$$.fragment,l),Ct=!1},d(l){e(G),l&&e(da),l&&e(S),U(Bl),l&&e(wa),l&&e(v),l&&e(ua),l&&e(Ws),l&&e(Ua),l&&e(xs),l&&e(fa),l&&e(q),l&&e(Ja),l&&e(W),U(xl),l&&e(ma),l&&e(Qs),l&&e(Ta),l&&e(R),U(Yl),l&&e(ba),l&&e(x),U(Vl),l&&e(Ca),l&&e(tl),l&&e(Ia),U(_l,l),l&&e(va),l&&e(Vs),l&&e(Ea),l&&e(f),l&&e(ga),l&&e(Q),U($l),l&&e(ka),l&&e(ol),l&&e(Aa),U(zl,l),l&&e(Za),l&&e(pl),l&&e(Ba),U(Hl,l),l&&e(Na),l&&e(T),l&&e(Ga),U(Dl,l),l&&e(Sa),l&&e(Y),U(Ol),l&&e(Wa),l&&e(g),l&&e(Ra),U(ql,l),l&&e(xa),l&&e(cl),l&&e(Qa),U(Kl,l),l&&e(Ya),l&&e(Ml),l&&e(Va),U(ls,l),l&&e(_a),l&&e(hl),l&&e($a),U(ss,l),l&&e(Xa),l&&e(_s),l&&e(za),U(es,l),l&&e(Ha),l&&e(yl),l&&e(Fa),l&&e(V),U(ts),l&&e(La),l&&e($s),l&&e(Pa),U(ns,l),l&&e(Da),l&&e(dl),l&&e(Oa),l&&e(k),l&&e(qa),l&&e(A),l&&e(Ka),l&&e(_),l&&e(lt),l&&e($),U(Ms),l&&e(st),l&&e(ul),l&&e(et),l&&e(X),U(ys),l&&e(at),l&&e(fl),l&&e(tt),U(js,l),l&&e(nt),l&&e(Xs),l&&e(ot),l&&e(J),l&&e(pt),l&&e(z),U(ds),l&&e(rt),l&&e(ml),l&&e(it),U(us,l),l&&e(ct),l&&e(Tl),l&&e(Mt),U(Us,l),l&&e(ht),l&&e(bl),l&&e(yt),l&&e(Cl),U(Js),U(Ts),l&&e(jt),l&&e(H),U(bs),l&&e(dt),l&&e(El),l&&e(wt),U(Cs,l),l&&e(ut),l&&e(Hs),l&&e(Ut),U(Is,l),l&&e(ft),l&&e(gl),l&&e(Jt),l&&e(F),U(Es),l&&e(mt),l&&e(Z),l&&e(Tt),l&&e(b),U(Ns),l&&e(bt),l&&e(D)}}}const Lc={local:"building-a-nextjs-application",sections:[{local:"prerequisites",title:"Prerequisites"},{local:"clientside-inference",sections:[{local:"step-1-initialise-the-project",title:"Step 1: Initialise the project"},{local:"step-2-install-and-configure-transformersjs",title:"Step 2: Install and configure Transformers.js"},{local:"step-3-design-the-user-interface",title:"Step 3: Design the user interface"},{local:"optional-step-4-build-and-deploy",title:"(Optional) Step 4: Build and deploy"}],title:"Client-side inference"},{local:"serverside-inference",sections:[{local:"step-1-initialise-the-project",title:"Step 1: Initialise the project"},{local:"step-2-install-and-configure-transformersjs",title:"Step 2: Install and configure Transformers.js"},{local:"step-3-design-the-user-interface",title:"Step 3: Design the user interface"},{local:"optional-step-4-build-and-deploy",title:"(Optional) Step 4: Build and deploy"}],title:"Server-side inference"}],title:"Building a Next.js application"};function Pc(Qr){return Hc(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Kc extends Yc{constructor(G){super();Vc(this,G,Pc,Fc,_c,{})}}export{Kc as default,Lc as metadata};
