From 9aa976fdf06d72403fd4a8a23fa719fbdb598b9d Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Sun, 22 Sep 2024 17:40:40 +0900
Subject: [PATCH] Show total/free ram in about page (#924)

---
 src/components/common/DeviceInfo.vue       |  7 ++-----
 src/components/common/SystemStatsPanel.vue | 14 ++++++++++++--
 src/types/apiTypes.ts                      |  4 +++-
 src/utils/formatUtil.ts                    | 12 ++++++++++++
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/common/DeviceInfo.vue b/src/components/common/DeviceInfo.vue
index d89e8b9c6..10d25b81b 100644
--- a/src/components/common/DeviceInfo.vue
+++ b/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))
-    if (mb >= 1024) {
-      return `${(mb / 1024).toFixed(2)} GB`
-    }
-    return `${mb} MB`
+    return formatMemory(value)
   }
   return value
 }
diff --git a/src/components/common/SystemStatsPanel.vue b/src/components/common/SystemStatsPanel.vue
index 29296e4d6..2cbe2070b 100644
--- a/src/components/common/SystemStatsPanel.vue
+++ b/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>
diff --git a/src/types/apiTypes.ts b/src/types/apiTypes.ts
index 20c4a4ed6..ea581b59e 100644
--- a/src/types/apiTypes.ts
+++ b/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)
 })
diff --git a/src/utils/formatUtil.ts b/src/utils/formatUtil.ts
index 2d702b769..bbddf8f44 100644
--- a/src/utils/formatUtil.ts
+++ b/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`
+}