Merge pull request #5029 from menloresearch/chore/hardware

chore: add setting hardware

web-app/src/constants/localStorage.ts

@@ -1,4 +1,4 @@
-export const localStoregeKey = {
+export const localStorageKey = {
   LeftPanel: 'left-panel',
   threads: 'threads',
   messages: 'messages',
@@ -10,4 +10,5 @@ export const localStoregeKey = {
   settingCodeBlock: 'setting-code-block',
   settingMCPSevers: 'setting-mcp-servers',
   settingLocalApiServer: 'setting-local-api-server',
+  settingHardware: 'setting-hardware',
 }

web-app/src/constants/routes.ts

@@ -13,6 +13,7 @@ export const route = {
     local_api_server: '/settings/local-api-server',
     mcp_servers: '/settings/mcp-servers',
     https_proxy: '/settings/https-proxy',
+    hardware: '/settings/hardware',
   },
   hub: '/hub',
   localApiServerlogs: '/local-api-server/logs',

web-app/src/containers/SettingsMenu.tsx

@@ -20,6 +20,10 @@ const menuSettings = [
     title: 'common.keyboardShortcuts',
     route: route.settings.shortcuts,
   },
+  {
+    title: 'Hardware',
+    route: route.settings.hardware,
+  },
   {
     title: 'MCP Servers',
     route: route.settings.mcp_servers,

web-app/src/hooks/useAppearance.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
-import { localStoregeKey } from '@/constants/localStorage'
+import { localStorageKey } from '@/constants/localStorage'
 import { RgbaColor } from 'react-colorful'
 import { rgb, oklch, formatCss } from 'culori'
 import { useTheme } from './useTheme'
@@ -533,7 +533,7 @@ export const useAppearance = create<AppearanceState>()(
       }
     },
     {
-      name: localStoregeKey.settingAppearance,
+      name: localStorageKey.settingAppearance,
       storage: createJSONStorage(() => localStorage),
       // Apply settings when hydrating from storage
       onRehydrateStorage: () => (state) => {

web-app/src/hooks/useAssistant.ts

@@ -1,8 +1,7 @@
-import { localStoregeKey } from '@/constants/localStorage'
+import { localStorageKey } from '@/constants/localStorage'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
-
 interface AssistantState {
   assistants: Assistant[]
   currentAssistant: Assistant
@@ -42,7 +41,7 @@ export const useAssistant = create<AssistantState>()(
       },
     }),
     {
-      name: localStoregeKey.assistant,
+      name: localStorageKey.assistant,
     }
   )
 )

web-app/src/hooks/useCodeblock.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
-import { localStoregeKey } from '@/constants/localStorage'
+import { localStorageKey } from '@/constants/localStorage'
 
 export type CodeBlockStyle = string
 
@@ -39,7 +39,7 @@ export const useCodeblock = create<CodeBlockState>()(
       }
     },
     {
-      name: localStoregeKey.settingCodeBlock,
+      name: localStorageKey.settingCodeBlock,
       storage: createJSONStorage(() => localStorage),
     }
   )

web-app/src/hooks/useGeneralSetting.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
-import { localStoregeKey } from '@/constants/localStorage'
+import { localStorageKey } from '@/constants/localStorage'
 
 type LeftPanelStoreState = {
   // @ts-ignore
@@ -20,7 +20,7 @@ export const useGeneralSetting = create<LeftPanelStoreState>()(
       setCurrentLanguage: (value) => set({ currentLanguage: value }),
     }),
     {
-      name: localStoregeKey.settingGeneral,
+      name: localStorageKey.settingGeneral,
       storage: createJSONStorage(() => localStorage),
     }
   )

web-app/src/hooks/useHardware.ts

