I have deployed an app for a school project with basically takes in a user's handwritten digit and then shows the digit on a screen based on some machine learning algorithm.
The user's handwritten digit is stored as a 28x28 JavaScript array and is sent back to the flask app through a post request:
submit_button.onclick = () => {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState == XMLHttpRequest.DONE) {
window.location.replace("/");
}
};
xhr.open("POST", "/submit");
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify(printGrid()));
clearGrid();
};
The Flask app then processes the array through a function and updates a global variable digit based on the output of the function:
@app.route("/submit", methods=['POST'])
def submit():
global digit
digit = process_digit(request.get_json())
return "ok"
The "/" route then returns an updated html template with the digit.
In the development server the webpage does what I expect it to do and only reloads once the digit has been processed based on the xhr.onreadystatechange I set in the JavaScript file.
However, when deployed to heroku, the webpage reloads a short while after the submit button has been pressed but sometimes the digit shown on the screen would not be updated and I would have to do 1 - 3 reloads for it to show to correct value.
Is there anything I could do to solve this issue? I'm new to web development so if anyone could point me to the right resources or point out the mistakes I have made that would be very much appreciated!
EDIT:
Maybe in short what I would like to ask is this: what is the best way to take input from the user using javascript i.e. the 2D array, send it to a python program for processing and then update the webpage properly based on the output from the python program?
