Skip to content

Commit adeab9e

Browse files
Computer vision example app (#45)
## Description This pull request introduces example app for computer vision task, which is similar to llama example, for now it only has one screen implemented(Style Transfer) ### Type of change - [ ] Bug fix (non-breaking change which fixes an issue) - [x] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Documentation update (improves or adds clarity to existing documentation) ### Tested on - [x] iOS - [x] Android ### Testing instructions <!-- Provide step-by-step instructions on how to test your changes. Include setup details if necessary. --> ### Screenshots <!-- Add screenshots here, if applicable --> ### Related issues <!-- Link related issues here using #issue-number --> ### Checklist - [x] I have performed a self-review of my code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have updated the documentation accordingly - [x] My changes generate no new warnings ### Additional notes <!-- Include any additional information, assumptions, or context that reviewers might need to understand this PR. -->
1 parent 419d42e commit adeab9e

File tree

101 files changed

+24016
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+24016
-0
lines changed

examples/computer-vision/.gitignore

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
2+
3+
# dependencies
4+
node_modules/
5+
6+
# Expo
7+
.expo/
8+
dist/
9+
web-build/
10+
expo-env.d.ts
11+
12+
# Native
13+
*.orig.*
14+
*.jks
15+
*.p8
16+
*.p12
17+
*.key
18+
*.mobileprovision
19+
20+
# Metro
21+
.metro-health-check*
22+
23+
# debug
24+
npm-debug.*
25+
yarn-debug.*
26+
yarn-error.*
27+
28+
# macOS
29+
.DS_Store
30+
*.pem
31+
32+
# local env files
33+
.env*.local
34+
35+
# typescript
36+
*.tsbuildinfo
37+
38+
.yarn

examples/computer-vision/App.tsx

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import ScrollPicker from 'react-native-wheel-scrollview-picker';
2+
import ColorPalette from './colors';
3+
import SWMIcon from './assets/icons/swm_icon.svg';
4+
import { useFonts } from 'expo-font';
5+
import { useState } from 'react';
6+
import { StyleTransferScreen } from './screens/StyleTransferScreen';
7+
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
8+
import { View, StyleSheet } from 'react-native';
9+
10+
enum ModelType {
11+
STYLE_TRANSFER,
12+
OBJECT_DETECTION,
13+
IMAGE_CLASSIFICATION,
14+
SEMANTIC_SEGMENTATION,
15+
}
16+
17+
export default function App() {
18+
useFonts({
19+
medium: require('./assets/fonts/Aeonik-Medium.otf'),
20+
regular: require('./assets/fonts/Aeonik-Regular.otf'),
21+
});
22+
const [selectedMode, setSelectedMode] = useState<ModelType>(
23+
ModelType.STYLE_TRANSFER
24+
);
25+
const [imageUri, setImageUri] = useState('');
26+
27+
const handleModeChange = (mode: ModelType) => {
28+
setSelectedMode(mode);
29+
};
30+
31+
const renderScreen = () => {
32+
switch (selectedMode) {
33+
case ModelType.STYLE_TRANSFER:
34+
return (
35+
<StyleTransferScreen imageUri={imageUri} setImageUri={setImageUri} />
36+
);
37+
case ModelType.OBJECT_DETECTION:
38+
return <></>;
39+
case ModelType.IMAGE_CLASSIFICATION:
40+
return <></>;
41+
case ModelType.SEMANTIC_SEGMENTATION:
42+
return <></>;
43+
default:
44+
return (
45+
<StyleTransferScreen imageUri={imageUri} setImageUri={setImageUri} />
46+
);
47+
}
48+
};
49+
50+
return (
51+
<SafeAreaProvider>
52+
<SafeAreaView style={styles.container}>
53+
<View style={styles.topContainer}>
54+
<SWMIcon width={45} height={45} />
55+
<View style={styles.wheelPickerContainer}>
56+
<ScrollPicker
57+
dataSource={[
58+
'Style Transfer',
59+
'Object Detection',
60+
'Image Classification',
61+
'Semantic Segmentation',
62+
]}
63+
onValueChange={(_, selectedIndex) => {
64+
handleModeChange(selectedIndex);
65+
}}
66+
wrapperHeight={135}
67+
highlightColor={ColorPalette.primary}
68+
wrapperBackground="#fff"
69+
highlightBorderWidth={3}
70+
itemHeight={60}
71+
activeItemTextStyle={styles.activeScrollItem}
72+
/>
73+
</View>
74+
</View>
75+
{renderScreen()}
76+
</SafeAreaView>
77+
</SafeAreaProvider>
78+
);
79+
}
80+
81+
const styles = StyleSheet.create({
82+
container: {
83+
flex: 1,
84+
backgroundColor: '#fff',
85+
},
86+
topContainer: {
87+
marginTop: 5,
88+
height: 150,
89+
width: '100%',
90+
alignItems: 'center',
91+
justifyContent: 'center',
92+
marginBottom: 16,
93+
},
94+
wheelPickerContainer: {
95+
width: '100%',
96+
height: 135,
97+
},
98+
activeScrollItem: {
99+
color: ColorPalette.primary,
100+
fontWeight: 'bold',
101+
},
102+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Android/IntelliJ
6+
#
7+
build/
8+
.idea
9+
.gradle
10+
local.properties
11+
*.iml
12+
*.hprof
13+
.cxx/
14+
15+
# Bundle artifacts
16+
*.jsbundle
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
apply plugin: "com.android.application"
2+
apply plugin: "org.jetbrains.kotlin.android"
3+
apply plugin: "com.facebook.react"
4+
5+
def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
6+
7+
/**
8+
* This is the configuration block to customize your React Native Android app.
9+
* By default you don't need to apply any configuration, just uncomment the lines you need.
10+
*/
11+
react {
12+
entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
13+
reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
14+
hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
15+
codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
16+
17+
// Use Expo CLI to bundle the app, this ensures the Metro config
18+
// works correctly with Expo projects.
19+
cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
20+
bundleCommand = "export:embed"
21+
22+
/* Folders */
23+
// The root of your project, i.e. where "package.json" lives. Default is '../..'
24+
// root = file("../../")
25+
// The folder where the react-native NPM package is. Default is ../../node_modules/react-native
26+
// reactNativeDir = file("../../node_modules/react-native")
27+
// The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
28+
// codegenDir = file("../../node_modules/@react-native/codegen")
29+
30+
/* Variants */
31+
// The list of variants to that are debuggable. For those we're going to
32+
// skip the bundling of the JS bundle and the assets. By default is just 'debug'.
33+
// If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
34+
// debuggableVariants = ["liteDebug", "prodDebug"]
35+
36+
/* Bundling */
37+
// A list containing the node command and its flags. Default is just 'node'.
38+
// nodeExecutableAndArgs = ["node"]
39+
40+
//
41+
// The path to the CLI configuration file. Default is empty.
42+
// bundleConfig = file(../rn-cli.config.js)
43+
//
44+
// The name of the generated asset file containing your JS bundle
45+
// bundleAssetName = "MyApplication.android.bundle"
46+
//
47+
// The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
48+
// entryFile = file("../js/MyApplication.android.js")
49+
//
50+
// A list of extra flags to pass to the 'bundle' commands.
51+
// See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
52+
// extraPackagerArgs = []
53+
54+
/* Hermes Commands */
55+
// The hermes compiler command to run. By default it is 'hermesc'
56+
// hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
57+
//
58+
// The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
59+
// hermesFlags = ["-O", "-output-source-map"]
60+
61+
/* Autolinking */
62+
autolinkLibrariesWithApp()
63+
}
64+
65+
/**
66+
* Set this to true to Run Proguard on Release builds to minify the Java bytecode.
67+
*/
68+
def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
69+
70+
/**
71+
* The preferred build flavor of JavaScriptCore (JSC)
72+
*
73+
* For example, to use the international variant, you can use:
74+
* `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
75+
*
76+
* The international variant includes ICU i18n library and necessary data
77+
* allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
78+
* give correct results when using with locales other than en-US. Note that
79+
* this variant is about 6MiB larger per architecture than default.
80+
*/
81+
def jscFlavor = 'org.webkit:android-jsc:+'
82+
83+
android {
84+
ndkVersion rootProject.ext.ndkVersion
85+
86+
buildToolsVersion rootProject.ext.buildToolsVersion
87+
compileSdk rootProject.ext.compileSdkVersion
88+
89+
namespace 'com.anonymous.computervision'
90+
defaultConfig {
91+
applicationId 'com.anonymous.computervision'
92+
minSdkVersion rootProject.ext.minSdkVersion
93+
targetSdkVersion rootProject.ext.targetSdkVersion
94+
versionCode 1
95+
versionName "1.0.0"
96+
}
97+
signingConfigs {
98+
debug {
99+
storeFile file('debug.keystore')
100+
storePassword 'android'
101+
keyAlias 'androiddebugkey'
102+
keyPassword 'android'
103+
}
104+
}
105+
buildTypes {
106+
debug {
107+
signingConfig signingConfigs.debug
108+
}
109+
release {
110+
// Caution! In production, you need to generate your own keystore file.
111+
// see https://reactnative.dev/docs/signed-apk-android.
112+
signingConfig signingConfigs.debug
113+
shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
114+
minifyEnabled enableProguardInReleaseBuilds
115+
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
116+
crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
117+
}
118+
}
119+
packagingOptions {
120+
jniLibs {
121+
useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
122+
}
123+
}
124+
androidResources {
125+
ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
126+
}
127+
}
128+
129+
// Apply static values from `gradle.properties` to the `android.packagingOptions`
130+
// Accepts values in comma delimited lists, example:
131+
// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
132+
["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
133+
// Split option: 'foo,bar' -> ['foo', 'bar']
134+
def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
135+
// Trim all elements in place.
136+
for (i in 0..<options.size()) options[i] = options[i].trim();
137+
// `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
138+
options -= ""
139+
140+
if (options.length > 0) {
141+
println "android.packagingOptions.$prop += $options ($options.length)"
142+
// Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
143+
options.each {
144+
android.packagingOptions[prop] += it
145+
}
146+
}
147+
}
148+
149+
dependencies {
150+
// The version of react-native is set by the React Native Gradle Plugin
151+
implementation("com.facebook.react:react-android")
152+
153+
def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
154+
def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
155+
def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
156+
157+
if (isGifEnabled) {
158+
// For animated gif support
159+
implementation("com.facebook.fresco:animated-gif:${reactAndroidLibs.versions.fresco.get()}")
160+
}
161+
162+
if (isWebpEnabled) {
163+
// For webp support
164+
implementation("com.facebook.fresco:webpsupport:${reactAndroidLibs.versions.fresco.get()}")
165+
if (isWebpAnimatedEnabled) {
166+
// Animated webp support
167+
implementation("com.facebook.fresco:animated-webp:${reactAndroidLibs.versions.fresco.get()}")
168+
}
169+
}
170+
171+
if (hermesEnabled.toBoolean()) {
172+
implementation("com.facebook.react:hermes-android")
173+
} else {
174+
implementation jscFlavor
175+
}
176+
}
Binary file not shown.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Add project specific ProGuard rules here.
2+
# By default, the flags in this file are appended to flags specified
3+
# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4+
# You can edit the include path and order by changing the proguardFiles
5+
# directive in build.gradle.
6+
#
7+
# For more details, see
8+
# http://developer.android.com/guide/developing/tools/proguard.html
9+
10+
# react-native-reanimated
11+
-keep class com.swmansion.reanimated.** { *; }
12+
-keep class com.facebook.react.turbomodule.** { *; }
13+
14+
# Add any project specific keep options here:
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2+
xmlns:tools="http://schemas.android.com/tools">
3+
4+
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
5+
6+
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
7+
</manifest>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
2+
<uses-permission android:name="android.permission.INTERNET"/>
3+
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
4+
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
5+
<uses-permission android:name="android.permission.VIBRATE"/>
6+
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
7+
<queries>
8+
<intent>
9+
<action android:name="android.intent.action.VIEW"/>
10+
<category android:name="android.intent.category.BROWSABLE"/>
11+
<data android:scheme="https"/>
12+
</intent>
13+
</queries>
14+
<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true">
15+
<meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
16+
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
17+
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
18+
<activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
19+
<intent-filter>
20+
<action android:name="android.intent.action.MAIN"/>
21+
<category android:name="android.intent.category.LAUNCHER"/>
22+
</intent-filter>
23+
<intent-filter>
24+
<action android:name="android.intent.action.VIEW"/>
25+
<category android:name="android.intent.category.DEFAULT"/>
26+
<category android:name="android.intent.category.BROWSABLE"/>
27+
<data android:scheme="com.anonymous.computervision"/>
28+
</intent-filter>
29+
</activity>
30+
</application>
31+
</manifest>

0 commit comments

Comments
 (0)