jphacks / a_2111 Goto Github PK

View Code? Open in Web Editor NEW

10.0 3.0 2.0 100.88 MB

Great team A_2111 project "COCONOMASK"

Home Page: https://coconomask.web.app/

License: Other

HTML 2.15% JavaScript 55.47% SCSS 5.41% Python 16.03% Dockerfile 0.42% CSS 2.25% Jupyter Notebook 18.28%

jphacks react fastapi ble winner-take-all gaen ml

a_2111's Introduction

ココノマスク

動画

プレゼンテーション

以下のリンクより確認可能です。

https://www.canva.com/design/DAEv-7H1qU4/view?embed

製品概要

背景（製品開発のきっかけ、課題等）

2021 年現在、コロナ禍でマスクの着用が事実上義務化されている。その中で、マスクを着用することによる息苦しさが注目されるようになってきた。本製品では、COCOA という既存の信号を受信することで、マスクの不要な場面を判断し、快適な呼吸を促すことを目的とする。

製品説明（具体的な製品の説明）

特長

特長 1 　 COCOA の電波受信して自動でマスク開閉

周りに人がいないときには息苦しさから解放されます。

特長 2 　ファッションアイテムとしてのIoT

帽子型のため、普段着とも着あわせて着用が可能です。

特長 3 　デバイス共有機能

一つのデバイスに対して複数人が共有できます。一台あたり、製作費を3000円程度と推定計算すると、４人家族で共有すれば一人当たりのコストは1000円未満とリーズナブルです。

特長 4 　顔認証AI

デバイスに顔画像が紐づけられ、紐の長さが自動調節されます。メールアドレスを持っていない子供でも簡単に利用できます。オンデバイス機械学習のため、クラウドに顔画像が送信されることはなく、プライバシー保護の観点からも安全です。

特長 5 　ミライ小町さんによる可視化

現在のマスクの開閉状況が可愛い3Dモデルで可視化されます。

解決出来ること

コロナ禍でマスクを常時使用を強いられることにより発生する息苦しさから解放されます。また、マスクの紐を耳にかけることによって生じる痛みからも逃れることができます。

今後の展望

withコロナ時代におけるマスクを常時着用しなければいけないという懸念を除去します。

注力したこと（こだわり等）

web bluetooth を用いた開発・通信
オンデバイスAIにより、プライバシーの守られた顔認識を実現
CI/CD の整備による開発体験の向上（良く実感できました！）
- frontend backend 共にブランチへの push で自動デプロイがされます。（frontend_commit）（バックエンドは、Heroku から GUI による設定）
- フロントエンドは、PR 時に自動でフォーマッターをかけ、commit をしてくれます。（commit）（自動フォーマット・コミットの例）
- codeQL による脆弱性自動検出（commit）（脆弱性を指摘された例）
- main への merge には "一人以上からのコードレビュー・approve" && "CI が全て成功する" を必須にし、コードレビューをし合えただけでなく、事故を防止できました。

開発技術

活用した技術

API・データ

Google/Apple Notification Exposure Notification（API は経由せず、受信信号を使用）
ミライ小町
FastAPI
VGGFACE2
InceptionNet

フレームワーク・ライブラリ・モジュール

Pytorch
ONNX
ONNXRuntime
React
Bluetooth Low Energy
Web Bluetooth
Firebase Hosting
Cloud Firestore
blender
Python
numpy
pybleno
pybluez

デバイス

Raspberry Pi 3

独自技術

顔認証の実装、オンデバイス処理をONNXRumtimeで実装

ハッカソンで開発した独自機能・技術

独自デバイスの作成・アップデート
電動スライダー（Motorized Slide Potentiometer）とワイヤーを用いた動力変換機構
COCOA の API は一般人は許可なく利用できなかったため、GAEN API を利用せず、bluetooth の service uuid を直接解析して通信。

その他

よくある質問をまとめました。→ 質問コーナー
各パートの README も ぜひご覧ください！
- frontend　 → UI の紹介
- backend　 → API 仕様
- device 　 → 部品リスト・製作費など
- Machine Learning 　 → 使用したモデルなど

a_2111's People

Contributors

Stargazers

Watchers

Forkers

duyuxuan mdzz333

a_2111's Issues

マスクの紐の長さを調整したい

アプリの起動時に毎度S/M/Lを選択させる
or
紐の長さ情報を登録しておく

エンドポイント設計

マスクの画像を動画にする

readの実装

動画が firebase hosting 経由だと見れないときが多々ある

なぜ？

not found ページと Error を catch したときのページをきれいにする

JPHacks の twitter @jphacks2021 に貼ってあるリンクが not found で思い出した
（cc: @jphacks-official）

not found と error boundary で unhandled error を catch したときに表示するページが雑すぎるので、きれいにする

ついでにオフライン対応したらオフラインだよ表示もできるようにしてみたい。これはどうやってやるか調べるところから

mp4 → 3dモデルをレンダリング

ハードの技術的なドキュメントも残しておく今日の午前中にはやる

My face is published under the MIT licence.😅

Is your feature request related to a problem? Please describe.
Problem

Describe the solution you'd like
Select an appropriate licence

質問一覧の作成

顔の大きさを測定

顔の大きさを写真で測定してから紐調節

実際に顔の大きさを測定するようなアプリがあった
mapleの位置情報の時のように精度に欠ける可能性があるがハッカソンだと妥協すればあり(S/M/Lの3段階にさえ分類できれば)

ハードウェアの複数台作成

第3者からフィードバックを貰いたい

DBスキーマ設定

COCOA受信の通知、COCOA通信なしの通知

マスクの調節サイズS,M,L 作成

受信統計の可視化

Is your feature request related to a problem? Please describe.
信号の受信の記録をとっていい感じに可視化したい。

Describe the solution you'd like
統計をDBに保存する。
react表描画ライブラリを導入する。

Additional context
なし

Additional context
Add any other context or screenshots about the feature request here.

いつからか package.json が .gitignore されてしまっていたのでちゃんと動くかチェックする

node_modules/ けして入れなおして動くかあとで確かめる

起動時、appcontextのuseEffect内でlocalstorageを見に行きます
idがあったら、それでログインしたとみなします
なかったら、
- 新規登録画面（又はモーダル？）を出し、なまえを入力させる
- それをサーバーに送信し、IDをもらってくる（サーバー未デプロイ）
- それをLocalstorageに保存し、ログインしたこととする
ログイン情報などは、appcontextのstateで管理する

ライブラリ選定
パッケージの追加
実装

https://tokyo-vaction.jp/