Commit 104b1d7e authored by lochanar99's avatar lochanar99

interface for image processing

parent caa28e88
node_modules/
.expo/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
# macOS
.DS_Store
import React, { useState, useEffect } from "react";
import {
Text,
Image,
View,
Platform,
StyleSheet,
Button,
TouchableHighlight,
ActivityIndicator,
TouchableOpacity,
} from "react-native";
import * as ImagePicker from "expo-image-picker";
import * as Permissions from "expo-permissions";
import { Entypo, AntDesign } from "@expo/vector-icons";
import AppLoading from "expo-app-loading";
export default function App() {
const [image, setImage] = useState(null);
const [base64String, setBase64String] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
(async () => {
if (Platform.OS !== "web") {
const { status } = await ImagePicker.getCameraPermissionsAsync();
if (status !== "granted") {
alert("Sorry, we need camera roll permissions to make this work!");
}
}
})();
}, []);
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
base64: true,
quality: 1,
});
if (result.cancelled === false) {
setImage(result.uri);
setBase64String(result.base64);
}
};
const clickPhoto = async () => {
const { status } = await Permissions.askAsync(Permissions.MEDIA_LIBRARY);
if (status === "granted") {
const result = await ImagePicker.launchCameraAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
base64: true,
quality: 1,
});
if (result.cancelled === false) {
setImage(result.uri);
setBase64String(result.base64);
}
}
};
const upload = async () => {
setIsLoading(true);
const formData = new FormData();
formData.append("file", base64String);
const response = await fetch("http://20.198.84.13//add", {
method: "POST",
body: formData,
headers: {
"Content-Type": "multipart/form-data",
},
});
if (response.status === 200) {
const text = await response.text();
setIsLoading(false);
alert(text);
} else {
console.log(response.status);
}
};
return (
<View style={styles.container}>
<View style={styles.imageContainer}>
{!image && (
<Text style={styles.text}>Your Image Will be shown here.</Text>
)}
{image && <Text style={styles.text}>Your Uploaded Image is</Text>}
{image && <Image source={{ uri: image }} style={styles.images} />}
</View>
<View style={styles.buttonContainer}>
<View style={styles.buttonItems}>
<View style={styles.buttonInner}>
<Entypo.Button
name="upload"
size={32}
color="black"
onPress={() => pickImage()}
style={styles.button}
/>
</View>
</View>
<View style={styles.buttonItems}>
<View style={styles.buttonInner}>
<Entypo.Button
name="camera"
size={32}
color="black"
onPress={() => clickPhoto()}
style={styles.button}
/>
</View>
</View>
<View style={styles.buttonPredict}>
<TouchableOpacity
style={styles.buttonPredictInner}
onPress={() => upload()}
>
{isLoading ? (
<ActivityIndicator
animating={isLoading}
size="large"
color="black"
/>
) : (
<View style={styles.buttonPredictInner}>
<AntDesign.Button
name="codesquareo"
size={32}
color="black"
onPress={upload}
style={styles.button}
/>
<Text class = {styles.text}>Predict</Text>
</View>
)}
</TouchableOpacity>
{/* <View style={styles.buttonPredictInner}>
<AntDesign.Button
name="codesquareo"
size={32}
color="black"
onPress={apploading}
style={styles.button}
/>
</View> */}
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 50,
},
imageContainer: {
height: "60%",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#fff",
},
images: {
width: "100%",
height: "100%",
borderRadius: 10,
borderWidth: 4,
borderColor: "#fff",
backgroundColor: "#fff",
},
buttonContainer: {
height: "40%",
backgroundColor: "#fff",
flexDirection: "row",
flexWrap: "wrap",
padding: 20,
},
buttonItems: {
width: "50%",
height: "50%",
padding: 20,
},
buttonInner: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
borderRadius: 50,
justifyContent: "center",
},
buttonPredict: {
width: "100%",
height: "50%",
padding: 20,
alignItems: "center",
justifyContent: "center",
flexDirection: "row",
},
buttonPredictInner: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
borderRadius: 50,
justifyContent: "center",
},
text: {
fontSize: 18,
fontWeight: "normal",
color: "black",
alignItems: "center",
justifyContent: "center",
},
button: {
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
{
"expo": {
"name": "image-classification-react-native-expo",
"slug": "image-classification-react-native-expo",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.expoapp.imageclassificationreactnativeexpo"
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"package": "com.expoapp.imageclassificationreactnativeexpo"
},
"web": {
"favicon": "./assets/favicon.png"
},
"description": ""
}
}
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~42.0.1",
"expo-app-loading": "^1.1.2",
"expo-camera": "~11.2.2",
"expo-image-picker": "~10.2.2",
"expo-permissions": "~12.1.1",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-file-base64": "^1.0.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-code-push": "^7.0.3",
"react-native-image-crop-picker": "^0.36.3",
"react-native-image-picker": "^4.1.1",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"@babel/core": "^7.9.0"
},
"private": true
}
import { PermissionsAndroid, Platform } from 'react-native';
export const androidCameraPermission = () => new Promise(async (resolve, reject) => {
try {
if (Platform.OS === 'android' && Platform.Version > 22) {
const granted = await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.CAMERA,
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE
]);
console.log(granted, 'granted response')
if (
granted['android.permission.CAMERA'] !== 'granted' ||
granted['android.permission.WRITE_EXTERNAL_STORAGE'] !== 'granted' ||
granted['android.permission.READ_EXTERNAL_STORAGE'] !== 'granted'
) {
showError("Don't have required permission.Please allow permissions")
return resolve(false);
}
return resolve(true);
}
return resolve(true);
} catch (error) {
return resolve(false);
}
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment