Placement Prediction App using Flask

Last Updated : 08 Dec, 2023

Machine learning is a widely employed method for making predictions. Numerous algorithms are accessible in different libraries for predictive tasks. In this article, we’ll construct a placement prediction model using Random Forest Classifier with historical data and later we will store that model to .pkl file to integrate it with our Flask app using Python.

Placement Prediction in ML using Flask

The motive behind this project is to predict the chance or probability of students getting placed in campus placement drives. Our motive would be to create a full working application that would make predictions. For all this, we require a basic knowledge of Flask, HTML, and Machine Learning. We’ve taken historical campus placement data and constructed a robust model that can forecast your chances of getting placed.

Topics Covered

Virtual Environment Setup
ML model for predictions
Integration with Flask
Deployment on the local host

Steps for Creating a Placement Prediction App

Step 1: Create a virtual environment

Open Anaconda Navigator and Launch vs-code or open any other IDE like Pycharm. To create a virtual Environment write the following code in the terminal.

python -m venv <enviroment name>

<enviroment name>\Scripts\activate

ing1: to create an environment

Step 2: Create a Predictive model

placement.py

In this code, a dataset (‘Placement_Data_Full_Class.csv’) is loaded using pandas, and Label Encoding is applied to convert categorical variables (gender, ssc_b, hsc_b, hsc_s, degree_t, workex, specialisation, status) into numerical format. Missing values in the ‘salary’ column are filled with the median. The dataset is split into features (X) and target variable (y). A RandomForestClassifier with 26 estimators is trained on the training set, and the resulting model is saved as ‘placement.pkl’ using the pickle module.

Dataset: Dataset link

Python3

import pandas as pd
import numpy as np
import pickle
 
df=pd.read_csv('Placement_Data_Full_Class.csv')
 
from sklearn.preprocessing import LabelEncoder
encoder = LabelEncoder()
df['gender']=encoder.fit_transform(df['gender'])
df['ssc_b']=encoder.fit_transform(df['ssc_b'])
df['hsc_b']=encoder.fit_transform(df['hsc_b'])
df['hsc_s']=encoder.fit_transform(df['hsc_s'])
df['degree_t']=encoder.fit_transform(df['degree_t'])
df['workex']=encoder.fit_transform(df['workex'])
df['specialisation']=encoder.fit_transform(df['specialisation'])
df['status']=encoder.fit_transform(df['status'])
 
df['salary'] = df['salary'].fillna(df['salary'].median())
 
X=df.drop('status',axis=1)
y=df['status']
 
from sklearn.model_selection import train_test_split
X_train,X_test,y_train,y_test = train_test_split(X,y,test_size=0.3,random_state=101)
 
from sklearn.ensemble import RandomForestClassifier
rf=RandomForestClassifier(n_estimators=26)
rf.fit(X_train,y_train)
 
pickle.dump(rf,open('placement.pkl','wb'))

Now, paste the above code into your .py file and run it using python <Name of File>.py in the terminal. After running the code, a .pkl file would be generated.

Output

img2: .pkl file generated

Step 3: Setting up GUI

