はじめに

はじめまして。金丸と申します。
プログラミングスクールで学んだことを活かして「ブタクサチェッカー」なるアプリを作ってみました。
「ブタクサ」と「セイタカアワダチソウ」という似ている植物を、機械学習した予測モデルで2値分類するWebアプリです。

開発言語

HTML5
CSS3
Python3.11.8

フレームワーク

Django4.2.1
Bootstrap5.3

ライブラリ

jQuery3.5.1
tensorflow2.12.0
Pillow9.5.0
numpy1.23.5
selenium4.31.0
webdriver-manager4.0.2

ツール

GoogleColaboratory
ColorHunt
diagrams.net(旧: draw.io)
ChatGPT

データ集め

最初の作業として、予測モデルを作成するために、Webスクレイピングを行いました。こちらの記事（【Pythonスクレイピング】Google画像検索から画像を自動保存してみた【コピペOK】）を参考にChatGPTやインストラクター様から手助けをもらい、「ブタクサ」と「セイタカアワダチソウ」の画像データを合わせて約800枚集めることができました。
参考までにコードを載せておきます。このコードは画像検索したいキーワードを入力して、そのキーワードをgoogle画像検索して集めるコードです。

import os
import requests
from selenium.webdriver import Chrome, ChromeOptions
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from time import sleep

# Selenium設定（ヘッドレスモード）
options = ChromeOptions()
options.add_argument("--headless")
options.add_argument("--disable-gpu")
options.add_argument("--window-size=1920,1080")
service = Service()
service.creation_flags = 0x08000000
browser = Chrome(options=options, service=service)

# Google画像検索ページにアクセス
url = "https://www.google.co.jp/imghp?hl=ja"

try:
    browser.get(url)
    # 検索ボックスが現れるまで待機
    kw_search = WebDriverWait(browser, 10).until(
        EC.presence_of_element_located((By.NAME, "q"))
    )

except Exception as e:
    print(f"検索ボックスが見つかりませんでした: {e}")
    browser.quit()
    exit()

# 検索キーワード入力
keyword = input("画像検索したいキーワードを入力してください！：")

kw_search.send_keys(keyword)
kw_search.send_keys(Keys.ENTER)

# 画像URLを取得するためのリストと取得枚数の目標
img_urls = set()  # 重複防止のためset利用
target_count = 400
scroll_pause = 2
max_attempts = 50  # ループ回数の上限

attempt = 0
thumbnail_num = 0
while thumbnail_num < target_count and attempt < max_attempts:

    attempt += 1
    # スクロール
    browser.execute_script("window.scrollTo(0, document.body.scrollHeight);")
    sleep(scroll_pause)
    
    # ページ内の「もっと見る」ボタンがあればクリックする
    try:
        # ボタンの文言やxpathは変更される可能性があるため、表示されていればクリック
        show_more = browser.find_element(By.CSS_SELECTOR, ".mye4qd")
        if show_more.is_displayed():
            show_more.click()
            sleep(scroll_pause)
    except Exception:
        # ボタンがない場合は無視
        pass

    # 現在表示されている画像要素を取得し、src属性にhttpが含まれているものをURLに追加する
    thumbnail_elements = browser.find_elements(By.XPATH, "//a[div[div[div[g-img[img]]]]]")
    thumbnail_num = len(thumbnail_elements)
    print("取得可能画像数：　", thumbnail_num)

# 画像がクリックできるようにTOPに戻る
browser.execute_script("window.scrollTo(0, 0);")
sleep(scroll_pause)

# 画像をクリックして、大きい画像のリンクを取得、蓄積
for img in thumbnail_elements:

    img.click()

    WebDriverWait(browser, 10).until(
        EC.presence_of_element_located((By.CLASS_NAME, "sFlh5c"))
    )
    img_element = browser.find_element(By.CLASS_NAME, "sFlh5c")
    src = img_element.get_attribute("src")
    if src and src.startswith("http"):
        img_urls.add(src)
    
print(f"取得済み画像URL数：{len(img_urls)}")

# 取得したURLをリストに変換し、目標枚数に切り詰める
img_urls = list(img_urls)[:target_count]

# 保存先ディレクトリ
save_dir = r"./img/" + keyword
if not os.path.exists(save_dir):
    os.makedirs(save_dir)

# 画像保存
for idx, url_img in enumerate(img_urls):
    try:
        r = requests.get(url_img, timeout=10)
        if r.status_code == 200:
            file_path = os.path.join(save_dir, "{0}_{1:0=3}.jpg".format(keyword, idx+1))
            with open(file_path, "wb") as fp:
                fp.write(r.content)
            print(f"{file_path} を保存しました。")
        else:
            print(f"ステータスコード {r.status_code} で失敗: {url_img}")
        sleep(0.1)
    except Exception as e:
        print(f"エラーが発生しました: {e}")

