LoginSignup
1
0
@to-u-ko(too ok)

ハッカソンをもとに個人開発で「チャプター&要約自動生成してくれる動画共有アプリ」を開発した記録

Last updated at Posted at 2024-01-20

はじめに

私はオンラインITスクールRareTECHに所属しています。
そのスクール内で開催されるハッカソンに参加し動画チャプター自動生成アプリ「ちゃぷたん」を作りました。
github：https://github.com/hackathon-autumn-c/chaptan

そしてこの「ちゃぷたん」をもとに個人で開発を行い、チャプター&要約を自動生成してくれる動画共有アプリ「video-learn」を作りました。

現在アプリは公開していません

今回転職活動にあたってこのアプリをポートフォリオとして提出するため、ハッカソンと個人開発のそれぞれの開発記録を書きたいと思います。

この記事は個人開発の記録になります。
ハッカソンの開発記録→2ヶ月間のハッカソンで動画チャプター自動生成アプリを作成した記録

アプリの概要と作成意図

私は動画学習があまり得意ではありません。
人それぞれ好む学習タイプがあるかと思いますが、私はテキストベースでの学習が最も頭に入りやすいと感じており、動画を要約してテキストで見ることができると嬉しいなという思いがありました。
そこで、自動要約生成とハッカソンで手掛けた自動チャプター生成を組み合わせて、動画学習が得意ではない人や効率よく動画学習を行いたい人のための"動画学習をサポートする動画共有サイト"を作ることにしました。
具体的にいうと「チャプター&要約を自動生成してくれる動画共有アプリ」です。

■ターゲット(使用者)
スクールの講師と生徒
■課題
動画学習が苦手な生徒や効率よく動画学習を行いたい生徒にとって、動画のチャプターや要約があると嬉しい。
しかし講師が毎回動画のチャプターや要約を生成するのは大変。
■どのように解決するのか？
「チャプター&要約を自動生成してくれる動画共有アプリ」があれば、動画をアップロードするだけでアプリ側でチャプターと要約を自動生成してくれるため、講師の負担なく生徒はチャプターごとの動画視聴や要約を読むことができ効率よく柔軟に学習を行うことができる。

使用技術・ツール

  • バックエンド：Python(Django)
  • データベース：MySQL
  • フロントエンド：HTML/CSS/JavaScript
  • デザイン：figma
  • インフラ：AWS/Docker
  • エディタ：VScode
  • コード管理：git/github

機能

動画をアップロードすると自動でチャプターと要約を生成してくれる動画共有アプリです。
アプリの主要機能は以下の通りです。

※画像に映っている動画はデジタル庁のYoutubeの動画です。サンプルとして使用しています。
デジタル庁｜年次活動報告　2023年9月
「モビリティ・ロードマップ」のありかたに関する研究会（第６回）

1. 動画のアップロード

動画をアップロードすることができます。
アップロードが完了するまで「アップロード中　お待ちください」の文字が表示されます。
アップロードが完了すると動画一覧画面に遷移します
image.png

2. 動画一覧表示

アップロードされた動画が一覧で確認できます。
サムネイル表示とテーブル表示をボタンで切り替えることができます。
チャプターと要約の生成にはおよそ動画の1/4〜1/3の時間がかかります。
そのため「ステータス」の項目でチャプターと要約の生成状況が確認できるようにしています。
■サムネイル表示
image.png

■テーブル表示
image.png

2. チャプターの自動生成

動画がアップロードされると同時にチャプターが自動生成されます。
自動生成されたチャプターは動画の横に表示され、各チャプターをクリックするとその時点にジャンプして再生ができます。
image.png

3. チャプターの編集

動画投稿者にだけチャプター編集ボタンが表示され、チャプターを編集することができます。
image.png

4. 要約の自動生成

チャプターと同時に要約も自動生成されます。
要約ボタンを押すと要約のページに飛ぶことができます。
image.png

5. 要約の編集

動画投稿者にだけ要約編集ボタンが表示され、マークダウン形式で要約を編集することができます。
image.png

ちなみに動画投稿者以外が無理やりチャプターや要約の編集画面にアクセスしようとすると、以下のようなメッセージが表示されアクセスできません。
image.png

6. 文字起こしのダウンロード

動画の文字起こしをテキストファイルとしてダウンロードすることができます。
image.png

7. 動画の削除

動画投稿者にだけ動作削除ボタンが表示されます。
ボタンを押すとモーダルが表示され、OKをするとS3に保存された動画ファイルと文字起こしファイル、データベースのレコードが消えます。
image.png

8. ユーザーの切り分け

