import{S as fc,i as Ic,s as Cc,e as n,k as i,w as d,t as e,M as bc,c as p,d as a,m as M,a as r,x as j,h as t,b as h,T as gc,G as l,g as c,y,q as U,o as w,B as J,v as Ec}from"../../chunks/vendor-hf-doc-builder.js";import{T as Bc}from"../../chunks/Tip-hf-doc-builder.js";import{I as wl}from"../../chunks/IconCopyLink-hf-doc-builder.js";import{C as T}from"../../chunks/CodeBlock-hf-doc-builder.js";function vc(Ha){let u,O,m,E,_;return{c(){u=n("p"),O=e("We recommend starting the development server again with "),m=n("code"),E=e("npm run dev"),_=e(`
(if not already running) so that you can see your changes in real-time.`)},l(b){u=p(b,"P",{});var N=r(u);O=t(N,"We recommend starting the development server again with "),m=p(N,"CODE",{});var K=r(m);E=t(K,"npm run dev"),K.forEach(a),_=t(N,`
(if not already running) so that you can see your changes in real-time.`),N.forEach(a)},m(b,N){c(b,u,N),l(u,O),l(u,m),l(m,E),l(u,_)},d(b){b&&a(u)}}}function Zc(Ha){let u,O,m,E,_,b,N,K,ut,La,Jl,Tt,Da,ul,Tl,Qr,Pa,ml,mt,Oa,q,kl,Is,ft,It,Rl,Cs,Ct,Ka,X,ss,Wl,bs,bt,Vl,gt,qa,ls,fl,gs,Et,Bt,vt,Il,Es,Zt,At,se,$,as,zl,Bs,Nt,Yl,Qt,le,es,Gt,vs,St,kt,ae,Zs,ee,B,Rt,xl,Wt,Vt,_l,zt,Yt,Xl,xt,_t,te,Cl,Xt,ne,As,pe,bl,$t,re,Ns,oe,v,Ft,Qs,Ht,Lt,$l,Dt,Pt,Fl,Ot,Kt,ce,F,ts,Hl,Gs,qt,Ll,sn,ie,ns,ln,Ss,an,en,Me,ks,he,ps,tn,Rs,nn,pn,de,rs,Dl,rn,on,Pl,cn,je,Q,Mn,Ws,hn,dn,Vs,jn,yn,ye,os,zs,f,Un,Ol,wn,Jn,Kl,un,Tn,ql,mn,fn,Ys,In,Cn,sa,bn,gn,En,xs,Bn,_s,g,vn,la,Zn,An,aa,Nn,Qn,ea,Gn,Sn,ta,kn,Rn,Wn,Xs,Ue,H,cs,na,$s,Vn,pa,zn,we,is,Je,G,Yn,ra,xn,_n,oa,Xn,$n,ue,gl,Fs,Ms,ca,Fn,Hn,Hs,Ln,Dn,Pn,Ls,Te,Ds,Ps,ia,On,Kn,Os,me,hs,qn,Ma,sp,lp,fe,Ks,Ie,S,ap,ha,ep,tp,da,np,pp,Ce,qs,be,I,rp,ja,op,cp,ya,ip,Mp,Ua,hp,dp,wa,jp,yp,ge,sl,Ee,ds,Up,Ja,wp,Jp,Be,js,up,ua,Tp,mp,ve,ys,ll,El,Ta,fp,Ip,Cp,al,ma,bp,gp,el,Ep,tl,fa,Ia,Bp,vp,nl,Ca,Zp,Ap,pl,Ze,L,Us,ba,rl,Np,ga,Qp,Ae,Bl,Gp,Ne,C,Sp,Ea,kp,Rp,Ba,Wp,Vp,va,zp,Yp,Za,xp,_p,Qe,ol,Ge,k,Xp,Aa,$p,Fp,Na,Hp,Lp,Se,cl,ke,R,Dp,Qa,Pp,Op,Ga,Kp,qp,Re,il,We,ws,sr,Sa,lr,ar,Ve,D,Js,ka,Ml,er,Ra,tr,ze,W,nr,Wa,pr,rr,Va,or,cr,Ye,V,ir,hl,Mr,hr,dl,dr,jr,xe,us,jl,yr,yl,Ur,wr,Jr,A,ur,za,Tr,mr,Ya,fr,Ir,xa,Cr,br,_e,P,_a,gr,Er,Xa,Br,vr,Xe;return b=new wl({}),bs=new wl({}),Bs=new wl({}),Zs=new T({props:{code:"bnBtJTIwY3JlYXRlJTIwdml0ZSU0MGxhdGVzdCUyMHJlYWN0LXRyYW5zbGF0b3IlMjAtLSUyMC0tdGVtcGxhdGUlMjByZWFjdA==",highlighted:"npm create vite@latest react-translator -- --template react"}}),As=new T({props:{code:"Y2QlMjByZWFjdC10cmFuc2xhdG9yJTBBbnBtJTIwaW5zdGFsbA==",highlighted:`<span class="hljs-built_in">cd</span> react-translator
npm install`}}),Ns=new T({props:{code:"bnBtJTIwcnVuJTIwZGV2",highlighted:"npm run dev"}}),Gs=new wl({}),ks=new T({props:{code:"bnBtJTIwaW5zdGFsbCUyMCU0MHhlbm92YSUyRnRyYW5zZm9ybWVycw==",highlighted:"npm install @xenova/transformers"}}),xs=new T({props:{code:"aW1wb3J0JTIwJTdCJTIwcGlwZWxpbmUlMjAlN0QlMjBmcm9tJTIwJyU0MHhlbm92YSUyRnRyYW5zZm9ybWVycyclM0IlMEElMEFjbGFzcyUyME15VHJhbnNsYXRpb25QaXBlbGluZSUyMCU3QiUwQSUyMCUyMHN0YXRpYyUyMHRhc2slMjAlM0QlMjAndHJhbnNsYXRpb24nJTNCJTBBJTIwJTIwc3RhdGljJTIwbW9kZWwlMjAlM0QlMjAnWGVub3ZhJTJGbmxsYi0yMDAtZGlzdGlsbGVkLTYwME0nJTNCJTBBJTIwJTIwc3RhdGljJTIwaW5zdGFuY2UlMjAlM0QlMjBudWxsJTNCJTBBJTBBJTIwJTIwc3RhdGljJTIwYXN5bmMlMjBnZXRJbnN0YW5jZShwcm9ncmVzc19jYWxsYmFjayUyMCUzRCUyMG51bGwpJTIwJTdCJTBBJTIwJTIwJTIwJTIwaWYlMjAodGhpcy5pbnN0YW5jZSUyMCUzRCUzRCUzRCUyMG51bGwpJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwdGhpcy5pbnN0YW5jZSUyMCUzRCUyMHBpcGVsaW5lKHRoaXMudGFzayUyQyUyMHRoaXMubW9kZWwlMkMlMjAlN0IlMjBwcm9ncmVzc19jYWxsYmFjayUyMCU3RCklM0IlMEElMjAlMjAlMjAlMjAlN0QlMEElMEElMjAlMjAlMjAlMjByZXR1cm4lMjB0aGlzLmluc3RhbmNlJTNCJTBBJTIwJTIwJTdEJTBBJTdE",highlighted:`<span class="hljs-keyword">import</span> { pipeline } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@xenova/transformers&#x27;</span>;

<span class="hljs-keyword">class</span> <span class="hljs-title class_">MyTranslationPipeline</span> {
  <span class="hljs-keyword">static</span> task = <span class="hljs-string">&#x27;translation&#x27;</span>;
  <span class="hljs-keyword">static</span> model = <span class="hljs-string">&#x27;Xenova/nllb-200-distilled-600M&#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>;
  }
}`}}),Xs=new T({props:{code:"JTJGJTJGJTIwUmVtZW1iZXIlMjB0byUyMGltcG9ydCUyMHRoZSUyMHJlbGV2YW50JTIwaG9va3MlMEFpbXBvcnQlMjAlN0IlMjB1c2VFZmZlY3QlMkMlMjB1c2VSZWYlMkMlMjB1c2VTdGF0ZSUyMCU3RCUyMGZyb20lMjAncmVhY3QnJTBBJTBBZnVuY3Rpb24lMjBBcHAoKSUyMCU3QiUwQSUyMCUyMCUyRiUyRiUyMENyZWF0ZSUyMGElMjByZWZlcmVuY2UlMjB0byUyMHRoZSUyMHdvcmtlciUyMG9iamVjdC4lMEElMjAlMjBjb25zdCUyMHdvcmtlciUyMCUzRCUyMHVzZVJlZihudWxsKSUzQiUwQSUwQSUyMCUyMCUyRiUyRiUyMFdlJTIwdXNlJTIwdGhlJTIwJTYwdXNlRWZmZWN0JTYwJTIwaG9vayUyMHRvJTIwc2V0dXAlMjB0aGUlMjB3b3JrZXIlMjBhcyUyMHNvb24lMjBhcyUyMHRoZSUyMCU2MEFwcCU2MCUyMGNvbXBvbmVudCUyMGlzJTIwbW91bnRlZC4lMEElMjAlMjB1c2VFZmZlY3QoKCklMjAlM0QlM0UlMjAlN0IlMEElMjAlMjAlMjAlMjBpZiUyMCghd29ya2VyLmN1cnJlbnQpJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwQ3JlYXRlJTIwdGhlJTIwd29ya2VyJTIwaWYlMjBpdCUyMGRvZXMlMjBub3QlMjB5ZXQlMjBleGlzdC4lMEElMjAlMjAlMjAlMjAlMjAlMjB3b3JrZXIuY3VycmVudCUyMCUzRCUyMG5ldyUyMFdvcmtlcihuZXclMjBVUkwoJy4lMkZ3b3JrZXIuanMnJTJDJTIwaW1wb3J0Lm1ldGEudXJsKSUyQyUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHR5cGUlM0ElMjAnbW9kdWxlJyUwQSUyMCUyMCUyMCUyMCUyMCUyMCU3RCklM0IlMEElMjAlMjAlMjAlMjAlN0QlMEElMEElMjAlMjAlMjAlMjAlMkYlMkYlMjBDcmVhdGUlMjBhJTIwY2FsbGJhY2slMjBmdW5jdGlvbiUyMGZvciUyMG1lc3NhZ2VzJTIwZnJvbSUyMHRoZSUyMHdvcmtlciUyMHRocmVhZC4lMEElMjAlMjAlMjAlMjBjb25zdCUyMG9uTWVzc2FnZVJlY2VpdmVkJTIwJTNEJTIwKGUpJTIwJTNEJTNFJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwVE9ETyUzQSUyMFdpbGwlMjBmaWxsJTIwaW4lMjBsYXRlciUwQSUyMCUyMCUyMCUyMCU3RCUzQiUwQSUwQSUyMCUyMCUyMCUyMCUyRiUyRiUyMEF0dGFjaCUyMHRoZSUyMGNhbGxiYWNrJTIwZnVuY3Rpb24lMjBhcyUyMGFuJTIwZXZlbnQlMjBsaXN0ZW5lci4lMEElMjAlMjAlMjAlMjB3b3JrZXIuY3VycmVudC5hZGRFdmVudExpc3RlbmVyKCdtZXNzYWdlJyUyQyUyMG9uTWVzc2FnZVJlY2VpdmVkKSUzQiUwQSUwQSUyMCUyMCUyMCUyMCUyRiUyRiUyMERlZmluZSUyMGElMjBjbGVhbnVwJTIwZnVuY3Rpb24lMjBmb3IlMjB3aGVuJTIwdGhlJTIwY29tcG9uZW50JTIwaXMlMjB1bm1vdW50ZWQuJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwKCklMjAlM0QlM0UlMjB3b3JrZXIuY3VycmVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdtZXNzYWdlJyUyQyUyMG9uTWVzc2FnZVJlY2VpdmVkKSUzQiUwQSUyMCUyMCU3RCklM0IlMEElMEElMjAlMjByZXR1cm4lMjAoJTBBJTIwJTIwJTIwJTIwJTJGJTJGJTIwVE9ETyUzQSUyMFJlc3QlMjBvZiUyMG91ciUyMGFwcCUyMGdvZXMlMjBoZXJlLi4uJTBBJTIwJTIwKSUwQSU3RCUwQSUwQWV4cG9ydCUyMGRlZmF1bHQlMjBBcHAlMEE=",highlighted:`<span class="hljs-comment">// Remember to import the relevant hooks</span>
<span class="hljs-keyword">import</span> { useEffect, useRef, useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>

<span class="hljs-keyword">function</span> <span class="hljs-title function_">App</span>(<span class="hljs-params"></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 setup 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> Will fill in later</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">return</span> (
    <span class="hljs-comment">// <span class="hljs-doctag">TODO:</span> Rest of our app goes here...</span>
  )
}

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">App</span>
`}}),$s=new wl({}),is=new Bc({props:{$$slots:{default:[vc]},$$scope:{ctx:Ha}}}),Ls=new T({props:{code:"Y29uc3QlMjBMQU5HVUFHRVMlMjAlM0QlMjAlN0IlMEElMjAlMjAlMjJBY2VobmVzZSUyMChBcmFiaWMlMjBzY3JpcHQpJTIyJTNBJTIwJTIyYWNlX0FyYWIlMjIlMkMlMEElMjAlMjAlMjJBY2VobmVzZSUyMChMYXRpbiUyMHNjcmlwdCklMjIlM0ElMjAlMjJhY2VfTGF0biUyMiUyQyUwQSUyMCUyMCUyMkFmcmlrYWFucyUyMiUzQSUyMCUyMmFmcl9MYXRuJTIyJTJDJTBBJTIwJTIwLi4uJTBBJTIwJTIwJTIyWnVsdSUyMiUzQSUyMCUyMnp1bF9MYXRuJTIyJTJDJTBBJTdEJTBBJTBBZXhwb3J0JTIwZGVmYXVsdCUyMGZ1bmN0aW9uJTIwTGFuZ3VhZ2VTZWxlY3RvciglN0IlMjB0eXBlJTJDJTIwb25DaGFuZ2UlMkMlMjBkZWZhdWx0TGFuZ3VhZ2UlMjAlN0QpJTIwJTdCJTBBJTIwJTIwcmV0dXJuJTIwKCUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzTmFtZSUzRCdsYW5ndWFnZS1zZWxlY3RvciclM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NsYWJlbCUzRSU3QnR5cGUlN0QlM0ElMjAlM0MlMkZsYWJlbCUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ3NlbGVjdCUyMG9uQ2hhbmdlJTNEJTdCb25DaGFuZ2UlN0QlMjBkZWZhdWx0VmFsdWUlM0QlN0JkZWZhdWx0TGFuZ3VhZ2UlN0QlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0JPYmplY3QuZW50cmllcyhMQU5HVUFHRVMpLm1hcCgoJTVCa2V5JTJDJTIwdmFsdWUlNUQpJTIwJTNEJTNFJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTNDb3B0aW9uJTIwa2V5JTNEJTdCa2V5JTdEJTIwdmFsdWUlM0QlN0J2YWx1ZSU3RCUzRSU3QmtleSU3RCUzQyUyRm9wdGlvbiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCklN0QlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZzZWxlY3QlM0UlMEElMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjApJTBBJTdE",highlighted:`<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">LANGUAGES</span> = {
  <span class="hljs-string">&quot;Acehnese (Arabic script)&quot;</span>: <span class="hljs-string">&quot;ace_Arab&quot;</span>,
  <span class="hljs-string">&quot;Acehnese (Latin script)&quot;</span>: <span class="hljs-string">&quot;ace_Latn&quot;</span>,
  <span class="hljs-string">&quot;Afrikaans&quot;</span>: <span class="hljs-string">&quot;afr_Latn&quot;</span>,
  ...
  <span class="hljs-string">&quot;Zulu&quot;</span>: <span class="hljs-string">&quot;zul_Latn&quot;</span>,
}

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">LanguageSelector</span>(<span class="hljs-params">{ type, onChange, defaultLanguage }</span>) {
  <span class="hljs-keyword">return</span> (
    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&#x27;language-selector&#x27;</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>{type}: <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{onChange}</span> <span class="hljs-attr">defaultValue</span>=<span class="hljs-string">{defaultLanguage}</span>&gt;</span>
        {Object.entries(LANGUAGES).map(([key, value]) =&gt; {
          return <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{key}</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{value}</span>&gt;</span>{key}<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
        })}
      <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
  )
}`}}),Os=new T({props:{code:"ZXhwb3J0JTIwZGVmYXVsdCUyMGZ1bmN0aW9uJTIwUHJvZ3Jlc3MoJTdCJTIwdGV4dCUyQyUyMHBlcmNlbnRhZ2UlMjAlN0QpJTIwJTdCJTBBJTIwJTIwcGVyY2VudGFnZSUyMCUzRCUyMHBlcmNlbnRhZ2UlMjAlM0YlM0YlMjAwJTNCJTBBJTIwJTIwcmV0dXJuJTIwKCUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzTmFtZSUzRCUyMnByb2dyZXNzLWNvbnRhaW5lciUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzTmFtZSUzRCdwcm9ncmVzcy1iYXInJTIwc3R5bGUlM0QlN0IlN0IlMjAnd2lkdGgnJTNBJTIwJTYwJTI0JTdCcGVyY2VudGFnZSU3RCUyNSU2MCUyMCU3RCU3RCUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3QnRleHQlN0QlMjAoJTdCJTYwJTI0JTdCcGVyY2VudGFnZS50b0ZpeGVkKDIpJTdEJTI1JTYwJTdEKSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRSUwQSUyMCUyMCklM0IlMEElN0Q=",highlighted:`<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">Progress</span>(<span class="hljs-params">{ text, percentage }</span>) {
  percentage = percentage ?? <span class="hljs-number">0</span>;
  <span class="hljs-keyword">return</span> (
    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;progress-container&quot;</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&#x27;progress-bar&#x27;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> &#x27;<span class="hljs-attr">width</span>&#x27;<span class="hljs-attr">:</span> \`\${<span class="hljs-attr">percentage</span>}%\` }}&gt;</span>
        {text} ({\`\${percentage.toFixed(2)}%\`})
      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
  );
}`}}),Ks=new T({props:{code:"aW1wb3J0JTIwTGFuZ3VhZ2VTZWxlY3RvciUyMGZyb20lMjAnLiUyRmNvbXBvbmVudHMlMkZMYW5ndWFnZVNlbGVjdG9yJyUzQiUwQWltcG9ydCUyMFByb2dyZXNzJTIwZnJvbSUyMCcuJTJGY29tcG9uZW50cyUyRlByb2dyZXNzJyUzQg==",highlighted:`<span class="hljs-keyword">import</span> <span class="hljs-title class_">LanguageSelector</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/LanguageSelector&#x27;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Progress</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./components/Progress&#x27;</span>;`}}),qs=new T({props:{code:"ZnVuY3Rpb24lMjBBcHAoKSUyMCU3QiUwQSUwQSUyMCUyMCUyRiUyRiUyME1vZGVsJTIwbG9hZGluZyUwQSUyMCUyMGNvbnN0JTIwJTVCcmVhZHklMkMlMjBzZXRSZWFkeSU1RCUyMCUzRCUyMHVzZVN0YXRlKG51bGwpJTNCJTBBJTIwJTIwY29uc3QlMjAlNUJkaXNhYmxlZCUyQyUyMHNldERpc2FibGVkJTVEJTIwJTNEJTIwdXNlU3RhdGUoZmFsc2UpJTNCJTBBJTIwJTIwY29uc3QlMjAlNUJwcm9ncmVzc0l0ZW1zJTJDJTIwc2V0UHJvZ3Jlc3NJdGVtcyU1RCUyMCUzRCUyMHVzZVN0YXRlKCU1QiU1RCklM0IlMEElMEElMjAlMjAlMkYlMkYlMjBJbnB1dHMlMjBhbmQlMjBvdXRwdXRzJTBBJTIwJTIwY29uc3QlMjAlNUJpbnB1dCUyQyUyMHNldElucHV0JTVEJTIwJTNEJTIwdXNlU3RhdGUoJ0klMjBsb3ZlJTIwd2Fsa2luZyUyMG15JTIwZG9nLicpJTNCJTBBJTIwJTIwY29uc3QlMjAlNUJzb3VyY2VMYW5ndWFnZSUyQyUyMHNldFNvdXJjZUxhbmd1YWdlJTVEJTIwJTNEJTIwdXNlU3RhdGUoJ2VuZ19MYXRuJyklM0IlMEElMjAlMjBjb25zdCUyMCU1QnRhcmdldExhbmd1YWdlJTJDJTIwc2V0VGFyZ2V0TGFuZ3VhZ2UlNUQlMjAlM0QlMjB1c2VTdGF0ZSgnZnJhX0xhdG4nKSUzQiUwQSUyMCUyMGNvbnN0JTIwJTVCb3V0cHV0JTJDJTIwc2V0T3V0cHV0JTVEJTIwJTNEJTIwdXNlU3RhdGUoJycpJTNCJTBBJTBBJTIwJTIwJTJGJTJGJTIwcmVzdCUyMG9mJTIwdGhlJTIwY29kZS4uLiUwQSU3RA==",highlighted:`<span class="hljs-keyword">function</span> <span class="hljs-title function_">App</span>(<span class="hljs-params"></span>) {

  <span class="hljs-comment">// Model loading</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> [disabled, setDisabled] = <span class="hljs-title function_">useState</span>(<span class="hljs-literal">false</span>);
  <span class="hljs-keyword">const</span> [progressItems, setProgressItems] = <span class="hljs-title function_">useState</span>([]);

  <span class="hljs-comment">// Inputs and outputs</span>
  <span class="hljs-keyword">const</span> [input, setInput] = <span class="hljs-title function_">useState</span>(<span class="hljs-string">&#x27;I love walking my dog.&#x27;</span>);
  <span class="hljs-keyword">const</span> [sourceLanguage, setSourceLanguage] = <span class="hljs-title function_">useState</span>(<span class="hljs-string">&#x27;eng_Latn&#x27;</span>);
  <span class="hljs-keyword">const</span> [targetLanguage, setTargetLanguage] = <span class="hljs-title function_">useState</span>(<span class="hljs-string">&#x27;fra_Latn&#x27;</span>);
  <span class="hljs-keyword">const</span> [output, setOutput] = <span class="hljs-title function_">useState</span>(<span class="hljs-string">&#x27;&#x27;</span>);

  <span class="hljs-comment">// rest of the code...</span>
}`}}),sl=new T({props:{code:"cmV0dXJuJTIwKCUwQSUyMCUyMCUzQyUzRSUwQSUyMCUyMCUyMCUyMCUzQ2gxJTNFVHJhbnNmb3JtZXJzLmpzJTNDJTJGaDElM0UlMEElMjAlMjAlMjAlMjAlM0NoMiUzRU1MLXBvd2VyZWQlMjBtdWx0aWxpbmd1YWwlMjB0cmFuc2xhdGlvbiUyMGluJTIwUmVhY3QhJTNDJTJGaDIlM0UlMEElMEElMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzc05hbWUlM0QnY29udGFpbmVyJyUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzTmFtZSUzRCdsYW5ndWFnZS1jb250YWluZXInJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDTGFuZ3VhZ2VTZWxlY3RvciUyMHR5cGUlM0QlN0IlMjJTb3VyY2UlMjIlN0QlMjBkZWZhdWx0TGFuZ3VhZ2UlM0QlN0IlMjJlbmdfTGF0biUyMiU3RCUyMG9uQ2hhbmdlJTNEJTdCeCUyMCUzRCUzRSUyMHNldFNvdXJjZUxhbmd1YWdlKHgudGFyZ2V0LnZhbHVlKSU3RCUyMCUyRiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ0xhbmd1YWdlU2VsZWN0b3IlMjB0eXBlJTNEJTdCJTIyVGFyZ2V0JTIyJTdEJTIwZGVmYXVsdExhbmd1YWdlJTNEJTdCJTIyZnJhX0xhdG4lMjIlN0QlMjBvbkNoYW5nZSUzRCU3QnglMjAlM0QlM0UlMjBzZXRUYXJnZXRMYW5ndWFnZSh4LnRhcmdldC52YWx1ZSklN0QlMjAlMkYlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzc05hbWUlM0QndGV4dGJveC1jb250YWluZXInJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDdGV4dGFyZWElMjB2YWx1ZSUzRCU3QmlucHV0JTdEJTIwcm93cyUzRCU3QjMlN0QlMjBvbkNoYW5nZSUzRCU3QmUlMjAlM0QlM0UlMjBzZXRJbnB1dChlLnRhcmdldC52YWx1ZSklN0QlM0UlM0MlMkZ0ZXh0YXJlYSUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ3RleHRhcmVhJTIwdmFsdWUlM0QlN0JvdXRwdXQlN0QlMjByb3dzJTNEJTdCMyU3RCUyMHJlYWRPbmx5JTNFJTNDJTJGdGV4dGFyZWElM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMEElMjAlMjAlMjAlMjAlM0NidXR0b24lMjBkaXNhYmxlZCUzRCU3QmRpc2FibGVkJTdEJTIwb25DbGljayUzRCU3QnRyYW5zbGF0ZSU3RCUzRVRyYW5zbGF0ZSUzQyUyRmJ1dHRvbiUzRSUwQSUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzTmFtZSUzRCdwcm9ncmVzcy1iYXJzLWNvbnRhaW5lciclM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlN0JyZWFkeSUyMCUzRCUzRCUzRCUyMGZhbHNlJTIwJTI2JTI2JTIwKCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2xhYmVsJTNFTG9hZGluZyUyMG1vZGVscy4uLiUyMChvbmx5JTIwcnVuJTIwb25jZSklM0MlMkZsYWJlbCUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCklN0QlMEElMjAlMjAlMjAlMjAlMjAlMjAlN0Jwcm9ncmVzc0l0ZW1zLm1hcChkYXRhJTIwJTNEJTNFJTIwKCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGtleSUzRCU3QmRhdGEuZmlsZSU3RCUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ1Byb2dyZXNzJTIwdGV4dCUzRCU3QmRhdGEuZmlsZSU3RCUyMHBlcmNlbnRhZ2UlM0QlN0JkYXRhLnByb2dyZXNzJTdEJTIwJTJGJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwKSklN0QlMEElMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlM0MlMkYlM0UlMEEp",highlighted:`<span class="hljs-keyword">return</span> (
  <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h1</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>&gt;</span>ML-powered multilingual translation in React!<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&#x27;container&#x27;</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&#x27;language-container&#x27;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">LanguageSelector</span> <span class="hljs-attr">type</span>=<span class="hljs-string">{</span>&quot;<span class="hljs-attr">Source</span>&quot;} <span class="hljs-attr">defaultLanguage</span>=<span class="hljs-string">{</span>&quot;<span class="hljs-attr">eng_Latn</span>&quot;} <span class="hljs-attr">onChange</span>=<span class="hljs-string">{x</span> =&gt;</span> setSourceLanguage(x.target.value)} /&gt;
        <span class="hljs-tag">&lt;<span class="hljs-name">LanguageSelector</span> <span class="hljs-attr">type</span>=<span class="hljs-string">{</span>&quot;<span class="hljs-attr">Target</span>&quot;} <span class="hljs-attr">defaultLanguage</span>=<span class="hljs-string">{</span>&quot;<span class="hljs-attr">fra_Latn</span>&quot;} <span class="hljs-attr">onChange</span>=<span class="hljs-string">{x</span> =&gt;</span> setTargetLanguage(x.target.value)} /&gt;
      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&#x27;textbox-container&#x27;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{input}</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">{3}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{e</span> =&gt;</span> setInput(e.target.value)}&gt;<span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{output}</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">{3}</span> <span class="hljs-attr">readOnly</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">disabled</span>=<span class="hljs-string">{disabled}</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{translate}</span>&gt;</span>Translate<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&#x27;progress-bars-container&#x27;</span>&gt;</span>
      {ready === false &amp;&amp; (
        <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Loading models... (only run once)<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
      )}
      {progressItems.map(data =&gt; (
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{data.file}</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">Progress</span> <span class="hljs-attr">text</span>=<span class="hljs-string">{data.file}</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">{data.progress}</span> /&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
      ))}
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/&gt;</span></span>
)`}}),el=new T({props:{code:"JTNBcm9vdCUyMCU3QiUwQSUyMCUyMGZvbnQtZmFtaWx5JTNBJTIwSW50ZXIlMkMlMjBzeXN0ZW0tdWklMkMlMjBBdmVuaXIlMkMlMjBIZWx2ZXRpY2ElMkMlMjBBcmlhbCUyQyUyMHNhbnMtc2VyaWYlM0IlMEElMjAlMjBsaW5lLWhlaWdodCUzQSUyMDEuNSUzQiUwQSUyMCUyMGZvbnQtd2VpZ2h0JTNBJTIwNDAwJTNCJTBBJTIwJTIwY29sb3IlM0ElMjAlMjMyMTM1NDclM0IlMEElMjAlMjBiYWNrZ3JvdW5kLWNvbG9yJTNBJTIwJTIzZmZmZmZmJTNCJTBBJTBBJTIwJTIwZm9udC1zeW50aGVzaXMlM0ElMjBub25lJTNCJTBBJTIwJTIwdGV4dC1yZW5kZXJpbmclM0ElMjBvcHRpbWl6ZUxlZ2liaWxpdHklM0IlMEElMjAlMjAtd2Via2l0LWZvbnQtc21vb3RoaW5nJTNBJTIwYW50aWFsaWFzZWQlM0IlMEElMjAlMjAtbW96LW9zeC1mb250LXNtb290aGluZyUzQSUyMGdyYXlzY2FsZSUzQiUwQSUyMCUyMC13ZWJraXQtdGV4dC1zaXplLWFkanVzdCUzQSUyMDEwMCUyNSUzQiUwQSU3RCUwQSUwQWJvZHklMjAlN0IlMEElMjAlMjBtYXJnaW4lM0ElMjAwJTNCJTBBJTIwJTIwZGlzcGxheSUzQSUyMGZsZXglM0IlMEElMjAlMjBwbGFjZS1pdGVtcyUzQSUyMGNlbnRlciUzQiUwQSUyMCUyMG1pbi13aWR0aCUzQSUyMDMyMHB4JTNCJTBBJTIwJTIwbWluLWhlaWdodCUzQSUyMDEwMHZoJTNCJTBBJTdEJTBBJTBBaDElMjAlN0IlMEElMjAlMjBmb250LXNpemUlM0ElMjAzLjJlbSUzQiUwQSUyMCUyMGxpbmUtaGVpZ2h0JTNBJTIwMSUzQiUwQSU3RCUwQSUwQWgxJTJDJTBBaDIlMjAlN0IlMEElMjAlMjBtYXJnaW4lM0ElMjA4cHglM0IlMEElN0QlMEElMEFzZWxlY3QlMjAlN0IlMEElMjAlMjBwYWRkaW5nJTNBJTIwMC4zZW0lM0IlMEElMjAlMjBjdXJzb3IlM0ElMjBwb2ludGVyJTNCJTBBJTdEJTBBJTBBdGV4dGFyZWElMjAlN0IlMEElMjAlMjBwYWRkaW5nJTNBJTIwMC42ZW0lM0IlMEElN0QlMEElMEFidXR0b24lMjAlN0IlMEElMjAlMjBwYWRkaW5nJTNBJTIwMC42ZW0lMjAxLjJlbSUzQiUwQSUyMCUyMGN1cnNvciUzQSUyMHBvaW50ZXIlM0IlMEElMjAlMjBmb250LXdlaWdodCUzQSUyMDUwMCUzQiUwQSU3RCUwQSUwQWJ1dHRvbiU1QmRpc2FibGVkJTVEJTIwJTdCJTBBJTIwJTIwY3Vyc29yJTNBJTIwbm90LWFsbG93ZWQlM0IlMEElN0QlMEElMEFzZWxlY3QlMkMlMEF0ZXh0YXJlYSUyQyUwQWJ1dHRvbiUyMCU3QiUwQSUyMCUyMGJvcmRlci1yYWRpdXMlM0ElMjA4cHglM0IlMEElMjAlMjBib3JkZXIlM0ElMjAxcHglMjBzb2xpZCUyMHRyYW5zcGFyZW50JTNCJTBBJTIwJTIwZm9udC1zaXplJTNBJTIwMWVtJTNCJTBBJTIwJTIwZm9udC1mYW1pbHklM0ElMjBpbmhlcml0JTNCJTBBJTIwJTIwYmFja2dyb3VuZC1jb2xvciUzQSUyMCUyM2Y5ZjlmOSUzQiUwQSUyMCUyMHRyYW5zaXRpb24lM0ElMjBib3JkZXItY29sb3IlMjAwLjI1cyUzQiUwQSU3RCUwQSUwQXNlbGVjdCUzQWhvdmVyJTJDJTBBdGV4dGFyZWElM0Fob3ZlciUyQyUwQWJ1dHRvbiUzQW5vdCglNUJkaXNhYmxlZCU1RCklM0Fob3ZlciUyMCU3QiUwQSUyMCUyMGJvcmRlci1jb2xvciUzQSUyMCUyMzY0NmNmZiUzQiUwQSU3RCUwQSUwQXNlbGVjdCUzQWZvY3VzJTJDJTBBc2VsZWN0JTNBZm9jdXMtdmlzaWJsZSUyQyUwQXRleHRhcmVhJTNBZm9jdXMlMkMlMEF0ZXh0YXJlYSUzQWZvY3VzLXZpc2libGUlMkMlMEFidXR0b24lM0Fmb2N1cyUyQyUwQWJ1dHRvbiUzQWZvY3VzLXZpc2libGUlMjAlN0IlMEElMjAlMjBvdXRsaW5lJTNBJTIwNHB4JTIwYXV0byUyMC13ZWJraXQtZm9jdXMtcmluZy1jb2xvciUzQiUwQSU3RA==",highlighted:`<span class="hljs-selector-pseudo">:root</span> {
  <span class="hljs-attribute">font-family</span>: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.5</span>;
  <span class="hljs-attribute">font-weight</span>: <span class="hljs-number">400</span>;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#213547</span>;
  <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ffffff</span>;

  <span class="hljs-attribute">font-synthesis</span>: none;
  <span class="hljs-attribute">text-rendering</span>: optimizeLegibility;
  -webkit-<span class="hljs-attribute">font-smoothing</span>: antialiased;
  -moz-osx-<span class="hljs-attribute">font-smoothing</span>: grayscale;
  -webkit-text-size-adjust: <span class="hljs-number">100%</span>;
}

<span class="hljs-selector-tag">body</span> {
  <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">display</span>: flex;
  place-items: center;
  <span class="hljs-attribute">min-width</span>: <span class="hljs-number">320px</span>;
  <span class="hljs-attribute">min-height</span>: <span class="hljs-number">100vh</span>;
}

<span class="hljs-selector-tag">h1</span> {
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">3.2em</span>;
  <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1</span>;
}

<span class="hljs-selector-tag">h1</span>,
<span class="hljs-selector-tag">h2</span> {
  <span class="hljs-attribute">margin</span>: <span class="hljs-number">8px</span>;
}

select {
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">0.3em</span>;
  <span class="hljs-attribute">cursor</span>: pointer;
}

<span class="hljs-selector-tag">textarea</span> {
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">0.6em</span>;
}

<span class="hljs-selector-tag">button</span> {
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">0.6em</span> <span class="hljs-number">1.2em</span>;
  <span class="hljs-attribute">cursor</span>: pointer;
  <span class="hljs-attribute">font-weight</span>: <span class="hljs-number">500</span>;
}

<span class="hljs-selector-tag">button</span><span class="hljs-selector-attr">[disabled]</span> {
  <span class="hljs-attribute">cursor</span>: not-allowed;
}

select,
<span class="hljs-selector-tag">textarea</span>,
<span class="hljs-selector-tag">button</span> {
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">8px</span>;
  <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid transparent;
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1em</span>;
  <span class="hljs-attribute">font-family</span>: inherit;
  <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f9f9f9</span>;
  <span class="hljs-attribute">transition</span>: border-color <span class="hljs-number">0.25s</span>;
}

select<span class="hljs-selector-pseudo">:hover</span>,
<span class="hljs-selector-tag">textarea</span><span class="hljs-selector-pseudo">:hover</span>,
<span class="hljs-selector-tag">button</span><span class="hljs-selector-pseudo">:not</span>(<span class="hljs-selector-attr">[disabled]</span>)<span class="hljs-selector-pseudo">:hover</span> {
  <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#646cff</span>;
}

select<span class="hljs-selector-pseudo">:focus</span>,
select<span class="hljs-selector-pseudo">:focus</span>-visible,
<span class="hljs-selector-tag">textarea</span><span class="hljs-selector-pseudo">:focus</span>,
<span class="hljs-selector-tag">textarea</span><span class="hljs-selector-pseudo">:focus</span>-visible,
<span class="hljs-selector-tag">button</span><span class="hljs-selector-pseudo">:focus</span>,
<span class="hljs-selector-tag">button</span><span class="hljs-selector-pseudo">:focus</span>-visible {
  <span class="hljs-attribute">outline</span>: <span class="hljs-number">4px</span> auto -webkit-focus-ring-color;
}`}}),pl=new T({props:{code:"JTIzcm9vdCUyMCU3QiUwQSUyMCUyMG1heC13aWR0aCUzQSUyMDEyODBweCUzQiUwQSUyMCUyMG1hcmdpbiUzQSUyMDAlMjBhdXRvJTNCJTBBJTIwJTIwcGFkZGluZyUzQSUyMDJyZW0lM0IlMEElMjAlMjB0ZXh0LWFsaWduJTNBJTIwY2VudGVyJTNCJTBBJTdEJTBBJTBBLmxhbmd1YWdlLWNvbnRhaW5lciUyMCU3QiUwQSUyMCUyMGRpc3BsYXklM0ElMjBmbGV4JTNCJTBBJTIwJTIwZ2FwJTNBJTIwMjBweCUzQiUwQSU3RCUwQSUwQS50ZXh0Ym94LWNvbnRhaW5lciUyMCU3QiUwQSUyMCUyMGRpc3BsYXklM0ElMjBmbGV4JTNCJTBBJTIwJTIwanVzdGlmeS1jb250ZW50JTNBJTIwY2VudGVyJTNCJTBBJTIwJTIwZ2FwJTNBJTIwMjBweCUzQiUwQSUyMCUyMHdpZHRoJTNBJTIwODAwcHglM0IlMEElN0QlMEElMEEudGV4dGJveC1jb250YWluZXIlM0V0ZXh0YXJlYSUyQyUyMC5sYW5ndWFnZS1zZWxlY3RvciUyMCU3QiUwQSUyMCUyMHdpZHRoJTNBJTIwNTAlMjUlM0IlMEElN0QlMEElMEEubGFuZ3VhZ2Utc2VsZWN0b3IlM0VzZWxlY3QlMjAlN0IlMEElMjAlMjB3aWR0aCUzQSUyMDE1MHB4JTNCJTBBJTdEJTBBJTBBLnByb2dyZXNzLWNvbnRhaW5lciUyMCU3QiUwQSUyMCUyMHBvc2l0aW9uJTNBJTIwcmVsYXRpdmUlM0IlMEElMjAlMjBmb250LXNpemUlM0ElMjAxNHB4JTNCJTBBJTIwJTIwY29sb3IlM0ElMjB3aGl0ZSUzQiUwQSUyMCUyMGJhY2tncm91bmQtY29sb3IlM0ElMjAlMjNlOWVjZWYlM0IlMEElMjAlMjBib3JkZXIlM0ElMjBzb2xpZCUyMDFweCUzQiUwQSUyMCUyMGJvcmRlci1yYWRpdXMlM0ElMjA4cHglM0IlMEElMjAlMjB0ZXh0LWFsaWduJTNBJTIwbGVmdCUzQiUwQSUyMCUyMG92ZXJmbG93JTNBJTIwaGlkZGVuJTNCJTBBJTdEJTBBJTBBLnByb2dyZXNzLWJhciUyMCU3QiUwQSUyMCUyMHBhZGRpbmclM0ElMjAwJTIwNHB4JTNCJTBBJTIwJTIwei1pbmRleCUzQSUyMDAlM0IlMEElMjAlMjB0b3AlM0ElMjAwJTNCJTBBJTIwJTIwd2lkdGglM0ElMjAxJTI1JTNCJTBBJTIwJTIwaGVpZ2h0JTNBJTIwMTAwJTI1JTNCJTBBJTIwJTIwb3ZlcmZsb3clM0ElMjBoaWRkZW4lM0IlMEElMjAlMjBiYWNrZ3JvdW5kLWNvbG9yJTNBJTIwJTIzMDA3YmZmJTNCJTBBJTIwJTIwd2hpdGUtc3BhY2UlM0ElMjBub3dyYXAlM0IlMEElN0QlMEElMEEucHJvZ3Jlc3MtdGV4dCUyMCU3QiUwQSUyMCUyMHotaW5kZXglM0ElMjAyJTNCJTBBJTdEJTBBJTBBLnNlbGVjdG9yLWNvbnRhaW5lciUyMCU3QiUwQSUyMCUyMGRpc3BsYXklM0ElMjBmbGV4JTNCJTBBJTIwJTIwZ2FwJTNBJTIwMjBweCUzQiUwQSU3RCUwQSUwQS5wcm9ncmVzcy1iYXJzLWNvbnRhaW5lciUyMCU3QiUwQSUyMCUyMHBhZGRpbmclM0ElMjA4cHglM0IlMEElMjAlMjBoZWlnaHQlM0ElMjAxNDBweCUzQiUwQSU3RCUwQSUwQS5jb250YWluZXIlMjAlN0IlMEElMjAlMjBtYXJnaW4lM0ElMjAyNXB4JTNCJTBBJTIwJTIwZGlzcGxheSUzQSUyMGZsZXglM0IlMEElMjAlMjBmbGV4LWRpcmVjdGlvbiUzQSUyMGNvbHVtbiUzQiUwQSUyMCUyMGdhcCUzQSUyMDEwcHglM0IlMEElN0Q=",highlighted:`<span class="hljs-selector-id">#root</span> {
  <span class="hljs-attribute">max-width</span>: <span class="hljs-number">1280px</span>;
  <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto;
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">2rem</span>;
  <span class="hljs-attribute">text-align</span>: center;
}

<span class="hljs-selector-class">.language-container</span> {
  <span class="hljs-attribute">display</span>: flex;
  <span class="hljs-attribute">gap</span>: <span class="hljs-number">20px</span>;
}

<span class="hljs-selector-class">.textbox-container</span> {
  <span class="hljs-attribute">display</span>: flex;
  <span class="hljs-attribute">justify-content</span>: center;
  <span class="hljs-attribute">gap</span>: <span class="hljs-number">20px</span>;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">800px</span>;
}

<span class="hljs-selector-class">.textbox-container</span>&gt;<span class="hljs-selector-tag">textarea</span>, <span class="hljs-selector-class">.language-selector</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">50%</span>;
}

<span class="hljs-selector-class">.language-selector</span>&gt;select {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">150px</span>;
}

<span class="hljs-selector-class">.progress-container</span> {
  <span class="hljs-attribute">position</span>: relative;
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>;
  <span class="hljs-attribute">color</span>: white;
  <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#e9ecef</span>;
  <span class="hljs-attribute">border</span>: solid <span class="hljs-number">1px</span>;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">8px</span>;
  <span class="hljs-attribute">text-align</span>: left;
  <span class="hljs-attribute">overflow</span>: hidden;
}

<span class="hljs-selector-class">.progress-bar</span> {
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">4px</span>;
  <span class="hljs-attribute">z-index</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">1%</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
  <span class="hljs-attribute">overflow</span>: hidden;
  <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#007bff</span>;
  <span class="hljs-attribute">white-space</span>: nowrap;
}

<span class="hljs-selector-class">.progress-text</span> {
  <span class="hljs-attribute">z-index</span>: <span class="hljs-number">2</span>;
}

<span class="hljs-selector-class">.selector-container</span> {
  <span class="hljs-attribute">display</span>: flex;
  <span class="hljs-attribute">gap</span>: <span class="hljs-number">20px</span>;
}

<span class="hljs-selector-class">.progress-bars-container</span> {
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">8px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">140px</span>;
}

<span class="hljs-selector-class">.container</span> {
  <span class="hljs-attribute">margin</span>: <span class="hljs-number">25px</span>;
  <span class="hljs-attribute">display</span>: flex;
  <span class="hljs-attribute">flex-direction</span>: column;
  <span class="hljs-attribute">gap</span>: <span class="hljs-number">10px</span>;
}`}}),rl=new wl({}),ol=new T({props:{code:"Y29uc3QlMjB0cmFuc2xhdGUlMjAlM0QlMjAoKSUyMCUzRCUzRSUyMCU3QiUwQSUyMCUyMHNldERpc2FibGVkKHRydWUpJTNCJTBBJTIwJTIwd29ya2VyLmN1cnJlbnQucG9zdE1lc3NhZ2UoJTdCJTBBJTIwJTIwJTIwJTIwdGV4dCUzQSUyMGlucHV0JTJDJTBBJTIwJTIwJTIwJTIwc3JjX2xhbmclM0ElMjBzb3VyY2VMYW5ndWFnZSUyQyUwQSUyMCUyMCUyMCUyMHRndF9sYW5nJTNBJTIwdGFyZ2V0TGFuZ3VhZ2UlMkMlMEElMjAlMjAlN0QpJTNCJTBBJTdE",highlighted:`<span class="hljs-keyword">const</span> <span class="hljs-title function_">translate</span> = (<span class="hljs-params"></span>) =&gt; {
  <span class="hljs-title function_">setDisabled</span>(<span class="hljs-literal">true</span>);
  worker.<span class="hljs-property">current</span>.<span class="hljs-title function_">postMessage</span>({
    <span class="hljs-attr">text</span>: input,
    <span class="hljs-attr">src_lang</span>: sourceLanguage,
    <span class="hljs-attr">tgt_lang</span>: targetLanguage,
  });
}`}}),cl=new T({props:{code:"JTJGJTJGJTIwTGlzdGVuJTIwZm9yJTIwbWVzc2FnZXMlMjBmcm9tJTIwdGhlJTIwbWFpbiUyMHRocmVhZCUwQXNlbGYuYWRkRXZlbnRMaXN0ZW5lcignbWVzc2FnZSclMkMlMjBhc3luYyUyMChldmVudCklMjAlM0QlM0UlMjAlN0IlMEElMjAlMjAlMkYlMkYlMjBSZXRyaWV2ZSUyMHRoZSUyMHRyYW5zbGF0aW9uJTIwcGlwZWxpbmUuJTIwV2hlbiUyMGNhbGxlZCUyMGZvciUyMHRoZSUyMGZpcnN0JTIwdGltZSUyQyUwQSUyMCUyMCUyRiUyRiUyMHRoaXMlMjB3aWxsJTIwbG9hZCUyMHRoZSUyMHBpcGVsaW5lJTIwYW5kJTIwc2F2ZSUyMGl0JTIwZm9yJTIwZnV0dXJlJTIwdXNlLiUwQSUyMCUyMGxldCUyMHRyYW5zbGF0b3IlMjAlM0QlMjBhd2FpdCUyME15VHJhbnNsYXRpb25QaXBlbGluZS5nZXRJbnN0YW5jZSh4JTIwJTNEJTNFJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwV2UlMjBhbHNvJTIwYWRkJTIwYSUyMHByb2dyZXNzJTIwY2FsbGJhY2slMjB0byUyMHRoZSUyMHBpcGVsaW5lJTIwc28lMjB0aGF0JTIwd2UlMjBjYW4lMEElMjAlMjAlMjAlMjAlMjAlMjAlMkYlMkYlMjB0cmFjayUyMG1vZGVsJTIwbG9hZGluZy4lMEElMjAlMjAlMjAlMjAlMjAlMjBzZWxmLnBvc3RNZXNzYWdlKHgpJTNCJTBBJTIwJTIwJTdEKSUzQiUwQSUwQSUyMCUyMCUyRiUyRiUyMEFjdHVhbGx5JTIwcGVyZm9ybSUyMHRoZSUyMHRyYW5zbGF0aW9uJTBBJTIwJTIwbGV0JTIwb3V0cHV0JTIwJTNEJTIwYXdhaXQlMjB0cmFuc2xhdG9yKGV2ZW50LmRhdGEudGV4dCUyQyUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMHRndF9sYW5nJTNBJTIwZXZlbnQuZGF0YS50Z3RfbGFuZyUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMHNyY19sYW5nJTNBJTIwZXZlbnQuZGF0YS5zcmNfbGFuZyUyQyUwQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyRiUyRiUyMEFsbG93cyUyMGZvciUyMHBhcnRpYWwlMjBvdXRwdXQlMEElMjAlMjAlMjAlMjAlMjAlMjBjYWxsYmFja19mdW5jdGlvbiUzQSUyMHglMjAlM0QlM0UlMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBzZWxmLnBvc3RNZXNzYWdlKCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHN0YXR1cyUzQSUyMCd1cGRhdGUnJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwb3V0cHV0JTNBJTIwdHJhbnNsYXRvci50b2tlbml6ZXIuZGVjb2RlKHglNUIwJTVELm91dHB1dF90b2tlbl9pZHMlMkMlMjAlN0IlMjBza2lwX3NwZWNpYWxfdG9rZW5zJTNBJTIwdHJ1ZSUyMCU3RCklMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0QpJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTdEKSUzQiUwQSUwQSUyMCUyMCUyRiUyRiUyMFNlbmQlMjB0aGUlMjBvdXRwdXQlMjBiYWNrJTIwdG8lMjB0aGUlMjBtYWluJTIwdGhyZWFkJTBBJTIwJTIwc2VsZi5wb3N0TWVzc2FnZSglN0IlMEElMjAlMjAlMjAlMjAlMjAlMjBzdGF0dXMlM0ElMjAnY29tcGxldGUnJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwb3V0cHV0JTNBJTIwb3V0cHV0JTJDJTBBJTIwJTIwJTdEKSUzQiUwQSU3RCklM0I=",highlighted:`<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 translation 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> translator = <span class="hljs-keyword">await</span> <span class="hljs-title class_">MyTranslationPipeline</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 translation</span>
  <span class="hljs-keyword">let</span> output = <span class="hljs-keyword">await</span> <span class="hljs-title function_">translator</span>(event.<span class="hljs-property">data</span>.<span class="hljs-property">text</span>, {
      <span class="hljs-attr">tgt_lang</span>: event.<span class="hljs-property">data</span>.<span class="hljs-property">tgt_lang</span>,
      <span class="hljs-attr">src_lang</span>: event.<span class="hljs-property">data</span>.<span class="hljs-property">src_lang</span>,

      <span class="hljs-comment">// Allows for partial output</span>
      <span class="hljs-attr">callback_function</span>: <span class="hljs-function"><span class="hljs-params">x</span> =&gt;</span> {
          self.<span class="hljs-title function_">postMessage</span>({
              <span class="hljs-attr">status</span>: <span class="hljs-string">&#x27;update&#x27;</span>,
              <span class="hljs-attr">output</span>: translator.<span class="hljs-property">tokenizer</span>.<span class="hljs-title function_">decode</span>(x[<span class="hljs-number">0</span>].<span class="hljs-property">output_token_ids</span>, { <span class="hljs-attr">skip_special_tokens</span>: <span class="hljs-literal">true</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,
  });
});`}}),il=new T({props:{code:"Y29uc3QlMjBvbk1lc3NhZ2VSZWNlaXZlZCUyMCUzRCUyMChlKSUyMCUzRCUzRSUyMCU3QiUwQSUyMCUyMHN3aXRjaCUyMChlLmRhdGEuc3RhdHVzKSUyMCU3QiUwQSUyMCUyMCUyMCUyMGNhc2UlMjAnaW5pdGlhdGUnJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwTW9kZWwlMjBmaWxlJTIwc3RhcnQlMjBsb2FkJTNBJTIwYWRkJTIwYSUyMG5ldyUyMHByb2dyZXNzJTIwaXRlbSUyMHRvJTIwdGhlJTIwbGlzdC4lMEElMjAlMjAlMjAlMjAlMjAlMjBzZXRSZWFkeShmYWxzZSklM0IlMEElMjAlMjAlMjAlMjAlMjAlMjBzZXRQcm9ncmVzc0l0ZW1zKHByZXYlMjAlM0QlM0UlMjAlNUIuLi5wcmV2JTJDJTIwZS5kYXRhJTVEKSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMGJyZWFrJTNCJTBBJTBBJTIwJTIwJTIwJTIwY2FzZSUyMCdwcm9ncmVzcyclM0ElMEElMjAlMjAlMjAlMjAlMjAlMjAlMkYlMkYlMjBNb2RlbCUyMGZpbGUlMjBwcm9ncmVzcyUzQSUyMHVwZGF0ZSUyMG9uZSUyMG9mJTIwdGhlJTIwcHJvZ3Jlc3MlMjBpdGVtcy4lMEElMjAlMjAlMjAlMjAlMjAlMjBzZXRQcm9ncmVzc0l0ZW1zKCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHByZXYlMjAlM0QlM0UlMjBwcmV2Lm1hcChpdGVtJTIwJTNEJTNFJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwaWYlMjAoaXRlbS5maWxlJTIwJTNEJTNEJTNEJTIwZS5kYXRhLmZpbGUpJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTdCJTIwLi4uaXRlbSUyQyUyMHByb2dyZXNzJTNBJTIwZS5kYXRhLnByb2dyZXNzJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcmV0dXJuJTIwaXRlbSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCklMEElMjAlMjAlMjAlMjAlMjAlMjApJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwYnJlYWslM0IlMEElMEElMjAlMjAlMjAlMjBjYXNlJTIwJ2RvbmUnJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwTW9kZWwlMjBmaWxlJTIwbG9hZGVkJTNBJTIwcmVtb3ZlJTIwdGhlJTIwcHJvZ3Jlc3MlMjBpdGVtJTIwZnJvbSUyMHRoZSUyMGxpc3QuJTBBJTIwJTIwJTIwJTIwJTIwJTIwc2V0UHJvZ3Jlc3NJdGVtcyglMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBwcmV2JTIwJTNEJTNFJTIwcHJldi5maWx0ZXIoaXRlbSUyMCUzRCUzRSUyMGl0ZW0uZmlsZSUyMCElM0QlM0QlMjBlLmRhdGEuZmlsZSklMEElMjAlMjAlMjAlMjAlMjAlMjApJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwYnJlYWslM0IlMEElMEElMjAlMjAlMjAlMjBjYXNlJTIwJ3JlYWR5JyUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyRiUyRiUyMFBpcGVsaW5lJTIwcmVhZHklM0ElMjB0aGUlMjB3b3JrZXIlMjBpcyUyMHJlYWR5JTIwdG8lMjBhY2NlcHQlMjBtZXNzYWdlcy4lMEElMjAlMjAlMjAlMjAlMjAlMjBzZXRSZWFkeSh0cnVlKSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMGJyZWFrJTNCJTBBJTBBJTIwJTIwJTIwJTIwY2FzZSUyMCd1cGRhdGUnJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwR2VuZXJhdGlvbiUyMHVwZGF0ZSUzQSUyMHVwZGF0ZSUyMHRoZSUyMG91dHB1dCUyMHRleHQuJTBBJTIwJTIwJTIwJTIwJTIwJTIwc2V0T3V0cHV0KGUuZGF0YS5vdXRwdXQpJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwYnJlYWslM0IlMEElMEElMjAlMjAlMjAlMjBjYXNlJTIwJ2NvbXBsZXRlJyUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyRiUyRiUyMEdlbmVyYXRpb24lMjBjb21wbGV0ZSUzQSUyMHJlLWVuYWJsZSUyMHRoZSUyMCUyMlRyYW5zbGF0ZSUyMiUyMGJ1dHRvbiUwQSUyMCUyMCUyMCUyMCUyMCUyMHNldERpc2FibGVkKGZhbHNlKSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMGJyZWFrJTNCJTBBJTIwJTIwJTdEJTBBJTdEJTNC",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-comment">// Model file start load: add a new progress item to the list.</span>
      <span class="hljs-title function_">setReady</span>(<span class="hljs-literal">false</span>);
      <span class="hljs-title function_">setProgressItems</span>(<span class="hljs-function"><span class="hljs-params">prev</span> =&gt;</span> [...prev, e.<span class="hljs-property">data</span>]);
      <span class="hljs-keyword">break</span>;

    <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;progress&#x27;</span>:
      <span class="hljs-comment">// Model file progress: update one of the progress items.</span>
      <span class="hljs-title function_">setProgressItems</span>(
        <span class="hljs-function"><span class="hljs-params">prev</span> =&gt;</span> prev.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> {
          <span class="hljs-keyword">if</span> (item.<span class="hljs-property">file</span> === e.<span class="hljs-property">data</span>.<span class="hljs-property">file</span>) {
            <span class="hljs-keyword">return</span> { ...item, <span class="hljs-attr">progress</span>: e.<span class="hljs-property">data</span>.<span class="hljs-property">progress</span> }
          }
          <span class="hljs-keyword">return</span> item;
        })
      );
      <span class="hljs-keyword">break</span>;

    <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;done&#x27;</span>:
      <span class="hljs-comment">// Model file loaded: remove the progress item from the list.</span>
      <span class="hljs-title function_">setProgressItems</span>(
        <span class="hljs-function"><span class="hljs-params">prev</span> =&gt;</span> prev.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item.<span class="hljs-property">file</span> !== e.<span class="hljs-property">data</span>.<span class="hljs-property">file</span>)
      );
      <span class="hljs-keyword">break</span>;

    <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;ready&#x27;</span>:
      <span class="hljs-comment">// Pipeline ready: the worker is ready to accept messages.</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;update&#x27;</span>:
      <span class="hljs-comment">// Generation update: update the output text.</span>
      <span class="hljs-title function_">setOutput</span>(e.<span class="hljs-property">data</span>.<span class="hljs-property">output</span>);
      <span class="hljs-keyword">break</span>;

    <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;complete&#x27;</span>:
      <span class="hljs-comment">// Generation complete: re-enable the &quot;Translate&quot; button</span>
      <span class="hljs-title function_">setDisabled</span>(<span class="hljs-literal">false</span>);
      <span class="hljs-keyword">break</span>;
  }
};`}}),Ml=new wl({}),{c(){u=n("meta"),O=i(),m=n("h1"),E=n("a"),_=n("span"),d(b.$$.fragment),N=i(),K=n("span"),ut=e("Building a React application"),La=i(),Jl=n("p"),Tt=e("In this tutorial, we\u2019ll be building a simple React application that performs multilingual translation using Transformers.js! The final product will look something like this:"),Da=i(),ul=n("p"),Tl=n("img"),Pa=i(),ml=n("p"),mt=e("Useful links:"),Oa=i(),q=n("ul"),kl=n("li"),Is=n("a"),ft=e("Demo site"),It=i(),Rl=n("li"),Cs=n("a"),Ct=e("Source code"),Ka=i(),X=n("h2"),ss=n("a"),Wl=n("span"),d(bs.$$.fragment),bt=i(),Vl=n("span"),gt=e("Prerequisites"),qa=i(),ls=n("ul"),fl=n("li"),gs=n("a"),Et=e("Node.js"),Bt=e(" version 14.18+ or 16+"),vt=i(),Il=n("li"),Es=n("a"),Zt=e("npm"),At=e(" version 7+"),se=i(),$=n("h2"),as=n("a"),zl=n("span"),d(Bs.$$.fragment),Nt=i(),Yl=n("span"),Qt=e("Step 1: Initialise the project"),le=i(),es=n("p"),Gt=e("For this tutorial, we will use "),vs=n("a"),St=e("Vite"),kt=e(" to initialise our project. Vite is a build tool that allows us to quickly set up a React application with minimal configuration. Run the following command in your terminal:"),ae=i(),d(Zs.$$.fragment),ee=i(),B=n("p"),Rt=e("If prompted to install "),xl=n("code"),Wt=e("create-vite"),Vt=e(", type "),_l=n("kbd"),zt=e("y"),Yt=e(" and press "),Xl=n("kbd"),xt=e("Enter"),_t=e("."),te=i(),Cl=n("p"),Xt=e("Next, enter the project directory and install the necessary development dependencies:"),ne=i(),d(As.$$.fragment),pe=i(),bl=n("p"),$t=e("To test that our application is working, we can run the following command:"),re=i(),d(Ns.$$.fragment),oe=i(),v=n("p"),Ft=e("Visiting the URL shown in the terminal (e.g., "),Qs=n("a"),Ht=e("http://localhost:5173/"),Lt=e(`) should show the default \u201CReact + Vite\u201D landing page.
You can stop the development server by pressing `),$l=n("kbd"),Dt=e("Ctrl"),Pt=e(" + "),Fl=n("kbd"),Ot=e("C"),Kt=e(" in the terminal."),ce=i(),F=n("h2"),ts=n("a"),Hl=n("span"),d(Gs.$$.fragment),qt=i(),Ll=n("span"),sn=e("Step 2: Install and configure Transformers.js"),ie=i(),ns=n("p"),ln=e("Now we get to the fun part: adding machine learning to our application! First, install Transformers.js from "),Ss=n("a"),an=e("NPM"),en=e(" with the following command:"),Me=i(),d(ks.$$.fragment),he=i(),ps=n("p"),tn=e("For this application, we will use the "),Rs=n("a"),nn=e("Xenova/nllb-200-distilled-600M"),pn=e(" model, which can perform multilingual translation among 200 languages. Before we start, there are 2 things we need to take note of:"),de=i(),rs=n("ol"),Dl=n("li"),rn=e("ML inference can be quite computationally intensive, so it\u2019s better to load and run the models in a separate thread from the main (UI) thread."),on=i(),Pl=n("li"),cn=e("Since the model is quite large (>1 GB), we don\u2019t want to download it until the user clicks the \u201CTranslate\u201D button."),je=i(),Q=n("p"),Mn=e("We can achieve both of these goals by using a "),Ws=n("a"),hn=e("Web Worker"),dn=e(" and some "),Vs=n("a"),jn=e("React hooks"),yn=e("."),ye=i(),os=n("ol"),zs=n("li"),f=n("p"),Un=e("Create a file called "),Ol=n("code"),wn=e("worker.js"),Jn=e(" in the "),Kl=n("code"),un=e("src"),Tn=e(" directory. This script will do all the heavy-lifing for us, including loading and running of the translation pipeline. To ensure the model is only loaded once, we will create the "),ql=n("code"),mn=e("MyTranslationPipeline"),fn=e(" class which use the "),Ys=n("a"),In=e("singleton pattern"),Cn=e(" to lazily create a single instance of the pipeline when "),sa=n("code"),bn=e("getInstance"),gn=e(" is first called, and use this pipeline for all subsequent calls:"),En=i(),d(xs.$$.fragment),Bn=i(),_s=n("li"),g=n("p"),vn=e("Modify "),la=n("code"),Zn=e("App.jsx"),An=e(" in the "),aa=n("code"),Nn=e("src"),Qn=e(" directory. This file is automatically created when initializing our React project, and will contain some boilerplate code. Inside the "),ea=n("code"),Gn=e("App"),Sn=e(" function, let\u2019s create the web worker and store a reference to it using the "),ta=n("code"),kn=e("useRef"),Rn=e(" hook:"),Wn=i(),d(Xs.$$.fragment),Ue=i(),H=n("h2"),cs=n("a"),na=n("span"),d($s.$$.fragment),Vn=i(),pa=n("span"),zn=e("Step 3: Design the user interface"),we=i(),d(is.$$.fragment),Je=i(),G=n("p"),Yn=e("First, let\u2019s define our components. Create a folder called "),ra=n("code"),xn=e("components"),_n=e(" in the "),oa=n("code"),Xn=e("src"),$n=e(" directory, and create the following files:"),ue=i(),gl=n("ol"),Fs=n("li"),Ms=n("p"),ca=n("code"),Fn=e("LanguageSelector.jsx"),Hn=e(": This component will allow the user to select the input and output languages. Check out the full list of languages "),Hs=n("a"),Ln=e("here"),Dn=e("."),Pn=i(),d(Ls.$$.fragment),Te=i(),Ds=n("ol"),Ps=n("li"),ia=n("code"),On=e("Progress.jsx"),Kn=e(`: This component will display the progress for downloading each model file.
	`),d(Os.$$.fragment),me=i(),hs=n("p"),qn=e("We can now use these components in "),Ma=n("code"),sp=e("App.jsx"),lp=e(" by adding these imports to the top of the file:"),fe=i(),d(Ks.$$.fragment),Ie=i(),S=n("p"),ap=e("Let\u2019s also add some state variables to keep track of a few things in our application, like model loading, languages, input text, and output text. Add the following code to the beginning of the "),ha=n("code"),ep=e("App"),tp=e(" function in "),da=n("code"),np=e("src/App.jsx"),pp=e(":"),Ce=i(),d(qs.$$.fragment),be=i(),I=n("p"),rp=e("Next, we can add our custom components to the main "),ja=n("code"),op=e("App"),cp=e(" component. We will also add two "),ya=n("code"),ip=e("textarea"),Mp=e(" elements for input and output text, and a "),Ua=n("code"),hp=e("button"),dp=e(" to trigger the translation.  Modify the "),wa=n("code"),jp=e("return"),yp=e(" statement to look like this:"),ge=i(),d(sl.$$.fragment),Ee=i(),ds=n("p"),Up=e("Don\u2019t worry about the "),Ja=n("code"),wp=e("translate"),Jp=e(" function for now. We will define it in the next section."),Be=i(),js=n("p"),up=e("Finally, we can add some CSS to make our app look a little nicer. Modify the following files in the "),ua=n("code"),Tp=e("src"),mp=e(" directory:"),ve=i(),ys=n("ol"),ll=n("li"),El=n("p"),Ta=n("code"),fp=e("index.css"),Ip=e(":"),Cp=i(),al=n("details"),ma=n("summary"),bp=e("View code"),gp=i(),d(el.$$.fragment),Ep=i(),tl=n("li"),fa=n("p"),Ia=n("code"),Bp=e("App.css"),vp=i(),nl=n("details"),Ca=n("summary"),Zp=e("View code"),Ap=i(),d(pl.$$.fragment),Ze=i(),L=n("h2"),Us=n("a"),ba=n("span"),d(rl.$$.fragment),Np=i(),ga=n("span"),Qp=e("Step 4: Connecting everything together"),Ae=i(),Bl=n("p"),Gp=e("Now that we have a basic user interface set up, we can finally connect everything together."),Ne=i(),C=n("p"),Sp=e("First, let\u2019s define the "),Ea=n("code"),kp=e("translate"),Rp=e(" function, which will be called when the user clicks the "),Ba=n("code"),Wp=e("Translate"),Vp=e(" button. This sends a message (containing the input text, source language, and target language) to the worker thread for processing. We will also disable the button so the user doesn\u2019t click it multiple times. Add the following code just before the "),va=n("code"),zp=e("return"),Yp=e(" statement in the "),Za=n("code"),xp=e("App"),_p=e(" function:"),Qe=i(),d(ol.$$.fragment),Ge=i(),k=n("p"),Xp=e("Now, let\u2019s add an event listener in "),Aa=n("code"),$p=e("src/worker.js"),Fp=e(" to listen for messages from the main thread. We will send back messages (e.g., for model loading progress and text streaming) to the main thread with "),Na=n("code"),Hp=e("self.postMessage"),Lp=e("."),Se=i(),d(cl.$$.fragment),ke=i(),R=n("p"),Dp=e("Finally, let\u2019s fill in our "),Qa=n("code"),Pp=e("onMessageReceived"),Op=e(" function, which will update the application state in response to messages from the worker thread. Add the following code inside the "),Ga=n("code"),Kp=e("useEffect"),qp=e(" hook we defined earlier:"),Re=i(),d(il.$$.fragment),We=i(),ws=n("p"),sr=e("You can now run the application with "),Sa=n("code"),lr=e("npm run dev"),ar=e(" and perform multilingual translation directly in your browser!"),Ve=i(),D=n("h2"),Js=n("a"),ka=n("span"),d(Ml.$$.fragment),er=i(),Ra=n("span"),tr=e("(Optional) Step 5: Build and deploy"),ze=i(),W=n("p"),nr=e("To build your application, simply run "),Wa=n("code"),pr=e("npm run build"),rr=e(". This will bundle your application and output the static files to the "),Va=n("code"),or=e("dist"),cr=e(" folder."),Ye=i(),V=n("p"),ir=e("For this demo, we will deploy our application as a static "),hl=n("a"),Mr=e("Hugging Face Space"),hr=e(", but you can deploy it anywhere you like! If you haven\u2019t already, you can create a free Hugging Face account "),dl=n("a"),dr=e("here"),jr=e("."),xe=i(),us=n("ol"),jl=n("li"),yr=e("Visit "),yl=n("a"),Ur=e("https://huggingface.co/new-space"),wr=e(" and fill in the form. Remember to select \u201CStatic\u201D as the space type."),Jr=i(),A=n("li"),ur=e("Go to \u201CFiles\u201D \u2192 \u201CAdd file\u201D \u2192 \u201CUpload files\u201D. Drag the "),za=n("code"),Tr=e("index.html"),mr=e(" file and "),Ya=n("code"),fr=e("public/"),Ir=e(" folder from the "),xa=n("code"),Cr=e("dist"),br=e(" 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."),_e=i(),P=n("p"),_a=n("strong"),gr=e("That\u2019s it!"),Er=e(" Your application should now be live at "),Xa=n("code"),Br=e("https://huggingface.co/spaces/<your-username>/<your-space-name>"),vr=e("!"),this.h()},l(s){const o=bc('[data-svelte="svelte-1phssyn"]',document.head);u=p(o,"META",{name:!0,content:!0}),o.forEach(a),O=M(s),m=p(s,"H1",{class:!0});var Ul=r(m);E=p(Ul,"A",{id:!0,class:!0,href:!0});var Gr=r(E);_=p(Gr,"SPAN",{});var Sr=r(_);j(b.$$.fragment,Sr),Sr.forEach(a),Gr.forEach(a),N=M(Ul),K=p(Ul,"SPAN",{});var kr=r(K);ut=t(kr,"Building a React application"),kr.forEach(a),Ul.forEach(a),La=M(s),Jl=p(s,"P",{});var Rr=r(Jl);Tt=t(Rr,"In this tutorial, we\u2019ll be building a simple React application that performs multilingual translation using Transformers.js! The final product will look something like this:"),Rr.forEach(a),Da=M(s),ul=p(s,"P",{});var Wr=r(ul);Tl=p(Wr,"IMG",{src:!0,alt:!0}),Wr.forEach(a),Pa=M(s),ml=p(s,"P",{});var Vr=r(ml);mt=t(Vr,"Useful links:"),Vr.forEach(a),Oa=M(s),q=p(s,"UL",{});var $e=r(q);kl=p($e,"LI",{});var zr=r(kl);Is=p(zr,"A",{href:!0,rel:!0});var Yr=r(Is);ft=t(Yr,"Demo site"),Yr.forEach(a),zr.forEach(a),It=M($e),Rl=p($e,"LI",{});var xr=r(Rl);Cs=p(xr,"A",{href:!0,rel:!0});var _r=r(Cs);Ct=t(_r,"Source code"),_r.forEach(a),xr.forEach(a),$e.forEach(a),Ka=M(s),X=p(s,"H2",{class:!0});var Fe=r(X);ss=p(Fe,"A",{id:!0,class:!0,href:!0});var Xr=r(ss);Wl=p(Xr,"SPAN",{});var $r=r(Wl);j(bs.$$.fragment,$r),$r.forEach(a),Xr.forEach(a),bt=M(Fe),Vl=p(Fe,"SPAN",{});var Fr=r(Vl);gt=t(Fr,"Prerequisites"),Fr.forEach(a),Fe.forEach(a),qa=M(s),ls=p(s,"UL",{});var He=r(ls);fl=p(He,"LI",{});var Zr=r(fl);gs=p(Zr,"A",{href:!0,rel:!0});var Hr=r(gs);Et=t(Hr,"Node.js"),Hr.forEach(a),Bt=t(Zr," version 14.18+ or 16+"),Zr.forEach(a),vt=M(He),Il=p(He,"LI",{});var Ar=r(Il);Es=p(Ar,"A",{href:!0,rel:!0});var Lr=r(Es);Zt=t(Lr,"npm"),Lr.forEach(a),At=t(Ar," version 7+"),Ar.forEach(a),He.forEach(a),se=M(s),$=p(s,"H2",{class:!0});var Le=r($);as=p(Le,"A",{id:!0,class:!0,href:!0});var Dr=r(as);zl=p(Dr,"SPAN",{});var Pr=r(zl);j(Bs.$$.fragment,Pr),Pr.forEach(a),Dr.forEach(a),Nt=M(Le),Yl=p(Le,"SPAN",{});var Or=r(Yl);Qt=t(Or,"Step 1: Initialise the project"),Or.forEach(a),Le.forEach(a),le=M(s),es=p(s,"P",{});var De=r(es);Gt=t(De,"For this tutorial, we will use "),vs=p(De,"A",{href:!0,rel:!0});var Kr=r(vs);St=t(Kr,"Vite"),Kr.forEach(a),kt=t(De," to initialise our project. Vite is a build tool that allows us to quickly set up a React application with minimal configuration. Run the following command in your terminal:"),De.forEach(a),ae=M(s),j(Zs.$$.fragment,s),ee=M(s),B=p(s,"P",{});var Ts=r(B);Rt=t(Ts,"If prompted to install "),xl=p(Ts,"CODE",{});var qr=r(xl);Wt=t(qr,"create-vite"),qr.forEach(a),Vt=t(Ts,", type "),_l=p(Ts,"KBD",{});var so=r(_l);zt=t(so,"y"),so.forEach(a),Yt=t(Ts," and press "),Xl=p(Ts,"KBD",{});var lo=r(Xl);xt=t(lo,"Enter"),lo.forEach(a),_t=t(Ts,"."),Ts.forEach(a),te=M(s),Cl=p(s,"P",{});var ao=r(Cl);Xt=t(ao,"Next, enter the project directory and install the necessary development dependencies:"),ao.forEach(a),ne=M(s),j(As.$$.fragment,s),pe=M(s),bl=p(s,"P",{});var eo=r(bl);$t=t(eo,"To test that our application is working, we can run the following command:"),eo.forEach(a),re=M(s),j(Ns.$$.fragment,s),oe=M(s),v=p(s,"P",{});var ms=r(v);Ft=t(ms,"Visiting the URL shown in the terminal (e.g., "),Qs=p(ms,"A",{href:!0,rel:!0});var to=r(Qs);Ht=t(to,"http://localhost:5173/"),to.forEach(a),Lt=t(ms,`) should show the default \u201CReact + Vite\u201D landing page.
