knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

ディープラーニングで画像認識 実装、keras  ImageDataGenerator

index:

概要

mnist 等のサンプル以外で、画像認識の実装テストを行いました。
条件として、自前の画像を準備(カメラ撮影、ネット検索等で取得)し、
ラベル情報を追加して、教師データとして。学習する実践編の形となります。

環境

keras : 2.1.3
tensorflow : 1.4
python : 3.5.2

処理の流れ

・学習
・学習結果、保存
・学習結果、ロード
・検証(predict)
=>画像認識(判定ラベルの出力)

前処理については、次回以降で記載したいと思います。

コード

github.com


上記に、コミットしています。

学習データの配置

data フォルダの下に、
train : 学習用
validation : 検証用
を作成し、
各フォルダの下に、
認識ラベル単位のフォルダ、その下に、学習用の画像を配置

C:\tmp\2017_tmp\python35\tensorflow\img_data_test>tree data
フォルダー パスの一覧:  ボリューム Acer
ボリューム シリアル番号は 7221-E6BF です
C:\TMP\2017_TMP\PYTHON35\TENSORFLOW\IMG_DATA_TEST\DATA
├─train
│  ├─bird
│  ├─cat
│  ├─dog
│  └─flower
└─validation
    ├─bird
    ├─cat
    ├─dog
    └─flower

ファイル一覧、の一部。
学習用(train)、cat (ネコ) 種類の画像を配置
その他の認識させたい、単位でフォルダを作成し
検証用も、同様に。配置します

C:\tmp\2017_tmp\python35\tensorflow\img_data_test>dir data\train\cat

2018/11/27  09:51    <DIR>          .
2018/11/27  09:51    <DIR>          ..
2018/11/26  15:46            29,476 cat_0_1.jpg
2018/11/26  15:46            24,597 cat_0_1016.jpg
2018/11/26  15:46            27,204 cat_0_1027.jpg
2018/11/26  15:46            25,610 cat_0_1213.jpg
2018/11/26  15:46            22,106 cat_0_1290.jpg
2018/11/26  15:46            25,508 cat_0_1396.jpg
2018/11/26  15:46            22,789 cat_0_1464.jpg
2018/11/26  15:46            24,569 cat_0_1548.jpg
2018/11/26  15:46            23,503 cat_0_1951.jpg
2018/11/26  15:46            28,274 cat_0_1960.jpg
2018/11/26  15:46            23,413 cat_0_1986.jpg
2018/11/26  15:46            27,176 cat_0_2018.jpg
2018/11/26  15:46            23,045 cat_0_2026.jpg
2018/11/26  15:46            27,157 cat_0_2090.jpg
2018/11/26  15:46            24,045 cat_0_2145.jpg
2018/11/26  15:46            23,925 cat_0_2208.jpg
2018/11/26  15:46            25,596 cat_0_2324.jpg
2018/11/26  15:46            23,728 cat_0_2454.jpg
2018/11/26  15:46            23,944 cat_0_2714.jpg
2018/11/26  15:46            26,649 cat_0_2750.jpg

実行方法

・ train.py
=> 学習処理、学習済みファイルの保存

・predict.py
=> 検証(画像判定)の処理、検証したい画像ファイルを指定します。
 例: python predict.py ファイル名

説明など

・学習
ImageDataGenerator で、学習/検証 各フォルダの、画像リサイズ、
ラベル(class)を生成します
epochs 数は、適等に修正下さい。

flow_from_directory は、フォルダを指定すると、
学習に必用なデータに、変換してくれそうですので
便利でしたが。変換後の数値データ等が、カンタンに見れないようで
いまいち、不安が残りました。
class_mode='categorical' を指定すると、3種類以上のカテゴリにも
対応されるようです

train.py

batch_size = 32
epochs = 5
#epochs = 1
#
#ImageDataGenerator
train_datagen = ImageDataGenerator(
    rescale=1.0 / 255,
    shear_range=0.2,
    zoom_range=0.2,
    horizontal_flip=True)

test_datagen = ImageDataGenerator(rescale=1.0 / 255)
#
train_generator = train_datagen.flow_from_directory(
        'data/train',
        target_size=(128, 128),
        batch_size=batch_size,
        class_mode='categorical')
label_dict = train_generator.class_indices
print( label_dict )
num_categ =len(label_dict)
#
validation_generator = test_datagen.flow_from_directory(
        'data/validation',
        target_size=(128, 128),
        batch_size=batch_size,
         class_mode='categorical')

・モデル作成、実行。結果の保存。

