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

148
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,77 +252,70 @@ const Advanced = () => {
)} )}
</Tooltip> </Tooltip>
</div> </div>
<div className="mt-2 w-full rounded-lg bg-secondary p-4">
{gpuEnabled && ( <label className="mb-1 inline-block font-medium">Choose GPU</label>
<div className="mt-2 w-full rounded-lg bg-secondary p-4"> <Select disabled={!gpuEnabled} value={selectedGpu.join()}>
<label className="mb-1 inline-block font-medium"> <SelectTrigger className="w-[340px] bg-white">
Choose GPU <SelectValue placeholder={gpuSelectionPlaceHolder}>
</label> <span className="line-clamp-1 w-full pr-8">
<Select value={selectedGpu.join()}> {selectedGpu.join()}
<SelectTrigger className="w-[340px] bg-white"> </span>
<SelectValue placeholder="Select GPU"> </SelectValue>
<span className="line-clamp-1 w-full pr-8"> </SelectTrigger>
{selectedGpu.join()} <SelectPortal>
</span> <SelectContent className="w-[400px] px-1 pb-2">
</SelectValue> <SelectGroup>
</SelectTrigger> <SelectLabel>Nvidia</SelectLabel>
<SelectPortal> <div className="px-4 pb-2">
<SelectContent className="w-[400px] px-1 pb-2"> <div className="rounded-lg bg-secondary p-3">
<SelectGroup> {gpuList
<SelectLabel>Nvidia</SelectLabel> .filter((gpu) =>
<div className="px-4 pb-2"> gpu.name.toLowerCase().includes('nvidia')
<div className="rounded-lg bg-secondary p-3"> )
{gpuList .map((gpu) => (
.filter((gpu) => <div
gpu.name.toLowerCase().includes('nvidia') key={gpu.id}
) className="my-1 flex items-center space-x-2"
.map((gpu) => ( >
<div <Checkbox
key={gpu.id} id={`gpu-${gpu.id}`}
className="my-1 flex items-center space-x-2" name="gpu-nvidia"
className="bg-white"
value={gpu.id}
checked={gpusInUse.includes(gpu.id)}
onCheckedChange={() => handleGPUChange(gpu.id)}
/>
<label
className="flex w-full items-center justify-between"
htmlFor={`gpu-${gpu.id}`}
> >
<Checkbox <span>{gpu.name}</span>
id={`gpu-${gpu.id}`} <span>{gpu.vram}MB VRAM</span>
name="gpu-nvidia" </label>
className="bg-white" </div>
value={gpu.id} ))}
checked={gpusInUse.includes(gpu.id)}
onCheckedChange={() =>
handleGPUChange(gpu.id)
}
/>
<label
className="flex w-full items-center justify-between"
htmlFor={`gpu-${gpu.id}`}
>
<span>{gpu.name}</span>
<span>{gpu.vram}MB VRAM</span>
</label>
</div>
))}
</div>
{/* Warning message */}
{gpuEnabled && gpusInUse.length > 1 && (
<div className="mt-2 flex items-start space-x-2 text-yellow-500">
<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>
</SelectGroup> {/* Warning message */}
{gpuEnabled && gpusInUse.length > 1 && (
<div className="mt-2 flex items-start space-x-2 text-yellow-500">
<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>
</SelectGroup>
{/* TODO enable this when we support AMD */} {/* TODO enable this when we support AMD */}
</SelectContent> </SelectContent>
</SelectPortal> </SelectPortal>
</Select> </Select>
</div> </div>
)}
</div> </div>
)} )}