비디오 트랜스크립션 서비스 만들기

재택 학습 환경에서 많은 학생들은 비디오 수업을 받게 됩니다. 비디오는 뛰어난 학습 수단이 될 수 있지만, 추가 또는 대안적인 학습 수단이 필요하거나 비디오를 이용하지 못하는 학생들을 위해 필기나 읽기 자료를 제공해야 하는 경우가 있습니다.

코로나19(COVID-19)의 대유행으로 인해 모든 유형의 온라인 수업 자료에 대한 수요가 급격히 증가했습니다. 이 튜토리얼에서 만들어 볼 앱은 주된 학습 수단으로 비디오 및 오디오 툴을 사용하는 학생들에게 교사가 추가적으로 필기 자료를 제공할 수 있도록 지원하는 앱입니다. 또한, 교사는 어떤 이유로든 비디오를 재생할 수 없는 학생을 위해 서면 수업을 쉽게 제공할 수도 있습니다.

이 튜토리얼에서 사용할 코드와 관련 파일은 함께 제공된 GitHub 저장소에서 찾을 수 있습니다.

학습 목표

학습 내용:

  • Watson Speech to Text를 사용하여 강의 비디오에서 텍스트를 추출할 수 있는 Python 앱을 만듭니다.
  • Watson Language Translator를 사용하여 텍스트를 번역하고 결과물을 IBM Object Storage에 저장합니다.
  • 사용자가 비디오를 업로드하고 텍스트로 된 결과물을 받을 수 있는 Vue.js 프론트엔드를 만듭니다.

수강 전 준비사항

이 튜토리얼을 완료하려면 다음 사항을 준비해야 합니다:

  • IBM Cloud 계정 생성을 위해 등록합니다.
  • Python을 설치합니다.
  • Pipenv Python 패키징 툴을 설치합니다.
  • Node.js를 설치합니다.
  • Yarn을 설치합니다.

예상 소요 시간

이 튜토리얼을 완료하는 데 약 30분이 소요됩니다.

아키텍처 다이어그램

