flaskでの画像認識アプリ作成時のエラー

前提・実現したいこと

flaskにて、簡単な画像認識アプリを作成してます。

何の画像かの結果を返す、result.htmlに遷移する段階にて、
以下のようなエラーが発生して困っております。

pyファイル　または　index.html　または　result.html　の
どちらかがおかしいと考えておりますが、
原因がお分かりの方、教えて頂ければ幸いです。

発生している問題・エラーメッセージ

Bad Request

The browser (or proxy) sent a request that this server could not understand.

pyファイル

import pickle
import numpy as np
from flask import Flask, render_template, request

from keras.models import load_model
import cv2
import numpy as np
from keras.models import load_model
import matplotlib.pyplot as plt
import io

app = Flask(__name__)

# 機械学習モデルの読込
model = load_model("./data/cnn_model.h5")
model.load_weights("./data/cnn_weights.h5")


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/result", methods=["POST"])
def result():
    img_file = request.files["img"]
    f = img_file.stream.read()
    bin_data = io.BytesIO(f)
    file_bytes = np.asarray(bytearray(bin_data.read()), dtype=np.uint8)
    img = cv2.imdecode(file_bytes, cv2.IMREAD_COLOR)
    img = cv2.resize(img, (32, 32))

    in_rows = 32
    in_cols = 32
    in_colors = 3

    labels = [
        'airplane',
        'automobile',
        'bird',
        'cat',
        'deer',
        'dog',
        'frog',
        'horse',
        'ship',
        'truck'
    ]

    img = img.reshape(-1, in_rows, in_cols, in_colors).astype("float32")/255
    r = model.predict(img, batch_size=32, verbose=1)
    res = r[0]
    return render_template("result.html", res=res)

index.html

<!DOCTYPE html>
<html>

<head>
    <title>アプリ</title>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
</head>

<body class="main">

    <div class="heading">
        <h1>画像認識アプリ　Image-Recognition</h1>
    </div>


    <div>
        <form method="post" action="/result">
            <table>
                <tr>
                    <td><input type="file" name="img" placeholder="Image Url"></td>
                </tr>
                <tr>
                    <td><input type="submit" value="Go!"></td>
                </tr>
            </table>
        </form>
    </div>

</body>

</html>

result.html

<!DOCTYPE html>
<html>

<head>
    <title>Result</title>le.css
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
</head>

<body class="main">

    <div class="heading">
        予測結果は...<h1 align="center">{{labels[res.argmax()]}}</h1>
    </div>

</body>

</html>

行動規範の内容に同意します

回答2件

ベストアンサー

考えられるのはimg_file = request.files["img"]にてimgというキーが存在しないケースで提示エラーが発生します。
まずはflaskをデバッグモードで実行して.pyコード上でエラーが発生していないか確認するとよいです。

投稿2020/02/15 11:53

can110

総合スコア38278

masa.taka

2020/02/15 12:29

アドバイスありがとうございます。「imgというキーが存在しないケースで」とのご助言に対し、現在のindex.htmlを上記に追加しました。現在、ご助言を踏まえ、内容を見直しておりますが、上記の記載内容では問題ございますでしょうか。

can110

2020/02/15 13:01

提示コードにおいて具体的にどのような操作をすべきで、その結果どのような動きを期待しているのかがコードのみでは不明ですので何とも云えませんが、まずはアップロードされた画像？のサイズを出力するような簡単なコードを書かれて動作を確認してみてはいかがでしょうか？

行動規範の内容に同意します

恐らく、POSTリクエストに対するレスポンスとしてHTMLを返しているからではないでしょうか。
ブラウザ側がGETリクエストを送っているわけではないので、ブラウザもHTMLを描画することはおそらくないでしょう。
あと、そのエラーとは直接関係はないと思いますが、CSSも読み込めてないのでは？CSSへのアクセスに対する処理が記述されていません。（もしかしたらこのアクセスに対するエラーかも）また、Flaskは静的ファイル（CSS等）を配信することには向いていません。Webサーバーを他で立てることをおすすめします。

投稿2020/02/15 11:39