InnoPeak/organizrr
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ✨ display model loading progress
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
RaviAnand Mohabir 2025-04-04 15:57:49 +02:00
parent cd102e5357
commit dc75582bec
1 changed files with 46 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/FileOrganizer.tsx
View File

@ -6,6 +6,7 @@ import {
Group, Group,
Indicator, Indicator,
Pagination, Pagination,
Progress,
Select, Select,
Stack, Stack,
Text, Text,
@ -124,6 +125,7 @@ function FileOrganizer() {
const engine = useRef<MLCEngine>(null); const engine = useRef<MLCEngine>(null);
const [loadingModel, setLoadingModel] = useState<string | null>(null); const [loadingModel, setLoadingModel] = useState<string | null>(null);
const [loadingProgress, setLoadingProgress] = useState<number | null>(null);
const [runningModel, setRunningModel] = useState<string | null>(null); const [runningModel, setRunningModel] = useState<string | null>(null);
const [selectedModel, setSelectedModel] = useLocalStorage<string | null>({ const [selectedModel, setSelectedModel] = useLocalStorage<string | null>({
@ -138,12 +140,15 @@ function FileOrganizer() {
const initProgressCallback: InitProgressCallback = async ( const initProgressCallback: InitProgressCallback = async (
initProgress initProgress
) => { ) => {
setLoadingProgress(initProgress.progress);
if ( if (
initProgress.progress === 1 && initProgress.progress === 1 &&
initProgress.text.startsWith("Finish loading") initProgress.text.startsWith("Finish loading")
) { ) {
setRunningModel(selectedModel); setRunningModel(selectedModel);
setLoadingModel(null); setLoadingModel(null);
setLoadingProgress(null);
} }
}; };
@ -159,6 +164,7 @@ function FileOrganizer() {
runningModel, runningModel,
setRunningModel, setRunningModel,
setLoadingModel, setLoadingModel,
setLoadingProgress,
]); ]);
const [selectedFile, setSelectedFile] = useState<number | null>(null); const [selectedFile, setSelectedFile] = useState<number | null>(null);
@ -314,6 +320,8 @@ function FileOrganizer() {
); );
} }
}); });
} else {
console.warn(reply?.choices[0].message.content);
} }
}) })
); );
@ -341,31 +349,44 @@ function FileOrganizer() {
key={form.key("customer.lastName")} key={form.key("customer.lastName")}
/> />
<Group ml="auto"> <Group ml="auto">
<Tooltip <Stack>
label={ <Group>
runningModel <Tooltip
? loadingModel label={
? `${runningModel} (KI Modell wird geladen)` runningModel
: runningModel ? loadingModel
: "KI Modell wird geladen" ? `${runningModel} (KI Modell wird geladen)`
} : runningModel
> : "KI Modell wird geladen"
<Indicator }
color={ >
runningModel ? (loadingModel ? "blue" : "green") : "orange" <Indicator
} color={
processing={loadingModel !== null} runningModel
> ? loadingModel
<IconRobotFace /> ? "blue"
</Indicator> : "green"
</Tooltip> : "orange"
{modelList && ( }
<Select processing={loadingModel !== null}
data={modelList} >
value={selectedModel} <IconRobotFace />
onChange={(val) => val && setSelectedModel(val)} </Indicator>
/> </Tooltip>
)} {modelList && (
<Select
data={modelList}
value={selectedModel}
onChange={(val) => val && setSelectedModel(val)}
searchable
clearable
/>
)}
</Group>
{loadingProgress !== null && (
<Progress value={loadingProgress} striped animated />
)}
</Stack>
</Group> </Group>
</Group> </Group>
<Flex direction="row-reverse" p="md"> <Flex direction="row-reverse" p="md">