Hosting Deep Learning apps on AWS (Stage 2): Adding a DL UI to your local app with react.js & Flask

So we have created a local react app and pushed to AWS Lambda with Serverless. But our goal is to create a deep learning (Image classification) app, not just a simple react.js UI.

For Stage 2 the idea is to wrap a Deep Learning interface around our app and load it locally. For this we need Flask to serve the back engine (python) code. Here are the steps:

i. Create new local project folder

Create a new project folder and open in Visual Studio Code

Create two new sub-folders:

react-frontend

flask-backend

ii. Install boilerplate react.js GUI

cd into the react-frontend folder and run the four commands below, one by one:

npm install -g create-react-app
npx create-react-app react-frontend
cd react-frontend
npm start

make sure the boilerplate create-react-app with the spinning react.js app opens in your local browser

iii. Create backend (flask) python script

Create a blank app.py script and add the following code:

import flask

app = flask.Flask("__main__")

@app.route("/")
def my_index():
    return flask.render_template('index.html', token = "Hello Flask+React")

app.run(debug=True)    

We will swap out this python code shortly with new code to serve our deep learning app

iv. Unpack & make changes to front-end (react.js) files

We need to first expose file dependencies to our backend (Flask) script. Do this inside the react-frontend folder by running

npm run eject

Then make the following changes:

1. set path for flask

in react-frontend > config > paths.js, change appBuild to:

appBuild: resolveApp('../flask-backend/static/react'),

2. change to relative folder references

in react-frontend > config > webpack.config remove all mentions of static/

3. change index.html path

still in webpack.config, specify where to build our html file by adding the line below under template: paths.appHtml:

filename: "../../templates/index.html",

4. configure token integration for react/flask (index.html)

in react-frontend > public > index.html, add the line below under <title>React App</title>

<script>window.token = "{{token}}"</script>

5. set up token config in GUI (app.js)

in react-frontend > src > app.js, add the line below under the "Edit...and save to reload" line:

<p>My Token = {window.token}</p>

6. add path dependency to package.json

finally, in react-frontend > package.json, add above "dependencies": {

  "homepage": "/static/react",

7. rebuild with changes

npm run build 

to build the changes into the flask backend folder:

v. Test app

cd into the flask-backend folder and run:

python app.py 

you should see the local app running

vi. Replace the GUI with a Deep Learning UI

We are now ready to add our Deep Learning GUI but before carrying out this step, it’s a good idea to backup the working local project folder in case changes have to be rolled back.

Clone the files from the GitHub link below into your new project folder (under react-frontend > src):

https://github.com/bw-cetech/lambda-dl-local.git

cd into the react-frontend folder and rebuild with:

npm run build

vii. Debug react rebuild issues

There are likely to be a few issues to resolve when these changes are implemented first time.

Commonly these errors are:

• failed to resolve jquery

resolve by running:

npm install jquery

• can't resolve '@material-ui/core/Button'

run:

npm install @mui/material @emotion/react @emotion/styled

NB if there are still errors, make sure the line below is NOT in package.json, if it is, remove it

    "@material-ui/core": "^4.11.0",

You also may have to go to the react-frontend/src/app.js file and change the line

import Button from '@material-ui/core/Button'; 

to

import Button from '@mui/material/Button'; 

after resolving the above, cd into flask-backend and run

python main.py

viii. Debug Python errors

before seeing our Deep Learning UI, there are also a number of python dependencies to install. We need to do two things:

1. create a virtual environment

inside the flask-backend folder:

python -m venv env
env\Scripts\Activate

2. install Flask and other (python) dependencies

run pip install [PYTHON LIBRARY]

for all python libraries mentioned in error messages

ix. Run app locally

Finally, after resolving the react frontend and python flask issues, run the app in the flask-backend folder in the same way:

python app.py

Our Deep Learning user interface is up and running (locally)!

We will not cover any model testing at this stage and instead cover separately the deep learning training process, export the trained model and bring it into the Docker container image for our app in stage .

Before we get there lets cover our AWS Infrastructure as Code stage (Stage 3) and Building the Docker Container Image (Stage 4). *

* if you wish to test a trained model on the local deep learning app we have built here, then feel free to skip ahead to Stage 5 first before, train and export the model to the python folder in your code base at the same level as the inference script dlmodel.py.

Stage 3: AWS IaC