Move text generation config to sidebar with context

src/App.tsx

@@ -8,6 +8,7 @@ import { getModelsByPipeline } from './lib/huggingface'
 import TextGeneration from './components/TextGeneration'
 import Sidebar from './components/Sidebar'
 import ModelReadme from './components/ModelReadme'
+import { PipelineLayout } from './components/PipelineLayout'
 
 function App() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false)
@@ -34,50 +35,51 @@ function App() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
       <Header />
-
-      <div className="flex h-[calc(100vh-4rem)]">
-        {/* Header is h-16 = 4rem */}
-        {/* Main Content */}
-        <main className="flex-1 overflow-auto">
-          <div className="h-full px-4 sm:px-6 lg:px-8 py-8 lg:pr-4 max-w-none">
-            {/* Mobile menu button */}
-            <div className="flex flex-row space-x-4">
-              <div className="lg:hidden mb-4">
-                <button
-                  onClick={() => setIsSidebarOpen(true)}
-                  className="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                >
-                  <Settings className="w-4 h-4 mr-2" />
-                  Configuration
-                </button>
+      <PipelineLayout>
+        <div className="flex h-[calc(100vh-4rem)]">
+          {/* Header is h-16 = 4rem */}
+          {/* Main Content */}
+          <main className="flex-1 overflow-auto">
+            <div className="h-full px-4 sm:px-6 lg:px-8 py-8 lg:pr-4 max-w-none">
+              {/* Mobile menu button */}
+              <div className="flex flex-row space-x-4">
+                <div className="lg:hidden mb-4">
+                  <button
+                    onClick={() => setIsSidebarOpen(true)}
+                    className="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                  >
+                    <Settings className="w-4 h-4 mr-2" />
+                    Configuration
+                  </button>
+                </div>
+                {/* Model README Button */}
+                <div className="mb-4">
+                  {modelInfo?.readme && (
+                    <ModelReadme
+                      readme={modelInfo.readme}
+                      modelName={modelInfo.name}
+                      pipeline={pipeline}
+                    />
+                  )}
+                </div>
               </div>
-              {/* Model README Button */}
-              <div className="mb-4">
-                {modelInfo?.readme && (
-                  <ModelReadme
-                    readme={modelInfo.readme}
-                    modelName={modelInfo.name}
-                    pipeline={pipeline}
-                  />
+              {/* Pipeline Component */}
+              <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
+                {pipeline === 'zero-shot-classification' && (
+                  <ZeroShotClassification />
                 )}
+                {pipeline === 'text-classification' && <TextClassification />}
+                {pipeline === 'text-generation' && <TextGeneration />}
               </div>
             </div>
-            {/* Pipeline Component */}
-            <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
-              {pipeline === 'zero-shot-classification' && (
-                <ZeroShotClassification />
-              )}
-              {pipeline === 'text-classification' && <TextClassification />}
-              {pipeline === 'text-generation' && <TextGeneration />}
-            </div>
-          </div>
-        </main>
-        {/* Sidebar */}
-        <Sidebar
-          isOpen={isSidebarOpen}
-          onClose={() => setIsSidebarOpen(false)}
-        />
-      </div>
+          </main>
+          {/* Sidebar */}
+          <Sidebar
+            isOpen={isSidebarOpen}
+            onClose={() => setIsSidebarOpen(false)}
+          />
+        </div>
+      </PipelineLayout>
     </div>
   )
 }

src/components/PipelineLayout.tsx

@@ -0,0 +1,17 @@
+import { useModel } from '../contexts/ModelContext'
+import { TextGenerationProvider } from '../contexts/TextGenerationContext'
+
+export const PipelineLayout = ({ children }: { children: React.ReactNode }) => {
+  const { pipeline } = useModel()
+
+  switch (pipeline) {
+    case 'text-generation':
+      return <TextGenerationProvider>{children}</TextGenerationProvider>
+
+    // case 'zero-shot-classification':
+    //   return <ZeroShotProvider>{children}</ZeroShotProvider>;
+
+    default:
+      return <>{children}</>
+  }
+}

