So, I have an image classification app that is meant to display an uploaded image along with the prediction or class. I have two template files: index.html and results.html. The flask app is meant to render the result.html when a post request is made, however, it only displays the alt text.
Below is my flask app:
app = Flask(__name__)
UPLOAD_FOLDER = 'static/uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])
def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
@app.route('/')
def index():
return render_template('index.html')
@app.route('/', methods=['POST'])
def upload_file():
if request.method == 'POST':
if 'file' not in request.files:
return redirect(request.url)
file = request.files.get('file')
if file.filename == '':
flash('No selected file')
return redirect(request.url)
if not file:
return
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
img_bytes = file.read()
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
#image_url = url_for('uploaded_file', filename=filename)
class_id, class_name, score = get_prediction(input_img= img_bytes)
return render_template('result.html', class_id=class_id, class_name=class_name, score=score, filename=filename)
@app.route('/display/<filename>')
def display_image(filename):
return redirect(url_for('static', filename='uploads/' + filename), code=301)
In my template file i.e. results.html, I have the following code to display the uploaded image alongside the prediction but it only shows the prediction without an image:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<link rel="stylesheet" href="/static/style.css">
<title>Prediction using ResNet</title>
</head>
<body class="text-center">
<form class="form-signin" method=post enctype=multipart/form-data>
<img class="mb-4" src="{{ url_for('display_image', filename=filename) }}" alt="no image found" width="300" height="300">
<h1 class="h3 mb-3 font-weight-normal">Results</h1>
<h5 class="h5 mb-3 font-weight-normal">Prediction: {{ '{} ({:.4f})'.format(class_name, score) }}</h5>
<h5 class="h6 mb-3 font-weight-normal">Prediction ID: {{ class_id }}</h5>
<p class="mt-5 mb-3 text-muted">Built using Pytorch, Flask and Joy</p>
</form>
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
This displays the alt text i.e no image found. Kindly assist with suggestions. Thanks.
