無料で登録不要、オフラインでも使える機械学習ツールを作ってみた

# はじめに
無料、会員登録不要、データをアップせずオフラインでも使えるブラウザベースの機械学習ツールを作りました。

<b>空飛ぶニューラルネット</b>
https://soratobu-nn.net/

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [なにこれ](#なにこれ)
2. [特徴](#特徴)
3. [基本的な使い方](#基本的な使い方)
4. [ちょっと高度な使い方](#ちょっと高度な使い方)
5. [今後について](#今後について)
6. [空飛ぶニューラルネット](#空飛ぶニューラルネット)

<!-- 各チャプター -->

# なにこれ
主にReact.jsとTensorflow.jsで構成された簡易的な機械学習ツールです。
世の中には多機能・高性能な機械学習プラットフォームがゴマンとありますが、利用料が高額、利用開始まで時間がかかる、使い方が難しい、データをサーバーにアップロードする必要があるなど意外とハードルが高いものです。

- ちょっと手元のデータでAI使えるか試したい、PoCしたい
- 趣味や業務で統計・機械学習モデル作ったけど普通どのぐらいの精度が出るか見てみたい
- 外注とかする前に自分でもデータ見てみたい
- クラウドにデータをアップロードしたくない
- 自分で自由にいじるので、いますぐ簡単に使えるツールが欲しい

このようなニーズを満たすべく作っています。


# 特徴
機械学習サービスといえば、通常はバックエンドにPythonベースのAPIサーバを置くなどしてサーバサイドで学習などの処理を行います。
空飛ぶニューラルネットでは、前処理・学習・推論などすべての処理をJavascript、クライアントサイドで行うためデータをサーバーにアップロードする必要がありません。なんとなくクラウドにデータをアップロードするのに抵抗がある方でも気軽にお使いいただけます。

オフラインでも使えるので、心配な方はページの読み込み完了後、インターネット接続を切ってお使いください。
データの読み込みや前処理、学習・推論と結果のダウンロードの他、学習したモデルの書き出しや読み込みにも対応しています。

# 基本的な使い方
データ読み込みから予測結果取得までの7ステップをKaggle Titanicの生存者予測を例に紹介します。

##### 1.教師データの読込
モデルに学習させたいデータをCSV形式で読み込みます。
![nstep1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631575/23663100-e1f9-1d63-5be8-b44a1adeb989.gif)


##### 2.予測したい変数を選択
データに含まれる列から、予測したい変数を選択します。
また、テーブルの変数名の下にある"削除"というボタンを押せば学習から外すことも可能です。
![nstep2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631575/5fa0f046-2d8f-0042-3be9-49b614a04c2c.gif)


##### 3.学習を実行
データに前処理を施した上で、機械学習モデルに学習させます。early stoppingによりニューラルネットワークの学習が止まった段階で学習完了となります。
![nstep3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631575/a0b6c60c-aea4-9137-7744-1f6742b2dfa7.gif)


##### 4.学習状況を確認
学習の進捗とあらかじめ分けておいた検証用データに対する精度を確認することができます。
![nstep4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631575/3fc81930-8aa8-5c6f-bfe5-f040f43b84e0.gif)


##### 5.予測したいデータの読込
上記で学習させたモデルを適用したいデータを選択します。
![nstep5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631575/4315dd76-c9d8-392e-f9ee-fd1ab399fd6e.gif)


##### 6.予測を実行
実行すると5で読み込ませたデータに前処理および推論が行われます。
![nstep6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631575/3439dcad-989b-c7ef-7c54-306f2eec8a76.gif)


##### 7.結果をファイルに出力
予測結果をダウンロードすることができます。入力変数は前処理がかかっていますが、行の順番は変わっていないので元のデータにコピペして結合することができます。
![nstep7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631575/0e17c350-bd01-7011-c8a1-58781cfa584e.gif)


基本的な使い方は以上です。
使っていて何かうまくいかなかった場合はページを更新すればリセットされるのでやり直しが可能です。

# ちょっと高度な使い方
##### 学習済モデルを保存・適用したい
あえて状態を保存せず、更新したらリセットしてやり直せるというインスタント性を持たせていますが、いいモデルが作れたら保存していつでも適用できるようにしたいこともあるはずです。
まず、以下のようにモデルを保存すると、pp.txt、model.json、model.weights.binの3つのファイルが保存されます。これが適用の際必要になるので、大事に保管してあげてください。
![nstep8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631575/bc5b1198-39ad-f21e-0c2c-905d1702a8f1.gif)


保存できたら、あとは任意のタイミングで高度な設定>モデルの読み込みから、3つのファイルを読み込ませてあげると学習させたモデルが復元できるので、お好きなデータに適用していただけます。
![nstep9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631575/9f175401-a1cc-0ce7-1ec1-f48233728a39.gif)


##### ニューラルネットワークの編集(4/18アプデ)
空飛ぶニューラルネットでは1層および3層のニューラルネットワークが利用可能でしたが、詳細設定はプリセットのみでした。
4/18のアプデから、高度な設定画面内でニューラルネットワークの隠れ層のニューロン数及びDropoutの割合を設定することができるようになりました。
いまいち意味がわからない場合は特に編集する必要はありませんが、予測精度上げたいなーというときは少し数字をいじってみてください。
![nstep10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631575/8ada643a-e8fc-4080-933d-fa56f7b6f4be.gif)


# 今後について
バグフィックスやUI改善を除いた機能として、以下が近々の実装予定となります。
- 
回帰問題(売上金額などの連続値を予測する)への対応

- 精度評価指標の充実(ROC-AUC、PR-AUCやROC曲線など)
- CSV以外の形式受付
- 
ニューラルネットワークのトポロジー編集


<b>4/18追記: ニューラルネットワークの編集に対応しました。</b>

前処理の選択・高機能化や勾配ブースティングなどニューラルネットワーク以外の機械学習アルゴリズムの実装も考えていますが、ツールの立ち位置を考えると操作の複雑さとのトレードオフになるのでしばらくは様子見の予定です。
そのようなことができる方はそもそも自前でPythonなりDataRobotなどのツールなり使いこなせると思いますし。

今後はケーススタディを通してどう使っていけるかといった活用法、前処理・モデルの詳細や実装について記事を書いていきたいと思います。

<b>4/21追記: リセットボタンができました。</b>
オンラインで作業している場合はサイトを更新すれば全てのデータが初期化されてやり直せるのですが、
オフラインで作業する場合更新ができないので一度ネットに繋ぐ->更新->再度オフラインにするというステップが必要でした。
今回追加したリセットボタンを押すだけで状態がリセットされるので、オフラインのままやり直しができるようになりました。
![nstep11.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2631575/fc7966aa-1fb2-8114-a495-4315b6b563ba.gif)


<b>4/23追記: デザインをリニューアルしました。</b>
見た目を少しモダンに変更しましたので、併せて本記事の紹介画像をアップデートしています。
ボタンの位置が移動しましたが操作方法は従来と同じです。

<b>5/9追記: 回帰問題に対応しました。</b>
別途記事を書きました。

https://qiita.com/bioelectron2/items/c14847e5e2ca28e46b9e

# 空飛ぶニューラルネット
ということで、ぜひ触ってみてあげてください。
全てクライアントサイドで処理しており何かエラーが起きてもこちらでは確認できないため、
もし何かあればサイト内「このサイトについて」に記載のアドレス宛にメールを送っていただけると嬉しいです。
サイトへの改善要望や相談事など何かありましたらご連絡ください。

- [空飛ぶニューラルネット](https://soratobu-nn.net/)

尚、すでに色々フィードバック頂きました方々、ありがとうございました。早速反映していきます。