復習6日目その①_20251127

IT

Day 6：AIアプリ整理（ 絵画分類器&バンドギャップ予測）

🧠 まずは全体のゴール

  • 自分が作ったものであるが2つのAIアプリが「何をしていて」「どう公開できるか」を整理する

  • 以前つくったアプリをブログに移植しました。
  • そして、絵画分類器へのアクセスには、Googleの認証を取り入れました。
  • UIのために、CSSとか、メモリ枯渇のためにいろいろやりすぎで覚えていない部分が多いですが覚えている部分のみ記載します。

ユーザー
↓（WordPressのGoogle認証プラグイン）
WordPressログイン済みユーザー
↓
/kaiga/（NginxがFlaskへ転送）
↓
Flaskアプリが動く

  • WordPress との統合方法の方向性を決める

  • UI（見た目）のイメージを固める

 

絵画分類アプリについて

一言でいえば、機械学習を利用して、ゴッホとカンディンスキーの絵の分類機のWebアプリを作りました。

ユーザー → 画像アップロード → Flask → モデル推論 → 結果返却

2023年1月下旬に作ったものの記事は下記URL

ゴッホとカンディンスキーを判別する絵画分類器を作成してみた #Python – Qiita

ChatGPTの評価、うれしい評価だ。

観点 評価
読みやすさ ⭐⭐⭐⭐☆
MLの理解度 ⭐⭐⭐⭐☆
再現性 ⭐⭐⭐⭐☆
Webアプリ化の説明 ⭐⭐⭐☆☆
現代的な改善ポイント ⭐⭐⭐☆☆
全体としての完成度 80点レベル（とても良い）

以下にChatGPTがこのURLをまとめた内容

 

🎨 絵画分類器（ゴッホ vs カンディンスキー）まとめ

【1】使用したデータセット

  • Kaggle の「Best Artworks of All Time」データセットを使用

  • 使用したクラスは

    • Gogh_2（ゴッホ）

    • Kandinskiy（カンディンスキー）

  • 各クラスは約90枚程度に調整（クラスの偏りを抑えるため）

【2】画像前処理の流れ

  1. cv2.imread で画像を読み込む（BGR形式）

  2. RGB 形式に変換

  3. 100×100ピクセルにリサイズ

  4. [画像データ, ラベル] のペアを作成

  5. データをシャッフルして順序の偏りを防ぐ

最終的に、
「X（画像の配列）」「y（クラスラベル）」としてデータセットを作成する。

【3】データセットの分割

  • データ全体の 80% を学習用

  • 20% をテスト用

  • ラベルは one-hot ベクトル（Gogh: [1,0] / Kandinsky: [0,1] のような形式）

【4】モデル構造（VGG16の転移学習）

● 使用したベースモデル

  • VGG16（ImageNet で事前学習済み）

  • include_top=False（分類器部分は使わず、特徴抽出器だけ使う）

  • 前半19層を凍結（trainable=False）

● 追加した分類器（トップモデル）

  • Flatten（画像特徴量をベクトル化）

  • Dense(256, activation=”sigmoid”)

  • Dropout(0.5)

  • Dense(2, activation=”softmax”)

● 入力サイズ：100×100×3
● 出力：2クラス分類（Gogh / Kandinsky）

【5】学習設定

  • エポック数：30

  • バッチサイズ：32

  • 最適化：SGD

  • 損失関数：categorical_crossentropy

  • 評価指標：accuracy

  • 最終的なテスト精度：約94%

【6】モデル保存とWebアプリ化

学習済みモデルは「model.h5」に保存し、Flask を使って Web アプリ化。

● Flask アプリで行ったこと

  • 画像アップロードフォームを作成

  • アップロード画像を100×100にリサイズ

  • モデルに入力し、予測結果を返す

  • 0ならGogh、1ならKandinskyと判定

  • 結果をブラウザに表示

フォルダ構成の例：

  • app.py（または Kaigashikibetsu.py）

  • model.h5

  • templates/index.html

  • static/css/style.css

  • uploads/（一時保存場所）