#model
model_cls= Img_Model(num_categ)
model= model_cls.get_model()
model.compile(loss='categorical_crossentropy',
        optimizer='adam',
        metrics=['accuracy'])

#fit
history = model.fit_generator(
        train_generator,
        samples_per_epoch=800,
        nb_epoch=epochs,
        validation_data=validation_generator,
        nb_val_samples=200)
model.save_weights('img_test.h5')  

・ 検証
predict.py
学習済ファイルのロード、
モデルの コンパイル
・ predict で、検証。
numpy arrayが、出力され、各class (フォルダ単位の種類)
ごとの正解率が出力されますので、class を検索して出力します。

#
model_cls= Img_Model(num_categ)
model= model_cls.get_model()

model.load_weights( 'img_test.h5')

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

pred  = model.predict(x)[0]

ログ等

・検証の結果
neko_13.jpg で、ネコの画像を検証
class=cat
=> ネコの判定が、出力されました、(正解です)

python   predict.py neko_13.jpg

Using TensorFlow backend.
neko_13.jpg
Found 243 images belonging to 4 classes.
{'cat': 1, 'dog': 2, 'bird': 0, 'flower': 3}
2018-11-27 17:04:02.157415: I C:\tf_jenkins\home\workspace\rel-win\M\windows\PY\35\tensorflow\core\platform\cpu_feature_guard.cc:137] Your CPU
 compiled to use: AVX
predict:
[  8.98553699e-05   9.68049169e-01   3.16024683e-02   2.58460728e-04]
max= 0.968049
dict-value:
1
class=cat

・train の実行ログ
学習画像は、少なめですが。
エポック単位で、110秒ほど処理していますので
作業用のwinPCでは、画像の増加や、パラメータ変更を行う場合。
かなり処理時間が必用かもしれません。

f:id:knaka0209:20181127170943p:plain

カスタムテーマで色調を変更する。 Hexoで高速サイトを構築する(5)

概要

前回の、Hexo 静的サイトジェネレーターの関連となりますが、
カスタムテーマの色調を、変更しやすくできるように修正しました。

前回と同様、bootstrap3 + CSS3 でレスポンシブ構成ですが。
lessを使用、色のRGB値を変数に設定し。
一括して色の値を、変更できるように検討しました。
色は、マテリアルデザインの色を参考にしています。

lessc main.less main.css
lessc main-sp.less main-sp.css

lessc (コンパイラ)で、CSS生成します

設定方法など

less ファイルに、色の各設定を記載しておきます。
マテリアルデザイン
メインカラー、サブカラー、アクセントカラーの、3色に対応してます。

@mycolor-main  : #757575;
@mycolor-sub   : #9E9E9E;
@mycolor-accent: #FF7043;

node.js テンプレートから、設定する色の CSSを読み込みます。

  <%- css('css/main.css?A3') %>
  <link href="<%- config.root %>css/main-sp.css?A3" rel="stylesheet" media="screen and (max-width: 480px)">

generate して、サイトにコピーします。

Github

修正版のテーマ公開しました。
https://github.com/kuc-arc-f/theme_ex5github.com

カスタムテーマを追加しました。サイドバー付 Hexoで高速サイトを構築する(4)

f:id:knaka0209:20180708135701p:plain

概要

前回の、Hexo 静的サイトジェネレーターの関連となりますが、
カスタムテーマを追加しました。

前回と同様、bootstrap3 + CSS3 でレスポンシブ構成
1) top画面サイドバー付、2カラムのレイアウト
2) 色調は、グレー系としました。

デモURL

https://kuc-arc-f.github.io/hexo_4/

Github pages で公開しています。

カスタムテーマ

github で公開しました。
github.com

カスタムテーマを更新しました。 Hexoで高速サイトを構築する(3)

f:id:knaka0209:20180707165113p:plain

概要

前回の、Hexo 静的サイトジェネレーターの関連となりますが、
カスタムテーマ更新版を公開しました。

前回と同様、bootstrap3 + CSS3 でレスポンシブ構成
1) 投稿(post)詳細の、サイドバー追加。レイアウト調整
2) カテゴリ一覧の、レイアウト調整

デモURL

https://kuc-arc-f.github.io/hexo_3/

Github pages で公開しています。

カスタムテーマ

github.com

プロジェクト/themes/ 下に配置し、コンフィグでテーマ設定、
ジェネレート(hexo generate)します。

HexoのカスタムテーマをNode.jsで作成する/第1回 ,Hexoで高速サイトを構築する(2)

f:id:knaka0209:20180617171045p:plain

index:

概要

