So-net無料ブログ作成

ウェブ音楽プレイヤーを微修正しました。 [音楽再生ウェブ アプリケーション]

HTML5のCanvas要素とWeb Audio APIで私が制作した、ウェブ音楽プレイヤーのヴィジュアライザーを少しだけ改造致しました。
JS_Music Player_SS_(2019_07_10)_1_cropped_1 黒い背景の上に青紫色の二重の光の輪が広がり、輪と同色の粒子が無数に飛び散っている。 画面下部には高さがまちまちの青色のグラデーションの縦長の棒が横方向に沢山並んだ音楽スペクトラム アナライザーのヴィジュアライザーが表示されている。 画面最上部にはアーティスト名、アルバム名、曲名が表示されている。
https://live.staticflickr.com/65535/48249183152_0312528d8c_o.png

JS_Music Player_SS_(2019_07_10)_2_cropped_1 黒い背景の上に橙色、黄色それぞれの二重の光の輪が広がり、輪と同色の粒子が無数に飛び散っている。 画面下部には高さがまちまちの赤橙色のグラデーションの縦長の棒が横方向に沢山並んだ音楽スペクトラム アナライザーのヴィジュアライザーが表示されている。 画面最上部にはアーティスト名、アルバム名、曲名が表示されている。
https://live.staticflickr.com/65535/48249183052_7d3618b843_o.png
従来は光の輪と粒子の色がランダムだったのですが、沢山のエフェクトが同時に表示されると色が乱雑で見栄えが良くないと感じまして、下部のスペクトラム アナライザーの色に揃える事に致しました。

ブログ記事: ウェブ音楽プレイヤー
URL: https://applicationprogram.blog.so-net.ne.jp/2019-07-03-1

プレイリストの自動保存、書き出し、読み込みに対応しています。
キーボードを打鍵してピアノ演奏ができます。
重低音を出せます。
どうぞお試し下さいませ。

nice!(0)  コメント(0) 

超解像ネットワークを微分の差の絶対値で学習してみました。 [超解像プログラム]

色々と実験をして遊んでいるSuper-Resolution Neural Netowrk (超解像ニューラル ネットワーク)ですが、今回はGANではなく、Autoencoder出力も使わず、単純にGenerator出力と正解の高解像度画像に "Sobel フィルター" を適用して微分した出力の差の絶対値と、Generatorの出力画像と正解の高解像度画像の差の絶対値(MAE)を損失関数にして学習させてみました。

今回のものは処理が単純なので非常に軽快に学習が進みます。

因みに、Sobel フィルターを適用すると画像が微分されて輪郭抽出が出来ます。
処理はとても軽量で、AWS (Amazon Web Services)のEC2 (Amazon Elastic Compute Cloud)の " p3.2xlarge " GPU インスタンスである "p3.2xlarge" (NVIDIA Tesla V100-SXM2-16GB)で6,632枚の画像につき、1 epoch当たり1,130秒ほどで処理出来ました。

尚、前回同様に学習時に入力の低解像度画像にWebP圧縮を掛けてJPEGなどの圧縮ノイズ除去性能を付加しております。

超解像処理結果の画像です。
SRNet-D_Comparison_3_label_1 無補間の4倍拡大と改造SRNet-Dによる超解像との比較画像。 左右に同じ画像を拡大したものが配置されており、左半分が無補間で右半分がSRNet-Dである。 若い女子の顔が写っている。
左は無補間、右はSRNet-Dで4倍に拡大した画像です。
SRNet-Dでは圧縮ノイズが綺麗に除去されています。
但し、これはGANではない為、ランダムなパターンである毛髪などは復元されていない事が分かります。

SRNet-D_Comparison_2_label_1 無補間の4倍拡大と改造SRNet-Dによる超解像との比較画像。 左右に同じ画像を拡大したものが配置されており、左半分が無補間で右半分がSRNet-Dである。 ジーンズ パンツのポケットに親指を掛けた手が写っている。

