動画トランスクリプト生成サービスを構築する

学習環境が自宅の場合、多くの学生は動画を使った授業を好む傾向にあります。動画は学習方法として最適ですが、講師が注釈を加えなければならないことがあります。さらに、他の学習方法を必要とする学生や、動画にアクセスできない学生には、課題図書を与える必要があります。

コロナウィルスと COVID-19 のパンデミックにより、あらゆるタイプのオンライン教材のニーズが急速に高まっています。このチュートリアルで構築するアプリを使用すると、主な学習方法として動画と音声を使用している学生に対し、講師が注釈を表示できるようになります。また、何らかの理由で動画を再生できない学生には、簡単にテキストで指示を与えることもできます。

このチュートリアルのコードと関連ファイルは、チュートリアルに付随する GitHub リポジトリー内にあります。

学習の目的

このチュートリアルでは、以下の方法を学びます。

• Watson Speech to Text を利用して、教育用の動画からテキストを抽出できる Python アプリを作成する。
• Watson Language Translator を利用してテキストを翻訳し、生成されたトランスクリプトを IBM Cloud Object Storage 内に格納する。
• ユーザーが動画をアップロードし、生成されたトランスクリプトを受け取るために使用できる Vue.js フロントエンドを作成する。

前提条件

このチュートリアルに従うには、あらかじめ以下の作業を行う必要があります。

• IBM Cloud アカウントを登録します。
• Python をインストールします。
• Pipenv Python パッケージ化ツールをインストールします。
• Node.js をインストールします。
• Yarn をインストールします。

所要時間

このチュートリアルの所要時間は約 30 分です。

アーキテクチャー図

1. ユーザーがサイトにナビゲートして動画ファイルをアップロードします。
2. Watson Speech to Text が音声を処理してテキストを抽出します。
3. Watson Translation を利用して、テキストを目的の言語に翻訳できます (省略可)。
4. アプリが翻訳後のテキストをドキュメントとして Object Storage 内に格納します。

手順

1. リポジトリーのクローンを作成する

git clone git@github.com:Call-for-Code/cfc-covid-19-video-transcriber.git
cd cfc-covid-19-video-transcriber

2. 環境変数をセットアップする

プロジェクトのルート・ディレクトリー内に .env ファイルを作成し、以下の環境変数を含めます。注 – 次のステップで、これらの環境変数の値を IBM Cloud サービス資格情報で置き換えます。

STT_API_KEY=<api key for speech to text service>
STT_URL=<URL for speech to text service>
TRANSLATE_API_KEY=<api key for translator service>
TRANSLATE_URL=<URL for translator service>
COS_API_KEY=<cloud object storage api key>
COS_IAM_ROLE_CRN=<cloud object storage IAM role crn. e.g. crn:v1:bluemix:public:iam::::serviceRole:Writer>
COS_ENDPOINT=<cloud object storage endpoint. e.g. s3.eu-gb.cloud-object-storage.appdomain.cloud>
COS_BUCKET_NAME=<cloud object storage bucket name>

3. IBM Cloud サービスのインスタンスを作成し、サービス資格情報を取得する

IBM Cloud に登録/ログインし、以下のサービスのインスタンスを作成します。

• IBM Watson Speech to Text

  • サービス資格情報に含まれる apikey と url の値を、ステップ 2 で作成した .env ファイル内の STT_API_KEY 環境変数と STT_URL 環境変数にそれぞれコピーします。

• IBM Watson Language Translator

  • サービス資格情報に含まれる apikey と url の値を、ステップ 2 で作成した .env ファイル内の TRANSLATE_API_KEY 環境変数と TRANSLATE_URL 環境変数にそれぞれコピーします。

