Introduction

In the previous tutorial, we have built a bike-sharing users prediction application based on TensorFlow.js. It is a web application, so we can host it in a web hosting service. In this tutorial, we are going to host the web application in ESP32. 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 in ESP32 that you can find on the internet.

So, I assume you already familliar 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 will use serial peripheral interface flash file system (SPIFFS).

System Diagram

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

Web Server

In this section, we are going to build the web server that hosts the TensorFlow.js application. Please refer to this tutorial for the basics of the ESP32 web server using SPIFFS. First of all, you should install the libraries:

Then, you should write the code for the web server as shown in the following listing.

First, in line 5-6, you should replace them with your WiFi SSID and password. Next, in line 8, you should create an AsyncWebServer object that will listen on port 80. After that, in line 16-20, this code initializes the SPIFFS. In line 23-28, this code connects the WiFi to the AP.

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.

Upload 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.

Resizing SPIFFS

If you use ESP32 that only has 4 MB (32 Mb) or 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).

Upload the Data

Now that you are ready to upload the files inside the data folder into the ESP32. 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 into the ESP32.

Finally, you should compile and upload the Arduino sketch. After that, you can visit the web application by typing the IP address of your ESP32 on your web browser.

Summary

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

Next: Bike-Sharing Users Prediction Web Application in ESP32 Arduino (C/C++)

Leave a Reply

Close Menu