Как просмотреть прогноз и изображение на одной странице во Flask? - PullRequest
Новая
       56

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

0 голосов
/ 05 апреля 2019

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

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

Return Result

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

1 Ответ

0 голосов
/ 05 апреля 2019

Просто поместите значение 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.

...