AIのWebアプリを作ろう | やさしいAIの始め方

この記事では、作ったAIをWebアプリにする方法をお教えします。できるだけ簡単にコピペで作ることを目的としますので、詳しいプログラムの解説は省きます。

仕様
作成手順

仕様

ここで作るWebアプリはこんな内容です。

作るもの　：　任意の画像をアップロードすると画像に何が写っているか識別するWebアプリ。
　
使用するAIモデル　：　画像分類型CNN
　
使用する環境　：　パソコン（WindowsまたはMacintosh）、Python、Django※
　
※ DjangoはPythonライブラリの一つで、WebとPythonの橋渡しやWebサーバを提供するものです。以降でインストール方法も書きます。
　
※ 今回はローカルPCでWebサーバを起動します。

作成手順

PC環境

１．下記の記事でパソコンの環境を準備してください。Pythonが使えるようにしましょう。

AIを作ってみよう：環境の準備から

バックエンド（AI）を作る

Webアクセス者からは見えない裏側の仕組みをバックエンドといいます。今回はAIの部分にあたります。

２．下記の記事をそのまま実施してください。画像分類AIを１回実行し、学習済みファイルを作ってください。「model_cnn_cifer.h5」を後ほど利用します。

AIを作ってみよう：画像処理CNN（2/3）

フロントエンドと連携部分を作る

バックエンドに対し、Webアクセス者から見えるページや機能をフロントエンドといいます。

３．Djangoとその他必要なライブラリをインストールします。

pip install django
pip install django-bootstrap4
pip install tensorflow==1.14

pip install django

pip install django-bootstrap4

pip install tensorflow==1.14

４．Djangoの機能を使って、プロジェクトを作成します。

django-admin startproject aipj

1	django-admin startproject aipj

５．作成したプロジェクトの中でアプリを作成します。

cd aipj
python manage.py startapp cnnapp

1 2	cd aipj python manage.py startapp cnnapp

６．アプリフォルダに作られたビュー「views.py」に追記します。ビューはユーザからのhttpリクエストに対する動作ルールを書いたものです。aipj / cnnapp / views.py を開き、次のように変更してください。

from django.http import HttpResponse
from django.shortcuts import render, redirect
from django.template import loader
from .forms import PictForm
from .models import Pict

def index(request):
    template = loader.get_template('cnnapp/index.html')
    context = {'form': PictForm()}
    return HttpResponse(template.render(context, request))

def predict(request):
    if not request.method == 'POST':
        return
        redirect('cnnapp:index')

    form = PictForm(request.POST, request.FILES)
    if not form.is_valid():
        raise ValueError('Form is illegal.')

    pict = Pict(image=form.cleaned_data['image'])
    predicted, rate = pict.predict()

    template = loader.get_template('cnnapp/result.html')

    context = {
        'pict_name': pict.image.name,
        'pict_data': pict.image_src(),
        'predicted': predicted,
        'rate': rate,
    }

    return HttpResponse(template.render(context, request))

from django.http import HttpResponse

from django.shortcuts import render, redirect

from django.template import loader

from .forms import PictForm

from .models import Pict

def index(request):

template = loader.get_template('cnnapp/index.html')

context = {'form': PictForm()}

return HttpResponse(template.render(context, request))

def predict(request):

if not request.method == 'POST':

return

redirect('cnnapp:index')

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

if not form.is_valid():

raise ValueError('Form is illegal.')

pict = Pict(image=form.cleaned_data['image'])

predicted, rate = pict.predict()

template = loader.get_template('cnnapp/result.html')

context = {

'pict_name': pict.image.name,

'pict_data': pict.image_src(),

'predicted': predicted,

'rate': rate,

}

return HttpResponse(template.render(context, request))

７．アプリフォルダに作られたモデル定義「models.py」に追記します。aipj / cnnapp / models.py を開き、次のように変更してください。

from tensorflow.keras.models import Sequential
from tensorflow.keras.layers import Conv2D
from tensorflow.keras.layers import MaxPool2D
from tensorflow.keras.optimizers import Adam
from tensorflow.keras.layers import InputLayer, Dense, Activation, Dropout, Flatten

from django.db import models
import numpy as np
from PIL import Image
import io, base64


