Implement sentiment analysis feature and update pipeline selection

src/App.tsx

@@ -2,7 +2,7 @@
 import { useState } from "react";
 import PipelineSelector from "./components/PipelineSelector";
 import ZeroShotClassification from "./components/ZeroShotClassification";
-import TextClassification from "./components/TextClassification";
+import SentimentAnalysis from "./components/SentimentAnalysis";
 
 function App() {
   const [pipeline, setPipeline] = useState("zero-shot-classification");
@@ -11,7 +11,7 @@ function App() {
     <div className="flex flex-col h-screen w-screen p-1">
       <PipelineSelector pipeline={pipeline} setPipeline={setPipeline} />
       {pipeline === "zero-shot-classification" && <ZeroShotClassification />}
-      {pipeline === "text-classification" && <TextClassification />}
+      {pipeline === "sentiment-analysis" && <SentimentAnalysis />}
     </div>
   );
 }

src/components/PipelineSelector.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 const pipelines = [
   'zero-shot-classification',
-  'text-classification',
+  'sentiment-analysis',
   'image-classification',
   'question-answering',
   'translation',

src/components/{TextClassification.tsx → SentimentAnalysis.tsx}

@@ -1,19 +1,5 @@
 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;
-}
+import { ClassificationOutput, SentimentAnalysisWorkerInput, WorkerMessage } from "../types";
 
 const PLACEHOLDER_TEXTS: string[] = [
   "I absolutely love this product! It exceeded all my expectations.",
@@ -28,9 +14,9 @@ const PLACEHOLDER_TEXTS: string[] = [
   "Outstanding! This company really knows how to treat their customers.",
 ].sort(() => Math.random() - 0.5);
 
-function TextClassification() {
+function SentimentAnalysis() {
   const [text, setText] = useState<string>(PLACEHOLDER_TEXTS.join("\n"));
-  const [results, setResults] = useState<ClassificationResult[]>([]);
+  const [results, setResults] = useState<ClassificationOutput[]>([]);
   const [status, setStatus] = useState<string>("idle");
 
   // Create a reference to the worker object.
@@ -41,7 +27,7 @@ function TextClassification() {
     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),
+        new URL("../workers/sentiment-analysis.js", import.meta.url),
         {
           type: "module",
         }
@@ -49,7 +35,7 @@ function TextClassification() {
     }
 
     // Create a callback function for messages from the worker thread.
-    const onMessageReceived = (e: MessageEvent<TextClassificationWorkerMessage>) => {
+    const onMessageReceived = (e: MessageEvent<WorkerMessage>) => {
       const status = e.data.status;
       if (status === "initiate") {
         setStatus("loading");
@@ -74,7 +60,7 @@ function TextClassification() {
   const classify = useCallback(() => {
     setStatus("processing");
     setResults([]); // Clear previous results
-    const message: TextClassificationWorkerInput = { text };
+    const message: SentimentAnalysisWorkerInput = { text };
     worker.current?.postMessage(message);
   }, [text]);
 
@@ -166,14 +152,14 @@ function TextClassification() {
                 {results.map((result, index) => (
                   <div
                     key={index}
-                    className={`p-3 rounded border-2 ${getSentimentColor(result.label)}`}
+                    className={`p-3 rounded border-2 ${getSentimentColor(result.labels[0])}`}
                   >
                     <div className="flex justify-between items-start mb-2">
                       <span className="font-semibold text-sm">
-                        {formatLabel(result.label)}
+                        {formatLabel(result.labels[0])}
                       </span>
                       <span className="text-sm font-mono">
-                        {(result.score * 100).toFixed(1)}%
+                        {(result.scores[0] * 100).toFixed(1)}%
                       </span>
                     </div>
                     <div className="text-sm text-gray-700">
@@ -190,4 +176,4 @@ function TextClassification() {
   );
 }
 
-export default TextClassification;
+export default SentimentAnalysis;

src/components/ZeroShotClassification.tsx

@@ -1,6 +1,6 @@
 // src/App.tsx
 import { useState, useRef, useEffect, useCallback } from "react";
-import { Section, WorkerMessage, WorkerInput } from "../types";
+import { Section, WorkerMessage, ZeroShotWorkerInput } from "../types";
 
 const PLACEHOLDER_REVIEWS: string[] = [
   // battery/charging problems
@@ -70,7 +70,7 @@ function ZeroShotClassification() {
         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";
 
@@ -99,7 +99,7 @@ function ZeroShotClassification() {
 
   const classify = useCallback(() => {
     setStatus("processing");
-    const message: WorkerInput = {
+    const message: ZeroShotWorkerInput = {
       text,
       labels: sections
         .slice(0, sections.length - 1)

src/types.ts

@@ -9,14 +9,21 @@ export interface ClassificationOutput {
   scores: number[];
 }
 
+
+
 export interface WorkerMessage {
   status: 'initiate' | 'ready' | 'output' | 'complete';
   output?: any;
 }
 
-export interface WorkerInput {
+export interface ZeroShotWorkerInput {
   text: string;
   labels: string[];
 }
 
+
+export interface SentimentAnalysisWorkerInput {
+  text: string;
+}
+
 export type AppStatus = 'idle' | 'loading' | 'processing';

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

@@ -36,8 +36,8 @@ self.addEventListener("message", async (event) => {
         status: "output", 
         output: {
           sequence: line,
-          label: output[0].label,
-          score: output[0].score
+          labels: [output[0].label],
+          scores: [output[0].score]
         }
       });
     }