feat(inspect): Device selection in training model dialog #3094

ActiveChooN · 2025-11-07T09:05:40Z

📝 Description

Added device selector in training dialog

Provide a clear summary of the changes and the issue that has been addressed.
🛠️ Fixes # (issue number)
Closes 📋 [TASK] Training device selector #3096

✨ Changes

Select what type of change your PR is:

✅ Checklist

Before you submit your pull request, please make sure you have completed the following steps:

📚 I have made the necessary updates to the documentation (if applicable).
🧪 I have written tests that support my changes and prove that my fix is effective or my feature works (if applicable).
🏷️ My PR title follows conventional commit format.

For more information about code review checklists, see the Code Review Checklist.

Copilot

Pull Request Overview

This PR adds device selection functionality to the training model dialog, allowing users to choose which hardware device (CPU, GPU, TPU, etc.) should be used for model training.

Key Changes:

Added a new device picker component that displays available training devices with descriptions
Integrated device selection into the training workflow, making it a required field before starting training
Created device metadata utilities to provide user-friendly labels and descriptions for different hardware accelerators

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
application/ui/tsconfig.json	Removed trailing comma from JSON configuration
application/ui/tests/tsconfig.json	Removed trailing comma from JSON configuration
application/ui/src/features/inspect/train-model/utils/device-metadata.ts	New utility file providing metadata (labels and descriptions) for various device types
application/ui/src/features/inspect/train-model/train-model.module.scss	Added styling for device selection UI components
application/ui/src/features/inspect/train-model/train-model-dialog.component.tsx	Integrated device picker into dialog and updated training logic to use selected device
application/ui/src/features/inspect/train-model/train-model-device-picker.component.tsx	New component for device selection with loading, error, and empty states

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

application/ui/src/features/inspect/train-model/train-model-device-picker.component.tsx

Copilot

Pull Request Overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

application/ui/src/features/inspect/train-model/train-model-device-picker.component.tsx

Copilot

Pull Request Overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Signed-off-by: Dmitry Kalinin <[email protected]>

…vice-picker.component.tsx Co-authored-by: Copilot <[email protected]> Signed-off-by: Dmitry Kalinin <[email protected]>

Signed-off-by: Dmitry Kalinin <[email protected]>

camiloHimura · 2025-11-07T13:29:38Z

application/ui/src/features/inspect/train-model/train-model-device-picker.component.tsx

+        isRefetching,
+        refetch,
+    } = $api.useQuery('get', '/api/training-devices');
+    const devices = useMemo(() => availableDevices?.devices ?? [], [availableDevices]);


I was under the impression that we wouldn’t need useMemo and useCallback anymore.

Did we enable react compiler in the app? I can't find it in the rsbuild conf

I think it's not enabled yet, but in this case the memo won't really be useful imoh since the query data should be stable.

MarkRedeman · 2025-11-07T15:57:59Z

application/ui/src/features/inspect/train-model/train-model-dialog.component.tsx

+    const [selectedDevice, setSelectedDevice] = useState<string | null>(null);
+    const handleDeviceSelect = useCallback((device: string | null) => {
+        setSelectedDevice(device);
+    }, []);


imho adding the extra handleDeviceSelect is not necessary (either rename it here, or use the old name below)

Suggested change

const [selectedDevice, setSelectedDevice] = useState<string | null>(null);

const handleDeviceSelect = useCallback((device: string | null) => {

setSelectedDevice(device);

}, []);

const [selectedDevice, handleDeviceSelect] = useState<string | null>(null);

MarkRedeman · 2025-11-07T15:59:11Z

application/ui/src/features/inspect/train-model/train-model-dialog.component.tsx

        setSearchParams(searchParams);
    };
    const [selectedModel, setSelectedModel] = useState<string | null>(null);
+    const [selectedDevice, setSelectedDevice] = useState<string | null>(null);


I think it would be good to select a device by default. Ideally we should prioritize:

XPU

GPU

MPS

CPU