ユーザーは講師と生徒に分けられます。
■講師は動画のアップロード、視聴、文字起こしのダウンロード、チャプターの編集、要約の編集が可能です(編集は自分のアップロードした動画のみ可能)
■生徒は動画の視聴、文字起こしのダウンロード、要約の閲覧が可能です。

講師か生徒かによってサイトの表示を少し変えています。
生徒の画面ではナビゲーションバーに動画アップロードのメニューはありません。また、動画一覧画面ではステータスが完了(＝チャプター・要約生成済み)の動画のみ表示されるようになっており、ステータス項目は無意味なので非表示になっています。
【生徒の動画一覧画面】
image.png

その他の機能

  • ユーザー認証(ログイン・ログアウト)機能
    ※学校や教育コミュニティ向けに作っており、誰もが自由にアカウントを作成するのではなく、管理者がアカウントを作成してユーザーに配布する形での使用を想定しています。そのため、自分でサインアップするための画面は用意していません。
  • 動画一覧画面での動画の検索機能
  • チャプター・要約生成の処理進捗状況をメールで通知する機能
  • 管理画面でのデータベース管理機能
    Django標準の管理画面を使用してデータの追加・更新・削除ができます。

★画面遷移図★

【講師の画面】
image.png

【生徒の画面】
image.png

詳しくは実際のサイトを触って確認いただけると嬉しいです。

ER図

ER図-vile.jpg

ユーザーが講師か生徒かによってサイトの表示内容を変化させたかったので、DjangoのカスタムUserに含まれるis_staffカラムを使いました。講師の場合はis_staffカラムをTrueにしました。
(UsersカラムはDjangoのカスタムユーザーを継承しているため本来はもっと沢山カラムがありますが、ここではアプリで使用するカラムのみ記載しています。)

チャプター・要約生成処理

以下の図はチャプター・要約生成処理の流れです。
image.png

ハッカソンでのチャプター生成処理をもとに作っていますが、大きく変えた部分が2点あります。(ハッカソンでのチャプター生成処理はこちら)

■chatGPT APIのモデルにgpt-4Turboを使用

2023年11月にChatGPT Plus加入者向けにgpt-4TurboのAPIが利用できるようになりました。
上限が128000トークンまで引き上げられましたが、それでも3~6万字のテキストを一度のリクエストで処理することはできませんでした。そのため引き続きlangchainのテキスト分割機能を使用しています。

■AWS Sagemker Processingを使った文字起こし処理

faster-whisperを使った文字起こし処理はCPUだと時間がかかりすぎるため、ハッカソンではAPサーバにGPU搭載のEC2を使用していました。しかしこれだと常時起動するにはコストがかかりすぎます。GPUが必要になるのは文字起こしの処理だけなので、その部分だけGPUを利用できればよいわけです。

特定の処理だけGPUを利用でき、利用した分だけ費用がかかるようなサービスがないかと調べた結果、AWS Sagemaker Processingに辿り着きました。
Amazon SagemakerはAWSが提供するフルマネージド型の機械学習サービスです。機械学習に特化した様々なサービスやツールが含まれており、その中の1つにSagemaker Processingがあります。

Sagemaker Processingは機械学習に使うデータの前処理や後処理を行うためのコンテナ実行環境であり、必要な時に呼び出して指定したスクリプトを実行することができ、処理が終われば自動で停止するため費用は処理にかかった時間分だけですみます。
APサーバには低価格のCPUのEC2を使用し、faster-whisperによる文字起こし処理のみSagemaker Processingを呼び出して実行するようにしました。

インフラ構成図

インフラ構成図-Page-2.jpg

  • パブリックサブネットが2つありますが、1つはALB設置のために用意したダミーのサブネットです。
  • データベースはRDS(MySQL)を使用
  • お名前.comでドメインを取得しRoute53に登録
  • ACMでSSL証明書を取得しhttps化
  • 文字起こし処理にSagemakerを利用(S3のようにVPCEndpoint経由で接続できるようにしたいですが現状できていません)

今後の課題

  • チャプターと要約の精度
    faster-whipserによる文字起こしはかなり高精度ですが、chatGPTによるチャプターと要約の生成はまだまだ改善の余地があります。
    現状テキストを特定の文字数で分割し、その分割したセグメントごとにチャプターや要約の生成をしています。しかし、分割点がちょうど内容の区切れ目とは限らないためその分割点の前後でどうしても精度は落ちてしまいます。

  • 例外処理
    例外処理を実装できていないので対応したいです。

  • レスポンシブ対応
    レスポンシブ未対応のため対応できるようにしたいです。

  • VPCエンドポイント経由でのSagemaker呼び出し
    現状EC2からNatGateway→インターネット経由でSagemaker Processingを呼び出しています。VPCエンドポイント経由で呼び出すようにしたいです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0