web application - 流行の科学技術を勝手に追いかけるブログ人工知能仮想現実ブロックチェーン

Flaskを使ってみる

まずはwebアプリフレームワークであるFlaskをインストール

$pip install Flask

2.0.1 が入りました.

次にjinja2もインストールします。

HTMLにpythonを埋め込むテンプレートエンジンというものらしい。

$pip install jinja2

3.0.1 が入っていました。入れた記憶がないが、Flaskをインストールすると勝手にはいるのかな？

構成は

flaskr>templates>index.html, xxx.html

flaskr>__init__.py, main.py, yyy.py

の２系統ある感じする。templatesは決まりなのでフォルダ名を変えてはいけない。

フォルダ構成を作ったらindex.htmlを書いていきましょう。vs code を使っているなら　!　を打つだけで、下のコードが自動的に生成されて便利です。langはenからjaに変えておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

ボディには下記のようなのを入れておきました。

<body>
    <h1>Flaskの使い方</h1>
    <h2>最新情報</h2>
    <p>まだ記事はありません。</p>
</body>

<body>

<h1>Flaskの使い方</h1>

<p>まだ記事はありません。</p>

</body>

次、__initi__.pyです。

意味わからないけど、下記のような呪文を書きます。

インポートするのはflaskモジュールではなくて自分で作ったflaskrです。

from flask import Flask

app = Flask(__name__)

from flask import Flask

app = Flask(__name__)

appはFlaskアプリケーションオブジェクト　というらしいです。

つぎに、main.pyです。今作ったFlaskアプリケーションオブジェクトをインポートします。

トップページ(‘/’)にアクセスしたときに実行する関数を定義します。

# さっき __init__.pyで作ったFlaskインスタンス appをインポートする
# なんでオブジェクトがインポートの対象になるのかは不明
from flaskr import app

# ルーティングという呪文。Flaskの決まりごと。
@app.route('/') # / はルートで、トップURLを表す。
def index():
    # トップ画面にアクセスしたときに実行される
    pass # とりあえずパス

# さっき __init__.pyで作ったFlaskインスタンス appをインポートする

# なんでオブジェクトがインポートの対象になるのかは不明

from flaskr import app

# ルーティングという呪文。Flaskの決まりごと。

@app.route('/') # / はルートで、トップURLを表す。

def index():

# トップ画面にアクセスしたときに実行される

pass # とりあえずパス

トップページにアクセスしたときに、render_templateメソドを使って、index.htmlが表示するようにしましょう。

from flaskr import app

# レンターテンプレートをインポートする
from flask import render_template

@app.route('/')
def index():
    # トップ画面にアクセスしたときに実行される
    return render_template('index.html')

from flaskr import app

# レンターテンプレートをインポートする

from flask import render_template

@app.route('/')

def index():

# トップ画面にアクセスしたときに実行される

return render_template('index.html')

最後に__init__.pyの方にこのmain.pyを呼び出せるようにしておく。

from flask import Flask

app = Flask(__name__)
print(app)

# main.pyをインポートする
import flaskr.main

from flask import Flask

app = Flask(__name__)

print(app)

# main.pyをインポートする

import flaskr.main

さて実行しよう

Flaskアプリの起動方法

CMDの場合

flaskrが入っているフォルダへcd で移動する

set FLASK_APP=flaskr

set FLASK_ENV=development

ここまではできた

flask run　でエラー

powershellの場合

flaskrが入っているフォルダへcd で移動する

env:FLASK_APP=”flaskr”　ですでにエラー

どうしようもない。ﾀﾞﾚｶﾀｽｹﾃ

で、結局どうしたかというと、flask runができないので、直接python main.py　して動かせるようにした。

そうすると、flaskrフォルダの上位へ移動する必要なくなる。

そもそも__init__.pyのimport flaskr.mainも意味わからんし、やめた。

もともと__init__.pyに入れていた app=Flask(__name__)もmain.pyに移動した。

で、最後にapp.run()を入れると、python main.py　で実行できたから、ひとまずは良しとしよう。

from flask import Flask
from flask import render_template

app = Flask(__name__)

# ルーティングという呪文。Flaskの決まりごと。
@app.route('/') # / はルートで、トップURLを表す。
def index():
    # トップ画面にアクセスしたときに実行される
    return render_template('index.html')

app.run()

from flask import Flask

from flask import render_template

app = Flask(__name__)

# ルーティングという呪文。Flaskの決まりごと。

@app.route('/') # / はルートで、トップURLを表す。

def index():

# トップ画面にアクセスしたときに実行される

return render_template('index.html')

app.run()

python:flaskの基本

flaskをちょっといじってみます。

IPアドレスは127.0.0.1:5000がデフォルトとのこと。

トップページ
トップページの下層にページ１
トップページの下層に引数付きのページ２

from flask import Flask           #クラスを作る
from flask import g               # グローバルな値を入れる
from flask import render_template 
from flask import request
from flask import Response


# グローバル宣言
app = Flask(__name__)

# トップページを作成する
@app.route('/')
def toppage():
    return 'this is the toppage!'

# トップページ以下にpage1を作成する
@app.route('/page1')
def page1():
    return 'this is the page1'

# 引数usernameを入れる場合
# 入れない場合も考慮して２個作る
@app.route('/page2')
@app.route('/page2/<username>')
def page2(username=None): # デフォルトにNoneを入れておく
    return 'user :{}'.format(username)

# メイン関数（flaskの実行）
def main():
    app.debug = True
    app.run(host='127.0.0.1', port=5000)

# メイン実行スクリプト
if __name__ == '__main__':
    main()

from flask import Flask #クラスを作る

from flask import g # グローバルな値を入れる

from flask import render_template

from flask import request

from flask import Response

# グローバル宣言

app = Flask(__name__)

# トップページを作成する

@app.route('/')

def toppage():

return 'this is the toppage!'

# トップページ以下にpage1を作成する

@app.route('/page1')

def page1():

return 'this is the page1'

# 引数usernameを入れる場合

# 入れない場合も考慮して２個作る

@app.route('/page2')

@app.route('/page2/<username>')

def page2(username=None): # デフォルトにNoneを入れておく

return 'user :{}'.format(username)

# メイン関数（flaskの実行）

def main():

app.debug = True

app.run(host='127.0.0.1', port=5000)

# メイン実行スクリプト

if __name__ == '__main__':

main()

テンプレートを使ってみます。

同層にディレクトリtemplatesを作成して、その中に下記のようなhtmlファイルを作成します。{% ○○ %} を使うとif文が使用できたりします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>

{% if username %}
Hello {{username}}

{% else %}
Hello

{% endif %}

</body>
</html>

<!DOCTYPE html>

<head>

<title>hello</title>

</head>

<body>

{% if username %}

Hello {{username}}

{% else %}

Hello

{% endif %}

</body>

</html>

pythonファイルにはrender_templateを使用して下記のようにhtmlファイルを呼び出します。

# テンプレートを使う場合 flask.render_template()
@app.route('/page3')
@app.route('/page3/<username>')
def page3(username=None):
    return render_template('hello.html', username=username)

# テンプレートを使う場合 flask.render_template()

@app.route('/page3')

@app.route('/page3/<username>')

def page3(username=None):

return render_template('hello.html', username=username)

次回は、get, post, ,put, delete をやっっていきます。

Web Application: 第１１回　HTMLにTensorFlowを連動させる