MarkRedeman · 2025-11-07T16:02:46Z

application/ui/src/features/inspect/train-model/train-model-device-picker.component.tsx

+        isRefetching,
+        refetch,
+    } = $api.useQuery('get', '/api/training-devices');
+    const devices = useMemo(() => availableDevices?.devices ?? [], [availableDevices]);


I think it's not enabled yet, but in this case the memo won't really be useful imoh since the query data should be stable.

MarkRedeman · 2025-11-07T16:03:01Z

application/ui/src/features/inspect/train-model/train-model-device-picker.component.tsx

+        isError,
+        isRefetching,
+        refetch,
+    } = $api.useQuery('get', '/api/training-devices');


You could use useSuspenseQuery here and avoid having to do all the loading checks.

MarkRedeman · 2025-11-07T16:05:06Z

application/ui/src/features/inspect/train-model/train-model-device-picker.component.tsx

+    const hasDevices = devices.length > 0;
+    const isLoadingDevices = isLoading || isRefetching;
+
+    useEffect(() => {


I think we could avoid this useEffect by moving the query (using suspense query) to the location where we define the useState for the selected device, and then use the query's data to select the default device.

Something like this,

const { data: availableDevices = [], } = $api.useQuery('get', '/api/training-devices'); const [selectedDevice, setSelectedDevice] = useState<string | null>(availableDevices.at(0) ?? null);

MarkRedeman · 2025-11-07T16:06:44Z

application/ui/src/features/inspect/train-model/train-model-device-picker.component.tsx

+        }
+    }, [devices, hasDevices, isError, isLoadingDevices, onSelect, selectedDevice]);
+
+    const deviceOptions = useMemo(() => {


I think we can skip this useMemo since this component would be rerendering anyway when the useMemo is called.

ActiveChooN requested review from camiloHimura and Copilot November 7, 2025 09:05

Copilot AI reviewed Nov 7, 2025

View reviewed changes

application/ui/src/features/inspect/train-model/train-model-device-picker.component.tsx Outdated Show resolved Hide resolved

ActiveChooN added the Geti Inspect label Nov 7, 2025

Copilot AI review requested due to automatic review settings November 7, 2025 09:07

Copilot AI reviewed Nov 7, 2025

View reviewed changes

application/ui/src/features/inspect/train-model/train-model-device-picker.component.tsx Show resolved Hide resolved

ActiveChooN changed the title ~~Device selection in training model dialog~~ feat(inspect): Device selection in training model dialog Nov 7, 2025

ActiveChooN marked this pull request as ready for review November 7, 2025 12:03

ActiveChooN requested a review from MarkRedeman as a code owner November 7, 2025 12:03

Copilot AI review requested due to automatic review settings November 7, 2025 12:03

Copilot AI reviewed Nov 7, 2025

View reviewed changes

ActiveChooN and others added 3 commits November 7, 2025 13:05

feat(inspect): implement device selection in training model dialog

b873d27

Signed-off-by: Dmitry Kalinin <[email protected]>

Update application/ui/src/features/inspect/train-model/train-model-de…

4ba2883

…vice-picker.component.tsx Co-authored-by: Copilot <[email protected]> Signed-off-by: Dmitry Kalinin <[email protected]>

Fixed tests

e5704f8

Signed-off-by: Dmitry Kalinin <[email protected]>

ActiveChooN force-pushed the feature/training-device-selector branch from 5f2c043 to e5704f8 Compare November 7, 2025 12:05

camiloHimura reviewed Nov 7, 2025

View reviewed changes

MarkRedeman reviewed Nov 7, 2025

View reviewed changes

feat(inspect): Device selection in training model dialog #3094

Are you sure you want to change the base?

feat(inspect): Device selection in training model dialog #3094

Uh oh!

Conversation

ActiveChooN commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

✨ Changes

✅ Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ActiveChooN Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ActiveChooN commented Nov 7, 2025 •

edited

Loading

ActiveChooN Nov 7, 2025 •

edited

Loading