SignGress

https://github.com/Kyutech-C3/ptera-derapombe2
https://salmon-smoke-061fd9410.1.azurestaticapps.net/

TypeScript

Python

React

Azure

GraphQL

スマホを持って標識を奪い合え！ AR標識陣取りゲーム！

鳩屋敷

推しアイデア

ポケモンGOやIngressをベースとした，スマホ片手に外に飛び出したくなるようなゲーム．

作った背景

スプラトゥーンが流行ってたので，REDから標識を連想し，標識を使ったリアル陣取りゲームを作ることが決定しました．

推し技術

APIサーバに採用したGraphQL，撮影した写真が標識か判定する1から学習させた機械学習モデル，ハッカソン開始前からpushするだけで自動デプロイされるGithubActionsのCI/CD，自動デプロイ先として使用したAzureなど…

プロジェクト詳細

スクリーンショット

a

b

c

d

e

システム詳細

インフラ

フロントエンドのデプロイにはAzure Static Web Appを，バックエンドのデプロイにはAzure Web Appを使用しており，モデルの保持とAIサーバのデプロイにはAzure Brob StorageとAzure Web Appを使用しています また，認証にはfirebase Authenticationを，撮影した画像の保存にはfirebase storageを使用しています．

バックエンド

バックエンドには，APIフレームワークにfastAPIを，ORMapperフレームワークにsqlalchemyを，GraphQLフレームワークにstrawberryを採用しています． 画像検知を行うサーバは，TensorFlowの推論結果をRESTAPIにするTensorflow ServingのDockerイメージを使用して，自作の学習済みモデルに推論させています． 画像を検知する際には，APIサーバに画像パスを渡して経由して，AIサーバに検知を行わせます．

機械学習

学習モデルとデータセット https://drive.google.com/drive/folders/13D63WiwQqtB8s5iOK5kEf1Xn68GnQD0B?usp=sharing Google Colab の環境(TPUで実行可) https://colab.research.google.com/drive/1on1OULG2QDCWCWaCBxKIFTtqGuvS5Eav?usp=sharing

TensorflowでCNNのモデル作成を行いました。このサイトの画像を学習データとし、学習を行いました。

学習の流れ

  • 学習データの画像サイズをリサイズ
  • 学習データのかさ増し（縦横圧縮、回転、明るさ）
    • 100ぐらいのデータ　→　30万ぐらいのデータ
  • かさ増し学習データをデータセットとし、CNNの学習を行う

かさ増ししたデータセット

image

ある学習データの評価結果

学習データには用いなかったデータセットの一部のデータを用いて評価を行った

image

推論の流れ

  • 入力画像に対し、輪郭強調、コントラスト強調、明るさ調整、を行う
  • 入力画像から輪郭抽出を行い、不要な輪郭を削除
  • 輪郭で切り抜いた画像を学習モデルの入力とする
  • 入力された画像に対して、予測した標識番号と予測精度のペアが配列として取得できる

デプロイ

FastAPIに直接学習モデルを埋め込むことが困難である（CNNの動作環境の問題）ので、別APIサーバーとして推論機能を提供

Tensorflow Servingを使うことで実現

Tensorflow ServingをDockerでくるみ、CI経由でビルドイメージをAzure Container Registryに上げ、Azure App ServiceでAPIサーバーを立てている

ローカルにおける検証

image

image

image

データセットのテスト用データにおいては９割越えの精度が出ている

実際の写真（入力画像）は明るさ、影、背景、角度、など複雑な条件になっているため、認識精度が落ちてしまう

フロントエンド

使用技術
  • React
    • 定番
  • Vite
    • create-react-appと比べてビルドが早くて開発効率アップ
  • styled-components
    • 定番
  • apollo client
    • GraphQL連携するためのライブラリ
    • GraphQL CodeGeneratorと併用してQueryとMutationをらくらく管理
  • GoogleMapsAPI
    • 今回のアプリの核となる部分
    • 公式の日本語ドキュメントがわかりやすい
  • react-webcam
    • カメラを簡単に使えるライブラリ
  • react-cookie
    • hookを使って簡単にcookieを扱えるライブラリ

システム構成図

image

苦戦した点
  • データセットの作成
    • 標識画像をどう集めて、どのようにデータセットにするのか、で苦戦
      • 縦横に圧縮、角度を変える、明るさを変えるなどの加工を行った
      • データ数が増えすぎるため加工の種類は増やさなかった
  • データが多すぎて学習が進まない。Google clabがクラッシュする。など
    • 学習データを分割し、少しずつ学習
    • Google clabへの課金
  • M1 Macでいろんなものが動かない！パッケージロックに失敗する！
    • すぐには解決できなさそうなものばかり！
    • GPUを積んだWindowsPCで作業
  • 学習モデルのデプロイ
    • FastAPIに埋め込もうとしたけど上手くいかない
      • Tanserflow Servingで別APIサーバーとしてモデルの推論機能を提供
    • Azureでのデプロイで苦戦
      • 経験不足
      • Tanserflow Servingの仕様
      • などなどに苦しめられる
  • 入力画像の前処理
    • 加工すると認識精度が増えたり減ったり
    • 画像の状況（明るさなど）に応じて加工内容を変える必要がある
      • ハッカソン中には実装が難しそうだった

メンバー
  • 三反 陽介
    • フロントエンドリーダー
  • 藤重 咲月
    • デザイン，フロントエンド
  • 志岐 颯駿
    • バックエンド・インフラリーダー
  • 下前 仁志
    • 機械学習・モデル作成，バックエンド・フロントエンドのヘルプ，デザイン

鳩屋敷

@PigeonsHouse