Spaces:

Vokturz
/

transformers-js-playground

Running

Vokturz commited on Jul 3

Commit

9283c8b

1 Parent(s): 08476ef

Refactor code for consistency and readability

- Standardized string quotes from double to single in various components and files.
- Improved formatting and indentation in App.tsx, Footer.tsx, Header.tsx, and other components for better readability.
- Added a new worker for text classification and updated the existing zero-shot classification worker.
- Cleaned up unused lines and comments in types.ts and other files.
- Updated tailwind.config.js and tsconfig.json for consistency in formatting.
- Ensured all components and files follow a consistent coding style.

Files changed (19) hide show

.prettierrc +7 -0
README.md +0 -1
pnpm-lock.yaml +0 -0
public/index.html +1 -1
react.md +302 -290
src/App.tsx +15 -15
src/Footer.tsx +18 -18
src/Header.tsx +28 -28
src/components/ModelSelector.tsx +5 -1
src/components/PipelineSelector.tsx +5 -2
src/components/TextClassification.tsx +37 -37
src/components/ZeroShotClassification.tsx +52 -51
src/index.css +5 -5
src/types.ts +0 -3
src/worker.js +6 -6
src/workers/{sentiment-analysis.js → text-classification.js} +10 -10
src/workers/zero-shot.js +12 -12
tailwind.config.js +4 -6
tsconfig.json +2 -8

.prettierrc ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "semi": false
+}

README.md CHANGED Viewed

@@ -9,7 +9,6 @@ app_build_command: npm run build
 app_file: build/index.html
 ---
 # Getting Started with Create React App
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

 app_file: build/index.html
 ---
 # Getting Started with Create React App
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

pnpm-lock.yaml CHANGED Viewed

The diff for this file is too large to render. See raw diff

public/index.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

react.md CHANGED Viewed

@@ -1,4 +1,3 @@
 # Building a React application
 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:
