function getBathroomsValue() {
var uiBathrooms = document.getElementsByName("uiBathrooms");
for(var i in uiBathrooms) {
if(uiBathrooms[i].checked) {
return parseInt(i)+1;
}
}
return -1;
}
function getBedroomsValue() {
var uiBHK = document.getElementsByName("uiBedrooms");
for(var i in uiBedrooms) {
if(uiBedrooms[i].checked) {
return parseInt(i)+1;
}
}
return -1;
}
function onClickedEstimateRent() {
console.log("Estimated Rent button clicked");
var state = document.getElementById("uiState");
var category = document.getElementById("uiCategory");
var bathrooms = getBathroomsValue();
var bedrooms = getBedroomsValue();
var fee = document.getElementById("uiFee");
var pets_allowed = document.getElementById("uiPets");
var square_feet = document.getElementById("uiSqft");
var cityname = document.getElementById("uiCity");
var with_storage = document.getElementById("uiStorage");
var with_parking = document.getElementById("uiParking");
var with_gym = document.getElementById("uiGym");
var with_pool = document.getElementById("uiPool");
var with_woodfloors = document.getElementById("uiWood_floors");
var with_patio = documnet.getElementById("uiPatio");
var with_clubhouse = document.getElementById("uiClubhouse");
var with_internet = document.getElementById("uiInternet");
var with_gated = document.getElementById("uiGated");
var est_rent = document.getElementById("uiEstimatedRent")
var url = "http://127.0.0.1:5000/Predict";
$.ajax({
type: "POST",
url: "http://127.0.0.1:5000/Predict" , data:JSON.stringify({
state: state.value,
category: category.value,
bathrooms: bathrooms,
bedrooms: bedrooms,
fee: fee.value,
pets_allowed : pets_allowed.value,
square_feet: parseFloat(square_feet.value),
cityname: cityname.value,
with_storage : with_storage.value,
with_parking : with_parking.value,
with_gym : with_gym.value,
with_pool : with_pool.value,
with_woodfloors : with_woodfloors.value,
with_patio : with_patio.value,
with_clubhouse : with_clubhouse.value,
with_internet : with_internet.value,
with_gated : with_gated.value
}),contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data, status) {
console.log(data.estimated_rent);
est_rent.innerHTML = "<h2>" + data.estimated_rent.toString() + " $</h2>";
console.log(status);
}
});
}
window.onload = onClickedEstimateRent;
What I have tried:
I have set up a flask server with saved ML Model to get prediction. I have set up a front end with HTML, CSS and JS using jquery to communicate with the server and get predictions from the saved model in flask server.
I am able to communicate with the server with a postman application to get prediction. But as soon as I try to get the inference through my web page, it gives a key error. I could understand that the problem is with my web page JavaScript code. I am new to web page designing and jquery.
I have been trying to connect the webpage to the backed server to get the predictions, but it does not work. I am new to creating and deploying websites.
Can someone please go through my code and tell me what the problem is.
Thanks in advance.