Skip to content

Commit 07f1cd7

Browse files
kastorcodekastorcode
committed
COMPONENT/ADD:
 ButtonContainer PAGE/ADD: FruitRecognition SERVICE/ADD: ChooseFile TakePicture COMPONENT/UPDATE: Button (replace 48% min width by 100% width) PAGE/UPDATE: Home (add container around buttons)
1 parent a06a9b8 commit 07f1cd7

File tree

14 files changed

+190
-48
lines changed

14 files changed

+190
-48
lines changed

‎src/components/Button/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ function Button ({ onPress, text, style } : iBUTTON_PROPS) {
2323
>
2424
<View
2525
style={[{
26-
minWidth: '48%', backgroundColor: '#ff033e', borderRadius: 3,
27-
paddingVertical: 16, paddingHorizontal: 48, marginBottom: 20
26+
width: '100%', backgroundColor: '#ff033e', borderRadius: 3,
27+
paddingVertical: 16, marginBottom: 20
2828
}, style]}
2929
>
3030
<Text

‎src/components/ButtonContainer/index.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react'
2+
import { StyleProp, View, ViewStyle } from 'react-native'
3+
4+
5+
interface iBUTTON_CONTAINER_PROPS {
6+
children : JSX.Element | JSX.Element[],
7+
style ?: StyleProp<ViewStyle>
8+
}
9+
10+
11+
function ButtonContainer ({ children, style } : iBUTTON_CONTAINER_PROPS) {
12+
return (
13+
<View
14+
style={[{
15+
width: '100%', alignSelf: 'center', justifyContent: 'center'
16+
}, style]}
17+
>
18+
{ children }
19+
</View>
20+
)
21+
}
22+
23+
24+
export default ButtonContainer

‎src/components/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Background from './Background'
22
import Button from './Button'
3+
import ButtonContainer from './ButtonContainer'
34
import ImagePreview from './ImagePreview'
45
import Result from './Result'
56
import Title from './Title'
@@ -8,6 +9,7 @@ import Title from './Title'
89
export {
910
Background,
1011
Button,
12+
ButtonContainer,
1113
ImagePreview,
1214
Result,
1315
Title

‎src/pages/FruitRecognition/index.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React, { useState, useEffect } from 'react'
2+
import { Alert } from 'react-native'
3+
// @ts-ignore
4+
import Tflite from 'tflite-react-native'
5+
6+
import { ChooseFile, TakePicture, Translate } from '~/services'
7+
8+
import { Button, ButtonContainer, ImagePreview, Result, Title } from '~/components'
9+
10+
11+
type RESPONSE = {
12+
confidence : number,
13+
index : number,
14+
label : string
15+
}
16+
17+
18+
const tflite = new Tflite()
19+
20+
21+
function FruitRecognition () {
22+
const [fileUri, setFileUri] = useState('')
23+
const [result, setResult] = useState('')
24+
25+
26+
function loadModel () {
27+
tflite.loadModel({
28+
model: 'models/fruit_recognition.tflite',
29+
labels: 'models/fruit_recognition.txt',
30+
numThreads: 1
31+
},
32+
(error : string) => {
33+
if (error) {
34+
Alert.alert(Translate('error'), Translate('errorLoadModel'))
35+
}
36+
})
37+
}
38+
39+
40+
function performFruitRecognition () {
41+
tflite.runModelOnImage({
42+
path: fileUri,
43+
imageMean: 128.0,
44+
imageStd: 128.0,
45+
numResults: 3,
46+
threshold: 0.05
47+
},
48+
(error : string, response : RESPONSE[]) => {
49+
if (error) {
50+
Alert.alert(Translate('error'), Translate('errorProcessingTflite'))
51+
return
52+
}
53+
let result = ''
54+
response.map(({ confidence, label }) => {
55+
result += label.toUpperCase() + ' - ' + (confidence * 100).toFixed(0) + '%\n'
56+
})
57+
setResult(result)
58+
})
59+
}
60+
61+
62+
useEffect(() => {
63+
if (fileUri) {
64+
performFruitRecognition()
65+
}
66+
}, [fileUri])
67+
68+
69+
useEffect(() => {
70+
loadModel()
71+
72+
return () => {
73+
tflite.close()
74+
}
75+
}, [])
76+
77+
78+
return (
79+
<>
80+
<Title text='pickImagesCG' />
81+
<ImagePreview uri={fileUri} />
82+
<Result result={result} />
83+
<ButtonContainer style={{ width: '60%', maxWidth: 300 }}>
84+
<Button onPress={() => ChooseFile(setFileUri)} text='chooseFile' />
85+
<Button onPress={() => TakePicture(setFileUri)} text='takePicture' />
86+
</ButtonContainer>
87+
</>
88+
)
89+
}
90+
91+
92+
export default FruitRecognition

‎src/pages/Home/index.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useBackHandler } from '@react-native-community/hooks'
44

55
import PAGES, { iPAGES } from '~/pages'
66

7-
import { Background, Button, Title } from '~/components'
7+
import { Background, Button, ButtonContainer, Title } from '~/components'
88

99

1010
type PAGE = keyof iPAGES | null
@@ -38,9 +38,11 @@ function Home () {
3838
<Title text='testTflite' />
3939
<Title text='chooseFunction' />
4040

41-
{ Object.keys(PAGES).map(page => (
42-
<Button key={page} onPress={() => navigate(page)} text={page} />
43-
)) }
41+
<ButtonContainer style={{ width: '70%', maxWidth: 400 }}>
42+
{ Object.keys(PAGES).map(page => (
43+
<Button key={page} onPress={() => navigate(page)} text={page} />
44+
)) }
45+
</ButtonContainer>
4446
</>
4547
)
4648
}