class Pict(models.Model):
  image = models.ImageField(upload_to='picture')

  IMAGE_SIZE = 32
  MODEL_FILE_PATH = './carbike/trainedmodel/model_cnn_cifer.h5'
  CLASSES = ['airplane', 'automobile', 'bird', 'cat', 'deer', 'dog', 'frog', 'horse', 'ship', 'truck']
  NUM_CLASSES = len(CLASSES)

  def predict(self):

    # create model
    model = Sequential()
    model.add(InputLayer(input_shape=(32,32,3)))

    model.add(Conv2D(32,3))
    model.add(Activation('relu'))

    model.add(Conv2D(32,3))
    model.add(Activation('relu'))
    model.add(MaxPool2D(pool_size=(2,2)))

    model.add(Conv2D(64,3))
    model.add(Activation('relu'))
    model.add(MaxPool2D(pool_size=(2,2)))

    model.add(Flatten())
    model.add(Dense(1024))
    model.add(Activation('relu'))

    model.add(Dropout(0.5))

    model.add(Dense(self.NUM_CLASSES, activation='softmax'))
    model.compile(optimizer='adam', loss='categorical_crossentropy', metrics=["accuracy"])
    model.summary()

    # predict
    img_data = self.image.read()
    img_bin = io.BytesIO(img_data)
    image = Image.open(img_bin)
    image = image.convert("RGB")
    image = image.resize((self.IMAGE_SIZE, self.IMAGE_SIZE))
    data = np.asarray(image) / 255.0
    X = []
    X.append(data)
    X = np.array(X)

    result = model.predict([X])[0]
    predicted = result.argmax()
    rate = int(result[predicted] * 100)

    print(self.CLASSES[predicted], rate)
    return self.CLASSES[predicted], rate


  def image_src(self):
    with self.image.open() as img:
      base64_img = base64.b64encode(img.read()).decode()

      return 'data:' + img.file.content_type + ';base64,' + base64_img

from tensorflow.keras.models import Sequential

from tensorflow.keras.layers import Conv2D

from tensorflow.keras.layers import MaxPool2D

from tensorflow.keras.optimizers import Adam

from tensorflow.keras.layers import InputLayer, Dense, Activation, Dropout, Flatten

from django.db import models

import numpy as np

from PIL import Image

import io, base64

class Pict(models.Model):

image = models.ImageField(upload_to='picture')

IMAGE_SIZE = 32

MODEL_FILE_PATH = './carbike/trainedmodel/model_cnn_cifer.h5'

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

NUM_CLASSES = len(CLASSES)

def predict(self):

# create model

model = Sequential()

model.add(InputLayer(input_shape=(32,32,3)))

model.add(Conv2D(32,3))

model.add(Activation('relu'))

model.add(Conv2D(32,3))

model.add(Activation('relu'))

model.add(MaxPool2D(pool_size=(2,2)))

model.add(Conv2D(64,3))

model.add(Activation('relu'))

model.add(MaxPool2D(pool_size=(2,2)))

model.add(Flatten())

model.add(Dense(1024))

model.add(Activation('relu'))

model.add(Dropout(0.5))

model.add(Dense(self.NUM_CLASSES, activation='softmax'))

model.compile(optimizer='adam', loss='categorical_crossentropy', metrics=["accuracy"])

model.summary()

# predict

img_data = self.image.read()

img_bin = io.BytesIO(img_data)

image = Image.open(img_bin)

image = image.convert("RGB")

image = image.resize((self.IMAGE_SIZE, self.IMAGE_SIZE))

data = np.asarray(image) / 255.0

X = []

X.append(data)

X = np.array(X)

result = model.predict([X])[0]

predicted = result.argmax()

rate = int(result[predicted] * 100)

print(self.CLASSES[predicted], rate)

return self.CLASSES[predicted], rate

def image_src(self):

with self.image.open() as img:

base64_img = base64.b64encode(img.read()).decode()

return 'data:' + img.file.content_type + ';base64,' + base64_img

８．プロジェクトフォルダに作られたリダイレクトファイル「url.py」に追記します。Webサーバにアクセスされた時、そのURLによって見せるページを定義するものです。aipj / aipj / url.py を次のように変更してください。

"""
コメント部分
"""
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('cnnapp/', include('cnnapp.urls')),
]

"""

コメント部分

"""

from django.contrib import admin

from django.urls import path, include

urlpatterns = [

path('admin/', admin.site.urls),

path('cnnapp/', include('cnnapp.urls')),

]

９．アプリフォルダに新たに「url.py」を作成します。aipj / cnnapp / url.py を作り次のように書いてください。

from django.urls import path

from . import views

app_name ='cnnapp'
urlpatterns = [
    path('', views.index, name='index'),
    path('predict/', views.predict, name='predict'),
]

from django.urls import path

from . import views

app_name ='cnnapp'

urlpatterns = [

path('', views.index, name='index'),

path('predict/', views.predict, name='predict'),

]

１０．動的にWebページを表示するためのhtmlを３つ作成します。aipj / cnnapp / templates / cnnapp / というフォルダを新たに作成してください。その中に、下のファイル名と内容で３つ保存してください。

共通テンプレート　base.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    {% load static %}
    {% load bootstrap4 %}
    {% bootstrap_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'cnnapp/css/style.css' %}">
    {% bootstrap_javascript jquery='full' %}
    <title>画像分類AI | {% block title %}{% endblock %}</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">画像分類AI</a>
    </nav>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

{% load static %}

{% load bootstrap4 %}

{% bootstrap_css %}

{% bootstrap_javascript jquery='full' %}

<title>画像分類AI | {% block title %}{% endblock %}</title>

</head>

<body>

<a class="navbar-brand" href="#">画像分類AI</a>

</nav>

{% block content %}{% endblock %}

</div>