やっていきましょう　(´・ω・`)これで一旦終わりにします。

views.py

from django.shortcuts import render
from django.shortcuts import redirect # 追加

# Httpレスポンスをするためのモジュール
from django.http import HttpResponse

# テンプレートファイルを読み込む
from django.template import loader

# forms.pyで定義したPhotoFormクラスを呼び出す
from .forms import PhotoForm

# models.pyで定義したPhotoクラスを呼び出す
from .models import Photo #追加


def index(request):
    # webサイトのindex.html に相当する部分
    # 構造がとても複雑だが、こういうものだと諦めること。
    # 引数としてrequestを受け取る

    # index.htmlを読み込み
    # オブジェクトtemplateを定義する
    template = loader.get_template('carbike/index.html') #追加

    # forms.pyのクラスPhotoFormのインスタンスを作成して、
    # ディクショナリcontextを定義しておく。
    context = {'form':PhotoForm()}

    # オブジェクトtemplateのrender関数に
    # フォームcontextと引数requestを入れて
    # HttpResponseを返す
    return HttpResponse(template.render(context, request)) 

def predict(request):
    # POSTでなければindexへ強制遷移します。
    if not request.method =='POST':
        # return なにも返さない
        print("redirect('carbike:index')が動きます")
        redirect('carbike:index')
    
    # < これ以降はPOSTでデータが取得できている状態 >

    # PhotoFormインスタンスを作成する
    form = PhotoForm(request.POST, request.FILES)

    # 念の為、データが空だったらエラーを返す
    if not form.is_valid():
        raise ValueError('Formが不正です')
    
    # 変数Photo に　画像データを格納する。
    # （別途Photoクラスを作成する必要がある。models.py参照）
    photo = Photo(image=form.cleaned_data['image'])
    print("変数photoにPhoto(image=form.cleaned_data['image'])を格納完了")
    print(photo)

    # 判断結果のリターンをmodels.pyのpredictメソドから取得する
    predicted, percentage = photo.predict()

    # 表示する内容
    template = loader.get_template('carbike/result.html')

    context = {
        'photo_name': photo.image.name,
        'photo_data': photo.image_src(),
        'predicted': predicted,
        'percentage': percentage,
    }

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

from django.shortcuts import render

from django.shortcuts import redirect # 追加

# Httpレスポンスをするためのモジュール

from django.http import HttpResponse

# テンプレートファイルを読み込む

from django.template import loader

# forms.pyで定義したPhotoFormクラスを呼び出す

from .forms import PhotoForm

# models.pyで定義したPhotoクラスを呼び出す

from .models import Photo #追加

def index(request):

# webサイトのindex.html に相当する部分

# 構造がとても複雑だが、こういうものだと諦めること。

# 引数としてrequestを受け取る

# index.htmlを読み込み

# オブジェクトtemplateを定義する

template = loader.get_template('carbike/index.html') #追加

# forms.pyのクラスPhotoFormのインスタンスを作成して、

# ディクショナリcontextを定義しておく。

context = {'form':PhotoForm()}

# オブジェクトtemplateのrender関数に

# フォームcontextと引数requestを入れて

# HttpResponseを返す

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

def predict(request):

# POSTでなければindexへ強制遷移します。

if not request.method =='POST':

# return なにも返さない

print("redirect('carbike:index')が動きます")

redirect('carbike:index')

# < これ以降はPOSTでデータが取得できている状態 >

# PhotoFormインスタンスを作成する

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

# 念の為、データが空だったらエラーを返す

if not form.is_valid():

raise ValueError('Formが不正です')

# 変数Photo に　画像データを格納する。

# （別途Photoクラスを作成する必要がある。models.py参照）

photo = Photo(image=form.cleaned_data['image'])

print("変数photoにPhoto(image=form.cleaned_data['image'])を格納完了")

print(photo)

# 判断結果のリターンをmodels.pyのpredictメソドから取得する

predicted, percentage = photo.predict()

# 表示する内容

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

context = {

'photo_name': photo.image.name,

'photo_data': photo.image_src(),

'predicted': predicted,

'percentage': percentage,

}

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

form.py

# フォームを生成するモジュール
from django import forms

class PhotoForm(forms.Form):
    # 画像をアップロードする機能
    image = forms.ImageField(widget=forms.FileInput(attrs={'class':'custom-file-input'}))

# フォームを生成するモジュール

from django import forms

class PhotoForm(forms.Form):

# 画像をアップロードする機能

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

model.py

from django.db import models

# Create your models here.

import numpy as np #tfよりも先に行っておく

# 追加モジュール
import io, base64 #画像ファイルを数値に変換　ブラウザへ画像を戻す
import tensorflow as tf #追加

# vgg16_predict.pyからモジュールをコピペ
import numpy as np
from PIL import Image
import sys

from tensorflow import keras
from tensorflow.keras.models import load_model

# 推論するセッションの初期化を行っておく
graph = tf.get_default_graph()

class Photo(models.Model):
    # models.Modelを拡張してPhotoクラスを作成する

    # 画像データをアップロードするディレクトリを指定する
    # myproject直下に /media/photos　の２階層ディレクトリを新規作成すこと。
    image = models.ImageField(upload_to='photos')

    # < vgg16 パラメータ >
    # 画像サイズ
    IMAGE_SIZE = 224 

    # モデルファイルを読み込む（別途フォルダ作成が必要）
    # ./car_motorbike/ml_models/vgg16_trans.h5 を作成しておくこと。
    MODEL_FILE_PATH = './car_motorbike/ml_models/vgg16_trans.h5' 
    print('モデルファイルパス読み込み完了')

    # vgg16_predict.pyからコピペ
    # 出力結果のクラスを定義
    classes = ["car", "motorbike"]
    num_classes = len(classes) # クラス数を定義

    def predict(self):
        print('Photo.predictメソド開始')

        # 引数から画像ファイルを参照して読み込む
        # クラスメソドとして定義してあげる
        
        # モデルの初期化
        model = None

        # 毎回同じモデルのセッションにデータを投入するためグローバル変数とする
        global graph
        
        with graph.as_default():

            # 予め定義しておいたMODEL_FILE_PATH からモデルを定義できるようにする
            model = load_model(self.MODEL_FILE_PATH) 

            # 画像データを格納する
            img_data = self.image.read()

            # 画像データをメモリ上に保持して、ファイルのようにアクセスできるよう、
            # バイナリデータに変換する
            img_bin = io.BytesIO(img_data)
            
            # pillow の Imageでバイナリデータを開く
            image = Image.open(img_bin)
       
            # 以下、vgg16_predict.pyからコピペ

            # 画像サイズを定義（VGG16に合うように）
            # image_size = 224 クラスとして定義済み

            # 画像ファイルをコマンドラインの第２引数から開く
            # 今回はimag_binから開くので不要
            # image = Image.open(sys.argv[1]) 

            # 画像ファイルをRGBに変換する
            image = image.convert('RGB')

            # 画像を同じサイズに揃える
            # image = image.resize((image_size, image_size))
            image = image.resize((self.IMAGE_SIZE, self.IMAGE_SIZE))

            # RGB値をnumpy配列に変換する 
            data = np.asarray(image)

            # データを正規化する
            data = data / 255.0

            # リストにappendしてnumpy配列にする
            X = []
            X.append(data)
            X = np.array(X)

            # VGG16_transモデルをロードする
            # model = load_model('./vgg16_trans.h5') すでに上記で行っているので不要

            # VGG16_transモデルにデータを入れて予測結果を返す
            # スコアが配列で帰ってくるので[0]番目をつける
            result = model.predict([X])[0] 

            # 最も大きい数字を採用する
            predicted = result.argmax()
            percentage = int(result[predicted] * 100)

            # プリントする
            print(self.classes[predicted], percentage)

            # 判断結果とパーセンテージをreturnする
            return self.classes[predicted], percentage

    def image_src(self):
        # views.pyの 'photo_data': photo.image.src() へ連動させる
        with self.image.open() as img:
            base64_img = base64.b64encode(img.read()).decode()
            return 'data:' + img.file.content_type + ';base64,' + base64_img

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

from django.db import models

# Create your models here.

import numpy as np #tfよりも先に行っておく

# 追加モジュール

import io, base64 #画像ファイルを数値に変換　ブラウザへ画像を戻す

import tensorflow as tf #追加

# vgg16_predict.pyからモジュールをコピペ

import numpy as np

from PIL import Image

import sys

from tensorflow import keras

from tensorflow.keras.models import load_model

# 推論するセッションの初期化を行っておく

graph = tf.get_default_graph()

class Photo(models.Model):

# models.Modelを拡張してPhotoクラスを作成する

# 画像データをアップロードするディレクトリを指定する

# myproject直下に /media/photos　の２階層ディレクトリを新規作成すこと。

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

# < vgg16 パラメータ >

# 画像サイズ

IMAGE_SIZE = 224

# モデルファイルを読み込む（別途フォルダ作成が必要）

# ./car_motorbike/ml_models/vgg16_trans.h5 を作成しておくこと。

MODEL_FILE_PATH = './car_motorbike/ml_models/vgg16_trans.h5'

print('モデルファイルパス読み込み完了')

# vgg16_predict.pyからコピペ

# 出力結果のクラスを定義

classes = ["car", "motorbike"]

num_classes = len(classes) # クラス数を定義

def predict(self):

print('Photo.predictメソド開始')

# 引数から画像ファイルを参照して読み込む

# クラスメソドとして定義してあげる

# モデルの初期化

model = None

# 毎回同じモデルのセッションにデータを投入するためグローバル変数とする

global graph

with graph.as_default():

# 予め定義しておいたMODEL_FILE_PATH からモデルを定義できるようにする

model = load_model(self.MODEL_FILE_PATH)

# 画像データを格納する

img_data = self.image.read()

# 画像データをメモリ上に保持して、ファイルのようにアクセスできるよう、

# バイナリデータに変換する

img_bin = io.BytesIO(img_data)

# pillow の Imageでバイナリデータを開く

image = Image.open(img_bin)

# 以下、vgg16_predict.pyからコピペ

# 画像サイズを定義（VGG16に合うように）

# image_size = 224 クラスとして定義済み

# 画像ファイルをコマンドラインの第２引数から開く

# 今回はimag_binから開くので不要

# image = Image.open(sys.argv[1])

# 画像ファイルをRGBに変換する

image = image.convert('RGB')

# 画像を同じサイズに揃える

# image = image.resize((image_size, image_size))

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

# RGB値をnumpy配列に変換する

data = np.asarray(image)

# データを正規化する

data = data / 255.0

# リストにappendしてnumpy配列にする

X = []

X.append(data)

X = np.array(X)

# VGG16_transモデルをロードする

# model = load_model('./vgg16_trans.h5') すでに上記で行っているので不要

# VGG16_transモデルにデータを入れて予測結果を返す

# スコアが配列で帰ってくるので[0]番目をつける

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

# 最も大きい数字を採用する

predicted = result.argmax()

percentage = int(result[predicted] * 100)

# プリントする

print(self.classes[predicted], percentage)

# 判断結果とパーセンテージをreturnする

return self.classes[predicted], percentage

def image_src(self):

# views.pyの 'photo_data': photo.image.src() へ連動させる

with self.image.open() as img:

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

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

result.html

<!-- リザルトページを作成します。-->

<!-- テンプレートであるbase.htmlに対して　拡張する宣言をします。-->
{% extends 'carbike/base.html' %}

<!-- タイトル title をbase.htmlに埋め込みます。-->
{% block title %}判定結果{% endblock %}

<!-- 内容 content　をbase.htmlに埋め込みます。-->
{% block content %}
<div>
    <!-- classはbootstrap記法で文字間の調整になる
        mtマージントップ mb マージンボトム 境界線底部 -->
    <h4 class="mt-4 mb-5 border-bottom">車とバイクを判別します。</h4>

    <!-- 判別結果と推定確率のテーブルを設置する -->

    <table class='table'>
        <tbody>
            <tr>
                <td>ファイル名</td>
                <td>{{ photo_name }}</td>
            </tr>
            <tr>
                <td>画像ファイル</td>
                <td><img class='preview-img' src={{ photo_data }}></img></td>
            </tr>
            <tr>
                <td>推定ラベル</td>
                <td>{{ predicted }} </td>
            </tr>
            <tr>
                <td>推定確率</td>
                <td>{{ percentage }} %</td>
            </tr>
        </tbody>
    </table>

    <!-- 戻るボタンを設置する -->
    <a href="{% url 'carbike:index' %}" class="btn btn-primary">画像選択メニューに戻る</a>
 
</div>
{% endblock %}

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

{% block title %}判定結果{% endblock %}

{% block content %}

<div>

<!-- classはbootstrap記法で文字間の調整になる

mtマージントップ mb マージンボトム境界線底部 -->

<h4 class="mt-4 mb-5 border-bottom">車とバイクを判別します。</h4>

<tbody>

<tr>

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

<td>{{ photo_name }}</td>

</tr>

<tr>

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

</tr>

<tr>

<td>推定ラベル</td>

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

</tr>

<tr>

<td>{{ percentage }} %</td>

</tr>

</tbody>

</table>

<a href="{% url 'carbike:index' %}" class="btn btn-primary">画像選択メニューに戻る</a>

</div>

{% endblock %}

実行してみる

conda activate djangoai

cd anaconda_projects

cd djangoai

cd myproject

pythin manage.py runserver

url:http://127.0.0.1:8000/carbike

おわり

いやー疲れました、djangoは難しい。小さなアプリでも多くのファイル間を連携させないと動いてくれないんですね。

今後は、マッチングアプリや遠隔監視カメラなんてものを作ってみたいと思います。

Web Application: 第１０回　HTMLで内容を作成する

前回までで　carbikeのindex画面とpredict画面を生成しました。

今回はhtmlを記述していってwebサイトをかっこよくしていきます。

django-bootstrap4 をインストール

django-bootstrap4を使いますので、

> pip install django-bootstrap4をします。

django-bootstrap4-1.0.1　が入りました。

htmlファイルの作成

/myproject/car_motorbike/ の下に

/templates/carbike/base.html
/templates/carbike/index.html
/templates/carbike/predict.html

というファイルを３つ作成します。

まずはじめに各ページ共通の部分である雛形としてbase.htmlを作成します。

index.htmlとpredict.htmlには各ページ固有の内容を記述して、雛形であるbase.htmlに埋め込んでいくやり方を取ります。

base.html　の作成

各ページ共通の部分である雛形です。

<!DOCTYPE html>
<!-- この base.html　はテンプレートファイルとして作成され、各ページに流用されます。 -->
<html lang="ja">
<head>
    <meta charset="UTF-8">

    <!-- static/carbike/css/style.cssを参照できるようにディレクトリを指定する-->
    {% load static %}

    <!-- django-bootstrap4 と bootstrap_cssを使用する宣言-->
    {% load bootstrap4 %}
    {% bootstrap_css%}

    <!-- ディレクトリstaticの下のcarbike/css/style.cssを読み込む --> 
    <link rel='stylesheet' type="text/css" href="{% static 'carbike/css/style.css' %}">

    <!-- bootstarap_javascript の jquery を読み込む -->
    {% bootstrap_javascript jquery='full' %}

    <!-- 各ページ固有のタイトル title を代入する部分 -->
    <title>Image classification by TensorFlow | {% block title %}{% endblock %}</title>

</head>

<body>
    <!-- ナビゲーションバーを設置する -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navber-brand" href="#">Image classification by TensorFlow</a>
    </nav>

    <!-- メインの内容を設置する -->
    <div class="container">

        <!-- 各ページの内容 content を代入する部分 -->
        {% block content%}{% endblock %}
    </div>
</body>

</html>

<!DOCTYPE html>

<head>

{% load static %}

{% load bootstrap4 %}

{% bootstrap_css%}

{% bootstrap_javascript jquery='full' %}

<title>Image classification by TensorFlow | {% block title %}{% endblock %}</title>

</head>

<body>

<a class="navber-brand" href="#">Image classification by TensorFlow</a>

</nav>

{% block content%}{% endblock %}

</div>

</body>

</html>

bootstrap4の記法は下記のようにDTL: Django Template Languageで

{% xxxxxxx %} と書きます。

１．タイトル

{% block title %}{% endblock %}　の部分にindex.html,およびpredict.html各ページ固有のタイトルが代入されます。

２．内容

{% block content%}{% endblock %}　の部分にindex.html,およびpredict.html各ページ固有の内容が代入されます。

cssファイルの作成

上記、base.htmlの中で、スタイルシートの宣言をしていますが、自分でディレクトリとファイルを作成する必要があります。

<link rel=’stylesheet’ type=”text/css” href=”{% static ‘carbike/css/style.css’ %}”>

staticディレクトリを　myproject/car_motorbike/直下（templatesと同階層に作成して、その中に/carbike/css/style.css というcssファイルを作成しておきます。

あとで記述していきますので、現時点では空ファイルでOKです。

index.html　の作成

indexベージを作成します。

<!-- インデックスページを作成します。-->

<!-- テンプレートであるbase.htmlに対して　拡張する宣言をします。-->
{% extends 'carbike/base.html' %}

<!-- タイトル title をbase.htmlに埋め込みます。-->
{% block title %}車とバイクの画像をTensorFlowで判別するdjangoアプリ{% endblock %}

<!-- 内容 content　をbase.htmlに埋め込みます。-->
{% block content %}
<div>
    <!-- classはbootstrap記法で文字間の調整になる
        mtマージントップ mb マージンボトム 境界線底部 -->
    <h4 class="mt-4 mb-5 border-bottom">車とバイクを判別します。</h4>
    <p>画像ファイルを選択して　ボタンをクリックしてください。</p>

    <!-- ファイルの投稿フォームを作成
        実行したときのページ移動先の指定 ファイル送付方式
        クラス名定義 エンコードタイプ指定-->
    <form action="{% url 'carbike:predict' %}" method="post"
    class="form" enctype="multipart/form-data">
    
    <!-- サーフ対策：外部プログラムからデータを送りつけられないようにする-->
    <!-- cross site request forgery 対策-->
    {% csrf_token %}

    <!-- データのアップロードフォームを作成する -->
    <div class="form-group">
        <div class="custom-file">

            <!-- 二重括弧の意味 ==> djandoの変数を参照する-->
            <!-- form.image ==>views.pyから送られてくる
                imageの値を取得してformに埋め込む-->
            {{ form.image }}
            
            <label class="custom-file-label" for="customFile">
                ここをクリックしてください。
            </label>
        </div>
    </div>

    <!-- submitボタンを設置する -->
    <button type="submit" class="btn btn-primaty">提出</button>

    </form>
</div>
{% endblock %}

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

{% block title %}車とバイクの画像をTensorFlowで判別するdjangoアプリ{% endblock %}

{% block content %}

<div>

<!-- classはbootstrap記法で文字間の調整になる

mtマージントップ mb マージンボトム境界線底部 -->

<h4 class="mt-4 mb-5 border-bottom">車とバイクを判別します。</h4>

<p>画像ファイルを選択して　ボタンをクリックしてください。</p>

<!-- ファイルの投稿フォームを作成

実行したときのページ移動先の指定ファイル送付方式

クラス名定義エンコードタイプ指定-->

<form action="{% url 'carbike:predict' %}" method="post"

class="form" enctype="multipart/form-data">

{% csrf_token %}

<!-- form.image ==>views.pyから送られてくる

imageの値を取得してformに埋め込む-->

ここをクリックしてください。

</label>

</div>

</form>

</div>

{% endblock %}

１．埋め込み先の宣言

雛形ページであるbase.htmlに対してタイトルと拡張宣言をします。

{% extends ‘carbike/base.html’ %}

２．埋め込むタイトルを定義

{% block title %}xxxx{% endblock %}

３．埋め込む内容を定義

{% block content %}xxxx{% endblock %}

forms.py　を作成する

myproject/car_motorbike/の下に forms.pyを新規作成します。

# フォームを生成するモジュール
from django import forms

class PhotoForm(forms.Form):
    # 画像をアップロードする機能
    image = forms.ImageField(widget=forms.FileInput(attrs={'class':'custom-file-input'}))

# フォームを生成するモジュール

from django import forms

class PhotoForm(forms.Form):

# 画像をアップロードする機能

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

views.py へforms.pyを埋め込む

indexページの表示内容であるindex関数の部分を hello worldをreturnするだけの状態から、formを表示する内容に変更します。

from django.shortcuts import render

# Httpレスポンスをするためのモジュール
from django.http import HttpResponse

# テンプレートファイルを読み込む
from django.template import loader #追加

# forms.pyで定義したPhotoFormクラスを呼び出す
from .forms import PhotoForm #追加

# models.pyで定義したPhotoクラスを呼び出す
# まだ作っていないので保留
# from .models import Photo #追加


def index(request):
    # webサイトのindex.html に相当する部分
    # 構造がとても複雑だが、こういうものだと諦めること。
    # 引数としてrequestを受け取る

    # index.htmlを読み込み
    # オブジェクトtemplateを定義する
    template = loader.get_template('carbike/index.html') #追加

    # forms.pyのクラスPhotoFormのインスタンスを作成して、
    # ディクショナリcontextを定義しておく。
    context = {'form':PhotoForm()}

    # オブジェクトtemplateのrender関数に
    # フォームcontextと引数requestを入れて
    # HttpResponseを返す
    return HttpResponse(template.render(context, request)) 

def predict(request):
    # 仮のリターンを作っておく
    return HttpResponse('show predictions here')

from django.shortcuts import render

# Httpレスポンスをするためのモジュール

from django.http import HttpResponse

# テンプレートファイルを読み込む

from django.template import loader #追加

# forms.pyで定義したPhotoFormクラスを呼び出す

from .forms import PhotoForm #追加

# models.pyで定義したPhotoクラスを呼び出す

# まだ作っていないので保留

# from .models import Photo #追加

def index(request):

# webサイトのindex.html に相当する部分

# 構造がとても複雑だが、こういうものだと諦めること。

# 引数としてrequestを受け取る

# index.htmlを読み込み

# オブジェクトtemplateを定義する

template = loader.get_template('carbike/index.html') #追加

# forms.pyのクラスPhotoFormのインスタンスを作成して、

# ディクショナリcontextを定義しておく。

context = {'form':PhotoForm()}

# オブジェクトtemplateのrender関数に

# フォームcontextと引数requestを入れて

# HttpResponseを返す

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

def predict(request):

# 仮のリターンを作っておく

return HttpResponse('show predictions here')

やっていることは３つのみ

１．テンプレートオブジェクトを定義

template = loader.get_template(‘carbike/index.html’)

２．コンテキストオブジェクトを定義

context = {‘form’:PhotoForm()}

３．HttpResponseをreturnする

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

apps.pyを確認する

現在このアプリケーションが認識されているアプリ名を確認します。

CarMotorbikeConfigクラスの中に　name = ‘car_motorbike’　と定義されています。

from django.apps import AppConfig


class CarMotorbikeConfig(AppConfig):
    name = 'car_motorbike'

from django.apps import AppConfig

class CarMotorbikeConfig(AppConfig):

name = 'car_motorbike'

これを後述のsettings.pyのINSTALLED_APPSリストに追加します。

myproject/settings.py を編集する

# Application definition　の部分を書き換えます。

リストINSTALLED_APPS にクラス名’car_mortorbike.apps.CarbikeConfig’と ‘bootstrap4’を追記します。

# Application definition

INSTALLED_APPS = [
    'car_motorbike.apps.CarMotorbikeConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap4',
]

# Application definition

INSTALLED_APPS = [

'car_motorbike.apps.CarMotorbikeConfig',

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'bootstrap4',

]

ではここまでをブラウズしてみます。

仮想環境へ　conda activate djangoai

開発サーバーへ　python manage.py runserver

url http://127.0.0.1:8000/carbike

ここで、画像を選択肢画提出ボタンを押すと、ページが遷移します。

ここはまだ作り込んでいないので、これでOKです。

次回

以上、次回は第１１回目です。

django　複雑ですねえ。これは習得するのに時間がかかる・・・。(´・ω・`)

