fix: hardware section (#3866)

This commit is contained in:
Faisal Amir 2024-10-23 10:41:49 +07:00 committed by GitHub
parent 9045eeb1d6
commit 9a266db745
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -237,7 +237,7 @@ const Advanced = () => {
</div> </div>
{/* CPU / GPU switching */} {/* CPU / GPU switching */}
{!isMac && gpuList.length > 0 && ( {!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 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="flex w-full items-start justify-between">
<div className="space-y-1"> <div className="space-y-1">
@ -314,81 +314,86 @@ const Advanced = () => {
/> />
</div> </div>
</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"> {gpuList.length > 0 && (
Choose device(s) <div className="mt-2 flex w-full flex-col rounded-lg px-2 py-4">
</label> <label className="mb-2 mr-2 inline-block font-medium">
<div className="relative w-full md:w-1/2" ref={setToggle}> Choose device(s)
<Input </label>
value={selectedGpu.join() || ''} <div className="relative w-full md:w-1/2" ref={setToggle}>
className="w-full cursor-pointer" <Input
readOnly value={selectedGpu.join() || ''}
placeholder="" className="w-full cursor-pointer"
suffixIcon={ readOnly
<ChevronDownIcon placeholder=""
size={14} suffixIcon={
className={twMerge(open && 'rotate-180')} <ChevronDownIcon
/> size={14}
} className={twMerge(open && 'rotate-180')}
onClick={() => setOpen(!open)} />
/> }
<div onClick={() => setOpen(!open)}
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', <div
open ? 'flex' : 'hidden' 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',
ref={setDropdownOptions} open ? 'flex' : 'hidden'
> )}
<div className="w-full p-4"> ref={setDropdownOptions}
<p>{vulkanEnabled ? 'Vulkan Supported GPUs' : 'Nvidia'}</p> >
<div className="py-2"> <div className="w-full p-4">
<div className="rounded-lg"> <p>
{gpuList {vulkanEnabled ? 'Vulkan Supported GPUs' : 'Nvidia'}
.filter((gpu) => </p>
vulkanEnabled <div className="py-2">
? gpu.name <div className="rounded-lg">
: gpu.name?.toLowerCase().includes('nvidia') {gpuList
) .filter((gpu) =>
.map((gpu) => ( vulkanEnabled
<div ? gpu.name
key={gpu.id} : gpu.name?.toLowerCase().includes('nvidia')
className="mt-2 flex items-center space-x-2" )
> .map((gpu) => (
<Checkbox <div
id={`gpu-${gpu.id}`} key={gpu.id}
name="gpu-nvidia" className="mt-2 flex items-center space-x-2"
value={gpu.id} >
checked={gpusInUse.includes(gpu.id)} <Checkbox
onChange={() => handleGPUChange(gpu.id)} id={`gpu-${gpu.id}`}
label={ name="gpu-nvidia"
<span> value={gpu.id}
<span>{gpu.name}</span> checked={gpusInUse.includes(gpu.id)}
{!vulkanEnabled && ( onChange={() => handleGPUChange(gpu.id)}
<span>{gpu.vram}MB VRAM</span> label={
)} <span>
</span> <span>{gpu.name}</span>
} {!vulkanEnabled && (
/> <span>{gpu.vram}MB VRAM</span>
</div> )}
))} </span>
</div> }
{gpuEnabled && gpusInUse.length > 1 && ( />
<div className="mt-2 flex items-start space-x-2 text-[hsla(var(--warning-bg))]"> </div>
<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>
)} {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> </div>
</div> </div>
</div> )}
</div> </div>
)} )}