src/components/Sidebar.tsx

@@ -3,6 +3,7 @@ import PipelineSelector from './PipelineSelector'
 import ModelSelector from './ModelSelector'
 import ModelInfo from './ModelInfo'
 import { useModel } from '../contexts/ModelContext'
+import TextGenerationConfig from './TextGenerationConfig'
 
 interface SidebarProps {
   isOpen: boolean
@@ -73,6 +74,7 @@ const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
             </div>
 
             <hr className="border-gray-200" />
+            {pipeline === 'text-generation' && <TextGenerationConfig />}
           </div>
         </div>
       </div>

src/components/TextGeneration.tsx

@@ -1,36 +1,24 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
-import { Send, Settings, Trash2, Loader2, X } from 'lucide-react'
-import { Dialog, Transition, Switch } from '@headlessui/react'
-import { Fragment } from 'react'
-import {
-  ChatMessage,
-  TextGenerationWorkerInput,
-  WorkerMessage
-} from '../types'
+import { Send, Trash2, Loader2, X } from 'lucide-react'
+import { ChatMessage, TextGenerationWorkerInput, WorkerMessage } from '../types'
 import { useModel } from '../contexts/ModelContext'
+import { useTextGeneration } from '../contexts/TextGenerationContext'
 
 function TextGeneration() {
-  const [messages, setMessages] = useState<ChatMessage[]>([
-    { role: 'system', content: 'You are a helpful assistant.' }
-  ])
+  const { config, messages, setMessages } = useTextGeneration()
+
   const [currentMessage, setCurrentMessage] = useState<string>('')
-  const [showSettings, setShowSettings] = useState<boolean>(false)
-  
-  // For simple text generation
   const [prompt, setPrompt] = useState<string>('')
   const [generatedText, setGeneratedText] = useState<string>('')
-  
-  // Generation parameters
-  const [temperature, setTemperature] = useState<number>(0.7)
-  const [maxTokens, setMaxTokens] = useState<number>(100)
-  const [topP, setTopP] = useState<number>(0.9)
-  const [topK, setTopK] = useState<number>(50)
-  const [doSample, setDoSample] = useState<boolean>(true)
-  
-  // Generation state
   const [isGenerating, setIsGenerating] = useState<boolean>(false)
 
-  const { activeWorker, status, modelInfo, hasBeenLoaded, selectedQuantization } = useModel()
+  const {
+    activeWorker,
+    status,
+    modelInfo,
+    hasBeenLoaded,
+    selectedQuantization
+  } = useModel()
   const messagesEndRef = useRef<HTMLDivElement>(null)
 
   const scrollToBottom = () => {
@@ -49,15 +37,13 @@ function TextGeneration() {
   }, [activeWorker, isGenerating])
 
   const handleSendMessage = useCallback(() => {
-    if (!currentMessage.trim() || !modelInfo || !activeWorker || isGenerating) {
+    if (!currentMessage.trim() || !modelInfo || !activeWorker || isGenerating)
       return
-    }
 
     const userMessage: ChatMessage = {
       role: 'user',
       content: currentMessage.trim()
     }
-
     const updatedMessages = [...messages, userMessage]
     setMessages(updatedMessages)
     setCurrentMessage('')
@@ -68,22 +54,28 @@ function TextGeneration() {
       messages: updatedMessages,
       hasChatTemplate: modelInfo.hasChatTemplate,
       model: modelInfo.id,
-      temperature,
-      max_new_tokens: maxTokens,
-      top_p: topP,
-      top_k: topK,
-      do_sample: doSample,
+      temperature: config.temperature,
+      max_new_tokens: config.maxTokens,
+      top_p: config.topP,
+      top_k: config.topK,
+      do_sample: config.doSample,
       dtype: selectedQuantization ?? 'fp32'
     }
 
     activeWorker.postMessage(message)
-  }, [currentMessage, messages, modelInfo, activeWorker, temperature, maxTokens, topP, topK, doSample, isGenerating, selectedQuantization])
+  }, [
+    currentMessage,
+    messages,
+    setMessages,
+    modelInfo,
+    activeWorker,
+    config,
+    isGenerating,
+    selectedQuantization
+  ])
 
   const handleGenerateText = useCallback(() => {
-    if (!prompt.trim() || !modelInfo || !activeWorker || isGenerating) {
-      return
-    }
-
+    if (!prompt.trim() || !modelInfo || !activeWorker || isGenerating) return
     setIsGenerating(true)
 
     const message: TextGenerationWorkerInput = {
@@ -91,53 +83,51 @@ function TextGeneration() {
       prompt: prompt.trim(),
       hasChatTemplate: modelInfo.hasChatTemplate,
       model: modelInfo.id,
-      temperature,
-      max_new_tokens: maxTokens,
-      top_p: topP,
-      top_k: topK,
-      do_sample: doSample,
+      temperature: config.temperature,
+      max_new_tokens: config.maxTokens,
+      top_p: config.topP,
+      top_k: config.topK,
+      do_sample: config.doSample,
       dtype: selectedQuantization ?? 'fp32'
     }
 
     activeWorker.postMessage(message)
-  }, [prompt, modelInfo, activeWorker, temperature, maxTokens, topP, topK, doSample, isGenerating, selectedQuantization])
+  }, [
+    prompt,
+    modelInfo,
+    activeWorker,
+    config,
+    isGenerating,
+    selectedQuantization
+  ])
 
   useEffect(() => {
     if (!activeWorker) return
-
     const onMessageReceived = (e: MessageEvent<WorkerMessage>) => {
       const { status, output } = e.data
-      
       if (status === 'output' && output) {
         setIsGenerating(false)
         if (modelInfo?.hasChatTemplate) {
-          // Chat mode
           const assistantMessage: ChatMessage = {
             role: 'assistant',
             content: output.content
           }
-          setMessages(prev => [...prev, assistantMessage])
+          setMessages((prev) => [...prev, assistantMessage])
         } else {
-          // Simple text generation mode
           setGeneratedText(output.content)
         }
-      } else if (status === 'ready') {
-        setIsGenerating(false)
-      } else if (status === 'error') {
+      } else if (status === 'ready' || status === 'error') {
         setIsGenerating(false)
       }
     }
-
     activeWorker.addEventListener('message', onMessageReceived)
-
-    return () => {
-      activeWorker.removeEventListener('message', onMessageReceived)
-    }
-  }, [activeWorker, modelInfo?.hasChatTemplate])
+    return () => activeWorker.removeEventListener('message', onMessageReceived)
+  }, [activeWorker, modelInfo?.hasChatTemplate, setMessages])
 
   const handleKeyPress = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault()