Web Application: 第９回　Djangoでページのルーティング設定をする

前回、myproject管理フォルダ内のurls.pyを編集しましたが、今回は

car_motorbikeアプリケーションフォルダ直下に、同じくurls.pyを新規作成して、下記スクリプトを書きます。

car_motorbike/urls.py　新規作成

from django.urls import path

# 追加モジュール 今回は同じ階層にある
# さらにアプリケーションと同じ階層(.)なので viewsは被らない。
# よって、基本構文で良い
from . import views

app_name = 'carbike' # 追加した

# urlパターンをリストで作っておく
urlpatterns = [
    path('', views.index, name='index'),

    # predictアドレス　後ほどviewsにpredictメソドを定義するために
    # views.py　へ def predict(): を追加する
    path('predict/', views.predict, name='predict'),
]

from django.urls import path

# 追加モジュール今回は同じ階層にある

# さらにアプリケーションと同じ階層(.)なので viewsは被らない。

# よって、基本構文で良い

from . import views

app_name = 'carbike' # 追加した

# urlパターンをリストで作っておく

urlpatterns = [

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

# predictアドレス　後ほどviewsにpredictメソドを定義するために

# views.py　へ def predict(): を追加する

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

]

アプリケーションネームapp_nameとして明示的にcarbikeと定義してあります。ここはなくてもいいかもしれませんし、car_motorbikeにするべきかもしれませんが、ひとまずこれでやってみます。

１．当該スクリプトで使用するモジュールであるviews.py は　当該urls.pyと同層になるので

from . import views

という不思議なインポート記述になります。

viewsモジュールはまだ作成していませんので実行すると当然エラーになりますが、あとで作成しますので心配いりません。

２．そして、画像を入力したときにvvc16_predct.pyを走らせて予測結果を返す画面である predict画面を定義します。

urlpatternsリストにリスト要素として

path(‘predict/’, views.predict, name=’predict’)

を追加します。これで urlのツリー構造として /carbike/predict が定義されたことになります。