browser.quit()

簡単な解説（使用方法）

検索方法

# 検索キーワード入力
keyword = input("画像検索したいキーワードを入力してください！：")

kw_search.send_keys(keyword)
kw_search.send_keys(Keys.ENTER)

# 実行時（例 ブタクサ）
# PS C:\myapp\myenv> python .\scraping\scraping.py
# 画像検索したいキーワードを入力してください！：ブタクサ

この例では、コンソール画面に「ブタクサ」と入力しています。

取得したい画像枚数

target_count = 400

「target_count」に必要な画像データの枚数を指定します。
今回は、400枚欲しかったので、target_count = 400にしました。

# 保存先ディレクトリ
save_dir = r"./img/" + keyword
if not os.path.exists(save_dir):
    os.makedirs(save_dir)

# 実行時（例）
# myapp/img/ブタクサ

現在いるディレクトリに「img/keyword」ディレクトリがなければ作成する処理です。

データの前処理

データを集めることができたので、集めたデータの前処理を行いました。以下の点に気を付けて、データの選別を行いました。

人や文字が中心に映っている写真
イラスト
対象とするデータかどうか判別が難しい写真
データの前処理に苦労したので、一つずつ解説していきます。

人や文字が中心に映っている写真

この例では、画面左側に確かにブタクサの写真が入っています。しかし、画面右側には関係のない「文字」や「人」が混ざり込んでしまい、その部分も学習してしまうためデータには適していません。

イラスト

イラストは

「抽象化」や「デフォルメ」が強い
「現実の法則」や「一貫性」が保証されない
絵柄や表現の多様性が高すぎて、同じクラスでも特徴がバラバラになりやすい
といった理由からデータセットしては不適とされることが多いです。

対象とするデータかどうか判別が難しい写真

ブタクサには葉がギザギザという特徴があるのですが、この写真は上記2つの画像と比べると、葉がやや丸く雄花や雌花もないため、このようなデータは取り除いた方が無難です。

予測モデルの作成

テストデータと学習用データに振り分け出来たら、GoogleColabを利用して予測モデル作成しました。
学習済みのVGG16を転移学習させて、出力層を2つに絞りました。

VGG16の全結合層以外の取得

from tensorflow.keras.applications.vgg16 import VGG16
vgg16_without_fc = VGG16(weights='imagenet', include_top=False, input_shape=(256, 256, 3))

独自の全結合層の追加

# VGG16のSequentalモデルへの変換
from tensorflow.keras.models import Sequential
model = Sequential()
for layer in vgg16_without_fc.layers:
    model.add(layer)

# VGG16のパラメータ凍結
for layer in model.layers:
    layer.trainable = False

独自の全結合層部分のみの学習

# 独自の全結合層の追加
from tensorflow.keras.layers import Flatten, Dense
model.add(Flatten())
model.add(Dense(256, activation='relu'))
model.add(Dense(2, activation='softmax'))

# 誤差関数、最適化方法、評価指標の設定
model.compile(loss='binary_crossentropy',
          optimizer='adam',
          metrics=['accuracy'])

隠れ層の活性化関数にrelu関数、出力層の活性化関数にソフトマックス関数を使用
誤差関数として二値交差エントロピー誤差（Binary Cross-Entropy Error）を使用
最適化手法としてAdamを、評価指標として正解率（accuracy）を指定
エポック数を6~12,バッチサイズを16,32,64と変更しながら学習

適切なところで学習を完了し、予測モデルを保存しました。

イメージ図

Webアプリの実装

Djangoを使い、以下の手順でWebアプリを実装していきました。

ワイヤーフレーム作成
フォームの作成
ビューの作成
テンプレートの作成

ワイヤーフレーム作成

ここまでの工程で予測モデル作成が完了しましたので、次はWebアプリのワイヤーフレーム作成に取り掛かりました。
シンプルなWebアプリであるため、デザインもシンプルなものにしました。
文字や判別機を中央に配置することを意識して、ColorHuntとdiagrams.netを使いユーザーが見やすいデザインを考えました。

フォームの作成

from django import forms

class ImageUploadForm(forms.Form):
    image = forms.ImageField(label='',
                            widget=forms.ClearableFileInput(attrs={'class': 'custom-file-input'})
    )

画像をアップロードする機能を作るため、Formクラスを継承しクラス変数「image」にフィールドを設定しています。
見た目を整えるためにフィールドオプションに「label」と「widget」を設定しています。

ビューの作成

次に、以下の順でビューの作成をしました。

必要なライブラリのインポート
GETリクエストによるアクセス時の処理の実装
POSTリクエストによるアクセス時の処理の実装

