ブラウザ上でニューラルネットを実行できるWebDNNをElectronで使えるか試してみた #DeepLearning

~~ポエムです．~~

東京大学原田・牛久研究室が 2017年5月28日に
ブラウザ向けニューラルネットワーク高速実行フレームワークWebDNN
というものを公開しました．

モデルのパラメータをブラウザ上でも計算が可能なように最適化
モデルを再度自分でパラメータ調整すると言ったことが不要
ブラウザなどで対応が進められているWebGPUやWebAssemblyなどを利用し高速な処理を可能にする

といったことが出来るフレームワークになっています．

今までにもKeras.jsを使うことでKerasで学習済みのモデルをブラウザ上で利用することが出来ました．
Keras.jsは javascriptでchainerモデルを利用するためのKeras.js という記事とそれに対する
さすが日本人。Chainer好きすぎでしょ。
ということでご存じの方が多いかと思います．

その既存のフレームワークとの差分としては

モデルのパラメータの最適化
ChainerなどのKerasに限らないDeepLearningのフレームワークで学習したモデルが使用できる

また，公式サイトのベンチにあるように Keras.js の GPU モードと WebDNN の　WebAssembly バックエンドと同等の速度で実行できるという高速なモデル評価が出来るという点であると考えられます．

この WebDNN を使うことで今までに研究や趣味で作ってきた学習済みモデルを使って新たなサービスを生み出せるのではないかと非常に楽しみです．

さて，このようなサービスを提供するとなるとWebサーバーなどを借りたり，そのページを作ったりしなければならないなど少しめんどうな事が出てきます．
またブラウザ上で実行するには WebDNN に関係ない部分の制限も気になってきたりします（カメラとかローカルのファイルへのアクセスとかその他諸々）．

そういう場合に一つのパッケージで配布という手段があり，そこで役に立つのが Electron です．
Electron に採用されているエンジンは Chromium で，Electron　v.1.6.10 では 56.0.2924.87です．
なので Electron では WebAssembly バックエンドで WebDNN を使うことが可能ということがわかります．

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const url = require('url')

let mainWindow

function createWindow () {

  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadURL("https://mil-tokyo.github.io/webdnn/ja/")

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

こんな感じで実際にアクセスして試してみると実行できていることが確認できるかと思います．

確認ができたので今後自分でモデルを学習してそれを使ったアプリケーションを作っていきたいと思います．

現在進めているのはOpenJTalkみたいなTTS（OpenJTalkはHMM音声合成）をDNN音声合成でGUI付きで動かすものです．
出来たらそこでの知見の共有をしたいなと思います．