File size: 3,542 Bytes
4a70176 6ebf2fd 4a70176 948b11c 322c234 59a1fe9 4a70176 948b11c 4a70176 9283c8b 4a70176 948b11c 4a70176 948b11c 9283c8b 4a70176 6ebf2fd 4a70176 6ebf2fd 948b11c 6ebf2fd 4a70176 6ebf2fd 4a70176 6ebf2fd 4a70176 322c234 6ebf2fd 4a70176 948b11c 4a70176 |
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 |
import React from 'react'
import {
Listbox,
ListboxOption,
ListboxButton,
ListboxOptions,
Transition
} from '@headlessui/react'
import { ChevronDown, Check } from 'lucide-react'
export const supportedPipelines = [
'text-generation',
'feature-extraction',
'zero-shot-classification',
'image-classification',
'text-classification',
'summarization',
'translation'
]
interface PipelineSelectorProps {
pipeline: string
setPipeline: (pipeline: string) => void
}
const PipelineSelector: React.FC<PipelineSelectorProps> = ({
pipeline,
setPipeline
}) => {
const selectedPipeline = pipeline
const formatPipelineName = (pipelineId: string) => {
return pipelineId
.split('-')
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ')
}
return (
<div className="relative">
<Listbox value={selectedPipeline} onChange={setPipeline}>
<div className="relative">
<ListboxButton className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 text-sm xl:text-base border border-gray-300">
<span className="block truncate font-medium">
{formatPipelineName(selectedPipeline)}
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronDown
className="h-5 w-5 text-gray-400 ui-open:rotate-180 transition-transform"
aria-hidden="true"
/>
</span>
</ListboxButton>
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<ListboxOptions className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm xl:text-base ring-1 ring-black ring-opacity-5 focus:outline-none">
{supportedPipelines.map((p) => (
<ListboxOption
key={p}
className={({ active }) =>
`relative cursor-default select-none py-2 px-4 ${
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
}`
}
value={p}
>
{({ selected }) => (
<div className="flex items-center justify-between">
<span
className={`block truncate ${
selected ? 'font-medium' : 'font-normal'
}`}
>
{formatPipelineName(p)}
</span>
{selected && (
<span className="flex items-center text-amber-600">
<Check className="h-5 w-5" aria-hidden="true" />
</span>
)}
</div>
)}
</ListboxOption>
))}
</ListboxOptions>
</Transition>
</div>
</Listbox>
</div>
)
}
export default PipelineSelector
|