File size: 4,160 Bytes
bd85b1e f3b30b4 1b3b6e1 046ca57 5b8fd7e bd85b1e f3b30b4 4a70176 bd85b1e f3b30b4 bd85b1e f3b30b4 e19d3ef f3b30b4 de6e73e f3b30b4 f7c4172 f3b30b4 de6e73e f3b30b4 de6e73e f3b30b4 de6e73e f3b30b4 4a70176 f3b30b4 4a70176 bd85b1e 4a70176 bd85b1e 4a70176 f3b30b4 852dc0d 22f8eb7 a94a061 046ca57 5b8fd7e 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 108 109 110 111 112 113 114 115 |
import { Code2, 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'
import TextClassificationConfig from './pipelines/TextClassificationConfig'
import { Button } from '@/components/ui/button'
interface SidebarProps {
isOpen: boolean
onClose: () => void
setIsModalOpen: (isOpen: boolean) => void
setIsCodeModalOpen: (isOpen: boolean) => void
}
const Sidebar = ({
isOpen,
onClose,
setIsModalOpen,
setIsCodeModalOpen
}: 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="flex flex-row mt-2 space-x-4 ">
<Button variant="outline" onClick={() => setIsModalOpen(true)}>
<FileText className="w-4 h-4 flex-shrink-0" />
<span>View README.md</span>
</Button>
<Button
variant="outline"
onClick={() => setIsCodeModalOpen(true)}
>
<Code2 className="w-4 h-4 flex-shrink-0" />
<span>See Code</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 />
)}
{pipeline === 'text-classification' && <TextClassificationConfig />}
</div>
</div>
</div>
</>
)
}
export default Sidebar
|