Move pipeline components to dedicated folder

src/App.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react'
 import { Settings } from 'lucide-react'
-import ZeroShotClassification from './components/ZeroShotClassification'
-import TextClassification from './components/TextClassification'
+import ZeroShotClassification from './components/pipelines/ZeroShotClassification'
+import TextClassification from './components/pipelines/TextClassification'
 import Header from './Header'
 import { useModel } from './contexts/ModelContext'
 import { getModelsByPipeline } from './lib/huggingface'
-import TextGeneration from './components/TextGeneration'
-import FeatureExtraction from './components/FeatureExtraction'
+import TextGeneration from './components/pipelines/TextGeneration'
+import FeatureExtraction from './components/pipelines/FeatureExtraction'
 import Sidebar from './components/Sidebar'
 import ModelReadme from './components/ModelReadme'
 import { PipelineLayout } from './components/PipelineLayout'

src/components/Sidebar.tsx

@@ -3,9 +3,9 @@ import PipelineSelector from './PipelineSelector'
 import ModelSelector from './ModelSelector'
 import ModelInfo from './ModelInfo'
 import { useModel } from '../contexts/ModelContext'
-import TextGenerationConfig from './TextGenerationConfig'
-import FeatureExtractionConfig from './FeatureExtractionConfig'
-import ZeroShotClassificationConfig from './ZeroShotClassificationConfig'
+import TextGenerationConfig from './pipelines/TextGenerationConfig'
+import FeatureExtractionConfig from './pipelines/FeatureExtractionConfig'
+import ZeroShotClassificationConfig from './pipelines/ZeroShotClassificationConfig'
 
 interface SidebarProps {
   isOpen: boolean

src/components/{FeatureExtraction.tsx → pipelines/FeatureExtraction.tsx}

@@ -4,9 +4,9 @@ import {
   EmbeddingExample,
   FeatureExtractionWorkerInput,
   WorkerMessage
-} from '../types'
-import { useModel } from '../contexts/ModelContext'
-import { useFeatureExtraction } from '../contexts/FeatureExtractionContext'
+} from '../../types'
+import { useModel } from '../../contexts/ModelContext'
+import { useFeatureExtraction } from '../../contexts/FeatureExtractionContext'
 
 interface Point2D {
   x: number

src/components/{FeatureExtractionConfig.tsx → pipelines/FeatureExtractionConfig.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useFeatureExtraction } from '../contexts/FeatureExtractionContext'
+import { useFeatureExtraction } from '../../contexts/FeatureExtractionContext'
 
 const FeatureExtractionConfig = () => {
   const { config, setConfig } = useFeatureExtraction()
@@ -17,10 +17,12 @@ const FeatureExtractionConfig = () => {
           </label>
           <select
             value={config.pooling}
-            onChange={(e) => setConfig(prev => ({
-              ...prev,
-              pooling: e.target.value as 'mean' | 'cls' | 'max'
-            }))}
+            onChange={(e) =>
+              setConfig((prev) => ({
+                ...prev,
+                pooling: e.target.value as 'mean' | 'cls' | 'max'
+              }))
+            }
             className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
           >
             <option value="mean">Mean Pooling</option>
@@ -37,10 +39,12 @@ const FeatureExtractionConfig = () => {
             <input
               type="checkbox"
               checked={config.normalize}
-              onChange={(e) => setConfig(prev => ({
-                ...prev,
-                normalize: e.target.checked
-              }))}
+              onChange={(e) =>
+                setConfig((prev) => ({
+                  ...prev,
+                  normalize: e.target.checked
+                }))
+              }
               className="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
             />
             <span className="text-sm font-medium text-gray-700">
@@ -59,10 +63,12 @@ const FeatureExtractionConfig = () => {
             <strong>Mean Pooling:</strong> Average all token embeddings
           </p>
           <p className="mb-1">
-            <strong>CLS Token:</strong> Use the [CLS] token embedding (if available)
+            <strong>CLS Token:</strong> Use the [CLS] token embedding (if
+            available)
           </p>
           <p>
-            <strong>Max Pooling:</strong> Take element-wise maximum across tokens
+            <strong>Max Pooling:</strong> Take element-wise maximum across
+            tokens
           </p>
         </div>
       </div>

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

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect } from 'react'
-import { TextClassificationWorkerInput, WorkerMessage } from '../types'
-import { useModel } from '../contexts/ModelContext'
+import { TextClassificationWorkerInput, WorkerMessage } from '../../types'
+import { useModel } from '../../contexts/ModelContext'
 
 const PLACEHOLDER_TEXTS: string[] = [
   'I absolutely love this product! It exceeded all my expectations.',

src/components/{TextGeneration.tsx → pipelines/TextGeneration.tsx}

@@ -1,8 +1,12 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { Send, Trash2, Loader2, X } from 'lucide-react'
-import { ChatMessage, TextGenerationWorkerInput, WorkerMessage } from '../types'
-import { useModel } from '../contexts/ModelContext'
-import { useTextGeneration } from '../contexts/TextGenerationContext'
+import {
+  ChatMessage,
+  TextGenerationWorkerInput,
+  WorkerMessage
+} from '../../types'
+import { useModel } from '../../contexts/ModelContext'
+import { useTextGeneration } from '../../contexts/TextGenerationContext'
 
 function TextGeneration() {
   const { config, messages, setMessages } = useTextGeneration()

src/components/{TextGenerationConfig.tsx → pipelines/TextGenerationConfig.tsx}

@@ -2,8 +2,8 @@ import { Switch } from '@headlessui/react'
 import {
   useTextGeneration,
   GenerationConfigState
-} from '../contexts/TextGenerationContext'
-import { useModel } from '../contexts/ModelContext'
+} from '../../contexts/TextGenerationContext'
+import { useModel } from '../../contexts/ModelContext'
 
 function TextGenerationConfig() {
   const { config, setConfig, messages, updateSystemMessage } =

src/components/{ZeroShotClassification.tsx → pipelines/ZeroShotClassification.tsx}

@@ -1,7 +1,7 @@
 import { useEffect, useCallback } from 'react'
-import { WorkerMessage, ZeroShotWorkerInput } from '../types'
-import { useModel } from '../contexts/ModelContext'
-import { useZeroShotClassification } from '../contexts/ZeroShotClassificationContext'
+import { WorkerMessage, ZeroShotWorkerInput } from '../../types'
+import { useModel } from '../../contexts/ModelContext'
+import { useZeroShotClassification } from '../../contexts/ZeroShotClassificationContext'
 import { Send, Loader2 } from 'lucide-react'
 
 function ZeroShotClassification() {
@@ -81,7 +81,7 @@ function ZeroShotClassification() {
   const busy: boolean = status !== 'ready'
 
   return (
-    <div className="flex flex-col h-[70vh] max-h-[100vh] w-full p-4">
+    <div className="flex flex-col h-full max-h-[100vh] w-full p-4">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold">Zero-Shot Classification</h1>
       </div>
@@ -96,7 +96,7 @@ function ZeroShotClassification() {
           onChange={(e) => setText(e.target.value)}
           placeholder="Enter text items to classify, one per line..."
           className="w-full p-3 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
-          rows={8}
+          rows={12}
           disabled={!hasBeenLoaded || busy}
         />
       </div>
@@ -126,11 +126,11 @@ function ZeroShotClassification() {
 
       {/* Results Grid */}
       <div className="flex-1 overflow-hidden">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4 h-full">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4 h-full">
           {sections.map((section, index) => (
             <div
               key={index}
-              className="flex flex-col bg-white border border-gray-200 rounded-lg overflow-hidden"
+              className="flex flex-col bg-white border border-gray-200 rounded-lg max-h-96"
             >
               <div className="px-3 py-2 bg-gray-50 border-b border-gray-200">
                 <h3

src/components/{ZeroShotClassificationConfig.tsx → pipelines/ZeroShotClassificationConfig.tsx}

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Plus, Minus, Trash2 } from 'lucide-react'
-import { useZeroShotClassification } from '../contexts/ZeroShotClassificationContext'
+import { useZeroShotClassification } from '../../contexts/ZeroShotClassificationContext'
 
 const ZeroShotClassificationConfig = () => {
   const {
@@ -27,22 +27,27 @@ const ZeroShotClassificationConfig = () => {
           <input
             type="range"
             min="0.1"
-            max="0.9"
-            step="0.1"
+            max="0.95"
+            step="0.01"
             value={config.threshold}
-            onChange={(e) => setConfig(prev => ({
-              ...prev,
-              threshold: parseFloat(e.target.value)
-            }))}
+            onChange={(e) =>
+              setConfig((prev) => ({
+                ...prev,
+                threshold: parseFloat(e.target.value)
+              }))
+            }
             className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
           />
           <p className="text-xs text-gray-500 mt-1">
-            Minimum confidence score required for classification (lower values classify more items)
+            Minimum confidence score required for classification (lower values
+            classify more items)
           </p>
         </div>
 
         <div className="pt-2 border-t border-gray-200">
-          <h4 className="text-sm font-semibold text-gray-800 mb-3">Categories</h4>
+          <h4 className="text-sm font-semibold text-gray-800 mb-3">
+            Categories
+          </h4>
 
           <div className="space-y-2 max-h-40 overflow-y-auto">
             {sections.map((section, index) => (
@@ -94,13 +99,16 @@ const ZeroShotClassificationConfig = () => {
       <div className="pt-2 border-t border-gray-200">
         <div className="text-xs text-gray-500">
           <p className="mb-1">
-            <strong>Threshold:</strong> Items with confidence scores below this threshold will be classified as "Other"
+            <strong>Threshold:</strong> Items with confidence scores below this
+            threshold will be classified as "Other"
           </p>
           <p className="mb-1">
-            <strong>Categories:</strong> Edit category names to customize classification labels
+            <strong>Categories:</strong> Edit category names to customize
+            classification labels
           </p>
           <p>
-            <strong>Other:</strong> Fallback category for items that don't meet the threshold for any specific category
+            <strong>Other:</strong> Fallback category for items that don't meet
+            the threshold for any specific category
           </p>
         </div>
       </div>

src/lib/huggingface.ts

@@ -153,8 +153,13 @@ const getModelsByPipeline = async (
   // }
 
   // First search with filter=onnx
+  console.log(
+    pipelineTag === 'feature-extraction'
+      ? '&search=sentence-transformers'
+      : '&filter=onnx'
+  )
   const response1 = await fetch(
-    `https://huggingface.co/api/models?filter=${pipelineTag}&filter=onnx&sort=downloads&limit=50`,
+    `https://huggingface.co/api/models?filter=${pipelineTag}${pipelineTag === 'feature-extraction' ? '&library=sentence-transformers' : '&filter=onnx'}&sort=downloads&limit=50`,
     {
       method: 'GET'
       // headers: {