112 lines
3.5 KiB
TypeScript
112 lines
3.5 KiB
TypeScript
import { useCallback, useMemo, useState } from 'react'
|
|
|
|
import { useDropzone } from 'react-dropzone'
|
|
|
|
import { Button, ScrollArea } from '@janhq/uikit'
|
|
|
|
import { useAtomValue, useSetAtom } from 'jotai'
|
|
import { Plus, UploadCloudIcon } from 'lucide-react'
|
|
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
import useDropModelBinaries from '@/hooks/useDropModelBinaries'
|
|
import { setImportModelStageAtom } from '@/hooks/useImportModel'
|
|
|
|
import ModelSearch from './ModelSearch'
|
|
import RowModel from './Row'
|
|
|
|
import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
|
|
|
|
const Column = ['Name', 'Model ID', 'Size', 'Version', 'Status', '']
|
|
|
|
const Models: React.FC = () => {
|
|
const downloadedModels = useAtomValue(downloadedModelsAtom)
|
|
const setImportModelStage = useSetAtom(setImportModelStageAtom)
|
|
const { onDropModels } = useDropModelBinaries()
|
|
const [searchText, setSearchText] = useState('')
|
|
|
|
const filteredDownloadedModels = useMemo(
|
|
() =>
|
|
downloadedModels
|
|
.filter((e) =>
|
|
e.name.toLowerCase().includes(searchText.toLowerCase().trim())
|
|
)
|
|
.sort((a, b) => a.name.localeCompare(b.name)),
|
|
[downloadedModels, searchText]
|
|
)
|
|
|
|
const { getRootProps, isDragActive } = useDropzone({
|
|
noClick: true,
|
|
multiple: true,
|
|
onDrop: onDropModels,
|
|
})
|
|
|
|
const onImportModelClick = useCallback(() => {
|
|
setImportModelStage('SELECTING_MODEL')
|
|
}, [setImportModelStage])
|
|
|
|
const onSearchChange = useCallback((input: string) => {
|
|
setSearchText(input)
|
|
}, [])
|
|
|
|
return (
|
|
<ScrollArea className="h-full w-full" {...getRootProps()}>
|
|
{isDragActive && (
|
|
<div className="absolute z-50 mx-auto h-full w-full bg-background/50 p-8 backdrop-blur-lg">
|
|
<div
|
|
className={twMerge(
|
|
'flex h-full w-full items-center justify-center rounded-lg border border-dashed border-blue-500'
|
|
)}
|
|
>
|
|
<div className="mx-auto w-1/2 text-center">
|
|
<div className="mx-auto inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-200">
|
|
<UploadCloudIcon size={24} className="text-blue-600" />
|
|
</div>
|
|
<div className="mt-4 text-blue-600">
|
|
<h6 className="font-bold">Drop file here</h6>
|
|
<p className="mt-2">File (GGUF) or folder</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="m-4 rounded-xl border border-border shadow-sm">
|
|
<div className="flex flex-row justify-between px-6 py-5">
|
|
<ModelSearch onSearchLocal={onSearchChange} />
|
|
<Button
|
|
themes={'outline'}
|
|
className="space-x-2"
|
|
onClick={onImportModelClick}
|
|
>
|
|
<Plus className="h-3 w-3" />
|
|
<p>Import Model</p>
|
|
</Button>
|
|
</div>
|
|
<table className="relative w-full px-8">
|
|
<thead className="w-full border-b border-border bg-secondary">
|
|
<tr>
|
|
{Column.map((col) => (
|
|
<th
|
|
key={col}
|
|
className="px-6 py-2 text-left font-normal last:text-center"
|
|
>
|
|
{col}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredDownloadedModels
|
|
? filteredDownloadedModels.map((x) => (
|
|
<RowModel key={x.id} data={x} />
|
|
))
|
|
: null}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</ScrollArea>
|
|
)
|
|
}
|
|
|
|
export default Models
|