views.predictメソドはこれから作成しなければなりませんので、現時点ではエラーが出ます。

３．なお、このcar_motorbike/urls.pyスクリプトは myproject/urls.py から呼び出されるものなので、これから myproject/urls.py の方を改良していきます。

ルーティングというやつです。

myproject/urls.py　編集

ではここから　car_motorbike/urls.py　へルートをつなげていきます。

from django.contrib import admin

# includeメソドを追加で読み込む
from django.urls import path, include

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

    # 追加urlパターン carbikeというフォルダを見に来たら、carbike.indexを呼び出す
    # path('carbike/', carbike.index), 

    # 追加urlパターン carbikeというフォルダを見に来たら、
    # car_motorbike.urls.pyの中にあるルーティングを読みに行く
    path('carbike/', include('car_motorbike.urls')),
    ]

from django.contrib import admin

# includeメソドを追加で読み込む

from django.urls import path, include

urlpatterns = [

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

# 追加urlパターン carbikeというフォルダを見に来たら、carbike.indexを呼び出す

# path('carbike/', carbike.index),

# 追加urlパターン carbikeというフォルダを見に来たら、

# car_motorbike.urls.pyの中にあるルーティングを読みに行く

path('carbike/', include('car_motorbike.urls')),

]

１．include関数を新たにインポートして、先程作成した car_mortorbike/urls.pyを参照するようリストurlpatternsにリスト要素としてpath(‘carbike/’, include(‘car_motorbike.urls’))を追加します。

２．これで、ブラウザ上のurl指定に/carbikeが追加されたとき、car_motorbike.urlsスクリプトを見に行くことになります。

car_motorbike/views.py の編集

先程、car_motorbike/urls.py　内で　views.predictメソドを記述しましたが、それの実体をここで定義します。とりあえずルーティングが正しく行われて表示されるか確認したいので、実行内容としてはテキストを出力するだけの最低限にしてテストしてみましょう。

from django.shortcuts import render

# 追加モジュール
from django.http import HttpResponse

def index(request):
    # webサイトのindex.html に相当する部分
    # 仮のリターンを作っておく
    return HttpResponse('hello_world')

def predict(request):
    # webサイトのpredict.html に相当する部分
    # 仮のリターンを作っておく
    return HttpResponse('show predictions here')

from django.shortcuts import render

# 追加モジュール

from django.http import HttpResponse

def index(request):

# webサイトのindex.html に相当する部分

# 仮のリターンを作っておく

return HttpResponse('hello_world')

def predict(request):

# webサイトのpredict.html に相当する部分

# 仮のリターンを作っておく

return HttpResponse('show predictions here')

動作チェック

では python manage.py runserver して　ブラウザで動作チェックをしましょう。

１．http://127.0.0.1:8000/　を入力すると

＞[21/Sep/2019 15:53:08] “GET / HTTP/1.1” 404 2032

トップページは作っていませんから、404エラーで問題ありません。

２．http://127.0.0.1:8000/carbike　を入力すると

＞[21/Sep/2019 15:53:17] “GET /carbike/ HTTP/1.1” 200 11

200と出ていますのでちゃんと認識しています。

３．http://127.0.0.1:8000/carbike/predict

＞[21/Sep/2019 15:53:30] “GET /carbike/predict/ HTTP/1.1” 200 21

と 200が帰ってくるのでこちらも正常に動作しています。

次回

Web Application: 第１０回　HTMLでかっこよくする

Web Application: 第８回　Djangoやります

こんにちは Keita_Nakamori(´・ω・)です。


さて、前回まででTensor Flow を使ったスクリプトを書いてきましたが、これをwebアプリとしてアクセスできるようにDjangoを組み込んでいきます。
django公式サイト
djangoインストール方法
$ pip install Django
django-2.2.5　が入りました
プロジェクトを作成する
djangoでは大項目としてプロジェクト名、小項目としてアプリケーション名があります。後々ひとつのプロジェクトの下に複数のアプリケーションを作っていくことになります。
では、myprojectというプロジェクトを作ります
djangoプロジェクトの生成
$ django-admin startproject myproject
これでmyprojectというプロジェクトフォルダが生成されました。
フォルダの下層にはmange.pyという管理用のpythonファイルと、プロジェクト名と同じ名称で設定用のmyproject設定フォルダが生成されます。
 

myproject/:プロジェクト全体のフォルダ

manage.py：管理用pythonスクリプト（サーバー起動　アプリフォルダの生成など）
myproject/：プロジェクト設定フォルダ

__init__.py：プロジェクト初期値スクリプト
settings.py：プロジェクト設定用スクリプト
urls.py：プロジェクトurlルーティング用スクリプト
wsgi.py：python：アプリ実行環境ウィズギーのスクリプト





用語　ウィズギーとは
Web Server Gateway Interface (WSGI; ウィズギー)
webサーバーとwebアプリ（またはwebフレームワーク）を接続するためのインターフェース定義。
WSGIはこれまでFastCGI, mod_python, CGIなど様々なインターフェース定義が乱立している中で最終的にpythonにおける最有力規格となったインターフェース定義。python webフレームワークで有力なFlaskとかBottletoとかDjangoが採用しているので、かなり盤石。
開発用の内蔵サーバーを起動する
管理スクリプトmanage.pyを使ってmyprojectプロジェクト全体フォルダから
$ python manage.py runserver
とランサーバー指令をコマンドプロンプトに打つと


		
		
			
			

			
			Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
September 21, 2019 - 09:35:13
Django version 2.2.5, using settings 'myproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						Watching for file changes with StatReloader
Performing system checks...
 
System check identified no issues (0 silenced).
 
You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
September 21, 2019 - 09:35:13
Django version 2.2.5, using settings 'myproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
					
				
			
		


と出るので、http://127.0.0.1:8000/がサーバーとして動き出します。
実際にブラウザのURLバーにこれをコピペすると、インストールが完了しましたとお祝いの言葉を頂戴できます。
強制終了は　CTRL-BREAKと書いてありますが、control+c のことです。

簡単なwebアプリケーションを作ってみる
hello worldと表示するwebアプリケーションを作ってみましょう。
runserverしっぱなしの場合はctl+cで一旦止めておきます。
myproject プロジェクトフォルダに戻ってみたら、db.sqlite3　というデータベースが生成されていました。まだカラのようで容量は0KBです。
つづきまして、アプリケーションのフォルダを作りましょう。
スタートアップですがstartup ではなくて startappなので要注意です。
＄myproject>python manage.py startapp car_motorbike
これでmyprojectプロジェクトフォルダ直下に car_motorbikeアプリケーションフォルダが生成されました。
現在のフォルダ構成をおさらいすると、

myproject：プロジェクト全体フォルダ

 car_motorbike：アプリケーションフォルダ
db.sqlite3：データベースファイル
manage.py：プロジェクト管理フォルダ
myproject：プロジェクト設定フォルダ



そして、car_bikeアプリケーションフォルダの中には、各種pythonスクリプトが新しく生成されました。今後はここを弄っていくことになります。

car_motorbikeアプリケーションフォルダ

admin.py
apps.py
migrations/
models.py ：データベースにアクセスしてデータを取得するスクリプト
tests.py
views.py：ブラウザ表示内容（テンプレート）を呼び出すスクリプト
__init__.py



VScodoで構造を見てみると、まだ何も弄ってないのにこれだけのファイル数になります。ではviews.pyを開いて編集していきましょう。


views.py　を編集する
オリジナルは下記のような２行のコードです。



		
		
			
			
Python
			
			from django.shortcuts import render
# Create your views here.
			
				
					
				
					1
2
				
						from django.shortcuts import render
# Create your views here.
					
				
			
		


これを編集してHTMLのindex.htmlに相当する部分を作っていきます。
アクセスが来たときに hello_worldとレスポンスを返すためのHttpRespose関数をインポートして使用します。





		
		
			
			
Python
			
			from django.shortcuts import render

# 追加モジュール
from django.http import HttpResponse

def index(request):
    # webサイトのindex.html に相当する部分
    return HttpResponse('hello_world')
			
				
					
				
					1
2
3
4
5
6
7
8
				
						from django.shortcuts import render
 
# 追加モジュール
from django.http import HttpResponse
 
def index(request):
    # webサイトのindex.html に相当する部分
    return HttpResponse('hello_world')
					
				
			
		




これはまだ、呼び出されたときの挙動を定義しただけですので、このindex(request)関数を呼び出すためのスクリプトが別途必要です。
urls.py　を編集する

次に、views.pyを実行できるようにurl.pyでURLと表示内容（views.py）を関連付けます。
オリジナルは下記のようなコードです。
コメントアウトされた使い方の部分とURLパターンを定義するリストが存在するだけです。




		
		
			
			
Python
			
			"""myproject URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path


urlpatterns = [
    path('admin/', admin.site.urls),
]
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
				
						"""myproject URL Configuration
 
The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
 
 
urlpatterns = [
    path('admin/', admin.site.urls),
]
					
				
			
		



コメントアウトの部分を読んでみましょう。
（google翻訳すると　スクリプト部分まで和訳されて意味不明でした。）
myproject URL設定

urlpatternsリストはURLをビューにルーティングします。詳細については、以下を参照してください。 https://docs.djangoproject.com/en/2.2/topics/http/urls/例：


機能ビュー
1.インポートの追加：
from my_app import views
2. urlpatternsにURLを追加します：

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

クラスベースのビュー
1.インポートを追加します：

from other_app.views import Home

2. URLをurlpatternsに追加します：

path('', Home.as_view(), name='home')

別のURLconfを含める
1. include（）関数をインポートします：

from django.urls import include, path

2. urlpatternsにURLを追加

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


イメージが全然わきませんね。

urls.py　を編集する
機能ビューの

インポートの追加：
 URLをurlpatternsに追加します：

をやってみます。
公式サイトに従ってインポートをfrom car_motorbike import views　としてしまうとあとあとcar_motorbike以外のアプリを作成して時に form xxx import viewsというようにかぶってしまうので、ここではimport car_motorbike.views as carbike　として被らないようにします。



		
		
			
			
Python
			
			# 追加モジュール
import car_motorbike.views as carbike # 拡張子.pyは省略する

'''以下のようなインポートの仕方だとwebページの変数がすべてviewsになってしまい被る
from car_motorbike import views
'''

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

    # 追加urlパターン carbikeというフォルダを見に来たら、carbike.indexを呼び出す
    path('carbike/', carbike.index), 
    ]
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
				
						# 追加モジュール
import car_motorbike.views as carbike # 拡張子.pyは省略する
 
'''以下のようなインポートの仕方だとwebページの変数がすべてviewsになってしまい被る
from car_motorbike import views
'''
 
urlpatterns = [
    path('admin/', admin.site.urls),
 
    # 追加urlパターン carbikeというフォルダを見に来たら、carbike.indexを呼び出す
    path('carbike/', carbike.index), 
    ]
					
				
			
		


では開発用サーバーを起動してみましょう。

>python manage.py runserver

http://127.0.0.1:8000/

not foundの404エラーが出ていますが、作ってないので当然出ます。問題ありません。

そして、先程作ったcarbikeのページを見てみましょう。
http://127.0.0.1:8000/carbike/
 というように、ちゃんと機能しています。