from django.shortcuts import render
from django.conf import settings
from io import BytesIO
from .forms import ImageUploadForm
from tensorflow.keras.models import load_model
from tensorflow.keras.preprocessing.image import load_img
from tensorflow.keras.preprocessing.image import img_to_array
import os

def predict(request):
    if request.method == 'GET':
        form = ImageUploadForm()
        return render(request, 'top.html', {'form': form})
    if request.method == 'POST':
        form = ImageUploadForm(request.POST, request.FILES)
        if form.is_valid():
            img_file = form.cleaned_data['image']
            img_file = BytesIO(img_file.read())
            img = load_img(img_file, target_size=(256, 256))
            img_array = img_to_array(img)
            img_array = img_array.reshape((1, 256, 256, 3))
            img_array = img_array/255
            model_path = os.path.join(settings.BASE_DIR, 'prediction', 'models', 'model.h5') 
            model = load_model(model_path)
            result = model.predict(img_array)
            probabilities = max(result[0].tolist())
            probabilities = round(probabilities * 100)
            if result[0][0] > result[0][1]:
                prediction = 'ブタクサ'
            else:
                prediction = 'セイタカアワダチソウ'
            img_data = request.POST.get('img_data')
            return render(request, 'top.html', {'form': form, 'prediction': prediction, 'img_data': img_data, 'probabilities': probabilities})
        else:
            form = ImageUploadForm()
            return render(request, 'top.html', {'form': form})

必要なライブラリのインポート

from django.shortcuts import render

Djangoが提供する「render」関数をインポートする記述です。「render」関数は、特定のテンプレートとデータを元にHTMLを作成します。

from .forms import ImageUploadForm

先程作成した「ImageUploadForm」クラスをインポートしています。これにより、「views.py」で「ImageUploadForm」クラスを利用できます。

from io import BytesIO

主にデータの取り扱いを担う「io」モジュールの「BytesIO」をインポートしています。アップロードされた画像ファイルを、予測モデルに適した形式へ変換するために使用します。

GETリクエストによるアクセス時の処理の実装

def predict(request):
    if request.method == 'GET':
        form = ImageUploadForm()
        return render(request, 'top.html', {'form': form})

render関数の第3引数に連想配列を指定しています。「top.html」テンプレート内で、「form」変数を活用して画像アップロードフォームを表示できます。

POSTリクエストによるアクセス時の処理の実装

if request.method == 'POST':
        form = ImageUploadForm(request.POST, request.FILES)
        if form.is_valid():
            img_file = form.cleaned_data['image']
            img_file = BytesIO(img_file.read())
            img = load_img(img_file, target_size=(256, 256))
            img_array = img_to_array(img)
            img_array = img_array.reshape((1, 256, 256, 3))
            img_array = img_array/255
            model_path = os.path.join(settings.BASE_DIR, 'prediction', 'models', 'model.h5') 
            model = load_model(model_path)
            result = model.predict(img_array)
            probabilities = max(result[0].tolist())
            probabilities = round(probabilities * 100)

form = ImageUploadForm(request.POST, request.FILES)

POSTリクエストで送信されたデータを引数として「ImageUploadForm」クラスのインスタンスを作成し、「form」変数に代入しています。「request.POST」はファイル以外の送信されたデータ、「request.FILES」は送信されたファイルを意味します。

img_file = form.cleaned_data['image']
img_file = BytesIO(img_file.read())
img = load_img(img_file, target_size=(256, 256))
img_array = img_to_array(img)
img_array = img_array.reshape((1, 256, 256, 3))
img_array = img_array/255

送信された画像データを、4次元の配列に変換し255で割ることで0から1の範囲で正規化しています。

model_path = os.path.join(settings.BASE_DIR, 'prediction', 'models', 'model.h5') 
model = load_model(model_path)
result = model.predict(img_array)
probabilities = max(result[0].tolist())
probabilities = round(probabilities * 100)

予測モデルのファイルパスを生成して、判定した予測結果を百分率に変換しています。

テンプレートの作成

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">判定</button>
  </form>

ユーザーが入力したデータを送信するためのものです。「enctype="multipart/form-data"」は、フォームにファイルアップロードが含まれる場合に記述します。
また、CSRF攻撃を防ぐために{% csrf_token %}を記述しています。formを実装する場合、formタグの内部に配置する必要があります。

終わりに

最後までお読みいただき、誠にありがとうございます。
データの集めに使ったコードや、データの前処理の考え方などが皆様の参考になれば幸いです。
この経験を活かして、次はデータベースや会員登録機能などを実装したWebアプリを開発できるように精進して参ります。

参考にした記事

【Pythonスクレイピング】Google画像検索から画像を自動保存してみた【コピペOK】