File size: 5,151 Bytes
615cbd7 f3b30b4 1b3b6e1 046ca57 5b8fd7e 63dbafb bd85b1e 615cbd7 f3b30b4 4a70176 bd85b1e f3b30b4 bd85b1e 63dbafb f3b30b4 e19d3ef f3b30b4 de6e73e f3b30b4 f7c4172 f3b30b4 de6e73e 615cbd7 de6e73e f3b30b4 de6e73e f3b30b4 4a70176 f3b30b4 4a70176 bd85b1e 63dbafb bd85b1e 63dbafb 4a70176 bd85b1e 4a70176 f3b30b4 852dc0d 22f8eb7 a94a061 046ca57 5b8fd7e 63dbafb 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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
import { CircleQuestionMark, 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 TextToSpeechConfig from './pipelines/TextToSpeechConfig'
import { Button } from '@/components/ui/button'
import Tooltip from './Tooltip'
interface SidebarProps {
isOpen: boolean
onClose: () => void
setIsModalOpen: (isOpen: boolean) => void
setIsCodeModalOpen: (isOpen: boolean) => void
}
const Sidebar = ({
isOpen,
onClose,
setIsModalOpen,
setIsCodeModalOpen
}: SidebarProps) => {
const { pipeline, setPipeline, modelInfo } = 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">
<div>
<h3 className="text-md xl:text-lg font-semibold text-foreground text-nowrap mt-1">
Choose a Pipeline
</h3>
{(pipeline === 'feature-extraction' ||
pipeline === 'image-classification') && (
<span className="flex text-xs text-red-500 justify-center text-center">
WebGPU disabled{' '}
<Tooltip
content="onnxruntime-web seems not to support this pipeline"
className="transform -translate-x-1/3 break-keep max-w-12"
>
<CircleQuestionMark className="inline w-4 h-4 ml-1" />
</Tooltip>
</span>
)}
</div>
<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)}
disabled={!modelInfo}
>
<FileText className="w-4 h-4 flex-shrink-0" />
<span>View README.md</span>
</Button>
<Button
variant="outline"
onClick={() => setIsCodeModalOpen(true)}
disabled={!modelInfo}
>
<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 />}
{pipeline === 'text-to-speech' && <TextToSpeechConfig />}
</div>
</div>
</div>
</>
)
}
export default Sidebar
|