@@ -6,16 +5,15 @@ In this tutorial, we'll be building a simple React application that performs mul
 ![Demo](https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/react-translator-demo.gif)
 Useful links:
 - [Demo site](https://huggingface.co/spaces/Xenova/react-translator)
 - [Source code](https://github.com/huggingface/transformers.js-examples/tree/main/react-translator)
 ## Prerequisites
 - [Node.js](https://nodejs.org/en/) version 18+
 - [npm](https://www.npmjs.com/) version 9+
 ## Step 1: Initialise the project
 For this tutorial, we will use [Vite](https://vitejs.dev/) 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:
@@ -51,65 +49,67 @@ npm install @huggingface/transformers
 ```
 For this application, we will use the [Xenova/nllb-200-distilled-600M](https://huggingface.co/Xenova/nllb-200-distilled-600M) model, which can perform multilingual translation among 200 languages. Before we start, there are 2 things we need to take note of:
 1. 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.
 2. Since the model is quite large (>1 GB), we don't want to download it until the user clicks the "Translate" button.
 We can achieve both of these goals by using a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) and some [React hooks](https://react.dev/reference/react).
 1. Create a file called `worker.js` in the `src` 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 `MyTranslationPipeline` class which use the [singleton pattern](https://en.wikipedia.org/wiki/Singleton_pattern) to lazily create a single instance of the pipeline when `getInstance` is first called, and use this pipeline for all subsequent calls:
-    ```javascript
-    import { pipeline, TextStreamer } from '@huggingface/transformers';
-    class MyTranslationPipeline {
-      static task = 'translation';
-      static model = 'Xenova/nllb-200-distilled-600M';
-      static instance = null;
-      static async getInstance(progress_callback = null) {
-        this.instance ??= pipeline(this.task, this.model, { progress_callback });
-        return this.instance;
-      }
-    }
-    ```
 2. Modify `App.jsx` in the `src` directory. This file is automatically created when initializing our React project, and will contain some boilerplate code. Inside the `App` function, let's create the web worker and store a reference to it using the `useRef` hook:
-    ```jsx
-    // Remember to import the relevant hooks
-    import { useEffect, useRef, useState } from 'react'
-    import './App.css'
-    function App() {
-      // Create a reference to the worker object.
-      const worker = useRef(null);
-      // We use the `useEffect` hook to setup the worker as soon as the `App` component is mounted.
-      useEffect(() => {
-        // Create the worker if it does not yet exist.
-        worker.current ??= new Worker(new URL('./worker.js', import.meta.url), {
-            type: 'module'
-        });
-        // Create a callback function for messages from the worker thread.
-        const onMessageReceived = (e) => {
-          // TODO: Will fill in later
-        };
-        // Attach the callback function as an event listener.
-        worker.current.addEventListener('message', onMessageReceived);
-        // Define a cleanup function for when the component is unmounted.
-        return () => worker.current.removeEventListener('message', onMessageReceived);
-      });
-      return (
-        // TODO: Rest of our app goes here...
-      )
-    }
-    export default App
-    ```
 ## Step 3: Design the user interface
@@ -120,58 +120,58 @@ We recommend starting the development server again with `npm run dev`
 </Tip>
 First, let's define our components. Create a folder called `components` in the `src` directory, and create the following files:
-1. `LanguageSelector.jsx`: This component will allow the user to select the input and output languages. Check out the full list of languages [here](https://github.com/huggingface/transformers.js-examples/tree/main/react-translator/src/components/LanguageSelector.jsx).
-    ```jsx
-    const LANGUAGES = {
-      "Acehnese (Arabic script)": "ace_Arab",
-      "Acehnese (Latin script)": "ace_Latn",
-      "Afrikaans": "afr_Latn",
-      ...
-      "Zulu": "zul_Latn",
-    }
-    export default function LanguageSelector({ type, onChange, defaultLanguage }) {
-      return (
-        <div className='language-selector'>
-          <label>{type}: </label>
-          <select onChange={onChange} defaultValue={defaultLanguage}>
-            {Object.entries(LANGUAGES).map(([key, value]) => {
-              return <option key={key} value={value}>{key}</option>
-            })}
-          </select>
-        </div>
-      )
-    }
-    ```
 2. `Progress.jsx`: This component will display the progress for downloading each model file.
-    ```jsx
-    export default function Progress({ text, percentage }) {
-      percentage = percentage ?? 0;
-      return (
-        <div className="progress-container">
-          <div className='progress-bar' style={{ 'width': `${percentage}%` }}>
-            {text} ({`${percentage.toFixed(2)}%`})
-          </div>
-        </div>
-      );
-    }
-    ```
 We can now use these components in `App.jsx` by adding these imports to the top of the file:
 ```jsx
 import LanguageSelector from './components/LanguageSelector';
 import Progress from './components/Progress';
 ```
 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 `App` function in `src/App.jsx`:
 ```jsx
 function App() {
   // Model loading
   const [ready, setReady] = useState(null);
   const [disabled, setDisabled] = useState(false);
@@ -187,8 +187,7 @@ function App() {
 }
 ```
-Next, we can add our custom components to the main `App` component. We will also add two `textarea` elements for input and output text, and a `button` to trigger the translation.  Modify the `return` statement to look like this:
 ```jsx
 return (
@@ -196,200 +195,215 @@ return (
     <h1>Transformers.js</h1>
     <h2>ML-powered multilingual translation in React!</h2>
-    <div className='container'>
-      <div className='language-container'>
-        <LanguageSelector type={"Source"} defaultLanguage={"eng_Latn"} onChange={x => setSourceLanguage(x.target.value)} />
-        <LanguageSelector type={"Target"} defaultLanguage={"fra_Latn"} onChange={x => setTargetLanguage(x.target.value)} />
       </div>
-      <div className='textbox-container'>
-        <textarea value={input} rows={3} onChange={e => setInput(e.target.value)}></textarea>
         <textarea value={output} rows={3} readOnly></textarea>
       </div>
     </div>
-    <button disabled={disabled} onClick={translate}>Translate</button>
-    <div className='progress-bars-container'>
-      {ready === false && (
-        <label>Loading models... (only run once)</label>
-      )}
-      {progressItems.map(data => (
         <div key={data.file}>
           <Progress text={data.file} percentage={data.progress} />
         </div>
       ))}
     </div>
   </>
-)
 ```
 Don't worry about the `translate` function for now. We will define it in the next section.
 Finally, we can add some CSS to make our app look a little nicer. Modify the following files in the `src` directory:
-1. `index.css`:
-    <details>
-    <summary>View code</summary>
-    ```css
-    :root {
-      font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-      line-height: 1.5;
-      font-weight: 400;
-      color: #213547;
-      background-color: #ffffff;
-      font-synthesis: none;
-      text-rendering: optimizeLegibility;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-text-size-adjust: 100%;
-    }
-    body {
-      margin: 0;
-      display: flex;
-      place-items: center;
-      min-width: 320px;
-      min-height: 100vh;
-    }
-    h1 {
-      font-size: 3.2em;
-      line-height: 1;
-    }
-    h1,
-    h2 {
-      margin: 8px;
-    }
-    select {
-      padding: 0.3em;
-      cursor: pointer;
-    }
-    textarea {
-      padding: 0.6em;
-    }
-    button {
-      padding: 0.6em 1.2em;
-      cursor: pointer;
-      font-weight: 500;
-    }
-    button[disabled] {
-      cursor: not-allowed;
-    }
-    select,
-    textarea,
-    button {
-      border-radius: 8px;
-      border: 1px solid transparent;
-      font-size: 1em;
-      font-family: inherit;
-      background-color: #f9f9f9;
-      transition: border-color 0.25s;
-    }
-    select:hover,
-    textarea:hover,
-    button:not([disabled]):hover {
-      border-color: #646cff;
-    }
-    select:focus,
-    select:focus-visible,
-    textarea:focus,
-    textarea:focus-visible,
-    button:focus,
-    button:focus-visible {
-      outline: 4px auto -webkit-focus-ring-color;
-    }
-    ```
-    </details>
 1. `App.css`
-    <details>
-    <summary>View code</summary>
-    ```css
-    #root {
-      max-width: 1280px;
-      margin: 0 auto;
-      padding: 2rem;
-      text-align: center;
-    }
-    .language-container {
-      display: flex;
-      gap: 20px;
-    }
-    .textbox-container {
-      display: flex;
-      justify-content: center;
-      gap: 20px;
-      width: 800px;
-    }
-    .textbox-container>textarea, .language-selector {
-      width: 50%;
-    }
-    .language-selector>select {
-      width: 150px;
-    }
-    .progress-container {
-      position: relative;
-      font-size: 14px;
-      color: white;
-      background-color: #e9ecef;
-      border: solid 1px;
-      border-radius: 8px;
-      text-align: left;
-      overflow: hidden;
-    }
-    .progress-bar {
-      padding: 0 4px;
-      z-index: 0;
-      top: 0;
-      width: 1%;
-      overflow: hidden;
-      background-color: #007bff;
-      white-space: nowrap;
-    }
-    .progress-text {
-      z-index: 2;
-    }
-    .selector-container {
-      display: flex;
-      gap: 20px;
-    }
-    .progress-bars-container {
-      padding: 8px;
-      height: 140px;
-    }
-    .container {
-      margin: 25px;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-    ```
-    </details>
 ## Step 4: Connecting everything together
 Now that we have a basic user interface set up, we can finally connect everything together.
 First, let's define the `translate` function, which will be called when the user clicks the `Translate` 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 `return` statement in the `App` function:
@@ -401,9 +415,9 @@ const translate = () => {
   worker.current.postMessage({
     text: input,
     src_lang: sourceLanguage,
-    tgt_lang: targetLanguage,
   });
-}
 ```
 Now, let's add an event listener in `src/worker.js` 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 `self.postMessage`.
@@ -413,37 +427,37 @@ Now, let's add an event listener in `src/worker.js` to listen for messages from
 self.addEventListener('message', async (event) => {
   // Retrieve the translation pipeline. When called for the first time,
   // this will load the pipeline and save it for future use.
-  const translator = await MyTranslationPipeline.getInstance(x => {
-      // We also add a progress callback to the pipeline so that we can
-      // track model loading.
-      self.postMessage(x);
   });
   // Capture partial output as it streams from the pipeline
   const streamer = new TextStreamer(translator.tokenizer, {
-      skip_prompt: true,
-      skip_special_tokens: true,
-      callback_function: function (text) {
-          self.postMessage({
-              status: 'update',
-              output: text
-          });
-      }
   });
   // Actually perform the translation
   const output = await translator(event.data.text, {
-      tgt_lang: event.data.tgt_lang,
-      src_lang: event.data.src_lang,
-      // Allows for partial output to be captured
-      streamer,
   });
   // Send the output back to the main thread
   self.postMessage({
-      status: 'complete',
-      output,
   });
 });
 ```
@@ -456,15 +470,15 @@ const onMessageReceived = (e) => {
     case 'initiate':
       // Model file start load: add a new progress item to the list.
       setReady(false);
-      setProgressItems(prev => [...prev, e.data]);
       break;
     case 'progress':
       // Model file progress: update one of the progress items.
-      setProgressItems(
-        prev => prev.map(item => {
           if (item.file === e.data.file) {
-            return { ...item, progress: e.data.progress }
           }
           return item;
         })
@@ -473,8 +487,8 @@ const onMessageReceived = (e) => {
     case 'done':
       // Model file loaded: remove the progress item from the list.
-      setProgressItems(
-        prev => prev.filter(item => item.file !== e.data.file)
       );
       break;
@@ -485,7 +499,7 @@ const onMessageReceived = (e) => {
     case 'update':
       // Generation update: update the output text.
-      setOutput(o => o + e.data.output);
       break;
     case 'complete':
@@ -498,8 +512,6 @@ const onMessageReceived = (e) => {
 You can now run the application with `npm run dev` and perform multilingual translation directly in your browser!
 ## (Optional) Step 5: Build and deploy
 To build your application, simply run `npm run build`. This will bundle your application and output the static files to the `dist` folder.
@@ -509,4 +521,4 @@ For this demo, we will deploy our application as a static [Hugging Face Space](h
 1. Visit [https://huggingface.co/new-space](https://huggingface.co/new-space) and fill in the form. Remember to select "Static" as the space type.
 2. Go to "Files" &rarr; "Add file" &rarr; "Upload files". Drag the `index.html` file and `public/` folder from the `dist` folder into the upload box and click "Upload". After they have uploaded, scroll down to the button and click "Commit changes to main".
-**That's it!** Your application should now be live at `https://huggingface.co/spaces/<your-username>/<your-space-name>`!

 # Building a React application
 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:
 ![Demo](https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/react-translator-demo.gif)
 Useful links:
 - [Demo site](https://huggingface.co/spaces/Xenova/react-translator)
 - [Source code](https://github.com/huggingface/transformers.js-examples/tree/main/react-translator)
 ## Prerequisites
 - [Node.js](https://nodejs.org/en/) version 18+
 - [npm](https://www.npmjs.com/) version 9+
 ## Step 1: Initialise the project
 For this tutorial, we will use [Vite](https://vitejs.dev/) 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:
 ```
 For this application, we will use the [Xenova/nllb-200-distilled-600M](https://huggingface.co/Xenova/nllb-200-distilled-600M) model, which can perform multilingual translation among 200 languages. Before we start, there are 2 things we need to take note of:
 1. 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.
 2. Since the model is quite large (>1 GB), we don't want to download it until the user clicks the "Translate" button.
 We can achieve both of these goals by using a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) and some [React hooks](https://react.dev/reference/react).
 1. Create a file called `worker.js` in the `src` 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 `MyTranslationPipeline` class which use the [singleton pattern](https://en.wikipedia.org/wiki/Singleton_pattern) to lazily create a single instance of the pipeline when `getInstance` is first called, and use this pipeline for all subsequent calls:
+   ```javascript
+   import { pipeline, TextStreamer } from '@huggingface/transformers';
+   class MyTranslationPipeline {
+     static task = 'translation';
+     static model = 'Xenova/nllb-200-distilled-600M';
+     static instance = null;
+     static async getInstance(progress_callback = null) {
+       this.instance ??= pipeline(this.task, this.model, { progress_callback });
+       return this.instance;
+     }
+   }
+   ```
 2. Modify `App.jsx` in the `src` directory. This file is automatically created when initializing our React project, and will contain some boilerplate code. Inside the `App` function, let's create the web worker and store a reference to it using the `useRef` hook:
+   ```jsx
+   // Remember to import the relevant hooks
+   import { useEffect, useRef, useState } from 'react'
+   import './App.css'
+   function App() {
+     // Create a reference to the worker object.
+     const worker = useRef(null);
+     // We use the `useEffect` hook to setup the worker as soon as the `App` component is mounted.
+     useEffect(() => {
+       // Create the worker if it does not yet exist.
+       worker.current ??= new Worker(new URL('./worker.js', import.meta.url), {
+           type: 'module'
+       });
+       // Create a callback function for messages from the worker thread.
+       const onMessageReceived = (e) => {
+         // TODO: Will fill in later
+       };
+       // Attach the callback function as an event listener.
+       worker.current.addEventListener('message', onMessageReceived);
+       // Define a cleanup function for when the component is unmounted.
+       return () => worker.current.removeEventListener('message', onMessageReceived);
+     });
+     return (
+       // TODO: Rest of our app goes here...
+     )
+   }
+   export default App
+   ```
 ## Step 3: Design the user interface
 </Tip>
 First, let's define our components. Create a folder called `components` in the `src` directory, and create the following files:
+1. `LanguageSelector.jsx`: This component will allow the user to select the input and output languages. Check out the full list of languages [here](https://github.com/huggingface/transformers.js-examples/tree/main/react-translator/src/components/LanguageSelector.jsx).
+   ```jsx
+   const LANGUAGES = {
+     "Acehnese (Arabic script)": "ace_Arab",
+     "Acehnese (Latin script)": "ace_Latn",
+     "Afrikaans": "afr_Latn",
+     ...
+     "Zulu": "zul_Latn",
+   }
+   export default function LanguageSelector({ type, onChange, defaultLanguage }) {
+     return (
+       <div className='language-selector'>
+         <label>{type}: </label>
+         <select onChange={onChange} defaultValue={defaultLanguage}>
+           {Object.entries(LANGUAGES).map(([key, value]) => {
+             return <option key={key} value={value}>{key}</option>
+           })}
+         </select>
+       </div>
+     )
+   }
+   ```
 2. `Progress.jsx`: This component will display the progress for downloading each model file.
+   ```jsx
+   export default function Progress({ text, percentage }) {
+     percentage = percentage ?? 0;
+     return (
+       <div className="progress-container">
+         <div className="progress-bar" style={{ width: `${percentage}%` }}>
+           {text} ({`${percentage.toFixed(2)}%`})
+         </div>
+       </div>
+     );
+   }
+   ```
 We can now use these components in `App.jsx` by adding these imports to the top of the file:
 ```jsx
 import LanguageSelector from './components/LanguageSelector';
 import Progress from './components/Progress';
 ```
 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 `App` function in `src/App.jsx`:
 ```jsx
 function App() {
   // Model loading
   const [ready, setReady] = useState(null);
   const [disabled, setDisabled] = useState(false);
 }
 ```
+Next, we can add our custom components to the main `App` component. We will also add two `textarea` elements for input and output text, and a `button` to trigger the translation. Modify the `return` statement to look like this:
 ```jsx
 return (
     <h1>Transformers.js</h1>
     <h2>ML-powered multilingual translation in React!</h2>
+    <div className="container">
+      <div className="language-container">
+        <LanguageSelector
+          type={'Source'}
+          defaultLanguage={'eng_Latn'}
+          onChange={(x) => setSourceLanguage(x.target.value)}
+        />
+        <LanguageSelector
+          type={'Target'}
+          defaultLanguage={'fra_Latn'}
+          onChange={(x) => setTargetLanguage(x.target.value)}
+        />
       </div>
+      <div className="textbox-container">
+        <textarea
+          value={input}
+          rows={3}
+          onChange={(e) => setInput(e.target.value)}
+        ></textarea>
         <textarea value={output} rows={3} readOnly></textarea>
       </div>
     </div>
+    <button disabled={disabled} onClick={translate}>
+      Translate
+    </button>
+    <div className="progress-bars-container">
+      {ready === false && <label>Loading models... (only run once)</label>}
+      {progressItems.map((data) => (
         <div key={data.file}>
           <Progress text={data.file} percentage={data.progress} />
         </div>
       ))}
     </div>
   </>
+);
 ```
 Don't worry about the `translate` function for now. We will define it in the next section.
 Finally, we can add some CSS to make our app look a little nicer. Modify the following files in the `src` directory:
+1. `index.css`:
+   <details>
+   <summary>View code</summary>
+   ```css
+   :root {
+     font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+     line-height: 1.5;
+     font-weight: 400;
+     color: #213547;
+     background-color: #ffffff;
+     font-synthesis: none;
+     text-rendering: optimizeLegibility;
+     -webkit-font-smoothing: antialiased;
+     -moz-osx-font-smoothing: grayscale;
+     -webkit-text-size-adjust: 100%;
+   }
+   body {
+     margin: 0;
+     display: flex;
+     place-items: center;
+     min-width: 320px;
+     min-height: 100vh;
+   }
+   h1 {
+     font-size: 3.2em;
+     line-height: 1;
+   }
+   h1,
+   h2 {
+     margin: 8px;
+   }
+   select {
+     padding: 0.3em;
+     cursor: pointer;
+   }
+   textarea {
+     padding: 0.6em;
+   }
+   button {
+     padding: 0.6em 1.2em;
+     cursor: pointer;
+     font-weight: 500;
+   }
+   button[disabled] {
+     cursor: not-allowed;
+   }
+   select,
+   textarea,
+   button {
+     border-radius: 8px;
+     border: 1px solid transparent;
+     font-size: 1em;
+     font-family: inherit;
+     background-color: #f9f9f9;
+     transition: border-color 0.25s;
+   }
+   select:hover,
+   textarea:hover,
+   button:not([disabled]):hover {
+     border-color: #646cff;
+   }
+   select:focus,
+   select:focus-visible,
+   textarea:focus,
+   textarea:focus-visible,
+   button:focus,
+   button:focus-visible {
+     outline: 4px auto -webkit-focus-ring-color;
+   }
+   ```
+   </details>
 1. `App.css`
+   <details>
+   <summary>View code</summary>
+   ```css
+   #root {
+     max-width: 1280px;
+     margin: 0 auto;
+     padding: 2rem;
+     text-align: center;
+   }
+   .language-container {
+     display: flex;
+     gap: 20px;
+   }
+   .textbox-container {
+     display: flex;
+     justify-content: center;
+     gap: 20px;
+     width: 800px;
+   }
+   .textbox-container > textarea,
+   .language-selector {
+     width: 50%;
+   }
+   .language-selector > select {
+     width: 150px;
+   }
+   .progress-container {
+     position: relative;
+     font-size: 14px;
+     color: white;
+     background-color: #e9ecef;
+     border: solid 1px;
+     border-radius: 8px;
+     text-align: left;
+     overflow: hidden;
+   }
+   .progress-bar {
+     padding: 0 4px;
+     z-index: 0;
+     top: 0;
+     width: 1%;
+     overflow: hidden;
+     background-color: #007bff;
+     white-space: nowrap;
+   }
+   .progress-text {
+     z-index: 2;
+   }
+   .selector-container {
+     display: flex;
+     gap: 20px;
+   }
+   .progress-bars-container {
+     padding: 8px;
+     height: 140px;
+   }
+   .container {
+     margin: 25px;
+     display: flex;
+     flex-direction: column;
+     gap: 10px;
+   }
+   ```
+   </details>
 ## Step 4: Connecting everything together
 Now that we have a basic user interface set up, we can finally connect everything together.
 First, let's define the `translate` function, which will be called when the user clicks the `Translate` 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 `return` statement in the `App` function:
   worker.current.postMessage({
     text: input,
     src_lang: sourceLanguage,
+    tgt_lang: targetLanguage
   });
+};
 ```
 Now, let's add an event listener in `src/worker.js` 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 `self.postMessage`.
 self.addEventListener('message', async (event) => {
   // Retrieve the translation pipeline. When called for the first time,
   // this will load the pipeline and save it for future use.
+  const translator = await MyTranslationPipeline.getInstance((x) => {
+    // We also add a progress callback to the pipeline so that we can
+    // track model loading.
+    self.postMessage(x);
   });
   // Capture partial output as it streams from the pipeline
   const streamer = new TextStreamer(translator.tokenizer, {
+    skip_prompt: true,
+    skip_special_tokens: true,
+    callback_function: function (text) {
+      self.postMessage({
+        status: 'update',
+        output: text
+      });
+    }
   });
   // Actually perform the translation
   const output = await translator(event.data.text, {
+    tgt_lang: event.data.tgt_lang,
+    src_lang: event.data.src_lang,
+    // Allows for partial output to be captured
+    streamer
   });
   // Send the output back to the main thread
   self.postMessage({
+    status: 'complete',
+    output
   });
 });
 ```
     case 'initiate':
       // Model file start load: add a new progress item to the list.
       setReady(false);
+      setProgressItems((prev) => [...prev, e.data]);
       break;
     case 'progress':
       // Model file progress: update one of the progress items.
+      setProgressItems((prev) =>
+        prev.map((item) => {
           if (item.file === e.data.file) {
+            return { ...item, progress: e.data.progress };
           }
           return item;
         })
     case 'done':
       // Model file loaded: remove the progress item from the list.
+      setProgressItems((prev) =>
+        prev.filter((item) => item.file !== e.data.file)
       );
       break;
     case 'update':
       // Generation update: update the output text.
+      setOutput((o) => o + e.data.output);
       break;
     case 'complete':
 You can now run the application with `npm run dev` and perform multilingual translation directly in your browser!
 ## (Optional) Step 5: Build and deploy
 To build your application, simply run `npm run build`. This will bundle your application and output the static files to the `dist` folder.
 1. Visit [https://huggingface.co/new-space](https://huggingface.co/new-space) and fill in the form. Remember to select "Static" as the space type.
 2. Go to "Files" &rarr; "Add file" &rarr; "Upload files". Drag the `index.html` file and `public/` folder from the `dist` folder into the upload box and click "Upload". After they have uploaded, scroll down to the button and click "Commit changes to main".
+**That's it!** Your application should now be live at `https://huggingface.co/spaces/<your-username>/<your-space-name>`!

src/App.tsx CHANGED Viewed

@@ -1,12 +1,12 @@
-import { useState } from "react";
-import PipelineSelector from "./components/PipelineSelector";
-import ZeroShotClassification from "./components/ZeroShotClassification";
-import TextClassification from "./components/TextClassification";
-import Header from "./Header";
-import Footer from "./Footer";
 function App() {
-  const [pipeline, setPipeline] = useState("zero-shot-classification");
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
@@ -39,14 +39,14 @@ function App() {
                 </div>
                 <div>
                   <h3 className="text-sm font-medium text-gray-900">
-                    {pipeline === "zero-shot-classification"
-                      ? "Zero-Shot Classification"
-                      : "Text-Classification"}
                   </h3>
                   <p className="text-sm text-gray-600 mt-1">
-                    {pipeline === "zero-shot-classification"
-                      ? "Classify text into custom categories without training data. Perfect for organizing content, routing messages, or analyzing feedback."
-                      : "Classify text into predefined categories. Ideal for sentiment analysis, spam detection, or topic categorization."}
                   </p>
                 </div>
               </div>
@@ -56,10 +56,10 @@ function App() {
         {/* Pipeline Component */}
         <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
-          {pipeline === "zero-shot-classification" && (
             <ZeroShotClassification />
           )}
-          {pipeline === "text-classification" && <TextClassification />}
         </div>
       </main>

+import { useState } from 'react';
+import PipelineSelector from './components/PipelineSelector';
+import ZeroShotClassification from './components/ZeroShotClassification';
+import TextClassification from './components/TextClassification';
+import Header from './Header';
+import Footer from './Footer';
 function App() {
+  const [pipeline, setPipeline] = useState('zero-shot-classification');
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
                 </div>
                 <div>
                   <h3 className="text-sm font-medium text-gray-900">
+                    {pipeline === 'zero-shot-classification'
+                      ? 'Zero-Shot Classification'
+                      : 'Text-Classification'}
                   </h3>
                   <p className="text-sm text-gray-600 mt-1">
+                    {pipeline === 'zero-shot-classification'
+                      ? 'Classify text into custom categories without training data. Perfect for organizing content, routing messages, or analyzing feedback.'
+                      : 'Classify text into predefined categories. Ideal for sentiment analysis, spam detection, or topic categorization.'}
                   </p>
                 </div>
               </div>
         {/* Pipeline Component */}
         <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
+          {pipeline === 'zero-shot-classification' && (
             <ZeroShotClassification />
           )}
+          {pipeline === 'text-classification' && <TextClassification />}
         </div>
       </main>

src/Footer.tsx CHANGED Viewed

@@ -1,26 +1,26 @@
 function Footer() {
   return (
     <footer className="bg-white border-t mt-12">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-4 text-sm text-gray-500">
-              <span>Powered by</span>
-              <a
-                href="https://huggingface.co/docs/transformers.js"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center space-x-1 text-blue-600 hover:text-blue-800 font-medium"
-              >
-                <span>🤗 Transformers.js</span>
-              </a>
-            </div>
-            <div className="text-sm text-gray-500">
-              All processing happens in your browser - your data stays private
-            </div>
           </div>
         </div>
-      </footer>
   );
 }
-export default Footer;

 function Footer() {
   return (
     <footer className="bg-white border-t mt-12">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-4 text-sm text-gray-500">
+            <span>Powered by</span>
+            <a
+              href="https://huggingface.co/docs/transformers.js"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center space-x-1 text-blue-600 hover:text-blue-800 font-medium"
+            >
+              <span>🤗 Transformers.js</span>
+            </a>
+          </div>
+          <div className="text-sm text-gray-500">
+            All processing happens in your browser - your data stays private
           </div>
         </div>
+      </div>
+    </footer>
   );
 }
+export default Footer;

src/Header.tsx CHANGED Viewed

@@ -1,35 +1,35 @@
 function Header() {
-    return (
     <header className="bg-white shadow-sm border-b">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex items-center justify-between h-16">
-            <div className="flex items-center space-x-3">
-              <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
-                <svg
-                  className="w-5 h-5 text-white"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-              <div>
-                <h1 className="text-xl font-bold text-gray-900">
-                  Transformers.js Playground
-                </h1>
-                <p className="text-sm text-gray-500">
-                  Run Hugging Face models in your browser
-                </p>
-              </div>
             </div>
           </div>
         </div>
-      </header>
-    )
 }
-export default Header;

 function Header() {
+  return (
     <header className="bg-white shadow-sm border-b">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-center h-16">
+          <div className="flex items-center space-x-3">
+            <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
+              <svg
+                className="w-5 h-5 text-white"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </div>
+            <div>
+              <h1 className="text-xl font-bold text-gray-900">
+                Transformers.js Playground
+              </h1>
+              <p className="text-sm text-gray-500">
+                Run Hugging Face models in your browser
+              </p>
             </div>
           </div>
         </div>
+      </div>
+    </header>
+  );
 }
+export default Header;

src/components/ModelSelector.tsx CHANGED Viewed

@@ -6,7 +6,11 @@ interface ModelSelectorProps {
   models: string[];
 }
-const ModelSelector: React.FC<ModelSelectorProps> = ({ model, setModel, models }) => {
   return (
     <select value={model} onChange={(e) => setModel(e.target.value)}>
       {models.map((m) => (

   models: string[];
 }
+const ModelSelector: React.FC<ModelSelectorProps> = ({
+  model,
+  setModel,
+  models
+}) => {
   return (
     <select value={model} onChange={(e) => setModel(e.target.value)}>
       {models.map((m) => (

src/components/PipelineSelector.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ const pipelines = [
   'text-classification',
   'image-classification',
   'question-answering',
-  'translation',
 ];
 interface PipelineSelectorProps {
@@ -13,7 +13,10 @@ interface PipelineSelectorProps {
   setPipeline: (pipeline: string) => void;
 }
-const PipelineSelector: React.FC<PipelineSelectorProps> = ({ pipeline, setPipeline }) => {
   return (
     <select value={pipeline} onChange={(e) => setPipeline(e.target.value)}>
       {pipelines.map((p) => (

   'text-classification',
   'image-classification',
   'question-answering',
+  'translation'
 ];
 interface PipelineSelectorProps {
   setPipeline: (pipeline: string) => void;
 }
+const PipelineSelector: React.FC<PipelineSelectorProps> = ({
+  pipeline,
+  setPipeline
+}) => {
   return (
     <select value={pipeline} onChange={(e) => setPipeline(e.target.value)}>
       {pipelines.map((p) => (

src/components/TextClassification.tsx CHANGED Viewed

@@ -1,23 +1,27 @@
-import { useState, useRef, useEffect, useCallback } from "react";
-import { ClassificationOutput, TextClassificationWorkerInput, WorkerMessage } from "../types";
 const PLACEHOLDER_TEXTS: string[] = [
-  "I absolutely love this product! It exceeded all my expectations.",
   "This is the worst purchase I've ever made. Complete waste of money.",
-  "The service was okay, nothing special but not terrible either.",
-  "Amazing quality and fast delivery. Highly recommended!",
   "I'm not sure how I feel about this. It's decent but could be better.",
-  "Terrible customer service. They were rude and unhelpful.",
   "Great value for money. I'm very satisfied with my purchase.",
-  "The product arrived damaged and the return process was a nightmare.",
-  "Pretty good overall. A few minor issues but mostly positive experience.",
-  "Outstanding! This company really knows how to treat their customers.",
 ].sort(() => Math.random() - 0.5);
 function TextClassification() {
-  const [text, setText] = useState<string>(PLACEHOLDER_TEXTS.join("\n"));
   const [results, setResults] = useState<ClassificationOutput[]>([]);
-  const [status, setStatus] = useState<string>("idle");
   const [progress, setProgress] = useState<number>(0);
   // Create a reference to the worker object.
@@ -28,9 +32,9 @@ function TextClassification() {
     if (!worker.current) {
       // Create the worker if it does not yet exist.
       worker.current = new Worker(
-        new URL("../workers/sentiment-analysis.js", import.meta.url),
         {
-          type: "module",
         }
       );
     }
@@ -38,49 +42,48 @@ function TextClassification() {
     // Create a callback function for messages from the worker thread.
     const onMessageReceived = (e: MessageEvent<WorkerMessage>) => {
       const status = e.data.status;
-      if (status === "initiate") {
-        setStatus("loading");
-      } else if (status === "ready") {
-        setStatus("ready");
-      } else if (status === "progress") {
-        setStatus("progress");
         if (
           e.data.output.progress &&
-          (e.data.output.file as string).startsWith("onnx")
         )
           setProgress(e.data.output.progress);
-      } else if (status === "output") {
         const result = e.data.output!;
         setResults((prevResults) => [...prevResults, result]);
         console.log(result);
-      } else if (status === "complete") {
-        setStatus("idle");
         setProgress(100);
       }
     };
     // Attach the callback function as an event listener.
-    worker.current.addEventListener("message", onMessageReceived);
     // Define a cleanup function for when the component is unmounted.
     return () =>
-      worker.current?.removeEventListener("message", onMessageReceived);
   }, []);
   const classify = useCallback(() => {
-    setStatus("processing");
     setResults([]); // Clear previous results
     const message: TextClassificationWorkerInput = { text };
     worker.current?.postMessage(message);
   }, [text]);
-  const busy: boolean = status !== "idle";
   const handleClear = (): void => {
     setResults([]);
   };
   return (
     <div className="flex flex-col h-[40vh] max-h-[80vh] w-full p-4">
       <h1 className="text-2xl font-bold mb-4">Text Classification</h1>
@@ -103,12 +106,12 @@ function TextClassification() {
               onClick={classify}
             >
               {!busy
-                ? "Classify Text"
-                : status === "loading"
-                ? "Model loading..."
-                : "Processing..."}
             </button>
-            {status === "progress" && (
               <div className="text-sm font-medium">{progress}%</div>
             )}
             <button
@@ -134,10 +137,7 @@ function TextClassification() {
             ) : (
               <div className="space-y-3">
                 {results.map((result, index) => (
-                  <div
-                    key={index}
-                    className="p-3 rounded border-2"
-                  >
                     <div className="flex justify-between items-start mb-2">
                       <span className="font-semibold text-sm">
                         {result.labels[0]}

+import { useState, useRef, useEffect, useCallback } from 'react';
+import {
+  ClassificationOutput,
+  TextClassificationWorkerInput,
+  WorkerMessage
+} from '../types';
 const PLACEHOLDER_TEXTS: string[] = [
+  'I absolutely love this product! It exceeded all my expectations.',
   "This is the worst purchase I've ever made. Complete waste of money.",
+  'The service was okay, nothing special but not terrible either.',
+  'Amazing quality and fast delivery. Highly recommended!',
   "I'm not sure how I feel about this. It's decent but could be better.",
+  'Terrible customer service. They were rude and unhelpful.',
   "Great value for money. I'm very satisfied with my purchase.",
+  'The product arrived damaged and the return process was a nightmare.',
+  'Pretty good overall. A few minor issues but mostly positive experience.',
+  'Outstanding! This company really knows how to treat their customers.'
 ].sort(() => Math.random() - 0.5);
 function TextClassification() {
+  const [text, setText] = useState<string>(PLACEHOLDER_TEXTS.join('\n'));
   const [results, setResults] = useState<ClassificationOutput[]>([]);
+  const [status, setStatus] = useState<string>('idle');
   const [progress, setProgress] = useState<number>(0);
   // Create a reference to the worker object.
     if (!worker.current) {
       // Create the worker if it does not yet exist.
       worker.current = new Worker(
+        new URL('../workers/text-classification.js', import.meta.url),
         {
+          type: 'module'
         }
       );
     }
     // Create a callback function for messages from the worker thread.
     const onMessageReceived = (e: MessageEvent<WorkerMessage>) => {
       const status = e.data.status;
+      if (status === 'initiate') {
+        setStatus('loading');
+      } else if (status === 'ready') {
+        setStatus('ready');
+      } else if (status === 'progress') {
+        setStatus('progress');
         if (
           e.data.output.progress &&
+          (e.data.output.file as string).startsWith('onnx')
         )
           setProgress(e.data.output.progress);
+      } else if (status === 'output') {
         const result = e.data.output!;
         setResults((prevResults) => [...prevResults, result]);
         console.log(result);
+      } else if (status === 'complete') {
+        setStatus('idle');
         setProgress(100);
       }
     };
     // Attach the callback function as an event listener.
+    worker.current.addEventListener('message', onMessageReceived);
     // Define a cleanup function for when the component is unmounted.
     return () =>
+      worker.current?.removeEventListener('message', onMessageReceived);
   }, []);
   const classify = useCallback(() => {
+    setStatus('processing');
     setResults([]); // Clear previous results
     const message: TextClassificationWorkerInput = { text };
     worker.current?.postMessage(message);
   }, [text]);
+  const busy: boolean = status !== 'idle';
   const handleClear = (): void => {
     setResults([]);
   };
   return (
     <div className="flex flex-col h-[40vh] max-h-[80vh] w-full p-4">
       <h1 className="text-2xl font-bold mb-4">Text Classification</h1>
               onClick={classify}
             >
               {!busy
+                ? 'Classify Text'
+                : status === 'loading'
+                ? 'Model loading...'
+                : 'Processing...'}
             </button>
+            {status === 'progress' && (
               <div className="text-sm font-medium">{progress}%</div>
             )}
             <button
             ) : (
               <div className="space-y-3">
                 {results.map((result, index) => (
+                  <div key={index} className="p-3 rounded border-2">
                     <div className="flex justify-between items-start mb-2">
                       <span className="font-semibold text-sm">
                         {result.labels[0]}

src/components/ZeroShotClassification.tsx CHANGED Viewed

@@ -1,10 +1,10 @@
 // src/App.tsx
-import { useState, useRef, useEffect, useCallback } from "react";
-import { Section, WorkerMessage, ZeroShotWorkerInput } from "../types";
 const PLACEHOLDER_REVIEWS: string[] = [
   // battery/charging problems
-  "Disappointed with the battery life! The phone barely lasts half a day with regular use. Considering how much I paid for it, I expected better performance in this department.",
   "I bought this phone a week ago, and I'm already frustrated with the battery life. It barely lasts half a day with normal usage. I expected more from a supposedly high-end device",
   "The charging port is so finicky. Sometimes it takes forever to charge, and other times it doesn't even recognize the charger. Frustrating experience!",
@@ -14,37 +14,37 @@ const PLACEHOLDER_REVIEWS: string[] = [
   "Forget about a heatwave outside; my phone's got its own. It's like a little portable heater. Not what I signed up for.",
   // poor build quality
-  "I dropped the phone from a short distance, and the screen cracked easily. Not as durable as I expected from a flagship device.",
-  "Took a slight bump in my bag, and the frame got dinged. Are we back in the flip phone era?",
   "So, my phone's been in my pocket with just keys – no ninja moves or anything. Still, it managed to get some scratches. Disappointed with the build quality.",
   // software
-  "The software updates are a nightmare. Each update seems to introduce new bugs, and it takes forever for them to be fixed.",
-  "Constant crashes and freezes make me want to throw it into a black hole.",
   "Every time I open Instagram, my phone freezes and crashes. It's so frustrating!",
   // other
   "I'm not sure what to make of this phone. It's not bad, but it's not great either. I'm on the fence about it.",
   "I hate the color of this phone. It's so ugly!",
-  "This phone sucks! I'm returning it.",
 ].sort(() => Math.random() - 0.5);
 const PLACEHOLDER_SECTIONS: string[] = [
-  "Battery and charging problems",
-  "Overheating",
-  "Poor build quality",
-  "Software issues",
-  "Other",
 ];
 function ZeroShotClassification() {
-  const [text, setText] = useState<string>(PLACEHOLDER_REVIEWS.join("\n"));
   const [sections, setSections] = useState<Section[]>(
-    PLACEHOLDER_SECTIONS.map((title) => ({ title, items: [] })),
   );
-  const [status, setStatus] = useState<string>("idle");
   const [progress, setProgress] = useState<number>(0);
   // Create a reference to the worker object.
@@ -55,9 +55,9 @@ function ZeroShotClassification() {
     if (!worker.current) {
       // Create the worker if it does not yet exist.
       worker.current = new Worker(
-        new URL("../workers/zero-shot.js", import.meta.url),
         {
-          type: "module",
         }
       );
     }
@@ -65,19 +65,22 @@ function ZeroShotClassification() {
     // Create a callback function for messages from the worker thread.
     const onMessageReceived = (e: MessageEvent<WorkerMessage>) => {
       const status = e.data.status;
-      if (status === "initiate") {
-        setStatus("loading");
-      } else if (status === "ready") {
-        setStatus("ready");
-      } else if (status === "progress") {
-        setStatus("progress");
-        if (e.data.output.progress && (e.data.output.file as string).startsWith('onnx'))
-          setProgress(e.data.output.progress)
-      } else if (status === "output") {
         const { sequence, labels, scores } = e.data.output!;
         // Threshold for classification
-        const label = scores[0] > 0.5 ? labels[0] : "Other";
         const sectionID =
           sections.map((x) => x.title).indexOf(label) ?? sections.length - 1;
@@ -85,44 +88,44 @@ function ZeroShotClassification() {
           const newSections = [...sections];
           newSections[sectionID] = {
             ...newSections[sectionID],
-            items: [...newSections[sectionID].items, sequence],
           };
           return newSections;
         });
-      } else if (status === "complete") {
-        setStatus("idle");
-        setProgress(100)
       }
     };
     // Attach the callback function as an event listener.
-    worker.current.addEventListener("message", onMessageReceived);
     // Define a cleanup function for when the component is unmounted.
     return () =>
-      worker.current?.removeEventListener("message", onMessageReceived);
   }, [sections]);
   const classify = useCallback(() => {
-    setStatus("processing");
     const message: ZeroShotWorkerInput = {
       text,
       labels: sections
         .slice(0, sections.length - 1)
-        .map((section) => section.title),
     };
     worker.current?.postMessage(message);
   }, [text, sections]);
-  const busy: boolean = status !== "idle";
   const handleAddCategory = (): void => {
     setSections((sections) => {
       const newSections = [...sections];
       // add at position 2 from the end
       newSections.splice(newSections.length - 1, 0, {
-        title: "New Category",
-        items: [],
       });
       return newSections;
     });
@@ -140,8 +143,8 @@ function ZeroShotClassification() {
     setSections((sections) =>
       sections.map((section) => ({
         ...section,
-        items: [],
-      })),
     );
   };
@@ -167,16 +170,14 @@ function ZeroShotClassification() {
           onClick={classify}
         >
           {!busy
-            ? "Categorize"
-            : status === "loading"
-              ? "Model loading..."
-              : "Processing"}
         </button>
-        {  status === "progress" &&
-          <div className="text-sm font-medium">
-            {progress}%
-          </div>
-        }
         <div className="flex gap-1">
           <button
             className="border py-1 px-2 bg-green-400 rounded text-white text-sm font-medium cursor-pointer"
@@ -204,7 +205,7 @@ function ZeroShotClassification() {
         {sections.map((section, index) => (
           <div key={index} className="flex flex-col w-full">
             <input
-              disabled={section.title === "Other"}
               className="w-full border px-1 text-center"
               value={section.title}
               onChange={(e) => handleSectionTitleChange(index, e.target.value)}

 // src/App.tsx
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Section, WorkerMessage, ZeroShotWorkerInput } from '../types';
 const PLACEHOLDER_REVIEWS: string[] = [
   // battery/charging problems
+  'Disappointed with the battery life! The phone barely lasts half a day with regular use. Considering how much I paid for it, I expected better performance in this department.',
   "I bought this phone a week ago, and I'm already frustrated with the battery life. It barely lasts half a day with normal usage. I expected more from a supposedly high-end device",
   "The charging port is so finicky. Sometimes it takes forever to charge, and other times it doesn't even recognize the charger. Frustrating experience!",
   "Forget about a heatwave outside; my phone's got its own. It's like a little portable heater. Not what I signed up for.",
   // poor build quality
+  'I dropped the phone from a short distance, and the screen cracked easily. Not as durable as I expected from a flagship device.',
+  'Took a slight bump in my bag, and the frame got dinged. Are we back in the flip phone era?',
   "So, my phone's been in my pocket with just keys – no ninja moves or anything. Still, it managed to get some scratches. Disappointed with the build quality.",
   // software
+  'The software updates are a nightmare. Each update seems to introduce new bugs, and it takes forever for them to be fixed.',
+  'Constant crashes and freezes make me want to throw it into a black hole.',
   "Every time I open Instagram, my phone freezes and crashes. It's so frustrating!",
   // other
   "I'm not sure what to make of this phone. It's not bad, but it's not great either. I'm on the fence about it.",
   "I hate the color of this phone. It's so ugly!",
+  "This phone sucks! I'm returning it."
 ].sort(() => Math.random() - 0.5);
 const PLACEHOLDER_SECTIONS: string[] = [
+  'Battery and charging problems',
+  'Overheating',
+  'Poor build quality',
+  'Software issues',
+  'Other'
 ];
 function ZeroShotClassification() {
+  const [text, setText] = useState<string>(PLACEHOLDER_REVIEWS.join('\n'));
   const [sections, setSections] = useState<Section[]>(
+    PLACEHOLDER_SECTIONS.map((title) => ({ title, items: [] }))
   );
+  const [status, setStatus] = useState<string>('idle');
   const [progress, setProgress] = useState<number>(0);
   // Create a reference to the worker object.
     if (!worker.current) {
       // Create the worker if it does not yet exist.
       worker.current = new Worker(
+        new URL('../workers/zero-shot.js', import.meta.url),
         {
+          type: 'module'
         }
       );
     }
     // Create a callback function for messages from the worker thread.
     const onMessageReceived = (e: MessageEvent<WorkerMessage>) => {
       const status = e.data.status;
+      if (status === 'initiate') {
+        setStatus('loading');
+      } else if (status === 'ready') {
+        setStatus('ready');
+      } else if (status === 'progress') {
+        setStatus('progress');
+        if (
+          e.data.output.progress &&
+          (e.data.output.file as string).startsWith('onnx')
+        )
+          setProgress(e.data.output.progress);
+      } else if (status === 'output') {
         const { sequence, labels, scores } = e.data.output!;
         // Threshold for classification
+        const label = scores[0] > 0.5 ? labels[0] : 'Other';
         const sectionID =
           sections.map((x) => x.title).indexOf(label) ?? sections.length - 1;
           const newSections = [...sections];
           newSections[sectionID] = {
             ...newSections[sectionID],
+            items: [...newSections[sectionID].items, sequence]
           };
           return newSections;
         });
+      } else if (status === 'complete') {
+        setStatus('idle');
+        setProgress(100);
       }
     };
     // Attach the callback function as an event listener.
+    worker.current.addEventListener('message', onMessageReceived);
     // Define a cleanup function for when the component is unmounted.
     return () =>
+      worker.current?.removeEventListener('message', onMessageReceived);
   }, [sections]);
   const classify = useCallback(() => {
+    setStatus('processing');
     const message: ZeroShotWorkerInput = {
       text,
       labels: sections
         .slice(0, sections.length - 1)
+        .map((section) => section.title)
     };
     worker.current?.postMessage(message);
   }, [text, sections]);
+  const busy: boolean = status !== 'idle';
   const handleAddCategory = (): void => {
     setSections((sections) => {
       const newSections = [...sections];
       // add at position 2 from the end
       newSections.splice(newSections.length - 1, 0, {
+        title: 'New Category',
+        items: []
       });
       return newSections;
     });
     setSections((sections) =>
       sections.map((section) => ({
         ...section,
+        items: []
+      }))
     );
   };
           onClick={classify}
         >
           {!busy
+            ? 'Categorize'
+            : status === 'loading'
+              ? 'Model loading...'
+              : 'Processing'}
         </button>
+        {status === 'progress' && (
+          <div className="text-sm font-medium">{progress}%</div>
+        )}
         <div className="flex gap-1">
           <button
             className="border py-1 px-2 bg-green-400 rounded text-white text-sm font-medium cursor-pointer"
         {sections.map((section, index) => (
           <div key={index} className="flex flex-col w-full">
             <input
+              disabled={section.title === 'Other'}
               className="w-full border px-1 text-center"
               value={section.title}
               onChange={(e) => handleSectionTitleChange(index, e.target.value)}

src/index.css CHANGED Viewed

@@ -4,14 +4,14 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
 }

 body {
   margin: 0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

src/types.ts CHANGED Viewed

@@ -9,8 +9,6 @@ export interface ClassificationOutput {
   scores: number[];
 }
 export interface WorkerMessage {
   status: 'initiate' | 'ready' | 'output' | 'complete' | 'progress';
   output?: any;
@@ -21,7 +19,6 @@ export interface ZeroShotWorkerInput {
   labels: string[];
 }
 export interface TextClassificationWorkerInput {
   text: string;
 }

   scores: number[];
 }
 export interface WorkerMessage {
   status: 'initiate' | 'ready' | 'output' | 'complete' | 'progress';
   output?: any;
   labels: string[];
 }
 export interface TextClassificationWorkerInput {
   text: string;
 }

src/worker.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /* eslint-disable no-restricted-globals */
-import { pipeline } from "@huggingface/transformers";
 class PipelineFactory {
   static task = null;
@@ -9,7 +9,7 @@ class PipelineFactory {
   static async getInstance(progress_callback = null) {
     if (this.instance === null) {
       this.instance = pipeline(this.task, this.model, {
-        progress_callback,
       });
     }
@@ -18,7 +18,7 @@ class PipelineFactory {
 }
 // Listen for messages from the main thread
-self.addEventListener("message", async (event) => {
   const { task, model, input } = event.data;
   PipelineFactory.task = task;
@@ -29,15 +29,15 @@ self.addEventListener("message", async (event) => {
   const pipe = await PipelineFactory.getInstance((x) => {
     // We also add a progress callback to the pipeline so that we can
     // track model loading.
-    self.postMessage({ status: "progress", data: x });
   });
   // Run the pipeline
   const output = await pipe(...input);
   // Send the output back to the main thread
-  self.postMessage({ status: "output", output });
   // Send the output back to the main thread
-  self.postMessage({ status: "complete" });
 });

 /* eslint-disable no-restricted-globals */
+import { pipeline } from '@huggingface/transformers';
 class PipelineFactory {
   static task = null;
   static async getInstance(progress_callback = null) {
     if (this.instance === null) {
       this.instance = pipeline(this.task, this.model, {
+        progress_callback
       });
     }
 }
 // Listen for messages from the main thread
+self.addEventListener('message', async (event) => {
   const { task, model, input } = event.data;
   PipelineFactory.task = task;
   const pipe = await PipelineFactory.getInstance((x) => {
     // We also add a progress callback to the pipeline so that we can
     // track model loading.
+    self.postMessage({ status: 'progress', data: x });
   });
   // Run the pipeline
   const output = await pipe(...input);
   // Send the output back to the main thread
+  self.postMessage({ status: 'output', output });
   // Send the output back to the main thread
+  self.postMessage({ status: 'complete' });
 });

src/workers/{sentiment-analysis.js → text-classification.js} RENAMED Viewed

@@ -1,14 +1,14 @@
 /* eslint-disable no-restricted-globals */
-import { pipeline } from "@huggingface/transformers";
 class MyTextClassificationPipeline {
-  static task = "text-classification";
-  static model = "Xenova/bert-base-multilingual-uncased-sentiment";
   static instance = null;
   static async getInstance(progress_callback = null) {
     this.instance ??= pipeline(this.task, this.model, {
-      progress_callback,
     });
     return this.instance;
@@ -16,24 +16,24 @@ class MyTextClassificationPipeline {
 }
 // Listen for messages from the main thread
-self.addEventListener("message", async (event) => {
   // Retrieve the pipeline. When called for the first time,
   // this will load the pipeline and save it for future use.
   const classifier = await MyTextClassificationPipeline.getInstance((x) => {
     // We also add a progress callback to the pipeline so that we can
     // track model loading.
-    self.postMessage({ status: "progress", output: x });
   });
   const { text } = event.data;
-  const split = text.split("\n");
   for (const line of split) {
     if (line.trim()) {
       const output = await classifier(line);
       // Send the output back to the main thread
-      self.postMessage({
-        status: "output",
         output: {
           sequence: line,
           labels: [output[0].label],
@@ -43,5 +43,5 @@ self.addEventListener("message", async (event) => {
     }
   }
   // Send the output back to the main thread
-  self.postMessage({ status: "complete" });
 });

 /* eslint-disable no-restricted-globals */
+import { pipeline } from '@huggingface/transformers';
 class MyTextClassificationPipeline {
+  static task = 'text-classification';
+  static model = 'Xenova/bert-base-multilingual-uncased-sentiment';
   static instance = null;
   static async getInstance(progress_callback = null) {
     this.instance ??= pipeline(this.task, this.model, {
+      progress_callback
     });
     return this.instance;
 }
 // Listen for messages from the main thread
+self.addEventListener('message', async (event) => {
   // Retrieve the pipeline. When called for the first time,
   // this will load the pipeline and save it for future use.
   const classifier = await MyTextClassificationPipeline.getInstance((x) => {
     // We also add a progress callback to the pipeline so that we can
     // track model loading.
+    self.postMessage({ status: 'progress', output: x });
   });
   const { text } = event.data;
+  const split = text.split('\n');
   for (const line of split) {
     if (line.trim()) {
       const output = await classifier(line);
       // Send the output back to the main thread
+      self.postMessage({
+        status: 'output',
         output: {
           sequence: line,
           labels: [output[0].label],
     }
   }
   // Send the output back to the main thread
+  self.postMessage({ status: 'complete' });
 });

src/workers/zero-shot.js CHANGED Viewed

@@ -1,14 +1,14 @@
 /* eslint-disable no-restricted-globals */
-import { pipeline } from "@huggingface/transformers";
 class MyZeroShotClassificationPipeline {
-  static task = "zero-shot-classification";
-  static model = "MoritzLaurer/deberta-v3-xsmall-zeroshot-v1.1-all-33";
   static instance = null;
   static async getInstance(progress_callback = null) {
     this.instance ??= pipeline(this.task, this.model, {
-      progress_callback,
     });
     return this.instance;
@@ -16,26 +16,26 @@ class MyZeroShotClassificationPipeline {
 }
 // Listen for messages from the main thread
-self.addEventListener("message", async (event) => {
   // Retrieve the pipeline. When called for the first time,
   // this will load the pipeline and save it for future use.
   const classifier = await MyZeroShotClassificationPipeline.getInstance((x) => {
     // We also add a progress callback to the pipeline so that we can
     // track model loading.
-    self.postMessage({ status: "progress", output: x });
   });
   const { text, labels } = event.data;
-  const split = text.split("\n");
   for (const line of split) {
     const output = await classifier(line, labels, {
-      hypothesis_template: "This text is about {}.",
-      multi_label: true,
     });
     // Send the output back to the main thread
-    self.postMessage({ status: "output", output });
   }
   // Send the output back to the main thread
-  self.postMessage({ status: "complete" });
-});

 /* eslint-disable no-restricted-globals */
+import { pipeline } from '@huggingface/transformers';
 class MyZeroShotClassificationPipeline {
+  static task = 'zero-shot-classification';
+  static model = 'MoritzLaurer/deberta-v3-xsmall-zeroshot-v1.1-all-33';
   static instance = null;
   static async getInstance(progress_callback = null) {
     this.instance ??= pipeline(this.task, this.model, {
+      progress_callback
     });
     return this.instance;
 }
 // Listen for messages from the main thread
+self.addEventListener('message', async (event) => {
   // Retrieve the pipeline. When called for the first time,
   // this will load the pipeline and save it for future use.
   const classifier = await MyZeroShotClassificationPipeline.getInstance((x) => {
     // We also add a progress callback to the pipeline so that we can
     // track model loading.
+    self.postMessage({ status: 'progress', output: x });
   });
   const { text, labels } = event.data;
+  const split = text.split('\n');
   for (const line of split) {
     const output = await classifier(line, labels, {
+      hypothesis_template: 'This text is about {}.',
+      multi_label: true
     });
     // Send the output back to the main thread
+    self.postMessage({ status: 'output', output });
   }
   // Send the output back to the main thread
+  self.postMessage({ status: 'complete' });
+});

tailwind.config.js CHANGED Viewed

@@ -1,10 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
   theme: {
-    extend: {},
   },
-  plugins: [],
-}

 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
+    extend: {}
   },
+  plugins: []
+};

tsconfig.json CHANGED Viewed

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
 }

 {
   "compilerOptions": {
     "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "noEmit": true,
     "jsx": "react-jsx"
   },
+  "include": ["src"]
 }