I want to deploy a regression model that I have obtained from machine learning in python to PythonAnywhere. I have uploaded the html file for the user interface and the python file. But when the data is entered into the website that I have created after pressing the “predict” button, the result is an error (Error in prediction: Unexpected token ‘<‘, “<!doctype “… is not valid JSON).
My html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stock Price Prediction</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #e0e0e0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
text-align: center;
}
h1 {
margin-bottom: 20px;
color: #444;
}
form {
display: flex;
flex-direction: column;
}
label {
margin: 10px 0 5px;
text-align: left;
}
input {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
button {
background-color: #444;
color: white;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>Stock Price Prediction</h1>
<form id="predictionForm">
<label for="Open">Open:</label>
<input type="text" id="Open" name="Open" required><br>
<label for="High">High:</label>
<input type="text" id="High" name="High" required><br>
<label for="Low">Low:</label>
<input type="text" id="Low" name="Low" required><br>
<label for="Adj_Close">Adj Close:</label>
<input type="text" id="Adj_Close" name="Adj_Close" required><br>
<label for="Volume">Volume:</label>
<input type="text" id="Volume" name="Volume" required><br>
<button type="submit">Predict</button>
</form>
<p id="result"></p>
</div>
<script>
document.getElementById('predictionForm').addEventListener('submit', function(event) {
event.preventDefault();
var formData = {
'Open': document.getElementById('Open').value,
'High': document.getElementById('High').value,
'Low': document.getElementById('Low').value,
'Adj_Close': document.getElementById('Adj_Close').value,
'Volume': document.getElementById('Volume').value
};
fetch('/predict', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
})
.then(response => {
if (!response.ok) {
return response.text().then(text => {
throw new Error('Network response was not ok: ' + text);
});
}
return response.json();
})
.then(data => {
if (data.prediction !== undefined) {
window.location.href = '/result?result=' + encodeURIComponent(data.prediction);
} else {
document.getElementById('result').innerText = 'Error in prediction: ' + (data.error || 'Unknown error');
}
})
.catch(error => {
console.error('Error:', error); // Log error to the console
document.getElementById('result').innerText = 'Error in prediction: ' + error.message; // Display error to the user
});
});
</script>
</body>
</html>
My python code
from flask import Flask, request, render_template
import pandas as pd
import joblib
import os
import logging
logging.basicConfig(level=logging.DEBUG)
app = Flask(__name__)
# Memuat model regresi
model_path = os.path.join(os.path.dirname(__file__), 'model_rf.pkl')
model = joblib.load(model_path)
@app.route('/', methods=['GET', 'POST'])
def home():
result = None
if request.method == 'POST':
Date = object(request.form['Date'])
Open = float(request.form['Open'])
High = float(request.form['High'])
Low = float(request.form['Low'])
Adj_Close = float(request.form['Adj_Close'])
Volume = int(request.form['Volume'])
# Mempersiapkan data untuk prediksi
data = pd.DataFrame([[Date, Open, High, Low, Adj_Close, Volume]],
columns=['Date', 'Open', 'High', 'Low', 'Adj_Close', 'Volume'])
# Memprediksi menggunakan model yang dimuat
result = model.predict(data)[0]
logging.debug(f"Predicted result: {result}")
return render_template('index.html', result=result)
@app.route('/predict', methods=['POST'])
def predict():
if request.method == 'POST':
data = request.get_json()
Date = object(request.form['Date'])
Open = float(request.form['Open'])
High = float(request.form['High'])
Low = float(request.form['Low'])
Adj_Close = float(request.form['Adj_Close'])
Volume = int(request.form['Volume'])
# Mempersiapkan data untuk prediksi
data = pd.DataFrame([[Date, Open, High, Low, Adj_Close, Volume]],
columns=['Date', 'Open', 'High', 'Low', 'Adj_Close', 'Volume'])
# Memprediksi menggunakan model yang dimuat
result = model.predict(data)[0]
logging.debug(f"Predicted result: {result}")
return render_template('result.html', result=result)
else:
return "Method not allowed", 405
if __name__ == '__main__':
app.run(debug=True,port=5001)
I don’t really understand coding because I’m still a student
New contributor
dzaky sanjaya is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.