Как мне просмотреть и прогноз, и изображение на одной странице в Flask?

#image #flask #view #predict

#изображение #flask #Вид #прогнозировать

Вопрос:

Я запустил модель, которая предсказывает, является ли изображение озером или океаном. Я смог успешно обслуживать эту модель на своем локальном хосте, куда я загружаю изображение, и оно предсказывает класс (океан или озеро), а также вероятность / достоверность. Я могу вернуть этот результат или я могу вернуть изображение, но по какой-то причине я не могу вернуть и изображение, и результат прогнозирования.

Я искал 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%
Затем значок рисунка, когда рисунка там нет

Возвращает результат

Я хотел бы показать изображение, которое было загружено вместе с результатами.

Ответ №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}} синтаксис, для этого потребуется использовать функцию шаблона Jinja2 в Flask.

image_url это строка, которую вы сгенерировали для uploaded_file() представления, поэтому браузер знает, откуда загрузить изображение, чтобы заполнить <img /> тег на HTML-странице.

Комментарии:

1. Спасибо!! Это сработало, очень ценится. Также спасибо за объяснение, которое делает это более понятным.