Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛fix: get system info and system usage (#5884)

Browse Source
This commit is contained in:
Faisal Amir 2025-07-24 12:39:10 +07:00 committed by GitHub
parent 399671488c
commit 5d00cf652a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 226 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

382
web-app/src/routes/settings/hardware.tsx
View File

@ -8,9 +8,9 @@ import { Progress } from '@/components/ui/progress'
import { useTranslation } from '@/i18n/react-i18next-compat' import { useTranslation } from '@/i18n/react-i18next-compat'
import { useHardware } from '@/hooks/useHardware' import { useHardware } from '@/hooks/useHardware'
import { useLlamacppDevices } from '@/hooks/useLlamacppDevices' import { useLlamacppDevices } from '@/hooks/useLlamacppDevices'
import { useEffect } from 'react' import { useEffect, useState } from 'react'
import { IconDeviceDesktopAnalytics } from '@tabler/icons-react' import { IconDeviceDesktopAnalytics } from '@tabler/icons-react'
import { getSystemUsage } from '@/services/hardware' import { getHardwareInfo, getSystemUsage } from '@/services/hardware'
import { WebviewWindow } from '@tauri-apps/api/webviewWindow' import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
import { formatMegaBytes } from '@/lib/utils' import { formatMegaBytes } from '@/lib/utils'
import { windowKey } from '@/constants/windows' import { windowKey } from '@/constants/windows'
@ -25,6 +25,7 @@ export const Route = createFileRoute(route.settings.hardware as any)({
function Hardware() { function Hardware() {
const { t } = useTranslation() const { t } = useTranslation()
const [isLoading, setIsLoading] = useState(false)
const { const {
hardwareData, hardwareData,
systemUsage, systemUsage,
@ -51,6 +52,29 @@ function Hardware() {
fetchDevices() fetchDevices()
}, [fetchDevices]) }, [fetchDevices])
// Fetch initial hardware info and system usage
useEffect(() => {
setIsLoading(true)
Promise.all([
getHardwareInfo()
.then((data) => {
setHardwareData(data)
})
.catch((error) => {
console.error('Failed to get hardware info:', error)
}),
getSystemUsage()
.then((data) => {
updateSystemUsage(data)
})
.catch((error) => {
console.error('Failed to get initial system usage:', error)
}),
]).finally(() => {
setIsLoading(false)
})
}, [setHardwareData, updateSystemUsage])
const { getProviderByName } = useModelProvider() const { getProviderByName } = useModelProvider()
// Initialize llamacpp device activations from provider settings // Initialize llamacpp device activations from provider settings
@ -92,13 +116,17 @@ function Hardware() {
useEffect(() => { useEffect(() => {
if (pollingPaused) return if (pollingPaused) return
const intervalId = setInterval(() => { const intervalId = setInterval(() => {
getSystemUsage().then((data) => { getSystemUsage()
updateSystemUsage(data) .then((data) => {
}) updateSystemUsage(data)
})
.catch((error) => {
console.error('Failed to get system usage:', error)
})
}, 5000) }, 5000)
return () => clearInterval(intervalId) return () => clearInterval(intervalId)
}, [setHardwareData, updateSystemUsage, pollingPaused]) }, [updateSystemUsage, pollingPaused])
const handleClickSystemMonitor = async () => { const handleClickSystemMonitor = async () => {
try { try {
@ -154,155 +182,164 @@ function Hardware() {
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<SettingsMenu /> <SettingsMenu />
<div className="p-4 w-full h-[calc(100%-32px)] overflow-y-auto"> <div className="p-4 w-full h-[calc(100%-32px)] overflow-y-auto">
<div className="flex flex-col justify-between gap-4 gap-y-3 w-full"> {isLoading ? (
{/* OS Information */} <div className="flex items-center justify-center h-32">
<Card title={t('settings:hardware.os')}> <div className="text-main-view-fg/50">
<CardItem Loading hardware information...
title={t('settings:hardware.name')} </div>
actions={ </div>
<span className="text-main-view-fg/80 capitalize"> ) : (
{hardwareData.os_type} <div className="flex flex-col justify-between gap-4 gap-y-3 w-full">
</span> {/* OS Information */}
} <Card title={t('settings:hardware.os')}>
/>
<CardItem
title={t('settings:hardware.version')}
actions={
<span className="text-main-view-fg/80">
{hardwareData.os_name}
</span>
}
/>
</Card>
{/* CPU Information */}
<Card title={t('settings:hardware.cpu')}>
<CardItem
title={t('settings:hardware.model')}
actions={
<span className="text-main-view-fg/80">
{hardwareData.cpu?.name}
</span>
}
/>
<CardItem
title={t('settings:hardware.architecture')}
actions={
<span className="text-main-view-fg/80">
{hardwareData.cpu?.arch}
</span>
}
/>
<CardItem
title={t('settings:hardware.cores')}
actions={
<span className="text-main-view-fg/80">
{hardwareData.cpu?.core_count}
</span>
}
/>
{hardwareData.cpu?.extensions?.join(', ').length > 0 && (
<CardItem <CardItem
title={t('settings:hardware.instructions')} title={t('settings:hardware.name')}
column={hardwareData.cpu?.extensions.length > 6}
actions={ actions={
<span className="text-main-view-fg/80 break-words"> <span className="text-main-view-fg/80 capitalize">
{hardwareData.cpu?.extensions?.join(', ')} {hardwareData.os_type}
</span> </span>
} }
/> />
)} <CardItem
<CardItem title={t('settings:hardware.version')}
title={t('settings:hardware.usage')} actions={
actions={ <span className="text-main-view-fg/80">
<div className="flex items-center gap-2"> {hardwareData.os_name}
{systemUsage.cpu > 0 && ( </span>
<> }
<Progress />
value={systemUsage.cpu} </Card>
className="h-2 w-10"
/>
<span className="text-main-view-fg/80">
{systemUsage.cpu?.toFixed(2)}%
</span>
</>
)}
</div>
}
/>
</Card>
{/* RAM Information */} {/* CPU Information */}
<Card title={t('settings:hardware.memory')}> <Card title={t('settings:hardware.cpu')}>
<CardItem <CardItem
title={t('settings:hardware.totalRam')} title={t('settings:hardware.model')}
actions={ actions={
<span className="text-main-view-fg/80"> <span className="text-main-view-fg/80">
{formatMegaBytes(hardwareData.total_memory)} {hardwareData.cpu?.name}
</span> </span>
} }
/> />
<CardItem <CardItem
title={t('settings:hardware.availableRam')} title={t('settings:hardware.architecture')}
actions={ actions={
<span className="text-main-view-fg/80"> <span className="text-main-view-fg/80">
{formatMegaBytes( {hardwareData.cpu?.arch}
hardwareData.total_memory - systemUsage.used_memory </span>
)} }
</span> />
} <CardItem
/> title={t('settings:hardware.cores')}
<CardItem actions={
title={t('settings:hardware.usage')} <span className="text-main-view-fg/80">
actions={ {hardwareData.cpu?.core_count}
<div className="flex items-center gap-2"> </span>
{hardwareData.total_memory > 0 && ( }
<> />
<Progress {hardwareData.cpu?.extensions?.join(', ').length > 0 && (
value={
toNumber(
systemUsage.used_memory / systemUsage.total_memory
) * 100
}
className="h-2 w-10"
/>
<span className="text-main-view-fg/80">
{(
toNumber(
systemUsage.used_memory / systemUsage.total_memory
) * 100
).toFixed(2)}
%
</span>
</>
)}
</div>
}
/>
</Card>
{/* Llamacpp Devices Information */}
{!IS_MACOS && llamacpp && (
<Card title="GPUs">
{llamacppDevicesLoading ? (
<CardItem title="Loading devices..." actions={<></>} />
) : llamacppDevicesError ? (
<CardItem <CardItem
title="Error loading devices" title={t('settings:hardware.instructions')}
column={hardwareData.cpu?.extensions.length > 6}
actions={ actions={
<span className="text-destructive text-sm"> <span className="text-main-view-fg/80 break-words">
{llamacppDevicesError} {hardwareData.cpu?.extensions?.join(', ')}
</span> </span>
} }
/> />
) : llamacppDevices.length > 0 ? ( )}
llamacppDevices.map((device, index) => ( <CardItem
<Card key={index}> title={t('settings:hardware.usage')}
<CardItem actions={
title={device.name} <div className="flex items-center gap-2">
actions={ {systemUsage.cpu > 0 && (
<div className="flex items-center gap-4"> <>
{/* <div className="flex flex-col items-end gap-1"> <Progress
value={systemUsage.cpu}
className="h-2 w-10"
/>
<span className="text-main-view-fg/80">
{systemUsage.cpu?.toFixed(2)}%
</span>
</>
)}
</div>
}
/>
</Card>
{/* RAM Information */}
<Card title={t('settings:hardware.memory')}>
<CardItem
title={t('settings:hardware.totalRam')}
actions={
<span className="text-main-view-fg/80">
{formatMegaBytes(hardwareData.total_memory)}
</span>
}
/>
<CardItem
title={t('settings:hardware.availableRam')}
actions={
<span className="text-main-view-fg/80">
{formatMegaBytes(
hardwareData.total_memory - systemUsage.used_memory
)}
</span>
}
/>
<CardItem
title={t('settings:hardware.usage')}
actions={
<div className="flex items-center gap-2">
{hardwareData.total_memory > 0 && (
<>
<Progress
value={
toNumber(
systemUsage.used_memory /
systemUsage.total_memory
) * 100
}
className="h-2 w-10"
/>
<span className="text-main-view-fg/80">
{(
toNumber(
systemUsage.used_memory /
systemUsage.total_memory
) * 100
).toFixed(2)}
%
</span>
</>
)}
</div>
}
/>
</Card>
{/* Llamacpp Devices Information */}
{!IS_MACOS && llamacpp && (
<Card title="GPUs">
{llamacppDevicesLoading ? (
<CardItem title="Loading devices..." actions={<></>} />
) : llamacppDevicesError ? (
<CardItem
title="Error loading devices"
actions={
<span className="text-destructive text-sm">
{llamacppDevicesError}
</span>
}
/>
) : llamacppDevices.length > 0 ? (
llamacppDevices.map((device, index) => (
<Card key={index}>
<CardItem
title={device.name}
actions={
<div className="flex items-center gap-4">
{/* <div className="flex flex-col items-end gap-1">
<span className="text-main-view-fg/80 text-sm"> <span className="text-main-view-fg/80 text-sm">
ID: {device.id} ID: {device.id}
</span> </span>
@ -311,36 +348,37 @@ function Hardware() {
{formatMegaBytes(device.free)} free {formatMegaBytes(device.free)} free
</span> </span>
</div> */} </div> */}
<Switch <Switch
checked={activatedDevices.has(device.id)} checked={activatedDevices.has(device.id)}
onCheckedChange={() => { onCheckedChange={() => {
toggleDevice(device.id) toggleDevice(device.id)
stopAllModels() stopAllModels()
}} }}
/> />
</div> </div>
}
/>
<div className="mt-3">
<CardItem
title={t('settings:hardware.vram')}
actions={
<span className="text-main-view-fg/80">
{formatMegaBytes(device.mem)}{' '}
{t('settings:hardware.freeOf')}{' '}
{formatMegaBytes(device.free)}
</span>
} }
/> />
</div> <div className="mt-3">
</Card> <CardItem
)) title={t('settings:hardware.vram')}
) : ( actions={
<CardItem title="No devices found" actions={<></>} /> <span className="text-main-view-fg/80">
)} {formatMegaBytes(device.mem)}{' '}
</Card> {t('settings:hardware.freeOf')}{' '}
)} {formatMegaBytes(device.free)}
</div> </span>
}
/>
</div>
</Card>
))
) : (
<CardItem title="No devices found" actions={<></>} />
)}
</Card>
)}
</div>
)}
</div> </div>
</div> </div>
</div> </div>

16
web-app/src/routes/system-monitor.tsx
View File

@ -10,6 +10,7 @@ import { useTranslation } from '@/i18n/react-i18next-compat'
import { toNumber } from '@/utils/number' import { toNumber } from '@/utils/number'
import { useLlamacppDevices } from '@/hooks/useLlamacppDevices' import { useLlamacppDevices } from '@/hooks/useLlamacppDevices'
import { useModelProvider } from '@/hooks/useModelProvider' import { useModelProvider } from '@/hooks/useModelProvider'
import { getSystemUsage } from '@/services/hardware'
export const Route = createFileRoute(route.systemMonitor as any)({ export const Route = createFileRoute(route.systemMonitor as any)({
component: SystemMonitor, component: SystemMonitor,
@ -34,6 +35,21 @@ function SystemMonitor() {
fetchDevices() fetchDevices()
}, [updateSystemUsage, fetchDevices]) }, [updateSystemUsage, fetchDevices])
// Poll system usage every 5 seconds
useEffect(() => {
const intervalId = setInterval(() => {
getSystemUsage()
.then((data) => {
updateSystemUsage(data)
})
.catch((error) => {
console.error('Failed to get system usage:', error)
})
}, 5000)
return () => clearInterval(intervalId)
}, [updateSystemUsage])
// Initialize when hardware data and llamacpp devices are available // Initialize when hardware data and llamacpp devices are available
useEffect(() => { useEffect(() => {
if (hardwareData.gpus.length > 0 && !isInitialized) { if (hardwareData.gpus.length > 0 && !isInitialized) {