Video transcriber architecture diagram

  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

    • 서비스 자격 증명에 포함된 apikeyurl 값을 2 단계에서 생성한 .env 파일의 TRANSLATE_API_KEYTRANSLATE_URL 환경 변수로 복사합니다.
  • IBM Cloud Object Storage.

    • 주어진 이름으로 표준 버킷(bucket)을 생성하고 2 단계에서 생성한 .env 파일의 COS_BUCKET_NAME 환경 변수로 복사합니다. 이 스타터킷의 목적상, Cloud Object Storage에 생성한 버킷은 공용 액세스를 필요로 합니다.
    • 서비스 자격 증명에 포함된 apikeyiam_role_crn 값을 2 단계에서 생성한 .env 파일의 COS_API_KEYCOS_IAM_ROLE_CRN 환경 변수로 복사합니다.
    • 서비스 자격 증명에 있는 endpoints URL로 이동(예를 들어, https://control.cloud-object-storage.cloud.ibm.com/v2/endpoints)하고 여러분 지역과 가장 가까운 public service-endpoint 을 선택합니다. 여러분이 선택한 엔드포인트(endpoint)를 2 단계에서 생성한 .env 파일의 COS_ENDPOINT 환경 변수로 복사합니다.

4. 의존성 패키지 설치 및 애플리케이션 실행하기

서버

1.프로젝트 최상위 디렉토리에서 pipenv 가상 환경을 만듭니다:

```bash
pipenv --python <path to python executable>
```
예시, python 3.6 이 설치 되어 있는 경우:
```bash
pipenv --python 3.6
```

2.pipenv shell을 활성화 합니다:

```bash
pipenv shell
```
  1. 프로젝트 의존성 패키지를 설치합니다:
     pipenv install
    
  2. 로컬에서 애플리케이션을 실행하려면 아래 명령을 사용하세요:

     python manage.py start
    

    manage.py 유틸리티는 상황에 맞게 다양한 실행 명령을 제공합니다:

    • start: gunicorn을 사용하여 프로덕션 환경에서 서버를 시작합니다.
    • run: 네이티브 Flask 개발 서버를 시작합니다. 이 작업에는 파일 저장 시 백엔드 리로딩과 브라우저 내 런타임 장애를 진단하기 위한 Werkzeug 스택-트레이스 디버거가 포함됩니다.
    • livereload: livereload 패키지를 사용하여 개발 서버를 시작합니다. 이 작업에는 백엔드 리로딩과 동적 프론트엔드 브라우저 리로딩이 포함됩니다. 스택-트레이스 디버거는 비활성화되므로 이 명령은 프론트엔드 개발 시에만 권장됩니다.
    • debug: 네이티브 Flask 개발 서버를 시작합니다. 그러나 네이티브 리로드/트레이서는 비활성화됩니다. 이 때문에 노출된 디버그 포트가 IDE에 연결됩니다 (PyCharm의 Attach to Local Process처럼).

      또한, 유틸리티 명령도 몇 가지 있습니다:

    • build: 프로젝트 디렉토리 내의 .py 파일을 .pyc 파일로 컴파일합니다.

    • test: 프로젝트의 test 디렉토리 내의 모든 유닛 테스트를 실행합니다.

      서버는 브라우저 http://localhost:3000/ 로 실행됩니다.

프론트엔드 UI

1.아직 Node.jsYarn을 설치하지 않은 경우 설치합니다.

2.새로운 터미널에서 frontend 디렉토리로 변경하고 의존성 패키지를 설치합니다:

```bash
cd frontend
yarn install
```

3.프론트엔드 애플리케이션을 실행합니다:
개발용 컴파일 및 핫-리로드

```bash
yarn serve
```

**프로덕션용 컴파일 및 압축(minification)**
```bash
yarn build
```

**린트 수행 및 파일 수정**
```bash
yarn lint
```

프론트엔드 UI는 이제 브라우저의 http://localhost:8080/ 로 실행됩니다.

5. 언어 변환 확장

이 튜토리얼에서는 Watson Language Translator 서비스를 생성하고 비디오 트랜스크립션을 해석하기 위한 필수 서버 사이드 코드를 작성합니다. 프론트엔드 UI 구현은 여러분 몫으로 남겨두겠습니다. 힌트 – server/routes/index.py에 있는 upload_video 함수를 확인해 보면 /upload_video에서 POST 요청 형식으로 전달되는 부분에서 sourcetarget 언어를 볼 수 있습니다. 지원되는 언어 모델은 서버가 실행되고 있는 동안 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 내부에서의 개발, 배포, 운영 작업을 지원하는 통합 툴 세트로 툴체인을 제공합니다.

Deploy to IBM Cloud

로컬에 구축하기

이 애플리케이션을 로컬에 구축하려면 네이티브 방식으로 애플리케이션을 실행하거나 컨테이너화 및 IBM Cloud에 대한 손쉬운 배포를 지원하는 IBM Cloud Developer Tools를 사용할 수 있습니다.

네이티브 애플리케이션 개발

네이티브 애플리케이션 개발은 앞서 앱을 설치하고 실행한 4 단계에서 다루었습니다. 애플리케이션은 브라우저의 http://localhost:3000/에서 실행됩니다.

  • Swagger UI /explorer에서 실행됩니다
  • Swagger 정의: /swagger/api에서 실행됩니다
  • Health 엔드포인트 : /health

Flask 프로젝트의 디버깅 옵션은 다음 두 가지가 있습니다:

  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

그러면 애플리케이션이 로컬에서 실행됩니다. Cloud Foundry 또는 Kubernetes에서 IBM Cloud로 배포할 준비가 되면 다음 명령 중 하나를 실행하세요:

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 배포 방법에 관해서도 다루었습니다. 이제 이 간단한 앱을 기반으로 더 복잡한 기능을 추가하거나 교사와 학생의 온라인 학습 경험을 개선하는 강력한 학습 앱을 만들 수 있습니다.