Refactor app structure to integrate text classification feature and update pipeline selection

src/App.tsx

@@ -1,19 +1,71 @@
 import { useState } from "react";
 import PipelineSelector from "./components/PipelineSelector";
 import ZeroShotClassification from "./components/ZeroShotClassification";
-import SentimentAnalysis from "./components/SentimentAnalysis";
+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="flex flex-col h-screen w-screen p-1">
-      <PipelineSelector pipeline={pipeline} setPipeline={setPipeline} />
-      {pipeline === "zero-shot-classification" && <ZeroShotClassification />}
-      {pipeline === "sentiment-analysis" && <SentimentAnalysis />}
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+      <Header />
+
+      <main className="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Pipeline Selection */}
+        <div className="mb-8">
+          <div className="bg-white rounded-lg shadow-sm border p-6">
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">
+              Choose a Pipeline
+            </h2>
+            <PipelineSelector pipeline={pipeline} setPipeline={setPipeline} />
+
+            {/* Pipeline Description */}
+            <div className="mt-4 p-4 bg-gray-50 rounded-lg">
+              <div className="flex items-start space-x-3">
+                <div className="flex-shrink-0">
+                  <svg
+                    className="w-5 h-5 text-blue-500 mt-0.5"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </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>
+            </div>
+          </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>
+
+      <Footer />
     </div>
   );
 }
 
 export default App;
-

src/Footer.tsx

@@ -0,0 +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;

src/Header.tsx

@@ -0,0 +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;

src/components/PipelineSelector.tsx

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

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

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useCallback } from "react";
-import { ClassificationOutput, SentimentAnalysisWorkerInput, WorkerMessage } from "../types";
+import { ClassificationOutput, TextClassificationWorkerInput, WorkerMessage } from "../types";
 
 const PLACEHOLDER_TEXTS: string[] = [
   "I absolutely love this product! It exceeded all my expectations.",
@@ -14,7 +14,7 @@ const PLACEHOLDER_TEXTS: string[] = [
   "Outstanding! This company really knows how to treat their customers.",
 ].sort(() => Math.random() - 0.5);
 
-function SentimentAnalysis() {
+function TextClassification() {
   const [text, setText] = useState<string>(PLACEHOLDER_TEXTS.join("\n"));
   const [results, setResults] = useState<ClassificationOutput[]>([]);
   const [status, setStatus] = useState<string>("idle");
@@ -44,14 +44,18 @@ function SentimentAnalysis() {
         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)
+        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)
+        setProgress(100);
       }
     };
 
@@ -66,7 +70,7 @@ function SentimentAnalysis() {
   const classify = useCallback(() => {
     setStatus("processing");
     setResults([]); // Clear previous results
-    const message: SentimentAnalysisWorkerInput = { text };
+    const message: TextClassificationWorkerInput = { text };
     worker.current?.postMessage(message);
   }, [text]);
 
@@ -76,39 +80,11 @@ function SentimentAnalysis() {
     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">
+    <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>
-      
+
       <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">
@@ -119,7 +95,7 @@ function SentimentAnalysis() {
             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"
@@ -129,14 +105,12 @@ function SentimentAnalysis() {
               {!busy
                 ? "Classify Text"
                 : status === "loading"
-                  ? "Model loading..."
-                  : "Processing..."}
+                ? "Model loading..."
+                : "Processing..."}
             </button>
-            {  status === "progress" &&
-              <div className="text-sm font-medium">
-                {progress}%
-              </div>
-            }
+            {status === "progress" && (
+              <div className="text-sm font-medium">{progress}%</div>
+            )}
             <button
               className="py-2 px-4 bg-gray-500 hover:bg-gray-600 rounded text-white font-medium transition-colors"
               onClick={handleClear}
@@ -151,7 +125,7 @@ function SentimentAnalysis() {
           <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">
@@ -162,11 +136,11 @@ function SentimentAnalysis() {
                 {results.map((result, index) => (
                   <div
                     key={index}
-                    className={`p-3 rounded border-2 ${getSentimentColor(result.labels[0])}`}
+                    className="p-3 rounded border-2"
                   >
                     <div className="flex justify-between items-start mb-2">
                       <span className="font-semibold text-sm">
-                        {formatLabel(result.labels[0])}
+                        {result.labels[0]}
                       </span>
                       <span className="text-sm font-mono">
                         {(result.scores[0] * 100).toFixed(1)}%
@@ -186,4 +160,4 @@ function SentimentAnalysis() {
   );
 }
 
-export default SentimentAnalysis;
+export default TextClassification;

src/components/ZeroShotClassification.tsx

@@ -154,7 +154,7 @@ function ZeroShotClassification() {
   };
 
   return (
-    <div className="flex flex-col h-screen w-screen p-1">
+    <div className="flex flex-col h-screen w-full p-1">
       <textarea
         className="border w-full p-1 h-1/2"
         value={text}

src/types.ts

@@ -22,7 +22,7 @@ export interface ZeroShotWorkerInput {
 }
 
 
-export interface SentimentAnalysisWorkerInput {
+export interface TextClassificationWorkerInput {
   text: string;
 }
 

src/workers/sentiment-analysis.js

@@ -2,8 +2,8 @@
 import { pipeline } from "@huggingface/transformers";
 
 class MyTextClassificationPipeline {
-  static task = "sentiment-analysis";
-  static model = 'Xenova/bert-base-multilingual-uncased-sentiment';
+  static task = "text-classification";
+  static model = "Xenova/bert-base-multilingual-uncased-sentiment";
   static instance = null;
 
   static async getInstance(progress_callback = null) {