jbexx / docswap Goto Github PK

View Code? Open in Web Editor NEW

7.0 1.0 3.0 11.22 MB

React-Native App using Google Cloud Services for Optical Character Recognition integrating language translation

JavaScript 79.91% Python 4.33% Java 4.69% Objective-C 11.07%

docswap's Introduction

DocSwap

Optical Character Recognition Integrating Language Translation

WireFrames

Summary

The Idea for this app came from my interaction with newly arriving refugee families to the U.S. One of the struggles they face is reading documentation they recieve through mail; whether bills, court documents or financial assitance documents, they struggle to read and understand them.

This is a Mobile App built in React-Native that implements the Camera functionality to allow the user to take a picture of a document. It is then posted to the Google Cloud Vision API where the Optical Character Recognition functionality of the API is used to read the document and returns the text of that document.

The user can then select a language they wish to translate the document into. Another post is made to the Google Cloud Translation API where it is translated and returned to be displayed to the user in the language they chose.

I have also incorporated text messaging functionality. Because the share functionality allows the user to send a text message with the translated text, I wanted to build out a way to write a text message, translate it, and then be able to send that text all within one application.

Use

You will need to get a google cloud api key, as mine is not available on this repo. Once you have gotten an api key, create a `key.js` file in your root and export that key from the file.

Clone this repo

in your terminal run these commands

git clone [email protected]:jbexx/DocSwap.git

cd DocSwap

npm install

you will need to have xcode installed on your machine or some other simulator to run the app

to download xcode go to this page

you will need to login with your Apple ID and Password

once you have this installed, then in your terminal run
```
react-native start
```
to run the local server
then run...
```
react-native run-ios
```
...and this will open your simulator and run the app in it

Theoretically this is a cross platform app, though it has not been tested on an Android machine

Screenshots

docswap's People

Contributors

Stargazers

Watchers

Forkers

anguyenqd meanhive etstest-reactnativeapps

docswap's Issues

crop functionality

make text able to be copied

live OCR

add ability to sms or email text

tap to focus

navigation

nav buttons on last page dont work properly if coming from the 'message' button

Reverse Display of Images in Camera Roll

Camera Roll Image Upload

unable to resolve module '../../../asset/key/key

Above message, a display is a key folder and key js file missing but how to define a key in Keys file.
I have already created key google console

decide on API

https://ocr.space/ocrapi
https://cloud.google.com/translate/docs/apis
https://cloud.google.com/vision/docs/performance/rest

flash functionality on camera

Add header to camera roll

fix keyboard

from popping up whenever you touch the screen

frame camera in letter-box frame

Setup Camera Functionality

WireFrame

Learn React-Native

show og text on last screen

Add Box Shadow to the 'Go' button when translating text

Verify Image

Follow-up

@jbexx here are your deliverables following today's eval:

TO DO:

Last screen needs another option
- Home button (or another nav option so I am not dead-ended)
- Header to indicate what language I'm seeing
Write a couple tests!
Button to handle next step at final screen
- Save to Images
- Copy Text (that then opens list of options like email, message, save, etc.)
- Toggle Button to see original translation vs translated text toggle
Change gitHub pic to something of YOU, possibly match your LinkedIn pic?