今一度思い起こすと、このhttp://127.0.0.1:8000/carbike/ こそが　carbikeというwebアプリケーションのトップページなわけです。（アプリフォルダ名としてははcar_motorbikeです。一緒にすればよかったか・・・(´・ω・

)）

おさらいすると、mayproject/urls.py が http://127.0.0.1:8000/carbike/ というurl のインプットによって car_motorbike/views.py を参照した形になります。

次回

今後はこのページを改造していってインタラクティブな機能を強化していきます。

Web Application: 第９回　Djangoでページのルーティング設定をする

Web Application: 第７回　VGG16を使った転移学習

Keita_Nakamoriです。TensorFlowに疲れてきました。

早くwebアプリの部分にいきたい・・・。

今回は、転移学習を試してみます。学習済みのCNNであるVGG16を使って、その後ろに中間層と全結合層をマニュアルで挿入して最終的にsoftmax関数を通して結果を出力します。

中間層は256node、全結合層は2クラスしかないので2nodeです。

スクリプト：VGG16_trans.py

前回まで、import keras をして kerasを使用していましたが、今どきはTensorFlowのクラスとして存在しているので使ってみます。

というのもfrom keras.models import Modelでエラーが出てしまいどうしようもないので調べていたら見つけました。

import numpy as np
import matplotlib.pyplot as plt

# keras は　tensorflowのクラスとして存在する
from tensorflow import keras

from tensorflow.keras.models import Sequential, Model
from tensorflow.keras.layers import Dense, Dropout, Flatten
from tensorflow.keras.layers import Conv2D, MaxPooling2D
from tensorflow.keras.optimizers import SGD, Adam

from tensorflow.python.keras.utils import np_utils
from tensorflow.python.keras.applications import VGG16

# 出力結果のクラスを定義
classes = ["car", "motorbike"]
num_classes = len(classes) # クラス数を定義

# 画像サイズを定義（VGG16に合うように）
image_size = 224

# npyデータを読み込み、訓練用・検証用データに分割する
X_train, X_test, y_train, y_test = np.load(
    "./image_files_224.npy",
    allow_pickle=True
    )

# one hot エンコーディング
y_train = np_utils.to_categorical(y_train, num_classes)
y_test = np_utils.to_categorical(y_test, num_classes)

# ここで入力データの正規化を行う
X_train = X_train.astype("float") / 255.0
X_test = X_test.astype("float") / 255.0

# VGG16モデルを定義する
model = VGG16(weights='imagenet', include_top=False, input_shape=(image_size,image_size,3))

# 以降のニューラルネットワーク層を定義する。top_model
# VGG16の出力がSequentialで出てくるので、追加する全結合層もシーケンシャルで作成しておく。
top_model = Sequential()
top_model.add(Flatten(input_shape=model.output_shape[1:]))
top_model.add(Dense(256, activation='relu'))
top_model.add(Dropout(0.5))
top_model.add(Dense(num_classes, activation='softmax'))

# VGG16と追加層を結合する
# VGG16の出力を追加層の入力に入れる。
model = Model(inputs=model.input, outputs=top_model(model.output))

# モデルのサマリーを確認する
model.summary()

# トレーニングしないようにパラメータをフリーズ（固定化）する
# 必ずcompileの前に入れる
for layer in model.layers[:15]:
    layer.trainable = False

# オプティマイザーを定義する
opt = Adam(lr=0.0001)
model.compile(loss='categorical_crossentropy', optimizer=opt,metrics=['accuracy'])

# 訓練をする
history = model.fit(X_train, y_train, batch_size=32, epochs=17)

# 評価する
score = model.evaluate(X_test, y_test, batch_size=32)
print('Test loss:', score[0])
print('Test accuracy:', score[1])

# モデルを保存する
model.save("./vgg16_trans.h5")

# 可視化する
loss     = history.history['loss']

nb_epoch = len(loss)
plt.plot(range(nb_epoch), loss, marker='.', label='loss')

plt.legend(loc='best', fontsize=10)
plt.grid()
plt.xlabel('epoch')
plt.ylabel('loss')
plt.show()

import numpy as np

import matplotlib.pyplot as plt

# keras は　tensorflowのクラスとして存在する

from tensorflow import keras

from tensorflow.keras.models import Sequential, Model

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

from tensorflow.keras.layers import Conv2D, MaxPooling2D

from tensorflow.keras.optimizers import SGD, Adam

from tensorflow.python.keras.utils import np_utils

from tensorflow.python.keras.applications import VGG16

# 出力結果のクラスを定義

classes = ["car", "motorbike"]

num_classes = len(classes) # クラス数を定義

# 画像サイズを定義（VGG16に合うように）

image_size = 224

# npyデータを読み込み、訓練用・検証用データに分割する

X_train, X_test, y_train, y_test = np.load(

"./image_files_224.npy",

allow_pickle=True

)

# one hot エンコーディング

y_train = np_utils.to_categorical(y_train, num_classes)

y_test = np_utils.to_categorical(y_test, num_classes)

# ここで入力データの正規化を行う

X_train = X_train.astype("float") / 255.0

X_test = X_test.astype("float") / 255.0

# VGG16モデルを定義する

model = VGG16(weights='imagenet', include_top=False, input_shape=(image_size,image_size,3))

# 以降のニューラルネットワーク層を定義する。top_model

# VGG16の出力がSequentialで出てくるので、追加する全結合層もシーケンシャルで作成しておく。

top_model = Sequential()

top_model.add(Flatten(input_shape=model.output_shape[1:]))

top_model.add(Dense(256, activation='relu'))

top_model.add(Dropout(0.5))

top_model.add(Dense(num_classes, activation='softmax'))

# VGG16と追加層を結合する

# VGG16の出力を追加層の入力に入れる。

model = Model(inputs=model.input, outputs=top_model(model.output))

# モデルのサマリーを確認する

model.summary()

# トレーニングしないようにパラメータをフリーズ（固定化）する

# 必ずcompileの前に入れる

for layer in model.layers[:15]:

layer.trainable = False

# オプティマイザーを定義する

opt = Adam(lr=0.0001)

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

# 訓練をする

history = model.fit(X_train, y_train, batch_size=32, epochs=17)

# 評価する

score = model.evaluate(X_test, y_test, batch_size=32)

print('Test loss:', score[0])

print('Test accuracy:', score[1])

# モデルを保存する

model.save("./vgg16_trans.h5")

# 可視化する

loss = history.history['loss']

nb_epoch = len(loss)

plt.plot(range(nb_epoch), loss, marker='.', label='loss')

plt.legend(loc='best', fontsize=10)

plt.grid()

plt.xlabel('epoch')

plt.ylabel('loss')

plt.show()

構造

スクリプト内の# モデルのサマリーを確認する model.summary()　までを実行するとニューラルネットワークの構造が確認できます。

最後に、sequential (Sequential) (None, 2)　が新しく生成されました。

Model: "model"
_________________________________________________________________
Layer (type)                 Output Shape              Param #
=================================================================
input_1 (InputLayer)         [(None, 224, 224, 3)]     0
_________________________________________________________________
block1_conv1 (Conv2D)        (None, 224, 224, 64)      1792
_________________________________________________________________
block1_conv2 (Conv2D)        (None, 224, 224, 64)      36928
_________________________________________________________________
block1_pool (MaxPooling2D)   (None, 112, 112, 64)      0
_________________________________________________________________
block2_conv1 (Conv2D)        (None, 112, 112, 128)     73856
_________________________________________________________________
block2_conv2 (Conv2D)        (None, 112, 112, 128)     147584
_________________________________________________________________
block2_pool (MaxPooling2D)   (None, 56, 56, 128)       0
_________________________________________________________________
block3_conv1 (Conv2D)        (None, 56, 56, 256)       295168
_________________________________________________________________
block3_conv2 (Conv2D)        (None, 56, 56, 256)       590080
_________________________________________________________________
block3_conv3 (Conv2D)        (None, 56, 56, 256)       590080
_________________________________________________________________
block3_pool (MaxPooling2D)   (None, 28, 28, 256)       0
_________________________________________________________________
block4_conv1 (Conv2D)        (None, 28, 28, 512)       1180160
_________________________________________________________________
block4_conv2 (Conv2D)        (None, 28, 28, 512)       2359808
_________________________________________________________________
block4_conv3 (Conv2D)        (None, 28, 28, 512)       2359808
_________________________________________________________________
block4_pool (MaxPooling2D)   (None, 14, 14, 512)       0
_________________________________________________________________
block5_conv1 (Conv2D)        (None, 14, 14, 512)       2359808
_________________________________________________________________
block5_conv2 (Conv2D)        (None, 14, 14, 512)       2359808
_________________________________________________________________
block5_conv3 (Conv2D)        (None, 14, 14, 512)       2359808
_________________________________________________________________
block5_pool (MaxPooling2D)   (None, 7, 7, 512)         0
_________________________________________________________________
sequential (Sequential)      (None, 2)                 6423298
=================================================================
Total params: 21,137,986
Trainable params: 21,137,986
Non-trainable params: 0
_________________________________________________________________

Model: "model"

_________________________________________________________________

Layer (type) Output Shape Param #

=================================================================

input_1 (InputLayer) [(None, 224, 224, 3)] 0

_________________________________________________________________

block1_conv1 (Conv2D) (None, 224, 224, 64) 1792

_________________________________________________________________

block1_conv2 (Conv2D) (None, 224, 224, 64) 36928

_________________________________________________________________

block1_pool (MaxPooling2D) (None, 112, 112, 64) 0

_________________________________________________________________

block2_conv1 (Conv2D) (None, 112, 112, 128) 73856

_________________________________________________________________

block2_conv2 (Conv2D) (None, 112, 112, 128) 147584

_________________________________________________________________

block2_pool (MaxPooling2D) (None, 56, 56, 128) 0

_________________________________________________________________

block3_conv1 (Conv2D) (None, 56, 56, 256) 295168

_________________________________________________________________

block3_conv2 (Conv2D) (None, 56, 56, 256) 590080

_________________________________________________________________

block3_conv3 (Conv2D) (None, 56, 56, 256) 590080

_________________________________________________________________

block3_pool (MaxPooling2D) (None, 28, 28, 256) 0

_________________________________________________________________

block4_conv1 (Conv2D) (None, 28, 28, 512) 1180160

_________________________________________________________________

block4_conv2 (Conv2D) (None, 28, 28, 512) 2359808

_________________________________________________________________

block4_conv3 (Conv2D) (None, 28, 28, 512) 2359808

_________________________________________________________________

block4_pool (MaxPooling2D) (None, 14, 14, 512) 0

_________________________________________________________________

block5_conv1 (Conv2D) (None, 14, 14, 512) 2359808

_________________________________________________________________

block5_conv2 (Conv2D) (None, 14, 14, 512) 2359808

_________________________________________________________________

block5_conv3 (Conv2D) (None, 14, 14, 512) 2359808

_________________________________________________________________

block5_pool (MaxPooling2D) (None, 7, 7, 512) 0

_________________________________________________________________

sequential (Sequential) (None, 2) 6423298

=================================================================

Total params: 21,137,986

Trainable params: 21,137,986

Non-trainable params: 0

