COMPONENT/ADD:

  CameraNotAuthorized

PAGE/ADD:
  ImageClassificationLiveFeed

SERVICE/ADD:
  ProcessOutputLiveFeed

PAGE/UPDATE:
  FruitRecognitionLiveFeed (refactor moving code to ProcessOutputLiveFeed and CameraNotAuthorized)

Author: kastorcode

src/components/CameraNotAuthorized/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { NAVIGATE } from '~/pages/Home'
+
+import { Button, ButtonContainer, Title } from '~/components'
+
+
+interface iCAMERA_NOT_AUTHORIZED_PROPS {
+  navigate : NAVIGATE
+}
+
+
+function CameraNotAuthorized ({ navigate } : iCAMERA_NOT_AUTHORIZED_PROPS) {
+  return (
+    <>
+    <Title text='error' />
+    <Title text='needPermissionCamera' />
+    <ButtonContainer style={{ width: '60%', maxWidth: 300 }}>
+      <Button onPress={() => navigate('Home')} text='Home' />
+    </ButtonContainer>
+    </>
+  )
+}
+
+
+export default CameraNotAuthorized

src/components/index.ts

@@ -1,6 +1,7 @@
 import Background from './Background'
 import Button from './Button'
 import ButtonContainer from './ButtonContainer'
+import CameraNotAuthorized from './CameraNotAuthorized'
 import ImagePreview from './ImagePreview'
 import Result from './Result'
 import Title from './Title'
@@ -10,6 +11,7 @@ export {
   Background,
   Button,
   ButtonContainer,
+  CameraNotAuthorized,
   ImagePreview,
   Result,
   Title

src/pages/FruitRecognitionLiveFeed/index.tsx

@@ -1,19 +1,15 @@
 import React, { useState } from 'react'
-import { RNCamera, TrackedTextFeature } from 'react-native-camera-tflite'
-import _ from 'lodash'
+import { RNCamera } from 'react-native-camera-tflite'
 
 import { iPAGES_PROPS } from '~/pages'
 
-import { Translate } from '~/services'
+import { ProcessOutputLiveFeed, Translate } from '~/services'
 
-import { Button, ButtonContainer, Result, Title } from '~/components'
+import { CameraNotAuthorized, Result } from '~/components'
 
 import OUTPUTS from './outputs.json'
 
 
-let _currentInstant = 0
-
-
 function FruitRecognitionLiveFeed ({ navigate } : iPAGES_PROPS) {
   const [output, setOutput] = useState('')
 
@@ -26,43 +22,17 @@ function FruitRecognitionLiveFeed ({ navigate } : iPAGES_PROPS) {
   }
 
 
-  function processOutput ({ data } : { data : { textBlocks : TrackedTextFeature[] }}) {
-    // @ts-ignore
-    const probs = _.map(data, item => _.round(item / 255.0, 0.02))
-    // @ts-ignore
-    const orderedData = _.chain(data).zip(OUTPUTS).orderBy(0, 'desc').map(item => [_.round(item[0] / 255.0, 2), item[1]]).value()
-    const outputData = _.chain(orderedData).take(3).map(item => `${item[1]}: ${(item[0] * 100).toFixed(0)}%`).join('\n').value()
-    const time = Date.now() - (_currentInstant || Date.now())
-    const output = `Guesses:\n\n${outputData}\n\nTime: ${time} ms`
-    setOutput(output)
-    _currentInstant = Date.now()
-  }
-
-
-  function NotAuthorizedView () {
-    return (
-      <>
-      <Title text='error' />
-      <Title text='needPermissionCamera' />
-      <ButtonContainer style={{ width: '60%', maxWidth: 300 }}>
-        <Button onPress={() => navigate('Home')} text='Home' />
-      </ButtonContainer>
-      </>
-    )
-  }
-
-
   return (
     <RNCamera
       type={RNCamera.Constants.Type.back}
       flashMode={RNCamera.Constants.FlashMode.on}
       permissionDialogTitle={Translate('permissionCamera')}
       permissionDialogMessage={Translate('needPermissionCamera')}
       // @ts-ignore
-      onModelProcessed={processOutput}
+      onModelProcessed={data => ProcessOutputLiveFeed(data, OUTPUTS, setOutput)}
       // @ts-ignore
       modelParams={modelParams}
-      notAuthorizedView={<NotAuthorizedView />}
+      notAuthorizedView={<CameraNotAuthorized navigate={navigate} />}
       style={{
         width: '100%', height: '100%', alignItems: 'center',
         justifyContent: 'center'

src/pages/ImageClassificationLiveFeed/index.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import { RNCamera } from 'react-native-camera-tflite'
+
+import { iPAGES_PROPS } from '~/pages'
+
+import { ProcessOutputLiveFeed, Translate } from '~/services'
+
+import { CameraNotAuthorized, Result } from '~/components'
+
+import OUTPUTS from './outputs.json'
+
+
+function ImageClassificationLiveFeed ({ navigate } : iPAGES_PROPS) {
+  const [output, setOutput] = useState('')
+
+  const modelParams = {
+    file: 'models/mobilenet_v1_1.0_224_quant.tflite',
+    inputDimX: 224,
+    inputDimY: 224,
+    outputDim: 1001,
+    freqms: 0
+  }
+
+
+  return (
+    <RNCamera
+      type={RNCamera.Constants.Type.back}
+      flashMode={RNCamera.Constants.FlashMode.on}
+      permissionDialogTitle={Translate('permissionCamera')}
+      permissionDialogMessage={Translate('needPermissionCamera')}
+      // @ts-ignore
+      onModelProcessed={data => ProcessOutputLiveFeed(data, OUTPUTS, setOutput)}
+      // @ts-ignore
+      modelParams={modelParams}
+      notAuthorizedView={<CameraNotAuthorized navigate={navigate} />}
+      style={{
+        width: '100%', height: '100%', alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      <Result result={output} />
+    </RNCamera>
+  )
+}
+
+
+export default ImageClassificationLiveFeed