CODEWITHSUNDEEP
javascriptcssreactjsreact-nativetensorflow.js
yudhiesh
yudhiesh

Reputation: 6809

Unable to draw bounding box on detected face in React-Native

I am trying to draw bounding boxes on a face but there is some issue with the CSS which shows the following error :

[269,"RCTView",281,{"position":"absolute","borderWidth":2,"borderColor":-65536,"left":"<<NaN>>","top":"<<NaN>>","width":"<<NaN>>","height":"<<NaN>>"}] is not usable as a native method argument

Style for bounding box where the error is coming from:

  bbox: {
    position: "absolute",
    borderWidth: 2,
    borderColor: "red"
  },

Function to render the Bounding Box on face:

  const previewLeft = 40;
  const previewTop = 50;
  const previewWidth = 350;
  const previewHeight = 600;
  const tensorDims = { height: 224, width: 224, depth: 3 };


  const renderBoundingBoxes = () => {
    const { faces } = modelFaces;
    const tensorDims = { height: 300, width: 400 };
    const scale = {
      height: styles.camera.height / tensorDims.height,
      width: styles.camera.width / tensorDims.width
    };
    const flipHorizontal = Platform.OS === "ios" ? false : true;
    if (!isEmpty(faces)) {
      return faces.map((face, i) => {
        const { topLeft, bottomRight } = face;
        const bbLeft = topLeft[0] * scale.width;
        const boxStyle = Object.assign({}, styles.bbox, {
          left: flipHorizontal
            ? previewWidth - bbLeft - previewLeft
            : bbLeft + previewLeft,
          top: topLeft[1] * scale.height + 20,
          width: (bottomRight[0] - topLeft[0]) * scale.width,
          height: (bottomRight[1] - topLeft[1]) * scale.height
        });

        return <View style={boxStyle} key={`face${i}`}></View>;
        1;
      });
    }
  };

RenderBoundingBoxes being called:

    <View>
      <TensorCamera
        style={styles.camera}
        type={type}
        cameraTextureHeight={textureDims.height}
        cameraTextureWidth={textureDims.width}
        resizeHeight={tensorDims.height}
        resizeWidth={tensorDims.width}
        resizeDepth={tensorDims.depth}
        onReady={images => handleCameraStream(images)}
        autorender={AUTORENDER}
      />
      {renderBoundingBoxes()}
   </View>

Upvotes: 0

Views: 907

Answers (1)

yudhiesh
yudhiesh

Reputation: 6809

I made a mistake, bottomRight and topLeft are not arrays but tensor objects instead. I needed to download the tensors using tf.dataSync() first then access the arrays within them:

  const renderBoundingBoxes = () => {
    const { faces } = modelFaces;
    const scale = {
      height: styles.camera.height / tensorDims.height,
      width: styles.camera.width / tensorDims.width
    };
    const flipHorizontal = Platform.OS === "ios" ? false : true;
    if (!isEmpty(faces)) {
      return faces.map((face, i) => {
        const { topLeft, bottomRight } = face;
        const bbLeft = topLeft.dataSync()[0] * scale.width;
        const boxStyle = Object.assign({}, styles.bbox, {
          left: flipHorizontal
            ? previewWidth - bbLeft - previewLeft
            : bbLeft + previewLeft,
          top: topLeft.dataSync()[1] * scale.height + 20,
          width:
            (bottomRight.dataSync()[0] - topLeft.dataSync()[0]) * scale.width,
          height:
            (bottomRight.dataSync()[1] - topLeft.dataSync()[1]) * scale.height
        });

        return <View style={boxStyle}></View>;
        1;
      });
    }
  };

Upvotes: 1

Related Questions