fix: remove toggle enable GPU from setting (#4624)

* fix: remove toggle enable GPU

* chore: remove logic

* chore: fix linter

web/screens/Settings/Advanced/index.tsx

@@ -1,32 +1,19 @@
 'use client'
 
-import { useEffect, useState, ChangeEvent } from 'react'
+import { ChangeEvent } from 'react'
 
-import { openExternalUrl, AppConfiguration } from '@janhq/core'
+import { AppConfiguration } from '@janhq/core'
 
-import {
+import { ScrollArea, Switch, Button } from '@janhq/joi'
-  ScrollArea,
-  Switch,
-  Input,
-  Tooltip,
-  Checkbox,
-  useClickOutside,
-  Button,
-} from '@janhq/joi'
 
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
-import { ChevronDownIcon, ArrowRightIcon } from 'lucide-react'
+import { ArrowRightIcon } from 'lucide-react'
-import { AlertTriangleIcon, AlertCircleIcon } from 'lucide-react'
-
-import { twMerge } from 'tailwind-merge'
 
 import { useDebouncedCallback } from 'use-debounce'
 
-import { snackbar, toaster } from '@/containers/Toast'
+import { toaster } from '@/containers/Toast'
 
-import { useActiveModel } from '@/hooks/useActiveModel'
 import { useConfigurations } from '@/hooks/useConfigurations'
-import { useSettings } from '@/hooks/useSettings'
 
 import ModalDeleteAllThreads from '@/screens/Thread/ThreadLeftPanel/ModalDeleteAllThreads'
 
@@ -36,7 +23,6 @@ import FactoryReset from './FactoryReset'
 import {
   experimentalFeatureEnabledAtom,
   proxyEnabledAtom,
-  vulkanEnabledAtom,
   quickAskEnabledAtom,
 } from '@/helpers/atoms/AppConfig.atom'
 
@@ -44,12 +30,6 @@ import { ThreadModalAction } from '@/helpers/atoms/Thread.atom'
 
 import { modalActionThreadAtom } from '@/helpers/atoms/Thread.atom'
 
-type GPU = {
-  id: string
-  vram: number | null
-  name: string
-}
-
 /**
  * Advanced Settings Screen
  * @returns
@@ -58,31 +38,14 @@ const Advanced = ({ setSubdir }: { setSubdir: (subdir: string) => void }) => {
   const [experimentalEnabled, setExperimentalEnabled] = useAtom(
     experimentalFeatureEnabledAtom
   )
-  const [vulkanEnabled, setVulkanEnabled] = useAtom(vulkanEnabledAtom)
+
   const [proxyEnabled, setProxyEnabled] = useAtom(proxyEnabledAtom)
   const quickAskEnabled = useAtomValue(quickAskEnabledAtom)
 
-  const [gpuEnabled, setGpuEnabled] = useState<boolean>(false)
-  const [gpuList, setGpuList] = useState<GPU[]>([])
-  const [gpusInUse, setGpusInUse] = useState<string[]>([])
-  const [dropdownOptions, setDropdownOptions] = useState<HTMLDivElement | null>(
-    null
-  )
   const { configurePullOptions } = useConfigurations()
 
-  const [toggle, setToggle] = useState<HTMLDivElement | null>(null)
-
-  const { readSettings, saveSettings } = useSettings()
-  const { stopModel } = useActiveModel()
-  const [open, setOpen] = useState(false)
   const setModalActionThread = useSetAtom(modalActionThreadAtom)
 
-  const selectedGpu = gpuList
-    .filter((x) => gpusInUse.includes(x.id))
-    .map((y) => {
-      return y['name']
-    })
-
   /**
    * There could be a case where the state update is not synced
    * so that retrieving state value from other hooks would not be accurate
@@ -110,24 +73,6 @@ const Advanced = ({ setSubdir }: { setSubdir: (subdir: string) => void }) => {
     if (relaunch) window.core?.api?.relaunch()
   }
 
-  /**
-   * Update Vulkan Enabled
-   * @param e
-   * @param relaunch
-   * @returns void
-   */
-  const updateVulkanEnabled = async (e: boolean, relaunch: boolean = true) => {
-    toaster({
-      title: 'Reload',
-      description: 'Vulkan settings updated. Reload now to apply the changes.',
-    })
-    stopModel()
-    setVulkanEnabled(e)
-    await saveSettings({ vulkan: e })
-    // Relaunch to apply settings
-    if (relaunch) window.location.reload()
-  }
-
   /**
    * Update Experimental Enabled
    * @param e
@@ -143,74 +88,11 @@ const Advanced = ({ setSubdir }: { setSubdir: (subdir: string) => void }) => {
     if (e.target.checked) return
 
     // It affects other settings, so we need to reset them
-    const isRelaunch = quickAskEnabled || vulkanEnabled
+    const isRelaunch = quickAskEnabled
     if (quickAskEnabled) await updateQuickAskEnabled(false, false)
-    if (vulkanEnabled) await updateVulkanEnabled(false, false)
     if (isRelaunch) window.core?.api?.relaunch()
   }
 
-  /**
-   * useEffect to set GPU enabled if possible
-   */
-  useEffect(() => {
-    const setUseGpuIfPossible = async () => {
-      const settings = await readSettings()
-      setGpuEnabled(
-        settings.gpus?.some(
-          (gpu: { activated: boolean }) => gpu.activated === true
-        ) === 'gpu' && settings.gpus?.length > 0
-      )
-      setGpusInUse(settings.gpus_in_use || [])
-      setVulkanEnabled(settings.vulkan || false)
-      if (settings.gpus) {
-        setGpuList(settings.gpus)
-      }
-    }
-    setUseGpuIfPossible()
-  }, [readSettings, setGpuList, setGpuEnabled, setGpusInUse, setVulkanEnabled])
-
-  /**
-   * Handle GPU Change
-   * @param gpuId
-   * @returns
-   */
-  const handleGPUChange = async (gpuId: string) => {
-    let updatedGpusInUse = [...gpusInUse]
-    if (updatedGpusInUse.includes(gpuId)) {
-      updatedGpusInUse = updatedGpusInUse.filter((id) => id !== gpuId)
-      if (
-        gpuEnabled &&
-        updatedGpusInUse.length === 0 &&
-        gpuId &&
-        gpuId.trim()
-      ) {
-        // Vulkan support only allow 1 active device at a time
-        if (vulkanEnabled) {
-          updatedGpusInUse = []
-        }
-        updatedGpusInUse.push(gpuId)
-      }
-    } else {
-      // Vulkan support only allow 1 active device at a time
-      if (vulkanEnabled) {
-        updatedGpusInUse = []
-      }
-      if (gpuId && gpuId.trim()) updatedGpusInUse.push(gpuId)
-    }
-    setGpusInUse(updatedGpusInUse)
-    // Reload window to apply changes
-    // This will trigger engine servers to restart
-    window.location.reload()
-  }
-
-  const gpuSelectionPlaceHolder =
-    gpuList.length > 0 ? 'Select GPU' : "You don't have any compatible GPU"
-
-  /**
-   * Handle click outside
-   */
-  useClickOutside(() => setOpen(false), null, [dropdownOptions, toggle])
-
   return (
     <ScrollArea className="h-full w-full px-4">
       <div className="block w-full py-4">
@@ -234,199 +116,6 @@ const Advanced = ({ setSubdir }: { setSubdir: (subdir: string) => void }) => {
           </div>
         </div>
 
-        {/* CPU / GPU switching */}
-        {!isMac && (
-          <div className="flex w-full flex-col items-start justify-between border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none">
-            <div className="flex w-full items-start justify-between">
-              <div className="space-y-1">
-                <div className="flex gap-x-2">
-                  <h6 className="font-semibold capitalize">GPU Acceleration</h6>
-                </div>
-                <p className="pr-8 leading-relaxed">
-                  Enable to enhance model performance by utilizing your GPU
-                  devices for acceleration. Read{' '}
-                  <span>
-                    {' '}
-                    <span
-                      className="cursor-pointer text-[var(--app-link)]"
-                      onClick={() =>
-                        openExternalUrl(
-                          'https://jan.ai/guides/troubleshooting/gpu-not-used/'
-                        )
-                      }
-                    >
-                      troubleshooting guide
-                    </span>{' '}
-                  </span>{' '}
-                  for further assistance.
-                </p>
-              </div>
-
-              <div className="flex items-center">
-                {gpuList.length > 0 && !gpuEnabled && (
-                  <Tooltip
-                    trigger={
-                      <AlertCircleIcon
-                        size={16}
-                        className="mr-2 text-[hsla(var(--warning-bg))]"
-                      />
-                    }
-                    content="Disabling NVIDIA GPU Acceleration may result in reduced
-                    performance. It is recommended to keep this enabled for
-                    optimal user experience."
-                  />
-                )}
-                <Tooltip
-                  trigger={
-                    <Switch
-                      disabled={gpuList.length === 0 || vulkanEnabled}
-                      checked={gpuEnabled}
-                      onChange={(e) => {
-                        if (e.target.checked === true) {
-                          setGpuEnabled(true)
-                          snackbar({
-                            description:
-                              'Successfully turned on GPU Acceleration',
-                            type: 'success',
-                          })
-                        } else {
-                          setGpuEnabled(false)
-                          snackbar({
-                            description:
-                              'Successfully turned off GPU Acceleration',
-                            type: 'success',
-                          })
-                        }
-                        // Stop any running model to apply the changes
-                        if (e.target.checked !== gpuEnabled) {
-                          stopModel().finally(() => {
-                            setTimeout(() => {
-                              window.location.reload()
-                            }, 300)
-                          })
-                        }
-                      }}
-                    />
-                  }
-                  content="Your current device does not have a compatible GPU for
-                  monitoring. To enable GPU monitoring, please ensure your
-                  device has a supported Nvidia or AMD GPU with updated
-                  drivers."
-                  disabled={gpuList.length > 0}
-                />
-              </div>
-            </div>
-
-            <div className="mt-2 flex w-full flex-col rounded-lg px-2 py-4">
-              <label className="mb-2 mr-2 inline-block font-medium">
-                Choose device(s)
-              </label>
-              <div className="relative w-full md:w-1/2" ref={setToggle}>
-                <Input
-                  value={selectedGpu.join() || ''}
-                  className={twMerge(
-                    'w-full cursor-pointer',
-                    gpuList.length === 0 && 'pointer-events-none'
-                  )}
-                  readOnly
-                  disabled={gpuList.length === 0}
-                  placeholder={gpuSelectionPlaceHolder}
-                  suffixIcon={
-                    <ChevronDownIcon
-                      size={14}
-                      className={twMerge(
-                        gpuList.length === 0 && 'pointer-events-none',
-                        open && 'rotate-180'
-                      )}
-                    />
-                  }
-                  onClick={() => setOpen(!open)}
-                />
-                {gpuList.length > 0 && (
-                  <div
-                    className={twMerge(
-                      'absolute right-0 top-0 z-20 mt-10 max-h-80 w-full overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-sm',
-                      open ? 'flex' : 'hidden'
-                    )}
-                    ref={setDropdownOptions}
-                  >
-                    <div className="w-full p-4">
-                      <p>
-                        {vulkanEnabled ? 'Vulkan Supported GPUs' : 'Nvidia'}
-                      </p>
-                      <div className="py-2">
-                        <div className="rounded-lg">
-                          {gpuList
-                            .filter((gpu) =>
-                              vulkanEnabled
-                                ? gpu.name
-                                : gpu.name?.toLowerCase().includes('nvidia')
-                            )
-                            .map((gpu) => (
-                              <div
-                                key={gpu.id}
-                                className="mt-2 flex items-center space-x-2"
-                              >
-                                <Checkbox
-                                  id={`gpu-${gpu.id}`}
-                                  name="gpu-nvidia"
-                                  value={gpu.id}
-                                  checked={gpusInUse.includes(gpu.id)}
-                                  onChange={() => handleGPUChange(gpu.id)}
-                                  label={
-                                    <span>
-                                      <span>{gpu.name}</span>
-                                      {!vulkanEnabled && (
-                                        <span>{gpu.vram}MB VRAM</span>
-                                      )}
-                                    </span>
-                                  }
-                                />
-                              </div>
-                            ))}
-                        </div>
-                        {gpuEnabled && gpusInUse.length > 1 && (
-                          <div className="mt-2 flex items-start space-x-2 text-[hsla(var(--warning-bg))]">
-                            <AlertTriangleIcon
-                              size={16}
-                              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.
-                            </p>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Vulkan for AMD GPU/ APU and Intel Arc GPU */}
-        {!isMac && experimentalEnabled && (
-          <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
-            <div className="space-y-1">
-              <div className="flex gap-x-2">
-                <h6 className="font-semibold capitalize">Vulkan Support</h6>
-              </div>
-              <p className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
-                Enable Vulkan with AMD GPU/APU and Intel Arc GPU for better
-                model performance (reload needed).
-              </p>
-            </div>
-            <div className="flex-shrink-0">
-              <Switch
-                checked={vulkanEnabled}
-                onChange={(e) => updateVulkanEnabled(e.target.checked)}
-              />
-            </div>
-          </div>
-        )}
-
         <DataFolder />
 
         {/* Proxy Settings Link */}