feat(inspect): improve cameras picker (#3194)

* camera unique names and auto name completion

Signed-off-by: Max Xiang <xiangxiang.ma@intel.com>

* fix

Signed-off-by: Max Xiang <xiangxiang.ma@intel.com>

* fix name

Signed-off-by: Max Xiang <xiangxiang.ma@intel.com>

* Update application/ui/src/features/inspect/toolbar/sources/webcam/webcam-fields.component.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Max Xiang <maxx.rift@gmail.com>

* Update application/ui/src/features/inspect/toolbar/sources/webcam/webcam-fields.component.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Max Xiang <maxx.rift@gmail.com>

* Update application/ui/src/features/inspect/toolbar/sources/webcam/webcam-fields.component.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Max Xiang <maxx.rift@gmail.com>

* Update application/ui/src/features/inspect/toolbar/sources/webcam/webcam-fields.component.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Max Xiang <maxx.rift@gmail.com>

* style fix

Signed-off-by: Max Xiang <xiangxiang.ma@intel.com>

---------

Signed-off-by: Max Xiang <xiangxiang.ma@intel.com>
Signed-off-by: Max Xiang <maxx.rift@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: maxxgx

application/backend/src/utils/devices.py

@@ -1,5 +1,6 @@
 # Copyright (C) 2025 Intel Corporation
 # SPDX-License-Identifier: Apache-2.0
+from collections import defaultdict
 from functools import lru_cache
 from typing import TypedDict
 
@@ -18,12 +19,23 @@ class Devices:
 
     @staticmethod
     def get_webcam_devices() -> list[CameraInfo]:
-        """Get list of available webcam devices.
+        """
+        Get list of available webcam devices.
+        If duplicate names are present, append a suffix to make them unique.
+        Example: ["camera", "camera"] -> ["camera", "camera (1)"]
 
         Returns:
             list[CameraInfo]: List of dictionaries containing camera index and name.
         """
-        return [{"index": cam.index, "name": cam.name} for cam in cv2_enumerate_cameras.enumerate_cameras()]
+        names_count: dict[str, int] = defaultdict(int)
+        cameras: list[CameraInfo] = []
+        for cam in cv2_enumerate_cameras.enumerate_cameras():
+            duplicate_count = names_count[cam.name]
+            duplicate_suffix = f" ({duplicate_count})" if duplicate_count > 0 else ""
+            unique_camera_name = f"{cam.name}{duplicate_suffix}"
+            names_count[cam.name] += 1
+            cameras.append(CameraInfo(index=cam.index, name=unique_camera_name))
+        return cameras
 
     @staticmethod
     @lru_cache

application/backend/tests/unit/utils/test_devices.py

@@ -23,3 +23,18 @@ def test_get_webcam_devices(self, mock_enumerate: MagicMock) -> None:
         assert cameras[0]["index"] == 1
         assert cameras[0]["name"] == "Linux Camera"
         mock_enumerate.assert_called_once()
+
+    @patch("utils.devices.cv2_enumerate_cameras.enumerate_cameras")
+    def test_get_webcam_devices_duplicate_names(self, mock_enumerate: MagicMock) -> None:
+        """Ensure duplicate camera names are suffixed to remain unique."""
+
+        def build_cam(index: int, name: str) -> MagicMock:
+            cam = MagicMock()
+            cam.index = index
+            cam.name = name
+            return cam
+
+        mock_enumerate.return_value = [build_cam(0, "nikon"), build_cam(1, "nikon")]
+        cameras = Devices.get_webcam_devices()
+        assert [cam["name"] for cam in cameras] == ["nikon", "nikon (1)"]
+        assert [cam["index"] for cam in cameras] == [0, 1]

application/ui/src/features/inspect/toolbar/sources/source-list/settings-list/settings-list.component.tsx

@@ -11,7 +11,7 @@ interface SettingsListProps {
 const CameraDeviceDisplay = ({ deviceId }: { deviceId: number }) => {
     const { data: cameraDevices, isLoading } = $api.useQuery('get', '/api/devices/camera');
     const devices = cameraDevices?.devices ?? [];
-    const device = devices[deviceId];
+    const device = devices.find((d) => d.index === deviceId);
 
     if (isLoading) {
         return <span>Loading...</span>;

application/ui/src/features/inspect/toolbar/sources/webcam/webcam-fields.component.tsx

@@ -1,8 +1,10 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
+import { useState } from 'react';
+
 import { $api } from '@geti-inspect/api';
-import { ActionButton, Flex, Item, Loading, Picker, TextField } from '@geti/ui';
+import { ActionButton, Flex, Item, Key, Loading, Picker, TextField } from '@geti/ui';
 import { Refresh } from '@geti/ui/icons';
 
 import { WebcamSourceConfig } from '../util';
@@ -13,25 +15,50 @@ type WebcamFieldsProps = {
 
 export const WebcamFields = ({ defaultState }: WebcamFieldsProps) => {
     const { data: cameraDevices, isLoading, isRefetching, refetch } = $api.useQuery('get', '/api/devices/camera');
+    const [name, setName] = useState(defaultState.name);
+    const [isModified, setIsModified] = useState(false);
+
+    const devices = (cameraDevices?.devices ?? []).map((device) => ({
+        id: device.index,
+        name: device.name,
+    }));
+
+    const handleNameChange = (value: string) => {
+        setName(value);
+        setIsModified(true);
+    };
+
+    const handleSelectionChange = (key: Key | null) => {
+        if (key === null) {
+            return;
+        }
+
+        const device = devices.find((d) => d.id === Number(key));
 
-    const devices = (cameraDevices?.devices ?? []).map((device, index) => ({ name: device.name, id: index }));
+        // if user modifies the name field, don't override it
+        if (device && (!isModified || !name?.trim())) {
+            setName(device.name);
+        }
+    };
 
     return (
         <Flex direction='column' gap='size-200'>
             <TextField isHidden label='id' name='id' defaultValue={defaultState?.id} />
             <TextField isHidden label='project_id' name='project_id' defaultValue={defaultState.project_id} />
-            <TextField width={'100%'} label='Name' name='name' defaultValue={defaultState.name} />
+            <TextField isHidden label='name' name='name' value={name} />
+            <TextField width={'100%'} label='Name' name='name_display' value={name} onChange={handleNameChange} />
 
             <Flex alignItems='end' gap='size-200'>
                 <Picker
                     flex='1'
-                    label='Cameras'
+                    label='Camera'
                     name='device_id'
                     items={devices}
                     isLoading={isLoading}
                     defaultSelectedKey={defaultState.device_id}
+                    onSelectionChange={handleSelectionChange}
                 >
-                    {(item) => <Item>{item.name}</Item>}
+                    {(item) => <Item key={item.id}>{item.name}</Item>}
                 </Picker>
 
                 <ActionButton