$30 off During Our Annual Pro Sale. View Details »

【授業スライド】教員リムーバー

 【授業スライド】教員リムーバー

慶應義塾⼤学 B3 和田唯我 / Yuiga Wada

- About me
- Blog

Yuiga Wada (和田唯我)

October 05, 2022
Tweet

More Decks by Yuiga Wada (和田唯我)

Other Decks in Technology

Transcript

  1. クラウドコンピューティング実験
    『教員リムーバー』
    4班
    ● XXXXXXX 和田唯我
    ● YYYYYYY
    ● ZZZZZZZ
    ● UUUUUU

    View Slide

  2. 『教員リムーバー』
    ・自動で板書を撮り, webから各授業の板書を閲覧することができるシステム
    ・画像処理で教員を抹消する!! (opencv + numpy)

    View Slide

  3. 特徴
    ・時間割から板書を閲覧できる
    ・画像処理で教員を抹消する!! (opencv + numpy)
    ・PDF化して板書をダウンロードできる

    View Slide

  4. センシング概要

    View Slide

  5. アーキテクチャダイアグラム

    View Slide

  6. Demo

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. アーキテクチャダイアグラム

    View Slide

  12. センシング

    View Slide

  13. システムで用いたセンサ
    USBカメラ 障害物センサ
    ボタンセンサ

    View Slide

  14. センシング
    ● Button
    起動
    ● IR Obstacle Avoidance Module(障害物センサ)
    物体の有無を検知
    ○ 物体(黒板消し)有→60秒ごとに撮影
    ○ 物体(黒板消し)無→5秒ごとに撮影
    撮影した画像をMQTTで送信
    黒板消し有
    黒板消し無

    View Slide

  15. MQTTでの通信
    ・画像サイズを1280×720と指定したので、1度にデータを送れない(128 kBが上限らしいです)
    →base64にして画像を適当なサイズにばらして送信し、いったんS3に格納
    →最後のデータが送られてきたらS3のデータを集めて、再構築しS3保存
    ・通信がうまくいかないときがある
    →データの再送

    View Slide

  16. カメラ
    得られた画像を4種類に分類
    ・background→ 起動時に1枚撮影 ・normal → 黒板消しがある状態で60秒ごとに撮影
    ・erasing → 黒板消しがない状態で5秒ごとに撮影 ・finish → 黒板消しが置かれたタイミングで撮影

    View Slide

  17. Web: index (時間割)

    View Slide

  18. View Slide

  19. Web: index (時間割)
    ● 教室名を指定して, DynamoDBから時間割を取得
    ● 授業名からsid(後述)を計算し, 板書表示用のページ(presenter)に飛ばす
    (CSS-FrameworkはBulmaを使用)

    View Slide

  20. Web: index → presenter
    name: 授業名
    sid: 授業名をutf-8→SHA256でハッシュ化
    ⇒ Query-StringとしてURLに付加

    View Slide

  21. Web: presenter (板書表示)

    View Slide

  22. View Slide

  23. Web: presenter (板書表示)
    ● Web上にアップロードされた画像ではないため、ファイルの場所を指定できない
    → 画像のバイナリデータをbase64でエンコード
    → imgタグのsrc要素にエンコード結果を指定すると画像が表示できる
    ● 画像をスライドにして表示
    → スライダーが作れるJavaScriptライブラリ(Swiper)を利用
    ● Download!ボタンを押すと、PDF化
    → 極力lambda上でやりたくない
    ⇒ javascriptで行う. (jsPDF)

    View Slide

  24. Download: 教員のいない板書

    View Slide

  25. 画像処理 (CloudWatchで定期実行)

    View Slide

  26. 画像処理: 背景差分
    背景差分 Gray Scale

    View Slide

  27. 画像処理: 背景差分
    背景差分 (gray) 収縮 (次のスライド)

    View Slide

  28. 画像処理: モルフォロジー変換
    収縮 (Erosion)
    → 黒板の文字だけ消す
    膨張 (Dilation) → 線を潰して面積を増やす

    View Slide

  29. 画像処理: 教員抹消
    一次元に写像.
    教員を抹消するmaskを生成

    View Slide

  30. 画像処理 ハマった点
    ● Lambda上でOpenCVを使うとドツボにハマる
    → opencv-python はOpenCV のビルドが必要
    → ビルド環境と実行環境を一致させる必要がある ( localでpip&zipだけではダメ)
    ⇒ Docker上でOpenCVをビルド
    ⇒ ビルドしたOpenCV + numpy + opencv-pythonを zipでlambdaに.
    ⇒ LambdaのLayer (Lambda Layers)を作成

    View Slide

  31. ありがとうございました
    ページのURL: https://uaby7jdky5.execute-api.us-east-
    1.amazonaws.com/index

    View Slide