@@ -0,0 +1,217 @@
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+import { localStorageKey } from '@/constants/localStorage'
+
+// Hardware data types
+export interface CPU {
+  arch: string
+  cores: number
+  instructions: string[]
+  model: string
+  usage: number
+}
+
+export interface GPUAdditionalInfo {
+  compute_cap: string
+  driver_version: string
+}
+
+export interface GPU {
+  activated: boolean
+  additional_information: GPUAdditionalInfo
+  free_vram: number
+  id: string
+  name: string
+  total_vram: number
+  uuid: string
+  version: string
+}
+
+export interface OS {
+  name: string
+  version: string
+}
+
+export interface RAM {
+  available: number
+  total: number
+}
+
+export interface HardwareData {
+  cpu: CPU
+  gpus: GPU[]
+  os: OS
+  ram: RAM
+}
+
+// Default values
+const defaultHardwareData: HardwareData = {
+  cpu: {
+    arch: '',
+    cores: 0,
+    instructions: [],
+    model: '',
+    usage: 0,
+  },
+  gpus: [],
+  os: {
+    name: '',
+    version: '',
+  },
+  ram: {
+    available: 0,
+    total: 0,
+  },
+}
+
+interface HardwareStore {
+  // Hardware data
+  hardwareData: HardwareData
+
+  // Update functions
+  setCPU: (cpu: CPU) => void
+  setGPUs: (gpus: GPU[]) => void
+  setOS: (os: OS) => void
+  setRAM: (ram: RAM) => void
+
+  // Update entire hardware data at once
+  setHardwareData: (data: HardwareData) => void
+
+  // Update individual GPU
+  updateGPU: (index: number, gpu: GPU) => void
+
+  // Update CPU usage
+  updateCPUUsage: (usage: number) => void
+
+  // Update RAM available
+  updateRAMAvailable: (available: number) => void
+
+  // Toggle GPU activation
+  toggleGPUActivation: (index: number) => void
+
+  // Reorder GPUs
+  reorderGPUs: (oldIndex: number, newIndex: number) => void
+}
+
+export const useHardware = create<HardwareStore>()(
+  persist(
+    (set) => ({
+      hardwareData: defaultHardwareData,
+
+      setCPU: (cpu) =>
+        set((state) => ({
+          hardwareData: {
+            ...state.hardwareData,
+            cpu,
+          },
+        })),
+
+      setGPUs: (gpus) =>
+        set((state) => ({
+          hardwareData: {
+            ...state.hardwareData,
+            gpus,
+          },
+        })),
+
+      setOS: (os) =>
+        set((state) => ({
+          hardwareData: {
+            ...state.hardwareData,
+            os,
+          },
+        })),
+
+      setRAM: (ram) =>
+        set((state) => ({
+          hardwareData: {
+            ...state.hardwareData,
+            ram,
+          },
+        })),
+
+      setHardwareData: (data) =>
+        set({
+          hardwareData: data,
+        }),
+
+      updateGPU: (index, gpu) =>
+        set((state) => {
+          const newGPUs = [...state.hardwareData.gpus]
+          if (index >= 0 && index < newGPUs.length) {
+            newGPUs[index] = gpu
+          }
+          return {
+            hardwareData: {
+              ...state.hardwareData,
+              gpus: newGPUs,
+            },
+          }
+        }),
+
+      updateCPUUsage: (usage) =>
+        set((state) => ({
+          hardwareData: {
+            ...state.hardwareData,
+            cpu: {
+              ...state.hardwareData.cpu,
+              usage,
+            },
+          },
+        })),
+
+      updateRAMAvailable: (available) =>
+        set((state) => ({
+          hardwareData: {
+            ...state.hardwareData,
+            ram: {
+              ...state.hardwareData.ram,
+              available,
+            },
+          },
+        })),
+
+      toggleGPUActivation: (index) =>
+        set((state) => {
+          const newGPUs = [...state.hardwareData.gpus]
+          if (index >= 0 && index < newGPUs.length) {
+            newGPUs[index] = {
+              ...newGPUs[index],
+              activated: !newGPUs[index].activated,
+            }
+          }
+          return {
+            hardwareData: {
+              ...state.hardwareData,
+              gpus: newGPUs,
+            },
+          }
+        }),
+
+      reorderGPUs: (oldIndex, newIndex) =>
+        set((state) => {
+          const newGPUs = [...state.hardwareData.gpus]
+          // Move the GPU from oldIndex to newIndex
+          if (
+            oldIndex >= 0 &&
+            oldIndex < newGPUs.length &&
+            newIndex >= 0 &&
+            newIndex < newGPUs.length
+          ) {
+            const [removed] = newGPUs.splice(oldIndex, 1)
+            newGPUs.splice(newIndex, 0, removed)
+          }
+          return {
+            hardwareData: {
+              ...state.hardwareData,
+              gpus: newGPUs,
+            },
+          }
+        }),
+    }),
+    {
+      name: localStorageKey.settingHardware,
+      storage: createJSONStorage(() => localStorage),
+    }
+  )
+)

