improve zero-shot-classification

src/components/ModelSelector.tsx

@@ -114,6 +114,7 @@ function ModelSelector() {
           ),
           widgetData: modelInfoResponse.widgetData
         }
+        console.log(modelInfo)
         setModelInfo(modelInfo)
         setIsCustomModel(isCustom)
         setIsFetching(false)

src/components/PipelineLayout.tsx

@@ -1,6 +1,7 @@
 import { useModel } from '../contexts/ModelContext'
 import { TextGenerationProvider } from '../contexts/TextGenerationContext'
 import { FeatureExtractionProvider } from '../contexts/FeatureExtractionContext'
+import { ZeroShotClassificationProvider } from '../contexts/ZeroShotClassificationContext'
 
 export const PipelineLayout = ({ children }: { children: React.ReactNode }) => {
   const { pipeline } = useModel()
@@ -12,8 +13,12 @@ export const PipelineLayout = ({ children }: { children: React.ReactNode }) => {
     case 'feature-extraction':
       return <FeatureExtractionProvider>{children}</FeatureExtractionProvider>
 
-    // case 'zero-shot-classification':
-    //   return <ZeroShotProvider>{children}</ZeroShotProvider>;
+    case 'zero-shot-classification':
+      return (
+        <ZeroShotClassificationProvider>
+          {children}
+        </ZeroShotClassificationProvider>
+      )
 
     default:
       return <>{children}</>

src/components/Sidebar.tsx

@@ -5,6 +5,7 @@ import ModelInfo from './ModelInfo'
 import { useModel } from '../contexts/ModelContext'
 import TextGenerationConfig from './TextGenerationConfig'
 import FeatureExtractionConfig from './FeatureExtractionConfig'
+import ZeroShotClassificationConfig from './ZeroShotClassificationConfig'
 
 interface SidebarProps {
   isOpen: boolean
@@ -77,6 +78,9 @@ const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
             <hr className="border-gray-200" />
             {pipeline === 'text-generation' && <TextGenerationConfig />}
             {pipeline === 'feature-extraction' && <FeatureExtractionConfig />}
+            {pipeline === 'zero-shot-classification' && (
+              <ZeroShotClassificationConfig />
+            )}
           </div>
         </div>
       </div>

src/components/TextGenerationConfig.tsx

@@ -18,13 +18,12 @@ function TextGenerationConfig() {
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-4">
       <h3 className="text-lg font-semibold text-gray-900">
         Text Generation Settings
       </h3>
 
-      {/* Generation Parameters */}
-      <div className="space-y-4 px-10">
+      <div className="space-y-3">
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-1">
             Temperature: {config.temperature}
@@ -40,6 +39,10 @@ function TextGenerationConfig() {
             }
             className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
           />
+          <p className="text-xs text-gray-500 mt-1">
+            Controls randomness in generation (lower = more focused, higher =
+            more creative)
+          </p>
         </div>
 
         <div>
@@ -57,6 +60,9 @@ function TextGenerationConfig() {
             }
             className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
           />
+          <p className="text-xs text-gray-500 mt-1">
+            Maximum number of tokens to generate in the response
+          </p>
         </div>
 
         <div>
@@ -74,6 +80,10 @@ function TextGenerationConfig() {
             }
             className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
           />
+          <p className="text-xs text-gray-500 mt-1">
+            Nucleus sampling - considers tokens with cumulative probability up
+            to this value
+          </p>
         </div>
 
         <div>
@@ -91,9 +101,12 @@ function TextGenerationConfig() {
             }
             className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
           />
+          <p className="text-xs text-gray-500 mt-1">
+            Only consider the top K most likely tokens at each step
+          </p>
         </div>
 
-        <div className="flex items-center pt-2">
+        <div className="flex items-center">
           <Switch
             checked={config.doSample}
             onChange={(checked) => handleConfigChange('doSample', checked)}
@@ -109,21 +122,47 @@ function TextGenerationConfig() {
             Do Sample
           </label>
         </div>
+        <p className="text-xs text-gray-500 mt-1">
+          Enable sampling-based generation (disable for deterministic output)
+        </p>
+
+        {/* System Message for Chat */}
+        {modelInfo?.hasChatTemplate && (
+          <div className="pt-2 border-t border-gray-200">
+            <h4 className="text-sm font-semibold text-gray-800 mb-2">
+              System Message
+            </h4>
+            <textarea
+              value={messages.find((m) => m.role === 'system')?.content || ''}
+              onChange={(e) => updateSystemMessage(e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+              rows={4}
+              placeholder="e.g., You are a helpful assistant."
+            />
+            <p className="text-xs text-gray-500 mt-1">
+              Initial instructions that guide the model's behavior throughout
+              the conversation
+            </p>
+          </div>
+        )}
       </div>
 
-      {/* System Message for Chat */}
-      {modelInfo?.hasChatTemplate && (
-        <div>
-          <h4 className="font-semibold text-gray-800 mb-2">System Message</h4>
-          <textarea
-            value={messages.find((m) => m.role === 'system')?.content || ''}
-            onChange={(e) => updateSystemMessage(e.target.value)}
-            className="w-full p-2 border border-gray-300 rounded-md text-sm"
-            rows={4}
-            placeholder="e.g., You are a helpful assistant."
-          />
+      <div className="pt-2 border-t border-gray-200">
+        <div className="text-xs text-gray-500">
+          <p className="mb-1">
+            <strong>Temperature:</strong> Higher values make output more random,
+            lower values more focused
+          </p>
+          <p className="mb-1">
+            <strong>Top-p & Top-k:</strong> Control which tokens are considered
+            during generation
+          </p>
+          <p>
+            <strong>Sampling:</strong> When disabled, always picks the most
+            likely next token (greedy decoding)
+          </p>
         </div>
-      )}
+      </div>
     </div>
   )
 }

src/components/ZeroShotClassification.tsx

@@ -1,48 +1,12 @@
-import { useState, useEffect, useCallback } from 'react'
-import { Section, WorkerMessage, ZeroShotWorkerInput } from '../types'
+import { useEffect, useCallback } from 'react'
+import { WorkerMessage, ZeroShotWorkerInput } from '../types'
 import { useModel } from '../contexts/ModelContext'
-
-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 { useZeroShotClassification } from '../contexts/ZeroShotClassificationContext'
+import { Send, Loader2 } from 'lucide-react'
 
 function ZeroShotClassification() {
-  const [text, setText] = useState<string>(PLACEHOLDER_REVIEWS.join('\n'))
-
-  const [sections, setSections] = useState<Section[]>(
-    PLACEHOLDER_SECTIONS.map((title) => ({ title, items: [] }))
-  )
+  const { text, setText, sections, setSections, config } =
+    useZeroShotClassification()
 
   const {
     activeWorker,
@@ -76,7 +40,14 @@ function ZeroShotClassification() {
       dtype: selectedQuantization ?? 'fp32'
     }
     activeWorker.postMessage(message)
-  }, [text, sections, modelInfo, activeWorker, selectedQuantization])
+  }, [
+    text,
+    sections,
+    modelInfo,
+    activeWorker,
+    selectedQuantization,
+    setSections
+  ])
 
   // Handle worker messages
   useEffect(() => {
@@ -88,7 +59,7 @@ function ZeroShotClassification() {
         const { sequence, labels, scores } = e.data.output!
 
         // Threshold for classification
-        const label = scores[0] > 0.5 ? labels[0] : 'Other'
+        const label = scores[0] > config.threshold ? labels[0] : 'Other'
 
         const sectionID =
           sections.map((x) => x.title).indexOf(label) ?? sections.length - 1
@@ -105,111 +76,98 @@ function ZeroShotClassification() {
 
     activeWorker.addEventListener('message', onMessageReceived)
     return () => activeWorker.removeEventListener('message', onMessageReceived)
-  }, [sections, activeWorker])
+  }, [sections, activeWorker, config.threshold, setSections])
 
   const busy: boolean = status !== 'ready'
 
-  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: []
-      }))
-    )
-  }
+  return (
+    <div className="flex flex-col h-[70vh] 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>
 
-  const handleSectionTitleChange = (index: number, newTitle: string): void => {
-    setSections((sections) => {
-      const newSections = [...sections]
-      newSections[index].title = newTitle
-      return newSections
-    })
-  }
+      {/* Input Text Area */}
+      <div className="mb-4">
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Text to classify (one item per line):
+        </label>
+        <textarea
+          value={text}
+          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}
+          disabled={!hasBeenLoaded || busy}
+        />
+      </div>
 
