chore: use camelCase ids for model in vision camera demo

Author: NorbertKlockiewicz

.eslintrc.js

@@ -32,7 +32,7 @@ module.exports = {
         customWordListFile: path.resolve(__dirname, '.cspell-wordlist.txt'),
       },
     ],
-    'camelcase': ['error', { properties: 'never' }],
+    'camelcase': 'error',
   },
   plugins: ['prettier', 'markdown'],
   overrides: [

apps/computer-vision/app/vision_camera/index.tsx

@@ -35,15 +35,15 @@ import SegmentationTask from '../../components/vision_camera/tasks/SegmentationT
 type TaskId = 'classification' | 'objectDetection' | 'segmentation';
 type ModelId =
   | 'classification'
-  | 'objectDetection_ssdlite'
-  | 'objectDetection_rfdetr'
-  | 'segmentation_deeplab_resnet50'
-  | 'segmentation_deeplab_resnet101'
-  | 'segmentation_deeplab_mobilenet'
-  | 'segmentation_lraspp'
-  | 'segmentation_fcn_resnet50'
-  | 'segmentation_fcn_resnet101'
-  | 'segmentation_selfie';
+  | 'objectDetectionSsdlite'
+  | 'objectDetectionRfdetr'
+  | 'segmentationDeeplabResnet50'
+  | 'segmentationDeeplabResnet101'
+  | 'segmentationDeeplabMobilenet'
+  | 'segmentationLraspp'
+  | 'segmentationFcnResnet50'
+  | 'segmentationFcnResnet101'
+  | 'segmentationSelfie';
 
 type TaskVariant = { id: ModelId; label: string };
 type Task = { id: TaskId; label: string; variants: TaskVariant[] };
@@ -58,21 +58,21 @@ const TASKS: Task[] = [
     id: 'segmentation',
     label: 'Segment',
     variants: [
-      { id: 'segmentation_deeplab_resnet50', label: 'DeepLab ResNet50' },
-      { id: 'segmentation_deeplab_resnet101', label: 'DeepLab ResNet101' },
-      { id: 'segmentation_deeplab_mobilenet', label: 'DeepLab MobileNet' },
-      { id: 'segmentation_lraspp', label: 'LRASPP MobileNet' },
-      { id: 'segmentation_fcn_resnet50', label: 'FCN ResNet50' },
-      { id: 'segmentation_fcn_resnet101', label: 'FCN ResNet101' },
-      { id: 'segmentation_selfie', label: 'Selfie' },
+      { id: 'segmentationDeeplabResnet50', label: 'DeepLab ResNet50' },
+      { id: 'segmentationDeeplabResnet101', label: 'DeepLab ResNet101' },
+      { id: 'segmentationDeeplabMobilenet', label: 'DeepLab MobileNet' },
+      { id: 'segmentationLraspp', label: 'LRASPP MobileNet' },
+      { id: 'segmentationFcnResnet50', label: 'FCN ResNet50' },
+      { id: 'segmentationFcnResnet101', label: 'FCN ResNet101' },
+      { id: 'segmentationSelfie', label: 'Selfie' },
     ],
   },
   {
     id: 'objectDetection',
     label: 'Detect',
     variants: [
-      { id: 'objectDetection_ssdlite', label: 'SSDLite MobileNet' },
-      { id: 'objectDetection_rfdetr', label: 'RF-DETR Nano' },
+      { id: 'objectDetectionSsdlite', label: 'SSDLite MobileNet' },
+      { id: 'objectDetectionRfdetr', label: 'RF-DETR Nano' },
     ],
   },
 ];
@@ -201,7 +201,7 @@ export default function VisionCameraScreen() {
         <ObjectDetectionTask
           {...taskProps}
           activeModel={
-            activeModel as 'objectDetection_ssdlite' | 'objectDetection_rfdetr'
+            activeModel as 'objectDetectionSsdlite' | 'objectDetectionRfdetr'
           }
         />
       )}
@@ -210,13 +210,13 @@ export default function VisionCameraScreen() {
           {...taskProps}
           activeModel={
             activeModel as
-              | 'segmentation_deeplab_resnet50'
-              | 'segmentation_deeplab_resnet101'
-              | 'segmentation_deeplab_mobilenet'
-              | 'segmentation_lraspp'
-              | 'segmentation_fcn_resnet50'
-              | 'segmentation_fcn_resnet101'
-              | 'segmentation_selfie'
+              | 'segmentationDeeplabResnet50'
+              | 'segmentationDeeplabResnet101'
+              | 'segmentationDeeplabMobilenet'
+              | 'segmentationLraspp'
+              | 'segmentationFcnResnet50'
+              | 'segmentationFcnResnet101'
+              | 'segmentationSelfie'
           }
         />
       )}

apps/computer-vision/components/vision_camera/tasks/ObjectDetectionTask.tsx

