pythonとflaskで書いたものをデプロイしたあとに画像を開きたい

Question

モザイクアートを作るプログラムを
PythonとFlaskでつくり、Herokuでデプロイしました．
ローカル環境では、
(変数名:Target)
Target.show()

でフォトが開いていたのですが、
デプロイするとできません．
代わりにどうすればよいのでしょうか．

from flask import Flask, render_template, request
from PIL import Image,ImageFilter
import subprocess
import os
import random
import math
import time
import numpy as np
import glob
import cv2

app = Flask(__name__)

# getのときの処理
@app.route('/', methods=['GET'])
def get():
    return render_template('index.html', \
        title = 'モザイクアートを作ろう', \
        message = '設定してください')

# postのときの処理
@app.route('/', methods=['POST'])
def post():
    SourceDir = request.form['source']
    GoalImage = request.form["goal"]
    OutputImage="output.jpg"
    SourceImageSize=(60,40)

    TargetZoom=11

    used_count = 3


    def __create_tile(org_image,height,width):

        w, h = org_image.size
        RectList=[]
        for y in range(0, math.floor(h / height) + 1):
            for x in range(0, math.floor(w / width) + 1):
                height2 = y * height
                width2 = x * width
                crap_img = org_image.crop((width2, height2, width2 + width, height2 + height))
                RectList.append((crap_img,width2,height2))
        return RectList

    def __clac_hist(img):

        hist_list = []
        color = ['r','g','b']
        images = np.asarray(img)

        for i in enumerate(color):
            hist_list.append(cv2.calcHist([images],[i[0]],None,[256],[0,256]))
        return hist_list

    if __name__=="__main__":

        startTime=time.time()


        target=Image.open(GoalImage)
        target=target.resize(tuple(math.floor(i*TargetZoom) for i in target.size))


        tiles = __create_tile(target,SourceImageSize[1],SourceImageSize[0])

        file_paths = glob.glob(SourceDir+"\*")
        src_hist_dict = {}
        for file_path in file_paths:
            file_name = file_path.split("\")[-1]

            try:
                src_image =  Image.open(file_path).resize(SourceImageSize)
            except Exception:
                continue
            src_hist_dict[file_name] = [src_image,__clac_hist(src_image),0]


        Target=Image.new("RGB",target.size,255)
        print("モザイクアート生成開始")
        while(len(tiles) > 0):
            result = []

            r=random.randrange(len(tiles))
            tileRect=tiles[r]
            del tiles[r]

            tile_hist = __clac_hist(tileRect[0])

            tile_hist = np.array(tile_hist)
            tile_hist = tile_hist.reshape(tile_hist.shape[0] * tile_hist.shape[1], 1)


            for file_name,src_hist in src_hist_dict.items():
                src_hist = np.array(src_hist[1])
                src_hist = src_hist.reshape(src_hist.shape[0] * src_hist.shape[1], 1)

                d = cv2.compareHist(tile_hist, src_hist, cv2.HISTCMP_INTERSECT)
                result.append([d,file_name])
            result.sort(reverse=True)

            Target.paste(src_hist_dict[result[0][1]][0],(tileRect[1],tileRect[2]))

            src_hist_dict[result[0][1]][2] = src_hist_dict[result[0][1]][2] + 1


        Target.show()
        Target.save(OutputImage)
    return render_template("index.html",message="モザイクアート生成完了", abcde=GoalImage)


if __name__=="__main__":
    app.run(debug=True)

Answer 1

Target.show() は動作している PC 上で画像を表示しているので，Heroku に上げれば Heroku 上で開こうとするようなものです．実際にはアクセスしたスマホやパソコン上で開きたいので，画像が表示されないことになります．

ウェブサイトで画像を表示したい場合は，作成した画像を一度保存し，それを表示するような仕組みが考えられます．Heroku　は原則として作成したファイル等を保存することができませんが，数分で消える一時ファイルであれば保存することができます．保存先ディレクトリは /tmp です．

def __clac_hist(img):

    ...

    OutputImage = '/tmp/output.jpg'
    Target.save(OutputImage)
return render_template(..., image_url=OutputImage)

例えば，上記のような処理をして index.html で <img src={{ image_url }} /> とするなどを試してみてはいかがでしょうか．

（追記）

tmpディレクトリを使用するためにルーティング設定が必要なようです．

from flask import Flask, render_template, request, send_from_directory

...

@app.route('/tmp/<path:filename>')
def send_file(filename): 
    return send_from_directory('tmp', filename)

参考
https://stackoverflow.com/questions/48107708/how-do-i-load-image-in-python-flask
https://flask.palletsprojects.com/en/1.1.x/api/#flask.send_from_directory

Comments

[退会済みユーザー]

python:

def __clac_hist(img):

hist_list = []
color = ['r','g','b']
images = np.asarray(img)

for i in enumerate(color):
hist_list.append(cv2.calcHist([images],[i[0]],None,[256],[0,256]))

OutputImage = '/tmp/output.jpg'
Target.save(OutputImage)
return hist_list
return render_template("index.html", message="モザイクアートの生成完了", image_url=OutputImage)

index.html:

<!DOCTYPE html>
<html lang="jn" dir="ltr">
<head>
<meta charset="utf-8">
<title>モザイクアート生成サイト</title>
</head>
<body>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<form action="/" method="POST" enctype="multipart/form-data">
<div>
<label for="name">素材の入ったフォルダ：</label>
<input type="text" id="source" name="source" placeholder="C:xxxx">
</div>
<div>
<label for="name">目標画像：</label>
<input type="text" id="goal" name="goal" placeholder="C:xxxx">
</div>
<div>
<input type="submit" value="モザイクアート生成">
</div>
<div>
<img src={{ image_url }} />
<div>
</form>
</body>
</html>

このようにしたのですが、画像が表示されません。なぜでしょうか？

[mktia]

正確には <img src="{{ image_url }}" /> でした．
実行した際にはブラウザのデベロッパーモードを使用して image_url が出力できていること，画像が保存されていることを確認してみてください．

[退会済みユーザー]

修正し、デベロッパーモードで確認すると
output.jpgは出力されていましたが
not found
になっていました。
何度もすみません。

[mktia]

not foundということは保存がうまくいっていないようです．
OutputImage = './tmp/output.jpg' とするとどうなりますか？

[退会済みユーザー]

同様に、Not Found
The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.
と出てしまいました。

[mktia]

Herokuのログには何か出ていますか？

[退会済みユーザー]

debug モードをオンにすると、
FileNotFoundError: [Errno 2] No such file or directory: './tmp/output.jpg'
というエラーが出ていました。

[mktia]

堂々巡りのようになってしまって申し訳ないですが、ファイルの呼び出しがうまくいっていないのか（パスが違うなど）、もしくは保存が成功していないのかを確認できればと思っています。
https://dashboard.heroku.com/apps/アプリ名/logs で確認できるログをみたときに、print('モザイクアート生成開始') が表示され、その後に Target.save() が動いたときにエラーが発生していれば保存が失敗しており、通っていれば保存はおそらく成功しているので呼び出し方が違う可能性があります。
実行したときにHerokuのダッシュボードでログを確認して save が動いているかどうか確認してみてください。

[退会済みユーザー]

Target.save()にエラーは出ていませんでした。
画像の呼び出しなどを調べたいと思います。

[退会済みユーザー]

すみません。書き直したりしていると
saveにエラーが出るようになりました。
ファイル名はoutput.jpgのはずだと思うのですが、
違うのでしょうか。

[mktia]

OutputImage = "./tmp/output.jpg" としていれば、ファイル名は output.jpg として example.herokuapp.com/tmp 以下に保存されるものだと見ています。
保存時のエラーとは何でしょうか？

参考https://pillow.readthedocs.io/en/stable/reference/Image.html#PIL.Image.Image.save

[退会済みユーザー]

Target.saveに
FileNotFoundError: [Errno 2] No such file or directory: './tmp/output.jpg'
というエラーが出ています。