![](https://crypto4nerd.com/wp-content/uploads/2023/07/1P5tlu-cWsOP1HF4nVtjlWw-1024x490.png)
In this article, we will guide you through the process of deploying both a Flask API and a Streamlit application locally and on the Heroku platform. By the end of this tutorial, you will have your machine learning model up and running, accessible through a user-friendly Streamlit dashboard.
Before we dive into deployment, let’s briefly discuss the machine learning model we’ll be using. Our model is trained on Stack Overflow data and is capable of predicting tags for questions. We employed the Universal Sentence Encoder (USE) for feature extraction and utilized the one-vs-rest classifier technique to predict multiple tags for each question. We saved our trained model using joblib.
Before we get started, make sure you have the following in place:
- Create a main project folder.
- Include the necessary files from https://github.com/sbendimerad/ml_deployment:
- The pre-trained model “trained_use_logreg.joblib” that i’ve already saved.
- The “top_10_tags”, “nltk.txt” and “preprocessing.py” files. These ones are specific for my use cases, you can use your own files if you have specific ML task.
- The “flask_app.py” and “viz_app.py” scripts for flask and streamlit.
3. Use the “requirements.txt” to install the required packages on your environment.
- Open your terminal or Anaconda Prompt and navigate to the directory where your Flask app script (
flask_app.py
) is located. - Define the necessary routes in your Flask API script (copy/paste the code) :
- Create a root API route that prints “Hello World”.
- Implement a GET route that handles text preprocessing, feature extraction, and tag prediction using the pre-trained model.
- Run the Flask app by executing the following command in the terminal:
python flask_app.py
- Open a web browser and enter the URL displayed in the terminal (e.g.,
http://localhost:5000/
). You should see the message “Hello World!” displayed, confirming that the root route is working correctly. - To test the API endpoint that predicts tags for text, append
/api/text=
followed by your desired text to the URL in the browser. For example:
http://localhost:5000/api/text="how to print text in python and java"
- Press Enter or Go in the browser. The Flask API will process the text, extract features, and return a JSON response with the input text and the predicted tags.
- Open the
viz_app.py
file in your project directory and define the user interface for your Streamlit application. - The code should include an input box where users can enter text and a button to trigger the prediction (copy/paste the code).
- The Streamlit application will send a request to the Flask API with the entered text and display the predicted tags in the app.
- In the terminal, navigate to the directory where your Streamlit app script (
viz_app.py
) is located. - In your Streamlit application (
viz_app.py
), modify the code to make API calls to the Flask API deployed locally. Update the API endpoint to match your deployed Flask API’s URL (e.g.,http://localhost:5000/
). - Run the Streamlit app using the following command:
streamlit run viz_app.py
- The Streamlit dashboard will load in your browser. Enter text in the input box and click enter. The app will send a request to the Flask API, retrieve the JSON response, and display the predicted tags.
- Create a file named
setup.sh
in the root directory of your project. Thesetup.sh
file should include any necessary setup commands, such as installing dependencies or setting environment variables.
mkdir -p ~/.streamlit
echo "[server]
headless = true
port = $PORT
enableCORS = false
" > ~/.streamlit/config.tomlbashCopy code
- Create a file named
Procfile
(without any file extension). TheProcfile
should contain the command to run your Flask API:
web: gunicorn flask_app:app
- Commit and push the changes, including the
setup.sh
andProcfile
files, to your Git repository. - Connect to your Heroku account and create a new app for your Flask API.
- Follow the Heroku deployment process, which typically involves linking your Git repository to the Heroku app and initiating the deployment.
- In your Streamlit application (
viz_app.py
), modify the code to make API calls to the Flask API deployed on Heroku. Update the API endpoint to match your deployed Flask API’s URL (e.g.,https://your-flask-api.herokuapp.com
). - Test the Streamlit application locally to ensure it successfully communicates with the Flask API deployed on Heroku.
- Modify the existing
Procfile
file in your Streamlit application directory to include any necessary configurations or setup steps specific to your Streamlit application.
web: gunicorn flask_app:app
streamlit: sh setup.sh && streamlit run viz_app.py
- Add the updated
Procfile
,setup.sh
, to your Git repository and push the changes. - Connect to your Heroku account and navigate to the existing Heroku application where you want to deploy the updated Streamlit application.
- In the Heroku dashboard, go to the Deploy tab and choose your deployment method. Select the correct repository and branch.
- Initiate the deployment process. Heroku will detect the changes in your repository and redeploy the application using the updated files.
Conclusion: Congratulations! You have successfully deployed both the Flask API and the Streamlit application locally and on Heroku. Your machine learning model is now accessible through the user-friendly Streamlit dashboard, making it easier for users to interact with your predictions.
Feel free to customize and enhance your applications further to meet your specific project requirements and user needs.