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

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

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

htmlの雛形としてbase.htmlを作成しindex.htmlとpredict.htmlから共用しようという作戦です。

base.html の作成

/myproject/car_motorbike/ の下に

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

を新規作成して、まず初めにbase.htmlを書いていきます。

解説

html5の決まりごととして<!DOCTYPE html>を書きます。

日本語を使用しますよ、という宣言のため<html lang=”ja”>を書きます。

 

django-bootstrap4 をインストール

pip install django-bootstrap4

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

index.html の作成

base.htmlを流用していきましょう。

forms.py を作成する

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

views.py を編集する

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

 

myproject/settings.py を編集する

‘car_mortorbike.apps.CarbikeConfig’ を追記します。

 

ああ

 

DTL: Django Template Language

 

 

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

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

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

car_motorbike/urls.py 新規作成

 

使用するモジュールであるviews.py は 当該urls.pyと同層になるので

from . import views

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

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

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

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

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

myproject/urls.py 編集

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

/carbike/predict/ のようなurlツリー構造を構成して使っていきます。

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

 

car_motorbike/views.py の編集

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

動作チェック

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

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

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

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

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

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: 第10回 HTMLでかっこよくする

Web Application: 第8回 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

とランサーバー指令をコマンドプロンプトに打つと

と出るので、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 を編集する

オリジナルは下記のような2行のコードです。

これを編集してHTMLのindex.htmlに相当する部分を作っていきます。

アクセスが来たときに hello_worldとレスポンスを返すためのHttpRespose関数をインポートして使用します。

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

urls.py を編集する

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

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

(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 を編集する

機能ビューの

  1. インポートの追加:
  2.  URLをurlpatternsに追加します:

をやってみます。

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

では開発用サーバーを起動してみましょう。
>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: 第9回 Djangoでページのルーティング設定をする

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

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

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

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

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

スクリプト:VGG16_trans.py

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

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

構造

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

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

結果

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

しかし、結果は素晴らしいい。トレーニング100% テスト99%の精度。

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

スクリプト:vgg16_predict.py

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

予測

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

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

結果:car 100

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

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

結果:motorbike 100

3.試しにビキニ画像データを入力してみましたが・・・バイク100%になりました。(笑)

次回

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

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

VGG16をやってみます。

オックスフォード大学のVisual Geometry Groupが作った、畳み込み13層+全結合3層の 合計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 の行をコメントアウト

転移学習のモデル作成

では、データができたところで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()

結果

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

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

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

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

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

次回

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

 

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

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

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

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

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

スクリプト:cnn_test.py

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

実行

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

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

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

結果

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

オプティマイザーを変更

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

可視化にチャレンジ

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

matplotlib-3.1.1 が入りました。

下記コードを最後に追加しました。オプティマイザーはSGDに戻しました。
横軸にエポック数 縦軸に損失です。 きれいな右肩下がりです。

次回

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

Web Application: 第4回 画像データを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

実行しましょう

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

フォルダを見ると新しく「image_files.npy」  609,516,317 (609MB?)のデータが生成されました。

次回

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

 

 

Web Application: 第3回 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を作成します。

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: 第4回 はじめてのwebアプリ

 

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

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

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

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

VSコードのインストール

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

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

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

では、左上のエクスプローラーボタンを押して、第1回目に作成した 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で

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

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

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

実行

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

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

次回

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

 

 

Web Application: 第1回 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の試運転

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

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

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

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

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

次回予告

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