【DeepAA on Web】ディープラーニングでアスキーアートを"Web上で"作る #DeepAA

Last updated at 2019-04-14Posted at 2017-04-05

DeepAA on Web という DeepAA のモデルを使ったWebアプリ（AAオートトレーサー）を制作したのでその紹介記事になります。

2017/12/02 追記：本記事で使用しているDeepAAのモデルデータは v1.0 のものです
2012/02/03 追記：DeepAA v2.0 に対応しました

TL;DR

以下のページで実行できるのでぜひご利用ください。
https://tar-bin.github.io/DeepAAonWeb/

先日、@OsciiArtさんが「ディープラーニングでアスキーアートを作る」という記事で DeepAA を公開されました。

私個人としても同じことをやろうと計画してたので「先を越された！？」という感じでしたが、そもそもの目的がやる夫スレコミュニティへの貢献だったので、素晴らしいものがでてきたと素直に喜ぶことにしました。

ただし、DeepAA の実行にはPythonの知識が必要であり、やる夫スレコミュニティでこのまま使ってもらうにはなかなか厳しいかと思い、コントリビュートとしてWeb上で実行できるアプリを作成してみました。

DeepAA の仕様に合わせて、64x64のデータを順次評価して、該当する文字を取得しています。
そのままだと味気ないので、どのように動作してるかわかるようなプレビュー機能も実装しました。

※モデルの読み込みに時間がかかるため、環境によってはしばらくページがフリーズしたようになってしまう現象が報告されています。報告いただいた方の環境では数分放置するとフリーズから復帰し、その後の使用は問題ないとのことでした。（おそらくネットワーク速度の影響ではないかと推測しています）

画像のアップロード後、Start で実行できます。
Chromeを推奨していますが、firefox, Edge, Vivaldiなどでも動作確認はしています。

DeepAA の紹介記事にも記載されていますが、入力画像は細線化した画像のほうが比較的うまく変換できるようです。

主な実装は以下の src/js/app.js らへんになります。

メインとして、 Keras.js というライブラリを使用しています。

こちらを仕様すると、TensorFlow(Keras)などで学習したモデルをJavaScriptから使用することができます。つまりサーバーサイドではなく各クライアントサイドでモデルを評価することができるわけですね。さらにはWebGLを使って、GPUを使った処理もできます。（すごい）

Keras.js については以下のページでデモを確認できます。

使い方については本記事では割愛させていただきますが、Keras.js 自体の実装は初期化とモデルの評価程度しかコードがないため、READMEや上記のデモのソースを見ていただければわかるかと思います。

その他使用したライブラリ等を記載します。あとはwebpackとbabelも使用しています。
画像のグレースケール化、リサイズ等はcanvasの機能のみで実装できました。

自分がやったのは DeepAA の Keras.js を使ったWebアプリへの移植で、機械学習的な要素は @OsciiArt さんの成果物（学習済みモデル）を流用しただけですが、なかなかおもしろいアプリが作れたんじゃないかなと思います。

特に、Keras.js を使えばクライアントサイドでモデルの評価をしてもらうことができるので、GitHub Pagesとかでも運用できるのがとても良いですね。

最後にアスキーアート（やる夫スレ）界隈は世間的にはマイナーかとは思いますが良い作品がたくさんありますので興味があれば覗いてみていただければと思っています。

以上です。