Show total/free ram in about page (#924)

src/components/common/DeviceInfo.vue

@@ -9,6 +9,7 @@
 
 <script setup lang="ts">
 import type { DeviceStats } from '@/types/apiTypes'
+import { formatMemory } from '@/utils/formatUtil'
 
 const props = defineProps<{
   device: DeviceStats
@@ -29,11 +30,7 @@ const formatValue = (value: any, field: string) => {
       field
     )
   ) {
-    const mb = Math.round(value / (1024 * 1024))
+    return formatMemory(value)
-    if (mb >= 1024) {
-      return `${(mb / 1024).toFixed(2)} GB`
-    }
-    return `${mb} MB`
   }
   return value
 }

src/components/common/SystemStatsPanel.vue

@@ -5,7 +5,7 @@
       <div class="grid grid-cols-2 gap-2">
         <template v-for="col in systemColumns" :key="col.field">
           <div class="font-medium">{{ $t(col.header) }}</div>
-          <div>{{ systemInfo[col.field] }}</div>
+          <div>{{ formatValue(systemInfo[col.field], col.field) }}</div>
         </template>
       </div>
     </div>
@@ -35,6 +35,7 @@ import TabPanel from 'primevue/tabpanel'
 import Divider from 'primevue/divider'
 import type { SystemStats } from '@/types/apiTypes'
 import DeviceInfo from '@/components/common/DeviceInfo.vue'
+import { formatMemory } from '@/utils/formatUtil'
 
 const props = defineProps<{
   stats: SystemStats
@@ -50,6 +51,15 @@ const systemColumns = [
   { field: 'python_version', header: 'Python Version' },
   { field: 'embedded_python', header: 'Embedded Python' },
   { field: 'pytorch_version', header: 'Pytorch Version' },
-  { field: 'argv', header: 'Arguments' }
+  { field: 'argv', header: 'Arguments' },
+  { field: 'ram_total', header: 'RAM Total' },
+  { field: 'ram_free', header: 'RAM Free' }
 ]
+
+const formatValue = (value: any, field: string) => {
+  if (['ram_total', 'ram_free'].includes(field)) {
+    return formatMemory(value)
+  }
+  return value
+}
 </script>

src/types/apiTypes.ts

@@ -410,7 +410,9 @@ export const zSystemStats = z.object({
     embedded_python: z.boolean(),
     comfyui_version: z.string(),
     pytorch_version: z.string(),
-    argv: z.array(z.string())
+    argv: z.array(z.string()),
+    ram_total: z.number(),
+    ram_free: z.number()
   }),
   devices: z.array(zDeviceStats)
 })

src/utils/formatUtil.ts

@@ -59,3 +59,15 @@ export function formatNumberWithSuffix(
 
   return `${formattedNum}${suffixes[exp]}`
 }
+
+export function formatMemory(value?: number) {
+  if (value === null || value === undefined) {
+    return '-'
+  }
+
+  const mb = Math.round(value / (1024 * 1024))
+  if (mb >= 1024) {
+    return `${(mb / 1024).toFixed(2)} GB`
+  }
+  return `${mb} MB`
+}