Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { SafeAreaView, Text, View } from 'react-native'
- import { useEffect, useState } from 'react'
- import { Camera, useCameraDevice, useSkiaFrameProcessor } from 'react-native-vision-camera'
- import { useTensorflowModel } from 'react-native-fast-tflite'
- import { useResizePlugin } from 'vision-camera-resize-plugin'
- import { Skia } from '@shopify/react-native-skia'
- export default function Classify() {
- // Request camera permissions
- const [hasPermission, setHasPermission] = useState(false);
- // Frame processor loading
- const [frameProcLoading, setFrameProcLoading] = useState(true);
- const getPermissions = async () => {
- const cameraPermission = await Camera.requestCameraPermission();
- setHasPermission(cameraPermission === "granted");
- };
- useEffect(() => {
- getPermissions();
- }, []);
- const device = useCameraDevice("back"); // back camera for scanning abaca fibers
- // Load abaca fiber model
- const abacaModel = useTensorflowModel(require("../../../assets/models/November-23.tflite"));
- const model = abacaModel.state === "loaded" ? abacaModel.model : undefined;
- console.log("Model state:", abacaModel.state);
- if (abacaModel.state === "error") {
- console.error("Error loading model:", abacaModel.error);
- }
- const { resize } = useResizePlugin();
- const frameProcessor = useSkiaFrameProcessor((frame) => {
- "worklet"
- if (model == "null") return ;
- // 1. Resize 4k Frame to 192x192x3 using vision-camera-resize-plugin
- const resized = resize(frame, {
- scale: {
- width: 192,
- height: 192
- },
- pixelFormat: "rgb",
- dataType: "uint8"
- });
- // 2. Run model with given input buffer synchronously
- const outputs = model.runSync([resized]);
- // 3. Interpret outputs accordingly
- const detection_boxes = outputs[0];
- const detection_classes = outputs[1];
- const detection_scores = outputs[2];
- const num_detections = outputs[3];
- for (let i = 0; i < detection_boxes.length; i += 4){
- const confidence = detection_scores[i / 4]
- if (confidence > 0.7) {
- // 4. Draw a red box around the detected object!
- const left = detection_boxes[i];
- const top = detection_boxes[i + 1];
- const right = detection_boxes[i + 2];
- const bottom = detection_boxes[i + 3];
- const centerX = (left + right) / 2;
- const centerY = (top + bottom) / 2;
- const rect = Skia.XYWHRect(centerX, centerY, top, bottom);
- const paint = Skia.Paint();
- paint.setColor(Skia.Color('red'));
- frame.drawRect(rect, paint);
- }
- }
- }, [model]);
- useEffect(() => {
- setFrameProcLoading(false);
- }, [frameProcessor]);
- if (!frameProcLoading){
- return (
- <SafeAreaView className="bg-primary dark:bg-dark_primary-default h-full">
- <View className="flex-1 justify-center m-auto h-4/5 w-5/6">
- <Text className="pt-2 text-lg text-black-default dark:text-gray-50 font-smedium text-center">
- Place an abaca fiber near the camera to scan its grade!
- </Text>
- <Camera className="h-4/5 flex-1" device={device} isActive={true} frameProcessor={frameProcLoading} />
- </View>
- </SafeAreaView>
- );
- }
- return (
- <SafeAreaView className="bg-primary dark:bg-dark_primary-default h-full">
- <View className="flex-1 justify-center m-auto h-4/5 w-5/6">
- <Text className="pt-2 text-lg text-black-default dark:text-gray-50 font-smedium text-center">
- Loading abaca fiber classification model... Please wait.
- </Text>
- <Camera className="h-4/5 flex-1" device={device} isActive={true} />
- </View>
- </SafeAreaView>
- );
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement