File size: 3,817 Bytes
4a70176 f3b30b4 1b3b6e1 046ca57 f3b30b4 4a70176 f3b30b4 4a70176 f3b30b4 e19d3ef f3b30b4 de6e73e f3b30b4 f7c4172 f3b30b4 de6e73e f3b30b4 de6e73e f3b30b4 de6e73e f3b30b4 4a70176 f3b30b4 4a70176 f7c4172 4a70176 f7c4172 4a70176 f7c4172 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 |
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 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-foreground">
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 overflow-x-hidden p-4 space-y-6">
{/* Pipeline Selection */}
<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>
<PipelineSelector pipeline={pipeline} setPipeline={setPipeline} />
</div>
{/* Model Selection */}
<div className="space-y-3">
<h3 className="text-lg font-semibold text-foreground">
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-full max-w-44 mx-auto">
<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
|