_________________________________________________________________

結果

VGG１６層　全結合２層　17エポックまでやってみましたが、数十分かかってしまいました。流石のディープさです。

しかし、結果は素晴らしいい。トレーニング１００％　テスト９９％の精度。

そして、モデルファイルである192MB のvgg16_trans.h5 ファイルも上手く生成できていました。

600/600 [==============================] - 226s 376ms/sample - loss: 0.2884 - acc: 0.8750
Epoch 2/17
600/600 [==============================] - 241s 402ms/sample - loss: 0.0544 - acc: 0.9833
Epoch 3/17
600/600 [==============================] - 1048s 2s/sample - loss: 0.0109 - acc: 0.9983
Epoch 4/17
600/600 [==============================] - 235s 392ms/sample - loss: 0.0085 - acc: 0.9967
Epoch 5/17
600/600 [==============================] - 252s 421ms/sample - loss: 0.0012 - acc: 1.0000
Epoch 6/17
600/600 [==============================] - 242s 403ms/sample - loss: 4.5241e-04 - acc: 1.0000
Epoch 7/17
600/600 [==============================] - 235s 391ms/sample - loss: 3.2469e-04 - acc: 1.0000
Epoch 8/17
600/600 [==============================] - 235s 391ms/sample - loss: 1.6192e-04 - acc: 1.0000
Epoch 9/17
600/600 [==============================] - 227s 378ms/sample - loss: 1.1878e-04 - acc: 1.0000
Epoch 10/17
600/600 [==============================] - 228s 380ms/sample - loss: 4.5246e-05 - acc: 1.0000
Epoch 11/17
600/600 [==============================] - 228s 381ms/sample - loss: 1.3106e-04 - acc: 1.0000
Epoch 12/17
600/600 [==============================] - 234s 390ms/sample - loss: 6.3007e-05 - acc: 1.0000
Epoch 13/17
600/600 [==============================] - 229s 382ms/sample - loss: 2.4614e-05 - acc: 1.0000
Epoch 14/17
600/600 [==============================] - 230s 383ms/sample - loss: 3.7191e-05 - acc: 1.0000
Epoch 15/17
600/600 [==============================] - 229s 381ms/sample - loss: 3.3313e-05 - acc: 1.0000
Epoch 16/17
600/600 [==============================] - 235s 392ms/sample - loss: 3.7981e-05 - acc: 1.0000
Epoch 17/17
600/600 [==============================] - 230s 383ms/sample - loss: 7.3269e-06 - acc: 1.0000
200/200 [==============================] - 67s 333ms/sample - loss: 0.0636 - acc: 0.9900

600/600 [==============================] - 226s 376ms/sample - loss: 0.2884 - acc: 0.8750

Epoch 2/17

600/600 [==============================] - 241s 402ms/sample - loss: 0.0544 - acc: 0.9833

Epoch 3/17

600/600 [==============================] - 1048s 2s/sample - loss: 0.0109 - acc: 0.9983

Epoch 4/17

600/600 [==============================] - 235s 392ms/sample - loss: 0.0085 - acc: 0.9967

Epoch 5/17

600/600 [==============================] - 252s 421ms/sample - loss: 0.0012 - acc: 1.0000

Epoch 6/17

600/600 [==============================] - 242s 403ms/sample - loss: 4.5241e-04 - acc: 1.0000

Epoch 7/17

600/600 [==============================] - 235s 391ms/sample - loss: 3.2469e-04 - acc: 1.0000

Epoch 8/17

600/600 [==============================] - 235s 391ms/sample - loss: 1.6192e-04 - acc: 1.0000

Epoch 9/17

600/600 [==============================] - 227s 378ms/sample - loss: 1.1878e-04 - acc: 1.0000

Epoch 10/17

600/600 [==============================] - 228s 380ms/sample - loss: 4.5246e-05 - acc: 1.0000

Epoch 11/17

600/600 [==============================] - 228s 381ms/sample - loss: 1.3106e-04 - acc: 1.0000

Epoch 12/17

600/600 [==============================] - 234s 390ms/sample - loss: 6.3007e-05 - acc: 1.0000

Epoch 13/17

600/600 [==============================] - 229s 382ms/sample - loss: 2.4614e-05 - acc: 1.0000

Epoch 14/17

600/600 [==============================] - 230s 383ms/sample - loss: 3.7191e-05 - acc: 1.0000

Epoch 15/17

600/600 [==============================] - 229s 381ms/sample - loss: 3.3313e-05 - acc: 1.0000

Epoch 16/17

600/600 [==============================] - 235s 392ms/sample - loss: 3.7981e-05 - acc: 1.0000

Epoch 17/17

600/600 [==============================] - 230s 383ms/sample - loss: 7.3269e-06 - acc: 1.0000

200/200 [==============================] - 67s 333ms/sample - loss: 0.0636 - acc: 0.9900

スクリプト：vgg16_predict.py

では、転移学習済みのvgg16_trans.h5モデルをロードして、Anacondaプロンプトからサンプル画像を入力することによってcar なのか motorbikeなのか予測してみましょう。

import numpy as np
import matplotlib.pyplot as plt
from PIL import Image
import sys

# keras は　tensorflowのクラスとして存在する
from tensorflow import keras
from tensorflow.keras.models import load_model

'''トレーニング済みなので　不要

from tensorflow.keras.layers import Dense, Dropout, Flatten
from tensorflow.keras.layers import Conv2D, MaxPooling2D
from tensorflow.keras.optimizers import SGD, Adam

from tensorflow.python.keras.utils import np_utils
from tensorflow.python.keras.applications import VGG16
'''

# 出力結果のクラスを定義
classes = ["car", "motorbike"]
num_classes = len(classes) # クラス数を定義

# 画像サイズを定義（VGG16に合うように）
image_size = 224

# 画像ファイルをコマンドラインの第２引数から開く
image = Image.open(sys.argv[1])

# 画像ファイルをRGBに変換する
image = image.convert('RGB')

# 画像を同じサイズに揃える
image = image.resize((image_size, image_size))

# RGB値をnumpy配列に変換する 
data = np.asarray(image)

# データを正規化する
data = data / 255.0

# リストにappendしてnumpy配列にする
X = []
X.append(data)
X = np.array(X)

# VGG16_transモデルをロードする
model = load_model('./vgg16_trans.h5')

# VGG16_transモデルにデータを入れて予測結果を返す
# スコアが配列で帰ってくるので[0]番目をつける
result = model.predict([X])[0]

# 最も大きい数字を採用する
predicted = result.argmax()
percentage = int(result[predicted] * 100)

# プリントする
print(classes[predicted], percentage)
print('==== script is done ====')

import numpy as np

import matplotlib.pyplot as plt

from PIL import Image

import sys

# keras は　tensorflowのクラスとして存在する

from tensorflow import keras

from tensorflow.keras.models import load_model

'''トレーニング済みなので　不要

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

from tensorflow.keras.layers import Conv2D, MaxPooling2D

from tensorflow.keras.optimizers import SGD, Adam

from tensorflow.python.keras.utils import np_utils

from tensorflow.python.keras.applications import VGG16

'''

# 出力結果のクラスを定義

classes = ["car", "motorbike"]

num_classes = len(classes) # クラス数を定義

# 画像サイズを定義（VGG16に合うように）

image_size = 224

# 画像ファイルをコマンドラインの第２引数から開く

image = Image.open(sys.argv[1])

# 画像ファイルをRGBに変換する

image = image.convert('RGB')

# 画像を同じサイズに揃える

image = image.resize((image_size, image_size))

# RGB値をnumpy配列に変換する

data = np.asarray(image)

# データを正規化する

data = data / 255.0

# リストにappendしてnumpy配列にする

X = []

X.append(data)

X = np.array(X)

# VGG16_transモデルをロードする

model = load_model('./vgg16_trans.h5')

# VGG16_transモデルにデータを入れて予測結果を返す

# スコアが配列で帰ってくるので[0]番目をつける

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

# 最も大きい数字を採用する

predicted = result.argmax()

percentage = int(result[predicted] * 100)

# プリントする

print(classes[predicted], percentage)

print('==== script is done ====')

予測

１．車の画像データの一つをcar1.jpgにリネームしてdjangoaiフォルダ直下に移動します。

(djangoai) C:\Users\keita\anaconda_projects\djangoai>python vgg16_predict.py car1.jpg

結果：car 100

２．次にバイクの画像データの一つをbike1.jpgにリネームしてdjangoaiフォルダ直下に移動します。

(djangoai) C:\Users\keita\anaconda_projects\djangoai>python vgg16_predict.py motorbike1.jpg

結果：motorbike 100

３．試しにビキニ画像データを入力してみましたが・・・バイク100%になりました。（笑）

次回

Web Application: 第８回　はじめてのwebアプリ

Web Application: 第６回　VGG16を構築する

VGG16をやってみます。

オックスフォード大学のVisual Geometry Groupが作った、畳み込み13層＋全結合３層の　合計16層のニューラルネットワークです。

VGG16用の入力データを作成

VGG16の入力データの画像サイズは 224 x 224 である必要がありますので　generate_inputdata.pyを改造して224×224のnpyデータを生成するgenerate_inputdata_224.pyを作りましょう。

また、それだと元々150角サイズが224角サイズになるわけですから、容量が増えてしまいます。（実際に600MBから1300MBに増えました。）

そこで、このスクリプトでは正規化するのをやめて、浮動小数点が発生するのを防ぎ容量を落とします。

代わりに、VGG16をやる直前に正規化を行う方針でいきます。

スクリプト：generate_inputdata_224.py

変更した部分は

入力サイズ変更：image_size = 224
保存名を変更：np.save(‘./image_files_224.npy’, xy)
標準化中止　：data = data / 255.0 の行をコメントアウト

from PIL import Image # image operation
import os             # get file list
import glob           # image treatment
import numpy as np    # culculation
from sklearn.model_selection import train_test_split # split data

# initialize parameters
classes = ['car', 'motorbike'] # define 2 classses 
num_classes = len(classes)     # the number of classes
image_size = 224               # pixels of width or height

# read images and cnvert numpy array
X = [] # ready to make list
Y = [] # ready to make list

# numbering and 
for index, class_label in enumerate(classes):
    
    # create class_label directories (car or motorbike)
    photos_dir ='./' + class_label

    # search jpeg fileb and create files object
    files = glob.glob(photos_dir + '/*.jpg')

    for i, file in enumerate(files):

        # open image files as instance
        image = Image.open(file)

        # convert image into RGB value data
        image = image.convert('RGB')

        # align to the same size (just in case)
        image = image.resize((image_size, image_size))

        # convert RGB value into numpy array 
        data = np.asarray(image)

        # do not normalize
        # so, data object nees to be normalize other script later 
        #data = data / 255.0

        # append value to list
        X.append(data)
        Y.append(index)

# convert list into numpy array
X = np.array(X)
Y = np.array(Y)

# split data (training and test)
X_train, X_test, y_train, y_test = train_test_split(X, Y)

# replace 1 variable
xy =(X_train, X_test, y_train, y_test)

# save values as npy file 
np.save('./image_files_224.npy', xy)

from PIL import Image # image operation

import os # get file list

import glob # image treatment

