Skip to content

Commit 476bca2

Browse files
hans00hans00
committed
Move basic test into E2E test
1 parent 80846c4 commit 476bca2

17 files changed

+717
-103
lines changed

‎js/react_native/e2e/android/app/src/main/assets/test_types_float.ort‎

1.83 KB
Binary file not shown.

‎js/react_native/e2e/android/app/src/main/assets/test_types_int32.ort‎

1.83 KB
Binary file not shown.

‎js/react_native/e2e/android/app/src/main/assets/test_types_int64.ort‎

1.83 KB
Binary file not shown.

‎js/react_native/e2e/android/app/src/main/assets/test_types_int8.ort‎

1.83 KB
Binary file not shown.

‎js/react_native/e2e/android/app/src/main/assets/test_types_uint8.ort‎

1.83 KB
Binary file not shown.

‎js/react_native/e2e/android/gradle.properties‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,4 @@ android.enableJetifier=true
2222
org.gradle.jvmargs=-Xmx8192m -XX:MaxMetaspaceSize=2048m -Dkotlin.daemon.jvm.options=-Xmx8192m
2323
# Use this property to enable or disable the Hermes JS engine.
2424
# If set to false, you will be using JSC instead.
25-
hermesEnabled=false
25+
hermesEnabled=true

‎js/react_native/e2e/metro.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const config = {
1212
],
1313
resolver: {
1414
sourceExts: ['tsx', 'ts', 'jsx', 'js', 'json'], // Ensure TypeScript files are recognized
15+
assetExts: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'ico', 'webp', 'svg', 'ort', 'onnx'],
1516
},
1617
};
1718
module.exports = mergeConfig(getDefaultConfig(__dirname), config);

‎js/react_native/e2e/src/App.tsx‎

Lines changed: 129 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -2,127 +2,155 @@
22
// Licensed under the MIT License.
33

