Working with user uploaded image in Flask

I've built a model that can take in an image, read it at the pixel level, then decide if the image contains a cat or a dog. For educational purposes, I am now trying to put it into a Flask app (never used Flask before). What I have working so far: User uploads image, image is saved to disk by Flask, image is manipulated and sent to the model, model predicts and I generate an output page from a template. Now I'd like to display the image the user uploaded and I'm running into issues. The applicable code is here:

import flask
from flask import request, render_template
import numpy as np
import pandas as pd
from copy import deepcopy
from werkzeug import secure_filename
from PIL import Image
import catdog

# Initialize the app
app = flask.Flask(__name__)

@app.route("/")
def viz_page():
    with open("frontend.html", 'r') as viz_file:
        return viz_file.read()

@app.route("/uploader", methods=["GET","POST"])
def get_image():
    if request.method == 'POST':
        f = request.files['file']
        sfname = 'images/'+str(secure_filename(f.filename))
        f.save(sfname)

        clf = catdog.classifier()
        #clf.save_image(f.filename)

        return render_template('result.html', pred = clf.predict(sfname), imgpath = sfname)


#--------- RUN WEB APP SERVER ------------#

# Start the app server on port 80
# (The default website port)
app.run(host='0.0.0.0', port=5000, debug=True)

And the template:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Dog vs Cat</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="http://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
      <h3> Prediction: {{ pred }} </h3>
      <br><br>
      <img src={{imgpath}}>
      <script>

      </script>

    </body>
  </html>

What I'm getting back out is the "Prediction: yada yada" part, which is working well. However, the image always comes back blank. When I look it's looking in http://localhost:5000/images/cat.4.jpg which I know means it's not looking in the right place, but I'm not sure how I can dynamically grab the image I want. I found this guide here: How to pass uploaded image to template.html in Flask and I feel like that should be enough to help me, but I'm just not getting what the answers are trying to get me to see. Help would be greatly appreciated.

Bonus question: is it possible to never save the image and just constantly keep it in memory in Flask? Ideally, I'd never save the image, I'd just work with it, then toss it after a prediction was made.

标签： python flask

2条回答

三岁会撩人

2楼-- · 2020-07-17 07:32

Image should be saved in /static folder, so just change saving path to static/images

sfname = 'static/images/'+str(secure_filename(f.filename))

so than HTML template will be ready it will look like this

<img src="/static/images/your_image_here.jpg">

0人赞添加讨论(0) 举报

欢心

3楼-- · 2020-07-17 07:33

Let's take an example of the shopping website, We have the images for the particular product.

inside the model file

from . import db
from flask_login import UserMixin
import os
from flask import url_for
from flask_admin.contrib.sqla import ModelView
from flask_admin import form
from jinja2 import Markup

class Product(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    product_name = db.Column(db.String(50), nullable=False)
    product_description = db.Column(db.String(5000), nullable=False)
    product_price = db.Column(db.Float)
    category_id = db.Column(
        db.Integer,
        db.ForeignKey('category.id'),
        nullable=False)
    images = db.relationship('Image', backref='product', lazy=True)

    def __str__(self):
        return str(self.product_name)


class Image(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    path = db.Column(db.String, unique=True)
    product_id = db.Column(db.Integer, db.ForeignKey('product.id'))

    def __repr__(self):
        return str(self.product)


class ImageView(ModelView):
    """Creating a custom ModelView for the Image Model"""
    def _list_thumbnail(view, context, model, name):
        if not model.path:
            return ''

        return Markup(
            '<img src="%s">' %
            url_for('static',
                    filename=form.thumbgen_filename(model.path))
        )

    column_formatters = {
        'path': _list_thumbnail
    }

    form_extra_fields = {
        'path': form.ImageUploadField(
            'Image', base_path=file_path, thumbnail_size=(200, 100, True))
    }

And in your views goes like this

admin.add_view(ModelView(Product, db.session))
admin.add_view(ImageView(Image, db.session))

0人赞添加讨论(0) 举报

Working with user uploaded image in Flask

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间