chore: show list gpus on system monitor

web/containers/Layout/BottomPanel/SystemMonitor/index.tsx

@@ -151,8 +151,8 @@ const SystemMonitor = () => {
                 <div className="mb-4 border-b border-[hsla(var(--app-border))] pb-4 last:border-none">
                   {gpus.map((gpu, index) => {
                     const gpuUtilization = utilizedMemory(
-                      gpu.memoryFree,
-                      gpu.memoryTotal
+                      gpu.free_vram,
+                      gpu.total_vram
                     )
                     return (
                       <div key={index} className="mt-4 flex flex-col gap-x-2">
@@ -163,8 +163,8 @@ const SystemMonitor = () => {
                           <div className="flex gap-x-2">
                             <div className="">
                               <span>
-                                {gpu.memoryTotal - gpu.memoryFree}/
-                                {gpu.memoryTotal}
+                                {gpu.total_vram - gpu.free_vram}/
+                                {gpu.total_vram}
                               </span>
                               <span> MB</span>
                             </div>

web/helpers/atoms/App.atom.ts

@@ -8,6 +8,8 @@ export const mainViewStateAtom = atom<MainViewState>(MainViewState.Thread)
 
 export const defaultJanDataFolderAtom = atom<string>('')
 
+export const LocalEngineDefaultVariantAtom = atom<string>('')
+
 const SHOW_RIGHT_PANEL = 'showRightPanel'
 
 // Store panel atom

web/hooks/useGetSystemResources.ts

@@ -9,89 +9,83 @@ import {
   cpuUsageAtom,
   totalRamAtom,
   usedRamAtom,
-  // nvidiaTotalVramAtom,
-  // gpusAtom,
+  nvidiaTotalVramAtom,
+  gpusAtom,
   ramUtilitizedAtom,
-  // availableVramAtom,
+  availableVramAtom,
 } from '@/helpers/atoms/SystemBar.atom'
 
 export default function useGetSystemResources() {
   const [intervalId, setIntervalId] = useState<
     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<HardwareManagementExtension>(
-          ExtensionTypeEnum.Hardware
-        )
-      ) {
-        return
-      }
-
-      const hardwareExtension =
-        extensionManager.get<HardwareManagementExtension>(
-          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<HardwareManagementExtension>(
+        ExtensionTypeEnum.Hardware
+      )
+    ) {
+      return
+    }
+
+    const hardwareExtension = extensionManager.get<HardwareManagementExtension>(
+      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()

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(

web/services/appService.ts

@@ -1,3 +1,4 @@
+import { DefaultEngineVariant } from './../../core/src/types/engine/index'
 import {
   ExtensionTypeEnum,
   HardwareManagementExtension,
@@ -7,23 +8,32 @@ 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<SystemInformation | undefined> => {
     // const monitorExtension = extensionManager?.get<MonitoringExtension>(
     //   ExtensionTypeEnum.SystemMonitoring
     // )
 
+    const selectedVariants = useAtomValue(LocalEngineDefaultVariantAtom)
+
     const hardwareExtension =
       extensionManager?.get<HardwareManagementExtension>(
         ExtensionTypeEnum.Hardware
       )
 
+    const engineExtension = extensionManager?.get<EngineManagementExtension>(
+      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 = {