InfinityCodeX


Check out our blogs where we cover topics such as Python, Data Science, Machine Learning, Deep Learning. A Best place to start your AI career for beginner, intermediate peoples.

 

Heart Disease Prediction End to End

 Machine Learning Project

(Interface Creation)

 

FINAL RESULT

Part2: Creating a Web Interface for our Machine Learning Model.

In this part, we are going to create a simple web application using HTML and CSS which will make our model more interactive with the user.

If you haven’t checked our Part1 where we had created our machine learning model to predict heart disease, I will highly recommend you to check that part and then dive into this.

 

Part1:

Heart Disease Prediction End to End  Machine Learning Project 

(Model Creation)

 

Here is the app.py code:

 from flask import Flask, request, render_template  
 import joblib  
 import sklearn  
 import pickle, gzip  
 import pandas as pd  
 import numpy as np  
 app = Flask(__name__)  
 model = joblib.load('Heart_Disease_Prediction.pkl')  
 @app.route('/')  
 def home():  
   return render_template("home.html")  
 @app.route("/predict", methods=["POST"])  
 def predict():  
   age = request.form["age"]  
   sex = request.form["sex"]  
   trestbps = request.form["trestbps"]  
   chol = request.form["chol"]  
   oldpeak = request.form["oldpeak"]  
   thalach = request.form["thalach"]  
   fbs = request.form["fbs"]  
   exang = request.form["exang"]  
   slope = request.form["slope"]  
   cp = request.form["cp"]  
   thal = request.form["thal"]  
   ca = request.form["ca"]  
   restecg = request.form["restecg"]  
   arr = np.array([[age, sex, cp, trestbps,  
            chol, fbs, restecg, thalach,  
            exang, oldpeak, slope, ca,  
            thal]])  
   pred = model.predict(arr)  
   if pred == 0:  
     res_val = "NO HEART PROBLEM"  
   else:  
     res_val = "HEART PROBLEM"  
   return render_template('home.html', prediction_text='PATIENT HAS {}'.format(res_val))  
 if __name__ == "__main__":  
   app.run(debug=True)  

