Add Google Vision with React Native

Author: flexbox

Diff for: README.md

@@ -18,8 +18,10 @@ cp -r tensorflowjs-template new
 1. [image-to-tensor](image-to-tensor/)
 1. [tensor-reversal](tensor-reversal/)
 1. [old-tv](old-tv/)
+1. [Vision](vision/)
 
 ## Ressources
 
 - [The TensorFlow.js gallery](https://github.com/tensorflow/tfjs/blob/master/GALLERY.md)
 - [Awesome TensorFlow.js](https://github.com/aaronhma/awesome-tensorflow-js)
+- [IA Vision - Google Cloud](https://cloud.google.com/vision)

Diff for: vision/.gitignore

@@ -0,0 +1,64 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifacts
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/
+
+# Expo
+.expo/*
+web-build/
+.env

Diff for: vision/App.js

@@ -0,0 +1,104 @@
+import * as ImagePicker from 'expo-image-picker';
+import React from 'react';
+import { Button, Image, StyleSheet, Text, View } from 'react-native';
+
+const API_KEY = 'ADD_YOUR_KEY_HERE';
+const API_URL = `https://vision.googleapis.com/v1/images:annotate?key=${API_KEY}`;
+
+async function callGoogleVisionAsync(image) {
+  const body = {
+    requests: [
+      {
+        image: {
+          content: image,
+        },
+        features: [
+          {
+            type: 'LABEL_DETECTION',
+            maxResults: 1,
+          },
+        ],
+      },
+    ],
+  };
+
+  const response = await fetch(API_URL, {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  });
+  const result = await response.json();
+  console.log('callGoogleVisionAsync -> result', result);
+
+  return result.responses[0].labelAnnotations[0].description;
+}
+
+export default function App() {
+  const [image, setImage] = React.useState(null);
+  const [status, setStatus] = React.useState(null);
+  const [permissions, setPermissions] = React.useState(false);
+
+  const askPermissionsAsync = async () => {
+    let permissionResult = await ImagePicker.requestCameraPermissionsAsync();
+
+    if (permissionResult.granted === false) {
+      alert('Permission to access camera roll is required!');
+      return;
+    } else {
+      setPermissions(true);
+    }
+  };
+
+  const takePictureAsync = async () => {
+    const { cancelled, uri, base64 } = await ImagePicker.launchCameraAsync({
+      base64: true,
+    });
+
+    if (!cancelled) {
+      setImage(uri);
+      setStatus('Loading...');
+      try {
+        const result = await callGoogleVisionAsync(base64);
+        setStatus(result);
+      } catch (error) {
+        setStatus(`Error: ${error.message}`);
+      }
+    } else {
+      setImage(null);
+      setStatus(null);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {permissions === false ? (
+        <Button onPress={askPermissionsAsync} title="Ask permissions" />
+      ) : (
+        <>
+          {image && <Image style={styles.image} source={{ uri: image }} />}
+          {status && <Text style={styles.text}>{status}</Text>}
+          <Button onPress={takePictureAsync} title="Take a Picture" />
+        </>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    width: 300,
+    height: 300,
+  },
+  text: {
+    margin: 5,
+  },
+});

Diff for: vision/README.md

@@ -0,0 +1,19 @@
+# React Native with Google Vision
+
+Using [vision.googleapis.com](https://cloud.google.com/vision) to identify the content of a picture.
+Thanks to @EvanBacon [for the example](https://github.com/expo/examples/tree/master/with-google-vision).
+
+## Result
+
+![React Native with Google Vision](./images/google-cloud-vision.gif)
+
+## Getting Started
+
+**Requirements**
+
+- Google Cloud Vision API key
+
+```
+yarn
+yarn start // then scan the QR Code
+```

Diff for: vision/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

Diff for: vision/images/google-cloud-vision.gif

@@ -0,0 +1,22 @@
+{
+  "dependencies": {
+    "expo": "~39.0.0",
+    "expo-image-picker": "~9.1.0",
+    "expo-permissions": "^9.3.0",
+    "react": "~16.13.0",
+    "react-dom": "~16.13.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz",
+    "react-native-web": "0.13.13"
+  },
+  "devDependencies": {
+    "@babel/core": "7.9.0"
+  },
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo web",
+    "eject": "expo eject"
+  },
+  "private": true
+}