Add about panel in settings dialog (#799)

* basic about page

* Remove frontend version from setting dialog header

* Style about page

* basic system stats

* Basic styling

* Reword

* Format memory amount

src/components/common/DeviceInfo.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="grid grid-cols-2 gap-2">
+    <template v-for="col in deviceColumns" :key="col.field">
+      <div class="font-medium">{{ $t(col.header) }}</div>
+      <div>{{ formatValue(props.device[col.field], col.field) }}</div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DeviceStats } from '@/types/apiTypes'
+
+const props = defineProps<{
+  device: DeviceStats
+}>()
+
+const deviceColumns = [
+  { field: 'name', header: 'Name' },
+  { field: 'type', header: 'Type' },
+  { field: 'vram_total', header: 'VRAM Total' },
+  { field: 'vram_free', header: 'VRAM Free' },
+  { field: 'torch_vram_total', header: 'Torch VRAM Total' },
+  { field: 'torch_vram_free', header: 'Torch VRAM Free' }
+]
+
+const formatValue = (value: any, field: string) => {
+  if (
+    ['vram_total', 'vram_free', 'torch_vram_total', 'torch_vram_free'].includes(
+      field
+    )
+  ) {
+    const mb = Math.round(value / (1024 * 1024))
+    if (mb >= 1024) {
+      return `${(mb / 1024).toFixed(2)} GB`
+    }
+    return `${mb} MB`
+  }
+  return value
+}
+</script>

src/components/common/SystemStatsPanel.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="system-stats">
+    <div class="mb-6">
+      <h2 class="text-2xl font-semibold mb-4">{{ $t('systemInfo') }}</h2>
+      <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>
+        </template>
+      </div>
+    </div>
+
+    <Divider />
+
+    <div>
+      <h2 class="text-2xl font-semibold mb-4">{{ $t('devices') }}</h2>
+      <TabView v-if="props.stats.devices.length > 1">
+        <TabPanel
+          v-for="device in props.stats.devices"
+          :key="device.index"
+          :header="device.name"
+        >
+          <DeviceInfo :device="device" />
+        </TabPanel>
+      </TabView>
+      <DeviceInfo v-else :device="props.stats.devices[0]" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import TabView from 'primevue/tabview'
+import TabPanel from 'primevue/tabpanel'
+import Divider from 'primevue/divider'
+import type { SystemStats } from '@/types/apiTypes'
+import DeviceInfo from '@/components/common/DeviceInfo.vue'
+
+const props = defineProps<{
+  stats: SystemStats
+}>()
+
+const systemInfo = computed(() => ({
+  ...props.stats.system,
+  argv: props.stats.system.argv.join(' ')
+}))
+
+const systemColumns = [
+  { field: 'os', header: 'OS' },
+  { field: 'python_version', header: 'Python Version' },
+  { field: 'embedded_python', header: 'Embedded Python' },
+  { field: 'pytorch_version', header: 'Pytorch Version' },
+  { field: 'argv', header: 'Arguments' }
+]
+</script>