SRNet-D_Comparison_1_label_1 無補間の4倍拡大と改造SRNet-Dによる超解像との比較画像。 左右に同じ画像を拡大したものが配置されており、左半分が無補間で右半分がSRNet-Dである。 ジーンズ パンツを履いた若いモデルの女子が微笑んでいる。

これらの画像はSRNet-Dには学習させていない未学習の画像です。
加えて、人間の全身像については全く学習していないモデルでの超解像の結果です。
元の画像はiStockより使用ライセンスを購入致しました。


尚、このスクリプトは、董豪(Hao Dong)様のsrganのコードを元に私が改造致したものです。


[GitHub リポジトリー]
この " SRNet-D " はTensorFlowTensorLayerによる実装となっています。
以下に私のSRNet-DのGitHub リポジトリーへのリンクを載せます。

" SRNet-D " の "GitHub" リポジトリーのURL:
https://github.com/ImpactCrater/SRNet-D


[学習済みモデル データ]
私がAWSのEC2のp3.2xlarge GPU インスタンスを用いて学習させた学習済みモデル データを公開致します。
" Yahoo!ボックス " サーヴィスからZIP ファイルをダウンロードして解凍し、 " ./SRNet-D/checkpoint/ " に g.npz " のファイルを入れます。
学習用の大量のPNG画像を " ./SRNet-D/HRImage_Training " に用意し、 " python ./SRNet-D/main.py " のようにして続きから再学習させる事が可能です。
もちろん拡大だけの実行も可能です。

もし動画を超解像する際は、ffmpegなどで0埋めの連番の静止画に変換し、 " ./SRNet-D/LRImage_Enlargement/ " に0埋めの連番画像を入れて、 " python main.py --mode=enlarge " とすると、 " ./SRNet-D/samples/enlarged/ "に超解像処理された連番画像が出力されます。
これを再びffmpegで動画に変換します。

学習済みモデル データのURL (Yahoo!ボックス):
https://yahoo.jp/box/ULWJdj



[SRNet-Dの特徴]
以前の記事とも重複しますが、改めて概要を記載致します。


[1: Residual of Residual Network]
勾配消失に強い、残差学習を行います。
Residual Blockで、shortcutに対して全てのConvolution層の出力との要素和を取っております。


[2: Generator loss]
Generatorが生成した画像と正解の高解像度画像との "生のRGB値" の差の絶対値(MAE / Mean Absolute Error)に加えて、生成画像と正解画像それぞれに "Sobel フィルター" を適用して微分値を取り、輪郭抽出した画像同士の値の差の絶対値を損失値として学習させました。


[3: Data Augmentation & Noise Reduction]
学習時のデータ拡張として、高解像度画像をランダムな位置ランダムな大きさにクロップします。
続いて所定の大きさまで縮小し、RGB画像をHSV形式に変換し、色相環をランダムに少しだけ回転させます。
その後、ランダムな強さで圧縮を施して学習させます。
敢えて圧縮して画質を落とした後、これを正解の高解像度画像に近付けるように学習させる事で、JPEG画像や動画像のように圧縮ノイズが含まれた画像を拡大する際、ノイズを綺麗に除去出来るようになります。
JPEGでは固定の大きさのブロック単位で圧縮しますが、これがノイズ除去の柔軟性を失わせてしまうと考え、ブロックが目立ち難いWebP画像形式で圧縮を施しました。
WebPは不可逆圧縮でJPEGより軽量、高品質であり、可逆圧縮でもPNGよりもファイル サイズを小さく出来る優れた圧縮画像形式です。
結果は上出来で、強目の圧縮ノイズも綺麗に除去出来ます。


[4: Swish活性化関数]
活性化関数には性質の優れたSwish関数を用いております。

Swish(x)=x*Sigmoid(a*x)
Sigmoid(x)=1/(1+e^(-a*x))


