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アプリ

Web Application: 第３回　flickr（フリッカー）で画像収集

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

flickrのサイトから画像を引っ張ってきてTensorFlowに流すサンプルデータにしようと思います。

登録とAPIキーの取得

トップページの一番下のDeveloperをおしてAPIキーのリスエストを行います。まずはメルアドの登録などをやってサインアップします。

そうすると APIキーのリスエストができるようになりますので、APIキーを取得します。

flickrapiのインストール

flickrのapiにアクセスするためのモジュールflickrapiをインストールします。

VSコードのコマンドプロンプト内で、

PS C:\Users\keita\anaconda_projects\djangoai> pip install flickrapi

とすると、flickrapi-2.4.0 が入りました。が、これは使えません。

Anaconda プロンプトでconda activate djangoで仮想環境にはいり(djangoai) C:\Users\keita>pip install flickrapi　します。

flickrapi-2.4.0が入りました。

Imageをdownloadするスクリプト

ではflickrapiを使ってimageを取得していきましょう。djangoaiフォルダ内へ新たにdownload_images.pyを作成します。

from flickrapi import FlickrAPI
from urllib.request import urlretrieve
import os
import time
import sys

key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
secret = 'xxxxxxxxxxxxxxxx'
wait_time = 1 # 1 request per 1 second

# 2nd argument  on cmd becomes searching keyword
keyword = sys.argv[1] 

# directry for saving image files
save_dir ='./' + keyword

# cliant object to access to api
flickr = FlickrAPI(key, secret, format='parsed-json')

# api excuted result
result =flickr.photos.search(
    text = keyword,
    per_page = 400,     # the number of images
    media = 'photos',   # define collecting type
    sort = 'relevance', # new images
    safe_serch= 1,      # to avoid violence
    extras = 'url_q, license' # with url and licence data
)

# extracted photos(as key) from result object
photos = result['photos']

# extract photo in order from photos object and do numbering
for i, photo in enumerate(photos['photo']):

    # extract url
    url_q = photo['url_q']

    # make filepath : directory / photo id .jpg
    filepath = save_dir + '/' +photo['id'] + '.jpg'

    # need to make directory(mkdir) in advance
    # before excution thins script
    if os.path.exists(filepath): continue
    
    # save download data
    # arg1= download url , arg2= save directory/file name
    urlretrieve(url_q, filepath)
    print('url_q, filepath : ', url_q,'  ', filepath)

    # download interval
    time.sleep(wait_time)

print('==== Script is done. ====')

from flickrapi import FlickrAPI

from urllib.request import urlretrieve

import os

import time

import sys

key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

secret = 'xxxxxxxxxxxxxxxx'

wait_time = 1 # 1 request per 1 second

# 2nd argument on cmd becomes searching keyword

keyword = sys.argv[1]

# directry for saving image files

save_dir ='./' + keyword

# cliant object to access to api

flickr = FlickrAPI(key, secret, format='parsed-json')

# api excuted result

result =flickr.photos.search(

text = keyword,

per_page = 400, # the number of images

media = 'photos', # define collecting type

sort = 'relevance', # new images

safe_serch= 1, # to avoid violence

extras = 'url_q, license' # with url and licence data

)

# extracted photos(as key) from result object

photos = result['photos']

# extract photo in order from photos object and do numbering

for i, photo in enumerate(photos['photo']):

# extract url

url_q = photo['url_q']

# make filepath : directory / photo id .jpg

filepath = save_dir + '/' +photo['id'] + '.jpg'

# need to make directory(mkdir) in advance

# before excution thins script

if os.path.exists(filepath): continue

# save download data

# arg1= download url , arg2= save directory/file name

urlretrieve(url_q, filepath)

print('url_q, filepath : ', url_q,' ', filepath)

# download interval

time.sleep(wait_time)

print('==== Script is done. ====')

Imageを保存するフォルダを作成

車とバイクの画像をいれるフォルダを作っておきます。

(djangoai) C:\Users\keita\anaconda_projects\djangoai>mkdir car
(djangoai) C:\Users\keita\anaconda_projects\djangoai>mkdir motorbike

スクリプトを実行する。

仮想環境(conda activate djangoai)に入って、まずはモーターバイクの画像を収集しましょう。

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

じゃんじゃん入ってきました。

次回

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

Web Application: 第２回　VS codeのインストールとセッティング

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

前回はTensor Flowの試運転に成功しました。

今後アプリ開発をやっていく上でVSコードを使っていこうと思います。PyCharmよさようなら・・・。

VSコードのインストール

https://code.visualstudio.com/でWindows版を選択してインストーラーをダウンロードした後、実行します。

Pathは通しておきましょう。再起動後、画面左側にあるExtentionsボタンをおして、検索窓でpythonと入力して、pythonをインストールしましょう。

データ収集プログラムを作ってみる

では、左上のエクスプローラーボタンを押して、第１回目に作成した keita>Anaconda_projects>djangoaiフォルダを選択しましょう。