Here is the HTML & CSS code:

 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <meta http-equiv="X-UA-Compatible" content="ie=edge">  
 <!--  <link rel="stylesheet" href="styles.css">-->  
   <title>Heart Disease Prediction</title>  
 </head>  
 <style>  
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');  
 *{  
   margin: 0;  
   padding: 0;  
   box-sizing: border-box;  
   font-family: 'Montserrat', sans-serif;  
   color:black;  
 }  
 body{  
   background: url("https://cdn.pixabay.com/photo/2016/08/10/20/26/stethoscope-1584223_1280.jpg") no-repeat top center;  
   padding: 0 10px;  
   background-size: cover;  
 }  
 .wrapper{  
   max-width: 500px;  
   width: 100%;  
   background: rgba(0, 0, 0, 0.7);  
   margin: 20px auto;  
   padding: 30px;  
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1.25);  
 }  
 .wrapper .title{  
   font-size: 24px;  
   font-weight: 700;  
   margin-bottom: 25px;  
   color: #fec107;  
   text-transform: uppercase;  
   text-align: center;  
 }  
 .wrapper .form{  
   width: 100%;  
 }  
 .wrapper .form .input_field{  
   margin-bottom: 15px;  
   display: flex;  
   align-items: center;  
 }  
 .wrapper .form .input_field label{  
   width:80px;  
   font: bold;  
   color: wheat;  
   margin-right: 10px;  
   font-size: 14px;  
 }  
 .wrapper .form .input_field input{  
   width: 100px;  
 }  
 .wrapper .form .input_field .textarea{  
   resize: none;  
   height: 250px;  
   width: 500px;  
 }  
 </style>  
 <body>  
 <form action="{{ url_for('predict')}}" method="post">  
   <div class="wrapper">  
     <div class="title">  
       <h1 style="color: white;">Heart Disease Prediction</h1>  
     </div>  
     <div class="form">  
       <div class="input_field">  
         <textarea style="color: white; background: rgba(0, 0, 0, 0.3);" class="textarea" readonly>  
 It's a clean, easy to understand set of data. However, the meaning of some of the column headers are not obvious. Here's what they mean,  
 Age: displays the age of the individual.  
 Sex: displays the gender of the individual using the following format :  
 1 = male  
 0 = female  
 Chest-pain type: displays the type of chest-pain experienced by the individual using the following format :  
 0 = typical angina  
 1 = atypical angina  
 2 = non — anginal pain  
 3 = asymptotic  
 Resting Blood Pressure: displays the resting blood pressure value of an individual in mmHg (unit)  
 Serum Cholestrol: displays the serum cholesterol in mg/dl (unit)  
 Fasting Blood Sugar: compares the fasting blood sugar value of an individual with 120mg/dl.  
 If fasting blood sugar > 120mg/dl then : 1 (true) else : 0 (false)  
 Resting ECG : displays resting electrocardiographic results  
 0 = normal  
 1 = having ST-T wave abnormality  
 2 = left ventricular hyperthrophy  
 Max heart rate achieved : displays the max heart rate achieved by an individual.  
 Exercise induced angina :  
 1 = yes  
 0 = no  
 ST depression induced by exercise relative to rest: displays the value which is an integer or float.  
 Peak exercise ST segment :  
 1 = upsloping  
 2 = flat  
 3 = downsloping  
 Number of major vessels (0–3) colored by flourosopy : displays the value as integer or float.  
 Thal : displays the thalassemia :  
 0 = normal  
 1 = fixed defect  
 2 = reversible defect  
 Diagnosis of heart disease : Displays whether the individual is suffering from heart disease or not :  
 0 = absence  
 1, 2, 3, 4 = present.  
           </textarea>  
        </div>  
       <div class="input_field">  
         <label>AGE</label>  
         <input type="number" id="age" min="0" max="150" name="age" class="input_text">  
         <br/>  <i style="font-size: 10px; color: white;">(Age: 1 - 150)</i>  
       </div>  
       <div class="input_field">  
         <label>SEX</label>  
          <input type="number" min="0" max="1" name="sex" id="sex" class="input_text">  
          <br/>  <i style="font-size: 10px; color: white;">(Male: 1 & Female: 0)</i>  
        </div>  
        <div class="input_field">  
         <label>CP</label>  
          <input type="number" name="cp" id="cp" min="0" max="3" class="input_text">  
          <br/>  <i style="font-size: 10px; color: white;">(Enter Single Value From Range 0-3)</i>  
        </div>  
        <div class="input_field">  
         <label>TRESTBPS</label>  
          <input name="trestbps" id="trestbps" type="number" min="0" step="1" class="input_text">  
          <br/>  <i style="font-size: 10px; color: white;">(Enter Non-Decimal Value)</i>  
        </div>  
        <div class="input_field">  
         <label>CHOL</label>  
          <input name="chol" id="chol" type="number" min="0" step="1" class="input_text">  
          <br/>  <i style="font-size: 10px; color: white;">(Enter Non-Decimal Value)</i>  
        </div>  
        <div class="input_field">  
         <label>FBS</label>  
          <input type="number" min="0" max="1" name="fbs" id="fbs" class="input_text">  
          <br/>  <i style="font-size: 10px; color: white;">(1 = True; 0 = False)</i>  
        </div>  
        <div class="input_field">  
         <label>RESTECG</label>  
          <input type="number" name="restecg" min="0" max="2" id="restecg" class="input_text">  
          <br/>  <i style="font-size: 10px; color: white;">(Enter Single Value From Range 0-2)</i>  
        </div>  
        <div class="input_field">  
         <label>THALACH</label>  
          <input name="thalach" id="thalach" type="number" min="0" step="1" class="input_text">  
          <br/>  <i style="font-size: 10px; color: white;">(Enter Non-Decimal Value)</i>  
        </div>  
        <div class="input_field">  
         <label>EXANG</label>  
          <input type="number" min="0" max="1" name="exang" id="exang" class="input_text">  
          <br/>  <i style="font-size: 10px; color: white;">(Exercise: 1 = YES; 0 = NO)</i>  
        </div>  
        <div class="input_field">  
         <label>OLDPEAK</label>  
          <input name="oldpeak" id="oldpeak" type="number" min="0" step="0.01" class="input_text">  
          <br/>  <i style="font-size: 10px; color: white;">(Enter Decimal Value)</i>  
        </div>  
        <div class="input_field">  
         <label>SLOPE</label>  
          <input type="number" min="0" max="2" name="slope" id="slope" class="input_text">  
          <br/>  <i style="font-size: 10px; color: white;">(Enter Single Value From Range 0-2)</i>  
        </div>  
        <div class="input_field">  
         <label>CA</label>  
          <input type="number" name="ca" min="0" max="4" id="ca" class="input_text">  
          <br/>  <i style="font-size: 10px; color: white;">(Enter Single Value From Range 0-4)</i>  
        </div>  
        <div class="input_field">  
         <label>THAL</label>  
          <input type="number" name="thal" min="0" max="3" id="thal" class="input_text">  
          <br>  <i style="font-size: 10px; color: white;">(Enter Single Value From Range 0-3)</i>  
        </div>  
        <div class="input_field">  
         <input type="submit" style="color:black; background: skyblue;" id="submit" value="SUBMIT">  
       </div>  
       <div>  
         <center>  
           <h2 style="color: white; margin-bottom:10px;">  
             {{prediction_text}}  
           </h2>  
         </center>  
       </div>  
     </div>  
   </div>  
 </form>  
 </body>  
 </html>  

Go to the visual code or notepad and create an html file name as home.html then paste this above code into it.


Create a new file named requirements.txt and paste below text into that file.

Flask==1.1.2
pandas==1.0.4
numpy==1.18.4
joblib==0.15.1
scikit_learn==0.23.2
gunicorn==20.0.4
Werkzeug==0.16.0
Jinja2==2.10.1
itsdangerous==1.1.0
MarkupSafe==1.1.1

Go to your jupyter notebook folder and create a file and put the below text in that file and remember DO NOT PUT ANY EXTNSIONS TO THAT FILE LIKE: .txt, .css,....

web: gunicorn app:app

Now we are can bring all the files together and save them it to a same location, create a git Repositorie and push that file into that repositorie. Now create a account in heroku and launch our we application.



 So we hope that you enjoyed this project. If you did then please share it with your friends and spread this knowledge. 

Follow us at :

Instagram : 

https://www.instagram.com/infinitycode_x/



Facebook :

https://www.facebook.com/InfinitycodeX/


Twitter :

https://twitter.com/InfinityCodeX1

Heart Disease Prediction End to End Machine Learning Project (Interface Creation) Heart Disease Prediction End to End  Machine Learning Project (Interface Creation) Reviewed by InfinityCodeX on Wednesday, October 14, 2020 Rating: 5

No comments:

No Spamming and No Offensive Language

Powered by Blogger.