+
       if (modelInfo?.hasChatTemplate) {
         handleSendMessage()
       } else {
@@ -148,21 +138,13 @@ function TextGeneration() {
 
   const clearChat = () => {
     if (modelInfo?.hasChatTemplate) {
-      setMessages([{ role: 'system', content: 'You are a helpful assistant.' }])
+      setMessages((prev) => prev.filter((msg) => msg.role === 'system'))
     } else {
       setPrompt('')
       setGeneratedText('')
     }
   }
 
-  const updateSystemMessage = (content: string) => {
-    setMessages(prev => [
-      { role: 'system', content },
-      ...prev.filter(msg => msg.role !== 'system')
-    ])
-  }
-
-
   const busy = status !== 'ready' || isGenerating
   const hasChatTemplate = modelInfo?.hasChatTemplate
 
@@ -173,17 +155,10 @@ function TextGeneration() {
           {hasChatTemplate ? 'Chat with AI' : 'Text Generation'}
         </h1>
         <div className="flex gap-2">
-          <button
-            onClick={() => setShowSettings(true)}
-            className="p-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
-            title="Settings"
-          >
-            <Settings className="w-4 h-4" />
-          </button>
           <button
             onClick={clearChat}
             className="p-2 bg-red-100 hover:bg-red-200 rounded-lg transition-colors"
-            title={hasChatTemplate ? "Clear Chat" : "Clear Text"}
+            title={hasChatTemplate ? 'Clear Chat' : 'Clear Text'}
           >
             <Trash2 className="w-4 h-4" />
           </button>
@@ -199,188 +174,39 @@ function TextGeneration() {
         </div>
       </div>
 
-      {/* Settings Dialog using Headless UI */}
-      <Transition appear show={showSettings} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={() => setShowSettings(false)}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black bg-opacity-25" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-gray-900 mb-4"
-                  >
-                    Generation Settings
-                  </Dialog.Title>
-                  
-                  <div className="space-y-6">
-                    {/* Generation Parameters */}
-                    <div>
-                      <h4 className="font-semibold text-gray-800 mb-3">Parameters</h4>
-                      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-                        <div>
-                          <label className="block text-sm font-medium text-gray-700 mb-1">
-                            Temperature: {temperature}
-                          </label>
-                          <input
-                            type="range"
-                            min="0.1"
-                            max="2.0"
-                            step="0.1"
-                            value={temperature}
-                            onChange={(e) => setTemperature(parseFloat(e.target.value))}
-                            className="w-full"
-                          />
-                        </div>
-                        
-                        <div>
-                          <label className="block text-sm font-medium text-gray-700 mb-1">
-                            Max Tokens: {maxTokens}
-                          </label>
-                          <input
-                            type="range"
-                            min="10"
-                            max="500"
-                            step="10"
-                            value={maxTokens}
-                            onChange={(e) => setMaxTokens(parseInt(e.target.value))}
-                            className="w-full"
-                          />
-                        </div>
-                        
-                        <div>
-                          <label className="block text-sm font-medium text-gray-700 mb-1">
-                            Top P: {topP}
-                          </label>
-                          <input
-                            type="range"
-                            min="0.1"
-                            max="1.0"
-                            step="0.1"
-                            value={topP}
-                            onChange={(e) => setTopP(parseFloat(e.target.value))}
-                            className="w-full"
-                          />
-                        </div>
-                        
-                        <div>
-                          <label className="block text-sm font-medium text-gray-700 mb-1">
-                            Top K: {topK}
-                          </label>
-                          <input
-                            type="range"
-                            min="1"
-                            max="100"
-                            step="1"
-                            value={topK}
-                            onChange={(e) => setTopK(parseInt(e.target.value))}
-                            className="w-full"
-                          />
-                        </div>
-                        
-                        <div className="flex items-center">
-                          <Switch
-                            checked={doSample}
-                            onChange={setDoSample}
-                            className={`${
-                              doSample ? 'bg-blue-600' : 'bg-gray-200'
-                            } relative inline-flex h-6 w-11 items-center rounded-full`}
-                          >
-                            <span className="sr-only">Enable sampling</span>
-                            <span
-                              className={`${
-                                doSample ? 'translate-x-6' : 'translate-x-1'
-                              } inline-block h-4 w-4 transform rounded-full bg-white transition`}
-                            />
-                          </Switch>
-                          <label className="ml-2 text-sm font-medium text-gray-700">
-                            Do Sample
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-
-
-                    {/* System Message for Chat */}
-                    {hasChatTemplate && (
-                      <div>
-                        <h4 className="font-semibold text-gray-800 mb-3">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={3}
-                          placeholder="Enter system message..."
-                        />
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="mt-6 flex justify-end">
-                    <button
-                      type="button"
-                      className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                      onClick={() => setShowSettings(false)}
-                    >
-                      Close
-                    </button>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
-
       {hasChatTemplate ? (
-        // Chat Layout
         <>
-          {/* Chat Messages */}
           <div className="flex-1 overflow-y-auto border border-gray-300 rounded-lg p-4 mb-4 bg-white">
             <div className="space-y-4">
-              {messages.filter(msg => msg.role !== 'system').map((message, index) => (
-                <div
-                  key={index}
-                  className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
-                >
+              {messages
+                .filter((msg) => msg.role !== 'system')
+                .map((message, index) => (
                   <div
-                    className={`max-w-[80%] p-3 rounded-lg ${
-                      message.role === 'user'
-                        ? 'bg-blue-500 text-white'
-                        : 'bg-gray-100 text-gray-800'
-                    }`}
+                    key={index}
+                    className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
                   >
-                    <div className="text-xs font-medium mb-1 opacity-70">
-                      {message.role === 'user' ? 'You' : 'Assistant'}
+                    <div
+                      className={`max-w-[80%] p-3 rounded-lg ${
+                        message.role === 'user'
+                          ? 'bg-blue-500 text-white'
+                          : 'bg-gray-100 text-gray-800'
+                      }`}
+                    >
+                      <div className="text-xs font-medium mb-1 opacity-70">
+                        {message.role === 'user' ? 'You' : 'Assistant'}
+                      </div>
+                      <div className="whitespace-pre-wrap">
+                        {message.content}
+                      </div>
                     </div>
-                    <div className="whitespace-pre-wrap">{message.content}</div>
                   </div>
-                </div>
-              ))}
+                ))}
               {isGenerating && (
                 <div className="flex justify-start">
                   <div className="bg-gray-100 text-gray-800 p-3 rounded-lg">
-                    <div className="text-xs font-medium mb-1 opacity-70">Assistant</div>
+                    <div className="text-xs font-medium mb-1 opacity-70">
+                      Assistant
+                    </div>
                     <div className="flex items-center space-x-2">
                       <Loader2 className="w-4 h-4 animate-spin" />
                       <div>Loading...</div>
@@ -391,8 +217,6 @@ function TextGeneration() {
             </div>
             <div ref={messagesEndRef} />
           </div>
-
-          {/* Chat Input Area */}
           <div className="flex gap-2">
             <textarea
               value={currentMessage}
@@ -417,9 +241,7 @@ function TextGeneration() {
           </div>
         </>
       ) : (
-        // Simple Text Generation Layout
         <>
-          {/* Prompt Input */}
           <div className="mb-4">
             <label className="block text-sm font-medium text-gray-700 mb-2">
               Enter your prompt:
@@ -434,8 +256,6 @@ function TextGeneration() {
               disabled={!hasBeenLoaded || isGenerating}
             />
           </div>
-
-          {/* Generate Button */}
           <div className="mb-4">
             <button
               onClick={handleGenerateText}
@@ -455,8 +275,6 @@ function TextGeneration() {
               )}
             </button>
           </div>
-
-          {/* Generated Text Output */}
           <div className="flex-1 overflow-y-auto border border-gray-300 rounded-lg p-4 bg-white">
             <div className="mb-2">
               <label className="block text-sm font-medium text-gray-700">
@@ -486,7 +304,8 @@ function TextGeneration() {
 
       {!hasBeenLoaded && (
         <div className="text-center text-gray-500 text-sm mt-2">
-          Please load a model first to start {hasChatTemplate ? 'chatting' : 'generating text'}
+          Please load a model first to start{' '}
+          {hasChatTemplate ? 'chatting' : 'generating text'}
         </div>
       )}
     </div>

src/components/TextGenerationConfig.tsx

@@ -0,0 +1,131 @@
+import { Switch } from '@headlessui/react'
+import {
+  useTextGeneration,
+  GenerationConfigState
+} from '../contexts/TextGenerationContext'
+import { useModel } from '../contexts/ModelContext'
+
+function TextGenerationConfig() {
+  const { config, setConfig, messages, updateSystemMessage } =
+    useTextGeneration()
+  const { modelInfo } = useModel()
+
+  const handleConfigChange = (
+    field: keyof GenerationConfigState,
+    value: number | boolean
+  ) => {
+    setConfig((prev) => ({ ...prev, [field]: value }))
+  }
+
+  return (
+    <div className="space-y-6">
+      <h3 className="text-lg font-semibold text-gray-900">
+        Text Generation Settings
+      </h3>
+
+      {/* Generation Parameters */}
+      <div className="space-y-4 px-10">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Temperature: {config.temperature}
+          </label>
+          <input
+            type="range"
+            min="0.1"
+            max="2.0"
+            step="0.1"
+            value={config.temperature}
+            onChange={(e) =>
+              handleConfigChange('temperature', parseFloat(e.target.value))
+            }
+            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Max Tokens: {config.maxTokens}
+          </label>
+          <input
+            type="range"
+            min="10"
+            max="500"
+            step="10"
+            value={config.maxTokens}
+            onChange={(e) =>
+              handleConfigChange('maxTokens', parseInt(e.target.value))
+            }
+            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Top-p: {config.topP}
+          </label>
+          <input
+            type="range"
+            min="0.1"
+            max="1.0"
+            step="0.1"
+            value={config.topP}
+            onChange={(e) =>
+              handleConfigChange('topP', parseFloat(e.target.value))
+            }
+            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Top-k: {config.topK}
+          </label>
+          <input
+            type="range"
+            min="1"
+            max="100"
+            step="1"
+            value={config.topK}
+            onChange={(e) =>
+              handleConfigChange('topK', parseInt(e.target.value))
+            }
+            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+          />
+        </div>
+
+        <div className="flex items-center pt-2">
+          <Switch
+            checked={config.doSample}
+            onChange={(checked) => handleConfigChange('doSample', checked)}
+            className={`${config.doSample ? 'bg-blue-600' : 'bg-gray-200'}
+              relative inline-flex h-6 w-11 items-center rounded-full`}
+          >
+            <span
+              className={`${config.doSample ? 'translate-x-6' : 'translate-x-1'}
+                inline-block h-4 w-4 transform rounded-full bg-white transition`}
+            />
+          </Switch>
+          <label className="ml-3 text-sm font-medium text-gray-700">
+            Do Sample
+          </label>
+        </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>
+      )}
+    </div>
+  )
+}
+
+export default TextGenerationConfig

src/contexts/TextGenerationContext.tsx

@@ -0,0 +1,67 @@
+import { createContext, useContext, useState, ReactNode } from 'react'
+import { ChatMessage } from '../types'
+
+export interface GenerationConfigState {
+  temperature: number
+  maxTokens: number
+  topP: number
+  topK: number
+  doSample: boolean
+}
+
+interface TextGenerationContextType {
+  config: GenerationConfigState
+  setConfig: React.Dispatch<React.SetStateAction<GenerationConfigState>>
+  messages: ChatMessage[]
+  setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>
+  updateSystemMessage: (content: string) => void
+}
+
+const TextGenerationContext = createContext<
+  TextGenerationContextType | undefined
+>(undefined)
+
+export function TextGenerationProvider({ children }: { children: ReactNode }) {
+  const [config, setConfig] = useState<GenerationConfigState>({
+    temperature: 0.7,
+    maxTokens: 100,
+    topP: 0.9,
+    topK: 50,
+    doSample: true
+  })
+
+  const [messages, setMessages] = useState<ChatMessage[]>([
+    { role: 'system', content: 'You are a helpful assistant.' }
+  ])
+
+  const updateSystemMessage = (content: string) => {
+    setMessages((prev) => [
+      { role: 'system', content },
+      ...prev.filter((msg) => msg.role !== 'system')
+    ])
+  }
+
+  const value = {
+    config,
+    setConfig,
+    messages,
+    setMessages,
+    updateSystemMessage
+  }
+
+  return (
+    <TextGenerationContext.Provider value={value}>
+      {children}
+    </TextGenerationContext.Provider>
+  )
+}
+
+export function useTextGeneration() {
+  const context = useContext(TextGenerationContext)
+  if (context === undefined) {
+    throw new Error(
+      'useTextGeneration must be used within a TextGenerationProvider'
+    )
+  }
+  return context
+}