import numpy as np # culculation

from sklearn.model_selection import train_test_split # split data

# initialize parameters

classes = ['car', 'motorbike'] # define 2 classses

num_classes = len(classes) # the number of classes

image_size = 224 # pixels of width or height

# read images and cnvert numpy array

X = [] # ready to make list

Y = [] # ready to make list

# numbering and

for index, class_label in enumerate(classes):

# create class_label directories (car or motorbike)

photos_dir ='./' + class_label

# search jpeg fileb and create files object

files = glob.glob(photos_dir + '/*.jpg')

for i, file in enumerate(files):

# open image files as instance

image = Image.open(file)

# convert image into RGB value data

image = image.convert('RGB')

# align to the same size (just in case)

image = image.resize((image_size, image_size))

# convert RGB value into numpy array

data = np.asarray(image)

# do not normalize

# so, data object nees to be normalize other script later

#data = data / 255.0

# append value to list

X.append(data)

Y.append(index)

# convert list into numpy array

X = np.array(X)

Y = np.array(Y)

# split data (training and test)

X_train, X_test, y_train, y_test = train_test_split(X, Y)

# replace 1 variable

xy =(X_train, X_test, y_train, y_test)

# save values as npy file

np.save('./image_files_224.npy', xy)

転移学習のモデル作成

では、データができたところでVGG16モデルを作成しましょう。

モジュール追加：from keras.applications import VGG16

ロードデータ名変更；

X_train, X_test, y_train, y_test = np.load(‘./image_files_224.npy’, allow_pickle=True)

正規化操作の追加：

X_train = X_train.astype(‘float’) / 255.0
X_test = X_train.astype(‘float’) / 255.0

モデル定義の変更

model = VGG16( weights=’imagenet’, include_top=False, input_shape=(image_size,image_size, 3) )
print(‘Model loaded’)
model.summary()

import numpy as np
import tensorflow as tf
import keras
import matplotlib.pyplot as plt

from keras.models import Sequential
from keras.layers import Dense, Dropout, Flatten
from keras.layers import Conv2D, MaxPooling2D

from keras.optimizers import SGD, Adam
from keras.utils import np_utils

from keras.applications import VGG16

# initialize parameters
classes = ['car', 'motorbike'] # define 2 classses 
num_classes = len(classes)     # the number of classes
image_size = 224               # pixels of width or height

# load npy file
# need 'allow_pickle=True'
X_train, X_test, y_train, y_test = np.load('./image_files_224.npy', allow_pickle=True)

# one hot encording
y_train = np_utils.to_categorical(y_train, num_classes)
y_test = np_utils.to_categorical(y_test, num_classes)

# normalize
X_train = X_train.astype('float') / 255.0
X_test = X_train.astype('float') / 255.0

# define model
model = VGG16(
    weights='imagenet', include_top=False,
    input_shape=(image_size,image_size, 3)
    )
print('Model loaded')
model.summary()

import numpy as np

import tensorflow as tf

import keras

import matplotlib.pyplot as plt

from keras.models import Sequential

from keras.layers import Dense, Dropout, Flatten

from keras.layers import Conv2D, MaxPooling2D

from keras.optimizers import SGD, Adam

from keras.utils import np_utils

from keras.applications import VGG16

# initialize parameters

classes = ['car', 'motorbike'] # define 2 classses

num_classes = len(classes) # the number of classes

image_size = 224 # pixels of width or height

# load npy file

# need 'allow_pickle=True'

X_train, X_test, y_train, y_test = np.load('./image_files_224.npy', allow_pickle=True)

# one hot encording

y_train = np_utils.to_categorical(y_train, num_classes)

y_test = np_utils.to_categorical(y_test, num_classes)

# normalize

X_train = X_train.astype('float') / 255.0

X_test = X_train.astype('float') / 255.0

# define model

model = VGG16(

weights='imagenet', include_top=False,

input_shape=(image_size,image_size, 3)

)

print('Model loaded')

model.summary()

結果

input_1 (InputLayer) (None, 224, 224, 3)について

１枚の224 x 224 サイズの画像データにつき、 RGBの３枚に分解されたデータが入力データとし入ります。

まだ何枚のデータが入ってくるかわかりませんのでNoneになっています。

畳み込み２回　プーリング１回　畳み込み２回　プーリング１回　畳み込み３回・・・、で　１６層あるのだそうですがどういう数え方をしたら１６になるかは理解できていません・・・。

Model loaded
Model: "vgg16"
_________________________________________________________________
Layer (type)                 Output Shape              Param #
=================================================================
input_1 (InputLayer)         (None, 224, 224, 3)       0
_________________________________________________________________
block1_conv1 (Conv2D)        (None, 224, 224, 64)      1792
_________________________________________________________________
block1_conv2 (Conv2D)        (None, 224, 224, 64)      36928
_________________________________________________________________
block1_pool (MaxPooling2D)   (None, 112, 112, 64)      0
_________________________________________________________________
block2_conv1 (Conv2D)        (None, 112, 112, 128)     73856
_________________________________________________________________
block2_conv2 (Conv2D)        (None, 112, 112, 128)     147584
_________________________________________________________________
block2_pool (MaxPooling2D)   (None, 56, 56, 128)       0
_________________________________________________________________
block3_conv1 (Conv2D)        (None, 56, 56, 256)       295168
_________________________________________________________________
block3_conv2 (Conv2D)        (None, 56, 56, 256)       590080
_________________________________________________________________
block3_conv3 (Conv2D)        (None, 56, 56, 256)       590080
_________________________________________________________________
block3_pool (MaxPooling2D)   (None, 28, 28, 256)       0
_________________________________________________________________
block4_conv1 (Conv2D)        (None, 28, 28, 512)       1180160
_________________________________________________________________
block4_conv2 (Conv2D)        (None, 28, 28, 512)       2359808
_________________________________________________________________
block4_conv3 (Conv2D)        (None, 28, 28, 512)       2359808
_________________________________________________________________
block4_pool (MaxPooling2D)   (None, 14, 14, 512)       0
_________________________________________________________________
block5_conv1 (Conv2D)        (None, 14, 14, 512)       2359808
_________________________________________________________________
block5_conv2 (Conv2D)        (None, 14, 14, 512)       2359808
_________________________________________________________________
block5_conv3 (Conv2D)        (None, 14, 14, 512)       2359808
_________________________________________________________________
block5_pool (MaxPooling2D)   (None, 7, 7, 512)         0
=================================================================
Total params: 14,714,688
Trainable params: 14,714,688
Non-trainable params: 0
_________________________________________________________________

Model loaded

Model: "vgg16"

_________________________________________________________________

Layer (type) Output Shape Param #

=================================================================

input_1 (InputLayer) (None, 224, 224, 3) 0

_________________________________________________________________

block1_conv1 (Conv2D) (None, 224, 224, 64) 1792

_________________________________________________________________

block1_conv2 (Conv2D) (None, 224, 224, 64) 36928

_________________________________________________________________

block1_pool (MaxPooling2D) (None, 112, 112, 64) 0

_________________________________________________________________

block2_conv1 (Conv2D) (None, 112, 112, 128) 73856

_________________________________________________________________

block2_conv2 (Conv2D) (None, 112, 112, 128) 147584

_________________________________________________________________

block2_pool (MaxPooling2D) (None, 56, 56, 128) 0

_________________________________________________________________

block3_conv1 (Conv2D) (None, 56, 56, 256) 295168

_________________________________________________________________

block3_conv2 (Conv2D) (None, 56, 56, 256) 590080

_________________________________________________________________

block3_conv3 (Conv2D) (None, 56, 56, 256) 590080

_________________________________________________________________

block3_pool (MaxPooling2D) (None, 28, 28, 256) 0

_________________________________________________________________

block4_conv1 (Conv2D) (None, 28, 28, 512) 1180160

_________________________________________________________________

block4_conv2 (Conv2D) (None, 28, 28, 512) 2359808

_________________________________________________________________

block4_conv3 (Conv2D) (None, 28, 28, 512) 2359808

_________________________________________________________________

block4_pool (MaxPooling2D) (None, 14, 14, 512) 0

_________________________________________________________________

block5_conv1 (Conv2D) (None, 14, 14, 512) 2359808

_________________________________________________________________

block5_conv2 (Conv2D) (None, 14, 14, 512) 2359808

_________________________________________________________________

block5_conv3 (Conv2D) (None, 14, 14, 512) 2359808

_________________________________________________________________

block5_pool (MaxPooling2D) (None, 7, 7, 512) 0

=================================================================

Total params: 14,714,688

Trainable params: 14,714,688

Non-trainable params: 0

_________________________________________________________________

ひとまず、できていました。このあと、全結合層を後ろに追加していくことになります。それは次回！

次回

Web Application: 第７回　VGG16を使った転移学習

Web Application: 第５回　npyデータからCNN

