A cool web app for machine learning, using React.js to build the UI and using Flask for the API.
This is a full-stack project to showcase useful and/or curious Machine Learning applications, while providing a visually attractive and responsive user interface, as well as a memorable user experience.
Most of the processing is distributed across threads by a Celery task queue, to obtain a more responsive UI. The broker used to mediate between clients and workers is a Redis database.
Server and clients are synced regarding the status of a task through low latency bi-directional communications using Flask-SocketIO.
The API implements a machine learning model server, which is a quick and easy implementation for demonstration projects, where a Flask endpoint handles inference. However, this is not how I would recommend to deploy machine learning models to production endpoints. For multiple reasons, this simplified approach is inflexible and inefficient:
- backend code and machine learning code live on the same codebase,
- there is no model version control,
- inference requests are not handled in batches, but sequentially as they arrive.
To address these issues, the recommended approach is to serve the model using well-established tools like TensorFlow Serving, which can be deployed in a separate Docker container.
To set up the API, you must:
0️⃣ -Create a Python 3.8 virtual environment and activate it.
For example, run: virtualenv -p python3.8 venv && source venv/bin/activate
1️⃣ -Install the requirements:
pip install -r requirements.txt
Then, install TensorFlow by running** pip install tensorflow==2.4.0-rc0
** Not included in requirements.txt, because there are no stable releases for Apple Silicon chips yet. MacOS users running on Apple Silicon chips: follow this instructions, using the existing virtual environment from 0️⃣
To make sure TensorFlow is properly installed, you may try the benchmark in api/benchmark/. For example, this should work fine: python api/benchmark/bench_tf.py, even for Apple Silicon chips.
2️⃣ -Start a local Redis server.
For example, in GNU-Linux and in MacOS, you may execute api/run-redis.sh to install and/or launch a private copy.
3️⃣ -Start a Celery worker using threaded tasks pooling (in another terminal instance) by running:
celery -A main.celery worker --pool threads --loglevel info -E
4️⃣ -Start the Flask application (in another terminal instance) by running:
python main.py
A development server for the API will be running on http://localhost:5000, and it will reload if you make edits. Since Flask is only used as API, you will see just a Not Found message if opened in a browser.
Note: Make sure to set the following environment variables in a .env file in the project root directory:
FLASK_SECRET_KEYis the session encryption key for the Flask app. A random key can be obtained by running:python -c 'import os; print(os.urandom(16))'DEBUGcan be eithertrueorfalsedepending on the mode the API will be running.
This project uses PyTest for testing. Simply run pytest to run all tests.
Make sure you have Node.js JavaScript runtime and Yarn package manager installed. This web app was developed with Node.js v15.13.0 (that comes with npm 7.7.6), and Yarn 1.22.10.
To set up the web app for development, make sure you are inside static/
Then install all required Node.js modules by running yarn install
To run the app in the development mode, run yarn start which should automatically open the app in your default browser.
Otherwise, manually open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launch the test runner in the interactive watch mode by running yarn test
See the section about running tests for more information.
The API, as well as Celery and Redis instances, live in separate Docker containers, which can be built by running make run from the root directory of this project.
The API is served using NGINX and uWSGI, which are bundled and ready for deployment in the API container.
To build the app for production, run yarn build from static/
It correctly bundles React in production mode, optimizes the build for the best performance, and saves these files in the build folder.
The build is minified and the filenames include the hashes.
The app is ready to be deployed!
See the section about deployment from Facebook's repository for more information.