@@ -11,7 +11,7 @@ import {
 import { labelColor, labelColorBg } from '../utils/colors';
 import { TaskProps } from './types';
 
-type ObjModelId = 'objectDetection_ssdlite' | 'objectDetection_rfdetr';
+type ObjModelId = 'objectDetectionSsdlite' | 'objectDetectionRfdetr';
 
 type Props = TaskProps & { activeModel: ObjModelId };
 
@@ -28,14 +28,14 @@ export default function ObjectDetectionTask({
 }: Props) {
   const ssdlite = useObjectDetection({
     model: SSDLITE_320_MOBILENET_V3_LARGE,
-    preventLoad: activeModel !== 'objectDetection_ssdlite',
+    preventLoad: activeModel !== 'objectDetectionSsdlite',
   });
   const rfdetr = useObjectDetection({
     model: RF_DETR_NANO,
-    preventLoad: activeModel !== 'objectDetection_rfdetr',
+    preventLoad: activeModel !== 'objectDetectionRfdetr',
   });
 
-  const active = activeModel === 'objectDetection_ssdlite' ? ssdlite : rfdetr;
+  const active = activeModel === 'objectDetectionSsdlite' ? ssdlite : rfdetr;
 
   const [detections, setDetections] = useState<Detection[]>([]);
   const [imageSize, setImageSize] = useState({ width: 1, height: 1 });

apps/computer-vision/components/vision_camera/tasks/SegmentationTask.tsx

@@ -24,13 +24,13 @@ import { CLASS_COLORS } from '../utils/colors';
 import { TaskProps } from './types';
 
 type SegModelId =
-  | 'segmentation_deeplab_resnet50'
-  | 'segmentation_deeplab_resnet101'
-  | 'segmentation_deeplab_mobilenet'
-  | 'segmentation_lraspp'
-  | 'segmentation_fcn_resnet50'
-  | 'segmentation_fcn_resnet101'
-  | 'segmentation_selfie';
+  | 'segmentationDeeplabResnet50'
+  | 'segmentationDeeplabResnet101'
+  | 'segmentationDeeplabMobilenet'
+  | 'segmentationLraspp'
+  | 'segmentationFcnResnet50'
+  | 'segmentationFcnResnet101'
+  | 'segmentationSelfie';
 
 type Props = TaskProps & { activeModel: SegModelId };
 
@@ -47,41 +47,41 @@ export default function SegmentationTask({
 }: Props) {
   const segDeeplabResnet50 = useSemanticSegmentation({
     model: DEEPLAB_V3_RESNET50_QUANTIZED,
-    preventLoad: activeModel !== 'segmentation_deeplab_resnet50',
+    preventLoad: activeModel !== 'segmentationDeeplabResnet50',
   });
   const segDeeplabResnet101 = useSemanticSegmentation({
     model: DEEPLAB_V3_RESNET101_QUANTIZED,
-    preventLoad: activeModel !== 'segmentation_deeplab_resnet101',
+    preventLoad: activeModel !== 'segmentationDeeplabResnet101',
   });
   const segDeeplabMobilenet = useSemanticSegmentation({
     model: DEEPLAB_V3_MOBILENET_V3_LARGE_QUANTIZED,
-    preventLoad: activeModel !== 'segmentation_deeplab_mobilenet',
+    preventLoad: activeModel !== 'segmentationDeeplabMobilenet',
   });
   const segLraspp = useSemanticSegmentation({
     model: LRASPP_MOBILENET_V3_LARGE_QUANTIZED,
-    preventLoad: activeModel !== 'segmentation_lraspp',
+    preventLoad: activeModel !== 'segmentationLraspp',
   });
   const segFcnResnet50 = useSemanticSegmentation({
     model: FCN_RESNET50_QUANTIZED,
-    preventLoad: activeModel !== 'segmentation_fcn_resnet50',
+    preventLoad: activeModel !== 'segmentationFcnResnet50',
   });
   const segFcnResnet101 = useSemanticSegmentation({
     model: FCN_RESNET101_QUANTIZED,
-    preventLoad: activeModel !== 'segmentation_fcn_resnet101',
+    preventLoad: activeModel !== 'segmentationFcnResnet101',
   });
   const segSelfie = useSemanticSegmentation({
     model: SELFIE_SEGMENTATION,
-    preventLoad: activeModel !== 'segmentation_selfie',
+    preventLoad: activeModel !== 'segmentationSelfie',
   });
 
   const active = {
-    segmentation_deeplab_resnet50: segDeeplabResnet50,
-    segmentation_deeplab_resnet101: segDeeplabResnet101,
-    segmentation_deeplab_mobilenet: segDeeplabMobilenet,
-    segmentation_lraspp: segLraspp,
-    segmentation_fcn_resnet50: segFcnResnet50,
-    segmentation_fcn_resnet101: segFcnResnet101,
-    segmentation_selfie: segSelfie,
+    segmentationDeeplabResnet50: segDeeplabResnet50,
+    segmentationDeeplabResnet101: segDeeplabResnet101,
+    segmentationDeeplabMobilenet: segDeeplabMobilenet,
+    segmentationLraspp: segLraspp,
+    segmentationFcnResnet50: segFcnResnet50,
+    segmentationFcnResnet101: segFcnResnet101,
+    segmentationSelfie: segSelfie,
   }[activeModel];
 
   const [maskImage, setMaskImage] = useState<SkImage | null>(null);