So I’m using html Jinja templates to pass in a variable that I calculated in my backend. Basically my Python function takes an image that the user uploads on the front end, tests it against my ML model on IBM Cloud, and based on the returned threshold, I return a string to the front end saying “red” for bad and “green” for good. At the moment when I upload an image, it appends the variable to the DOM just fine, but when I upload a second image, it refreshes the page and the past variable output disappears. How would I go by appending all strings to the DOM? In a nutshell, maintain every image process request on the front end even though the page refreshes on submission.
Current Output (no submissions):
[Upload Image Button]
Current Output (1 submission):
[Upload Image Button]
red
Current Output (2 submissions):
[Upload Image Button]
green
Basically, on each submission, the appended string is overwritten by the next submission, and I want it to look like the following:
Expected output (no submissions):
[Upload Image Button]
Expected output (1 submission):
[Upload Image Button]
red
Expected output (2 submissions):
[Upload Image Button]
red
green
User Manually Refreshes Page:
[Upload Image Button]
(^^^ the page resets)
Snippet from my Python Code:
@app.route('/', methods=['GET', 'POST'])
def upload_file():
marker_color = ''
if request.method == 'POST':
# Grab the file name from POST request
file = request.files['file']
# If filename empty (user didn't upload a file via POST)
if file.filename == '':
flash('No selected file')
return redirect(request.url)
# User selected a file and this file is valid
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
data = send_to_IBM(filename)
parsed_json = json.loads(data)
print(parsed_json)
# Parse the score out of the returned JSON blob. If the threshold is greater
# than 0.6, the send_to_IBM function returns no 'score' index, so the area
# must not be flooded and we indicate it as such w a score of 0 and green marker
try:
score = float(parsed_json["images"][0]["classifiers"][0]["classes"][0]["score"])
print("bad")
marker_color = 'red'
except:
print("good")
score = 0.0
marker_color = 'green'
return render_template('index.html', marker_color = marker_color)
HTML:
<html>
<head>
<title>Test Application</title>
</head>
<body>
<form method=post enctype=multipart/form-data>
<input type=file name=file></br>
<input type=submit value=Upload>
</form>
{{marker_color}}
</body>