Update image classification UI and worker logic

public/workers/image-classification.js

@@ -62,7 +62,7 @@ class MyImageClassificationPipeline {
 // Listen for messages from the main thread
 self.addEventListener('message', async (event) => {
   try {
-    const { type, image, model, dtype, topK = 5 } = event.data
+    const { type, image, model, dtype, topK = 1 } = event.data
 
     if (!model) {
       self.postMessage({
@@ -99,11 +99,9 @@ self.addEventListener('message', async (event) => {
       }
 
       try {
-        self.postMessage({ status: 'loading' })
-
         // Run classification
         const output = await classifier(image, {
-          topk: topK
+          top_k: topK
         })
 
         // Format predictions

src/components/ModelInfo.tsx

@@ -30,7 +30,7 @@ const ModelInfo = () => {
   const ModelInfoSkeleton = () => (
     <div className="bg-gradient-to-r from-secondary to-accent px-3 py-3 rounded-lg border border-border space-y-3 animate-pulse w-4/5">
       <div className="flex items-center space-x-2">
-        <Bot className="w-4 h-4 text-primary/60" />
+        <Bot className="w-4 h-4 text-green-500" />
         <div className="h-4 bg-muted rounded-sm flex-1"></div>
         <div className="w-4 h-4 bg-muted rounded-full"></div>
       </div>
@@ -45,7 +45,7 @@ const ModelInfo = () => {
           <div className="h-3 bg-muted/80 rounded-sm w-8"></div>
         </div>
         <div className="flex items-center space-x-1">
-          <Download className="w-3 h-3 text-chart-2/60" />
+          <Download className="w-3 h-3 text-purple-500" />
           <div className="h-3 bg-muted/80 rounded-sm w-8"></div>
         </div>
         <div className="flex items-center space-x-1">
@@ -53,7 +53,7 @@ const ModelInfo = () => {
           <div className="h-3 bg-muted/80 rounded-sm w-8"></div>
         </div>
         <div className="flex items-center space-x-1">
-          <DatabaseIcon className="w-3 h-3 text-chart-4/60" />
+          <DatabaseIcon className="w-3 h-3 text-purple-500" />
           <div className="h-3 bg-muted/80 rounded-sm w-12"></div>
         </div>
       </div>

src/components/ModelSelector.tsx

@@ -464,7 +464,7 @@ function ModelSelector() {
                             <div className="flex-1 min-w-0 pr-3">
                               <div className="flex items-center justify-between">
                                 <Tooltip content={model.id}>
-                                  <span className="text-sm font-medium truncate block max-w-full">
+                                  <span className="text-sm font-medium truncate block max-w-[450px]">
                                     {model.id}
                                   </span>
                                 </Tooltip>

src/components/PipelineSelector.tsx

@@ -1,18 +1,17 @@
 import React from 'react'
 import {
-  Listbox,
-  ListboxOption,
-  ListboxButton,
-  ListboxOptions,
-  Transition
-} from '@headlessui/react'
-import { ChevronDown, Check } from 'lucide-react'
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select' // Adjust the import path as needed
 
 export const supportedPipelines = [
-  'text-generation',
   'feature-extraction',
-  'zero-shot-classification',
   'image-classification',
+  'text-generation',
+  'zero-shot-classification',
   'text-classification',
   'summarization',
   'translation'
@@ -27,8 +26,6 @@ const PipelineSelector: React.FC<PipelineSelectorProps> = ({
   pipeline,
   setPipeline
 }) => {
-  const selectedPipeline = pipeline
-
   const formatPipelineName = (pipelineId: string) => {
     return pipelineId
       .split('-')
@@ -37,63 +34,22 @@ const PipelineSelector: React.FC<PipelineSelectorProps> = ({
   }
 
   return (
-    <div className="relative">
-      <Listbox value={selectedPipeline} onChange={setPipeline}>
-        <div className="relative">
-          <ListboxButton className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left focus:outline-hidden focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 text-sm xl:text-base border border-gray-300">
-            <span className="block truncate font-medium">
-              {formatPipelineName(selectedPipeline)}
-            </span>
-            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-              <ChevronDown
-                className="h-5 w-5 text-gray-400 ui-open:rotate-180 transition-transform"
-                aria-hidden="true"
-              />
-            </span>
-          </ListboxButton>
-
-          <Transition
-            enter="transition duration-100 ease-out"
-            enterFrom="transform scale-95 opacity-0"
-            enterTo="transform scale-100 opacity-100"
-            leave="transition duration-75 ease-out"
-            leaveFrom="transform scale-100 opacity-100"
-            leaveTo="transform scale-95 opacity-0"
+    <Select value={pipeline} onValueChange={setPipeline}>
+      <SelectTrigger className="w-full text-sm xl:text-base">
+        <SelectValue placeholder="Select a pipeline" />
+      </SelectTrigger>
+      <SelectContent>
+        {supportedPipelines.map((p) => (
+          <SelectItem
+            key={p}
+            value={p}
+            className="text-sm xl:text-base data-[state=checked]:font-bold"
           >
-            <ListboxOptions className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm xl:text-base ring-1 ring-black ring-opacity-5 focus:outline-hidden">
-              {supportedPipelines.map((p) => (
-                <ListboxOption
-                  key={p}
-                  className={({ active }) =>
-                    `relative cursor-default select-none py-2 px-4 ${
-                      active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
-                    }`
-                  }
-                  value={p}
-                >
-                  {({ selected }) => (
-                    <div className="flex items-center justify-between">
-                      <span
-                        className={`block truncate ${
-                          selected ? 'font-medium' : 'font-normal'
-                        }`}
-                      >
-                        {formatPipelineName(p)}
-                      </span>
-                      {selected && (
-                        <span className="flex items-center text-amber-600">
-                          <Check className="h-5 w-5" aria-hidden="true" />
-                        </span>
-                      )}
-                    </div>
-                  )}
-                </ListboxOption>
-              ))}
-            </ListboxOptions>
-          </Transition>
-        </div>
-      </Listbox>
-    </div>
+            {formatPipelineName(p)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   )
 }
 

src/components/Sidebar.tsx

@@ -38,7 +38,7 @@ const Sidebar = ({ isOpen, onClose, setIsModalOpen }: SidebarProps) => {
         <div className="flex flex-col h-full">
           {/* Header */}
           <div className="flex items-center justify-between p-4 border-b border-gray-200 lg:hidden">
-            <h2 className="text-lg font-semibold text-gray-900">
+            <h2 className="text-lg font-semibold text-foreground">
               Configuration
             </h2>
             <button
@@ -52,21 +52,16 @@ const Sidebar = ({ isOpen, onClose, setIsModalOpen }: SidebarProps) => {
           {/* Content */}
           <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6">
             {/* Pipeline Selection */}
-            <div className="space-y-3">
-              <h3 className="text-md xl:text-lg font-semibold text-gray-900 mb-2">
+            <div className="space-x-3 flex flex-row justify-center align-center">
+              <h3 className="text-md xl:text-lg font-semibold text-foreground text-nowrap mt-1">
                 Choose a Pipeline
               </h3>
-              <div className="w-full">
-                <PipelineSelector
-                  pipeline={pipeline}
-                  setPipeline={setPipeline}
-                />
-              </div>
+              <PipelineSelector pipeline={pipeline} setPipeline={setPipeline} />
             </div>
 
             {/* Model Selection */}
             <div className="space-y-3">
-              <h3 className="text-lg font-semibold text-gray-900">
+              <h3 className="text-lg font-semibold text-foreground">
                 Select Model
               </h3>
               <ModelSelector />

src/components/pipelines/ImageClassification.tsx

@@ -49,7 +49,6 @@ function ImageClassification() {
   } = useImageClassification()
 
   const [isClassifying, setIsClassifying] = useState<boolean>(false)
-  const [showPreviews, setShowPreviews] = useState<boolean>(true)
   const [dragOver, setDragOver] = useState<boolean>(false)
   const [progress, setProgress] = useState<number | null>(null)
 
@@ -71,7 +70,6 @@ function ImageClassification() {
       updateExample(example.id, { isLoading: true })
       setIsClassifying(true)
       setProgress(0)
-
       const message: ImageClassificationWorkerInput = {
         type: 'classify',
         image: example.url,
@@ -135,7 +133,9 @@ function ImageClassification() {
   )
 
   const handleLoadSampleImages = useCallback(async () => {
+    const existstingImages = new Set(examples.map((ex) => ex.name))
     for (const sample of SAMPLE_IMAGES) {
+      if (existstingImages.has(sample.name)) continue
       try {
         const response = await fetch(sample.url)
         const blob = await response.blob()
@@ -145,14 +145,13 @@ function ImageClassification() {
         console.error(`Failed to load sample image ${sample.name}:`, error)
       }
     }
-  }, [addExample])
+  }, [addExample, examples])
 
   useEffect(() => {
     if (!activeWorker) return
 
     const onMessageReceived = (e: MessageEvent<WorkerMessage>) => {
       const { status, output, progress: workerProgress } = e.data
-
       if (status === 'progress' && workerProgress !== undefined) {
         setProgress(workerProgress)
       } else if (status === 'output' && output?.predictions) {
@@ -197,17 +196,6 @@ function ImageClassification() {
           >
             Load Samples
           </button>
-          <button
-            onClick={() => setShowPreviews(!showPreviews)}
-            className="p-2 bg-blue-100 hover:bg-blue-200 rounded-lg transition-colors"
-            title={showPreviews ? 'Hide Previews' : 'Show Previews'}
-          >
-            {showPreviews ? (
-              <EyeOff className="w-4 h-4" />
-            ) : (
-              <Eye className="w-4 h-4" />
-            )}
-          </button>
           <button
             onClick={clearExamples}
             className="p-2 bg-red-100 hover:bg-red-200 rounded-lg transition-colors"
@@ -218,7 +206,7 @@ function ImageClassification() {
         </div>
       </div>
 
-      <div className="flex flex-col lg:flex-row gap-4 flex-1">
+      <div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0">
         {/* Left Panel - Image Upload and List */}
         <div className="lg:w-1/2 flex flex-col">
           {/* Upload Area */}
@@ -281,9 +269,9 @@ function ImageClassification() {
           )}
 
           {/* Images List */}
-          <div className="flex-1 overflow-y-auto border border-gray-300 rounded-lg bg-white">
+          <div className="flex-1 overflow-y-auto border border-gray-300 rounded-lg bg-white min-h-0 max-h-[30vh] sm:max-h-[20vh] lg:max-h-none">
             <div className="p-4">
-              <h3 className="text-sm font-medium text-gray-700 mb-3">
+              <h3 className="text-sm font-medium text-gray-700 mb-3 sticky top-0 bg-white z-10">
                 Images ({examples.length})
               </h3>
               {examples.length === 0 ? (
@@ -292,7 +280,7 @@ function ImageClassification() {
                   started.
                 </div>
               ) : (
-                <div className="space-y-3">
+                <div className="overflow-y-auto max-h-[calc(100%-10rem)] grid-cols-2 grid sm:grid-cols-3 lg:grid-cols-1 gap-2 ">
                   {examples.map((example) => (
                     <div
                       key={example.id}
@@ -304,15 +292,13 @@ function ImageClassification() {
                       onClick={() => handleSelectExample(example)}
                     >
                       <div className="flex gap-3">
-                        {showPreviews && (
-                          <div className="shrink-0">
-                            <img
-                              src={example.url}
-                              alt={example.name}
-                              className="w-16 h-16 object-cover rounded-lg"
-                            />
-                          </div>
-                        )}
+                        <div className="shrink-0">
+                          <img
+                            src={example.url}
+                            alt={example.name}
+                            className="w-16 h-16 object-cover rounded-lg"
+                          />
+                        </div>
                         <div className="flex-1 min-w-0">
                           <div className="flex justify-between items-start">
                             <div className="flex-1 min-w-0">
@@ -334,11 +320,6 @@ function ImageClassification() {
                                     Not classified
                                   </div>
                                 )}
-                                {selectedExample?.id === example.id && (
-                                  <div className="text-xs text-blue-600">
-                                    Selected
-                                  </div>
-                                )}
                               </div>
                             </div>
                             <button
@@ -362,19 +343,19 @@ function ImageClassification() {
         </div>
 
         {/* Right Panel - Preview and Results */}
-        <div className="lg:w-1/2 flex flex-col">
+        <div className="lg:w-1/2 flex lg:flex-col flex-row space-x-4 sm:max-h-[34vh] lg:max-h-none">
           {/* Image Preview */}
           {selectedExample && (
             <div className="mb-4">
               <h3 className="text-sm font-medium text-gray-700 mb-2">
                 Selected Image
               </h3>
-              <div className="border border-gray-300 rounded-lg bg-white p-4">
+              <div className="sm:border-none border border-gray-300 rounded-lg bg-white p-4 sm:p-0">
                 <div className="flex flex-col items-center">
                   <img
                     src={selectedExample.url}
                     alt={selectedExample.name}
-                    className="max-w-full max-h-64 object-contain rounded-lg mb-2"
+                    className="max-w-64 lg:max-w-full max-h-60 lg:max-h-64 object-contain rounded-lg mb-2"
                   />
                   <div className="text-sm text-gray-600 text-center">
                     {selectedExample.name}
@@ -385,9 +366,9 @@ function ImageClassification() {
           )}
 
           {/* Classification Results */}
-          <div className="flex-1 overflow-y-auto border border-gray-300 rounded-lg bg-white">
+          <div className="flex-1 overflow-y-auto border border-gray-300 rounded-lg bg-white  ">
             <div className="p-4">
-              <h3 className="text-sm font-medium text-gray-700 mb-3">
+              <h3 className="text-sm font-medium text-gray-700 mb-3 sticky top-0 bg-white">
                 Classification Results
                 {selectedExample && ` - ${selectedExample.name}`}
               </h3>
@@ -419,7 +400,7 @@ function ImageClassification() {
                   </button>
                 </div>
               ) : (
-                <div className="space-y-3">
+                <div className="space-y-3 overflow-y-auto max-h-[calc(100%-3rem)]">
                   {selectedExample.predictions.map((prediction, index) => {
                     const confidencePercent = (prediction.score * 100).toFixed(
                       1

src/components/pipelines/ImageClassificationConfig.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useImageClassification } from '../../contexts/ImageClassificationContext'
+import { Slider } from '../ui/slider'
 
 const ImageClassificationConfig = () => {
   const { topK, setTopK } = useImageClassification()
@@ -15,18 +16,18 @@ const ImageClassificationConfig = () => {
           <label className="block text-sm font-medium text-foreground/80 mb-1">
             Top K Predictions: {topK}
           </label>
-          <input
-            type="range"
-            min="1"
-            max="10"
-            step="1"
-            value={topK}
-            onChange={(e) => setTopK(parseInt(e.target.value))}
-            className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer"
+          <Slider
+            defaultValue={[topK]}
+            min={1}
+            max={10}
+            step={1}
+            onValueChange={(value) => setTopK(value[0])}
+            className="w-full rounded-lg"
           />
           <div className="flex justify-between text-xs text-muted-foreground/60 mt-1">
             <span>1</span>
-            <span>5</span>
+            <span>4</span>
+            <span>7</span>
             <span>10</span>
           </div>
           <p className="text-xs text-muted-foreground mt-1">
@@ -36,7 +37,7 @@ const ImageClassificationConfig = () => {
 
         <div className="p-3 bg-chart-4/10 border border-chart-4/20 rounded-lg">
           <h4 className="text-sm font-medium text-chart-4 mb-2">💡 Tips</h4>
-          <div className="text-xs text-chart-4/80 space-y-1">
+          <div className="text-xs text-chart-4 space-y-1">
             <p>• Use Top K = 3-5 for most cases</p>
             <p>• Smaller images process faster</p>
             <p>• Try quantized models for speed</p>