前回の、Hexo サイトジェネレーターの関連となりますが、
公開テーマを、適用するのでなく。
カスタムテーマの作成を試してみたいと思います。

bootstrap3 + CSS3 でレスポンシブ構成
試しで、Github pages で公開を目標にしていたいと
思います。

node.jsのテンプレートの作成/編集し、
HTML/CSSデザインは事前に準備しておきます。
今回は、apolloテーマを参考にしました。

前回の記事、参考です。
knaka0209.hatenablog.com

テンプレート構成

標準のlandscapeテーマを見てみてみます。
カスタマイズ部分を把握しておきたい所です。

C:\tmp\2017_tmp\node\hexo\blog3\themes\landscape\layout>tree . /F
フォルダー パスの一覧:  ボリューム Acer
ボリューム シリアル番号は 7221-E6BF です
C:\TMP\2017_TMP\NODE\HEXO\BLOG3\THEMES\LANDSCAPE\LAYOUT
│  archive.ejs
│  category.ejs
│  index.ejs
│  layout.ejs
│  page.ejs
│  post.ejs
│  tag.ejs
│
├─_partial
│  │  after-footer.ejs
│  │  archive-post.ejs
│  │  archive.ejs
│  │  article.ejs
│  │  footer.ejs
│  │  gauges-analytics.ejs
│  │  google-analytics.ejs
│  │  head.ejs
│  │  header.ejs
│  │  mobile-nav.ejs
│  │  sidebar.ejs
│  │
│  └─post
│          category.ejs
│          date.ejs
│          gallery.ejs
│          nav.ejs
│          tag.ejs
│          title.ejs
│
└─_widget
        archive.ejs
        category.ejs
        recent_posts.ejs
        tag.ejs
        tagcloud.ejs


使いそうな、テンプレート
Layout.ejs : レイアウトの親
index.ejs : root
post.ejs : post( 投稿 ) / 各詳細
archive.ejs : アーカイブ
category.ejs : カテゴリの リスト

・公開されているテーマは、下層のテンプレを
テンプレ内から、partial で読み込んだり
階層が深い物あり、テンプレ数が多い場合は
修正箇所を特定するのが、難航しそうでした

作成したサイト、 github pages

https://kuc-arc-f.github.io/hexo_3/

・1カラムレイアウト
・サイドバー無し。
・下層ページは少なめ。
 カテゴリ、リスト
 カテゴリ、詳細ページ
・カテゴリは2種類程
・トップメニュー、カテゴリへのリンクを一部追加

コンフィグ設定等は、
前回と同様。

作成したテーマ

theme_ex3 、ベータ版ですが。
細かい部分は、見直しかけたいと思います

github.com

静的サイトジェネレーター Hexoお試し編

index:

概要

サイトジェネレーターの Hexoを使って、
ブログ等のサイト構築を試してみました。
github pageに配置を目標としています。

背景として、wordpressの編集や、読み込みが遅く、
対策で、高速表示できるサイト構築方法があれば良いなと
考えていたのですが、データベースやphp不要な点は良さそうですが。
hexoの場合は、node.js の操作が必要だったり。しますね

markdown書式に対応していて、
ページを生成してくれますので、便利そうです。

初期設定、準備とか

windowsで、作成してみました。node.js , npmが必要です。

C:\tmp\2017_tmp\node\hexo\blog4>node -v
v8.11.2

C:\tmp\2017_tmp\node\hexo\blog4>npm -v
5.6.0

node.js はパスを通しておくと、Hexo 実行できました。

install, 本家サイトに記載されているコマンド
実行しました。

npm install hexo-cli -g
hexo init blog
cd blog
npm install

hexo server を使うと、テストできますが、
ローカルのapacheとかに置いてもテスト可能でした。

ルートのパスの変更

server直下に、サイト配置する場合は変更不要。
apache等で、htdocs以下の下位フォルダにおく場合は、変更が必要
下記は。 /blog4 に構築しています。

/_config.yml を修正、 root の部分を / から
/blog4/ に変更しています。

 URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /blog4/
permalink: :year/:month/:day/:title/
permalink_defaults:

1回目の、投稿を追加して
generate(生成)しています。

/public に生成されます。

hexo new "My New Post"

hexo generate

ローカルの apache サーバですが
ブラウザで、開きます。
例として、URLは下記です。
localhost/blog4/
 テーマは標準版ですが、表示できました。

f:id:knaka0209:20180616172057p:plain

テーマの変更

標準でも良いのですが、apollo
のテーマ設定してみました。

https://github.com/joyceim/hexo-theme-apollo

/_config.yml を修正

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: apollo

