Made withFlaskClip

deploy machine learning model flask | on web page | full tutorial | step by step

P

ProgrammingHut

Creator on the Flask channel

Watch on YouTube ↗

154K viewsJun 12, 202011:19 runtime

Learn how to deploy a machine learning model on a web page with this full, step-by-step tutorial. Using Python and the Flask framework, you will build a responsive website that makes predictions on the Iris flower dataset. This guide covers the essential Flask basics, from…

Chapters

#flask#clip#backend

Project Goal

To build a simple, responsive web application using Flask and Python to host a machine learning model. The application allows users to input flower measurements and receive a prediction for the Iris flower species.

Core Technologies

Python: The core programming language.
Flask: A micro web framework for building the web server.
Scikit-learn: For building the machine learning model (specifically SupportVectorClassifier and LabelEncoder).
Pandas: For data manipulation and reading the CSV dataset.
NumPy: For creating and managing numerical arrays for the model's input.
Pickle: For serializing and saving the trained machine learning model.

Flask Fundamentals

App Initialization: A Flask app is an instance of the Flask class: app = Flask(__name__).
Routing: The @app.route('/') decorator maps a URL endpoint to a Python function that will handle requests to that URL.
Rendering Templates: Instead of writing HTML in Python strings, use render_template('template_name.html') to serve complete HTML files.
Debug Mode: Running the app with app.run(debug=True) automatically reloads the server on code changes, speeding up development.

Note
The debug=True setting is great for development but should not be used in a production environment for security reasons.

Project Structure

A well-organized Flask project separates concerns into different folders:

app.py: The main application file containing the Flask server logic.
templates/: A folder containing all HTML files (e.g., home.html, after.html).
static/: A folder for static assets like images, CSS, and JavaScript files.
model.pkl: The saved machine learning model file.
iris.csv: The dataset used for training.

Machine Learning Model Workflow

Load Data: The Iris dataset is loaded from iris.csv into a Pandas DataFrame.
Preprocess: The target variable (flower species) is a string. LabelEncoder from Scikit-learn is used to convert these string labels into integers (e.g., 'Iris-setosa' -> 0).
Train Model: A SupportVectorClassifier (SVC) is trained on the feature data (X) and the encoded labels (y).
Save Model: The trained model object is serialized and saved to a file (iri.pkl) using pickle. This process, known as pickling, allows the model to be loaded and used later without retraining.

Application Prediction Flow

Load Model: When the Flask application starts, it loads the pre-trained model from the .pkl file.
GET Request: When a user first navigates to the homepage (/), the home() function handles a GET request and renders home.html, which displays the input form.
POST Request: The user fills out the form and clicks 'Submit'. This sends the form data in a POST request back to the same / route.
Process Data: The home() function retrieves the input values from the form (request.form), converts them to a NumPy array, and reshapes it for the model.
Predict: The app calls model.predict() with the user's input data.
Render Result: The prediction result (an integer) is passed to a new template (after.html) using render_template('after.html', data=prediction).

Dynamic Content with Jinja

The after.html template uses the Jinja templating engine to display the results dynamically:

The prediction value is passed from Flask as a variable, e.g., data.
Conditional logic in the HTML ({% if data == 0 %}...{% elif data == 1 %}...{% endif %}) checks the value of the prediction.
Based on the condition, the corresponding flower name (e.g., "Iris setosa") and image are displayed to the user.

Introduction to the Flask ML Web App

Welcome everybody back to this awesome video tutorial where we are going to build this awesome machine learning website using Flask and Python programming language. We are going to make a prediction on our Iris flower dataset. As you could see, this is really responsive and it is working, of course.

Flask Installation and Core Concepts

First of all, you need to install the Flask module. For installing, you need to say pip install flask. Mine is already installed, so I'm gonna close it.

Before starting anything, let me actually explain you some basics of Flask. First of all, we usually import the Flask class from this already installed Flask module. And it's a class, so it will gonna have a capital F in it. Then we create an instance of this Flask class which we have already imported. Then it expects an argument which is __name__. Now, what usually it is? It is basically returns main if you are at a Python script, whereas if you are using it or importing it in any other Python script, then it will gonna return the name of that script. So it is basically that.

Then you would have seen this line so many times, which is if __name__ == '__main__'. As I already told you that, it will gonna return main if we are at the current Python script. So in that, we usually say app.run() which is the instance of this Flask class and it contains a sub-function called run. And you would also have seen debug=True. What it means is that if we make any changes to this file, we do not need to rerun this Python script again and again. It will gonna automatically reload everything and we just have to need to press this refresh button.

Understanding Flask Routing