web-app/src/hooks/useLeftPanel.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
-import { localStoregeKey } from '@/constants/localStorage'
+import { localStorageKey } from '@/constants/localStorage'
 
 type LeftPanelStoreState = {
   open: boolean
@@ -14,7 +14,7 @@ export const useLeftPanel = create<LeftPanelStoreState>()(
       setLeftPanel: (value) => set({ open: value }),
     }),
     {
-      name: localStoregeKey.LeftPanel,
+      name: localStorageKey.LeftPanel,
       storage: createJSONStorage(() => localStorage),
     }
   )

web-app/src/hooks/useLocalApiServer.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
-import { localStoregeKey } from '@/constants/localStorage'
+import { localStorageKey } from '@/constants/localStorage'
 
 type LocalApiServerState = {
   // Run local API server once app opens
@@ -40,7 +40,7 @@ export const useLocalApiServer = create<LocalApiServerState>()(
       setVerboseLogs: (value) => set({ verboseLogs: value }),
     }),
     {
-      name: localStoregeKey.settingLocalApiServer,
+      name: localStorageKey.settingLocalApiServer,
       storage: createJSONStorage(() => localStorage),
     }
   )

web-app/src/hooks/useMCPServers.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
-import { localStoregeKey } from '@/constants/localStorage'
+import { localStorageKey } from '@/constants/localStorage'
 import { updateMCPConfig } from '@/services/mcp'
 
 // Define the structure of an MCP server configuration
@@ -77,7 +77,7 @@ export const useMCPServers = create<MCPServerStoreState>()(
         }),
     }),
     {
-      name: localStoregeKey.settingMCPSevers, // Using existing key for now
+      name: localStorageKey.settingMCPSevers, // Using existing key for now
       storage: createJSONStorage(() => localStorage),
     }
   )

web-app/src/hooks/useMessages.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand'
 import { ThreadMessage } from '@janhq/core'
 import { createJSONStorage, persist } from 'zustand/middleware'
-import { localStoregeKey } from '@/constants/localStorage'
+import { localStorageKey } from '@/constants/localStorage'
 import {
   createMessage,
   deleteMessage as deleteMessageExt,
@@ -57,7 +57,7 @@ export const useMessages = create<MessageState>()(
       },
     }),
     {
-      name: localStoregeKey.messages,
+      name: localStorageKey.messages,
       storage: createJSONStorage(() => localStorage),
     }
   )

web-app/src/hooks/useModelProvider.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
-import { localStoregeKey } from '@/constants/localStorage'
+import { localStorageKey } from '@/constants/localStorage'
 
 type ModelProviderState = {
   providers: ModelProvider[]
@@ -116,7 +116,7 @@ export const useModelProvider = create<ModelProviderState>()(
       },
     }),
     {
-      name: localStoregeKey.modelProvider,
+      name: localStorageKey.modelProvider,
       storage: createJSONStorage(() => localStorage),
     }
   )

web-app/src/hooks/useProxyConfig.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
-import { localStoregeKey } from '@/constants/localStorage'
+import { localStorageKey } from '@/constants/localStorage'
 
 type ProxyConfigState = {
   proxyEnabled: boolean
@@ -52,7 +52,7 @@ export const useProxyConfig = create<ProxyConfigState>()(
       setNoProxy: (noProxy) => set({ noProxy }),
     }),
     {
-      name: localStoregeKey.settingLocalApiServer,
+      name: localStorageKey.settingLocalApiServer,
       storage: createJSONStorage(() => localStorage),
     }
   )

web-app/src/hooks/useTheme.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand'
 import { createJSONStorage, persist } from 'zustand/middleware'
 import { getCurrentWindow, Theme } from '@tauri-apps/api/window'
-import { localStoregeKey } from '@/constants/localStorage'
+import { localStorageKey } from '@/constants/localStorage'
 
 // Function to check if OS prefers dark mode
 export const checkOSDarkMode = (): boolean => {
@@ -48,7 +48,7 @@ export const useTheme = create<ThemeState>()(
       return initialState
     },
     {
-      name: localStoregeKey.theme,
+      name: localStorageKey.theme,
       storage: createJSONStorage(() => localStorage),
     }
   )