• IBM Cloud Object Storage.

  • 標準的なバケットを作成して、任意の名前を付けます。この名前を、ステップ 2 で作成した .env ファイル内の COS_BUCKET_NAME 環境変数にコピーします。このスターター・キットでは、Cloud Object Storage 内に作成するバケットには公開アクセスを設定する必要があります。
  • サービス資格情報に含まれる apikey と iam_role_crn の値を、ステップ 2 で作成した .env ファイル内の COS_API_KEY 環境変数と COS_IAM_ROLE_CRN 環境変数にそれぞれコピーします。
  • サービス資格情報に含まれる endpoints URL (例: https://control.cloud-object-storage.cloud.ibm.com/v2/endpoints) にナビゲートして、最寄りの public service-endpoint を選択します。選択したエンドポイントを、ステップ 2 で作成した .env ファイル内の COS_ENDPOINT 環境変数にコピーします。

4. 依存関係をインストールしてアプリケーションを実行する

サーバー

1. プロジェクトのルート・ディレクトリーから、pipenv 仮想環境を作成します。

    pipenv --python <path to python executable>
   

   Show more

   例えば python 3.6 がインストールされている場合は、以下のコマンドを実行します。

    pipenv --python 3.6
   

   Show more

2. pipenv シェルを起動します。

    pipenv shell
   

   Show more
3. プロジェクトの依存関係をインストールします。

    pipenv install
   

   Show more

4. アプリケーションをローカルで実行するには、以下のコマンドを使用します。

    python manage.py start
   

   Show more

   manage.py ユーティリティーでは、状況に応じてさまざまな実行コマンドを使用できます。

   • start: 本番環境内で gunicorn を使用してサーバーを起動します。
   • run: ネイティブ Flask 開発サーバーを起動します。この場合、ファイル保存時のバックエンドの再ロードと、Werkzeug スタック・トレース・デバッガーによるブラウザー内での実行失敗の診断も行うことができます。
   • livereload: livereload パッケージを使用して開発サーバーを起動します。この場合、バックエンドの再ロードとフロントエンド・ブラウザーの動的再ロードも行われます。Werkzeug スタック・トレース・デバッガーは無効にされるので、このコマンドはフロントエンドの開発時にのみ使用することをお勧めします。

   • debug: ネイティブ Flask 開発サーバーを起動しますが、ネイティブ再ロード/トレーサーは無効にされます。この場合、デバッグ・ポートは IDE (PyCharm の Attach to Local Process など) に接続できるよう、公開されたままになります。

     以下のユーティリティー・コマンドもあります。

   • build: プロジェクト・ディレクトリー内の .py ファイルを .pyc ファイルにコンパイルします。

   • test: プロジェクトの test ディレクトリー内にあるすべての単体テストを実行します。

     ブラウザー内ではサーバーが http://localhost:3000/ で実行されます。

フロントエンド UI

1. Node.js と Yarn をまだインストールしていない場合は、インストールします。

2. 新しいターミナル内で、カレント・ディレクトリーをプロジェクトのルートから frontend ディレクトリーに変更し、依存関係をインストールします。

    cd frontend
    yarn install
   

   Show more

3. フロントエンド・アプリケーションを起動します。
   開発用のホットリロードをコンパイルします

    yarn serve
   

   Show more

   本番環境用にコンパイルして縮小化します

    yarn build
   

   Show more

   ファイルの構文チェックと修正を行います

    yarn lint
   

   Show more

   これで、ブラウザー内でフロントエンド UI が http://localhost:8080/ で実行中になります。

5. Language Translator による拡張

このチュートリアルでは、Watson Language Translator サービスのインスタンスを作成し、動画トランスクリプトを翻訳するために必要なサーバー・サイドのコードを記述する方法を説明します。フロントエンド UI の実装は、読者が拡張機能として実装できるよう、宿題として残しておきます。ヒント – server/routes/index.py 内の upload_video 関数を調べると、サーバー・サイドでは、POST リクエストのフォーム・データの一部として source 言語と target 言語が /upload_video に渡されることになっているのがわかります。サーバーが稼働中になると、サポートされる言語モデルが https://localhost:3000/language_models で提供されます。

6. アプリをデプロイする

以下の手順は、Python Flask サーバーをデプロイする場合に適用されます。フロントエンド UI をデプロイするには、Node.js のビルドとデプロイに関するチュートリアルで説明している手順に従ってください。

IBM Cloud にデプロイする場合

このアプリケーションを IBM Cloud にデプロイするか、最初にリポジトリーのクローンを作成してローカルでビルドするかを選択できます。アプリが実行中になったら、/health エンドポイントにアクセスしてクラウド・ネイティブのアプリケーションを構築できます。

このアプリケーションを IBM Cloud にデプロイするには、下のボタンを使用してください。この方法では、ホスト型 GitLab プロジェクトと DevOps ツールチェーンを備えたデプロイ・パイプラインが作成されます。デプロイ先としては、Cloud Foundry または Kubernetes クラスターのいずれかを選択できます。IBM Cloud DevOps サービスには、IBM Cloud 内での開発タスク、デプロイ・タスク、運用タスクをサポートする一連のツールを統合したツールチェーンが用意されています。

ローカルでビルドする場合

このアプリケーションをローカルでビルドする場合、アプリケーションをネイティブに実行することも、IBM Cloud に簡単にデプロイできるよう、IBM Cloud Developer Tools を使用してアプリケーションをコンテナー化することもできます。

ネイディブ・アプリケーションの開発

ネイティブ・アプリケーションの開発については、上記のステップ 4 でアプリをインストールして実行する際に説明しました。ブラウザー内ではサーバーが http://localhost:3000/ で実行されます。

• Swagger UI は /explorer 上で実行されます。
• Swagger 定義は /swagger/api 上で実行されます。
• ヘルス・エンドポイントは /health です。

Flask プロジェクトをデバッグするには 2 つの方法があります。

1. python manage.py runserver を実行して、ネイティブ Flask 開発サーバーを起動します。このサーバーに備わっている Werkzeug スタック・トレース・デバッガーにより、ブラウザー内に実行失敗のスタック・トレースが表示され、トレース内の任意の時点でのオブジェクトを検査できます。詳細については、Werkzeug のドキュメントをご覧ください。

2. python manage.py debug を実行して Flask 開発サーバーを起動します。この場合、デバッグは公開されますが、ネイティブ・デバッガー/再ロード機能は無効にされます。IDE には自身をプロセスに接続するための (つまり、PyCharm で Run -> Attach to Local Process を使用するための) アクセス権が付与されます。

また、scripts ディレクトリー内に格納されている Selenium UI テスト・スクリプトを使用して、ローカルで実行中のアプリケーションの状態を確認することもできます。

Windows ユーザーへの注記: gunicorn は、Windows 上ではサポートされていません。python manage.py run を実行してローカル・マシン上でサーバーを起動するか、Dockerfile を作成して起動してください。

IBM Cloud Developer Tools

以下のコマンドを実行して、IBM Cloud Developer Tools をマシン上にインストールします。

curl -sL https://ibm.biz/idt-installer | bash

以下のコマンドを実行して、IBM Cloud 上にアプリケーションを作成します。

ibmcloud dev create

このコマンドにより、ローカルでの開発とデプロイに必要なファイルを含むスターター・アプリケーションが作成されてダウンロードされます。

アプリケーションは、Docker コンテナーを使用してコンパイルされます。アプリをコンパイルして実行するには、以下のコマンドを実行します。

ibmcloud dev build
ibmcloud dev run

上記のコマンドにより、アプリケーションがローカルで起動します。IBM Cloud on Cloud Foundry または Kubernetes にデプロイする準備が整ったら、以下のいずれかのコマンドを実行します。

ibmcloud dev deploy -t buildpack // to Cloud Foundry
ibmcloud dev deploy -t container // to K8s cluster

アプリをローカルでビルドしてデバッグするには、以下のコマンドを実行します。

ibmcloud dev build --debug
ibmcloud dev debug

まとめ

このチュートリアルでは、Watson Speech to Text を利用して動画ファイルのトランスクリプトを生成するアプリを構築してデプロイする方法を紹介しました。また、Watson Language Translator と IBM Cloud Object Storage をデプロイする方法も説明しました。このシンプルなアプリにさらに手の込んだ機能を追加して、教える側と学ぶ側がオンラインでの学習体験をより良いものにできるようサポートする、堅牢な学習アプリを作成してください。