feat(frontend): add AI overlay media stream widgets (deeplab/coco-ssd)

frontend/package.json

@@ -23,6 +23,9 @@
     "@tanstack/react-query": "^5.84.1",
     "@tanstack/react-query-devtools": "^5.84.1",
     "@tanstack/react-router": "1.19.1",
+    "@tensorflow-models/coco-ssd": "^2.2.2",
+    "@tensorflow-models/deeplab": "^0.2.2",
+    "@tensorflow/tfjs": "^3.21.0",
     "@types/leaflet": "^1.9.20",
     "@types/react-grid-layout": "^1.3.5",
     "@types/uuid": "^10.0.0",

frontend/src/components/Dashboard/Widgets/ErrorWidget.tsx

@@ -31,14 +31,7 @@ export function ErrorWidget({ error }: ErrorWidgetProps) {
               </Text>
             </VStack>
           </HStack>
-          <Box
-            w="100%"
-            p={3}
-            border="1px solid"
-            borderColor="red.200"
-            borderRadius="md"
-            bg="white"
-          >
+          <Box w="100%" p={3} border="1px solid" borderColor="red.200" borderRadius="md" bg="white">
             <Text fontSize="xs" color="gray.500" mb={1}>
               Error
             </Text>
@@ -50,4 +43,4 @@ export function ErrorWidget({ error }: ErrorWidgetProps) {
       </Box>
     </Flex>
   );
-}
+}

frontend/src/components/Dashboard/Widgets/MosaicWidgetContext.tsx

@@ -12,4 +12,4 @@ export function useMosaicWidget(): WidgetConfig {
   return ctx;
 }
 
-export { MosaicWidgetContext };
+export { MosaicWidgetContext };

frontend/src/components/WidgetCustomize/StoreDataPanel.tsx

@@ -155,4 +155,4 @@ export function StoreDataPanel({
       )}
     </VStack>
   );
-}
+}

frontend/src/components/WidgetCustomize/WidgetConfigPanel.tsx

@@ -34,4 +34,4 @@ export function WidgetConfigPanel({ widgetConfig }: WidgetConfigPanelProps) {
       </Box>
     </Box>
   );
-}
+}

frontend/src/widgets/JsonViewerWidget/JsonViewerSetting.tsx

@@ -1,8 +1,8 @@
 import { VStack, Text } from "@chakra-ui/react";
 import { Controller, useForm } from "react-hook-form";
 
-import { MosaicWidget } from "@/components/Dashboard/Widgets/WidgetComponents.tsx";
 import { useMosaicWidget } from "@/components/Dashboard/Widgets/MosaicWidgetContext.tsx";
+import { MosaicWidget } from "@/components/Dashboard/Widgets/WidgetComponents.tsx";
 import { Checkbox } from "@/components/ui/checkbox.tsx";
 import { Field } from "@/components/ui/field.tsx";
 

frontend/src/widgets/MediaViewerWidget/MediaViewerSetting.tsx

@@ -1,8 +1,8 @@
 import { VStack, Text } from "@chakra-ui/react";
 import { Controller, useForm } from "react-hook-form";
 
-import { MosaicWidget } from "@/components/Dashboard/Widgets/WidgetComponents.tsx";
 import { useMosaicWidget } from "@/components/Dashboard/Widgets/MosaicWidgetContext.tsx";
+import { MosaicWidget } from "@/components/Dashboard/Widgets/WidgetComponents.tsx";
 import { Checkbox } from "@/components/ui/checkbox.tsx";
 import { Field } from "@/components/ui/field.tsx";
 
@@ -31,11 +31,7 @@ export function MediaViewerSetting() {
     <MosaicWidget.SettingDialog useFormReturn={useFormReturn}>
       <Text mb={4}>Media Viewer Settings</Text>
       <VStack gap={4} align="start">
-        <Field
-          invalid={!!errors.flipH}
-          errorText={errors.flipH?.message}
-          label="Flip Horizontal"
-        >
+        <Field invalid={!!errors.flipH} errorText={errors.flipH?.message} label="Flip Horizontal">
           <Controller
             name="flipH"
             control={control}
@@ -49,11 +45,7 @@ export function MediaViewerSetting() {
             )}
           />
         </Field>
-        <Field
-          invalid={!!errors.flipV}
-          errorText={errors.flipV?.message}
-          label="Flip Vertical"
-        >
+        <Field invalid={!!errors.flipV} errorText={errors.flipV?.message} label="Flip Vertical">
           <Controller
             name="flipV"
             control={control}
@@ -70,4 +62,4 @@ export function MediaViewerSetting() {
       </VStack>
     </MosaicWidget.SettingDialog>
   );
-}
+}

frontend/src/widgets/MediaViewerWidget/MediaViewerWidget.tsx

@@ -135,7 +135,13 @@ export default function MediaViewerWidget({ widgetConfig }: WidgetProps) {
       </MosaicWidget.Header>
       <MosaicWidget.Body>
         {error ? (
-          <Flex direction="column" align="center" justify="center" color="red.500" textAlign="center">
+          <Flex
+            direction="column"
+            align="center"
+            justify="center"
+            color="red.500"
+            textAlign="center"
+          >
             <Box fontSize="2xl" mb={2}>
               ⚠️
             </Box>
@@ -193,4 +199,4 @@ export default function MediaViewerWidget({ widgetConfig }: WidgetProps) {
       </MosaicWidget.Body>
     </MosaicWidget.Root>
   );
-}
+}

frontend/src/widgets/MediaViewerWidget/WidgetDescriptor.ts

@@ -18,4 +18,4 @@ export default class MediaViewerWidgetDescriptor extends WidgetDescriptor {
   public validateParams(_params: Record<string, any>): string | null {
     return null;
   }
-}
+}