ディープラーニングで画像認識 実装、keras ImageDataGenerator
index:
概要
mnist 等のサンプル以外で、画像認識の実装テストを行いました。
条件として、自前の画像を準備(カメラ撮影、ネット検索等で取得)し、
ラベル情報を追加して、教師データとして。学習する実践編の形となります。
環境
keras : 2.1.3
tensorflow : 1.4
python : 3.5.2
処理の流れ
・学習
・学習結果、保存
・学習結果、ロード
・検証(predict)
=>画像認識(判定ラベルの出力)
前処理については、次回以降で記載したいと思います。
学習データの配置
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では、画像の増加や、パラメータ変更を行う場合。
かなり処理時間が必用かもしれません。
カスタムテーマで色調を変更する。 Hexoで高速サイトを構築する(5)
概要
前回の、Hexo 静的サイトジェネレーターの関連となりますが、
カスタムテーマの色調を、変更しやすくできるように修正しました。
前回と同様、bootstrap3 + CSS3 でレスポンシブ構成ですが。
lessを使用、色のRGB値を変数に設定し。
一括して色の値を、変更できるように検討しました。
色は、マテリアルデザインの色を参考にしています。
lessc main.less main.css lessc main-sp.less main-sp.css
lessc (コンパイラ)で、CSS生成します
Less とか
参考
http://lesscss.org/
http://www.tohoho-web.com/ex/less.html
設定方法など
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 して、サイトにコピーします。
デモなど
デモURLは、 github pages で公開しています。
blue:
url:
https://kuc-arc-f.github.io/hexo_5_blue/
カテゴリ:
green:
https://kuc-arc-f.github.io/hexo_5_green/categories/blog/
gray:
https://kuc-arc-f.github.io/hexo_5_gray/
紫:
https://kuc-arc-f.github.io/hexo_5_purple/
Github
修正版のテーマ公開しました。
https://github.com/kuc-arc-f/theme_ex5github.com
カスタムテーマを追加しました。サイドバー付 Hexoで高速サイトを構築する(4)
概要
前回の、Hexo 静的サイトジェネレーターの関連となりますが、
カスタムテーマを追加しました。
前回と同様、bootstrap3 + CSS3 でレスポンシブ構成
1) top画面サイドバー付、2カラムのレイアウト
2) 色調は、グレー系としました。
カスタムテーマ
github で公開しました。
github.com
カスタムテーマを更新しました。 Hexoで高速サイトを構築する(3)
概要
前回の、Hexo 静的サイトジェネレーターの関連となりますが、
カスタムテーマ更新版を公開しました。
前回と同様、bootstrap3 + CSS3 でレスポンシブ構成
1) 投稿(post)詳細の、サイドバー追加。レイアウト調整
2) カテゴリ一覧の、レイアウト調整
HexoのカスタムテーマをNode.jsで作成する/第1回 ,Hexoで高速サイトを構築する(2)
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種類程
・トップメニュー、カテゴリへのリンクを一部追加
コンフィグ設定等は、
前回と同様。
静的サイトジェネレーター 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/
テーマは標準版ですが、表示できました。
テーマの変更
標準でも良いのですが、apollo
のテーマ設定してみました。
https://github.com/joyceim/hexo-theme-apollo
/_config.yml を修正
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: apollo
generateして、ブラウザで確認。
ずいぶんシンプルになりました。
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
のリンクが表示されました。
リンク押すと、詳細ページが開き。
全文が表示されます
カテゴリの追加
カテゴリ追加し、投稿種類を増やてみます。
カテゴリを追加する、ページも追加しときます。
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のリストが自動生成されました。
topメニューの、newsカテゴリの追加。
設定ファイルで可能かもしれませんが、
テーマを修正してみました。。
<li > のnews の行で、URLは絶対パスでベタ書きですが。
メニューから、カテゴリの各リストへ移動できます。
ファイル:
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
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> </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> </p> </p>
srcset、sizes 属性とかありますね。
width, height が指定されているので、
CSSを追加しないと、レスポンシプは無理そうです。
修正前の画面:
このページは、bootstrap のグリッドシステムを適用してますが、
PC画面の右のサイドバー部品に、画像が重なっています。
ダメですね
スマホだとさらに、はみ出します。
修正後:
css を追加して、カンタンな対応しました。
img.alignnone{ max-width: 100%; height : auto; }
alignnone クラスが、出力されたので、
max-width とか、適用すると。いい感じでした