One more thing which you should know is @app.route(), and it also expects an argument, which is basically this slash (/). Basically, this slash means if we are at the current base directory of our web page, as we are over here. So in this, we usually define a function with any name whichever we want. I'm going to name it like home and it returns something to us. So for an example, let me show you that if I return a heading of sorts by saying <h1>hello</h1>, then if I run this app.basics.py, it will gonna return me this hello heading. Let me show you. Okay, so if I refresh it, you can see over here, it is 'hello'.

All right. Now one more thing. Okay, first of all, if I write here like /home and it will gonna automatically refresh as debug is equals to true, and if I refresh it, it's gonna return me a 404 error, 'Not Found'. Whereas if I put here /home, then I will get that output. All right, I hope that should be clear to you.

Using HTML Templates

One more thing you would have seen is render_template, which we import from this Flask class. What happens is, instead of returning a line of code of HTML, we return a whole HTML file which resides in this templates folder, which is all in lowercase. So as an example, I have this home.html. Okay, let's run this first of all. Okay, over here, finally we got it. So what happened? I am saying that return this whole HTML file. Instead of typing it over here, I have wrote the whole code in another HTML file and am accessing it using render_template. These are some basics which you should know before jumping to create this website.

Project Folder Structure

Now you know these basics, let's jump into the folder structure. What folder structure should be? First of all, we have a static folder in which our images reside which you want to show to the end user. We have templates all in lowercase, and over here we have our HTML files which we want to show to the user. We have a file called app.py. You can name it any name you want; usually people name it as app.py. And in that, our whole code resides, which I have just shown you before. Then over here are my three files, which is my machine learning model and my saved pickle model and my dataset. Okay.

Building and Pickling the ML Model

Let's first see, let's first build our machine learning model. What is happening? I am importing the pandas library for importing my dataset. I am importing NumPy for creating arrays and all that stuff, and I am importing pickle for saving my model. Then I am reading my dataset using pd.read_csv. Let me quickly show you how it looks like. It has four values and the last value is the class of that flower. Now these are in string, keep in mind. So over here I am saying X equals to these first three columns, uh sorry, four columns, and Y equals to the last column.

Now, our machine learning model usually works on an integer dataset, so we need to convert it to integer, as I have shown you it is in a string format. So, I usually do it using LabelEncoder from sklearn.preprocessing and fit transform to Y. This will gonna convert this to zero and another one to one, another one to two, and so on. Then I am using Support Vector Classifier as it's a classification problem, kernel='linear', and fitting that X_train and y_train. And I am saying pickle.dump and dump this model in the iri.pkl in the write binary form. All right.

Integrating the Model into the Flask App

So now we are in our main app.py. We are importing Flask and render_template, and I will talk about the request later. I'm importing pickle to load this model which we have already saved a moment before. And I am importing numpy for creating arrays and that stuff. This you already know what is the meaning of this. And I have already shown you what this does. It says if we are at base, then run this home.html, which is right here. Let's see what is inside of home.html first.

What is inside home.html is our four input fields and one submit button and one big form of all these input fields. Now what happens? I am saying that if I press the submit button, then use the method POST and action=url_for('home'). What does it mean? url_for('home') usually means that whenever I press the submit button, you search for this home function inside my app.py and run that function. What is happening inside my home function is I am requesting for my a, b, c, d input field values, which are this a, b, c, d. I am saying access these values and pass these values to data1, data2, data3, and data4 variables and create an array of these values and send them for prediction, and store that prediction value to this pred variable.

Displaying Predictions with Jinja

Okay, so I have told you what this return means. I am saying return this after.html. Let me quickly show you. If I pass these values to it, and if I press the submit button, this button, then it will gonna take me to this function /predict route and it will gonna return this after.html file and it will gonna also send this data to this HTML. Let me show you how you can access this data.

For using the if for such code inside HTML, we have to create a code block by saying two curly braces and this percentage sign. And in that we pass the statement which you want to run, like if or for or whatever you want. For example, over here I am using an if statement and at the end you need to say endif or endfor, whatever you use. And inside, we pass our whole code which we want to run. Similarly, I'm doing it over here. I'm saying if data == 0. What is data? Data which I have, my pred variable. I am saying if data is equal to 0, then it is Iris setosa. And show this image to user. As it is Iris versicolor and show this image to user. Now I know I have one more class but I have not defined it over here. You can define if you want. And I'm saying endif.

Conclusion

And I'm saying for getting back to the main home page, which you could see a link over here, if I press this, I get back to the home page by sending a / href to this anchor tag.

That is the whole deal, how you can create this machine learning website. Now you can use Bootstrap and CSS styling or JavaScript for creating awesome, stunning websites. You can get this whole code in the down description GitHub repository. Make sure you hit the like button and subscribe to my channel for more such awesome machine learning Flask videos. With this said, I would like to end this video and I'll see you in the next video.