Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
NamH 2024-02-15 22:38:23 +07:00 committed by GitHub
parent a96053ebef
commit f5934d5a60
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 74 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/screens/Settings/Advanced/index.tsx
View File

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