web-app/src/hooks/useThreads.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
-import { localStoregeKey } from '@/constants/localStorage'
+import { localStorageKey } from '@/constants/localStorage'
 import { ulid } from 'ulidx'
 import { createThread, deleteThread, updateThread } from '@/services/threads'
 import Fuse from 'fuse.js'
@@ -247,7 +247,7 @@ export const useThreads = create<ThreadState>()(
       },
     }),
     {
-      name: localStoregeKey.threads,
+      name: localStorageKey.threads,
       storage: createJSONStorage(() => localStorage),
     }
   )

web-app/src/i18n.ts

@@ -11,9 +11,9 @@ import enSettings from '@/locales/en/settings.json'
 import idSettings from '@/locales/id/settings.json'
 import vnSettings from '@/locales/vn/settings.json'
 
-import { localStoregeKey } from '@/constants/localStorage'
+import { localStorageKey } from '@/constants/localStorage'
 
-const stored = localStorage.getItem(localStoregeKey.settingGeneral)
+const stored = localStorage.getItem(localStorageKey.settingGeneral)
 const parsed = stored ? JSON.parse(stored) : {}
 const defaultLang = parsed?.state?.currentLanguage
 

web-app/src/routeTree.gen.ts

@@ -20,6 +20,7 @@ import { Route as SettingsPrivacyImport } from './routes/settings/privacy'
 import { Route as SettingsMcpServersImport } from './routes/settings/mcp-servers'
 import { Route as SettingsLocalApiServerImport } from './routes/settings/local-api-server'
 import { Route as SettingsHttpsProxyImport } from './routes/settings/https-proxy'
+import { Route as SettingsHardwareImport } from './routes/settings/hardware'
 import { Route as SettingsGeneralImport } from './routes/settings/general'
 import { Route as SettingsExtensionsImport } from './routes/settings/extensions'
 import { Route as SettingsAppearanceImport } from './routes/settings/appearance'