‎src/pages/ImageClassification/index.tsx‎

Lines changed: 6 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React, { useState, useEffect } from 'react'
22
import { Alert } from 'react-native'
3-
import { launchCamera, launchImageLibrary } from 'react-native-image-picker'
43
// @ts-ignore
54
import Tflite from 'tflite-react-native'
65

7-
import { Translate } from '~/services'
6+
import { ChooseFile, TakePicture, Translate } from '~/services'
87

9-
import { Button, ImagePreview, Result, Title } from '~/components'
8+
import { Button, ButtonContainer, ImagePreview, Result, Title } from '~/components'
109

1110

1211
type RESPONSE = {
@@ -38,43 +37,6 @@ function ImageClassification () {
3837
}
3938

4039

41-
function chooseFile () {
42-
const options = {
43-
title: Translate('selectImage'),
44-
storageOptions: {
45-
skipBackup: true,
46-
path: 'images'
47-
}
48-
}
49-
// @ts-ignore
50-
launchImageLibrary(options, response => {
51-
if (response.didCancel) {
52-
return
53-
}
54-
// @ts-ignore
55-
setFileUri(response.assets[0].uri)
56-
})
57-
}
58-
59-
60-
function takePicture () {
61-
const options = {
62-
storageOptions: {
63-
skipBackup: true,
64-
path: 'images'
65-
}
66-
}
67-
// @ts-ignore
68-
launchCamera(options, response => {
69-
if (response.didCancel) {
70-
return
71-
}
72-
// @ts-ignore
73-
setFileUri(response.assets[0].uri)
74-
})
75-
}
76-
77-
7840
function performImageClassification () {
7941
tflite.runModelOnImage({
8042
path: fileUri,
@@ -118,8 +80,10 @@ function ImageClassification () {
11880
<Title text='pickImagesCG' />
11981
<ImagePreview uri={fileUri} />
12082
<Result result={result} />
121-
<Button onPress={chooseFile} text='chooseFile' />
122-
<Button onPress={takePicture} text='takePicture' />
83+
<ButtonContainer style={{ width: '60%', maxWidth: 300 }}>
84+
<Button onPress={() => ChooseFile(setFileUri)} text='chooseFile' />
85+
<Button onPress={() => TakePicture(setFileUri)} text='takePicture' />
86+
</ButtonContainer>
12387
</>
12488
)
12589
}

‎src/pages/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
1+
import FruitRecognition from './FruitRecognition'
12
import ImageClassification from './ImageClassification'
23

34

45
type PAGE = () => JSX.Element
56

67
export interface iPAGES {
78
[key : string] : PAGE,
9+
FruitRecognition : PAGE,
810
ImageClassification : PAGE
911
}
1012

1113

1214
const PAGES : iPAGES = {
15+
FruitRecognition,
1316
ImageClassification
1417
}
1518

‎src/services/ChooseFile/index.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { launchImageLibrary } from 'react-native-image-picker'
2+
3+
import { Translate } from '~/services'
4+
5+
6+
function ChooseFile (setFileUri : React.Dispatch<React.SetStateAction<string>>) {
7+
const options = {
8+
title: Translate('selectImage'),
9+
storageOptions: {
10+
skipBackup: true,
11+
path: 'images'
12+
}
13+
}
14+
// @ts-ignore
15+
launchImageLibrary(options, response => {
16+
if (response.didCancel) {
17+
return
18+
}
19+
// @ts-ignore
20+
setFileUri(response.assets[0].uri)
21+
})
22+
}
23+
24+
25+
export default ChooseFile

‎src/services/TakePicture/index.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { launchCamera } from 'react-native-image-picker'
2+
3+
4+
function TakePicture (setFileUri : React.Dispatch<React.SetStateAction<string>>) {
5+
const options = {
6+
storageOptions: {
7+
skipBackup: true,
8+
path: 'images'
9+
}
10+
}
11+
// @ts-ignore
12+
launchCamera(options, response => {
13+
if (response.didCancel) {
14+
return
15+
}
16+
// @ts-ignore
17+
setFileUri(response.assets[0].uri)
18+
})
19+
}
20+
21+
22+
export default TakePicture

‎src/services/Translate/en-US.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const EN_US : TRANSLATE = {
1515

1616
// PAGES
1717

18+
FruitRecognition: 'Fruit Recognition',
1819
ImageClassification: 'Image Classification'
1920
}
2021

0 commit comments

Comments
 (0)