update

src/App.tsx

@@ -1,215 +1,20 @@
 // src/App.tsx
-import { useState, useRef, useEffect, useCallback } from "react";
-import { Section, WorkerMessage, WorkerInput } 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!",
-
-  // overheating
-  "This phone heats up way too quickly, especially when using demanding apps. It's uncomfortable to hold, and I'm concerned it might damage the internal components over time. Not what I expected",
-  "This phone is like holding a hot potato. Video calls turn it into a scalding nightmare. Seriously, can't it keep its cool?",
-  "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",
-];
+import { useState } from "react";
+import PipelineSelector from "./components/PipelineSelector";
+import ZeroShotClassification from "./components/ZeroShotClassification";
+import TextClassification from "./components/TextClassification";
 
 function App() {
-  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");
-
-  // Create a reference to the worker object.
-  const worker = useRef<Worker | null>(null);
-
-  // We use the `useEffect` hook to setup the worker as soon as the `App` component is mounted.
-  useEffect(() => {
-    if (!worker.current) {
-      // 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: MessageEvent<WorkerMessage>) => {
-      const status = e.data.status;
-      if (status === "initiate") {
-        setStatus("loading");
-      } else if (status === "ready") {
-        setStatus("ready");
-      } 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;
-        setSections((sections) => {
-          const newSections = [...sections];
-          newSections[sectionID] = {
-            ...newSections[sectionID],
-            items: [...newSections[sectionID].items, sequence],
-          };
-          return newSections;
-        });
-      } else if (status === "complete") {
-        setStatus("idle");
-      }
-    };
-
-    // 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: WorkerInput = {
-      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;
-    });
-  };
-
-  const handleRemoveCategory = (): void => {
-    setSections((sections) => {
-      const newSections = [...sections];
-      newSections.splice(newSections.length - 2, 1); // Remove second last element
-      return newSections;
-    });
-  };
-
-  const handleClear = (): void => {
-    setSections((sections) =>
-      sections.map((section) => ({
-        ...section,
-        items: [],
-      })),
-    );
-  };
-
-  const handleSectionTitleChange = (index: number, newTitle: string): void => {
-    setSections((sections) => {
-      const newSections = [...sections];
-      newSections[index].title = newTitle;
-      return newSections;
-    });
-  };
+  const [pipeline, setPipeline] = useState("zero-shot-classification");
 
   return (
     <div className="flex flex-col h-screen w-screen p-1">
-      <textarea
-        className="border w-full p-1 h-1/2"
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-      ></textarea>
-      <div className="flex flex-col justify-center items-center m-2 gap-1">
-        <button
-          className="border py-1 px-2 bg-blue-400 rounded text-white text-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
-          disabled={busy}
-          onClick={classify}
-        >
-          {!busy
-            ? "Categorize"
-            : status === "loading"
-              ? "Model loading..."
-              : "Processing"}
-        </button>
-        <div className="flex gap-1">
-          <button
-            className="border py-1 px-2 bg-green-400 rounded text-white text-sm font-medium cursor-pointer"
-            onClick={handleAddCategory}
-          >
-            Add category
-          </button>
-          <button
-            className="border py-1 px-2 bg-red-400 rounded text-white text-sm font-medium cursor-pointer"
-            disabled={sections.length <= 1}
-            onClick={handleRemoveCategory}
-          >
-            Remove category
-          </button>
-          <button
-            className="border py-1 px-2 bg-orange-400 rounded text-white text-sm font-medium cursor-pointer"
-            onClick={handleClear}
-          >
-            Clear
-          </button>
-        </div>
-      </div>
-
-      <div className="flex justify-between flex-grow overflow-x-auto max-h-[40%]">
-        {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)}
-            ></input>
-            <div className="overflow-y-auto h-full border">
-              {section.items.map((item, itemIndex) => (
-                <div
-                  className="m-2 border bg-red-50 rounded p-1 text-sm"
-                  key={itemIndex}
-                >
-                  {item}
-                </div>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
+      <PipelineSelector pipeline={pipeline} setPipeline={setPipeline} />
+      {pipeline === "zero-shot-classification" && <ZeroShotClassification />}
+      {pipeline === "text-classification" && <TextClassification />}
     </div>
   );
 }
 
 export default App;
+

src/components/CodeExporter.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface CodeExporterProps {
+  code: string;
+}
+
+const CodeExporter: React.FC<CodeExporterProps> = ({ code }) => {
+  return (
+    <div className="flex flex-col">
+      <h2 className="text-lg font-medium">Code</h2>
+      <pre className="bg-gray-100 p-2 rounded">{code}</pre>
+    </div>
+  );
+};
+
+export default CodeExporter;

src/components/ModelSelector.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface ModelSelectorProps {
+  model: string;
+  setModel: (model: string) => void;
+  models: string[];
+}
+
+const ModelSelector: React.FC<ModelSelectorProps> = ({ model, setModel, models }) => {
+  return (
+    <select value={model} onChange={(e) => setModel(e.target.value)}>
+      {models.map((m) => (
+        <option key={m} value={m}>
+          {m}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default ModelSelector;

src/components/PipelineSelector.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 
 const pipelines = [
+  'zero-shot-classification',
   'text-classification',
   'image-classification',
   'question-answering',
@@ -9,16 +10,16 @@ const pipelines = [
 ];
 
 interface PipelineSelectorProps {
-  onPipelineSelect: (pipeline: string) => void;
+  pipeline: string;
+  setPipeline: (pipeline: string) => void;
 }
 
-const PipelineSelector: React.FC<PipelineSelectorProps> = ({ onPipelineSelect }) => {
+const PipelineSelector: React.FC<PipelineSelectorProps> = ({ pipeline, setPipeline }) => {
   return (
-    <select onChange={(e) => onPipelineSelect(e.target.value)}>
-      <option value="">Select a pipeline</option>
-      {pipelines.map((pipeline) => (
-        <option key={pipeline} value={pipeline}>
-          {pipeline}
+    <select value={pipeline} onChange={(e) => setPipeline(e.target.value)}>
+      {pipelines.map((p) => (
+        <option key={p} value={p}>
+          {p}
         </option>
       ))}
     </select>

src/components/TextClassification.tsx

@@ -0,0 +1,193 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+
+interface ClassificationResult {
+  sequence: string;
+  label: string;
+  score: number;
+}
+
+interface TextClassificationWorkerMessage {
+  status: "initiate" | "ready" | "output" | "complete";
+  output?: ClassificationResult;
+}
+
+interface TextClassificationWorkerInput {
+  text: string;
+}
+
+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<ClassificationResult[]>([]);
+  const [status, setStatus] = useState<string>("idle");
+
+  // Create a reference to the worker object.
+  const worker = useRef<Worker | null>(null);
+
+  // We use the `useEffect` hook to setup the worker as soon as the component is mounted.
+  useEffect(() => {
+    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<TextClassificationWorkerMessage>) => {
+      const status = e.data.status;
+      if (status === "initiate") {
+        setStatus("loading");
+      } else if (status === "ready") {
+        setStatus("ready");
+      } else if (status === "output") {
+        const result = e.data.output!;
+        setResults((prevResults) => [...prevResults, result]);
+      } else if (status === "complete") {
+        setStatus("idle");
+      }
+    };
+
+    // 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([]);
+  };
+
+  const getSentimentColor = (label: string): string => {
+    switch (label.toLowerCase()) {
+      case "positive":
+      case "label_2":
+        return "bg-green-100 border-green-300";
+      case "negative":
+      case "label_0":
+        return "bg-red-100 border-red-300";
+      case "neutral":
+      case "label_1":
+        return "bg-yellow-100 border-yellow-300";
+      default:
+        return "bg-gray-100 border-gray-300";
+    }
+  };
+
+  const formatLabel = (label: string): string => {
+    switch (label) {
+      case "LABEL_0":
+        return "Negative";
+      case "LABEL_1":
+        return "Neutral";
+      case "LABEL_2":
+        return "Positive";
+      default:
+        return label;
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-screen w-screen p-4">
+      <h1 className="text-2xl font-bold mb-4">Text Classification</h1>
+      
+      <div className="flex flex-col lg:flex-row gap-4 h-full">
+        {/* Input Section */}
+        <div className="flex flex-col w-full lg:w-1/2">
+          <label className="text-lg font-medium mb-2">Input Text:</label>
+          <textarea
+            className="border border-gray-300 rounded p-3 flex-grow resize-none"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            placeholder="Enter text to classify (one per line)..."
+          />
+          
+          <div className="flex gap-2 mt-4">
+            <button
+              className="flex-1 py-2 px-4 bg-blue-500 hover:bg-blue-600 rounded text-white font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              disabled={busy}
+              onClick={classify}
+            >
+              {!busy
+                ? "Classify Text"
+                : status === "loading"
+                  ? "Model loading..."
+                  : "Processing..."}
+            </button>
+            
+            <button
+              className="py-2 px-4 bg-gray-500 hover:bg-gray-600 rounded text-white font-medium transition-colors"
+              onClick={handleClear}
+            >
+              Clear Results
+            </button>
+          </div>
+        </div>
+
+        {/* Results Section */}
+        <div className="flex flex-col w-full lg:w-1/2">
+          <label className="text-lg font-medium mb-2">
+            Classification Results ({results.length}):
+          </label>
+          
+          <div className="border border-gray-300 rounded p-3 flex-grow overflow-y-auto">
+            {results.length === 0 ? (
+              <div className="text-gray-500 text-center py-8">
+                No results yet. Click "Classify Text" to analyze your input.
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {results.map((result, index) => (
+                  <div
+                    key={index}
+                    className={`p-3 rounded border-2 ${getSentimentColor(result.label)}`}
+                  >
+                    <div className="flex justify-between items-start mb-2">
+                      <span className="font-semibold text-sm">
+                        {formatLabel(result.label)}
+                      </span>
+                      <span className="text-sm font-mono">
+                        {(result.score * 100).toFixed(1)}%
+                      </span>
+                    </div>
+                    <div className="text-sm text-gray-700">
+                      {result.sequence}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TextClassification;

src/components/ZeroShotClassification.tsx

@@ -0,0 +1,218 @@
+// src/App.tsx
+import { useState, useRef, useEffect, useCallback } from "react";
+import { Section, WorkerMessage, WorkerInput } 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!",
+
+  // overheating
+  "This phone heats up way too quickly, especially when using demanding apps. It's uncomfortable to hold, and I'm concerned it might damage the internal components over time. Not what I expected",
+  "This phone is like holding a hot potato. Video calls turn it into a scalding nightmare. Seriously, can't it keep its cool?",
+  "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");
+
+  // Create a reference to the worker object.
+  const worker = useRef<Worker | null>(null);
+
+  // We use the `useEffect` hook to setup the worker as soon as the `App` component is mounted.
+  useEffect(() => {
+    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 === "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;
+        setSections((sections) => {
+          const newSections = [...sections];
+          newSections[sectionID] = {
+            ...newSections[sectionID],
+            items: [...newSections[sectionID].items, sequence],
+          };
+          return newSections;
+        });
+      } else if (status === "complete") {
+        setStatus("idle");
+      }
+    };
+
+    // 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: WorkerInput = {
+      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;
+    });
+  };
+
+  const handleRemoveCategory = (): void => {
+    setSections((sections) => {
+      const newSections = [...sections];
+      newSections.splice(newSections.length - 2, 1); // Remove second last element
+      return newSections;
+    });
+  };
+
+  const handleClear = (): void => {
+    setSections((sections) =>
+      sections.map((section) => ({
+        ...section,
+        items: [],
+      })),
+    );
+  };
+
+  const handleSectionTitleChange = (index: number, newTitle: string): void => {
+    setSections((sections) => {
+      const newSections = [...sections];
+      newSections[index].title = newTitle;
+      return newSections;
+    });
+  };
+
+  return (
+    <div className="flex flex-col h-screen w-screen p-1">
+      <textarea
+        className="border w-full p-1 h-1/2"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      ></textarea>
+      <div className="flex flex-col justify-center items-center m-2 gap-1">
+        <button
+          className="border py-1 px-2 bg-blue-400 rounded text-white text-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+          disabled={busy}
+          onClick={classify}
+        >
+          {!busy
+            ? "Categorize"
+            : status === "loading"
+              ? "Model loading..."
+              : "Processing"}
+        </button>
+        <div className="flex gap-1">
+          <button
+            className="border py-1 px-2 bg-green-400 rounded text-white text-sm font-medium cursor-pointer"
+            onClick={handleAddCategory}
+          >
+            Add category
+          </button>
+          <button
+            className="border py-1 px-2 bg-red-400 rounded text-white text-sm font-medium cursor-pointer"
+            disabled={sections.length <= 1}
+            onClick={handleRemoveCategory}
+          >
+            Remove category
+          </button>
+          <button
+            className="border py-1 px-2 bg-orange-400 rounded text-white text-sm font-medium cursor-pointer"
+            onClick={handleClear}
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+
+      <div className="flex justify-between flex-grow overflow-x-auto max-h-[40%]">
+        {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)}
+            ></input>
+            <div className="overflow-y-auto h-full border">
+              {section.items.map((item, itemIndex) => (
+                <div
+                  className="m-2 border bg-red-50 rounded p-1 text-sm"
+                  key={itemIndex}
+                >
+                  {item}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default ZeroShotClassification;

src/types.ts

@@ -11,7 +11,7 @@ export interface ClassificationOutput {
 
 export interface WorkerMessage {
   status: 'initiate' | 'ready' | 'output' | 'complete';
-  output?: ClassificationOutput;
+  output?: any;
 }
 
 export interface WorkerInput {

src/worker.js

@@ -1,15 +1,17 @@
 /* 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";
+class PipelineFactory {
+  static task = null;
+  static model = null;
   static instance = null;
 
   static async getInstance(progress_callback = null) {
-    this.instance ??= pipeline(this.task, this.model, {
-      progress_callback,
-    });
+    if (this.instance === null) {
+      this.instance = pipeline(this.task, this.model, {
+        progress_callback,
+      });
+    }
 
     return this.instance;
   }
@@ -17,25 +19,25 @@ class MyZeroShotClassificationPipeline {
 
 // Listen for messages from the main thread
 self.addEventListener("message", async (event) => {
+  const { task, model, input } = event.data;
+
+  PipelineFactory.task = task;
+  PipelineFactory.model = model;
+
   // 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) => {
+  const pipe = await PipelineFactory.getInstance((x) => {
     // We also add a progress callback to the pipeline so that we can
     // track model loading.
     self.postMessage(x);
   });
 
-  const { text, labels } = event.data;
+  // Run the pipeline
+  const output = await pipe(...input);
+
+  // Send the output back to the main thread
+  self.postMessage({ status: "output", output });
 
-  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" });
-});
+});

src/workers/text-classification.js

@@ -0,0 +1,47 @@
+/* eslint-disable no-restricted-globals */
+import { pipeline } from "@huggingface/transformers";
+
+class MyTextClassificationPipeline {
+  static task = "sentiment-analysis";
+  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(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,
+          label: output[0].label,
+          score: output[0].score
+        }
+      });
+    }
+  }
+  // Send the output back to the main thread
+  self.postMessage({ status: "complete" });
+});

src/workers/zero-shot.js

@@ -0,0 +1,41 @@
+/* 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(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" });
+});