【7】今見ると改善したいポイント（メモ）

  • データ拡張（回転・左右反転・明るさ調整など）を入れると精度が上がる

  • 評価指標を accuracy だけでなく「混同行列」も見ると分析しやすい

  • モデルを VGG16 から EfficientNet などに変えると軽量化できる

  • Flask の API 化をすると WordPress から呼び出しやすくなる

 

 今回行ったことは

作業記録は下記URL

https://k-stone.click/2025/11/09/絵画分類器の修正に着手/

ChatGPTにまとめなおしてもらった。

今回の学びの要点は以下

  1. Flaskアプリは Docker 化すれば WordPress と共存できる
  2. Nginx の location /kaiga/ で内部サービスを公開できる
  3. 古い ML ライブラリは Python3.10 だと爆死する
  4. WordPress はAIアプリを“統合UI”として扱える
  5. 2年前の自分のコードを再整理できたのが大成果

 

 

 

 

【今月やったことまとめ】

WordPressから Flask（絵画判定アプリ）を動かすまでの全手順

AWS × Docker × WordPress × Flask

「WordPressの“絵画判定ページ”をクリックしたら、
2年前に作った Flask の 緑ヘッダー＆ひまわり画面がそのまま動いて欲しい」

──そんな願望を、ついに実現しました。

この記事では、
ローカルで作った Flask アプリを AWS EC2（Docker）に載せ、
WordPress と連携して /kaiga/ で動かすまでの手順をまとめます。

最終的に：

WordPress（リンク or 固定ページ）
↓
/kaiga/（Nginxのlocationで中継）
↓
Flask（Dockerコンテナ）
↓
学習済みモデルで画像推論

という構成で、
完全に「あの昔のWebアプリ」が WordPress の一部として動くようになりました。

0. 前提確認：EC2 & Docker & Nginx の状態チェック

まずは EC2 に SSH して、
以下がそろっているか確認。

  • Docker が動くこと

  • docker-compose が使えること

  • 既存の WordPress＋Nginx コンテナがあること

  • コンテナが共通ネットワークで動いていること

  • Nginx コンテナ名（例：wordpress-nginx-1）

ここがグラグラだと全部倒れるので、最初に必ず確認。

1. Flaskアプリ一式を EC2 に配置

ローカルにある以下の ZIP（あなたが2年前に作ったもの）：

TEST20220116-main

これを丸ごと EC2 へ転送し、
/home/ubuntu/kaiga-app/ に配置。

構成例：

/home/ubuntu/kaiga-app/
├─ Kaigashikibetsu.py
├─ model.h5
├─ templates/index.html
├─ static/
├─ uploads/
└─ requirements.txt

昔作ったものが、そのまま蘇る瞬間。

2. Dockerfile を作成（Flaskアプリをコンテナ化）

/home/ubuntu/kaiga-app/Dockerfile

ポイント：

  • ベースイメージ：python:3.10

  • 作った Flask アプリを /app にコピー

  • ポートは 8000

  • ENTRYPOINT は Python スクリプト

最小構成はこんな感じ↓

FROM python:3.10

WORKDIR /app
COPY . /app

RUN pip install –upgrade pip
RUN pip install –r requirements.txt

EXPOSE 8000
CMD [“python”, “Kaigashikibetsu.py”]

3. docker-compose.yml に Flask サービスを追加

既存の WordPress 構成に kaiga を追加。

services:
kaiga:
build: ./kaiga-app
container_name: kaiga
ports:
- "8000:8000"
networks:
- wordpress_net

ポイント：

  • WordPress と同じネットワークに入れること

  • これで nginx → kaiga の通信が成立する

4. Nginx に /kaiga/ の経路を追加

/etc/nginx/conf.d/default.conf（Nginxコンテナ内、Dcker管理の場合は compose のマウント先）

HTTP と HTTPS の両方の server ブロックに：

location /kaiga/ {
proxy_pass http://kaiga:8000/;
}

