85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
import { useEffect } from 'react'
|
|
|
|
import { Modal } from '@janhq/joi'
|
|
import { useAtomValue, useSetAtom } from 'jotai'
|
|
|
|
import { AlertCircle } from 'lucide-react'
|
|
|
|
import useCortex from '@/hooks/useCortex'
|
|
import {
|
|
getImportModelStageAtom,
|
|
setImportModelStageAtom,
|
|
} from '@/hooks/useImportModel'
|
|
|
|
import ImportingModelItem from './ImportingModelItem'
|
|
|
|
import { importingModelsAtom } from '@/helpers/atoms/Model.atom'
|
|
|
|
const ImportingModelModal = () => {
|
|
const { downloadModel } = useCortex()
|
|
const setImportModelStage = useSetAtom(setImportModelStageAtom)
|
|
const importingModels = useAtomValue(importingModelsAtom)
|
|
const importModelStage = useAtomValue(getImportModelStageAtom)
|
|
|
|
const finishedImportModel = importingModels.filter(
|
|
(model) => model.status === 'IMPORTED'
|
|
).length
|
|
|
|
useEffect(() => {
|
|
const importModels = async () => {
|
|
for (const model of importingModels) {
|
|
await downloadModel(model.path)
|
|
}
|
|
}
|
|
importModels()
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [downloadModel])
|
|
|
|
return (
|
|
<Modal
|
|
open={importModelStage === 'IMPORTING_MODEL'}
|
|
onOpenChange={() => setImportModelStage('NONE')}
|
|
title={`Importing model (${finishedImportModel}/${importingModels.length})`}
|
|
content={
|
|
<div>
|
|
<div className="flex flex-row items-center space-x-2 pb-3">
|
|
{/* <label className="text-[hsla(var(--text-secondary)] text-xs">
|
|
{modelFolder}
|
|
</label>
|
|
<Button
|
|
theme="ghost"
|
|
size="small"
|
|
variant="outline"
|
|
onClick={onOpenModelFolderClick}
|
|
>
|
|
{openFileTitle()}
|
|
</Button> */}
|
|
</div>
|
|
|
|
<div className="mb-2 space-y-3">
|
|
{importingModels.map((model) => (
|
|
<ImportingModelItem key={model.importId} model={model} />
|
|
))}
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex flex-row gap-2 rounded-b-lg border-t border-[hsla(var(--app-border))] py-2">
|
|
<AlertCircle
|
|
size={16}
|
|
className="mt-1 flex-shrink-0 text-[hsla(var(--warning-bg))]"
|
|
/>
|
|
<p className="text-[hsla(var(--text-secondary)] font-semibold">
|
|
Own your model configurations, use at your own risk.
|
|
Misconfigurations may result in lower quality or unexpected
|
|
outputs.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default ImportingModelModal
|