From 964269dc467b44f1780f368451c59d717ed0e52d Mon Sep 17 00:00:00 2001 From: Louis Date: Wed, 6 Nov 2024 09:20:54 +0700 Subject: [PATCH] fix: 3911 - inconsistent between download progress and model hub --- core/src/node/api/processors/download.ts | 5 ----- core/src/types/file/index.ts | 4 ++-- .../Layout/BottomPanel/DownloadingState/index.tsx | 9 +++++++-- web/containers/ModalCancelDownload/index.tsx | 13 +++++++------ web/hooks/useDownloadModel.ts | 15 ++++++++++++++- web/hooks/useDownloadState.ts | 10 ++++++++++ .../Settings/MyModels/MyModelList/index.tsx | 2 +- 7 files changed, 41 insertions(+), 17 deletions(-) diff --git a/core/src/node/api/processors/download.ts b/core/src/node/api/processors/download.ts index 5db18a53a..20b87294b 100644 --- a/core/src/node/api/processors/download.ts +++ b/core/src/node/api/processors/download.ts @@ -50,11 +50,6 @@ export class Downloader implements Processor { const initialDownloadState: DownloadState = { modelId, fileName, - time: { - elapsed: 0, - remaining: 0, - }, - speed: 0, percent: 0, size: { total: 0, diff --git a/core/src/types/file/index.ts b/core/src/types/file/index.ts index 9f3e32b3e..87d83c51d 100644 --- a/core/src/types/file/index.ts +++ b/core/src/types/file/index.ts @@ -6,8 +6,8 @@ export type FileStat = { export type DownloadState = { modelId: string // TODO: change to download id fileName: string - time: DownloadTime - speed: number + time?: DownloadTime + speed?: number percent: number size: DownloadSize diff --git a/web/containers/Layout/BottomPanel/DownloadingState/index.tsx b/web/containers/Layout/BottomPanel/DownloadingState/index.tsx index 8eb16f549..dc9ffca89 100644 --- a/web/containers/Layout/BottomPanel/DownloadingState/index.tsx +++ b/web/containers/Layout/BottomPanel/DownloadingState/index.tsx @@ -2,15 +2,19 @@ import { Fragment } from 'react' import { Progress, Modal, Button } from '@janhq/joi' -import { useAtomValue } from 'jotai' +import { useAtomValue, useSetAtom } from 'jotai' import useDownloadModel from '@/hooks/useDownloadModel' -import { modelDownloadStateAtom } from '@/hooks/useDownloadState' +import { + modelDownloadStateAtom, + removeDownloadStateAtom, +} from '@/hooks/useDownloadState' import { formatDownloadPercentage } from '@/utils/converter' export default function DownloadingState() { const downloadStates = useAtomValue(modelDownloadStateAtom) + const removeDownloadState = useSetAtom(removeDownloadStateAtom) const { abortModelDownload } = useDownloadModel() const totalCurrentProgress = Object.values(downloadStates) @@ -73,6 +77,7 @@ export default function DownloadingState() { theme="destructive" onClick={() => { if (item?.modelId) { + removeDownloadState(item?.modelId) abortModelDownload(item?.modelId) } }} diff --git a/web/containers/ModalCancelDownload/index.tsx b/web/containers/ModalCancelDownload/index.tsx index 8a92c9279..1826c78a7 100644 --- a/web/containers/ModalCancelDownload/index.tsx +++ b/web/containers/ModalCancelDownload/index.tsx @@ -8,12 +8,13 @@ import { useAtomValue, useSetAtom } from 'jotai' import useDownloadModel from '@/hooks/useDownloadModel' -import { modelDownloadStateAtom } from '@/hooks/useDownloadState' +import { + modelDownloadStateAtom, + removeDownloadStateAtom, +} from '@/hooks/useDownloadState' import { formatDownloadPercentage } from '@/utils/converter' -import { removeDownloadingModelAtom } from '@/helpers/atoms/Model.atom' - type Props = { model: Model isFromList?: boolean @@ -21,16 +22,16 @@ type Props = { const ModalCancelDownload = ({ model, isFromList }: Props) => { const { abortModelDownload } = useDownloadModel() - const removeModelDownload = useSetAtom(removeDownloadingModelAtom) + const removeDownloadState = useSetAtom(removeDownloadStateAtom) const allDownloadStates = useAtomValue(modelDownloadStateAtom) const downloadState = allDownloadStates[model.id] const cancelText = `Cancel ${formatDownloadPercentage(downloadState?.percent ?? 0)}` const onAbortDownloadClick = useCallback(() => { - removeModelDownload(model.id) + removeDownloadState(model.id) abortModelDownload(downloadState?.modelId ?? model.id) - }, [downloadState, abortModelDownload, removeModelDownload, model]) + }, [downloadState, abortModelDownload, removeDownloadState, model]) return ( { addDownloadingModel(id ?? model) + setDownloadStates({ + modelId: id ?? model, + downloadState: 'downloading', + fileName: id ?? model, + size: { + total: 0, + transferred: 0, + }, + percent: 0, + }) downloadLocalModel(model, id, name).catch((error) => { if (error.message) { toaster({ @@ -32,7 +45,7 @@ export default function useDownloadModel() { removeDownloadingModel(model) }) }, - [removeDownloadingModel, addDownloadingModel] + [removeDownloadingModel, addDownloadingModel, setDownloadStates] ) const abortModelDownload = useCallback(async (model: string) => { diff --git a/web/hooks/useDownloadState.ts b/web/hooks/useDownloadState.ts index b6d9ec49a..32a9d3255 100644 --- a/web/hooks/useDownloadState.ts +++ b/web/hooks/useDownloadState.ts @@ -10,8 +10,18 @@ import { } from '@/helpers/atoms/Model.atom' // download states + export const modelDownloadStateAtom = atom>({}) +/** + * Remove a download state for a particular model. + */ +export const removeDownloadStateAtom = atom(null, (get, set, id: string) => { + const currentState = { ...get(modelDownloadStateAtom) } + delete currentState[id] + set(modelDownloadStateAtom, currentState) + set(removeDownloadingModelAtom, id) +}) /** * Used to set the download state for a particular model. */ diff --git a/web/screens/Settings/MyModels/MyModelList/index.tsx b/web/screens/Settings/MyModels/MyModelList/index.tsx index 9b2301f8b..2e87f3080 100644 --- a/web/screens/Settings/MyModels/MyModelList/index.tsx +++ b/web/screens/Settings/MyModels/MyModelList/index.tsx @@ -1,6 +1,6 @@ import { memo, useState } from 'react' -import { InferenceEngine, Model } from '@janhq/core' +import { Model } from '@janhq/core' import { Badge, Button, Tooltip, useClickOutside } from '@janhq/joi' import { useAtom } from 'jotai' import {