Hugging Face's logo

Buckets:
hf-doc-build
/
doc-dev

Files
xet
hf-doc-build/doc-dev / transformers.js /pr_1452 /en /_app /immutable /nodes /36.ef62ea25.js
rtrm's picture
rtrm
download
raw
68.6 kB
import{s as Ka,o as Oa,n as st}from"../chunks/scheduler.6efaaf90.js";import{S as lt,i as at,e as p,s as e,c as r,q as tt,h as et,a as M,d as a,b as n,f as T,g as j,j as c,r as nt,k as oa,l as i,m as t,n as o,t as h,o as J,p as U}from"../chunks/index.eb3e1f0f.js";import{T as pt}from"../chunks/Tip.292c2c3d.js";import{C as Mt,H as Rs,E as ct}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.95efcab6.js";import{C as d}from"../chunks/CodeBlock.df907707.js";function it(Ls){let y,I=`We recommend starting the development server again with <code>npm run dev</code>
(if not already running) so that you can see your changes in real-time.`;return{c(){y=p("p"),y.innerHTML=I},l(w){y=M(w,"P",{"data-svelte-h":!0}),c(y)!=="svelte-155lffx"&&(y.innerHTML=I)},m(w,ks){t(w,y,ks)},p:st,d(w){w&&a(y)}}}function rt(Ls){let y,I,w,ks,b,Fs,g,_s,f,ha="In this tutorial, we’ll be building a simple React application that performs multilingual translation using Transformers.js! The final product will look something like this:",Ds,B,Ja='<img src="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/react-translator-demo.gif" alt="Demo"/>',Ps,Z,Ua="Useful links:",qs,A,ya='<li><a href="https://huggingface.co/spaces/Xenova/react-translator" rel="nofollow">Demo site</a></li> <li><a href="https://github.com/huggingface/transformers.js-examples/tree/main/react-translator" rel="nofollow">Source code</a></li>',Ks,E,Os,N,da='<li><a href="https://nodejs.org/en/" rel="nofollow">Node.js</a> version 18+</li> <li><a href="https://www.npmjs.com/" rel="nofollow">npm</a> version 9+</li>',sl,Q,ll,G,Ta='For this tutorial, we will use <a href="https://vitejs.dev/" rel="nofollow">Vite</a> 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:',al,R,tl,k,wa="If prompted to install <code>create-vite</code>, type <kbd>y</kbd> and press <kbd>Enter</kbd>.",el,S,ua="Next, enter the project directory and install the necessary development dependencies:",nl,W,pl,x,ma="To test that our application is working, we can run the following command:",Ml,v,cl,z,Ca=`Visiting the URL shown in the terminal (e.g., <a href="http://localhost:5173/" rel="nofollow">http://localhost:5173/</a>) should show the default “React + Vite” landing page.
You can stop the development server by pressing <kbd>Ctrl</kbd> + <kbd>C</kbd> in the terminal.`,il,V,rl,Y,Ia='Now we get to the fun part: adding machine learning to our application! First, install Transformers.js from <a href="https://www.npmjs.com/package/@huggingface/transformers" rel="nofollow">NPM</a> with the following command:',jl,X,ol,H,ba='For this application, we will use the <a href="https://huggingface.co/Xenova/nllb-200-distilled-600M" rel="nofollow">Xenova/nllb-200-distilled-600M</a> model, which can perform multilingual translation among 200 languages. Before we start, there are 2 things we need to take note of:',hl,$,ga="<li>ML inference can be quite computationally intensive, so it’s better to load and run the models in a separate thread from the main (UI) thread.</li> <li>Since the model is quite large (&gt;1 GB), we don’t want to download it until the user clicks the “Translate” button.</li>",Jl,L,fa='We can achieve both of these goals by using a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers" rel="nofollow">Web Worker</a> and some <a href="https://react.dev/reference/react" rel="nofollow">React hooks</a>.',Ul,u,F,Ss,Ba='Create a file called <code>worker.js</code> in the <code>src</code> 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 <code>MyTranslationPipeline</code> class which use the <a href="https://en.wikipedia.org/wiki/Singleton_pattern" rel="nofollow">singleton pattern</a> to lazily create a single instance of the pipeline when <code>getInstance</code> is first called, and use this pipeline for all subsequent calls:',aa,_,ta,D,Ws,Za="Modify <code>App.jsx</code> in the <code>src</code> directory. This file is automatically created when initializing our React project, and will contain some boilerplate code. Inside the <code>App</code> function, let’s create the web worker and store a reference to it using the <code>useRef</code> hook:",ea,P,yl,q,dl,m,Tl,K,Aa="First, let’s define our components. Create a folder called <code>components</code> in the <code>src</code> directory, and create the following files:",wl,xs,O,vs,Ea='<code>LanguageSelector.jsx</code>: This component will allow the user to select the input and output languages. Check out the full list of languages <a href="https://github.com/huggingface/transformers.js-examples/tree/main/react-translator/src/components/LanguageSelector.jsx" rel="nofollow">here</a>.',na,ss,ul,ls,as,zs,Na="Progress.jsx",pa,ts,ml,es,Qa="We can now use these components in <code>App.jsx</code> by adding these imports to the top of the file:",Cl,ns,Il,ps,Ga="Let’s 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 <code>App</code> function in <code>src/App.jsx</code>:",bl,Ms,gl,cs,Ra="Next, we can add our custom components to the main <code>App</code> component. We will also add two <code>textarea</code> elements for input and output text, and a <code>button</code> to trigger the translation. Modify the <code>return</code> statement to look like this:",fl,is,Bl,rs,ka="Don’t worry about the <code>translate</code> function for now. We will define it in the next section.",Zl,js,Sa="Finally, we can add some CSS to make our app look a little nicer. Modify the following files in the <code>src</code> directory:",Al,C,os,Vs,Wa="<code>index.css</code>:",Ma,hs,Ys,xa="View code",ca,Js,ia,Us,Xs,va="<code>App.css</code>",ra,ys,Hs,za="View code",ja,ds,El,Ts,Nl,ws,Va="Now that we have a basic user interface set up, we can finally connect everything together.",Ql,us,Ya="First, let’s define the <code>translate</code> function, which will be called when the user clicks the <code>Translate</code> 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’t click it multiple times. Add the following code just before the <code>return</code> statement in the <code>App</code> function:",Gl,ms,Rl,Cs,Xa="Now, let’s add an event listener in <code>src/worker.js</code> 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 <code>self.postMessage</code>.",kl,Is,Sl,bs,Ha="Finally, let’s fill in our <code>onMessageReceived</code> function in <code>src/App.jsx</code>, which will update the application state in response to messages from the worker thread. Add the following code inside the <code>useEffect</code> hook we defined earlier:",Wl,gs,xl,fs,$a="You can now run the application with <code>npm run dev</code> and perform multilingual translation directly in your browser!",vl,Bs,zl,Zs,La="To build your application, simply run <code>npm run build</code>. This will bundle your application and output the static files to the <code>dist</code> folder.",Vl,As,Fa='For this demo, we will deploy our application as a static <a href="https://huggingface.co/docs/hub/spaces" rel="nofollow">Hugging Face Space</a>, but you can deploy it anywhere you like! If you haven’t already, you can create a free Hugging Face account <a href="https://huggingface.co/join" rel="nofollow">here</a>.',Yl,Es,_a='<li>Visit <a href="https://huggingface.co/new-space" rel="nofollow">https://huggingface.co/new-space</a> and fill in the form. Remember to select “Static” as the space type.</li> <li>Go to “Files” → “Add file” → “Upload files”. Drag the <code>index.html</code> file and <code>public/</code> folder from the <code>dist</code> folder into the upload box and click “Upload”. After they have uploaded, scroll down to the button and click “Commit changes to main”.</li>',Xl,Ns,Da="<strong>That’s it!</strong> Your application should now be live at <code>https://huggingface.co/spaces/&lt;your-username&gt;/&lt;your-space-name&gt;</code>!",Hl,Qs,$l,$s,Ll;return b=new Mt({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),g=new Rs({props:{title:"Building a React application",local:"building-a-react-application",headingTag:"h1"}}),E=new Rs({props:{title:"Prerequisites",local:"prerequisites",headingTag:"h2"}}),Q=new Rs({props:{title:"Step 1: Initialise the project",local:"step-1-initialise-the-project",headingTag:"h2"}}),R=new d({props:{code:"bnBtJTIwY3JlYXRlJTIwdml0ZSU0MGxhdGVzdCUyMHJlYWN0LXRyYW5zbGF0b3IlMjAtLSUyMC0tdGVtcGxhdGUlMjByZWFjdA==",highlighted:"npm create vite@latest react-translator -- --template react",wrap:!1}}),W=new d({props:{code:"Y2QlMjByZWFjdC10cmFuc2xhdG9yJTBBbnBtJTIwaW5zdGFsbA==",highlighted:`<span class="hljs-built_in">cd</span> react-translator
npm install`,wrap:!1}}),v=new d({props:{code:"bnBtJTIwcnVuJTIwZGV2",highlighted:"npm run dev",wrap:!1}}),V=new Rs({props:{title:"Step 2: Install and configure Transformers.js",local:"step-2-install-and-configure-transformersjs",headingTag:"h2"}}),X=new d({props:{code:"bnBtJTIwaW5zdGFsbCUyMCU0MGh1Z2dpbmdmYWNlJTJGdHJhbnNmb3JtZXJz",highlighted:"npm install @huggingface/transformers",wrap:!1}}),_=new d({props:{code:"aW1wb3J0JTIwJTdCJTIwcGlwZWxpbmUlMkMlMjBUZXh0U3RyZWFtZXIlMjAlN0QlMjBmcm9tJTIwJyU0MGh1Z2dpbmdmYWNlJTJGdHJhbnNmb3JtZXJzJyUzQiUwQSUwQWNsYXNzJTIwTXlUcmFuc2xhdGlvblBpcGVsaW5lJTIwJTdCJTBBJTIwJTIwc3RhdGljJTIwdGFzayUyMCUzRCUyMCd0cmFuc2xhdGlvbiclM0IlMEElMjAlMjBzdGF0aWMlMjBtb2RlbCUyMCUzRCUyMCdYZW5vdmElMkZubGxiLTIwMC1kaXN0aWxsZWQtNjAwTSclM0IlMEElMjAlMjBzdGF0aWMlMjBpbnN0YW5jZSUyMCUzRCUyMG51bGwlM0IlMEElMEElMjAlMjBzdGF0aWMlMjBhc3luYyUyMGdldEluc3RhbmNlKHByb2dyZXNzX2NhbGxiYWNrJTIwJTNEJTIwbnVsbCklMjAlN0IlMEElMjAlMjAlMjAlMjB0aGlzLmluc3RhbmNlJTIwJTNGJTNGJTNEJTIwcGlwZWxpbmUodGhpcy50YXNrJTJDJTIwdGhpcy5tb2RlbCUyQyUyMCU3QiUyMHByb2dyZXNzX2NhbGxiYWNrJTIwJTdEKSUzQiUwQSUyMCUyMCUyMCUyMHJldHVybiUyMHRoaXMuaW5zdGFuY2UlM0IlMEElMjAlMjAlN0QlMEElN0Q=",highlighted:`<span class="hljs-keyword">import</span> { pipeline, <span class="hljs-title class_">TextStreamer</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@huggingface/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-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>;
 }
}`,wrap:!1}}),P=new d({props:{code:"JTJGJTJGJTIwUmVtZW1iZXIlMjB0byUyMGltcG9ydCUyMHRoZSUyMHJlbGV2YW50JTIwaG9va3MlMEFpbXBvcnQlMjAlN0IlMjB1c2VFZmZlY3QlMkMlMjB1c2VSZWYlMkMlMjB1c2VTdGF0ZSUyMCU3RCUyMGZyb20lMjAncmVhY3QnJTBBaW1wb3J0JTIwJy4lMkZBcHAuY3NzJyUwQSUwQWZ1bmN0aW9uJTIwQXBwKCklMjAlN0IlMEElMjAlMjAlMkYlMkYlMjBDcmVhdGUlMjBhJTIwcmVmZXJlbmNlJTIwdG8lMjB0aGUlMjB3b3JrZXIlMjBvYmplY3QuJTBBJTIwJTIwY29uc3QlMjB3b3JrZXIlMjAlM0QlMjB1c2VSZWYobnVsbCklM0IlMEElMEElMjAlMjAlMkYlMkYlMjBXZSUyMHVzZSUyMHRoZSUyMCU2MHVzZUVmZmVjdCU2MCUyMGhvb2slMjB0byUyMHNldHVwJTIwdGhlJTIwd29ya2VyJTIwYXMlMjBzb29uJTIwYXMlMjB0aGUlMjAlNjBBcHAlNjAlMjBjb21wb25lbnQlMjBpcyUyMG1vdW50ZWQuJTBBJTIwJTIwdXNlRWZmZWN0KCgpJTIwJTNEJTNFJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTJGJTJGJTIwQ3JlYXRlJTIwdGhlJTIwd29ya2VyJTIwaWYlMjBpdCUyMGRvZXMlMjBub3QlMjB5ZXQlMjBleGlzdC4lMEElMjAlMjAlMjAlMjB3b3JrZXIuY3VycmVudCUyMCUzRiUzRiUzRCUyMG5ldyUyMFdvcmtlcihuZXclMjBVUkwoJy4lMkZ3b3JrZXIuanMnJTJDJTIwaW1wb3J0Lm1ldGEudXJsKSUyQyUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHR5cGUlM0ElMjAnbW9kdWxlJyUwQSUyMCUyMCUyMCUyMCU3RCklM0IlMEElMEElMjAlMjAlMjAlMjAlMkYlMkYlMjBDcmVhdGUlMjBhJTIwY2FsbGJhY2slMjBmdW5jdGlvbiUyMGZvciUyMG1lc3NhZ2VzJTIwZnJvbSUyMHRoZSUyMHdvcmtlciUyMHRocmVhZC4lMEElMjAlMjAlMjAlMjBjb25zdCUyMG9uTWVzc2FnZVJlY2VpdmVkJTIwJTNEJTIwKGUpJTIwJTNEJTNFJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwVE9ETyUzQSUyMFdpbGwlMjBmaWxsJTIwaW4lMjBsYXRlciUwQSUyMCUyMCUyMCUyMCU3RCUzQiUwQSUwQSUyMCUyMCUyMCUyMCUyRiUyRiUyMEF0dGFjaCUyMHRoZSUyMGNhbGxiYWNrJTIwZnVuY3Rpb24lMjBhcyUyMGFuJTIwZXZlbnQlMjBsaXN0ZW5lci4lMEElMjAlMjAlMjAlMjB3b3JrZXIuY3VycmVudC5hZGRFdmVudExpc3RlbmVyKCdtZXNzYWdlJyUyQyUyMG9uTWVzc2FnZVJlY2VpdmVkKSUzQiUwQSUwQSUyMCUyMCUyMCUyMCUyRiUyRiUyMERlZmluZSUyMGElMjBjbGVhbnVwJTIwZnVuY3Rpb24lMjBmb3IlMjB3aGVuJTIwdGhlJTIwY29tcG9uZW50JTIwaXMlMjB1bm1vdW50ZWQuJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwKCklMjAlM0QlM0UlMjB3b3JrZXIuY3VycmVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdtZXNzYWdlJyUyQyUyMG9uTWVzc2FnZVJlY2VpdmVkKSUzQiUwQSUyMCUyMCU3RCklM0IlMEElMEElMjAlMjByZXR1cm4lMjAoJTBBJTIwJTIwJTIwJTIwJTJGJTJGJTIwVE9ETyUzQSUyMFJlc3QlMjBvZiUyMG91ciUyMGFwcCUyMGdvZXMlMjBoZXJlLi4uJTBBJTIwJTIwKSUwQSU3RCUwQSUwQWV4cG9ydCUyMGRlZmF1bHQlMjBBcHAlMEE=",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">import</span> <span class="hljs-string">&#x27;./App.css&#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-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>
`,wrap:!1}}),q=new Rs({props:{title:"Step 3: Design the user interface",local:"step-3-design-the-user-interface",headingTag:"h2"}}),m=new pt({props:{$$slots:{default:[it]},$$scope:{ctx:Ls}}}),ss=new d({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>
 )
}`,wrap:!1}}),ts=new d({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>
 );
}`,wrap:!1}}),ns=new d({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>;`,wrap:!1}}),Ms=new d({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>
}`,wrap:!1}}),is=new d({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>
)`,wrap:!1}}),Js=new d({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;
}`,wrap:!1}}),ds=new d({props:{code:"JTIzcm9vdCUyMCU3QiUwQSUyMCUyMG1heC13aWR0aCUzQSUyMDEyODBweCUzQiUwQSUyMCUyMG1hcmdpbiUzQSUyMDAlMjBhdXRvJTNCJTBBJTIwJTIwcGFkZGluZyUzQSUyMDJyZW0lM0IlMEElMjAlMjB0ZXh0LWFsaWduJTNBJTIwY2VudGVyJTNCJTBBJTdEJTBBJTBBLmxhbmd1YWdlLWNvbnRhaW5lciUyMCU3QiUwQSUyMCUyMGRpc3BsYXklM0ElMjBmbGV4JTNCJTBBJTIwJTIwZ2FwJTNBJTIwMjBweCUzQiUwQSU3RCUwQSUwQS50ZXh0Ym94LWNvbnRhaW5lciUyMCU3QiUwQSUyMCUyMGRpc3BsYXklM0ElMjBmbGV4JTNCJTBBJTIwJTIwanVzdGlmeS1jb250ZW50JTNBJTIwY2VudGVyJTNCJTBBJTIwJTIwZ2FwJTNBJTIwMjBweCUzQiUwQSUyMCUyMHdpZHRoJTNBJTIwODAwcHglM0IlMEElN0QlMEElMEEudGV4dGJveC1jb250YWluZXIlM0V0ZXh0YXJlYSUyQyUyMC5sYW5ndWFnZS1zZWxlY3RvciUyMCU3QiUwQSUyMCUyMHdpZHRoJTNBJTIwNTAlMjUlM0IlMEElN0QlMEElMEEubGFuZ3VhZ2Utc2VsZWN0b3IlM0VzZWxlY3QlMjAlN0IlMEElMjAlMjB3aWR0aCUzQSUyMDE1MHB4JTNCJTBBJTdEJTBBJTBBLnByb2dyZXNzLWNvbnRhaW5lciUyMCU3QiUwQSUyMCUyMHBvc2l0aW9uJTNBJTIwcmVsYXRpdmUlM0IlMEElMjAlMjBmb250LXNpemUlM0ElMjAxNHB4JTNCJTBBJTIwJTIwY29sb3IlM0ElMjB3aGl0ZSUzQiUwQSUyMCUyMGJhY2tncm91bmQtY29sb3IlM0ElMjAlMjNlOWVjZWYlM0IlMEElMjAlMjBib3JkZXIlM0ElMjBzb2xpZCUyMDFweCUzQiUwQSUyMCUyMGJvcmRlci1yYWRpdXMlM0ElMjA4cHglM0IlMEElMjAlMjB0ZXh0LWFsaWduJTNBJTIwbGVmdCUzQiUwQSUyMCUyMG92ZXJmbG93JTNBJTIwaGlkZGVuJTNCJTBBJTdEJTBBJTBBLnByb2dyZXNzLWJhciUyMCU3QiUwQSUyMCUyMHBhZGRpbmclM0ElMjAwJTIwNHB4JTNCJTBBJTIwJTIwei1pbmRleCUzQSUyMDAlM0IlMEElMjAlMjB0b3AlM0ElMjAwJTNCJTBBJTIwJTIwd2lkdGglM0ElMjAxJTI1JTNCJTBBJTIwJTIwb3ZlcmZsb3clM0ElMjBoaWRkZW4lM0IlMEElMjAlMjBiYWNrZ3JvdW5kLWNvbG9yJTNBJTIwJTIzMDA3YmZmJTNCJTBBJTIwJTIwd2hpdGUtc3BhY2UlM0ElMjBub3dyYXAlM0IlMEElN0QlMEElMEEucHJvZ3Jlc3MtdGV4dCUyMCU3QiUwQSUyMCUyMHotaW5kZXglM0ElMjAyJTNCJTBBJTdEJTBBJTBBLnNlbGVjdG9yLWNvbnRhaW5lciUyMCU3QiUwQSUyMCUyMGRpc3BsYXklM0ElMjBmbGV4JTNCJTBBJTIwJTIwZ2FwJTNBJTIwMjBweCUzQiUwQSU3RCUwQSUwQS5wcm9ncmVzcy1iYXJzLWNvbnRhaW5lciUyMCU3QiUwQSUyMCUyMHBhZGRpbmclM0ElMjA4cHglM0IlMEElMjAlMjBoZWlnaHQlM0ElMjAxNDBweCUzQiUwQSU3RCUwQSUwQS5jb250YWluZXIlMjAlN0IlMEElMjAlMjBtYXJnaW4lM0ElMjAyNXB4JTNCJTBBJTIwJTIwZGlzcGxheSUzQSUyMGZsZXglM0IlMEElMjAlMjBmbGV4LWRpcmVjdGlvbiUzQSUyMGNvbHVtbiUzQiUwQSUyMCUyMGdhcCUzQSUyMDEwcHglM0IlMEElN0Q=",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">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>;
}`,wrap:!1}}),Ts=new Rs({props:{title:"Step 4: Connecting everything together",local:"step-4-connecting-everything-together",headingTag:"h2"}}),ms=new d({props:{code:"Y29uc3QlMjB0cmFuc2xhdGUlMjAlM0QlMjAoKSUyMCUzRCUzRSUyMCU3QiUwQSUyMCUyMHNldERpc2FibGVkKHRydWUpJTNCJTBBJTIwJTIwc2V0T3V0cHV0KCcnKSUzQiUwQSUyMCUyMHdvcmtlci5jdXJyZW50LnBvc3RNZXNzYWdlKCU3QiUwQSUyMCUyMCUyMCUyMHRleHQlM0ElMjBpbnB1dCUyQyUwQSUyMCUyMCUyMCUyMHNyY19sYW5nJTNBJTIwc291cmNlTGFuZ3VhZ2UlMkMlMEElMjAlMjAlMjAlMjB0Z3RfbGFuZyUzQSUyMHRhcmdldExhbmd1YWdlJTJDJTBBJTIwJTIwJTdEKSUzQiUwQSU3RA==",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>);
 <span class="hljs-title function_">setOutput</span>(<span class="hljs-string">&#x27;&#x27;</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,
 });
}`,wrap:!1}}),Is=new d({props:{code:"JTJGJTJGJTIwTGlzdGVuJTIwZm9yJTIwbWVzc2FnZXMlMjBmcm9tJTIwdGhlJTIwbWFpbiUyMHRocmVhZCUwQXNlbGYuYWRkRXZlbnRMaXN0ZW5lcignbWVzc2FnZSclMkMlMjBhc3luYyUyMChldmVudCklMjAlM0QlM0UlMjAlN0IlMEElMjAlMjAlMkYlMkYlMjBSZXRyaWV2ZSUyMHRoZSUyMHRyYW5zbGF0aW9uJTIwcGlwZWxpbmUuJTIwV2hlbiUyMGNhbGxlZCUyMGZvciUyMHRoZSUyMGZpcnN0JTIwdGltZSUyQyUwQSUyMCUyMCUyRiUyRiUyMHRoaXMlMjB3aWxsJTIwbG9hZCUyMHRoZSUyMHBpcGVsaW5lJTIwYW5kJTIwc2F2ZSUyMGl0JTIwZm9yJTIwZnV0dXJlJTIwdXNlLiUwQSUyMCUyMGNvbnN0JTIwdHJhbnNsYXRvciUyMCUzRCUyMGF3YWl0JTIwTXlUcmFuc2xhdGlvblBpcGVsaW5lLmdldEluc3RhbmNlKHglMjAlM0QlM0UlMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMkYlMkYlMjBXZSUyMGFsc28lMjBhZGQlMjBhJTIwcHJvZ3Jlc3MlMjBjYWxsYmFjayUyMHRvJTIwdGhlJTIwcGlwZWxpbmUlMjBzbyUyMHRoYXQlMjB3ZSUyMGNhbiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyRiUyRiUyMHRyYWNrJTIwbW9kZWwlMjBsb2FkaW5nLiUwQSUyMCUyMCUyMCUyMCUyMCUyMHNlbGYucG9zdE1lc3NhZ2UoeCklM0IlMEElMjAlMjAlN0QpJTNCJTBBJTBBJTIwJTIwJTJGJTJGJTIwQ2FwdHVyZSUyMHBhcnRpYWwlMjBvdXRwdXQlMjBhcyUyMGl0JTIwc3RyZWFtcyUyMGZyb20lMjB0aGUlMjBwaXBlbGluZSUwQSUyMCUyMGNvbnN0JTIwc3RyZWFtZXIlMjAlM0QlMjBuZXclMjBUZXh0U3RyZWFtZXIodHJhbnNsYXRvci50b2tlbml6ZXIlMkMlMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjBza2lwX3Byb21wdCUzQSUyMHRydWUlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjBza2lwX3NwZWNpYWxfdG9rZW5zJTNBJTIwdHJ1ZSUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMGNhbGxiYWNrX2Z1bmN0aW9uJTNBJTIwZnVuY3Rpb24lMjAodGV4dCklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBzZWxmLnBvc3RNZXNzYWdlKCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHN0YXR1cyUzQSUyMCd1cGRhdGUnJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwb3V0cHV0JTNBJTIwdGV4dCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCklM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlN0QpJTNCJTBBJTBBJTIwJTIwJTJGJTJGJTIwQWN0dWFsbHklMjBwZXJmb3JtJTIwdGhlJTIwdHJhbnNsYXRpb24lMEElMjAlMjBjb25zdCUyMG91dHB1dCUyMCUzRCUyMGF3YWl0JTIwdHJhbnNsYXRvcihldmVudC5kYXRhLnRleHQlMkMlMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjB0Z3RfbGFuZyUzQSUyMGV2ZW50LmRhdGEudGd0X2xhbmclMkMlMEElMjAlMjAlMjAlMjAlMjAlMjBzcmNfbGFuZyUzQSUyMGV2ZW50LmRhdGEuc3JjX2xhbmclMkMlMEElMEElMjAlMjAlMjAlMjAlMjAlMjAlMkYlMkYlMjBBbGxvd3MlMjBmb3IlMjBwYXJ0aWFsJTIwb3V0cHV0JTIwdG8lMjBiZSUyMGNhcHR1cmVkJTBBJTIwJTIwJTIwJTIwJTIwJTIwc3RyZWFtZXIlMkMlMEElMjAlMjAlN0QpJTNCJTBBJTBBJTIwJTIwJTJGJTJGJTIwU2VuZCUyMHRoZSUyMG91dHB1dCUyMGJhY2slMjB0byUyMHRoZSUyMG1haW4lMjB0aHJlYWQlMEElMjAlMjBzZWxmLnBvc3RNZXNzYWdlKCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMHN0YXR1cyUzQSUyMCdjb21wbGV0ZSclMkMlMEElMjAlMjAlMjAlMjAlMjAlMjBvdXRwdXQlMkMlMEElMjAlMjAlN0QpJTNCJTBBJTdEKSUzQg==",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">const</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">// Capture partial output as it streams from the pipeline</span>
 <span class="hljs-keyword">const</span> streamer = <span class="hljs-keyword">new</span> <span class="hljs-title class_">TextStreamer</span>(translator.<span class="hljs-property">tokenizer</span>, {
 <span class="hljs-attr">skip_prompt</span>: <span class="hljs-literal">true</span>,
 <span class="hljs-attr">skip_special_tokens</span>: <span class="hljs-literal">true</span>,
 <span class="hljs-attr">callback_function</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">text</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>: text
 });
 }
 });
 <span class="hljs-comment">// Actually perform the translation</span>
 <span class="hljs-keyword">const</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 to be captured</span>
 streamer,
 });
 <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>,
 output,
 });
});`,wrap:!1}}),gs=new d({props:{code:"Y29uc3QlMjBvbk1lc3NhZ2VSZWNlaXZlZCUyMCUzRCUyMChlKSUyMCUzRCUzRSUyMCU3QiUwQSUyMCUyMHN3aXRjaCUyMChlLmRhdGEuc3RhdHVzKSUyMCU3QiUwQSUyMCUyMCUyMCUyMGNhc2UlMjAnaW5pdGlhdGUnJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwTW9kZWwlMjBmaWxlJTIwc3RhcnQlMjBsb2FkJTNBJTIwYWRkJTIwYSUyMG5ldyUyMHByb2dyZXNzJTIwaXRlbSUyMHRvJTIwdGhlJTIwbGlzdC4lMEElMjAlMjAlMjAlMjAlMjAlMjBzZXRSZWFkeShmYWxzZSklM0IlMEElMjAlMjAlMjAlMjAlMjAlMjBzZXRQcm9ncmVzc0l0ZW1zKHByZXYlMjAlM0QlM0UlMjAlNUIuLi5wcmV2JTJDJTIwZS5kYXRhJTVEKSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMGJyZWFrJTNCJTBBJTBBJTIwJTIwJTIwJTIwY2FzZSUyMCdwcm9ncmVzcyclM0ElMEElMjAlMjAlMjAlMjAlMjAlMjAlMkYlMkYlMjBNb2RlbCUyMGZpbGUlMjBwcm9ncmVzcyUzQSUyMHVwZGF0ZSUyMG9uZSUyMG9mJTIwdGhlJTIwcHJvZ3Jlc3MlMjBpdGVtcy4lMEElMjAlMjAlMjAlMjAlMjAlMjBzZXRQcm9ncmVzc0l0ZW1zKCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHByZXYlMjAlM0QlM0UlMjBwcmV2Lm1hcChpdGVtJTIwJTNEJTNFJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwaWYlMjAoaXRlbS5maWxlJTIwJTNEJTNEJTNEJTIwZS5kYXRhLmZpbGUpJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTdCJTIwLi4uaXRlbSUyQyUyMHByb2dyZXNzJTNBJTIwZS5kYXRhLnByb2dyZXNzJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcmV0dXJuJTIwaXRlbSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCklMEElMjAlMjAlMjAlMjAlMjAlMjApJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwYnJlYWslM0IlMEElMEElMjAlMjAlMjAlMjBjYXNlJTIwJ2RvbmUnJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwTW9kZWwlMjBmaWxlJTIwbG9hZGVkJTNBJTIwcmVtb3ZlJTIwdGhlJTIwcHJvZ3Jlc3MlMjBpdGVtJTIwZnJvbSUyMHRoZSUyMGxpc3QuJTBBJTIwJTIwJTIwJTIwJTIwJTIwc2V0UHJvZ3Jlc3NJdGVtcyglMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBwcmV2JTIwJTNEJTNFJTIwcHJldi5maWx0ZXIoaXRlbSUyMCUzRCUzRSUyMGl0ZW0uZmlsZSUyMCElM0QlM0QlMjBlLmRhdGEuZmlsZSklMEElMjAlMjAlMjAlMjAlMjAlMjApJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwYnJlYWslM0IlMEElMEElMjAlMjAlMjAlMjBjYXNlJTIwJ3JlYWR5JyUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyRiUyRiUyMFBpcGVsaW5lJTIwcmVhZHklM0ElMjB0aGUlMjB3b3JrZXIlMjBpcyUyMHJlYWR5JTIwdG8lMjBhY2NlcHQlMjBtZXNzYWdlcy4lMEElMjAlMjAlMjAlMjAlMjAlMjBzZXRSZWFkeSh0cnVlKSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMGJyZWFrJTNCJTBBJTBBJTIwJTIwJTIwJTIwY2FzZSUyMCd1cGRhdGUnJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwR2VuZXJhdGlvbiUyMHVwZGF0ZSUzQSUyMHVwZGF0ZSUyMHRoZSUyMG91dHB1dCUyMHRleHQuJTBBJTIwJTIwJTIwJTIwJTIwJTIwc2V0T3V0cHV0KG8lMjAlM0QlM0UlMjBvJTIwJTJCJTIwZS5kYXRhLm91dHB1dCklM0IlMEElMjAlMjAlMjAlMjAlMjAlMjBicmVhayUzQiUwQSUwQSUyMCUyMCUyMCUyMGNhc2UlMjAnY29tcGxldGUnJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwR2VuZXJhdGlvbiUyMGNvbXBsZXRlJTNBJTIwcmUtZW5hYmxlJTIwdGhlJTIwJTIyVHJhbnNsYXRlJTIyJTIwYnV0dG9uJTBBJTIwJTIwJTIwJTIwJTIwJTIwc2V0RGlzYWJsZWQoZmFsc2UpJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwYnJlYWslM0IlMEElMjAlMjAlN0QlMEElN0QlM0I=",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>(<span class="hljs-function"><span class="hljs-params">o</span> =&gt;</span> o + 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>;
 }
};`,wrap:!1}}),Bs=new Rs({props:{title:"(Optional) Step 5: Build and deploy",local:"optional-step-5-build-and-deploy",headingTag:"h2"}}),Qs=new ct({props:{source:"https://github.com/huggingface/transformers.js/blob/main/docs/source/tutorials/react.md"}}),{c(){y=p("meta"),I=e(),w=p("p"),ks=e(),r(b.$$.fragment),Fs=e(),r(g.$$.fragment),_s=e(),f=p("p"),f.textContent=ha,Ds=e(),B=p("p"),B.innerHTML=Ja,Ps=e(),Z=p("p"),Z.textContent=Ua,qs=e(),A=p("ul"),A.innerHTML=ya,Ks=e(),r(E.$$.fragment),Os=e(),N=p("ul"),N.innerHTML=da,sl=e(),r(Q.$$.fragment),ll=e(),G=p("p"),G.innerHTML=Ta,al=e(),r(R.$$.fragment),tl=e(),k=p("p"),k.innerHTML=wa,el=e(),S=p("p"),S.textContent=ua,nl=e(),r(W.$$.fragment),pl=e(),x=p("p"),x.textContent=ma,Ml=e(),r(v.$$.fragment),cl=e(),z=p("p"),z.innerHTML=Ca,il=e(),r(V.$$.fragment),rl=e(),Y=p("p"),Y.innerHTML=Ia,jl=e(),r(X.$$.fragment),ol=e(),H=p("p"),H.innerHTML=ba,hl=e(),$=p("ol"),$.innerHTML=ga,Jl=e(),L=p("p"),L.innerHTML=fa,Ul=e(),u=p("ol"),F=p("li"),Ss=p("p"),Ss.innerHTML=Ba,aa=e(),r(_.$$.fragment),ta=e(),D=p("li"),Ws=p("p"),Ws.innerHTML=Za,ea=e(),r(P.$$.fragment),yl=e(),r(q.$$.fragment),dl=e(),r(m.$$.fragment),Tl=e(),K=p("p"),K.innerHTML=Aa,wl=e(),xs=p("ol"),O=p("li"),vs=p("p"),vs.innerHTML=Ea,na=e(),r(ss.$$.fragment),ul=e(),ls=p("ol"),as=p("li"),zs=p("code"),zs.textContent=Na,pa=tt(`: This component will display the progress for downloading each model file.
 `),r(ts.$$.fragment),ml=e(),es=p("p"),es.innerHTML=Qa,Cl=e(),r(ns.$$.fragment),Il=e(),ps=p("p"),ps.innerHTML=Ga,bl=e(),r(Ms.$$.fragment),gl=e(),cs=p("p"),cs.innerHTML=Ra,fl=e(),r(is.$$.fragment),Bl=e(),rs=p("p"),rs.innerHTML=ka,Zl=e(),js=p("p"),js.innerHTML=Sa,Al=e(),C=p("ol"),os=p("li"),Vs=p("p"),Vs.innerHTML=Wa,Ma=e(),hs=p("details"),Ys=p("summary"),Ys.textContent=xa,ca=e(),r(Js.$$.fragment),ia=e(),Us=p("li"),Xs=p("p"),Xs.innerHTML=va,ra=e(),ys=p("details"),Hs=p("summary"),Hs.textContent=za,ja=e(),r(ds.$$.fragment),El=e(),r(Ts.$$.fragment),Nl=e(),ws=p("p"),ws.textContent=Va,Ql=e(),us=p("p"),us.innerHTML=Ya,Gl=e(),r(ms.$$.fragment),Rl=e(),Cs=p("p"),Cs.innerHTML=Xa,kl=e(),r(Is.$$.fragment),Sl=e(),bs=p("p"),bs.innerHTML=Ha,Wl=e(),r(gs.$$.fragment),xl=e(),fs=p("p"),fs.innerHTML=$a,vl=e(),r(Bs.$$.fragment),zl=e(),Zs=p("p"),Zs.innerHTML=La,Vl=e(),As=p("p"),As.innerHTML=Fa,Yl=e(),Es=p("ol"),Es.innerHTML=_a,Xl=e(),Ns=p("p"),Ns.innerHTML=Da,Hl=e(),r(Qs.$$.fragment),$l=e(),$s=p("p"),this.h()},l(s){const l=et("svelte-u9bgzb",document.head);y=M(l,"META",{name:!0,content:!0}),l.forEach(a),I=n(s),w=M(s,"P",{}),T(w).forEach(a),ks=n(s),j(b.$$.fragment,s),Fs=n(s),j(g.$$.fragment,s),_s=n(s),f=M(s,"P",{"data-svelte-h":!0}),c(f)!=="svelte-dpjqaw"&&(f.textContent=ha),Ds=n(s),B=M(s,"P",{"data-svelte-h":!0}),c(B)!=="svelte-1n9mzrq"&&(B.innerHTML=Ja),Ps=n(s),Z=M(s,"P",{"data-svelte-h":!0}),c(Z)!=="svelte-1tlxmzn"&&(Z.textContent=Ua),qs=n(s),A=M(s,"UL",{"data-svelte-h":!0}),c(A)!=="svelte-1lp1pu2"&&(A.innerHTML=ya),Ks=n(s),j(E.$$.fragment,s),Os=n(s),N=M(s,"UL",{"data-svelte-h":!0}),c(N)!=="svelte-1qy4daj"&&(N.innerHTML=da),sl=n(s),j(Q.$$.fragment,s),ll=n(s),G=M(s,"P",{"data-svelte-h":!0}),c(G)!=="svelte-yun097"&&(G.innerHTML=Ta),al=n(s),j(R.$$.fragment,s),tl=n(s),k=M(s,"P",{"data-svelte-h":!0}),c(k)!=="svelte-jey2qt"&&(k.innerHTML=wa),el=n(s),S=M(s,"P",{"data-svelte-h":!0}),c(S)!=="svelte-1uss4lu"&&(S.textContent=ua),nl=n(s),j(W.$$.fragment,s),pl=n(s),x=M(s,"P",{"data-svelte-h":!0}),c(x)!=="svelte-3f3wv"&&(x.textContent=ma),Ml=n(s),j(v.$$.fragment,s),cl=n(s),z=M(s,"P",{"data-svelte-h":!0}),c(z)!=="svelte-uw3n4a"&&(z.innerHTML=Ca),il=n(s),j(V.$$.fragment,s),rl=n(s),Y=M(s,"P",{"data-svelte-h":!0}),c(Y)!=="svelte-lqc2c5"&&(Y.innerHTML=Ia),jl=n(s),j(X.$$.fragment,s),ol=n(s),H=M(s,"P",{"data-svelte-h":!0}),c(H)!=="svelte-65henz"&&(H.innerHTML=ba),hl=n(s),$=M(s,"OL",{"data-svelte-h":!0}),c($)!=="svelte-10l42oh"&&($.innerHTML=ga),Jl=n(s),L=M(s,"P",{"data-svelte-h":!0}),c(L)!=="svelte-x351t5"&&(L.innerHTML=fa),Ul=n(s),u=M(s,"OL",{});var Gs=T(u);F=M(Gs,"LI",{});var Fl=T(F);Ss=M(Fl,"P",{"data-svelte-h":!0}),c(Ss)!=="svelte-1pdf701"&&(Ss.innerHTML=Ba),aa=n(Fl),j(_.$$.fragment,Fl),Fl.forEach(a),ta=n(Gs),D=M(Gs,"LI",{});var _l=T(D);Ws=M(_l,"P",{"data-svelte-h":!0}),c(Ws)!=="svelte-s97xjw"&&(Ws.innerHTML=Za),ea=n(_l),j(P.$$.fragment,_l),_l.forEach(a),Gs.forEach(a),yl=n(s),j(q.$$.fragment,s),dl=n(s),j(m.$$.fragment,s),Tl=n(s),K=M(s,"P",{"data-svelte-h":!0}),c(K)!=="svelte-11kk027"&&(K.innerHTML=Aa),wl=n(s),xs=M(s,"OL",{});var Pa=T(xs);O=M(Pa,"LI",{});var Dl=T(O);vs=M(Dl,"P",{"data-svelte-h":!0}),c(vs)!=="svelte-6qozfy"&&(vs.innerHTML=Ea),na=n(Dl),j(ss.$$.fragment,Dl),Dl.forEach(a),Pa.forEach(a),ul=n(s),ls=M(s,"OL",{start:!0});var qa=T(ls);as=M(qa,"LI",{});var Pl=T(as);zs=M(Pl,"CODE",{"data-svelte-h":!0}),c(zs)!=="svelte-x5z4ps"&&(zs.textContent=Na),pa=nt(Pl,`: This component will display the progress for downloading each model file.
 `),j(ts.$$.fragment,Pl),Pl.forEach(a),qa.forEach(a),ml=n(s),es=M(s,"P",{"data-svelte-h":!0}),c(es)!=="svelte-q4axcm"&&(es.innerHTML=Qa),Cl=n(s),j(ns.$$.fragment,s),Il=n(s),ps=M(s,"P",{"data-svelte-h":!0}),c(ps)!=="svelte-1c4l5r3"&&(ps.innerHTML=Ga),bl=n(s),j(Ms.$$.fragment,s),gl=n(s),cs=M(s,"P",{"data-svelte-h":!0}),c(cs)!=="svelte-12zt7ut"&&(cs.innerHTML=Ra),fl=n(s),j(is.$$.fragment,s),Bl=n(s),rs=M(s,"P",{"data-svelte-h":!0}),c(rs)!=="svelte-pde8gh"&&(rs.innerHTML=ka),Zl=n(s),js=M(s,"P",{"data-svelte-h":!0}),c(js)!=="svelte-1m2ra9t"&&(js.innerHTML=Sa),Al=n(s),C=M(s,"OL",{});var ql=T(C);os=M(ql,"LI",{});var Kl=T(os);Vs=M(Kl,"P",{"data-svelte-h":!0}),c(Vs)!=="svelte-1xd3pzq"&&(Vs.innerHTML=Wa),Ma=n(Kl),hs=M(Kl,"DETAILS",{});var Ol=T(hs);Ys=M(Ol,"SUMMARY",{"data-svelte-h":!0}),c(Ys)!=="svelte-1hbuv8y"&&(Ys.textContent=xa),ca=n(Ol),j(Js.$$.fragment,Ol),Ol.forEach(a),Kl.forEach(a),ia=n(ql),Us=M(ql,"LI",{});var sa=T(Us);Xs=M(sa,"P",{"data-svelte-h":!0}),c(Xs)!=="svelte-1a8u5ov"&&(Xs.innerHTML=va),ra=n(sa),ys=M(sa,"DETAILS",{});var la=T(ys);Hs=M(la,"SUMMARY",{"data-svelte-h":!0}),c(Hs)!=="svelte-1hbuv8y"&&(Hs.textContent=za),ja=n(la),j(ds.$$.fragment,la),la.forEach(a),sa.forEach(a),ql.forEach(a),El=n(s),j(Ts.$$.fragment,s),Nl=n(s),ws=M(s,"P",{"data-svelte-h":!0}),c(ws)!=="svelte-1wkt7b9"&&(ws.textContent=Va),Ql=n(s),us=M(s,"P",{"data-svelte-h":!0}),c(us)!=="svelte-1ca719u"&&(us.innerHTML=Ya),Gl=n(s),j(ms.$$.fragment,s),Rl=n(s),Cs=M(s,"P",{"data-svelte-h":!0}),c(Cs)!=="svelte-jduhe6"&&(Cs.innerHTML=Xa),kl=n(s),j(Is.$$.fragment,s),Sl=n(s),bs=M(s,"P",{"data-svelte-h":!0}),c(bs)!=="svelte-44tkkh"&&(bs.innerHTML=Ha),Wl=n(s),j(gs.$$.fragment,s),xl=n(s),fs=M(s,"P",{"data-svelte-h":!0}),c(fs)!=="svelte-2gywwo"&&(fs.innerHTML=$a),vl=n(s),j(Bs.$$.fragment,s),zl=n(s),Zs=M(s,"P",{"data-svelte-h":!0}),c(Zs)!=="svelte-10i26x6"&&(Zs.innerHTML=La),Vl=n(s),As=M(s,"P",{"data-svelte-h":!0}),c(As)!=="svelte-1c1gg25"&&(As.innerHTML=Fa),Yl=n(s),Es=M(s,"OL",{"data-svelte-h":!0}),c(Es)!=="svelte-493ag0"&&(Es.innerHTML=_a),Xl=n(s),Ns=M(s,"P",{"data-svelte-h":!0}),c(Ns)!=="svelte-181xlpv"&&(Ns.innerHTML=Da),Hl=n(s),j(Qs.$$.fragment,s),$l=n(s),$s=M(s,"P",{}),T($s).forEach(a),this.h()},h(){oa(y,"name","hf:doc:metadata"),oa(y,"content",jt),oa(ls,"start","2")},m(s,l){i(document.head,y),t(s,I,l),t(s,w,l),t(s,ks,l),o(b,s,l),t(s,Fs,l),o(g,s,l),t(s,_s,l),t(s,f,l),t(s,Ds,l),t(s,B,l),t(s,Ps,l),t(s,Z,l),t(s,qs,l),t(s,A,l),t(s,Ks,l),o(E,s,l),t(s,Os,l),t(s,N,l),t(s,sl,l),o(Q,s,l),t(s,ll,l),t(s,G,l),t(s,al,l),o(R,s,l),t(s,tl,l),t(s,k,l),t(s,el,l),t(s,S,l),t(s,nl,l),o(W,s,l),t(s,pl,l),t(s,x,l),t(s,Ml,l),o(v,s,l),t(s,cl,l),t(s,z,l),t(s,il,l),o(V,s,l),t(s,rl,l),t(s,Y,l),t(s,jl,l),o(X,s,l),t(s,ol,l),t(s,H,l),t(s,hl,l),t(s,$,l),t(s,Jl,l),t(s,L,l),t(s,Ul,l),t(s,u,l),i(u,F),i(F,Ss),i(F,aa),o(_,F,null),i(u,ta),i(u,D),i(D,Ws),i(D,ea),o(P,D,null),t(s,yl,l),o(q,s,l),t(s,dl,l),o(m,s,l),t(s,Tl,l),t(s,K,l),t(s,wl,l),t(s,xs,l),i(xs,O),i(O,vs),i(O,na),o(ss,O,null),t(s,ul,l),t(s,ls,l),i(ls,as),i(as,zs),i(as,pa),o(ts,as,null),t(s,ml,l),t(s,es,l),t(s,Cl,l),o(ns,s,l),t(s,Il,l),t(s,ps,l),t(s,bl,l),o(Ms,s,l),t(s,gl,l),t(s,cs,l),t(s,fl,l),o(is,s,l),t(s,Bl,l),t(s,rs,l),t(s,Zl,l),t(s,js,l),t(s,Al,l),t(s,C,l),i(C,os),i(os,Vs),i(os,Ma),i(os,hs),i(hs,Ys),i(hs,ca),o(Js,hs,null),i(C,ia),i(C,Us),i(Us,Xs),i(Us,ra),i(Us,ys),i(ys,Hs),i(ys,ja),o(ds,ys,null),t(s,El,l),o(Ts,s,l),t(s,Nl,l),t(s,ws,l),t(s,Ql,l),t(s,us,l),t(s,Gl,l),o(ms,s,l),t(s,Rl,l),t(s,Cs,l),t(s,kl,l),o(Is,s,l),t(s,Sl,l),t(s,bs,l),t(s,Wl,l),o(gs,s,l),t(s,xl,l),t(s,fs,l),t(s,vl,l),o(Bs,s,l),t(s,zl,l),t(s,Zs,l),t(s,Vl,l),t(s,As,l),t(s,Yl,l),t(s,Es,l),t(s,Xl,l),t(s,Ns,l),t(s,Hl,l),o(Qs,s,l),t(s,$l,l),t(s,$s,l),Ll=!0},p(s,[l]){const Gs={};l&2&&(Gs.$$scope={dirty:l,ctx:s}),m.$set(Gs)},i(s){Ll||(h(b.$$.fragment,s),h(g.$$.fragment,s),h(E.$$.fragment,s),h(Q.$$.fragment,s),h(R.$$.fragment,s),h(W.$$.fragment,s),h(v.$$.fragment,s),h(V.$$.fragment,s),h(X.$$.fragment,s),h(_.$$.fragment,s),h(P.$$.fragment,s),h(q.$$.fragment,s),h(m.$$.fragment,s),h(ss.$$.fragment,s),h(ts.$$.fragment,s),h(ns.$$.fragment,s),h(Ms.$$.fragment,s),h(is.$$.fragment,s),h(Js.$$.fragment,s),h(ds.$$.fragment,s),h(Ts.$$.fragment,s),h(ms.$$.fragment,s),h(Is.$$.fragment,s),h(gs.$$.fragment,s),h(Bs.$$.fragment,s),h(Qs.$$.fragment,s),Ll=!0)},o(s){J(b.$$.fragment,s),J(g.$$.fragment,s),J(E.$$.fragment,s),J(Q.$$.fragment,s),J(R.$$.fragment,s),J(W.$$.fragment,s),J(v.$$.fragment,s),J(V.$$.fragment,s),J(X.$$.fragment,s),J(_.$$.fragment,s),J(P.$$.fragment,s),J(q.$$.fragment,s),J(m.$$.fragment,s),J(ss.$$.fragment,s),J(ts.$$.fragment,s),J(ns.$$.fragment,s),J(Ms.$$.fragment,s),J(is.$$.fragment,s),J(Js.$$.fragment,s),J(ds.$$.fragment,s),J(Ts.$$.fragment,s),J(ms.$$.fragment,s),J(Is.$$.fragment,s),J(gs.$$.fragment,s),J(Bs.$$.fragment,s),J(Qs.$$.fragment,s),Ll=!1},d(s){s&&(a(I),a(w),a(ks),a(Fs),a(_s),a(f),a(Ds),a(B),a(Ps),a(Z),a(qs),a(A),a(Ks),a(Os),a(N),a(sl),a(ll),a(G),a(al),a(tl),a(k),a(el),a(S),a(nl),a(pl),a(x),a(Ml),a(cl),a(z),a(il),a(rl),a(Y),a(jl),a(ol),a(H),a(hl),a($),a(Jl),a(L),a(Ul),a(u),a(yl),a(dl),a(Tl),a(K),a(wl),a(xs),a(ul),a(ls),a(ml),a(es),a(Cl),a(Il),a(ps),a(bl),a(gl),a(cs),a(fl),a(Bl),a(rs),a(Zl),a(js),a(Al),a(C),a(El),a(Nl),a(ws),a(Ql),a(us),a(Gl),a(Rl),a(Cs),a(kl),a(Sl),a(bs),a(Wl),a(xl),a(fs),a(vl),a(zl),a(Zs),a(Vl),a(As),a(Yl),a(Es),a(Xl),a(Ns),a(Hl),a($l),a($s)),a(y),U(b,s),U(g,s),U(E,s),U(Q,s),U(R,s),U(W,s),U(v,s),U(V,s),U(X,s),U(_),U(P),U(q,s),U(m,s),U(ss),U(ts),U(ns,s),U(Ms,s),U(is,s),U(Js),U(ds),U(Ts,s),U(ms,s),U(Is,s),U(gs,s),U(Bs,s),U(Qs,s)}}}const jt='{"title":"Building a React application","local":"building-a-react-application","sections":[{"title":"Prerequisites","local":"prerequisites","sections":[],"depth":2},{"title":"Step 1: Initialise the project","local":"step-1-initialise-the-project","sections":[],"depth":2},{"title":"Step 2: Install and configure Transformers.js","local":"step-2-install-and-configure-transformersjs","sections":[],"depth":2},{"title":"Step 3: Design the user interface","local":"step-3-design-the-user-interface","sections":[],"depth":2},{"title":"Step 4: Connecting everything together","local":"step-4-connecting-everything-together","sections":[],"depth":2},{"title":"(Optional) Step 5: Build and deploy","local":"optional-step-5-build-and-deploy","sections":[],"depth":2}],"depth":1}';function ot(Ls){return Oa(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Tt extends lt{constructor(y){super(),at(this,y,ot,rt,Ka,{})}}export{Tt as component};

Xet Storage Details

Size:
68.6 kB
·
Xet hash:
7e535331d4ea7449b9d1154fd6d1e8337fb4da843581b8ff40793155512f305c

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.