fix: ui for disabled state of gpu acceleration (#2034)

web/screens/Settings/Advanced/index.tsx

@@ -8,9 +8,8 @@ import {
   ChangeEvent,
 } from 'react'
 
-import { openExternalUrl } from '@janhq/core'
+import { openExternalUrl, fs } from '@janhq/core'
 
-import { fs } from '@janhq/core'
 import {
   Switch,
   Button,
@@ -42,6 +41,12 @@ import { useSettings } from '@/hooks/useSettings'
 import DataFolder from './DataFolder'
 import FactoryReset from './FactoryReset'
 
+type GPU = {
+  id: string
+  vram: number | null
+  name: string
+}
+
 const Advanced = () => {
   const {
     experimentalFeature,
@@ -53,9 +58,7 @@ const Advanced = () => {
   } = useContext(FeatureToggleContext)
   const [partialProxy, setPartialProxy] = useState<string>(proxy)
   const [gpuEnabled, setGpuEnabled] = useState<boolean>(false)
-  const [gpuList, setGpuList] = useState([
-    { id: 'none', vram: null, name: 'none' },
-  ])
+  const [gpuList, setGpuList] = useState<GPU[]>([])
   const [gpusInUse, setGpusInUse] = useState<string[]>([])
   const { readSettings, saveSettings, validateSettings, setShowNotification } =
     useSettings()
@@ -117,6 +120,9 @@ const Advanced = () => {
     saveSettings({ gpusInUse: updatedGpusInUse })
   }
 
+  const gpuSelectionPlaceHolder =
+    gpuList.length > 0 ? 'Select GPU' : "You don't have any compatible GPU"
+
   return (
     <div className="block w-full">
       {/* Keyboard shortcut  */}
@@ -155,7 +161,7 @@ const Advanced = () => {
       {/* CPU / GPU switching */}
       {!isMac && (
         <div className="flex w-full flex-col items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
-          <div className="flex items-start justify-between">
+          <div className="flex items-start justify-between w-full">
             <div className="space-y-1.5">
               <div className="flex gap-x-2">
                 <h6 className="text-sm font-semibold capitalize">
@@ -204,6 +210,7 @@ const Advanced = () => {
             <Tooltip>
               <TooltipTrigger>
                 <Switch
+                  disabled={gpuList.length === 0}
                   checked={gpuEnabled}
                   onCheckedChange={(e) => {
                     if (e === true) {
@@ -245,15 +252,11 @@ const Advanced = () => {
               )}
             </Tooltip>
           </div>
-
-          {gpuEnabled && (
           <div className="mt-2 w-full rounded-lg bg-secondary p-4">
-              <label className="mb-1 inline-block font-medium">
-                Choose GPU
-              </label>
-              <Select value={selectedGpu.join()}>
+            <label className="mb-1 inline-block font-medium">Choose GPU</label>
+            <Select disabled={!gpuEnabled} value={selectedGpu.join()}>
               <SelectTrigger className="w-[340px] bg-white">
-                  <SelectValue placeholder="Select GPU">
+                <SelectValue placeholder={gpuSelectionPlaceHolder}>
                   <span className="line-clamp-1 w-full pr-8">
                     {selectedGpu.join()}
                   </span>
@@ -280,9 +283,7 @@ const Advanced = () => {
                                 className="bg-white"
                                 value={gpu.id}
                                 checked={gpusInUse.includes(gpu.id)}
-                                  onCheckedChange={() =>
-                                    handleGPUChange(gpu.id)
-                                  }
+                                onCheckedChange={() => handleGPUChange(gpu.id)}
                               />
                               <label
                                 className="flex w-full items-center justify-between"
@@ -302,8 +303,8 @@ const Advanced = () => {
                             className="flex-shrink-0"
                           />
                           <p className="text-xs leading-relaxed">
-                              If multi-GPU is enabled with different GPU models
-                              or without NVLink, it could impact token speed.
+                            If multi-GPU is enabled with different GPU models or
+                            without NVLink, it could impact token speed.
                           </p>
                         </div>
                       )}
@@ -315,7 +316,6 @@ const Advanced = () => {
               </SelectPortal>
             </Select>
           </div>
-          )}
         </div>
       )}