-  return (
-    <div className="flex flex-col h-screen w-full 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}
-        >
-          {hasBeenLoaded
-            ? !busy
-              ? 'Categorize'
-              : 'Processing...'
-            : 'Load model first'}
-        </button>
-        <div className="flex gap-1">
+      {/* Classify Button */}
+      <div className="mb-4">
+        {hasBeenLoaded && (
           <button
-            className="border py-1 px-2 bg-green-400 rounded text-white text-sm font-medium cursor-pointer"
-            onClick={handleAddCategory}
+            onClick={classify}
+            disabled={!text.trim() || busy || !hasBeenLoaded}
+            className="px-6 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded-lg transition-colors flex items-center gap-2"
           >
-            Add category
+            {busy ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Processing...
+              </>
+            ) : (
+              <>
+                <Send className="w-4 h-4" />
+                Categorize
+              </>
+            )}
           </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}
+      {/* 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">
+          {sections.map((section, index) => (
+            <div
+              key={index}
+              className="flex flex-col bg-white border border-gray-200 rounded-lg overflow-hidden"
+            >
+              <div className="px-3 py-2 bg-gray-50 border-b border-gray-200">
+                <h3
+                  className="font-medium text-gray-900 text-center truncate"
+                  title={section.title}
                 >
-                  {item}
+                  {section.title}
+                </h3>
+                <div className="text-xs text-gray-500 text-center">
+                  {section.items.length} items
                 </div>
-              ))}
+              </div>
+              <div className="flex-1 overflow-y-auto p-3 space-y-2">
+                {section.items.map((item, itemIndex) => (
+                  <div
+                    key={itemIndex}
+                    className="p-2 bg-blue-50 border border-blue-200 rounded text-sm"
+                  >
+                    {item}
+                  </div>
+                ))}
+                {section.items.length === 0 && (
+                  <div className="text-gray-400 text-sm italic text-center py-4">
+                    No items classified here yet
+                  </div>
+                )}
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
+
+      {!hasBeenLoaded && (
+        <div className="text-center text-gray-500 text-sm mt-2">
+          Please load a model first to start classifying text
+        </div>
+      )}
     </div>
   )
 }

src/components/ZeroShotClassificationConfig.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { Plus, Minus, Trash2 } from 'lucide-react'
+import { useZeroShotClassification } from '../contexts/ZeroShotClassificationContext'
+
+const ZeroShotClassificationConfig = () => {
+  const {
+    config,
+    setConfig,
+    sections,
+    addCategory,
+    removeCategory,
+    clearResults,
+    updateSectionTitle
+  } = useZeroShotClassification()
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-lg font-semibold text-gray-900">
+        Zero-Shot Classification Settings
+      </h3>
+
+      <div className="space-y-3">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Classification Threshold: {config.threshold}
+          </label>
+          <input
+            type="range"
+            min="0.1"
+            max="0.9"
+            step="0.1"
+            value={config.threshold}
+            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)
+          </p>
+        </div>
+
+        <div className="pt-2 border-t border-gray-200">
+          <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) => (
+              <div key={index} className="flex items-center space-x-2">
+                <input
+                  type="text"
+                  value={section.title}
+                  onChange={(e) => updateSectionTitle(index, e.target.value)}
+                  disabled={section.title === 'Other'}
+                  className="flex-1 px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+                />
+                <span className="text-xs text-gray-500 min-w-[2rem]">
+                  ({section.items.length})
+                </span>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex gap-2 mt-3">
+            <button
+              onClick={addCategory}
+              className="flex items-center gap-1 px-3 py-1 text-xs bg-green-500 hover:bg-green-600 text-white rounded transition-colors"
+              title="Add Category"
+            >
+              <Plus className="w-3 h-3" />
+              Add
+            </button>
+            <button
+              onClick={removeCategory}
+              disabled={sections.length <= 1}
+              className="flex items-center gap-1 px-3 py-1 text-xs bg-red-500 hover:bg-red-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded transition-colors"
+              title="Remove Category"
+            >
+              <Minus className="w-3 h-3" />
+              Remove
+            </button>
+            <button
+              onClick={clearResults}
+              className="flex items-center gap-1 px-3 py-1 text-xs bg-orange-500 hover:bg-orange-600 text-white rounded transition-colors"
+              title="Clear Results"
+            >
+              <Trash2 className="w-3 h-3" />
+              Clear
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <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"
+          </p>
+          <p className="mb-1">
+            <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
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ZeroShotClassificationConfig

src/contexts/ZeroShotClassificationContext.tsx

@@ -0,0 +1,132 @@
+import React, { createContext, useContext, useState, useCallback } from 'react'
+import { Section } from '../types'
+
+interface ZeroShotClassificationConfig {
+  threshold: number
+}
+
+interface ZeroShotClassificationContextType {
+  config: ZeroShotClassificationConfig
+  setConfig: React.Dispatch<React.SetStateAction<ZeroShotClassificationConfig>>
+  text: string
+  setText: React.Dispatch<React.SetStateAction<string>>
+  sections: Section[]
+  setSections: React.Dispatch<React.SetStateAction<Section[]>>
+  addCategory: () => void
+  removeCategory: () => void
+  clearResults: () => void
+  updateSectionTitle: (index: number, newTitle: string) => void
+}
+
+const ZeroShotClassificationContext = createContext<ZeroShotClassificationContextType | undefined>(undefined)
+
+export const useZeroShotClassification = () => {
+  const context = useContext(ZeroShotClassificationContext)
+  if (!context) {
+    throw new Error('useZeroShotClassification must be used within a ZeroShotClassificationProvider')
+  }
+  return context
+}
+
+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'
+]
+
+export const ZeroShotClassificationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [config, setConfig] = useState<ZeroShotClassificationConfig>({
+    threshold: 0.5
+  })
+
+  const [text, setText] = useState<string>(PLACEHOLDER_REVIEWS.join('\n'))
+
+  const [sections, setSections] = useState<Section[]>(
+    PLACEHOLDER_SECTIONS.map((title) => ({ title, items: [] }))
+  )
+
+  const addCategory = useCallback(() => {
+    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 removeCategory = useCallback(() => {
+    setSections((sections) => {
+      const newSections = [...sections]
+      newSections.splice(newSections.length - 2, 1) // Remove second last element
+      return newSections
+    })
+  }, [])
+
+  const clearResults = useCallback(() => {
+    setSections((sections) =>
+      sections.map((section) => ({
+        ...section,
+        items: []
+      }))
+    )
+  }, [])
+
+  const updateSectionTitle = useCallback((index: number, newTitle: string) => {
+    setSections((sections) => {
+      const newSections = [...sections]
+      newSections[index].title = newTitle
+      return newSections
+    })
+  }, [])
+
+  const value: ZeroShotClassificationContextType = {
+    config,
+    setConfig,
+    text,
+    setText,
+    sections,
+    setSections,
+    addCategory,
+    removeCategory,
+    clearResults,
+    updateSectionTitle
+  }
+
+  return (
+    <ZeroShotClassificationContext.Provider value={value}>
+      {children}
+    </ZeroShotClassificationContext.Provider>
+  )
+}