Hosting TensorFlow.js Web Application in ESP32 Arduino

Introduction

In the previous tutorial, we have built a web application for predicting the number of bike-sharing users. We have built the simple linear regression algorithm in TensorFlow.js. In this tutorial, we are going to host the web application in ESP32 Arduino. So, it becomes an embedded web application.

ESP32

ESP32 is a low-cost microcontroller that has integrated WiFi and Bluetooth. It is ESP8266 successor. They are quite popular for IoT development, because of the integrated WiFi and Bluetooth. Please visit this link for full information about ESP32.

There are a lot of ESP32 development boards available. In this tutorial, we are going to use ESP32 DevKit v1. It is shown in the following figure. There are a lot of resources on how to get started with ESP32 that you can find on the internet. So, I assume you are familiar with ESP32. We are going to focus only on how to host our TensorFlow.js application on ESP32.

Firstly, we are going to build the web server application with ESPAsyncWebServer library. Secondly, we are going to upload our web files (index.html, etc.) into ESP32 flash memory. We are going to use serial peripheral interface flash file system (SPIFFS).

System Overview

In this section, I am going to explain about the system block diagram of this project. It is shown in the following figure. We have ESP32 configured as a WiFi station. So, it connects to the WiFi access point (AP). In this case, I use a MiFi modem as the AP, but you can use other WiFi APs. Then, we have our development host PC connected to the AP. So, the development host PC can interact with the ESP32 via WiFi.

We host the web files in the ESP32 web server. Then, in the development host PC, we can browse the web page by using a web browser. The web browser sends HTTP request to the web server. Then web server sends HTTP response back to the web browser. The TensorFlow.js application runs locally in the web browser.

Installing Libraries

First of all, if you haven’t installed the ESP32 core library, then you need to do so. Please follow the following reference.

Recommended reading: Installing the ESP32 Board in Arduino IDE (Windows, Mac OS X, Linux)

In this tutorial, we are going to use ESPAsyncWebServer library. By using this library, we can easily build a web server with SPIFFS. First of all, you should install the library:

You can download the library from the above links. Then, extract the .zip files and move the folders to your Arduino IDE library folder.

Recommended reading: ESP32 Web Server using SPIFFS (SPI Flash File System)

Web Server

In this section, we are going to write the code for web server. we need Arduino IDE with ESP32 core library installed. After that, the following listing shows the code for the web server.

This is how the code works:

  • First, in line 5-6, you should replace them with your WiFi SSID and password.
  • In line 8, you should create the AsyncWebServer object that listens to port 80.
  • In line 16-20, this code initializes the SPIFFS.
  • Then, in line 23-28, this code connects the WiFi to the AP.
  • After that, in line 34-51, you should setup the route for the HTTP request. You should create a route for every files that will be hosted in the ESP32.
  • Finally, in line 54, you should start the server.
Resizing SPIFFS

If you use ESP32 module that only has 4 MB (32 Mb) of flash memory, then you should change the partition scheme. Otherwise, you can’t upload the web files, because it doesn’t have enough space.

To change the partition scheme, go to Tools, Partition Scheme, and choose No OTA (1 MB APP/3 MB SPIFFS).

Uploading Web Files

Now that we have all of the files to be uploaded to the ESP32. First, you should organize the files as in the following figure. Create a folder called data, and then put all of the web files in that folder. The web files are the same as the files in the previous tutorial.

After that, make sure you have the right COM port selected. Then, go to Tools, and choose ESP32 Sketch Data Upload. It will upload all of the files in data folder to the ESP32. Finally, you should compile and upload the Arduino sketch.

Demonstration

After the data and sketch are uploaded to the ESP32, then we can visit the web application by typing the IP address of ESP32 web server on the web browser. Finally, we can test the web application by entering the temperature.

Source Code

You can get the source code from this repository.

Summary

In this tutorial, you have learned how to host a TensorFlow.js web application in the ESP32 web server. A web browser makes HTTP request to the web server, then it sends HTTP response and also the web files. Even though the web application is hosted in ESP32, the execution of the linear regression algorithm is still in the web browser, not in the ESP32.