feat: [FE] Implement GPU acceleration

[imtuyethan]

Epic: #905 Related design ticket: #1646 Related implementation ticket from @hiento09: #1730

---

Design

Figma link: https://www.figma.com/file/ytn1nRZ17FUmJHTlhmZB9f/Jan-App?type=design&node-id=2596-81009&mode=design&t=vDzqYrfNOU0W8KmX-4

When users have compatible GPU(s)

• GPU Acceleration is turned on by default if users have GPU
• Auto-select the GPU with the highest VRAM
• GPU monitoring shown on the footer

When click on choosing GPU, there are 2 cases:

• If we only detect 1 type of GPU: Show checkbox selection for all the GPU detected.
• If we detect more than 1 type of GPU (Nvidia, AMD,...): Show the type group selection + checkboxes for each GPU. Reason for this is because we only allow users to select multiple GPU within 1 type.

When users select more than 1 GPU

• Show warning If multi-GPU is enabled with different GPU models or without NVLink, it could impact token speed
• Number of GPU shown on footer -> when hover, users will see the detailed specs of each GPU.

When users turn off GPU acceleration although they have compatible GPU

Show warning icon -> when hover, users see tooltip suggestion that users should turn it on: Disabling GPU Acceleration may result in reduced performance. It's recommended to keep this enabled for optimal user experience.

When users don't have any compatible GPU

• GPU acceleration is turned off by default if users don’t have GPU
• Users cannot turn on
• If users try to turn on by clicking on the toggle -> show tooltip 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.

Edge case

When the local API server is running, users are not allowed to change GPU settings

[Van-QA]

@urmauur please help correct these issues:

1. Button alignment
2. When no GPU available, the dropdown is blank (see screenshot), should we put any placeholders to indicate that there is no GPU available to users?

[Van-QA]

On the other hand, can we simplify the GPU section a little bit? The GPU Acceleration and the Choose GPU are eating up space, let me know what you think, @imtuyethan

[namchuai]

@Van-QA , please help to validate this issue with nightly build. Thank you!

[Van-QA]

hi @namchuai,

Please double check this scenario :x: :

• Users have GPU ON in the previous version of the Jan app (but hardware does not have GPU)
• Update the Jan app to .271
• The GPU settings is still ON + disabled from turn OFF action in the UI
• The Nvidia dropdown is accessible with blank option (see screenshot)

[Van-QA]

additional issue is when in dark mode, the placeholder text in the dropdown blends with the background @louis-jan

[Van-QA]

Tested and looking good on Jan v0.4.6-280 ✅