-
Notifications
You must be signed in to change notification settings - Fork 1
/
Models.tsx
39 lines (33 loc) · 1.07 KB
/
Models.tsx
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
import { ChangeEvent, useCallback, useEffect, useState } from 'react';
import { Model, models } from '@ai-mask/sdk';
import { useAIMask } from './context';
export default function ModelSelector({ task }: { task: Model['task'] }) {
const { aiMaskClient, selectedModel, setSelectedModel } = useAIMask()
const [taskModels, setTaskModels] = useState<Model[]>([])
useEffect(() => {
const taskModels = models.filter(m => m.task === task)
setTaskModels(taskModels)
setSelectedModel(taskModels[0])
}, [task, models, setTaskModels])
const changeModel = useCallback((e: ChangeEvent<HTMLSelectElement>) => {
const modelId = e.target.value
const model = models.find(m => m.id === modelId)
if (model) setSelectedModel(model)
}, [models, setSelectedModel])
if (!aiMaskClient) {
return null
}
return (
<select
value={selectedModel?.id}
className='w-full'
onChange={changeModel}
>
{taskModels.map(model => (
<option key={model.id} value={model.id}>
{model.name}
</option>
))}
</select>
)
}