こんにちは Keita_Nakamori(´・ω・`)です。

前回はTensor Flowにインプットするnpyデータを作成しました。

今回はTensorflowとKerasで畳み込みニューラルネットワークを構築して、訓練・評価してみます。

keras公式ページのSequential-model-guideを参考にします。

スクリプト：cnn_test.py

VGG-likeなconvnet　を参考に動作を確認していきます。

import numpy as np
import tensorflow as tf
import keras

from keras.models import Sequential
from keras.layers import Dense, Dropout, Flatten
from keras.layers import Conv2D, MaxPooling2D

from keras.optimizers import SGD, Adam
from keras.utils import np_utils


# initialize parameters
classes = ['car', 'motorbike'] # define 2 classses 
num_classes = len(classes)     # the number of classes
image_size = 150               # pixels of width or height

# load npy file
# need 'allow_pickle=True'
X_train, X_test, y_train, y_test = np.load('./image_files.npy', allow_pickle=True)

# one hot encording
y_train = np_utils.to_categorical(y_train, num_classes)
y_test = np_utils.to_categorical(y_test, num_classes)

# define model
model = Sequential()

model.add(Conv2D(32,(3, 3), activation='relu', input_shape=(image_size, image_size, 3)))
model.add(Conv2D(32,(3, 3), activation='relu'))
model.add(MaxPooling2D(pool_size=(2,2)))
model.add(Dropout(0.25)) # 25%のデータは捨てる

model.add(Flatten())
model.add(Dense(256, activation='relu'))
model.add(Dropout(0.5))
model.add(Dense(num_classes, activation='softmax'))

# define optimiser
opt = SGD(lr=0.01) # rmsprop, adam etc...
model.compile(loss='categorical_crossentropy', optimizer=opt, metrics=['accuracy'])

# trainning start
history = model.fit(X_train, y_train, batch_size=32, epochs=30)

# evaluation
score = model.evaluate(X_test, y_test, batch_size=32)
print()
print('Test loss:', score[0])
print('Test accuracy:', score[1])

import numpy as np

import tensorflow as tf

import keras

from keras.models import Sequential

from keras.layers import Dense, Dropout, Flatten

from keras.layers import Conv2D, MaxPooling2D

from keras.optimizers import SGD, Adam

from keras.utils import np_utils

# initialize parameters

classes = ['car', 'motorbike'] # define 2 classses

num_classes = len(classes) # the number of classes

image_size = 150 # pixels of width or height

# load npy file

# need 'allow_pickle=True'

X_train, X_test, y_train, y_test = np.load('./image_files.npy', allow_pickle=True)

# one hot encording

y_train = np_utils.to_categorical(y_train, num_classes)

y_test = np_utils.to_categorical(y_test, num_classes)

# define model

model = Sequential()

model.add(Conv2D(32,(3, 3), activation='relu', input_shape=(image_size, image_size, 3)))

model.add(Conv2D(32,(3, 3), activation='relu'))

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

model.add(Dropout(0.25)) # 25%のデータは捨てる

model.add(Flatten())

model.add(Dense(256, activation='relu'))

model.add(Dropout(0.5))

model.add(Dense(num_classes, activation='softmax'))

# define optimiser

opt = SGD(lr=0.01) # rmsprop, adam etc...

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

# trainning start

history = model.fit(X_train, y_train, batch_size=32, epochs=30)

# evaluation

score = model.evaluate(X_test, y_test, batch_size=32)

print()

print('Test loss:', score[0])

print('Test accuracy:', score[1])

実行

では　Anacondaプロンプトから　$ conda info -e で仮想環境リストを確認して

(base) C:\Users\keita>conda info -e
# conda environments:
#
base * C:\Users\keita\Anaconda3
djangoai C:\Users\keita\Anaconda3\envs\djangoai

(base) C:\Users\keita>conda info -e

# conda environments:

base * C:\Users\keita\Anaconda3

djangoai C:\Users\keita\Anaconda3\envs\djangoai

djangoaiが存在することを確認したら、$ conda activate djangoai　して仮想環境に入ります。

(base) C:\Users\keita>conda activate djangoai

(djangoai) C:\Users\keita>

(base) C:\Users\keita>conda activate djangoai

(djangoai) C:\Users\keita>

カレントディレクトリをcnn_test.pyがある場所まで移動して、実行します。

(djangoai) C:\Users\keita>cd anaconda_projects
(djangoai) C:\Users\keita\anaconda_projects>cd djangoai
(djangoai) C:\Users\keita\anaconda_projects\djangoai>python cnn_test.py

(djangoai) C:\Users\keita>cd anaconda_projects

(djangoai) C:\Users\keita\anaconda_projects>cd djangoai

(djangoai) C:\Users\keita\anaconda_projects\djangoai>python cnn_test.py

結果

エポック数３０回やった結果、精度はacc: 0.99まで向上しましたが、検証データではTest accuracy:0.81までしか出ていません。おそらく過学習になっていると思われます。まだまだ改善の余地ありです。

Epoch 5/30
600/600 [==============================] - 13s 22ms/step - loss: 0.5880 - acc: 0.7017
Epoch 10/30
600/600 [==============================] - 13s 22ms/step - loss: 0.4863 - acc: 0.7850
Epoch 15/30
600/600 [==============================] - 14s 23ms/step - loss: 0.3483 - acc: 0.8617
Epoch 20/30
600/600 [==============================] - 13s 22ms/step - loss: 0.2374 - acc: 0.9150
Epoch 25/30
600/600 [==============================] - 13s 22ms/step - loss: 0.1508 - acc: 0.9633
600/600 [==============================] - 14s 23ms/step - loss: 0.0626 - acc: 0.9900
200/200 [==============================] - 2s 8ms/step

Test loss: 0.37387794256210327
Test accuracy: 0.81

Epoch 5/30

600/600 [==============================] - 13s 22ms/step - loss: 0.5880 - acc: 0.7017

Epoch 10/30

600/600 [==============================] - 13s 22ms/step - loss: 0.4863 - acc: 0.7850

Epoch 15/30

600/600 [==============================] - 14s 23ms/step - loss: 0.3483 - acc: 0.8617

Epoch 20/30

600/600 [==============================] - 13s 22ms/step - loss: 0.2374 - acc: 0.9150

Epoch 25/30

600/600 [==============================] - 13s 22ms/step - loss: 0.1508 - acc: 0.9633

600/600 [==============================] - 14s 23ms/step - loss: 0.0626 - acc: 0.9900

200/200 [==============================] - 2s 8ms/step

Test loss: 0.37387794256210327

Test accuracy: 0.81

オプティマイザーを変更

SGDからAdamに切り替えてみました。大きく悪化しました。（笑）

Epoch 10/30
600/600 [==============================] - 19s 32ms/step - loss: 8.0859 - acc: 0.4983

Epoch 20/30
600/600 [==============================] - 17s 28ms/step - loss: 8.0859 - acc: 0.4983

Epoch 30/30
600/600 [==============================] - 17s 29ms/step - loss: 8.0859 - acc: 0.4983
200/200 [==============================] - 1s 7ms/step

Test loss: 7.978457450866699
Test accuracy: 0.505

Epoch 10/30

600/600 [==============================] - 19s 32ms/step - loss: 8.0859 - acc: 0.4983

Epoch 20/30

600/600 [==============================] - 17s 28ms/step - loss: 8.0859 - acc: 0.4983

Epoch 30/30

600/600 [==============================] - 17s 29ms/step - loss: 8.0859 - acc: 0.4983

200/200 [==============================] - 1s 7ms/step

Test loss: 7.978457450866699

Test accuracy: 0.505

可視化にチャレンジ

djangoai仮想環境内で$pip install matplotlib　します。

matplotlib-3.1.1　が入りました。

下記コードを最後に追加しました。オプティマイザーはSGDに戻しました。

import&nbsp;matplotlib.pyplot&nbsp;as&nbsp;plt

# visualizer
loss     = history.history['loss']

nb_epoch = len(loss)
plt.plot(range(nb_epoch), loss, marker='.', label='loss')

plt.legend(loc='best', fontsize=10)
plt.grid()
plt.xlabel('epoch')
plt.ylabel('loss')
plt.show()

import matplotlib.pyplot as plt

# visualizer

loss = history.history['loss']

nb_epoch = len(loss)

plt.plot(range(nb_epoch), loss, marker='.', label='loss')

plt.legend(loc='best', fontsize=10)

plt.grid()

plt.xlabel('epoch')

plt.ylabel('loss')

plt.show()

横軸にエポック数　縦軸に損失です。　きれいな右肩下がりです。

次回

Web Application: 第６回　はじめてのwebアプリ

Web Application: 第４回　画像データをnpyデータに変換

こんにちはKeita_Nakamori(´・ω・`)です。

前回flickrから取得した画像データをTensor Flowが読めるように数値データに変換していきます。

必要なモジュールをインストール

pip install Pillow :
pip install scikit-learn :

Pillow-6.1.0とscikit-learn-0.21.3が入りました

スクリプト：generate_inputdata.py

from PIL import Image # image operation
import os             # get file list
import glob           # image treatment
import numpy as np    # culculation
from sklearn.model_selection import train_test_split # split data

# initialize parameters
classes = ['car', 'motorbike'] # define 2 classses 
num_classes = len(classes)     # the number of classes
image_size = 150               # pixels of width or height

# read images and cnvert numpy array
X = [] # ready to make list
Y = [] # ready to make list

# numbering and 
for index, class_label in enumerate(classes):
    
    # create class_label directories (car or motorbike)
    photos_dir ='./' + class_label

    # search jpeg fileb and create files object
    files = glob.glob(photos_dir + '/*.jpg')

    for i, file in enumerate(files):

        # open image files as instance
        image = Image.open(file)

        # convert image into RGB value data
        image = image.convert('RGB')

        # align to the same size (just in case)
        image = image.resize((image_size, image_size))

        # convert RGB value into numpy array 
        data = np.asarray(image)

        # normalize
        data = data / 255.0

        # append value to list
        X.append(data)
        Y.append(index)

# convert list into numpy array
X = np.array(X)
Y = np.array(Y)

# split data (training and test)
X_train, X_test, y_train, y_test = train_test_split(X, Y)

# replace 1 variable
xy =(X_train, X_test, y_train, y_test)

# save values as npy file 
np.save('./image_files.npy', xy)

from PIL import Image # image operation

import os # get file list

import glob # image treatment

import numpy as np # culculation

from sklearn.model_selection import train_test_split # split data

# initialize parameters

classes = ['car', 'motorbike'] # define 2 classses

num_classes = len(classes) # the number of classes

image_size = 150 # pixels of width or height

# read images and cnvert numpy array

X = [] # ready to make list

Y = [] # ready to make list

# numbering and

for index, class_label in enumerate(classes):

# create class_label directories (car or motorbike)

photos_dir ='./' + class_label

# search jpeg fileb and create files object

files = glob.glob(photos_dir + '/*.jpg')

for i, file in enumerate(files):

# open image files as instance

image = Image.open(file)

# convert image into RGB value data

image = image.convert('RGB')

# align to the same size (just in case)

image = image.resize((image_size, image_size))

# convert RGB value into numpy array

data = np.asarray(image)

# normalize

data = data / 255.0

# append value to list

X.append(data)

Y.append(index)

# convert list into numpy array

X = np.array(X)

Y = np.array(Y)

# split data (training and test)

X_train, X_test, y_train, y_test = train_test_split(X, Y)

# replace 1 variable

xy =(X_train, X_test, y_train, y_test)

# save values as npy file

np.save('./image_files.npy', xy)

実行しましょう

(djangoai) C:\Users\keita\anaconda_projects\djangoai>python generate_inputdata.py

フォルダを見ると新しく「image_files.npy」　　609,516,317 （６０９MB？）のデータが生成されました。

次回

Web Application: 第５回　はじめてのwebアプリ

flaskをちょっといじってみます。

テンプレートを使ってみます。

views.py

form.py

model.py

result.html

実行してみる

おわり

django-bootstrap4 をインストール

htmlファイルの作成

base.html の作成

１．タイトル

２．内容

cssファイルの作成

index.html の作成

１．埋め込み先の宣言

２．埋め込むタイトルを定義

３．埋め込む内容を定義

forms.py を作成する

views.py へforms.pyを埋め込む

apps.pyを確認する

myproject/settings.py を編集する

ではここまでをブラウズしてみます。

次回

car_motorbike/urls.py 新規作成

myproject/urls.py 編集

car_motorbike/views.py の編集

動作チェック

次回

プロジェクトを作成する

djangoプロジェクトの生成

用語 ウィズギーとは

開発用の内蔵サーバーを起動する

簡単なwebアプリケーションを作ってみる

views.py を編集する

urls.py を編集する

コメントアウトの部分を読んでみましょう。

機能ビュー

クラスベースのビュー

別のURLconfを含める

urls.py を編集する

次回

スクリプト：VGG16_trans.py

構造

結果

スクリプト：vgg16_predict.py

予測

次回

VGG16をやってみます。

VGG16用の入力データを作成

スクリプト：generate_inputdata_224.py

転移学習のモデル作成

結果

次回

スクリプト：cnn_test.py

実行

結果

オプティマイザーを変更

可視化にチャレンジ

次回

必要なモジュールをインストール

スクリプト：generate_inputdata.py

実行しましょう

次回

base.html　の作成

index.html　の作成

forms.py　を作成する

car_motorbike/urls.py　新規作成

myproject/urls.py　編集

用語　ウィズギーとは

views.py　を編集する

urls.py　を編集する

urls.py　を編集する