Deploy a Deep Learning Forecast Model on Heroku by creating a web application using HTML/CSS, Flask & Python

After having spent a lot of time on training the best possible model which yields the lowest possible prediction error, it is recommended that you deploy your model on a Cloud platform with a frontend user interface. This would deem your project to be complete as it would allow others to use your model and make predictions, which otherwise only you will be able to do if your model is left on your local machine. Heroku, GCP, & AWS are the popular ones on which a lot of Data Scientists host their web applications containing the trained machine learning model. This article goes over the process of productionalizing your ML/Deep Learning model by deploying it on Heroku. We will be creating our frontend using HTML/CSS & will be using Flask to make API calls.

The code files, .txt files, .pkl files, and the folder structure that I have followed can be viewed on this Git Link. Also, the final product, i.e. the web app that I have created can be viewed on this webapp link.

Let us begin!

This would require the following steps:

Step 1: Create a .py script to train your model and save it as a ‘pickle’ file (.pkl)

Step 2: Create an HTML/CSS web page to serve as a frontend for your web application

Ensure to place a form on your HTML page which will allow the users to input the values or upload the suitable data file on which the predictions have to be made. In my case, I am providing the option to upload a CSV file and submit it. As shown below, the uploaded CSV will be saved by the name “file”, as that is the variable name.

Also, the output returned by our Flask API (forecasted sales value in my case) needs to be displayed on the HTML page again. Here, the “prediction_text” that I am displaying, is the output variable returned by the Flask API.

Step 3: Create .py script containing Flask App

Firstly, we import all the required packages such as Flask, torch, etc. We also need to import the “LSTM_Model” class which has been defined in the code using the PyTorch library. We then start off by creating a Flask app with the app = Flask(__name__) command as shown below.

Next, we read the pickle files created in step 1, which will be used for making predictions.

We then define the route ‘/’ and write a function to render the index.html template as the landing page of the application upon startup.

In the remaining part of the code, under the ‘POST’ method, we define a function that does the following:
a. process the uploaded CSV,
b. make the predictions using the model read from the pickle file, and
c. render the HTML template again by passing the prediction text.
This has been shown below. Lastly, we run the Flask app with the command.

With the above 3 steps, the fully functional app is ready. The app can be viewed & tested on localhost by running this “” script written in step 3.

But this does not complete our project. The model was always available with us in our local machine and we could have easily written few code snippets in a Jupyter notebook to read an input CSV file and make predictions.
The main purpose behind creating pickle files, building a Flask app, an HTML page, etc. was to make this model accessible by others & enable them to easily make predictions on their data, with the click of a button. Hence, to truly make it accessible to everyone via the internet and to make it easy to use, we need to deploy this application on any Cloud-based platform.

Over the next few steps, we will work on deploying this application on Heroku.

Step 4: Create requirements.txt & Procfile

Next, in our Procfile, I have written the following and saved it as a text file.

This Procfile instructs Heroku on the way in which our application has to be run. This file mentions the web server interface that we will use (Gunicorn”), and the name of our script, which is an app ( is our file name). I have enabled the ‘preload’ option because of the memory constrain & slow app boot time. This loads the application code before the worker processes are forked.

Step 5: Create Git Repository and upload all files to Git maintaining the same folder structure

Step 6: Deployment on Heroku

As shown below, Heroku then gets connected to our Git repository, thus making it ready for deployment.

Finally, click on “Deploy Branch” under the Manual deploy section as shown below. This will start the deployment process and allow us to track it too. Once deployment is complete the website link for the application will be ready and usable. Congratulations!


We have successfully productionalized our Deep Learning Forecast Model on Heroku by creating a web application using HTML/CSS, Flask & Python. Thank you very much for reading!

You can connect with me on LinkedIn for any questions. I am also open to any feedback that you might have for me.

M.S. in Applied Data Science at Syracuse University | Data Science, Machine Learning, Deep Learning, Statistics, Business Intelligence, Data Analyst, Data Engg

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store