これで：

https://ドメイン/kaiga/
↓
Nginx が Flaskコンテナに転送

となる。

5. コンテナの起動（build → up）

ビルド：

docker compose build kaiga

起動：

docker compose up -d

ログ：

docker logs -f kaiga

ここで一度、
サーバーが落ちるトラブルが発生。

原因は後述。

6. Flaskアプリをブラウザで確認

https://k-stone.click/kaiga/

成功すると、
2年前に見た 緑の帯 ＋ ひまわり写真の “あの画面” が復活。

  • 画像アップロード

  • 推論

  • 結果表示（Van Gogh or Kandinsky）

がちゃんと動く。

2年前の自分の成果が、Docker×Nginx×WordPressの未来環境で動いているのが感動ポイント。

7. WordPressに反映（リンク or Iframe）

WordPress 側では以下の2つの方法が使える。

A. 固定ページに「絵画判定ページへ」リンク

URL：

/kaiga/

B. ページ内に iframe で埋め込む

<iframe src="/kaiga/" width="100%" height="800"></iframe>

これで WordPress から自然に操作できるようになる。

Flask を“今さら理解した”ポイント

（あなたの文章そのまま）

from flask import Flask, render_template, request

app = Flask(__name__)

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

if __name__ == “__main__”:
app.run(host=‘0.0.0.0’, port=8000)

Flask は：

「PythonスクリプトをそのままWebサーバー化するツール」

という仕組みを、
今になってようやく “腑に落ちた” という理解が進歩。

トラブル発生：requirements.txt が古すぎた問題

2年前の requirements.txt には：

absl-py==0.9.0
tensorflow==2.1.0

など、Python3.10 では完全にビルド不可能なバージョンが多く含まれていた。

→ コンテナビルド中に死ぬ
→ コンテナ起動時に EC2ごと落ちる現象（OOM Kill）

原因は TensorFlow の古いバージョンが巨大で、
ビルド中に EC2 のメモリが枯渇したため。

対策：requirements を最新版に差し替えて解決

必要最小限の構成にすることで成功。

あなたの環境に合わせて最適化した内容↓

  • Flask

  • Pillow

  • TensorFlow Lite ではなく Keras（軽量）

  • numpy

  • scikit-image

  • gunicorn（将来的に必要なら）

軽量化に成功し、コンテナ起動も安定。

 

🎉 加えて、Googleログインを以下の方法で実装した。

 

宿題として考えておくこと

①改善ポイントと今の技術ならどう作るか？

【優先度付き 改善案（絵画分類器）】

優先度 改善項目 内容 理由
高 EfficientNetB0 でモデルを軽量化 VGG16 から EfficientNetB0 へ変更 推論速度とメモリ使用量が大幅に改善し、EC2 が落ちにくくなる
中 CDN（Cloudflare）で画像配信を最適化 WordPress の静的ファイル（画像・CSS・JS）を CDN 経由に変更 表示速度が上がり SEO に有効
中 Flask を API 化し WordPress から Ajax で呼び出す /kaiga/api/predict を作り、非同期で推論のみ返す ページ遷移なしに結果が返せて UX が向上
低 UIデザイン改善（CSS） レイアウト・色・余白の調整 見た目は最後に整えれば良いため優先度は低め

 

②絵画分類器の 以下のようなWeb フロー図の作成

【絵画分類器の処理フロー】

絵画分類アプリの動作は、以下の順序で行われます。

  1. ユーザーが WordPress の「絵画判定ページ」をクリック

  2. Googleログイン（WordPressプラグイン）で認証

  3. 認証済みユーザーだけが /kaiga/ に遷移

  4. Nginx が location /kaiga/ を検知して Flask コンテナへ中継

  5. Flask が index.html を表示

  6. ユーザーが画像をアップロード

  7. Flask が画像を受け取り 100×100にリサイズ

  8. model.h5（VGG16転移学習モデル）に入力

  9. Gogh または Kandinsky を分類