[5: Group Normalization]
ミニバッチ サイズが少ない場合に問題が起こり易いBatch Normalizationではなく、channleをグループ化して正規化するGroup Normalization層を用いています。


[6: 画像の読み込み]
学習させる画像群について、指定したディレクトリー以下にあるサブディレクトリーまで再帰的に検索して読み込みます。
画像はepoch毎にランダムにシャッフルされ、データ拡張されます。
全画像ファイル数がミニバッチの数で割り切れない場合には、不足分は既存の学習用画像の中からランダムに再度読み込まれます。
また、学習中にも画像を次々に追加出来ます。
指定したディレクトリー以下に、画像ファイルもしくは画像ファイルが入ったフォルダーを放り込むだけで、次のepoch開始時に読み込まれます。



[プログラムの実行について]
このプログラムで学習を実行するには10GB以上のメモリーが必要です。
CPUまたはNVIDIAのGPUによるCUDAで実行出来ます。
低性能なCPUで実行する場合、充分な学習には数か月以上の時間が掛かります。

私は、AWSのEC2の " p3.2xlarge " GPU インスタンスをスポット リクエストで利用させて頂いております。
1時間当たり百数十円で一般的なPCのCPUより数十倍から100倍以上高速に処理が可能です。



前回の記事: 圧縮ノイズ除去機能付き超解像AIを作成しました。
https://crater.blog.so-net.ne.jp/2019-04-28

前々回のブログ記事: 超解像AIを改良しました。
https://crater.blog.so-net.ne.jp/2019-03-15

nice!(2)  コメント(0) 

迷路自動生成プログラムを改良致しました。 [迷路自動生成Web プログラム]

この度、かつて自作した迷路自動生成プログラムを改良し、アプリケーション プログラム掲載専用ブログに掲載致しました。
これはそのスクリーンショット画像です。
Maze_SS_(2019_07_03)_1_cropped_1 "HTML5" の "Canvas" を利用して作られた迷路自動生成プログラムの迷路のスクリーンショット画像。 Lv3の文字と共にやや簡単な迷路が表示されている。 迷路の中に赤色と青色と緑色の枡が1つづつある。
今回の迷路自動生成プログラムは、画面サイズに応じて表示サイズが変わるレスポンシヴ デザインです。

ウェブアプリ: 迷路自動生成プログラム
https://applicationprogram.blog.so-net.ne.jp/2019-07-03

迷路の規模がボタンを押す事で、 "Level 0" から "Level 7" まで変更出来ます。
Level 0は2x2枡でもはや迷路でさえありませんが、Level 4だと解くまでに私の場合で1分前後掛かります。

Maze_SS_(2019_07_03)_2_cropped_1 "HTML5" の "Canvas" を利用して作られた迷路自動生成プログラムの迷路のスクリーンショット画像。 Lv5の文字と共に複雑な迷路が表示されている。 迷路の中に赤色と青色と緑色の枡が1つづつある。
Level 5は解くまでに10分前後掛かりました、それ以上だとちょっと解ける気が致しません。

この迷路は "壁延ばし法" というアルゴリズムで迷路を生成しております。
開始地点(赤色の枡)と終着地点(緑色の枡)は "幅優先探索" というアルゴリズムで、迷路の中で互いに最も遠い位置になるように配置しています。
青い枡は自分の位置で、キーボードの "E (上), S (左), D (下), F (右)" または "I (上), J (左), K (下), L (右)" キーで移動出来ます。
プログラムはHTML5のCanvas要素のみを利用してJavaScriptで作りました。
ソース コードも公開しております。

因みに、以前製作したプログラムは自作のアート プログラムを書き換えて作ったもので、不必要な描画処理や音の出力がある反面、表示サイズも迷路の規模も固定であり、駒を移動させる機能もありませんでした。

以前製作した迷路自動生成プログラムのブログ記事: HTML5でJavaScriptで迷路を自動生成するプログラムを作成してみました。
https://crater.blog.so-net.ne.jp/2017-02-21

nice!(0)  コメント(0)