Advertisement
KDLPro

ERROR Error: Value is undefined, expected an Object, js engine: hermes

Nov 28th, 2024
29
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { SafeAreaView, Text, View } from 'react-native'
  2. import { useEffect, useState } from 'react'
  3. import { Camera, useCameraDevice, useSkiaFrameProcessor } from 'react-native-vision-camera'
  4. import { useTensorflowModel } from 'react-native-fast-tflite'
  5. import { useResizePlugin } from 'vision-camera-resize-plugin'
  6. import { Skia } from '@shopify/react-native-skia'
  7.  
  8. export default function Classify() {
  9.     // Request camera permissions
  10.     const [hasPermission, setHasPermission] = useState(false);
  11.  
  12.     // Frame processor loading
  13.     const [frameProcLoading, setFrameProcLoading] = useState(true);
  14.  
  15.     const getPermissions = async () => {
  16.         const cameraPermission = await Camera.requestCameraPermission();
  17.         setHasPermission(cameraPermission === "granted");
  18.     };
  19.  
  20.     useEffect(() => {
  21.         getPermissions();
  22.     }, []);
  23.  
  24.     const device = useCameraDevice("back");             // back camera for scanning abaca fibers
  25.  
  26.     // Load abaca fiber model
  27.     const abacaModel = useTensorflowModel(require("../../../assets/models/November-23.tflite"));
  28.     const model = abacaModel.state === "loaded" ? abacaModel.model : undefined;
  29.  
  30.     console.log("Model state:", abacaModel.state);
  31.  
  32.     if (abacaModel.state === "error") {
  33.         console.error("Error loading model:", abacaModel.error);
  34.     }
  35.  
  36.     const { resize } = useResizePlugin();
  37.  
  38.     const frameProcessor = useSkiaFrameProcessor((frame) => {
  39.         "worklet"
  40.         if (model == "null") return ;
  41.  
  42.         // 1. Resize 4k Frame to 192x192x3 using vision-camera-resize-plugin
  43.         const resized = resize(frame, {
  44.             scale: {
  45.                 width: 192,
  46.                 height: 192
  47.             },
  48.             pixelFormat: "rgb",
  49.             dataType: "uint8"
  50.         });
  51.  
  52.         // 2. Run model with given input buffer synchronously
  53.         const outputs = model.runSync([resized]);
  54.  
  55.         // 3. Interpret outputs accordingly
  56.         const detection_boxes = outputs[0];
  57.         const detection_classes = outputs[1];
  58.         const detection_scores = outputs[2];
  59.         const num_detections = outputs[3];
  60.  
  61.         for (let i = 0; i < detection_boxes.length; i += 4){
  62.             const confidence = detection_scores[i / 4]
  63.             if (confidence > 0.7) {
  64.                 // 4. Draw a red box around the detected object!
  65.                 const left = detection_boxes[i];
  66.                 const top = detection_boxes[i + 1];
  67.                 const right = detection_boxes[i + 2];
  68.                 const bottom = detection_boxes[i + 3];
  69.                 const centerX = (left + right) / 2;
  70.                 const centerY = (top + bottom) / 2;
  71.                 const rect = Skia.XYWHRect(centerX, centerY, top, bottom);
  72.                 const paint = Skia.Paint();
  73.                 paint.setColor(Skia.Color('red'));
  74.                 frame.drawRect(rect, paint);
  75.             }
  76.         }
  77.     }, [model]);
  78.  
  79.     useEffect(() => {
  80.         setFrameProcLoading(false);
  81.     }, [frameProcessor]);
  82.  
  83.     if (!frameProcLoading){
  84.         return (
  85.             <SafeAreaView className="bg-primary dark:bg-dark_primary-default h-full">
  86.                 <View className="flex-1 justify-center m-auto h-4/5 w-5/6">
  87.                     <Text className="pt-2 text-lg text-black-default dark:text-gray-50 font-smedium text-center">
  88.                         Place an abaca fiber near the camera to scan its grade!
  89.                     </Text>
  90.                     <Camera className="h-4/5 flex-1" device={device} isActive={true} frameProcessor={frameProcLoading} />
  91.                 </View>
  92.             </SafeAreaView>
  93.         );
  94.     }
  95.  
  96.     return (
  97.         <SafeAreaView className="bg-primary dark:bg-dark_primary-default h-full">
  98.             <View className="flex-1 justify-center m-auto h-4/5 w-5/6">
  99.                 <Text className="pt-2 text-lg text-black-default dark:text-gray-50 font-smedium text-center">
  100.                     Loading abaca fiber classification model... Please wait.
  101.                 </Text>
  102.                 <Camera className="h-4/5 flex-1" device={device} isActive={true} />
  103.             </View>
  104.         </SafeAreaView>
  105.     );
  106. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement