COMPONENT/ADD:

  PoseEstimationRecognition

PAGE/ADD:
  PoseEstimation

COMPONENT/UPDATE:
  Recognition (change name to ObjectDetectionRecognition, RECOGNITION type to OBJECT_DETECTED)

Author: kastorcode

src/components/Recognition/index.tsx renamed to src/components/ObjectDetectionRecognition/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Text, useWindowDimensions, View } from 'react-native'
 
 
-export type RECOGNITION = {
+export type OBJECT_DETECTED = {
   detectedClass : string,
   confidenceInClass : number,
   rect : {
@@ -13,12 +13,12 @@ export type RECOGNITION = {
   }
 }
 
-interface iRECOGNITION_PROPS {
-  recognition : RECOGNITION[]
+interface iOBJECT_DETECTION_PROPS {
+  recognition : OBJECT_DETECTED[]
 }
 
 
-function Recognition ({ recognition } : iRECOGNITION_PROPS) {
+function ObjectDetectionRecognition ({ recognition } : iOBJECT_DETECTION_PROPS) {
   const { width, height } = useWindowDimensions()
   const isPortrait = height >= width
 
@@ -60,4 +60,4 @@ function Recognition ({ recognition } : iRECOGNITION_PROPS) {
 }
 
 
-export default Recognition
+export default ObjectDetectionRecognition

src/components/PoseEstimationRecognition/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { Text, useWindowDimensions, View } from 'react-native'
+
+
+export type POSE = {
+  score : number,
+  keypoints : {
+    [key : number] : {
+      x : number,
+      y : number,
+      part : string,
+      score : number
+    }
+  }
+}
+
+interface iPOSE_ESTIMATION_RECOGNITION_PROPS {
+  recognition : POSE[]
+}
+
+
+function PoseEstimationRecognition ({ recognition } : iPOSE_ESTIMATION_RECOGNITION_PROPS) {
+  const { width, height } = useWindowDimensions()
+  const isPortrait = height >= width
+
+
+  return recognition.map(response => {
+    return Object.values(response.keypoints).map(({ x, y, part }, key) => {
+      let left, top
+      top = y * 100 + '%'
+      if (isPortrait) {
+        left = x * 90 + '%'
+      }
+      else {
+        left = x * 93 + '%'
+      }
+
+
+      return (
+        <View
+          key={key}
+          style={{
+            position: 'absolute', left, top
+          }}
+        >
+          <Text
+            style={{
+              color: '#ff033e', fontSize: 14, fontWeight: 'bold'
+            }}
+          >
+            { '.' + part }
+          </Text>
+        </View>
+      )
+    })
+  })
+}
+
+
+export default PoseEstimationRecognition

src/components/index.ts

@@ -3,7 +3,8 @@ import Button from './Button'
 import ButtonContainer from './ButtonContainer'
 import CameraNotAuthorized from './CameraNotAuthorized'
 import ImagePreview from './ImagePreview'
-import Recognition from './Recognition'
+import ObjectDetectionRecognition from './ObjectDetectionRecognition'
+import PoseEstimationRecognition from './PoseEstimationRecognition'
 import Result from './Result'
 import Title from './Title'
 
@@ -14,7 +15,8 @@ export {
   ButtonContainer,
   CameraNotAuthorized,
   ImagePreview,
-  Recognition,
+  ObjectDetectionRecognition,
+  PoseEstimationRecognition,
   Result,
   Title
 }

src/pages/ObjectDetection/index.tsx

@@ -5,9 +5,11 @@ import Tflite from 'tflite-react-native'
 
 import { ChooseFile, TakePicture, Translate } from '~/services'
 
-import { Button, ButtonContainer, ImagePreview, Recognition, Title } from '~/components'
+import {
+  Button, ButtonContainer, ImagePreview, ObjectDetectionRecognition, Title
+} from '~/components'
 
-import { RECOGNITION } from '~/components/Recognition'
+import { OBJECT_DETECTED } from '~/components/ObjectDetectionRecognition'
 
 
 type MODELS = {
@@ -22,7 +24,7 @@ const tflite = new Tflite()
 function ObjectDetection () {
   const [chosenModel, setChosenModel] = useState<keyof MODELS | null>(null)
   const [fileUri, setFileUri] = useState('')
-  const [recognition, setRecognition] = useState<RECOGNITION[]>([])
+  const [recognition, setRecognition] = useState<OBJECT_DETECTED[] | null>(null)
 
 
   const loadModel : MODELS = {
@@ -58,7 +60,7 @@ function ObjectDetection () {
         threshold: 0.3,
         numResultsPerClass: 2
       },
-      (error : string, response : RECOGNITION[]) => {
+      (error : string, response : OBJECT_DETECTED[]) => {
         if (error) {
           Alert.alert(Translate('error'), Translate('errorProcessingTflite'))
           return
@@ -73,7 +75,7 @@ function ObjectDetection () {
         threshold: 0.3,
         numResultsPerClass: 2
       },
-      (error : string, response : RECOGNITION[]) => {
+      (error : string, response : OBJECT_DETECTED[]) => {
         if (error) {
           Alert.alert(Translate('error'), Translate('errorProcessingTflite'))
           return
@@ -134,7 +136,7 @@ function ObjectDetection () {
     <Title text='pickImagesCG' />
     <ImagePreview uri={fileUri}>
       { /* @ts-ignore */ recognition && (
-        <Recognition recognition={recognition} />
+        <ObjectDetectionRecognition recognition={recognition} />
       ) }
     </ImagePreview>
     <ButtonContainer style={{ width: '60%', maxWidth: 300 }}>

src/pages/PoseEstimation/index.tsx

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react'
+import { Alert } from 'react-native'
+// @ts-ignore
+import Tflite from 'tflite-react-native'
+
+import { ChooseFile, TakePicture, Translate } from '~/services'
+
+import {
+  Button, ButtonContainer, ImagePreview, PoseEstimationRecognition, Title
+} from '~/components'
+
+import { POSE } from '~/components/PoseEstimationRecognition'
+
+
+const tflite = new Tflite()
+
+
+function PoseEstimation () {
+  const [fileUri, setFileUri] = useState('')
+  const [recognition, setRecognition] = useState<POSE[] | null>(null)
+
+
+  function loadModel () {
+    tflite.loadModel({
+      model: 'models/posenet.tflite',
+      numThreads: 1
+    },
+    (error : string) => {
+      if (error) {
+        Alert.alert(Translate('error'), Translate('errorLoadModel'))
+      }
+    })
+  }
+
+
+  function performPoseEstimation () {
+    tflite.runPoseNetOnImage({
+      path: fileUri,
+      imageMean: 127.5,
+      imageStd: 127.5,
+      numResults: 3,
+      threshold: 0.8,
+      nmsRadius: 20
+    },
+    (error : string, response : POSE[]) => {
+      if (error) {
+        Alert.alert(Translate('error'), Translate('errorProcessingTflite'))
+        return
+      }
+      setRecognition(response)
+    })
+  }
+
+
+  useEffect(() => {
+    if (fileUri) {
+      performPoseEstimation()
+    }
+  }, [fileUri])
+
+
+  useEffect(() => {
+    loadModel()
+
+    return () => {
+      tflite.close()
+    }
+  }, [])
+
+
+  return (
+    <>
+    <Title text='pickImagesCG' />
+    <ImagePreview uri={fileUri}>
+      { /* @ts-ignore */ recognition && (
+        <PoseEstimationRecognition recognition={recognition} />
+      ) }
+    </ImagePreview>
+    <ButtonContainer style={{ width: '60%', maxWidth: 300 }}>
+      <Button onPress={() => ChooseFile(setFileUri)} text='chooseFile' />
+      <Button onPress={() => TakePicture(setFileUri)} text='takePicture' />
+    </ButtonContainer>
+    </>
+  )
+}
+
+
+export default PoseEstimation

src/pages/index.ts

@@ -5,6 +5,7 @@ import ImageClassification from './ImageClassification'
 import ImageClassificationLiveFeed from './ImageClassificationLiveFeed'
 import ImageSegmentation from './ImageSegmentation'
 import ObjectDetection from './ObjectDetection'
+import PoseEstimation from './PoseEstimation'
 
 
 export interface iPAGES_PROPS {
@@ -20,7 +21,8 @@ export interface iPAGES {
   ImageClassification : PAGE,
   ImageClassificationLiveFeed : PAGE,
   ImageSegmentation : PAGE,
-  ObjectDetection : PAGE
+  ObjectDetection : PAGE,
+  PoseEstimation : PAGE
 }
 
 
@@ -30,7 +32,8 @@ const PAGES : iPAGES = {
   ImageClassification,
   ImageClassificationLiveFeed,
   ImageSegmentation,
-  ObjectDetection
+  ObjectDetection,
+  PoseEstimation
 }
 
 

src/services/Translate/en-US.ts

@@ -24,7 +24,8 @@ const EN_US : TRANSLATE = {
   ImageClassification: 'Image Classification',
   ImageClassificationLiveFeed: 'Image Classification Live',
   ImageSegmentation: 'Image Segmentation',
-  ObjectDetection: 'Object Detection'
+  ObjectDetection: 'Object Detection',
+  PoseEstimation: 'Pose Estimation'
 }
 
 

src/services/Translate/es-ES.ts

@@ -24,7 +24,8 @@ const ES_ES : TRANSLATE = {
   ImageClassification: 'Clasificación de Imagen',
   ImageClassificationLiveFeed: 'Clasificación de Imagen En Vivo',
   ImageSegmentation: 'Segmentación de Imagen',
-  ObjectDetection: 'Detección de Objetos'
+  ObjectDetection: 'Detección de Objetos',
+  PoseEstimation: 'Estimación de Pose'
 }
 
 

src/services/Translate/pt-BR.ts

@@ -24,7 +24,8 @@ const PT_BR : TRANSLATE = {
   ImageClassification: 'Classificação de Imagem',
   ImageClassificationLiveFeed: 'Classificação de Imagem Ao Vivo',
   ImageSegmentation: 'Segmentação de Imagem',
-  ObjectDetection: 'Detecção de Objetos'
+  ObjectDetection: 'Detecção de Objetos',
+  PoseEstimation: 'Estimativa de Pose'
 }
 
 

src/services/Translate/types.ts

@@ -22,5 +22,6 @@ export type TRANSLATE = {
   ImageClassification : string,
   ImageClassificationLiveFeed : string,
   ImageSegmentation : string,
-  ObjectDetection : string
+  ObjectDetection : string,
+  PoseEstimation : string
 }