Jupyter Notebookで作成した tensorflow_test.ipynbが入っています。

練習のためHello World をやってみましょう

djangoaiフォルダの右側にNew Fileボタンを押してhello_world.pyを作ります。

右側のウィンドウにスクリプトが書けるように成りますのでテキトーにhello worldをプリント出力しましょう。

実行方法

どのPythonバージョンを使用するかの選択

メニュー>View>Command Pallet>Select interpriterで

第１回目で作成した仮想環境であるdjangoai:condaのPython3.7.4 64-bitを選択します。

画面の下に青い帯で変更されたことが確認できます。

ついでにpylintが入っていませんようと警告がでますのでInstallしましょう。condaかpipか聞かれますのでcondaにしてみました。

実行

スクリプト窓内で右クリックをしてrun python file in terminal　します。

するとコマンドプロンプト窓内で実行されます。

次回

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

Web Application: 第１回　Anaconda3のインストールと仮想環境構築

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

webアプリというものを少し作ってみたいと思います。

言語：Python
機械学習：TensorFlow
フレームワーク：Django
データベース : MySQL
サーバー：Xserver

あたりを使っていきます。

Anacondaのインストール

Anaconda 2019.07 for Windows Installerをインストールしました。

PathとRegister 両方ともチェックをいれました。

仮想環境djangoaiを作って、ついでにtensorflowを入れます。

Anaconda プロンプトを開いて、

(base) C:\Users\keita>conda create -n djangoai tensorflow

-nってなんでしょう。

# To activate this environment, use
#
# $ conda activate djangoai
#
# To deactivate an active environment, use
#
# $ conda deactivate

ということなので、

$ conda activate djangoai

して使ってみます。モジュール群を確認してみましょう。

(djangoai) C:\Users\keita>pip list

Package Version
——————– ———
absl-py 0.7.1
astor 0.8.0
certifi 2019.6.16
gast 0.2.2
grpcio 1.16.1
h5py 2.9.0
Keras-Applications 1.0.8
Keras-Preprocessing 1.1.0
Markdown 3.1.1
mkl-fft 1.0.14
mkl-random 1.0.2
mkl-service 2.3.0
numpy 1.16.5
pip 19.2.2
protobuf 3.8.0
pyreadline 2.1
scipy 1.3.1
setuptools 41.0.1
six 1.12.0
tensorboard 1.14.0
tensorflow 1.14.0
tensorflow-estimator 1.14.0
termcolor 1.1.0
Werkzeug 0.15.5
wheel 0.33.4
wincertstore 0.2
wrapt 1.11.2

確かにtensorflow 1.14.0が入っていますね。OKです。

Kerasも自動的に入ってきていますね。

仮想環境を抜けましょう。

(djangoai) C:\Users\keita>conda deactivate

(base) C:\Users\keita>

頭の(djangoai)が(base)に切り替わり仮想環境を抜けたことがわかります。

Anaconda Navigator

次に、Anaconda Navigatorを使ってみます。

Anaconda Navigatorを立ち上げて、Application on (base)にの部分をdjangoaiに切り替えます。このときまだJupyter NotebookはインストールされていませんのでInstallボタンを押します。完了したらLaunchにボタンが変わりますのでLaunchします。

これでいつものJupyter Notebookが起動しますが。

今回作っていくdjangoaiアプリはユーザーフォルダkeitaの下にanaconda_projectフォルダを作って、その下djangoaiフォルダを作って、その中にスクリプトを入れていきます。

では、Jupyter Notebookを起動したらanaconda_project > djangoフォルダに移動して新規にNewボタン > Python3 しましょう。

TensorFlowの試運転

初心者向けのテストスクリプトがありましたので、実行してみます。

サンプルデータを取得します。

import tensorflow as tf

# サンプルデータとしてmnistのデータをダウンロード
mnist = tf.keras.datasets.mnist
(x_train, y_train),(x_test, y_test) = mnist.load_data()

# 入力データの形を確認する
print(x_train.shape) # (60000, 28, 28)
'''
60000データあってそれぞれが
(28行x28列)の数字画像データ
'''
# １つのデータを見てみる
print(x_train[0].shape) # (28, 28)
print(x_train[0])       # 0から255までの数字が入っている。

# 正解データの形を確認する
print(y_train.shape) # (60000,) 60000個の１次元データ
print(y_train) # [5 0 4 ... 5 6 8]

import tensorflow as tf

# サンプルデータとしてmnistのデータをダウンロード

mnist = tf.keras.datasets.mnist

(x_train, y_train),(x_test, y_test) = mnist.load_data()

# 入力データの形を確認する

print(x_train.shape) # (60000, 28, 28)

'''

60000データあってそれぞれが

(28行x28列)の数字画像データ

'''

# １つのデータを見てみる

print(x_train[0].shape) # (28, 28)

print(x_train[0]) # 0から255までの数字が入っている。

