I was trying to deploy a machine learning model using Flask, but I can't identify why it won't let me perform a POST request to get my predicted value. Can someone let me know where did I go wrong with my code? I already tried putting request.method == "POST" earlier but my Flask app still throws the error.
app.py
from flask import Flask, render_template, request
import joblib
import numpy as np
model = joblib.load('ml_model_diabetes')
app = Flask(__name__)
# A must at all times
app.config['TEMPLATES_AUTO_RELOAD'] = True
app.debug = True
@app.route("/")
def home():
return render_template('index.html')
@app.route("/diabetesdetection", methods=['POST'])
def diabetesDetection():
numOfPreg = request.form['numOfPreg']
glucose = request.form['glucose']
bloodPressure = request.form['bloodPressure']
skinThickness = request.form['skinThickness']
bmi = request.form['bmi']
diabPedigFunc = request.form['diabPedigFunc']
age = request.form['age']
arr = np.array([[numOfPreg, glucose, bloodPressure, skinThickness, bmi, diabPedigFunc, age]], dtype=float)
pred = model.predict(arr)
return render_template('diabetes.html', data=pred)
@app.route("/heartdisease-detection")
def heartDiseaseDetection():
return render_template('heart.html')
if __name__ == "__main__":
app.run(debug = True)
diabetes.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.101.0">
<title></title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<style>
body {
padding-top: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
</style>
<!-- Bootstrap core CSS -->
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #026440;">
<a class="navbar-brand" href="{{ url_for('home') }}"><img src="https://www.svgrepo.com/show/16084/doctor.svg" width="30" height="30" class="d-inline-block align-top" alt="">
TheAIDoctor</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('home') }}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="row d-flex justify-content-center">
<div class="col-md-6 mt-4">
<div class="card shadow-sm p-3 mb-5 bg-white rounded">
<div class="card-body">
<h3 class="card-title">Diabetes Prediction</h3>
<h6 class="card-subtitle mb-2 text-muted">Please fill in the following form below. You may press <i>Enter</i> to proceed to the next input field</h6>
<form method="POST", action="{{url_for('diabetesDetection')}}">
<div class="row">
<div class="col-md-6">
<div class="form-group mt-4">
<label for="exampleFormControlInput1">Number of pregnancies</label>
<input type="text", name="numOfPreg", class="form-control" tabindex="1">
</div>
</div>
<div class="col-md-6">
<div class="form-group mt-4">
<label for="exampleFormControlSelect1">Glucose</label>
<input type="text", name="glucose", class="form-control" tabindex="2">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group mt-4">
<label for="exampleFormControlSelect2">Blood pressure</label>
<input type="text", name="bloodPressure", class="form-control" tabindex="3">
</div>
</div>
<div class="col-md-4">
<div class="form-group mt-4">
<label for="exampleFormControlTextarea1">Skin thickness</label>
<input type="text" name="skinThickness" class="form-control" tabindex="4">
</div>
</div>
<div class="col-md-4">
<div class="form-group mt-4">
<label for="exampleFormControlTextarea1">BMI</label>
<input type="text" name="bmi" class="form-control" tabindex="5">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mt-4">
<label for="exampleFormControlTextarea1">Diabetes Pedigree Function</label>
<input type="text" name="diabPedigFunc" class="form-control" tabindex="6">
</div>
</div>
<div class="col-md-6">
<div class="form-group mt-4">
<label for="exampleFormControlTextarea1">Age</label>
<input type="text" name="age" class="form-control" tabindex="7">
</div>
</div>
</div>
<div class="row float-right">
<div class="form-group mt-4 mb-4">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</main><!-- /.container -->
<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>
<script>
$(document).on('keypress', 'input,select', function (e) {
if (e.which == 13) {
e.preventDefault();
var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
console.log($next.length);
if (!$next.length) {
$next = $('[tabIndex=1]');
}
$next.focus();
}
});
</script>
</body>
</html>