• 日本語
    • English (英語)
Avinton JapanAvinton JapanAvinton JapanAvinton Japan
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
      • 自動車ナンバープレート自動認識システム
    • プライベートクラウド
    • AIサービス開発
    • AIカメラ/画像解析無料体験版
  • 最新情報
    • ニュースリリース&イベント情報
    • 技術ブログ&インタビュー
  • アカデミー
    • Avintonアカデミー
    • Academy on Campus
    • Academy with Platform
  • 採用情報
    • Avintonジャパン 採用ページ
    • 求人一覧
    • よくある質問
    • 新卒採用
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • SDGsへの貢献
  • お問い合わせ

TensorFlow.js で機械学習Webアプリを作る

    Home 技術解説 TensorFlow.js で機械学習Webアプリを作る

    TensorFlow.js で機械学習Webアプリを作る

    By James Cauchi | 技術解説, 技術ブログ&インタビュー | Comments are Closed | 5 7月, 2019 | 1

    機械学習の勉強もかねて、”TensorFlow.js”を使って不動産価格の予測モデルを構築する機械学習Webアプリのデモを作ってみました。

    今回は様々な手法で予測モデル構築して学習の過程や精度を比較するだけでなく、実際にWeb上で構築したモデルを用いて不動産価格を予測させてみました。

    そもそも Tensorflow.js で何ができるの?

    Googleが2018年3月に公開した、機械学習を用いたWebアプリがJavaScriptで実装できるライブラリです。
    パソコンやスマホのブラウザ上でディープラーニングなどの機械学習モデルの構築や、学習済みのモデルを使用して高度な処理を実行させることができます。

    学習済みのモデルを使用した楽しい例を挙げると、物体検出の学習済みモデルを用いた借り物競争や、姿勢検出を用いた指揮者ごっこといったものが、ブラウザでリアルタイムで遊べるようになります。

    Emoji Scavenger Hunt

    TensorFlow.js公式が配布している学習済みモデルを用いることで、こうした高度な機械学習Webアプリを手軽に作成することができます。

    また、TensorFlowやKerasといったライブラリで学習済みモデルを事前に作成して、TensorFlow.jsにて読み込める形に変換して使用することもできるので、本格的な学習モデルもWeb上で扱うことができるそう。

    TensorFlow.jsでは転移学習を用いて少ないトレーニングデータで既存のモデルを再学習させることも可能です。

    例として、パックマンのデモでは、Webカメラを介して自分の顔の向きや表情でパックマンを操作できるのですが、このデモでは顔画像を最低4枚登録してからモデルを再学習させるだけでパックマンのゲームが自分の顔で遊べるようになります。

    WebCam Pacman

    WebCam Pacman

    TensorFlow.js の何がすごいの?

    一言でまとめると、機械学習におけるトレーニング・推論の処理がフロントエンド側で完結するといった点です。

    詳しくは以下にて説明します。

    TensorFlow.jsでアプリを作るメリットって?

    ユーザー側がうれしい

    まずは分かりやすいユーザー視点から説明しましょう。

    ①必要なものはブラウザだけ

    ブラウザ対応しているので、OSやデバイスの種類に依存しないことが利点の一つです。

    アプリやドライバをインストールする手間も必要ありません。

    また、デバイスに付いているカメラやマイクといったセンサーデータを活用して、先ほどの借り物競争のようなインタラクティブ性の高いアプリが遊べるようになるのも特徴です。

    ですが、これはバックエンド(運営側)でTensorflowを走らせてるWebアプリにもある利点ですね。

    ここからTensorFlow.jsの強みが出てきます。

    ②処理が速い

    数年前に線画をAIで自動着色してくれるWebアプリのデモがネット上でバズッた時、実際に使ってみたい!と思ってアクセスしたところ、自動着色を体験するために順番待ちをしなければならなかったことがありました。

    こちらのケースでは、一度入力データ(この場合は線画)をWebアプリのサーバーに送信して、リクエストが来た順番に沿って機械学習で自動着色の処理を行っていたのだと思います。

    TensorFlow.jsでは、ユーザーのデバイス上で機械学習の処理が行われるため、入力データをサーバーに送る必要がない上、順番待ちをする必要もありません。

    つまり従来の機械学習Webアプリと比べて、結果が出力されるまでのレスポンスが速いということになります。

    ③プライバシーの懸念がない

    従来はWebアプリのサーバーに入力データを渡す必要があったため、例えば自分の顔写真がサーバーに残ってしまうのではないか、といった懸念がありました。ですが、Tensorflow.jsではクライアント側(ユーザー側)で入力データを処理して結果を出力するので、そういった心配が一切ありません。

    なのでパックマンのデモも安心して遊べます。

    開発側もうれしい

    Tensorflow.jsの何が便利かを説明するために、仕組みをざっくりと説明します。

    まず前提の知識として、機械学習の処理はCPUよりGPUで行うことが主流となっています。

    理由としては、GPUの方が膨大なデータを並列処理する能力が高いからです。

    先ほども軽く触れましたが、これまでのWebアプリではオンプレミスやクラウド上などにあるGPUサーバーによって機械学習の処理を行うことが主流でした。

    一方でフロントエンド側は、サーバーから渡された処理結果の表示や描画という役割のみ果たしていました。

    しかしTensorFlow.jsを用いると、各ユーザーが使用しているデバイスのGPUを使用できます。

    細かく言うと、ブラウザ上で使用できるWebGLといったライブラリを用いて、パソコンやスマホに搭載されているGPUに処理をお願いできるようになりました。

    これがどういうことかというと、フロントエンド側のみで機械学習の推論処理と処理結果の描画の両方を実現できるようになりました。

    こうして機械学習の処理がフロントエンド側で完結することには以下のメリットがあります。

    ①サーバー費用の削減ができる

    アクセスやリクエストの量に応じてトレーニングや推論用のGPUサーバーを拡張するといった必要が減るため、コスト面の効果が期待ができます。

    実際、拡張性のあるサーバーで行っていた機械学習処理をTensorFlow.jsに変更したところ、サーバーコストが大幅に減った事例も既にあります。

    ②フロントエンド側で機械学習モデルの実装が完結する

    機械学習を扱うWebアプリを開発するにおいて、従来はバックエンドにおいての機械学習処理の実装が必要でした。しかしTensorFlow.jsを使えばフロントエンド側のみでも機械学習の推論処理が行えるようになりました。

    JavaScriptの知識があるフロントエンドエンジニアも機械学習Webサービスを作れるようになったということで、Web開発者の活躍の場が広がることが考えられています。

    予測モデルを構築できるWebアプリを作ってみる

    TensorFlow.jsのメリットを理解したところで、実際にTensorFlow.jsでシンプルなWebアプリを作ってみました。

    今回の目的は、「Web上で機械学習モデルを作って、推論に使ってみよう!」といった基本的なものです。

    まず入力データを決めます。

    今回は日本全国の不動産取引価格情報をお借りし、以下のデータに基づいて不動産価格を予測してみることに。

    • 物件タイプ
    • 物件の面積
    • 駅からの徒歩時間
    • 地域の人口密度

    データセットとして全国の不動産データからランダムで1000件選び、そのデータに対して3種類のアプローチで回帰分析を行いました。

    • 線形回帰モデル
    • ニューラルネットワークモデル(隠れ層の数:1)
    • ニューラルネットワークモデル(隠れ層の数:2)

    ニューラルネットワークに関しては、多層パーセプトロンという分類方法を採用しています。

    トレーニングデータとテストデータは8:2の割合で分割し、テストデータを使ってモデルの予測精度の検証を行います。

    実際にWeb上で予測モデルを構築してみる

    実際にデモアプリを使ってみましょう。

    学習モデル(赤いボタン)を選択すると学習が始まります。

    学習過程の図

    学習過程がリアルタイムで分かる

    そして学習の結果がこちら。

    物件価格に影響を与えている要因トップ5

    人口密度が高く、面積が広く、築年数が浅ければ浅いほど不動産価格が高くなり、駅までの徒歩時間が長かったり、中古の物件だと価格が少し下がるといった結果になりました。

    だいぶ理に適っている結果が得られましたね。

    学習が終わると、不動産の実際価格と予測価格を比較したグラフが画面下に表示されます。

    線形回帰に基づいた価格予測結果

    赤い線に沿っていればいるほど精度が高い

    多くの予測結果が赤い線に密集しているため、おおよその予測ができていると言えます。

    ですが実際の価格より大幅に外れた予測をしているところもありますね。

    不動産価格というものは建築の構造、物件の方角、海抜の高さといった様々な要素に影響されるため、今回使用したデータのみでは価格予測が上手くいかない例外的な物件もあるということが分かります。

    他にも、テーブルには入力したデータが具体的に表示され、予測した価格を実際の価格と比較することができます。

    線形回帰予測結果

    完璧とは言えないけど予測が近いことも

    そして、ニューラルネットワークモデルでも同様にモデル学習の結果を見ることができます。

    また、画面下のグラフとテーブルもモデル学習の終了ごとに更新されます。

    Test-set lossという数値を見ると、テストデータにおいてどれほど予測を失敗したかが分かります。この数値が低ければ低いほどモデルの精度が高いと言えます。

    結果を見ると、Test-set lossの値が左のモデルから順に下がっているのが確認できます。

    つまり、今回のデータセットにおいては線形回帰モデルより、隠れ層の多いニューラルネットワークモデルの方が精度の高い結果を得られるということが分かりました。

    まとめ

    今回は、TensorFlow.jsの利点を学んだ上で、不動産価格の予測モデルを構築するWebアプリを作ってみました。

    機械学習系Webアプリを開発するにあたって参考にしていただけましたら幸いです。

    今はまだバックエンドの強力な処理能力と比べると少し劣るところがあるかもしれませんが、もし将来、どんなデバイスにも強力なGPUが搭載されることが当たり前の時代になったら、TensorFlow.jsの可能性はもっと広がることでしょう。


    Avintonは機械学習、ビッグデータ、データサイエンスの知識と経験を生かし、日本、シンガポールを拠点にビジネスを展開しております。

    機械学習を活用したWebアプリ開発の他にも、機械学習によるデータ分析を活用した課題解決を検討されている方はこちらからお気軽にお問い合わせください。

    あなたも、Avintonでこのような最先端技術を習得し活用してみませんか?

    社員の成長を導きながら、AIやビッグデータなどの最先端技術をプロジェクトに活用していくことが私たちのビジョンです。Avintonの充実した技術研修でスキルアップを図り、あなたのキャリア目標を一緒に達成しませんか?

    採用情報
    機械学習, 技術, TensorFlow, データ

    Related Post

    • G検定合格体験記

      G検定合格体験記

      By Avinton rk | Comments are Closed

      Read more

    • Kubernetes入門:初心者からプロフェッショナルへ – 学び方とおすすめリソース

      Kubernetes入門:初心者からプロフェッショナルへ – 学び方とおすすめリソース

      By Avinton rk | Comments are Closed

      Read more

    • deploying-postgresql-operator-in-Kubernetes

      PostgreSQL Operator on Kubernetes

      By Avinton rk | Comments are Closed

      Read more

    • AIモデルの最適化

      AIモデルの最適化

      By Avinton rk | Comments are Closed

      Read more

    • Pytorch Datasets & DataLoaders

      PyTorch – Datasets & DataLoaders

      By Avinton rk | Comments are Closed

      Read more

    採用情報

    採用情報

    Categories

    • 相互学習
    • 採用
    • 社員インタビュー
    • 学習&資格取得
    • 技術解説
    • イベント告知
    • 学内説明会&講義
    • 産学連携
    • 就職活動
    • イベントレポート
    • その他
    • 技術ブログ&インタビュー
    • mainpage
    • New Graduates Interviews
    • 中途エンジニア
    • カテゴリーなし
    • ニュースリリース&イベント

    Avinton SDGs

    SDGsへの貢献

    Search

    タグ

    5G AIエンジニア Apatch AvintonAcacemy Avinton データプラットフォーム AWS Lambda Big Data Digital Transformation istio Kubeflow Kunernetes LLM LTE Python Ruby SE SES Spark TensorFlow YOLOv8 アントレプレナー イベント告知 インフラエンジニア キャリアサポート サイバー攻撃 システムエンジニア スタートアップ セキュリティエンジニア データエンジニア データサイエンティスト バックエンド ベテランエンジニア ベンチャー マイクロサービス 中途採用 大学&専門学校 学習 強化学習 持続可能な未来 教育 新卒 田中研之輔 社会貢献 経団連 顔認証
    © 2023 Avinton | All Rights Reserved | プライバシーポリシー
    • サービス
      • Avinton Data Platform
      • エッジAIカメラ
        • 自動車ナンバープレート自動認識システム
      • プライベートクラウド
      • AIサービス開発
      • AIカメラ/画像解析無料体験版
    • 最新情報
      • ニュースリリース&イベント情報
      • 技術ブログ&インタビュー
    • アカデミー
      • Avintonアカデミー
      • Academy on Campus
      • Academy with Platform
    • 採用情報
      • Avintonジャパン 採用ページ
      • 求人一覧
      • よくある質問
      • 新卒採用
    • 企業情報
      • 会社概要
      • 代表からご挨拶
      • SDGsへの貢献
    • お問い合わせ
    • 日本語
      • English (英語)
    Avinton Japan