You can stop the development server by pressing `),$l=p(ms,"KBD",{});var no=r($l);Dt=t(no,"Ctrl"),no.forEach(a),Pt=t(ms," + "),Fl=p(ms,"KBD",{});var po=r(Fl);Ot=t(po,"C"),po.forEach(a),Kt=t(ms," in the terminal."),ms.forEach(a),ce=M(s),F=p(s,"H2",{class:!0});var Pe=r(F);ts=p(Pe,"A",{id:!0,class:!0,href:!0});var ro=r(ts);Hl=p(ro,"SPAN",{});var oo=r(Hl);j(Gs.$$.fragment,oo),oo.forEach(a),ro.forEach(a),qt=M(Pe),Ll=p(Pe,"SPAN",{});var co=r(Ll);sn=t(co,"Step 2: Install and configure Transformers.js"),co.forEach(a),Pe.forEach(a),ie=M(s),ns=p(s,"P",{});var Oe=r(ns);ln=t(Oe,"Now we get to the fun part: adding machine learning to our application! First, install Transformers.js from "),Ss=p(Oe,"A",{href:!0,rel:!0});var io=r(Ss);an=t(io,"NPM"),io.forEach(a),en=t(Oe," with the following command:"),Oe.forEach(a),Me=M(s),j(ks.$$.fragment,s),he=M(s),ps=p(s,"P",{});var Ke=r(ps);tn=t(Ke,"For this application, we will use the "),Rs=p(Ke,"A",{href:!0,rel:!0});var Mo=r(Rs);nn=t(Mo,"Xenova/nllb-200-distilled-600M"),Mo.forEach(a),pn=t(Ke," model, which can perform multilingual translation among 200 languages. Before we start, there are 2 things we need to take note of:"),Ke.forEach(a),de=M(s),rs=p(s,"OL",{});var qe=r(rs);Dl=p(qe,"LI",{});var ho=r(Dl);rn=t(ho,"ML inference can be quite computationally intensive, so it\u2019s better to load and run the models in a separate thread from the main (UI) thread."),ho.forEach(a),on=M(qe),Pl=p(qe,"LI",{});var jo=r(Pl);cn=t(jo,"Since the model is quite large (>1 GB), we don\u2019t want to download it until the user clicks the \u201CTranslate\u201D button."),jo.forEach(a),qe.forEach(a),je=M(s),Q=p(s,"P",{});var vl=r(Q);Mn=t(vl,"We can achieve both of these goals by using a "),Ws=p(vl,"A",{href:!0,rel:!0});var yo=r(Ws);hn=t(yo,"Web Worker"),yo.forEach(a),dn=t(vl," and some "),Vs=p(vl,"A",{href:!0,rel:!0});var Uo=r(Vs);jn=t(Uo,"React hooks"),Uo.forEach(a),yn=t(vl,"."),vl.forEach(a),ye=M(s),os=p(s,"OL",{});var st=r(os);zs=p(st,"LI",{});var lt=r(zs);f=p(lt,"P",{});var Z=r(f);Un=t(Z,"Create a file called "),Ol=p(Z,"CODE",{});var wo=r(Ol);wn=t(wo,"worker.js"),wo.forEach(a),Jn=t(Z," in the "),Kl=p(Z,"CODE",{});var Jo=r(Kl);un=t(Jo,"src"),Jo.forEach(a),Tn=t(Z," directory. This script will do all the heavy-lifing for us, including loading and running of the translation pipeline. To ensure the model is only loaded once, we will create the "),ql=p(Z,"CODE",{});var uo=r(ql);mn=t(uo,"MyTranslationPipeline"),uo.forEach(a),fn=t(Z," class which use the "),Ys=p(Z,"A",{href:!0,rel:!0});var To=r(Ys);In=t(To,"singleton pattern"),To.forEach(a),Cn=t(Z," to lazily create a single instance of the pipeline when "),sa=p(Z,"CODE",{});var mo=r(sa);bn=t(mo,"getInstance"),mo.forEach(a),gn=t(Z," is first called, and use this pipeline for all subsequent calls:"),Z.forEach(a),En=M(lt),j(xs.$$.fragment,lt),lt.forEach(a),Bn=M(st),_s=p(st,"LI",{});var at=r(_s);g=p(at,"P",{});var z=r(g);vn=t(z,"Modify "),la=p(z,"CODE",{});var fo=r(la);Zn=t(fo,"App.jsx"),fo.forEach(a),An=t(z," in the "),aa=p(z,"CODE",{});var Io=r(aa);Nn=t(Io,"src"),Io.forEach(a),Qn=t(z," directory. This file is automatically created when initializing our React project, and will contain some boilerplate code. Inside the "),ea=p(z,"CODE",{});var Co=r(ea);Gn=t(Co,"App"),Co.forEach(a),Sn=t(z," function, let\u2019s create the web worker and store a reference to it using the "),ta=p(z,"CODE",{});var bo=r(ta);kn=t(bo,"useRef"),bo.forEach(a),Rn=t(z," hook:"),z.forEach(a),Wn=M(at),j(Xs.$$.fragment,at),at.forEach(a),st.forEach(a),Ue=M(s),H=p(s,"H2",{class:!0});var et=r(H);cs=p(et,"A",{id:!0,class:!0,href:!0});var go=r(cs);na=p(go,"SPAN",{});var Eo=r(na);j($s.$$.fragment,Eo),Eo.forEach(a),go.forEach(a),Vn=M(et),pa=p(et,"SPAN",{});var Bo=r(pa);zn=t(Bo,"Step 3: Design the user interface"),Bo.forEach(a),et.forEach(a),we=M(s),j(is.$$.fragment,s),Je=M(s),G=p(s,"P",{});var Zl=r(G);Yn=t(Zl,"First, let\u2019s define our components. Create a folder called "),ra=p(Zl,"CODE",{});var vo=r(ra);xn=t(vo,"components"),vo.forEach(a),_n=t(Zl," in the "),oa=p(Zl,"CODE",{});var Zo=r(oa);Xn=t(Zo,"src"),Zo.forEach(a),$n=t(Zl," directory, and create the following files:"),Zl.forEach(a),ue=M(s),gl=p(s,"OL",{});var Ao=r(gl);Fs=p(Ao,"LI",{});var tt=r(Fs);Ms=p(tt,"P",{});var $a=r(Ms);ca=p($a,"CODE",{});var No=r(ca);Fn=t(No,"LanguageSelector.jsx"),No.forEach(a),Hn=t($a,": This component will allow the user to select the input and output languages. Check out the full list of languages "),Hs=p($a,"A",{href:!0,rel:!0});var Qo=r(Hs);Ln=t(Qo,"here"),Qo.forEach(a),Dn=t($a,"."),$a.forEach(a),Pn=M(tt),j(Ls.$$.fragment,tt),tt.forEach(a),Ao.forEach(a),Te=M(s),Ds=p(s,"OL",{start:!0});var Go=r(Ds);Ps=p(Go,"LI",{});var nt=r(Ps);ia=p(nt,"CODE",{});var So=r(ia);On=t(So,"Progress.jsx"),So.forEach(a),Kn=t(nt,`: This component will display the progress for downloading each model file.
	`),j(Os.$$.fragment,nt),nt.forEach(a),Go.forEach(a),me=M(s),hs=p(s,"P",{});var pt=r(hs);qn=t(pt,"We can now use these components in "),Ma=p(pt,"CODE",{});var ko=r(Ma);sp=t(ko,"App.jsx"),ko.forEach(a),lp=t(pt," by adding these imports to the top of the file:"),pt.forEach(a),fe=M(s),j(Ks.$$.fragment,s),Ie=M(s),S=p(s,"P",{});var Al=r(S);ap=t(Al,"Let\u2019s also add some state variables to keep track of a few things in our application, like model loading, languages, input text, and output text. Add the following code to the beginning of the "),ha=p(Al,"CODE",{});var Ro=r(ha);ep=t(Ro,"App"),Ro.forEach(a),tp=t(Al," function in "),da=p(Al,"CODE",{});var Wo=r(da);np=t(Wo,"src/App.jsx"),Wo.forEach(a),pp=t(Al,":"),Al.forEach(a),Ce=M(s),j(qs.$$.fragment,s),be=M(s),I=p(s,"P",{});var Y=r(I);rp=t(Y,"Next, we can add our custom components to the main "),ja=p(Y,"CODE",{});var Vo=r(ja);op=t(Vo,"App"),Vo.forEach(a),cp=t(Y," component. We will also add two "),ya=p(Y,"CODE",{});var zo=r(ya);ip=t(zo,"textarea"),zo.forEach(a),Mp=t(Y," elements for input and output text, and a "),Ua=p(Y,"CODE",{});var Yo=r(Ua);hp=t(Yo,"button"),Yo.forEach(a),dp=t(Y," to trigger the translation.  Modify the "),wa=p(Y,"CODE",{});var xo=r(wa);jp=t(xo,"return"),xo.forEach(a),yp=t(Y," statement to look like this:"),Y.forEach(a),ge=M(s),j(sl.$$.fragment,s),Ee=M(s),ds=p(s,"P",{});var rt=r(ds);Up=t(rt,"Don\u2019t worry about the "),Ja=p(rt,"CODE",{});var _o=r(Ja);wp=t(_o,"translate"),_o.forEach(a),Jp=t(rt," function for now. We will define it in the next section."),rt.forEach(a),Be=M(s),js=p(s,"P",{});var ot=r(js);up=t(ot,"Finally, we can add some CSS to make our app look a little nicer. Modify the following files in the "),ua=p(ot,"CODE",{});var Xo=r(ua);Tp=t(Xo,"src"),Xo.forEach(a),mp=t(ot," directory:"),ot.forEach(a),ve=M(s),ys=p(s,"OL",{});var ct=r(ys);ll=p(ct,"LI",{});var it=r(ll);El=p(it,"P",{});var Nr=r(El);Ta=p(Nr,"CODE",{});var $o=r(Ta);fp=t($o,"index.css"),$o.forEach(a),Ip=t(Nr,":"),Nr.forEach(a),Cp=M(it),al=p(it,"DETAILS",{});var Mt=r(al);ma=p(Mt,"SUMMARY",{});var Fo=r(ma);bp=t(Fo,"View code"),Fo.forEach(a),gp=M(Mt),j(el.$$.fragment,Mt),Mt.forEach(a),it.forEach(a),Ep=M(ct),tl=p(ct,"LI",{});var ht=r(tl);fa=p(ht,"P",{});var Ho=r(fa);Ia=p(Ho,"CODE",{});var Lo=r(Ia);Bp=t(Lo,"App.css"),Lo.forEach(a),Ho.forEach(a),vp=M(ht),nl=p(ht,"DETAILS",{});var dt=r(nl);Ca=p(dt,"SUMMARY",{});var Do=r(Ca);Zp=t(Do,"View code"),Do.forEach(a),Ap=M(dt),j(pl.$$.fragment,dt),dt.forEach(a),ht.forEach(a),ct.forEach(a),Ze=M(s),L=p(s,"H2",{class:!0});var jt=r(L);Us=p(jt,"A",{id:!0,class:!0,href:!0});var Po=r(Us);ba=p(Po,"SPAN",{});var Oo=r(ba);j(rl.$$.fragment,Oo),Oo.forEach(a),Po.forEach(a),Np=M(jt),ga=p(jt,"SPAN",{});var Ko=r(ga);Qp=t(Ko,"Step 4: Connecting everything together"),Ko.forEach(a),jt.forEach(a),Ae=M(s),Bl=p(s,"P",{});var qo=r(Bl);Gp=t(qo,"Now that we have a basic user interface set up, we can finally connect everything together."),qo.forEach(a),Ne=M(s),C=p(s,"P",{});var x=r(C);Sp=t(x,"First, let\u2019s define the "),Ea=p(x,"CODE",{});var sc=r(Ea);kp=t(sc,"translate"),sc.forEach(a),Rp=t(x," function, which will be called when the user clicks the "),Ba=p(x,"CODE",{});var lc=r(Ba);Wp=t(lc,"Translate"),lc.forEach(a),Vp=t(x," button. This sends a message (containing the input text, source language, and target language) to the worker thread for processing. We will also disable the button so the user doesn\u2019t click it multiple times. Add the following code just before the "),va=p(x,"CODE",{});var ac=r(va);zp=t(ac,"return"),ac.forEach(a),Yp=t(x," statement in the "),Za=p(x,"CODE",{});var ec=r(Za);xp=t(ec,"App"),ec.forEach(a),_p=t(x," function:"),x.forEach(a),Qe=M(s),j(ol.$$.fragment,s),Ge=M(s),k=p(s,"P",{});var Nl=r(k);Xp=t(Nl,"Now, let\u2019s add an event listener in "),Aa=p(Nl,"CODE",{});var tc=r(Aa);$p=t(tc,"src/worker.js"),tc.forEach(a),Fp=t(Nl," to listen for messages from the main thread. We will send back messages (e.g., for model loading progress and text streaming) to the main thread with "),Na=p(Nl,"CODE",{});var nc=r(Na);Hp=t(nc,"self.postMessage"),nc.forEach(a),Lp=t(Nl,"."),Nl.forEach(a),Se=M(s),j(cl.$$.fragment,s),ke=M(s),R=p(s,"P",{});var Ql=r(R);Dp=t(Ql,"Finally, let\u2019s fill in our "),Qa=p(Ql,"CODE",{});var pc=r(Qa);Pp=t(pc,"onMessageReceived"),pc.forEach(a),Op=t(Ql," function, which will update the application state in response to messages from the worker thread. Add the following code inside the "),Ga=p(Ql,"CODE",{});var rc=r(Ga);Kp=t(rc,"useEffect"),rc.forEach(a),qp=t(Ql," hook we defined earlier:"),Ql.forEach(a),Re=M(s),j(il.$$.fragment,s),We=M(s),ws=p(s,"P",{});var yt=r(ws);sr=t(yt,"You can now run the application with "),Sa=p(yt,"CODE",{});var oc=r(Sa);lr=t(oc,"npm run dev"),oc.forEach(a),ar=t(yt," and perform multilingual translation directly in your browser!"),yt.forEach(a),Ve=M(s),D=p(s,"H2",{class:!0});var Ut=r(D);Js=p(Ut,"A",{id:!0,class:!0,href:!0});var cc=r(Js);ka=p(cc,"SPAN",{});var ic=r(ka);j(Ml.$$.fragment,ic),ic.forEach(a),cc.forEach(a),er=M(Ut),Ra=p(Ut,"SPAN",{});var Mc=r(Ra);tr=t(Mc,"(Optional) Step 5: Build and deploy"),Mc.forEach(a),Ut.forEach(a),ze=M(s),W=p(s,"P",{});var Gl=r(W);nr=t(Gl,"To build your application, simply run "),Wa=p(Gl,"CODE",{});var hc=r(Wa);pr=t(hc,"npm run build"),hc.forEach(a),rr=t(Gl,". This will bundle your application and output the static files to the "),Va=p(Gl,"CODE",{});var dc=r(Va);or=t(dc,"dist"),dc.forEach(a),cr=t(Gl," folder."),Gl.forEach(a),Ye=M(s),V=p(s,"P",{});var Sl=r(V);ir=t(Sl,"For this demo, we will deploy our application as a static "),hl=p(Sl,"A",{href:!0,rel:!0});var jc=r(hl);Mr=t(jc,"Hugging Face Space"),jc.forEach(a),hr=t(Sl,", but you can deploy it anywhere you like! If you haven\u2019t already, you can create a free Hugging Face account "),dl=p(Sl,"A",{href:!0,rel:!0});var yc=r(dl);dr=t(yc,"here"),yc.forEach(a),jr=t(Sl,"."),Sl.forEach(a),xe=M(s),us=p(s,"OL",{});var wt=r(us);jl=p(wt,"LI",{});var Jt=r(jl);yr=t(Jt,"Visit "),yl=p(Jt,"A",{href:!0,rel:!0});var Uc=r(yl);Ur=t(Uc,"https://huggingface.co/new-space"),Uc.forEach(a),wr=t(Jt," and fill in the form. Remember to select \u201CStatic\u201D as the space type."),Jt.forEach(a),Jr=M(wt),A=p(wt,"LI",{});var fs=r(A);ur=t(fs,"Go to \u201CFiles\u201D \u2192 \u201CAdd file\u201D \u2192 \u201CUpload files\u201D. Drag the "),za=p(fs,"CODE",{});var wc=r(za);Tr=t(wc,"index.html"),wc.forEach(a),mr=t(fs," file and "),Ya=p(fs,"CODE",{});var Jc=r(Ya);fr=t(Jc,"public/"),Jc.forEach(a),Ir=t(fs," folder from the "),xa=p(fs,"CODE",{});var uc=r(xa);Cr=t(uc,"dist"),uc.forEach(a),br=t(fs," 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."),fs.forEach(a),wt.forEach(a),_e=M(s),P=p(s,"P",{});var Fa=r(P);_a=p(Fa,"STRONG",{});var Tc=r(_a);gr=t(Tc,"That\u2019s it!"),Tc.forEach(a),Er=t(Fa," Your application should now be live at "),Xa=p(Fa,"CODE",{});var mc=r(Xa);Br=t(mc,"https://huggingface.co/spaces/<your-username>/<your-space-name>"),mc.forEach(a),vr=t(Fa,"!"),Fa.forEach(a),this.h()},h(){h(u,"name","hf:doc:metadata"),h(u,"content",JSON.stringify(Ac)),h(E,"id","building-a-react-application"),h(E,"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"),h(E,"href","#building-a-react-application"),h(m,"class","relative group"),gc(Tl.src,Qr="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/react-translator-demo.gif")||h(Tl,"src",Qr),h(Tl,"alt","Demo"),h(Is,"href","https://huggingface.co/spaces/Xenova/react-translator"),h(Is,"rel","nofollow"),h(Cs,"href","https://github.com/xenova/transformers.js/tree/main/examples/react-translator"),h(Cs,"rel","nofollow"),h(ss,"id","prerequisites"),h(ss,"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"),h(ss,"href","#prerequisites"),h(X,"class","relative group"),h(gs,"href","https://nodejs.org/en/"),h(gs,"rel","nofollow"),h(Es,"href","https://www.npmjs.com/"),h(Es,"rel","nofollow"),h(as,"id","step-1-initialise-the-project"),h(as,"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"),h(as,"href","#step-1-initialise-the-project"),h($,"class","relative group"),h(vs,"href","https://vitejs.dev/"),h(vs,"rel","nofollow"),h(Qs,"href","http://localhost:5173/"),h(Qs,"rel","nofollow"),h(ts,"id","step-2-install-and-configure-transformersjs"),h(ts,"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"),h(ts,"href","#step-2-install-and-configure-transformersjs"),h(F,"class","relative group"),h(Ss,"href","https://www.npmjs.com/package/@xenova/transformers"),h(Ss,"rel","nofollow"),h(Rs,"href","https://huggingface.co/Xenova/nllb-200-distilled-600M"),h(Rs,"rel","nofollow"),h(Ws,"href","https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers"),h(Ws,"rel","nofollow"),h(Vs,"href","https://react.dev/reference/react"),h(Vs,"rel","nofollow"),h(Ys,"href","https://en.wikipedia.org/wiki/Singleton_pattern"),h(Ys,"rel","nofollow"),h(cs,"id","step-3-design-the-user-interface"),h(cs,"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"),h(cs,"href","#step-3-design-the-user-interface"),h(H,"class","relative group"),h(Hs,"href","https://github.com/xenova/transformers.js/blob/main/examples/react-translator/src/components/LanguageSelector.jsx"),h(Hs,"rel","nofollow"),h(Ds,"start","2"),h(Us,"id","step-4-connecting-everything-together"),h(Us,"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"),h(Us,"href","#step-4-connecting-everything-together"),h(L,"class","relative group"),h(Js,"id","optional-step-5-build-and-deploy"),h(Js,"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"),h(Js,"href","#optional-step-5-build-and-deploy"),h(D,"class","relative group"),h(hl,"href","https://huggingface.co/docs/hub/spaces"),h(hl,"rel","nofollow"),h(dl,"href","https://huggingface.co/join"),h(dl,"rel","nofollow"),h(yl,"href","https://huggingface.co/new-space"),h(yl,"rel","nofollow")},m(s,o){l(document.head,u),c(s,O,o),c(s,m,o),l(m,E),l(E,_),y(b,_,null),l(m,N),l(m,K),l(K,ut),c(s,La,o),c(s,Jl,o),l(Jl,Tt),c(s,Da,o),c(s,ul,o),l(ul,Tl),c(s,Pa,o),c(s,ml,o),l(ml,mt),c(s,Oa,o),c(s,q,o),l(q,kl),l(kl,Is),l(Is,ft),l(q,It),l(q,Rl),l(Rl,Cs),l(Cs,Ct),c(s,Ka,o),c(s,X,o),l(X,ss),l(ss,Wl),y(bs,Wl,null),l(X,bt),l(X,Vl),l(Vl,gt),c(s,qa,o),c(s,ls,o),l(ls,fl),l(fl,gs),l(gs,Et),l(fl,Bt),l(ls,vt),l(ls,Il),l(Il,Es),l(Es,Zt),l(Il,At),c(s,se,o),c(s,$,o),l($,as),l(as,zl),y(Bs,zl,null),l($,Nt),l($,Yl),l(Yl,Qt),c(s,le,o),c(s,es,o),l(es,Gt),l(es,vs),l(vs,St),l(es,kt),c(s,ae,o),y(Zs,s,o),c(s,ee,o),c(s,B,o),l(B,Rt),l(B,xl),l(xl,Wt),l(B,Vt),l(B,_l),l(_l,zt),l(B,Yt),l(B,Xl),l(Xl,xt),l(B,_t),c(s,te,o),c(s,Cl,o),l(Cl,Xt),c(s,ne,o),y(As,s,o),c(s,pe,o),c(s,bl,o),l(bl,$t),c(s,re,o),y(Ns,s,o),c(s,oe,o),c(s,v,o),l(v,Ft),l(v,Qs),l(Qs,Ht),l(v,Lt),l(v,$l),l($l,Dt),l(v,Pt),l(v,Fl),l(Fl,Ot),l(v,Kt),c(s,ce,o),c(s,F,o),l(F,ts),l(ts,Hl),y(Gs,Hl,null),l(F,qt),l(F,Ll),l(Ll,sn),c(s,ie,o),c(s,ns,o),l(ns,ln),l(ns,Ss),l(Ss,an),l(ns,en),c(s,Me,o),y(ks,s,o),c(s,he,o),c(s,ps,o),l(ps,tn),l(ps,Rs),l(Rs,nn),l(ps,pn),c(s,de,o),c(s,rs,o),l(rs,Dl),l(Dl,rn),l(rs,on),l(rs,Pl),l(Pl,cn),c(s,je,o),c(s,Q,o),l(Q,Mn),l(Q,Ws),l(Ws,hn),l(Q,dn),l(Q,Vs),l(Vs,jn),l(Q,yn),c(s,ye,o),c(s,os,o),l(os,zs),l(zs,f),l(f,Un),l(f,Ol),l(Ol,wn),l(f,Jn),l(f,Kl),l(Kl,un),l(f,Tn),l(f,ql),l(ql,mn),l(f,fn),l(f,Ys),l(Ys,In),l(f,Cn),l(f,sa),l(sa,bn),l(f,gn),l(zs,En),y(xs,zs,null),l(os,Bn),l(os,_s),l(_s,g),l(g,vn),l(g,la),l(la,Zn),l(g,An),l(g,aa),l(aa,Nn),l(g,Qn),l(g,ea),l(ea,Gn),l(g,Sn),l(g,ta),l(ta,kn),l(g,Rn),l(_s,Wn),y(Xs,_s,null),c(s,Ue,o),c(s,H,o),l(H,cs),l(cs,na),y($s,na,null),l(H,Vn),l(H,pa),l(pa,zn),c(s,we,o),y(is,s,o),c(s,Je,o),c(s,G,o),l(G,Yn),l(G,ra),l(ra,xn),l(G,_n),l(G,oa),l(oa,Xn),l(G,$n),c(s,ue,o),c(s,gl,o),l(gl,Fs),l(Fs,Ms),l(Ms,ca),l(ca,Fn),l(Ms,Hn),l(Ms,Hs),l(Hs,Ln),l(Ms,Dn),l(Fs,Pn),y(Ls,Fs,null),c(s,Te,o),c(s,Ds,o),l(Ds,Ps),l(Ps,ia),l(ia,On),l(Ps,Kn),y(Os,Ps,null),c(s,me,o),c(s,hs,o),l(hs,qn),l(hs,Ma),l(Ma,sp),l(hs,lp),c(s,fe,o),y(Ks,s,o),c(s,Ie,o),c(s,S,o),l(S,ap),l(S,ha),l(ha,ep),l(S,tp),l(S,da),l(da,np),l(S,pp),c(s,Ce,o),y(qs,s,o),c(s,be,o),c(s,I,o),l(I,rp),l(I,ja),l(ja,op),l(I,cp),l(I,ya),l(ya,ip),l(I,Mp),l(I,Ua),l(Ua,hp),l(I,dp),l(I,wa),l(wa,jp),l(I,yp),c(s,ge,o),y(sl,s,o),c(s,Ee,o),c(s,ds,o),l(ds,Up),l(ds,Ja),l(Ja,wp),l(ds,Jp),c(s,Be,o),c(s,js,o),l(js,up),l(js,ua),l(ua,Tp),l(js,mp),c(s,ve,o),c(s,ys,o),l(ys,ll),l(ll,El),l(El,Ta),l(Ta,fp),l(El,Ip),l(ll,Cp),l(ll,al),l(al,ma),l(ma,bp),l(al,gp),y(el,al,null),l(ys,Ep),l(ys,tl),l(tl,fa),l(fa,Ia),l(Ia,Bp),l(tl,vp),l(tl,nl),l(nl,Ca),l(Ca,Zp),l(nl,Ap),y(pl,nl,null),c(s,Ze,o),c(s,L,o),l(L,Us),l(Us,ba),y(rl,ba,null),l(L,Np),l(L,ga),l(ga,Qp),c(s,Ae,o),c(s,Bl,o),l(Bl,Gp),c(s,Ne,o),c(s,C,o),l(C,Sp),l(C,Ea),l(Ea,kp),l(C,Rp),l(C,Ba),l(Ba,Wp),l(C,Vp),l(C,va),l(va,zp),l(C,Yp),l(C,Za),l(Za,xp),l(C,_p),c(s,Qe,o),y(ol,s,o),c(s,Ge,o),c(s,k,o),l(k,Xp),l(k,Aa),l(Aa,$p),l(k,Fp),l(k,Na),l(Na,Hp),l(k,Lp),c(s,Se,o),y(cl,s,o),c(s,ke,o),c(s,R,o),l(R,Dp),l(R,Qa),l(Qa,Pp),l(R,Op),l(R,Ga),l(Ga,Kp),l(R,qp),c(s,Re,o),y(il,s,o),c(s,We,o),c(s,ws,o),l(ws,sr),l(ws,Sa),l(Sa,lr),l(ws,ar),c(s,Ve,o),c(s,D,o),l(D,Js),l(Js,ka),y(Ml,ka,null),l(D,er),l(D,Ra),l(Ra,tr),c(s,ze,o),c(s,W,o),l(W,nr),l(W,Wa),l(Wa,pr),l(W,rr),l(W,Va),l(Va,or),l(W,cr),c(s,Ye,o),c(s,V,o),l(V,ir),l(V,hl),l(hl,Mr),l(V,hr),l(V,dl),l(dl,dr),l(V,jr),c(s,xe,o),c(s,us,o),l(us,jl),l(jl,yr),l(jl,yl),l(yl,Ur),l(jl,wr),l(us,Jr),l(us,A),l(A,ur),l(A,za),l(za,Tr),l(A,mr),l(A,Ya),l(Ya,fr),l(A,Ir),l(A,xa),l(xa,Cr),l(A,br),c(s,_e,o),c(s,P,o),l(P,_a),l(_a,gr),l(P,Er),l(P,Xa),l(Xa,Br),l(P,vr),Xe=!0},p(s,[o]){const Ul={};o&2&&(Ul.$$scope={dirty:o,ctx:s}),is.$set(Ul)},i(s){Xe||(U(b.$$.fragment,s),U(bs.$$.fragment,s),U(Bs.$$.fragment,s),U(Zs.$$.fragment,s),U(As.$$.fragment,s),U(Ns.$$.fragment,s),U(Gs.$$.fragment,s),U(ks.$$.fragment,s),U(xs.$$.fragment,s),U(Xs.$$.fragment,s),U($s.$$.fragment,s),U(is.$$.fragment,s),U(Ls.$$.fragment,s),U(Os.$$.fragment,s),U(Ks.$$.fragment,s),U(qs.$$.fragment,s),U(sl.$$.fragment,s),U(el.$$.fragment,s),U(pl.$$.fragment,s),U(rl.$$.fragment,s),U(ol.$$.fragment,s),U(cl.$$.fragment,s),U(il.$$.fragment,s),U(Ml.$$.fragment,s),Xe=!0)},o(s){w(b.$$.fragment,s),w(bs.$$.fragment,s),w(Bs.$$.fragment,s),w(Zs.$$.fragment,s),w(As.$$.fragment,s),w(Ns.$$.fragment,s),w(Gs.$$.fragment,s),w(ks.$$.fragment,s),w(xs.$$.fragment,s),w(Xs.$$.fragment,s),w($s.$$.fragment,s),w(is.$$.fragment,s),w(Ls.$$.fragment,s),w(Os.$$.fragment,s),w(Ks.$$.fragment,s),w(qs.$$.fragment,s),w(sl.$$.fragment,s),w(el.$$.fragment,s),w(pl.$$.fragment,s),w(rl.$$.fragment,s),w(ol.$$.fragment,s),w(cl.$$.fragment,s),w(il.$$.fragment,s),w(Ml.$$.fragment,s),Xe=!1},d(s){a(u),s&&a(O),s&&a(m),J(b),s&&a(La),s&&a(Jl),s&&a(Da),s&&a(ul),s&&a(Pa),s&&a(ml),s&&a(Oa),s&&a(q),s&&a(Ka),s&&a(X),J(bs),s&&a(qa),s&&a(ls),s&&a(se),s&&a($),J(Bs),s&&a(le),s&&a(es),s&&a(ae),J(Zs,s),s&&a(ee),s&&a(B),s&&a(te),s&&a(Cl),s&&a(ne),J(As,s),s&&a(pe),s&&a(bl),s&&a(re),J(Ns,s),s&&a(oe),s&&a(v),s&&a(ce),s&&a(F),J(Gs),s&&a(ie),s&&a(ns),s&&a(Me),J(ks,s),s&&a(he),s&&a(ps),s&&a(de),s&&a(rs),s&&a(je),s&&a(Q),s&&a(ye),s&&a(os),J(xs),J(Xs),s&&a(Ue),s&&a(H),J($s),s&&a(we),J(is,s),s&&a(Je),s&&a(G),s&&a(ue),s&&a(gl),J(Ls),s&&a(Te),s&&a(Ds),J(Os),s&&a(me),s&&a(hs),s&&a(fe),J(Ks,s),s&&a(Ie),s&&a(S),s&&a(Ce),J(qs,s),s&&a(be),s&&a(I),s&&a(ge),J(sl,s),s&&a(Ee),s&&a(ds),s&&a(Be),s&&a(js),s&&a(ve),s&&a(ys),J(el),J(pl),s&&a(Ze),s&&a(L),J(rl),s&&a(Ae),s&&a(Bl),s&&a(Ne),s&&a(C),s&&a(Qe),J(ol,s),s&&a(Ge),s&&a(k),s&&a(Se),J(cl,s),s&&a(ke),s&&a(R),s&&a(Re),J(il,s),s&&a(We),s&&a(ws),s&&a(Ve),s&&a(D),J(Ml),s&&a(ze),s&&a(W),s&&a(Ye),s&&a(V),s&&a(xe),s&&a(us),s&&a(_e),s&&a(P)}}}const Ac={local:"building-a-react-application",sections:[{local:"prerequisites",title:"Prerequisites"},{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:"step-4-connecting-everything-together",title:"Step 4: Connecting everything together"},{local:"optional-step-5-build-and-deploy",title:"(Optional) Step 5: Build and deploy"}],title:"Building a React application"};function Nc(Ha){return Ec(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Rc extends fc{constructor(u){super();Ic(this,u,Nc,Zc,Cc,{})}}export{Rc as default,Ac as metadata};