generateして、ブラウザで確認。
ずいぶんシンプルになりました。

f:id:knaka0209:20180616173258p:plain

more タグ

上記の hexo new と同様に
ページを追加し
mdファイルを、書きます。
source\_posts\ の下に、タイトル名.md
みたいなファイルが生成されますので、編集

下記の more の部分を追加
( 全角文字を記入していますが、半角に変更下さい  )

---
title: 'new 2nd post, more test'
date: 2018-06-16 17:49:28
tags:
---

more のてすと
more のてすと

<!ーー more ーー>

more のてすと
more のてすと
more のてすと
more のてすと
more のてすと

見え方は、Read More
のリンクが表示されました。

f:id:knaka0209:20180616180017p:plain

リンク押すと、詳細ページが開き。
全文が表示されます

カテゴリの追加

カテゴリ追加し、投稿種類を増やてみます。
カテゴリを追加する、ページも追加しときます。

hexo new page categories

hexo new "news-1"
hexo new "news-2"

追加された、mdファイルに
category を追加、newsの名称にしています。

---
title: news-1
category : news
date: 2018-06-16 18:07:40
tags:
---


news カテゴリを開きます。
blog4/categories/news/

newsのリストが自動生成されました。

f:id:knaka0209:20180616182545p:plain

topメニューの、newsカテゴリの追加。
設定ファイルで可能かもしれませんが、
テーマを修正してみました。。
<li > のnews の行で、URLは絶対パスでベタ書きですが。
メニューから、カテゴリの各リストへ移動できます。

f:id:knaka0209:20180616182701p:plain

ファイル:
themes\apollo\layout\_partial\header.ejs

GitHub Pages で公開する。

rootを、hexo_2にしてますが。

gitHub で、リポジトリを作成し、
git push しました、setting はGitHub Pages
の設定をしておきます。

URL:
https://kuc-arc-f.github.io/hexo_2/

hexo が生成したコード
github.com

xcopy で、一括コピー。apache/htdocs

windows版ですが。
generate で、 publicフォルダが生成されますが、
apacheなどの rootに一括コピーするコマンド
generate 後に、コピーすると便利でした。

xcopy /Y /E public C:\xampp\htdocs\blog2\

f:id:knaka0209:20180714130218p:plain

wordpress で詳細ページ(single.php) の画像サイズをレスポンシブ対応に変更する。

概要:

標準テーマを使用せず、カスタム自作テーマ等を組み込む場合で
詳細画面(single.php) の、画像サイズのレスポンシブ化が
難航したのでメモです。
=> 内容的には、カンタンなCSS追加のみ。

環境とか

wordpress 4.9.6
テーマ:twentysixteen のカスタマイズ版(自作)
元の style.cssの内容は、ほぼ全て消してます。
 *) Theme Name とか、記載ルール等は残す
カスタムテーマの、HTML/CSS は事前に準備してます。

対策前:

singe.php で、the_content()
が出力するHTML は、下記でした。
サイズ=フルサイズで、 1024×768 の画像を添付した場合。

the_content() 内の処理は、
カスタマイズは、難しそうでしたので
CSS で 、対応検討しました。

<p>&nbsp;</p>
<p><img class="alignnone size-full wp-image-12" src="http://localhost/wp3/wp-content/uploads/2018/05/41_153422350_sara.jpg" alt=""
 width="1024" height="768"
 srcset="http://localhost/wp3/wp-content/uploads/2018/05/41_153422350_sara.jpg 1024w, http://localhost/wp3/wp-content/uploads/2018/05/41_153422350_sara-300x225.jpg 300w, http://localhost/wp3/wp-content/uploads/2018/05/41_153422350_sara-768x576.jpg 768w, http://localhost/wp3/wp-content/uploads/2018/05/41_153422350_sara-320x240.jpg 320w"
 sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" />
</p>
<p>post-0605A11- body</p>
<p>&nbsp;</p>
</p>

srcset、sizes 属性とかありますね。
width, height が指定されているので、
CSSを追加しないと、レスポンシプは無理そうです。

修正前の画面:
このページは、bootstrap のグリッドシステムを適用してますが、
PC画面の右のサイドバー部品に、画像が重なっています。
ダメですね
スマホだとさらに、はみ出します。

f:id:knaka0209:20180607102921p:plain

修正後:

f:id:knaka0209:20180607103205p:plain


css を追加して、カンタンな対応しました。

img.alignnone{
 max-width: 100%;
 height : auto;
}

alignnone クラスが、出力されたので、
max-width とか、適用すると。いい感じでした