44
import * as React from 'react';
5-
import { Image, Text, TextInput, View } from 'react-native';
6-
// onnxruntime-react-native package is installed when bootstraping
7-
import { InferenceSession, Tensor } from 'onnxruntime-react-native';
8-
import MNIST, { MNISTInput, MNISTOutput, MNISTResult, } from './mnist-data-handler';
9-
import { Buffer } from 'buffer';
10-
import { readFile } from 'react-native-fs';
5+
import { Button, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
6+
import MNISTTest from './MNISTTest';
7+
import BasicTypesTest from './BasicTypesTest';
8+
9+
type Page = 'home' | 'mnist' | 'basic-types';
1110

1211
interface State {
13-
session:
14-
InferenceSession | null;
15-
output:
16-
string | null;
17-
imagePath:
18-
string | null;
12+
currentPage: Page;
1913
}
2014

15+
const styles = StyleSheet.create({
16+
container: {
17+
flex: 1,
18+
backgroundColor: '#f5f5f5',
19+
},
20+
scrollContent: {
21+
padding: 20,
22+
alignItems: 'center',
23+
},
24+
title: {
25+
fontSize: 28,
26+
fontWeight: 'bold',
27+
marginTop: 20,
28+
marginBottom: 10,
29+
color: '#333',
30+
textAlign: 'center',
31+
},
32+
subtitle: {
33+
fontSize: 18,
34+
marginBottom: 30,
35+
color: '#666',
36+
textAlign: 'center',
37+
},
38+
buttonContainer: {
39+
width: '100%',
40+
marginBottom: 30,
41+
alignItems: 'center',
42+
},
43+
buttonWrapper: {
44+
width: '80%',
45+
marginBottom: 10,
46+
},
47+
description: {
48+
fontSize: 14,
49+
color: '#888',
50+
textAlign: 'center',
51+
paddingHorizontal: 20,
52+
},
53+
header: {
54+
padding: 10,
55+
backgroundColor: '#fff',
56+
borderBottomWidth: 1,
57+
borderBottomColor: '#ddd',
58+
},
59+
testContent: {
60+
flex: 1,
61+
},
62+
});
63+
2164
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
2265
export default class App extends React.PureComponent<{}, State> {
2366
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
2467
constructor(props: {} | Readonly<{}>) {
2568
super(props);
2669

2770
this.state = {
28-
session: null,
29-
output: null,
30-
imagePath: null,
71+
currentPage: 'home',
3172
};
3273
}
3374

34-
// Load a model when an app is loading
35-
async componentDidMount(): Promise<void> {
36-
if (!this.state.session) {
37-
try {
38-
const imagePath = await MNIST.getImagePath();
39-
this.setState({ imagePath });
40-
41-
const modelPath = await MNIST.getLocalModelPath();
42-
43-
// test creating session with path
44-
console.log('Creating with path');
45-
const pathSession: InferenceSession = await InferenceSession.create(modelPath);
46-
void pathSession.release();
47-
48-
// and with bytes
49-
console.log('Creating with bytes');
50-
const base64Str = await readFile(modelPath, 'base64');
51-
const bytes = Buffer.from(base64Str, 'base64');
52-
const session: InferenceSession = await InferenceSession.create(bytes);
53-
this.setState({ session });
54-
55-
console.log('Test session created');
56-
void await this.infer();
57-
} catch (err) {
58-
console.log(err.message);
59-
}
60-
}
75+
navigateTo = (page: Page) => {
76+
this.setState({ currentPage: page });
77+
};
78+
79+
renderHome(): React.JSX.Element {
80+
return (
81+
<SafeAreaView style={styles.container}>
82+
<ScrollView contentContainerStyle={styles.scrollContent}>
83+
<Text style={styles.title}>ONNX Runtime E2E Tests</Text>
84+
<Text style={styles.subtitle}>Select a test to run:</Text>
85+
86+
<View style={styles.buttonContainer}>
87+
<View style={styles.buttonWrapper}>
88+
<Button
89+
title="MNIST Test"
90+
onPress={() => this.navigateTo('mnist')}
91+
accessibilityLabel="mnist-test-button"
92+
/>
93+
</View>
94+
<Text style={styles.description}>
95+
Test MNIST model with image classification
96+
</Text>
97+
</View>
98+
99+
<View style={styles.buttonContainer}>
100+
<View style={styles.buttonWrapper}>
101+
<Button
102+
title="Basic Types Test"
103+
onPress={() => this.navigateTo('basic-types')}
104+
accessibilityLabel="basic-types-test-button"
105+
/>
106+
</View>
107+
<Text style={styles.description}>
108+
Test various data types with basic models
109+
</Text>
110+
</View>
111+
</ScrollView>
112+
</SafeAreaView>
113+
);
61114
}
62115

63-
// Run a model with a given image
64-
infer = async (): Promise<void> => {
65-
try {
66-
const options: InferenceSession.RunOptions = {};
67-
68-
const mnistInput: MNISTInput = await MNIST.preprocess(this.state.imagePath!);
69-
const input: { [name: string]: Tensor } = {};
70-
for (const key in mnistInput) {
71-
if (Object.hasOwnProperty.call(mnistInput, key)) {
72-
const buffer = Buffer.from(mnistInput[key].data, 'base64');
73-
const tensorData =
74-
new Float32Array(buffer.buffer, buffer.byteOffset, buffer.length / Float32Array.BYTES_PER_ELEMENT);
75-
input[key] = new Tensor(mnistInput[key].type as keyof Tensor.DataTypeMap, tensorData, mnistInput[key].dims);
76-
}
77-
}
78-
79-
const output: InferenceSession.ReturnType =
80-
await this.state.session!.run(input, this.state.session!.outputNames, options);
81-
82-
const mnistOutput: MNISTOutput = {};
83-
for (const key in output) {
84-
if (Object.hasOwnProperty.call(output, key)) {
85-
const buffer = (output[key].data as Float32Array).buffer;
86-
const tensorData = {
87-
data: Buffer.from(buffer, 0, buffer.byteLength).toString('base64'),
88-
};
89-
mnistOutput[key] = tensorData;
90-
}
91-
}
92-
const result: MNISTResult = await MNIST.postprocess(mnistOutput);
93-
94-
this.setState({
95-
output: result.result
96-
});
97-
} catch (err) {
98-
console.log(err.message);
116+
renderTestPage(): React.JSX.Element {
117+
const { currentPage } = this.state;
118+
119+
let testComponent: React.JSX.Element;
120+
switch (currentPage) {
121+
case 'mnist':
122+
testComponent = <MNISTTest />;
123+
break;
124+
case 'basic-types':
125+
testComponent = <BasicTypesTest />;
126+
break;
127+
default:
128+
testComponent = <Text>Unknown test</Text>;
99129
}
100-
};
101-
102-
render(): React.JSX.Element {
103-
const { output, imagePath } = this.state;
104130

105131
return (
106-
<View>
107-
<Text>{'\n'}</Text>
108-
{imagePath && (
109-
<Image
110-
source={{
111-
uri: imagePath,
112-
}}
113-
style={{
114-
height: 200,
115-
width: 200,
116-
resizeMode: 'stretch',
117-
}}
132+
<SafeAreaView style={styles.container}>
133+
<View style={styles.header}>
134+
<Button
135+
title="← Back to Home"
136+
onPress={() => this.navigateTo('home')}
137+
accessibilityLabel="back-button"
118138
/>
119-
)}
120-
{output && (
121-
<TextInput accessibilityLabel='output'>
122-
Result: {output}
123-
</TextInput>
124-
)}
125-
</View>
139+
</View>
140+
<ScrollView style={styles.testContent}>
141+
{testComponent}
142+
</ScrollView>
143+
</SafeAreaView>
126144
);
127145
}
146+
147+
render(): React.JSX.Element {
148+
const { currentPage } = this.state;
149+
150+
if (currentPage === 'home') {
151+
return this.renderHome();
152+
}
153+
154+
return this.renderTestPage();
155+
}
128156
}

0 commit comments

Comments
 (0)