</body>

</html>

トップ画面　index.html

{% extends 'cnnapp/base.html' %}
{% block title %}画像分類AI{% endblock %}

{% block content %}
<div>
    <br>
    <p>画像ファイルを指定し、分類実行ボタンをクリックしてください。</p>
    <form action="{% url 'cnnapp:predict' %}" method="post" class="form" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="form-group">
        <div class="custom-file">
            {{ form.image }}
            <label class="custom-file-label" for="customFile">
                ファイル指定
            </label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">分類実行</button>
    </form> 
</div>
{% endblock %}

{% extends 'cnnapp/base.html' %}

{% block title %}画像分類AI{% endblock %}

{% block content %}

<div>

<br>

<p>画像ファイルを指定し、分類実行ボタンをクリックしてください。</p>

{% csrf_token %}

ファイル指定

</label>

</div>

</form>

</div>

{% endblock %}

結果表示画面　result.html

{% extends 'cnnapp/base.html' %}
{% block title %}画像分類結果{% endblock %}

{% block content %}
<div>
    <h4 class="mt-4 mb-5 border-bottom">画像分類結果</h4>

    <table class='table'>
        <tbody>
            <tr>
                <td>ファイル名</td>
                <td>{{ pict_name }}</td>
            </tr>
            <tr>
                <td>画像ファイル</td>
                <td><img class='preview-img' src={{ pict_data }} ></img></td>
                </tr>
            <tr>
                <td>分類名</td>
                <td>{{ predicted }}</td>
            </tr>
            <tr>
                <td>分類確率</td>
                <td>{{ rate }} %</td>
            </tr>
        </tbody>
    </table>

    <a href = "{% url 'cnnapp:index' %}" class="btn btn-primary">画像指定に戻る</a>

</div>
{% endblock %}

{% extends 'cnnapp/base.html' %}

{% block title %}画像分類結果{% endblock %}

{% block content %}

<div>

<h4 class="mt-4 mb-5 border-bottom">画像分類結果</h4>

<tbody>

<tr>

<td>ファイル名</td>

</tr>

<tr>

<td>画像ファイル</td>

</tr>

<tr>

<td>{{ predicted }}</td>

</tr>

<tr>

</tr>

</tbody>

</table>

<a href = "{% url 'cnnapp:index' %}" class="btn btn-primary">画像指定に戻る</a>

</div>

{% endblock %}

１１．Webページ上で画像を選択するためのフォームを定義します。aipj / cnnapp / forms.py を新たに作り、次のように書いてください。

from django import forms

class PictForm(forms.Form):
    image = forms.ImageField(widget=forms.FileInput(attrs={'class':'custom-file-input'}))

from django import forms

class PictForm(forms.Form):

image = forms.ImageField(widget=forms.FileInput(attrs={'class':'custom-file-input'}))

１２．Djangoがデータベースへアクセスするための設定をします。aipj / aipj / settings.py を開いて次のように追記してください。

INSTALLED_APPS = [
    'django....
    'django....
    'cnnapp.apps.CnnappConfig',      #追記
    'bootstrap4',                    #追記
]

INSTALLED_APPS = [

'django....

'cnnapp.apps.CnnappConfig', #追記

'bootstrap4', #追記

]

１３．aipj / cnnapp / static / cnnapp / css / style.py という中身の無いファイルを作ってください。ファイル構成として必要です。

中身無し

中身無し

１４．aipj / media / pict / というフォルダを作ってください。フォルダ構成として必要です。ファイルは必要ありません。

１５．aipj / cnnapp / trainedmodel / というフォルダを作り、学習済みモデル「model_cnn_cifer.h5」を置いてください。

以上で全てのプログラム作成が完了です。

Webサーバの起動

１６．次のように実行します。しばらく待つとWebサーバが起動します。今回はDjangoに内蔵されている簡易Webサーバを用います。

python manage.py startapp を実行した同じフォルダで次を実行。
python manage.py runserver

しばらく待ち、最後に次が表示されれば成功です。
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

python manage.py startapp を実行した同じフォルダで次を実行。

python manage.py runserver

しばらく待ち、最後に次が表示されれば成功です。

Starting development server at http://127.0.0.1:8000/

Quit the server with CTRL-BREAK.

Webサーバへアクセス

１７．ブラウザを開き、http://127.0.0.1:8000/cnnapp/ へアクセスします。下のようなページが表示されれば、これがAIのWebアプリです。

１８．「ファイル指定」を押し、任意の画像ファイル選択し、「開く」を押します。

１９．「分類実行」を押すと、AIで画像が分類され、結果が出ます。

以上でWebアプリの作成は完了です。

コマンドで動かしていたAIをこうしてWeb化すると、より身近に感じますね。

今回はDjangoに内蔵されている簡易Webサーバと簡易DBを使いました。

Webサーバを公開し多くのアクセスを受ける場合は、負荷に耐えられるようグレードアップしたほうがよいです。WebサーバはNGINXかApacheへ、DBはPostgresがいいでしょう。