Analytics Vidhya
Published in

Analytics Vidhya

Simple Way To Create A Machine Learning Web App With Flask

the simple and easiest way of creating machine learning web app using flask and w3css framework

magtech dihub

web-apps provide the pragmatic concept of artificial intelligence and data science by giving an opportunity to learners, data scientists, and researchers to deploy and test their algorithms/models and channel their solutions into real-world scenarios and practice.

parts of the tutorial :

1-create and Train a model
2-create web app using Flask framework.
3-Run and Test the app

Here is the web app link,i used w3css to style my app but you can use bootstrap, CSS, or other CSS frameworks to make it look more presentable. you can download the files from my github repo

STEP 1: Create a model

//model name:titanic.pyimport pandas as pd
import numpy as np
import pickle
survival_mapping={1:'survived',0:'Did not survived'}
from sklearn.preprocessing import MinMaxScaler

Train the Model

from sklearn.model_selection import train_test_split
from sklearn.ensemble import RandomForestClassifier
rfc_classifier = RandomForestClassifier(), y_train)

we now save the model as titanic_classifier.pkl using pickle


the titanic_classifier.pkl file which will be used later.

STEP 2: Create a web app using the Flask framework

there are other python frameworks that can be used to create web apps but we are using flask because it is very flexible and easier to use. in this stage we are going to create three files:

  • index.html
  • result.html

the index.html and result.html file is our home and result(prediction) page that contains HTML templates and the styling of the web app while the contains the flask API and the predicted values of the model.

now, let’s write our index.html and result.html files


<!DOCTYPE html>
<html >

<meta charset="UTF-8">
<title>ML API</title>

<link rel="stylesheet" href="{{ url_for('static', filename='w3.css') }}">
<style type="text/css">

.mySlides {display:none;}
<body><div class='w3-padding w3-teal w3-center'><h1>Titanic prediction model</h1></div>
<div class="w3-container">
<div class="w3-padding-18 w3-content w3-section w3-threequarter">
<img class="mySlides" src="{{url_for('static', filename='a1.jpg')}}" style="width:100%;height: 400px;">
<img class="mySlides" src="{{url_for('static', filename='a2.jpg')}}" style="width:100%;height: 400px;">
<img class="mySlides" src="{{url_for('static', filename='a3.jpg')}}" style="width:100%;height: 400px;">
<img class="mySlides" src="{{url_for('static', filename='a4.jpg')}}" style="width:100%;height: 400px;">
<div class="w3-container w3-padding-24 w3-quarter"><div class="w3-card-4 w3-padding-32" style="width:100%;height: 100%;" >
<header class="w3-container w3-center">
<h5 class="w3-center">Alamin Magaga</h5>
<div class="w3-container">

<img src="{{url_for('static', filename='a5.jpg')}}" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<p>Founder of Magtech Dihub,Data scientist,and Web developer</p><br>
<button class="w3-button w3-block w3-dark-grey"><a href="" target="_blank" style="text-decoration:none">+ Connect</a></button>
<div class="w3-container">
<form class="w3-container w3-card-2" action="{{ url_for('predict')}}"method="POST" style="width: 100%">
<h2 class="w3-text-blue w3-center w3-text-teal" >Input Form</h2>
<label class="w3-text-teal"><b>Pclass</b></label>
<input id="id1" class="w3-input w3-border" name="Pclass" placeholder="Pclass" required="required" type="number" ></p>
<label class="w3-text-teal"><b>Sex</b></label>
<input id="id1" class="w3-input w3-border" name="Sex" type="number" placeholder="1:female 0:male" required="required" max="1" min="0"></p>
<label class="w3-text-teal"><b>Age</b></label>
<input id="id1" class="w3-input w3-border" name="Age" type="number" placeholder="Age" required="required"></p>
<label class="w3-text-teal"><b>SibSp</b></label>
<input id="id1" class="w3-input w3-border" name="SibSp" placeholder="SibSp" type="number" required="required"></p>
<label class="w3-text-teal"><b>Parch</b></label>
<input id="id1" class="w3-input w3-border" name="Parch" placeholder="Parch" type="number" required="required"></p>
<label class="w3-text-teal"><b>Fare</b></label>
<input id="id1" class="w3-input w3-border" name="Fare" placeholder="Fare" type="number" required="required"></p>
<label class="w3-text-teal"><b>Embarked</b></label>
<input id="id1" class="w3-input w3-border" name="Embarked" placeholder="Embarked" type="number" required="required"></p>

<button onclick="myFunction()" type="submit" class="btn btn-primary btn-block btn-large w3-text-teal w3-border-teal" style="width:100%;">Predict</button>
var myIndex = 0;
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds



<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='w3.css') }}">
<div class="w3-card-4 w3-teal w3-center w3-padding-32 w3-xxlarge w3-animate-bottom">Titanic Survival Result</div>

<div class="w3-card-4 w3-opacity w3-hover-opacity-off w3-animate-top">
<img class="mySlides" src="{{url_for('static', filename='a2.jpg')}}" style="width:100%">
<div class="w3-center w3-card-4 w3-teal w3-xxlarge w3-padding-24 w3-text-black" >
<h2>{{ prediction_text }}</h2></div>


let us also create file

import numpy as np
from flask import Flask, request, jsonify, render_template
import pickle
app = Flask(__name__)
model = pickle.load(open('titanic_classifier.pkl', 'rb'))
def home():
return render_template('index.html')
def predict():
For rendering results on HTML GUI
int_features = [int(x) for x in request.form.values()]
final_features = [np.array(int_features)]
prediction = model.predict(final_features)
return render_template('result.html', prediction_text='The Passenger {}'.format(prediction[0]))if __name__ == "__main__":


the titanic-web is my main folder containing the static and template subfolders and also the,,titanic_classifier, and the dataset. the titanic_classifier.pkl file was created from the model(

the static folder contains the images and the w3css file which is used for styling the web app

magtech dihub

the templates folder contain the index.html and result.html file

Run the web application using anaconda command prompt.


copy and paste this URL: in your browser

magtech dihub

Here is the Web App:

magtech dihub
magtech dihub




Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem

Recommended from Medium

NLP News Cypher | 09.13.20

What is an Adversarial Attack in Machine Learning and Deep Learning

Yolo-like network for vehicle detection using KITTI dataset

Zero-Knowledge Proof: Hamiltonian Cycle for a Large Graph

Recognizing Handwritten Digits

Research Papers based on AdaBoost method part2(Machine learning)

Get 10 Hours of Free NLP Training

An interview on Quantum Computing

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
Alamin Musa Magaga

Alamin Musa Magaga

Data Scientist |Full stack developer |AI/ML Researcher | @AngelHack student ambassador |Robotics and IOT |founder @Magtech_Dihub | pythonista

More from Medium

2019537 — Data Mining Final

Ethereum growth analysis using Machine Learning and deep learning

The Difference Between Training Data vs. Test Data in Machine Learning

GPT-3 Intruduction