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

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 を公開されました。

ディープラーニングでアスキーアートを作る - Qiita

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

OsciiArt/DeepAA: make Ascii Art by Deep Learing

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

動作イメージ(GIF)

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

ソースとデモページ

注意

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

デモページ

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

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

ソース

tar-bin/DeepAAonWeb: DeepAA front-end on Web

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

技術スタック

Keras.js

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

• transcranial/keras-js: Run Keras models (tensorflow backend) in the browser, with GPU support

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

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

• Keras.js Demos

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

その他使用したもの

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

• scijs/ndarray: 📈 Multidimensional arrays for JavaScript
• scijs/ndarray-ops: ndarray operations
• vuejs/vue: A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
• Bootstrap · The world's most popular mobile-first and responsive front-end framework.
• keage/Saitamaar: AA 表示用フォント Saitamaar を AA っぽい要素に適用するスクリプト

TODO（時間があったらやりたい）

• 画像の加工（回転、位置移動）に対応
  • => Fablic.js あたりでいけそう？
• エッジ抽出
  • => やりかた不明
• パフォーマンスの向上（けっこう時間ががかるため）
  • => プレビューの非表示化とか、あきらかな空白エリアの判定スキップとか
• Electron でデスクトップアプリケーション化
• 任意のDeepAAの学習済みモデルへの差し替え

まとめ

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

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

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

以上です。