Using TensorFlow to Build a Production-Ready Neural Network-Powered Web App

Using TensorFlow to Build a Production-Ready Neural Network-Powered Web App

Build, Train and Deploy a Convolutional Neural Network Image Classifier.

⏰ 4 h 12 min | 17 lessons
Published: November 2023
Access our growing course library
$ 20 / month (billed annually)
After completing this course, you will...
Be able to train your own convolutional neural network (CNN) using Tensorflow
Have built an image classifier using your own CNN
Have build a full-stack application using FastAPI for the backend, React for the frontend and AWS Lambda and Docker for our dev ops infrastructure
Be able to deploy your application as a stand-alone website for users to interact with

In this course we're going to combine machine learning and web development to build a full-stack image classifier web app. We'll train a convolutional neural network (CNN) to classify images, and then build a web app to serve it to users. We'll use FastAPI for our backend, React for our frontend, and AWS Lambda for our infrastructure.

Building machine learning models is only half the battle. We also need to be able to deploy them to users. This is where web development and dev ops come in. In this course we'll be covering all of the fundamentals necessary to allow you to unlease you AI models to the world.

🗺 The Plan

We're going to build our application over twelve core "chapters":

  1. Overview
  2. Project setup
  3. Training a CNN
  4. Classifying an image
  5. Visualising the model
  6. More training
  7. Building a UI
  8. Serving our application
  9. Calling our backend, from the frontend
  10. Classifying an image with the UI
  11. Deploying our app as a serverless image
  12. Adding prediction bar chart
  13. Adding model visualisations
  14. Refactor
  15. Optimise!

For reference, each chapter will contain a copy of the source code as it evolves with the project.

Ideally, build your own version as you follow through. If you want to get the most out of it, play about with the project after the end of each chapter by trying to add new features, optimisations or refactorings.

📚 The Stack

"The Stack" is the set of technologies used to build and run a software application.

It's usually divided into:

  • Frontend: The client-side interface (e.g., React)
  • Backend: Server-side logic and databases (e.g., FastAPI, SQL)
  • DevOps: Infrastructure and deployment (e.g., AWS Lambda, Docker)

Ideally, we want to choose a stack which is performant, scalable, and easy to develop with.

🖥️ Frontend

The frontend is where we'll display our application to the user.

Whilst we could write our own HTML, CSS, and JavaScript, it's much easier to use a framework.

We're going to use React for our frontend, as it's one of the most popular (well supported and used) frontend frameworks. At the cost of a slightly higher learning curve (than raw HTML, CSS and JS), it's also one of the most performant and allows us to keep our code clean and modular.

⚙️ Backend

The backend is where we'll run the machine learning model, and serve it the information to the frontend to be displayed.

We're going to use Python for our backend, as it's the most popular language for machine learning. And it has some great libraries for web-servers, such as FastAPI.

Although we could use a traditional web-server, such as Flask, we're going to use FastAPI as it's a newer framework which has some benefits such as:

  1. Speed: FastAPI is faster than Flask, thanks to Starlette and Pydantic.
  2. Type Checking: Automatic request validation via type hints.
  3. Auto Docs: Swagger and ReDoc integrated out-of-the-box.
  4. Async Support: Native support for asynchronous programming.
  5. Modern: Built-in support for data validation, OAuth2, and more.
  6. Dependency Injection: Simplifies complex use-cases by providing shared components.

FastAPI can be particularly beneficial for ML and data-heavy apps due to its performance and async capabilities. For simple projects, Flask might still be sufficient.

🌐 DevOps

Developer Operations (DevOps) is the process of managing the development and deployment of software.

As we mentioned earlier, we need a stack architecture which is scalable, performant, and easy to develop with. Serverless is a great choice for this, as it's easy to deploy, and scales automatically. We also don't have to worry about managing servers, which is a huge plus. And we'll only pay for what we use!

Note: "Serverless" doesn't mean there are no servers. It just means we don't have to worry about them.

We're going to use AWS Lambda to deploy our backend.

We could create the lambda with a .zip file, but we'll have higher memory limits using Docker images.

🧰 You will need:

To follow along with this project, you must have:

  • A computer with a terminal (e.g., iTerm, PowerShell)
  • An editor (e.g., VSCode)
  • A web browser (e.g., Chrome)
  • An AWS account

You do not need these to create this project, but they will make your life easier:

  • Git (for version control)
  • A GitHub account (for hosting your code)
Section 2
Training a CNN
2. Training a convolutional neural network
3. Classifying an image
4. Visualising a model
5. Continuing training
Section 3
Cloud Ops
6. Adding a React user interface
7. Serving our application
8. Calling the backend from the frontend
Section 4
Web App
9. Accepting an image
10. Uploading an image with the UI
11. Deploying as a serverless image
12. Returning the class predictions
13. Returning internal model activations
14. Displaying the model’s activation activity
15. Code refactor
16. Code optimisation
17. Conclusion, Certificate, and What Next?
Dr Freddy Wordingham
Software Lead, digiLab
Freddy is passionate about making software development exciting, so his team delivers the best solutions while having fun. He’s great at writing high-performance numerical simulations, and his creativity extends to abstract art and cooking (his favourite is making Christmas dinner with his mum each year).