Add system info

renderer/components/hooks/use-logger.ts

@@ -1,7 +1,6 @@
 import { logAtom } from "../../atoms/log-atom";
 import log from "electron-log/renderer";
 import { useSetAtom } from "jotai";
-import React from "react";
 
 const useLogger = () => {
   const setLogData = useSetAtom(logAtom);

renderer/components/hooks/use-system-info.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+const useSystemInfo = () => {
+  const [systemInfo, setSystemInfo] = useState<Awaited<
+    ReturnType<typeof window.electron.getSystemInfo>
+  > | null>(null);
+
+  useEffect(() => {
+    const getSystemInfo = async () => {
+      const systemInfo = await window.electron.getSystemInfo();
+      setSystemInfo(systemInfo);
+    };
+    getSystemInfo();
+  }, []);
+  return { systemInfo };
+};
+
+export default useSystemInfo;

renderer/components/main-content/more-options-drawer.tsx

@@ -7,7 +7,8 @@ import {
 import { cn } from "@/lib/utils";
 import { useAtom, useAtomValue } from "jotai";
 import { EllipsisIcon, WrenchIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import useSystemInfo from "../hooks/use-system-info";
 
 const formatDuration = (seconds: number): string => {
   if (seconds < 60) return `${seconds.toFixed(1)}s`;
@@ -36,6 +37,9 @@ const MoreOptionsDrawer = ({
   const t = useAtomValue(translationAtom);
   const userStats = useAtomValue(userStatsAtom);
 
+  const { systemInfo } = useSystemInfo();
+  console.log("🚀 => systemInfo:", systemInfo);
+
   useEffect(() => {
     if (!localStorage.getItem("zoomAmount")) {
       localStorage.setItem("zoomAmount", zoomAmount);
@@ -134,7 +138,7 @@ const MoreOptionsDrawer = ({
 
         <div className="mt-5 flex min-h-0 flex-1 flex-col gap-2">
           <p className="text-sm font-semibold uppercase text-base-content">
-            User Stats
+            Stats
           </p>
 
           <div className="stats stats-vertical overflow-y-auto">
@@ -142,7 +146,7 @@ const MoreOptionsDrawer = ({
               <div className="stat-title">
                 {t("APP.MORE_OPTIONS_DRAWER.TOTAL_UPSCAYLS")}
               </div>
-              <div className="stat-value text-2xl text-primary-content">
+              <div className="stat-value text-2xl text-base-content">
                 {userStats.totalUpscayls}
               </div>
             </div>
@@ -151,7 +155,7 @@ const MoreOptionsDrawer = ({
               <div className="stat-title">
                 {t("APP.MORE_OPTIONS_DRAWER.TOTAL_BATCH_UPSCAYLS")}
               </div>
-              <div className="stat-value text-2xl text-primary-content">
+              <div className="stat-value text-2xl text-base-content">
                 {userStats.batchUpscayls}
               </div>
             </div>
@@ -160,7 +164,7 @@ const MoreOptionsDrawer = ({
               <div className="stat-title">
                 {t("APP.MORE_OPTIONS_DRAWER.TOTAL_IMAGE_UPSCAYLS")}
               </div>
-              <div className="stat-value text-2xl text-primary-content">
+              <div className="stat-value text-2xl text-base-content">
                 {userStats.imageUpscayls}
               </div>
             </div>
@@ -169,7 +173,7 @@ const MoreOptionsDrawer = ({
               <div className="stat-title">
                 {t("APP.MORE_OPTIONS_DRAWER.TOTAL_DOUBLE_UPSCAYLS")}
               </div>
-              <div className="stat-value text-2xl text-primary-content">
+              <div className="stat-value text-2xl text-base-content">
                 {userStats.doubleUpscayls}
               </div>
             </div>
@@ -178,7 +182,7 @@ const MoreOptionsDrawer = ({
               <div className="stat-title">
                 {t("APP.MORE_OPTIONS_DRAWER.AVERAGE_UPSCAYL_TIME")}
               </div>
-              <div className="stat-value text-2xl text-primary-content">
+              <div className="stat-value text-2xl text-base-content">
                 {formatDuration(userStats.averageUpscaylTime / 1000)}
               </div>
             </div>
@@ -187,7 +191,7 @@ const MoreOptionsDrawer = ({
               <div className="stat-title">
                 {t("APP.MORE_OPTIONS_DRAWER.LAST_UPSCAYL_DURATION")}
               </div>
-              <div className="stat-value text-2xl text-primary-content">
+              <div className="stat-value text-2xl text-base-content">
                 {formatDuration(userStats.lastUpscaylDuration / 1000)}
               </div>
             </div>
@@ -196,7 +200,7 @@ const MoreOptionsDrawer = ({
               <div className="stat-title">
                 {t("APP.MORE_OPTIONS_DRAWER.LAST_USED_AT")}
               </div>
-              <div className="stat-value text-2xl text-primary-content">
+              <div className="stat-value text-2xl text-base-content">
                 {new Date(userStats.lastUsedAt).toLocaleString()}
               </div>
             </div>

renderer/components/sidebar/settings-tab/index.tsx

@@ -24,6 +24,7 @@ import { ImageFormat } from "@/lib/valid-formats";
 import EnableContributionToggle from "./enable-contributions-toggle";
 import AutoUpdateToggle from "./auto-update-toggle";
 import TTAModeToggle from "./tta-mode-toggle";
+import SystemInfo from "./system-info";
 
 interface IProps {
   batchMode: boolean;
@@ -233,6 +234,8 @@ function SettingsTab({
           />
         </>
       )}
+
+      <SystemInfo />
     </div>
   );
 }

renderer/components/sidebar/settings-tab/system-info.tsx

@@ -0,0 +1,37 @@
+import useSystemInfo from "@/components/hooks/use-system-info";
+import useTranslation from "@/components/hooks/use-translation";
+import React from "react";
+
+const SystemInfo = () => {
+  const { systemInfo } = useSystemInfo();
+  const t = useTranslation();
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <p className="text-sm font-medium">{t("SETTINGS.SYSTEM_INFO.TITLE")}</p>
+      <div className="flex flex-col gap-3 rounded-sm bg-base-200 p-4 text-xs">
+        {Object.keys(systemInfo || {}).map((key) => (
+          <div key={key} className="flex flex-col">
+            <p className="font-mono capitalize">{key}:</p>
+            {typeof systemInfo[key] === "object" ? (
+              <div className="ml-2">
+                {Object.keys(systemInfo[key]).map((subKey) => (
+                  <div key={subKey} className="flex flex-row gap-1">
+                    <p className="font-mono">{subKey}:</p>
+                    <p className="font-mono font-semibold">
+                      {systemInfo[key][subKey]}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="font-mono font-semibold">{systemInfo[key]}</p>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SystemInfo;

renderer/locales/en.json

@@ -97,6 +97,9 @@
     "TTA_MODE": {
       "TITLE": "TTA Mode",
       "DESCRIPTION": "Enable Test Time Augmentation for better results, such as removing artifacts BUT this will increase the processing time by 8x!"
+    },
+    "SYSTEM_INFO": {
+      "TITLE": "System Info"
     }
   },
   "APP": {

renderer/renderer.d.ts

@@ -12,10 +12,7 @@ export interface IElectronAPI {
     arch: string | undefined;
     model: string;
     cpuCount: number;
-    gpu: {
-      vendor: any;
-      model: any;
-    };
+    gpu: Record<string, any>;
   }>;
   getAppVersion: () => Promise<string>;
 }