如何在 Flask 的同一页面上同时查看预测和图像？

Question

我有一个运行模型可以预测图像是湖泊还是海洋。我已经能够在我的本地主机上成功地为这个模型提供服务，我在本地主机上上传了一张图片，它预测了 class（海洋或湖泊）以及 probability/confidence。我可以 return 那个结果或者我可以 return 图像，但出于某种原因我不能 return 图像和预测结果。

我搜索了 Whosebug 和 github，并根据评论代码尝试了许多不同的方法。我可以显示来自网络的图像，但无法显示上传的图像。我已经阅读并利用了 Github 中的代码，但只有 return 没有预测结果的图像

from flask import Flask, flash, request, redirect, url_for
import os
from werkzeug import secure_filename

from flask import send_from_directory

UPLOAD_FOLDER = ''
ALLOWED_EXTENSIONS = set(['jpg'])

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER


def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS


@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        # check if the post request has the file part
        if 'file' not in request.files:
            flash('No file part')
            return redirect(request.url)

        file = request.files['file']

        # if user does not select file, browser also
        # submit an empty part without filename
        if file.filename == '':
            flash('No selected file')
            return redirect(request.url)

        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            image = open_image(filename)
            image_url = url_for('uploaded_file', filename=filename)
            #print(learn.predict(image))
            ok = learn.predict(image)
            first = round(ok[2].data.tolist()[0], 4)*100
            second = round(ok[2].data.tolist()[1], 4)*100
            if first > second:
                okp = first
            else:
                okp = second
            #return redirect(url_for('uploaded_file', filename=filename)) I can get this to work
            #return '''url_for('uploaded_file', filename=filename)'''
            #return '''<img src = "{{image}}"/>'''
            #return '''<h1>The prediction is: {}</h1><h1>With a confidence of: {}%'''.format(ok[0], okp)
            return '''<h1>The prediction is: {}</h1><h1>With a confidence of: {}%</h1>
            <img src= "{{image_url}}" height = "85" width="200"/>'''.format(ok[0], okp)
            #return '''<img src = "{{send_from_directory(app.config['UPLOAD_FOLDER'], filename)}}"/>'''



    return '''
    <!doctype html>
    <title>Upload new File</title>
    <h1>Upload a jpg of an Ocean or a Lake</h1>
    <form method=post enctype=multipart/form-data>
      <input type=file name=file>
      <input type=submit value=Upload>
    </form>
    '''

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

if __name__ == '__main__':
    app.run(port=5000, debug=False)

这是我得到的：

预测是：海洋
置信度：94.66%
然后是没有图片时的图片图标

我想显示与结果一起上传的图片。

Answer 1

只需将 image_url 值放入您的 <img href="..."> 属性中：

return '''<h1>The prediction is: {}</h1><h1>With a confidence of: {}%</h1>
<img src="{}" height = "85" width="200"/>'''.format(ok[0], okp, image_url)

您不能使用 {{image_url}} 语法，这需要您使用 Flask 的 Jinja2 模板功能。

image_url 是您为 uploaded_file() 视图生成的字符串，因此浏览器知道从何处加载图像以填充 [=23= 中的 <img /> 标记] 页。

如何在 Flask 的同一页面上同时查看预测和图像？

How do I view both the prediction and the image on the same page in Flask?

image

view

predict

flask