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

问题描述 投票:0回答:1

我运行了一个预测图像是湖泊还是海洋的模型。我已经能够在我上传图像的本地主机上成功地提供此模型,并预测班级(海洋或湖泊)以及概率/置信度。我可以返回该结果,或者我可以返回图像,但由于某种原因,我无法返回图像和预测结果。

我搜索了stackoverflow和github,并根据评论代码尝试了许多不同的东西。我可以从网络上显示图像,但我无法显示上传的图像。我已经阅读并利用了Github的代码,但只返回没有预测结果的图像

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% 然后当pic不在时,pic的图标

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

image flask view predict
1个回答
0
投票

只需将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()视图生成的字符串,因此浏览器知道从哪里加载图像以填充HTML页面中的<img />标记。

© www.soinside.com 2019 - 2024. All rights reserved.