I am trying to run Python code of PredictedLocation.py in my HTML code index.html but its not working. Although I have deployed predict function in Netlify to call the function, still does not get it where am I making a mistake. PredictedLocation.py code is:
import pandas as pd
from sklearn.ensemble import RandomForestRegressor
import folium
import webbrowser
import tempfile
def filter_data(data, budget, city, property_type):
filtered_data = data.loc[(data['city'] == city) & (data['property_type'] == property_type) & (data['price'] <= budget)]
return filtered_data
def predict_price(filtered_data, period):
features = ['beds', 'baths']
X = filtered_data[features]
y = filtered_data['price']
model = RandomForestRegressor(n_estimators=100, random_state=42)
model.fit(X, y)
predicted_price = model.predict([[3, 2], [4, 3], [3, 2], [4, 3]])
predicted_price_period = predicted_price[int(period)-1]
return predicted_price_period
def predict_location(data, budget, city, property_type):
filtered_data = filter_data(data, budget, city, property_type)
# Get input from user for period
period = input("Enter the period (in months): ")
predicted_price_period = predict_price(filtered_data, period)
# Create map centered on the first property in filtered_data
center_lat = filtered_data.iloc[0]['latitude']
center_lon = filtered_data.iloc[0]['longitude']
map_location = [center_lat, center_lon]
m = folium.Map(location=map_location, zoom_start=15)
# Add markers to the map for each property in filtered_data
for index, row in filtered_data.iterrows():
price = row['price']
lat = row['latitude']
lon = row['longitude']
tooltip = f"Price: {price} PKR"
folium.Marker([lat, lon], tooltip=tooltip).add_to(m)
# Add marker for predicted location
predicted_lat = filtered_data.iloc[0]['latitude'] + 0.001
predicted_lon = filtered_data.iloc[0]['longitude'] + 0.001
predicted_tooltip = f"Predicted Price: {predicted_price_period:.2f} PKR"
folium.Marker([predicted_lat, predicted_lon], tooltip=predicted_tooltip, icon=folium.Icon(color='green')).add_to(m)
# Save map to temporary HTML file
temp_file = tempfile.NamedTemporaryFile(suffix='.html', delete=False)
temp_file.close()
m.save(temp_file.name)
# Open map in browser and display predicted price
webbrowser.open('file://' + temp_file.name, new=2)
print(f"The predicted price for a {property_type.lower()} in {city} with a period of {period} months is approximately {predicted_price_period:.2f} PKR.")
if __name__ == "__main__":
data = pd.read_csv('zameen_data.csv')
budget = int(input("Enter your budget (in PKR): "))
while True:
city = input("Enter the city (Karachi, Lahore, or Islamabad): ")
if city in ["Karachi", "Lahore", "Islamabad"]:
break
print("Invalid input. Please enter a valid city.")
while True:
property_type = input("Enter the property type (Flat, House, Penthouse, Farm House, Lower Portion, Upper Portion, or Room): ")
if property_type in ["Flat", "House", "Penthouse", "Farm House", "Lower Portion", "Upper Portion", "Room"]:
break
print("Invalid input. Please enter a valid property type.")
predict_location(data, budget, city, property_type)
I tried everything to call the function so that my HTML code index.html gives exact same result as my Python code by taking input from users about budget, location, property type and expected period and once the 'submit' button is pressed, it should follow with comment of ''Expected price of xyz property type with latitude and longitude by abc time period will be this..." along with opening of map location to exactly pin the predicted location as per above latitude and longitude info. My HTML code is:
<!DOCTYPE html>
<html>
<head>
<title>Predicted Location and Price</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<style>
.container {
width: 80%;
margin: 0 auto;
}
h1 {
text-align: center;
margin: 20px 0;
}
label {
display: block;
margin-bottom: 10px;
font-size: 18px;
}
input[type="number"], select {
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
}
button[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
}
button[type="submit"]:hover {
background-color: #45a049;
}
.result {
margin-top: 30px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.map-container {
height: 500px;
width: 100%;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Predicted Location and Price</h1>
<form action="/" method="POST">
{% csrf_token %}
<label for="budget">Budget (PKR):</label>
<input type="number" id="budget" name="budget" required><br>
<label for="city">City:</label>
<select id="city" name="city">
<option value="Karachi">Karachi</option>
<option value="Lahore">Lahore</option>
<option value="Islamabad">Islamabad</option>
</select><br>
<label for="property_type">Property Type:</label>
<select id="property_type" name="property_type">
<option value="Flat">Flat</option>
<option value="House">House</option>
<option value="Penthouse">Penthouse</option>
<option value="Farm House">Farm House</option>
<option value="Lower Portion">Lower Portion</option>
<option value="Upper Portion">Upper Portion</option>
<option value="Room">Room</option>
</select><br>
<label for="period">Period (in months):</label>
<input type="number" id="period" name="period" required><br>
<button type="submit">Predict Location and Price</button>
</form>
<div id="result" class="result"></div>
<div id="map" class="map-container"></div>
</div>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css" rel="stylesheet" />
<script>
mapboxgl.accessToken = 'sk.eyJ1IjoibXVzYTc4OSIsImEiOiJjbGY1ZDBzbzgwdHF5M3dvY3F4dGx4a210In0.l-i8jiaS8LWPyXj1ocQiCg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-122.4194, 37.7749],
zoom: 12
});
</script>
</body>
</html>