@@ -82,6 +83,12 @@ const SettingsHttpsProxyRoute = SettingsHttpsProxyImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const SettingsHardwareRoute = SettingsHardwareImport.update({
+  id: '/settings/hardware',
+  path: '/settings/hardware',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const SettingsGeneralRoute = SettingsGeneralImport.update({
   id: '/settings/general',
   path: '/settings/general',
@@ -166,6 +173,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsGeneralImport
       parentRoute: typeof rootRoute
     }
+    '/settings/hardware': {
+      id: '/settings/hardware'
+      path: '/settings/hardware'
+      fullPath: '/settings/hardware'
+      preLoaderRoute: typeof SettingsHardwareImport
+      parentRoute: typeof rootRoute
+    }
     '/settings/https-proxy': {
       id: '/settings/https-proxy'
       path: '/settings/https-proxy'
@@ -228,6 +242,7 @@ export interface FileRoutesByFullPath {
   '/settings/appearance': typeof SettingsAppearanceRoute
   '/settings/extensions': typeof SettingsExtensionsRoute
   '/settings/general': typeof SettingsGeneralRoute
+  '/settings/hardware': typeof SettingsHardwareRoute
   '/settings/https-proxy': typeof SettingsHttpsProxyRoute
   '/settings/local-api-server': typeof SettingsLocalApiServerRoute
   '/settings/mcp-servers': typeof SettingsMcpServersRoute
@@ -245,6 +260,7 @@ export interface FileRoutesByTo {
   '/settings/appearance': typeof SettingsAppearanceRoute
   '/settings/extensions': typeof SettingsExtensionsRoute
   '/settings/general': typeof SettingsGeneralRoute
+  '/settings/hardware': typeof SettingsHardwareRoute
   '/settings/https-proxy': typeof SettingsHttpsProxyRoute
   '/settings/local-api-server': typeof SettingsLocalApiServerRoute
   '/settings/mcp-servers': typeof SettingsMcpServersRoute
@@ -263,6 +279,7 @@ export interface FileRoutesById {
   '/settings/appearance': typeof SettingsAppearanceRoute
   '/settings/extensions': typeof SettingsExtensionsRoute
   '/settings/general': typeof SettingsGeneralRoute
+  '/settings/hardware': typeof SettingsHardwareRoute
   '/settings/https-proxy': typeof SettingsHttpsProxyRoute
   '/settings/local-api-server': typeof SettingsLocalApiServerRoute
   '/settings/mcp-servers': typeof SettingsMcpServersRoute
@@ -282,6 +299,7 @@ export interface FileRouteTypes {
     | '/settings/appearance'
     | '/settings/extensions'
     | '/settings/general'
+    | '/settings/hardware'
     | '/settings/https-proxy'
     | '/settings/local-api-server'
     | '/settings/mcp-servers'
@@ -298,6 +316,7 @@ export interface FileRouteTypes {
     | '/settings/appearance'
     | '/settings/extensions'
     | '/settings/general'
+    | '/settings/hardware'
     | '/settings/https-proxy'
     | '/settings/local-api-server'
     | '/settings/mcp-servers'
@@ -314,6 +333,7 @@ export interface FileRouteTypes {
     | '/settings/appearance'
     | '/settings/extensions'
     | '/settings/general'
+    | '/settings/hardware'
     | '/settings/https-proxy'
     | '/settings/local-api-server'
     | '/settings/mcp-servers'
@@ -332,6 +352,7 @@ export interface RootRouteChildren {
   SettingsAppearanceRoute: typeof SettingsAppearanceRoute
   SettingsExtensionsRoute: typeof SettingsExtensionsRoute
   SettingsGeneralRoute: typeof SettingsGeneralRoute
+  SettingsHardwareRoute: typeof SettingsHardwareRoute
   SettingsHttpsProxyRoute: typeof SettingsHttpsProxyRoute
   SettingsLocalApiServerRoute: typeof SettingsLocalApiServerRoute
   SettingsMcpServersRoute: typeof SettingsMcpServersRoute
@@ -349,6 +370,7 @@ const rootRouteChildren: RootRouteChildren = {
   SettingsAppearanceRoute: SettingsAppearanceRoute,
   SettingsExtensionsRoute: SettingsExtensionsRoute,
   SettingsGeneralRoute: SettingsGeneralRoute,
+  SettingsHardwareRoute: SettingsHardwareRoute,
   SettingsHttpsProxyRoute: SettingsHttpsProxyRoute,
   SettingsLocalApiServerRoute: SettingsLocalApiServerRoute,
   SettingsMcpServersRoute: SettingsMcpServersRoute,
@@ -375,6 +397,7 @@ export const routeTree = rootRoute
         "/settings/appearance",
         "/settings/extensions",
         "/settings/general",
+        "/settings/hardware",
         "/settings/https-proxy",
         "/settings/local-api-server",
         "/settings/mcp-servers",
@@ -405,6 +428,9 @@ export const routeTree = rootRoute
     "/settings/general": {
       "filePath": "settings/general.tsx"
     },
+    "/settings/hardware": {
+      "filePath": "settings/hardware.tsx"
+    },
     "/settings/https-proxy": {
       "filePath": "settings/https-proxy.tsx"
     },

web-app/src/routes/settings/hardware.tsx

@@ -0,0 +1,380 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { route } from '@/constants/routes'
+import SettingsMenu from '@/containers/SettingsMenu'
+import HeaderPage from '@/containers/HeaderPage'
+import { Card, CardItem } from '@/containers/Card'
+import { Switch } from '@/components/ui/switch'
+import { Progress } from '@/components/ui/progress'
+import { useTranslation } from 'react-i18next'
+import { useHardware } from '@/hooks/useHardware'
+import type { GPU } from '@/hooks/useHardware'
+import { useEffect } from 'react'
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { IconGripVertical } from '@tabler/icons-react'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Route = createFileRoute(route.settings.hardware as any)({
+  component: Hardware,
+})
+
+const fetchHardwareData = () => {
+  return {
+    cpu: {
+      arch: 'x86_64',
+      cores: 8,
+      instructions: ['SSE4.1', 'SSE4.2', 'AVX2'],
+      model: 'Apple M4 chip (10-core CPU, 10-core GPU)',
+      usage: Math.random() * 100, // Simulate changing CPU usage
+    },
+    gpus: [
+      {
+        activated: true,
+        additional_information: {
+          compute_cap: '7.5',
+          driver_version: '535.129.03',
+        },
+        free_vram: Math.floor(Math.random() * 4 * 1024 * 1024 * 1024), // Random free VRAM
+        id: '0',
+        name: 'NVIDIA GeForce RTX 3080',
+        total_vram: 10 * 1024 * 1024 * 1024, // 10GB in bytes
+        uuid: 'GPU-123456789-0',
+        version: '7.5',
+      },
+      {
+        activated: true,
+        additional_information: {
+          compute_cap: '8.6',
+          driver_version: '535.129.03',
+        },
+        free_vram: Math.floor(Math.random() * 8 * 1024 * 1024 * 1024), // Random free VRAM
+        id: '1',
+        name: 'NVIDIA GeForce RTX 4070',
+        total_vram: 12 * 1024 * 1024 * 1024, // 12GB in bytes
+        uuid: 'GPU-123456789-1',
+        version: '8.6',
+      },
+      {
+        activated: false,
+        additional_information: {
+          compute_cap: '6.1',
+          driver_version: '535.129.03',
+        },
+        free_vram: Math.floor(Math.random() * 6 * 1024 * 1024 * 1024), // Random free VRAM
+        id: '2',
+        name: 'NVIDIA GeForce GTX 1660 Ti',
+        total_vram: 6 * 1024 * 1024 * 1024, // 6GB in bytes
+        uuid: 'GPU-123456789-2',
+        version: '6.1',
+      },
+    ],
+    os: {
+      name: 'macOS',
+      version: '14.0',
+    },
+    ram: {
+      available: Math.floor(Math.random() * 16 * 1024 * 1024 * 1024), // Random available RAM
+      total: 32 * 1024 * 1024 * 1024, // 32GB in bytes
+    },
+  }
+}
+
+// Format bytes to a human-readable format
+const formatBytes = (bytes: number, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes'
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}
+
+function SortableGPUItem({ gpu, index }: { gpu: GPU; index: number }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: gpu.id || index })
+
+  const { toggleGPUActivation } = useHardware()
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    position: 'relative' as const,
+    zIndex: isDragging ? 1 : 0,
+  }
+
+  return (
+    <div ref={setNodeRef} style={style} className="mb-4 last:mb-0">
+      <CardItem
+        title={
+          <div className="flex items-center gap-2">
+            <div
+              {...attributes}
+              {...listeners}
+              className="size-6 cursor-move flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out"
+            >
+              <IconGripVertical size={18} className="text-main-view-fg/60" />
+            </div>
+            <span className="text-main-view-fg/80">{gpu.name}</span>
+          </div>
+        }
+        actions={
+          <div className="flex items-center gap-4">
+            <Switch
+              checked={gpu.activated}
+              onCheckedChange={() => toggleGPUActivation(index)}
+            />
+          </div>
+        }
+      />
+      <div className="ml-8 mt-3">
+        <CardItem
+          title="VRAM"
+          actions={
+            <span className="text-main-view-fg/80">
+              {formatBytes(gpu.free_vram)} free of {formatBytes(gpu.total_vram)}
+            </span>
+          }
+        />
+        <CardItem
+          title="Driver Version"
+          actions={
+            <span className="text-main-view-fg/80">
+              {gpu.additional_information.driver_version}
+            </span>
+          }
+        />
+        <CardItem
+          title="Compute Capability"
+          actions={
+            <span className="text-main-view-fg/80">
+              {gpu.additional_information.compute_cap}
+            </span>
+          }
+        />
+      </div>
+    </div>
+  )
+}
+
+function Hardware() {
+  const { t } = useTranslation()
+  const {
+    hardwareData,
+    setHardwareData,
+    updateCPUUsage,
+    updateRAMAvailable,
+    reorderGPUs,
+  } = useHardware()
+
+  // Set up DnD sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor)
+  )
+
+  // Handle drag end event
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+
+    if (over && active.id !== over.id) {
+      // Find the indices of the dragged item and the drop target
+      const oldIndex = hardwareData.gpus.findIndex(
+        (gpu) => gpu.id === active.id
+      )
+      const newIndex = hardwareData.gpus.findIndex((gpu) => gpu.id === over.id)
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        reorderGPUs(oldIndex, newIndex)
+      }
+    }
+  }
+
+  useEffect(() => {
+    const data = fetchHardwareData()
+    setHardwareData(data)
+
+    const intervalId = setInterval(() => {
+      const newData = fetchHardwareData()
+      updateCPUUsage(newData.cpu.usage)
+      updateRAMAvailable(newData.ram.available)
+    }, 5000)
+
+    return () => clearInterval(intervalId)
+  }, [setHardwareData, updateCPUUsage, updateRAMAvailable])
+
+  return (
+    <div className="flex flex-col h-full">
+      <HeaderPage>
+        <h1 className="font-medium">{t('common.settings')}</h1>
+      </HeaderPage>
+      <div className="flex h-full w-full">
+        <SettingsMenu />
+        <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">
+            {/* OS Information */}
+            <Card title="Operating System">
+              <CardItem
+                title="Name"
+                actions={
+                  <span className="text-main-view-fg/80">
+                    {hardwareData.os.name}
+                  </span>
+                }
+              />
+              <CardItem
+                title="Version"
+                actions={
+                  <span className="text-main-view-fg/80">
+                    {hardwareData.os.version}
+                  </span>
+                }
+              />
+            </Card>
+
+            {/* CPU Information */}
+            <Card title="CPU">
+              <CardItem
+                title="Model"
+                actions={
+                  <span className="text-main-view-fg/80">
+                    {hardwareData.cpu.model}
+                  </span>
+                }
+              />
+              <CardItem
+                title="Architecture"
+                actions={
+                  <span className="text-main-view-fg/80">
+                    {hardwareData.cpu.arch}
+                  </span>
+                }
+              />
+              <CardItem
+                title="Cores"
+                actions={
+                  <span className="text-main-view-fg/80">
+                    {hardwareData.cpu.cores}
+                  </span>
+                }
+              />
+              <CardItem
+                title="Instructions"
+                actions={
+                  <span className="text-main-view-fg/80">
+                    {hardwareData.cpu.instructions.join(', ')}
+                  </span>
+                }
+              />
+              <CardItem
+                title="Usage"
+                actions={
+                  <div className="flex items-center gap-2">
+                    <Progress
+                      value={hardwareData.cpu.usage}
+                      className="h-2 w-10"
+                    />
+                    <span className="text-main-view-fg/80">
+                      {hardwareData.cpu.usage.toFixed(2)}%
+                    </span>
+                  </div>
+                }
+              />
+            </Card>
+
+            {/* RAM Information */}
+            <Card title="Memory">
+              <CardItem
+                title="Total RAM"
+                actions={
+                  <span className="text-main-view-fg/80">
+                    {formatBytes(hardwareData.ram.total)}
+                  </span>
+                }
+              />
+              <CardItem
+                title="Available RAM"
+                actions={
+                  <span className="text-main-view-fg/80">
+                    {formatBytes(hardwareData.ram.available)}
+                  </span>
+                }
+              />
+              <CardItem
+                title="Usage"
+                actions={
+                  <div className="flex items-center gap-2">
+                    <Progress
+                      value={
+                        ((hardwareData.ram.total - hardwareData.ram.available) /
+                          hardwareData.ram.total) *
+                        100
+                      }
+                      className="h-2 w-10"
+                    />
+                    <span className="text-main-view-fg/80">
+                      {(
+                        ((hardwareData.ram.total - hardwareData.ram.available) /
+                          hardwareData.ram.total) *
+                        100
+                      ).toFixed(2)}
+                      %
+                    </span>
+                  </div>
+                }
+              />
+            </Card>
+
+            {/* GPU Information */}
+            <Card title="GPUs">
+              {hardwareData.gpus.length > 0 ? (
+                <DndContext
+                  sensors={sensors}
+                  collisionDetection={closestCenter}
+                  onDragEnd={handleDragEnd}
+                >
+                  <SortableContext
+                    items={hardwareData.gpus.map((gpu) => gpu.id)}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    {hardwareData.gpus.map((gpu, index) => (
+                      <SortableGPUItem
+                        key={gpu.id || index}
+                        gpu={gpu}
+                        index={index}
+                      />
+                    ))}
+                  </SortableContext>
+                </DndContext>
+              ) : (
+                <CardItem title="No GPUs detected" actions={<></>} />
+              )}
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}