File size: 3,891 Bytes
4a70176 f3b30b4 1b3b6e1 046ca57 f3b30b4 4a70176 f3b30b4 4a70176 f3b30b4 4a70176 f3b30b4 4a70176 f3b30b4 4a70176 f3b30b4 852dc0d 22f8eb7 a94a061 046ca57 f3b30b4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
import { FileText, X } from 'lucide-react'
import PipelineSelector from './PipelineSelector'
import ModelSelector from './ModelSelector'
import ModelInfo from './ModelInfo'
import { useModel } from '../contexts/ModelContext'
import TextGenerationConfig from './pipelines/TextGenerationConfig'
import FeatureExtractionConfig from './pipelines/FeatureExtractionConfig'
import ZeroShotClassificationConfig from './pipelines/ZeroShotClassificationConfig'
import ImageClassificationConfig from './pipelines/ImageClassificationConfig'
interface SidebarProps {
isOpen: boolean
onClose: () => void
setIsModalOpen: (isOpen: boolean) => void
}
const Sidebar = ({ isOpen, onClose, setIsModalOpen }: SidebarProps) => {
const { pipeline, setPipeline } = useModel()
return (
<>
{/* Overlay */}
{isOpen && (
<div
className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
onClick={onClose}
/>
)}
{/* Sidebar */}
<div
className={`
fixed top-0 right-0 h-full w-full sm:w-[600px] lg:w-1/5 2xl:w-2/5 min-w-[400px] max-w-[500px] bg-white shadow-xl z-40 transform transition-transform duration-300 ease-in-out
${isOpen ? 'translate-x-0' : 'translate-x-full'}
lg:translate-x-0 lg:static lg:shadow-none lg:border-l lg:border-gray-200
`}
>
<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">
Configuration
</h2>
<button
onClick={onClose}
className="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100"
>
<X className="w-5 h-5" />
</button>
</div>
{/* Content */}
<div className="flex-1 overflow-y-auto p-4 space-y-6">
{/* Pipeline Selection */}
<div className="space-y-3 flex flex-row items-center space-x-4 text-center">
<h3 className="text-md xl:text-lg font-semibold text-gray-900 w-2/5 mt-2">
Choose a Pipeline
</h3>
<div className="w-3/5">
<PipelineSelector
pipeline={pipeline}
setPipeline={setPipeline}
/>
</div>
</div>
{/* Model Selection */}
<div className="space-y-3">
<h3 className="text-lg font-semibold text-gray-900">
Select Model
</h3>
<ModelSelector />
</div>
{/* Model Info */}
<div className="flex flex-col items-center justify-center">
<ModelInfo />
{/* Model README Button */}
<div className="mt-4 w-42">
<button
onClick={() => setIsModalOpen(true)}
className="flex items-center w-full px-3 py-2 text-sm text-gray-600 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors"
>
<FileText className="w-4 h-4 mr-2 flex-shrink-0" />
<span className="truncate">View README.md</span>
</button>
</div>
</div>
<hr className="border-gray-200" />
{pipeline === 'text-generation' && <TextGenerationConfig />}
{pipeline === 'feature-extraction' && <FeatureExtractionConfig />}
{pipeline === 'zero-shot-classification' && (
<ZeroShotClassificationConfig />
)}
{pipeline === 'image-classification' && (
<ImageClassificationConfig />
)}
</div>
</div>
</div>
</>
)
}
export default Sidebar
|