Show or not Result components in pages

PAGE/ADD:
  ImageSegmentation

COMPONENT/UPDATE:
  ImagePreview (add children and style props, increase min height, add margin bottom, change resize mode to contain)
  Result (add margin top and margin bottom)

Author: kastorcode

src/components/ImagePreview/index.tsx

@@ -1,29 +1,33 @@
 import React from 'react'
-import { Image, View } from 'react-native'
+import { Image, StyleProp, View, ViewStyle } from 'react-native'
 
 
 interface iIMAGE_PREVIEW {
+  children ?: JSX.Element | JSX.Element[] | null,
+  style ?: StyleProp<ViewStyle>,
   uri : string
 }
 
 
-function ImagePreview ({ uri } : iIMAGE_PREVIEW) {
+function ImagePreview ({ children, style, uri } : iIMAGE_PREVIEW) {
   return (
     <View
-      style={{
+      style={[{
         width: '90%', height: '50%', maxWidth: 600,
-        minHeight: 300, alignItems: 'center', justifyContent: 'center',
-        backgroundColor: 'rgba(0,0,0,0.2)'
-      }}
+        minHeight: 350, alignItems: 'center', justifyContent: 'center',
+        marginBottom: 20, backgroundColor: 'rgba(0,0,0,0.2)'
+      }, style]}
     >
       { uri && (
         <Image
           source={{ uri }}
           style={{
-            resizeMode: 'center', width: '100%', height: '100%'
+            resizeMode: 'contain', width: '96%', height: '96%'
           }}
         />
       ) }
+
+      { children && children }
     </View>
   )
 }

src/components/Result/index.tsx

@@ -13,7 +13,7 @@ function Result ({ result, style } : iRESULT_PROPS) {
     <Text
       style={[{
         color: '#fff', fontSize: 18, lineHeight: 26,
-        textAlign: 'center', marginVertical: 40
+        textAlign: 'center', marginTop: 20, marginBottom: 40
       }, style]}
     >
       { result }

src/pages/FruitRecognition/index.tsx

@@ -79,7 +79,9 @@ function FruitRecognition () {
     <>
     <Title text='pickImagesCG' />
     <ImagePreview uri={fileUri} />
-    <Result result={result} />
+    { result && (
+      <Result result={result} />
+    ) }
     <ButtonContainer style={{ width: '60%', maxWidth: 300 }}>
       <Button onPress={() => ChooseFile(setFileUri)} text='chooseFile' />
       <Button onPress={() => TakePicture(setFileUri)} text='takePicture' />

src/pages/ImageClassification/index.tsx

@@ -79,7 +79,9 @@ function ImageClassification () {
     <>
     <Title text='pickImagesCG' />
     <ImagePreview uri={fileUri} />
-    <Result result={result} />
+    { result && (
+      <Result result={result} />
+    ) }
     <ButtonContainer style={{ width: '60%', maxWidth: 300 }}>
       <Button onPress={() => ChooseFile(setFileUri)} text='chooseFile' />
       <Button onPress={() => TakePicture(setFileUri)} text='takePicture' />

src/pages/ImageSegmentation/index.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react'
+import { Alert, Image } from 'react-native'
+// @ts-ignore
+import Tflite from 'tflite-react-native'
+
+import { ChooseFile, TakePicture, Translate } from '~/services'
+
+import { Button, ButtonContainer, ImagePreview, Title } from '~/components'
+
+
+const tflite = new Tflite()
+
+
+function ImageSegmentation () {
+  const [fileUri, setFileUri] = useState('')
+  const [recognitions, setRecognitions] = useState('')
+
+
+  function loadModel () {
+    tflite.loadModel({
+      model: 'models/deeplabv3_257_mv_gpu.tflite',
+      labels: 'models/deeplabv3_257_mv_gpu.txt',
+      numThreads: 1
+    },
+    (error : string) => {
+      if (error) {
+        Alert.alert(Translate('error'), Translate('errorLoadModel'))
+      }
+    })
+  }
+
+
+  function performImageSegmentation () {
+    tflite.runSegmentationOnImage({
+      path: fileUri,
+      imageMean: 127.5,
+      imageStd: 127.5,
+      outputType: 'png'
+    },
+    (error : string, response : string) => {
+      if (error) {
+        Alert.alert(Translate('error'), Translate('errorProcessingTflite'))
+        return
+      }
+      setRecognitions(response)
+    })
+  }
+
+
+  useEffect(() => {
+    if (fileUri) {
+      performImageSegmentation()
+    }
+  }, [fileUri])
+
+
+  useEffect(() => {
+    loadModel()
+
+    return () => {
+      tflite.close()
+    }
+  }, [])
+
+
+  return (
+    <>
+    <Title text='pickImagesCG' />
+    <ImagePreview uri={fileUri}>
+      { /* @ts-ignore */ }
+      { recognitions && (
+        <Image
+          source={{ uri: 'data:image/png;base64,' + recognitions }}
+          style={{
+            resizeMode: 'contain', width: '96%', height: '96%',
+            position: 'absolute', opacity: 0.5
+          }}
+        />
+      ) }
+    </ImagePreview>
+    <ButtonContainer style={{ width: '60%', maxWidth: 300 }}>
+      <Button onPress={() => ChooseFile(setFileUri)} text='chooseFile' />
+      <Button onPress={() => TakePicture(setFileUri)} text='takePicture' />
+    </ButtonContainer>
+    </>
+  )
+}
+
+
+export default ImageSegmentation

src/pages/index.ts

@@ -3,6 +3,7 @@ import FruitRecognitionLiveFeed from './FruitRecognitionLiveFeed'
 import { NAVIGATE } from './Home'
 import ImageClassification from './ImageClassification'
 import ImageClassificationLiveFeed from './ImageClassificationLiveFeed'
+import ImageSegmentation from './ImageSegmentation'
 
 
 export interface iPAGES_PROPS {
@@ -16,15 +17,17 @@ export interface iPAGES {
   FruitRecognition : PAGE,
   FruitRecognitionLiveFeed : PAGE,
   ImageClassification : PAGE,
-  ImageClassificationLiveFeed : PAGE
+  ImageClassificationLiveFeed : PAGE,
+  ImageSegmentation : PAGE
 }
 
 
 const PAGES : iPAGES = {
   FruitRecognition,
   FruitRecognitionLiveFeed,
   ImageClassification,
-  ImageClassificationLiveFeed
+  ImageClassificationLiveFeed,
+  ImageSegmentation
 }
 
 

src/services/Translate/en-US.ts

@@ -21,7 +21,8 @@ const EN_US : TRANSLATE = {
   FruitRecognitionLiveFeed: 'Fruit Recognition Live',
   Home: 'Home',
   ImageClassification: 'Image Classification',
-  ImageClassificationLiveFeed: 'Image Classification Live'
+  ImageClassificationLiveFeed: 'Image Classification Live',
+  ImageSegmentation: 'Image Segmentation'
 }
 
 

src/services/Translate/es-ES.ts

@@ -21,7 +21,8 @@ const ES_ES : TRANSLATE = {
   FruitRecognitionLiveFeed: 'Reconocimiento de Frutas En Vivo',
   Home: 'Home',
   ImageClassification: 'Clasificación de Imagen',
-  ImageClassificationLiveFeed: 'Clasificación de Imagen En Vivo'
+  ImageClassificationLiveFeed: 'Clasificación de Imagen En Vivo',
+  ImageSegmentation: 'Segmentación de Imagen'
 }
 
 

src/services/Translate/pt-BR.ts

@@ -21,7 +21,8 @@ const PT_BR : TRANSLATE = {
   FruitRecognitionLiveFeed: 'Reconhecimento de Frutas Ao Vivo',
   Home: 'Home',
   ImageClassification: 'Classificação de Imagem',
-  ImageClassificationLiveFeed: 'Classificação de Imagem Ao Vivo'
+  ImageClassificationLiveFeed: 'Classificação de Imagem Ao Vivo',
+  ImageSegmentation: 'Segmentação de Imagem'
 }
 
 

src/services/Translate/types.ts

@@ -19,5 +19,6 @@ export type TRANSLATE = {
   FruitRecognitionLiveFeed : string,
   Home : string,
   ImageClassification : string,
-  ImageClassificationLiveFeed : string
+  ImageClassificationLiveFeed : string,
+  ImageSegmentation : string
 }