add message for unsupported pipelines in Sidebar component
Browse files- src/components/Sidebar.tsx +19 -4
src/components/Sidebar.tsx
CHANGED
@@ -1,4 +1,4 @@
|
|
1 |
-
import { Code2, FileText, X } from 'lucide-react'
|
2 |
import PipelineSelector from './PipelineSelector'
|
3 |
import ModelSelector from './ModelSelector'
|
4 |
import ModelInfo from './ModelInfo'
|
@@ -9,6 +9,7 @@ import ZeroShotClassificationConfig from './pipelines/ZeroShotClassificationConf
|
|
9 |
import ImageClassificationConfig from './pipelines/ImageClassificationConfig'
|
10 |
import TextClassificationConfig from './pipelines/TextClassificationConfig'
|
11 |
import { Button } from '@/components/ui/button'
|
|
|
12 |
|
13 |
interface SidebarProps {
|
14 |
isOpen: boolean
|
@@ -61,9 +62,23 @@ const Sidebar = ({
|
|
61 |
<div className="flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6">
|
62 |
{/* Pipeline Selection */}
|
63 |
<div className="space-x-3 flex flex-row justify-center align-center">
|
64 |
-
<
|
65 |
-
|
66 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
67 |
<PipelineSelector pipeline={pipeline} setPipeline={setPipeline} />
|
68 |
</div>
|
69 |
|
|
|
1 |
+
import { CircleQuestionMark, Code2, FileText, X } from 'lucide-react'
|
2 |
import PipelineSelector from './PipelineSelector'
|
3 |
import ModelSelector from './ModelSelector'
|
4 |
import ModelInfo from './ModelInfo'
|
|
|
9 |
import ImageClassificationConfig from './pipelines/ImageClassificationConfig'
|
10 |
import TextClassificationConfig from './pipelines/TextClassificationConfig'
|
11 |
import { Button } from '@/components/ui/button'
|
12 |
+
import Tooltip from './Tooltip'
|
13 |
|
14 |
interface SidebarProps {
|
15 |
isOpen: boolean
|
|
|
62 |
<div className="flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6">
|
63 |
{/* Pipeline Selection */}
|
64 |
<div className="space-x-3 flex flex-row justify-center align-center">
|
65 |
+
<div>
|
66 |
+
<h3 className="text-md xl:text-lg font-semibold text-foreground text-nowrap mt-1">
|
67 |
+
Choose a Pipeline
|
68 |
+
</h3>
|
69 |
+
{(pipeline === 'feature-extraction' ||
|
70 |
+
pipeline === 'image-classification') && (
|
71 |
+
<span className="flex text-xs text-red-500 justify-center text-center">
|
72 |
+
WebGPU disabled{' '}
|
73 |
+
<Tooltip
|
74 |
+
content="onnxruntime-web seems not to support this pipeline"
|
75 |
+
className="transform -translate-x-1/3 break-keep max-w-12"
|
76 |
+
>
|
77 |
+
<CircleQuestionMark className="inline w-4 h-4 ml-1" />
|
78 |
+
</Tooltip>
|
79 |
+
</span>
|
80 |
+
)}
|
81 |
+
</div>
|
82 |
<PipelineSelector pipeline={pipeline} setPipeline={setPipeline} />
|
83 |
</div>
|
84 |
|