front.html: This code creates a Flask web application that lets users input data. When users submit the form, the data is used to make predictions with a pre-trained machine learning model. The results are then displayed on a webpage. The ‘placement.pkl’ model is loaded using the ‘pickle’ library.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Placement Prediction</title>
    <style type="text/css">
         h1{ font-size: 60px; 
             text-align: center;
             color: #e32037;
             border: 5px solid black;
             font-family: 'Impact';
             }
 
         body{
         background-size:cover;
  }
 
        legend{font-size: 20px; 
             text-align: center;}
 
         
        .note{color: #FF0000;}
       
 
    </style>
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
 
    <div class="jumbotron">
        <h1 class="display-4">PLACEMENT PREDICTION</h1>
        <p class="lead">Just fill the given details and check your chances of gettting placed.</p>
        <hr class="my-4">
        <p>Fill the details.</p>
        <p class="lead">
            <form method="POST", action="{{url_for('home')}}">
                <fieldset>
                <br>
 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">id</span>
                    </div>
                    <input type ="number" name="id" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">Gender</span>
                    </div>
                    <input  type ="number"  name="gender" min="0" max="1" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">Class 10th Marks</span>
                    </div>
                    <input type ="number"  name="marks1" min="0" max="100" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">Class 10th Boards</span>
                    </div>
                    <input type ="number" name="boards1" min="0" max="1" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">Class 12th Marks</span>
                    </div>
                    <input type ="number"  name="marks2" min="0" max="100" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">Class 12th Boards</span>
                    </div>
                    <input type ="number" name="boards2" min="0" max="1" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">Class 12th Subject/Stream</span>
                    </div>
                    <input type ="number"  name="strm" min="0" max="2" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
                 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">Degree Percentage</span>
                    </div>
                    <input type ="number"  name="deg_p" min="0" max="100" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
                 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">Degree Subject/Stream</span>
                    </div>
                    <input type ="number"  name="deg_s" min="0" max="2" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">Work Experience</span>
                    </div>
                    <input type ="number"  name="wrx" min="0" max="1" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">AMCAT/Employblity Test Score</span>
                    </div>
                    <input type ="number"  name="amcat" min="0" max="100" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">Specialisation</span>
                    </div>
                    <input type ="number" name="sp" min="0" max="1" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
                 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">MBA Percentage</span>
                    </div>
                    <input type ="number" name="mba_p" min="0" max="100" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
 
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="inputGroup-sizing-default">Salary</span>
                    </div>
                    <input type ="number" name="sal"class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
               
               
                <input type="submit" value ="predict!" class="btn btn-primary">
                <a href="{{ url_for('home')}}"></a>
                </fieldset>
                </form>
            
                <fieldset><legend>Note</legend>
                 
                  1. For Gender: press 0 for female and 1 for male<br>
                  2. For Class 10th and 12th Boards: 0 for central and 1 for other<br>
                  3. For Class 12th Subject/Stream: 0 for Commerce 1 for science and 2 for arts<br>
                  4. For degree stream: 0 for Commerce, 1 for other and 2 for science and technology<br>
                  5. For work Experience: 0 for No and 1 for Yes<br>
                  6. MBA Specialisation: 0 for (Finance and Marketing) and 1 for (HR and Marketing)<br>
                 
                </fieldset>
 
        </p>
      </div>
 
</body>
</html>

Output

Screenshot-(508)

home.html: The page displays a result message, which can be either “Congratulations!!!” in green if the prediction is positive or “Sorry!” in red if the prediction is negative. This code also converts the numeric values(input values) into human readable text(e.g., ‘0’ for gender becomes ‘Female’).

HTML

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body bgcolor=#1ff0d0>
 
    <center>
 
        <div class="jumbotron">
            <h1 class="display-4">RESULT</h1>
            <hr class="my-4">
            {%if data == 0%}
             
           <h1 style = "Color : red">Sorry!</h1>
           <h3>You have less chances of getting placed</h3>
      
 
           {%else%}
           <h1 style ="Color : GREEN">Congratulations!!!</h1>
           <h3>You have high chances of getting placed</h3>
     
     
           {%endif%}
 
        <br><br>
        <a href='/'>Go back to home page</a>
        <br><br>
        
            <p class="lead">
               
            </p>
          </div>
 
    </center>
     
 
    <table class="table">
        <thead class="thead-dark">
          <tr>
            <th scope="col">Index</th>
            <th scope="col">Information</th>
            <th scope="col">Value</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>ID</td>
            <td>{{ data1 }}</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Gender</td>
            <td>
              {% if data2 =='0' %}
                {% set data2_new = 'Female' %}
              {% elif data2 == '1' %}
                {% set data2_new = 'Male' %}
              {% else %}
                {% set data2_new = 'Not a valid response' %}
              {% endif %}
               
              {{ data2_new }}
              </td>
        </tr>
 
          <tr>
            <th scope="row">3</th>
            <td>Class 10th Marks</td>
            <td>{{data3}}</td>
            
          </tr>
 
          <tr>
            <th scope="row">4</th>
            <td>Class 10th Boards</td>
            <td>
              {% if data4 =='0' %}
                {% set data4_new = 'Central' %}
              {% elif data4 == '1' %}
                {% set data4_new = 'Other' %}
              {% else %}
                {% set data4_new = 'Not a valid response' %}
              {% endif %}
               
              {{ data4_new }}
 
            </td>
            
          </tr>
          <tr>
            <th scope="row">5</th>
            <td>Class 12th Marks</td>
            <td>{{data5}}</td>
           
          </tr>
          <tr>
            <th scope="row">6</th>
            <td>Class 12th Boards</td>
            <td>
              {% if data6 =='0' %}
                {% set data6_new = 'Central' %}
              {% elif data6 == '1' %}
                {% set data6_new = 'Other' %}
              {% else %}
                {% set data6_new = 'Not a valid response' %}
              {% endif %}
               
              {{ data6_new }}
               
            </td>
            
          </tr>
 
          <tr>
            <th scope="row">7</th>
            <td>Class 12th Subject/Stream</td>
            <td>
            {% if data7 =='0' %}
              {% set data7_new = 'Commerce' %}
            {% elif data7 == '1' %}
              {% set data7_new = 'Science' %}
            {% elif data7 == '2' %}
              {% set data7_new = 'Arts' %}
            {% else %}
              {% set data7_new = 'Not a valid response' %}
            {% endif %}
             
            {{ data7_new }}
 
            </td>
            
          </tr>
          <tr>
            <th scope="row">8</th>
            <td>Degree Percentage</td>
            <td>{{data8}}</td>
           
          </tr>
          <tr>
            <th scope="row">9</th>
            <td>Degree Subject/Stream</td>
            <td>
 
            {% if data9 =='0' %}
              {% set data9_new = 'Commerce and Management' %}
            {% elif data9 == '1' %}
              {% set data9_new = 'Other' %}
            {% elif data9 == '2' %}
              {% set data9_new = 'Science and Technology' %}
            {% else %}
              {% set data9_new = 'Not a valid response' %}
            {% endif %}
             
            {{ data9_new }}
                  
 
            </td>
            
          </tr>
 
          <tr>
            <th scope="row">10</th>
            <td>Work Experience</td>
            <td>
            {% if data10 =='0' %}
              {% set data10_new = 'No' %}
            {% elif data10 == '1' %}
              {% set data10_new = 'Yes' %}
            {% else %}
              {% set data10_new = 'Not a valid response' %}
            {% endif %}
             
            {{ data10_new }}
 
            </td>
            
          </tr>
          <tr>
            <th scope="row">11</th>
            <td>AMCAT/Employblity Test Score</td>
            <td>{{data11}}</td>
           
          </tr>
          <tr>
            <th scope="row">12</th>
            <td>MBA Specialisation</td>
            <td>
            {% if data12 =='0' %}
              {% set data12_new = 'Finance and Marketing' %}
            {% elif data12 == '1' %}
              {% set data12_new = 'HR and Marketing' %}
            {% else %}
              {% set data12_new = 'Not a valid response' %}
            {% endif %}
             
            {{data12_new}}
            </td>
            
          </tr>
          <tr>
            <th scope="row">13</th>
            <td>MBA Percentage</td>
            <td>{{data13}}</td>
            
          </tr>
 
          <tr>
            <th scope="row">14</th>
            <td>Salary</td>
            <td>{{data14}}</td>
            
          </tr>
 
           
        </tbody>
      </table>
       
 
   
 
</body>
 
</html>

Output

Screenshot-(509)

Step 4: App Code

app.py: This app.py creates a Flask web application to serve a machine learning model. Users input data through a form, and the code passes this data to the model to make predictions. The results are then displayed on a web page. The pickle library is used to load the pre-trained model, and Flask handles the web interface and routing.

Python3

from flask import Flask, render_template, request, redirect, url_for
import numpy as np
import pandas as pd
import pickle
 
 
model = pickle.load(open('placement.pkl', 'rb'))
 
app = Flask(__name__)
 
 
@app.route('/', methods=['GET', 'POST'])
def man():
    return render_template('front.html')
 
 
@app.route('/predict', methods=['GET', 'POST'])
def home():
    data1 = request.form['id']
    data2 = request.form['gender']
    data3 = request.form['marks1']
    data4 = request.form['boards1']
    data5 = request.form['marks2']
    data6 = request.form['boards2']
    data7 = request.form['strm']
    data8 = request.form['deg_p']
    data9 = request.form['deg_s']
    data10 = request.form['wrx']
    data11 = request.form['amcat']
    data12 = request.form['sp']
    data13 = request.form['mba_p']
    data14 = request.form['sal']
 
    arr = np.array([[data1, data2, data3, data4, data5, data6, data7, data8,
                     data9, data10, data11, data12, data13, data14]])
    pred = model.predict(arr)
    return render_template('home.html', data=pred, data1=data1, data2=data2, data3=data3,
                           data4=data4, data5=data5, data6=data6, data7=data7, data8=data8,
                           data9=data9, data10=data10, data11=data11, data12=data12,
                           data13=data13, data14=data14)
 
 
if __name__ == "__main__":
    app.run(debug=True)