【AIアプリ開発 Day2】Flask でミニマムに機能を実装する

前回、核となる変換機能が上手くできることが確認できました。

【AIアプリ開発 Day1】画像内の人間をセグメンテーションして、モザイクパターンで埋める

続いて(見た目はとりあえずおいておいて、)「画像をアップロード→変換→結果を表示」というミニマムな機能を Flask で実装して、とりあえず動く物を作りたいと思います。

とはいえ Flask や データベース周りのことはほぼ知識がなく、自分がやりたいことと似たことをやっているこちらのブログを参考にさせていただきました。ありがとうございます。

 

おしながき

・画像をアップロードして POST できる index ページを作成

・app.py でPOSTされた画像を受け取って、変換を行い、result.html にわたす処理を書く

・result.html で結果を表示する

 

まずは html を作成

最低限の見た目のhtml を書いていきます。といっても参考にさせてもらったブログのものほぼそのままです。

<index.html>

ただ画像をアップロードするフォームと送信ボタンだけ。

<result.html>

こちらは、入力画像と出力画像を表示するだけです。

Flask では {{ hogehoge }} とすることで、app.py からhogehoge という値を html に送ることができます。

 

app.py を作成

ここが肝です。

from werkzeug import secure_filename だとエラーを履かれたので、from werkzeug.utils import secure_filename に修正

・post で受け取った画像を cv2 で扱える形に変換するくだりはよくわからずまるまる写すだけになってしまったので勉強しなければ、、。

・day1 でやった時は Pillow で読み込み&リサイズしていたけれど、cv2 に変更

・スタイル画像ははじめから mosaic フォルダに準備しておいてそこから読み込む

・def uploaded_file は result ページで結果画像を表示するために必要。

 

作成したファイルはこのように配置します。

uploads フォルダの中にある画像ファイルはデフォルトは空で、ユーザーがアップロードした画像と変換処理かけた後の画像がそこに保存されます。

mosaic フォルダの中の style 画像は、3 ついれているけれども style1.jpg しか使っていません。これはのちのち選択できるようにしたい。

 

挙動を確認

 

スタイル画像には前回と違いこんなものを用意しました。

それでは挙動を確認します。 python3 app.py した後に、http://127.0.0.1:5000/ こちらにアクセスします。

<index.html>

<result.html>

いい感じにできました!

 

ただし懸念点としては以下 2 つ

・推論時間結構かかる。7, 8秒ほどはちょっと長いので工夫が必要。(今回640px にリサイズしてこの遅さなので、もっと高解像度のもの扱うとしたら時間かかりすぎてしまう)

・640px にリサイズしてからの推論だと、セグメンテーション結果が悪い

 

見た目ももっと凝りたいし、今回のをベースにどんどん改良していこう。

 

(続き)

【AIアプリ開発 Day3】Swiper.js と 無料テンプレートで見栄えを整える