From defb494de13e77503ab24db3645e5aa8224047b0 Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Wed, 29 Jan 2025 23:55:22 +0700 Subject: [PATCH] chore: show list gpus on system monitor --- .../BottomPanel/SystemMonitor/index.tsx | 8 +- web/helpers/atoms/App.atom.ts | 2 + web/hooks/useGetSystemResources.ts | 134 +++++++++--------- .../Settings/Engines/LocalEngineSettings.tsx | 6 +- web/services/appService.ts | 17 ++- 5 files changed, 90 insertions(+), 77 deletions(-) diff --git a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx index 66b6b15aa9..f05ed21c64 100644 --- a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx +++ b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx @@ -151,8 +151,8 @@ const SystemMonitor = () => {
{gpus.map((gpu, index) => { const gpuUtilization = utilizedMemory( - gpu.memoryFree, - gpu.memoryTotal + gpu.free_vram, + gpu.total_vram ) return (
@@ -163,8 +163,8 @@ const SystemMonitor = () => {
- {gpu.memoryTotal - gpu.memoryFree}/ - {gpu.memoryTotal} + {gpu.total_vram - gpu.free_vram}/ + {gpu.total_vram} MB
diff --git a/web/helpers/atoms/App.atom.ts b/web/helpers/atoms/App.atom.ts index 7321fd9b41..9688c71f98 100644 --- a/web/helpers/atoms/App.atom.ts +++ b/web/helpers/atoms/App.atom.ts @@ -8,6 +8,8 @@ export const mainViewStateAtom = atom(MainViewState.Thread) export const defaultJanDataFolderAtom = atom('') +export const LocalEngineDefaultVariantAtom = atom('') + const SHOW_RIGHT_PANEL = 'showRightPanel' // Store panel atom diff --git a/web/hooks/useGetSystemResources.ts b/web/hooks/useGetSystemResources.ts index 14eb140939..40c9b578a7 100644 --- a/web/hooks/useGetSystemResources.ts +++ b/web/hooks/useGetSystemResources.ts @@ -9,10 +9,10 @@ import { cpuUsageAtom, totalRamAtom, usedRamAtom, - // nvidiaTotalVramAtom, - // gpusAtom, + nvidiaTotalVramAtom, + gpusAtom, ramUtilitizedAtom, - // availableVramAtom, + availableVramAtom, } from '@/helpers/atoms/SystemBar.atom' export default function useGetSystemResources() { @@ -20,78 +20,72 @@ export default function useGetSystemResources() { NodeJS.Timeout | number | undefined >(undefined) - // const setGpus = useSetAtom(gpusAtom) + const setGpus = useSetAtom(gpusAtom) const setCpuUsage = useSetAtom(cpuUsageAtom) - // const setTotalNvidiaVram = useSetAtom(nvidiaTotalVramAtom) - // const setAvailableVram = useSetAtom(availableVramAtom) + const setTotalNvidiaVram = useSetAtom(nvidiaTotalVramAtom) + const setAvailableVram = useSetAtom(availableVramAtom) const setUsedRam = useSetAtom(usedRamAtom) const setTotalRam = useSetAtom(totalRamAtom) const setRamUtilitized = useSetAtom(ramUtilitizedAtom) - const getSystemResources = useCallback( - async () => { - if ( - !extensionManager.get( - ExtensionTypeEnum.Hardware - ) - ) { - return - } - - const hardwareExtension = - extensionManager.get( - ExtensionTypeEnum.Hardware - ) - - const hardwareInfo = await hardwareExtension?.getHardware() - - // const currentLoadInfor = await monitoring?.getCurrentLoad() - - const usedMemory = - Number(hardwareInfo?.ram.total) - Number(hardwareInfo?.ram.available) - - if (hardwareInfo?.ram?.total && hardwareInfo?.ram?.available) - setUsedRam(Number(usedMemory)) - - if (hardwareInfo?.ram?.total) setTotalRam(hardwareInfo.ram.total) - - const ramUtilitized = - ((Number(usedMemory) ?? 0) / (hardwareInfo?.ram.total ?? 1)) * 100 - - setRamUtilitized(Math.round(ramUtilitized)) - - setCpuUsage(Math.round(hardwareInfo?.cpu.usage ?? 0)) - - // const gpus = currentLoadInfor?.gpu ?? [] - // setGpus(gpus) - - // let totalNvidiaVram = 0 - // if (gpus.length > 0) { - // totalNvidiaVram = gpus.reduce( - // (total: number, gpu: { memoryTotal: string }) => - // total + Number(gpu.memoryTotal), - // 0 - // ) - // } - // setTotalNvidiaVram(totalNvidiaVram) - // setAvailableVram( - // gpus.reduce( - // (total: number, gpu: { memoryFree: string }) => - // total + Number(gpu.memoryFree), - // 0 - // ) - // ) - }, - [ - // setUsedRam, - // setTotalRam, - // setRamUtilitized, - // setCpuUsage, - // setGpus, - // setTotalNvidiaVram, - // setAvailableVram, - ] - ) + const getSystemResources = useCallback(async () => { + if ( + !extensionManager.get( + ExtensionTypeEnum.Hardware + ) + ) { + return + } + + const hardwareExtension = extensionManager.get( + ExtensionTypeEnum.Hardware + ) + + const hardwareInfo = await hardwareExtension?.getHardware() + + const usedMemory = + Number(hardwareInfo?.ram.total) - Number(hardwareInfo?.ram.available) + + if (hardwareInfo?.ram?.total && hardwareInfo?.ram?.available) + setUsedRam(Number(usedMemory)) + + if (hardwareInfo?.ram?.total) setTotalRam(hardwareInfo.ram.total) + + const ramUtilitized = + ((Number(usedMemory) ?? 0) / (hardwareInfo?.ram.total ?? 1)) * 100 + + setRamUtilitized(Math.round(ramUtilitized)) + + setCpuUsage(Math.round(hardwareInfo?.cpu.usage ?? 0)) + + const gpus = hardwareInfo?.gpus ?? [] + setGpus(gpus as any) + + let totalNvidiaVram = 0 + if (gpus.length > 0) { + totalNvidiaVram = gpus.reduce( + (total: number, gpu: { total_vram: number }) => + total + Number(gpu.total_vram), + 0 + ) + } + + setTotalNvidiaVram(totalNvidiaVram) + + setAvailableVram( + gpus.reduce((total, gpu) => { + return total + Number(gpu.free_vram || 0) + }, 0) + ) + }, [ + setUsedRam, + setTotalRam, + setRamUtilitized, + setCpuUsage, + setGpus, + // setTotalNvidiaVram, + setAvailableVram, + ]) const watch = () => { getSystemResources() diff --git a/web/screens/Settings/Engines/LocalEngineSettings.tsx b/web/screens/Settings/Engines/LocalEngineSettings.tsx index 47a5a7ffcc..c324f1b932 100644 --- a/web/screens/Settings/Engines/LocalEngineSettings.tsx +++ b/web/screens/Settings/Engines/LocalEngineSettings.tsx @@ -27,6 +27,8 @@ import { formatDownloadPercentage } from '@/utils/converter' import ExtensionSetting from '../ExtensionSetting' import DeleteEngineVariant from './DeleteEngineVariant' +import { LocalEngineDefaultVariantAtom } from '@/helpers/atoms/App.atom' +import { useAtom } from 'jotai' const os = () => { switch (PLATFORM) { case 'win32': @@ -86,8 +88,8 @@ const LocalEngineSettings = ({ engine }: { engine: InferenceEngine }) => { (x: any) => x.version === defaultEngineVariant?.version ) - const [selectedVariants, setSelectedVariants] = useState( - defaultEngineVariant?.variant + const [selectedVariants, setSelectedVariants] = useAtom( + LocalEngineDefaultVariantAtom ) const selectedVariant = useMemo( diff --git a/web/services/appService.ts b/web/services/appService.ts index 25c7a01aa7..d50387ee37 100644 --- a/web/services/appService.ts +++ b/web/services/appService.ts @@ -1,3 +1,4 @@ +import { DefaultEngineVariant } from './../../core/src/types/engine/index' import { ExtensionTypeEnum, HardwareManagementExtension, @@ -7,11 +8,14 @@ import { SystemInformation, GpuSetting, GpuSettingInfo, + EngineManagementExtension, } from '@janhq/core' import { toaster } from '@/containers/Toast' import { extensionManager } from '@/extension' +import { useAtomValue } from 'jotai' +import { LocalEngineDefaultVariantAtom } from '@/helpers/atoms/App.atom' export const appService = { systemInformation: async (): Promise => { @@ -19,11 +23,17 @@ export const appService = { // ExtensionTypeEnum.SystemMonitoring // ) + const selectedVariants = useAtomValue(LocalEngineDefaultVariantAtom) + const hardwareExtension = extensionManager?.get( ExtensionTypeEnum.Hardware ) + const engineExtension = extensionManager?.get( + ExtensionTypeEnum.Engine + ) + // if (!monitorExtension) { // console.warn('System monitoring extension not found') // return undefined @@ -34,13 +44,18 @@ export const appService = { return undefined } + if (!engineExtension) { + console.warn('Engine extension not found') + return undefined + } + // const gpuSetting = await monitorExtension.getGpuSetting() // const osInfo = await monitorExtension.getOsInfo() const hardwareInfo = await hardwareExtension?.getHardware() const gpuSettingInfo: GpuSetting | undefined = { gpus: hardwareInfo.gpus as GpuSettingInfo[], - vulkan: false, + vulkan: isMac ? false : selectedVariants.includes('vulkan'), } const updateOsInfo = {