# 正解データの形を確認する

print(y_train.shape) # (60000,) 60000個の１次元データ

print(y_train) # [5 0 4 ... 5 6 8]

訓練しやすいようにデータを加工します

# 入力データの数値 0-255 を255で割り算して0-1 に正規化する
x_train, x_test = x_train / 255.0, x_test / 255.0

1 2	# 入力データの数値 0-255 を255で割り算して0-1 に正規化する x_train, x_test = x_train / 255.0, x_test / 255.0

機械学習モデルと訓練と評価

# ニューラルネットワークモデルを作成する
model = tf.keras.models.Sequential([
    # 入力層の定義：入力データの形を教えて１行にフラット化
  tf.keras.layers.Flatten(input_shape=(28, 28)),

    # 中間層の定義：128ノード　活性化関数はrelu
  tf.keras.layers.Dense(128, activation='relu'),

    # データに偏りが発生しないように20%を捨てる
  tf.keras.layers.Dropout(0.2),

    # 出力層の定義：0-9の数字を判定したいので10ノード用意する。
    # 活性化関数はsoftmax
  tf.keras.layers.Dense(10, activation='softmax')
])

# 機械学習モデルのコンパイル
model.compile(optimizer='adam',
              #損失関数の定義：最適化（今回は最小化）する対象を定義
              loss='sparse_categorical_crossentropy',
              
              metrics=['accuracy'])

# 訓練する エポック数=5
model.fit(x_train, y_train, epochs=5)
'''
Epoch 1/5
60000/60000 [==============================] - 4s 68us/sample - loss: 0.2970 - acc: 0.9146
Epoch 2/5
60000/60000 [==============================] - 4s 65us/sample - loss: 0.1440 - acc: 0.9567
Epoch 3/5
60000/60000 [==============================] - 4s 75us/sample - loss: 0.1077 - acc: 0.9667
Epoch 4/5
60000/60000 [==============================] - 5s 84us/sample - loss: 0.0884 - acc: 0.9731
Epoch 5/5
60000/60000 [==============================] - 4s 74us/sample - loss: 0.0747 - acc: 0.9768
10000/10000 [==============================] - 0s 41us/sample - loss: 0.0709 - acc: 0.9780
'''

# 評価する
model.evaluate(x_test, y_test) 
'''
損失と精度
[0.07094512566379271, 0.978]
'''

# ニューラルネットワークモデルを作成する

model = tf.keras.models.Sequential([

# 入力層の定義：入力データの形を教えて１行にフラット化

tf.keras.layers.Flatten(input_shape=(28, 28)),

# 中間層の定義：128ノード　活性化関数はrelu

tf.keras.layers.Dense(128, activation='relu'),

# データに偏りが発生しないように20%を捨てる

tf.keras.layers.Dropout(0.2),

# 出力層の定義：0-9の数字を判定したいので10ノード用意する。

# 活性化関数はsoftmax

tf.keras.layers.Dense(10, activation='softmax')

])

# 機械学習モデルのコンパイル

model.compile(optimizer='adam',

#損失関数の定義：最適化（今回は最小化）する対象を定義

loss='sparse_categorical_crossentropy',

metrics=['accuracy'])

# 訓練するエポック数=5

model.fit(x_train, y_train, epochs=5)

'''

Epoch 1/5

60000/60000 [==============================] - 4s 68us/sample - loss: 0.2970 - acc: 0.9146

Epoch 2/5

60000/60000 [==============================] - 4s 65us/sample - loss: 0.1440 - acc: 0.9567

Epoch 3/5

60000/60000 [==============================] - 4s 75us/sample - loss: 0.1077 - acc: 0.9667

Epoch 4/5

60000/60000 [==============================] - 5s 84us/sample - loss: 0.0884 - acc: 0.9731

Epoch 5/5

60000/60000 [==============================] - 4s 74us/sample - loss: 0.0747 - acc: 0.9768

10000/10000 [==============================] - 0s 41us/sample - loss: 0.0709 - acc: 0.9780

'''

# 評価する

model.evaluate(x_test, y_test)

'''

損失と精度

[0.07094512566379271, 0.978]

'''

はい、ちゃんと動きました。

次回予告

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

2019年9月
月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

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

実行しましょう

次回

登録とAPIキーの取得

flickrapiのインストール

Imageをdownloadするスクリプト

Imageを保存するフォルダを作成

スクリプトを実行する。

次回

VSコードのインストール

実行方法

どのPythonバージョンを使用するかの選択

実行

次回

Anacondaのインストール

Anaconda Navigator

TensorFlowの試運転

サンプルデータを取得します。

機械学習モデルと訓練と評価

次回予告

base.html　の作成

index.html　の作成

forms.py　を作成する

car_motorbike/urls.py　新規作成

myproject/urls.py　編集

用語　ウィズギーとは

views.py　を編集する

urls.py　を編集する

urls.py　を編集する