재택 학습 환경에서 많은 학생들은 비디오 수업을 받게 됩니다. 비디오는 뛰어난 학습 수단이 될 수 있지만, 추가 또는 대안적인 학습 수단이 필요하거나 비디오를 이용하지 못하는 학생들을 위해 필기나 읽기 자료를 제공해야 하는 경우가 있습니다.
코로나19(COVID-19)의 대유행으로 인해 모든 유형의 온라인 수업 자료에 대한 수요가 급격히 증가했습니다. 이 튜토리얼에서 만들어 볼 앱은 주된 학습 수단으로 비디오 및 오디오 툴을 사용하는 학생들에게 교사가 추가적으로 필기 자료를 제공할 수 있도록 지원하는 앱입니다. 또한, 교사는 어떤 이유로든 비디오를 재생할 수 없는 학생을 위해 서면 수업을 쉽게 제공할 수도 있습니다.
이 튜토리얼에서 사용할 코드와 관련 파일은 함께 제공된 GitHub 저장소에서 찾을 수 있습니다.
학습 목표
학습 내용:
- Watson Speech to Text를 사용하여 강의 비디오에서 텍스트를 추출할 수 있는 Python 앱을 만듭니다.
- Watson Language Translator를 사용하여 텍스트를 번역하고 결과물을 IBM Object Storage에 저장합니다.
- 사용자가 비디오를 업로드하고 텍스트로 된 결과물을 받을 수 있는 Vue.js 프론트엔드를 만듭니다.
수강 전 준비사항
이 튜토리얼을 완료하려면 다음 사항을 준비해야 합니다:
예상 소요 시간
이 튜토리얼을 완료하는 데 약 30분이 소요됩니다.
아키텍처 다이어그램
- 사용자가 사이트로 이동하여 비디오 파일을 업로드합니다.
- Watson Speech to Text가 오디오를 처리하고 텍스트를 추출합니다.
- Watson Translation(선택사항)이 원하는 언어로 텍스트를 번역할 수 있습니다.
- 앱이 번역된 텍스트를 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환경 변수로 복사합니다.
- 서비스 자격 증명에 포함된
-
- 주어진 이름으로 표준 버킷(bucket)을 생성하고 2 단계에서 생성한
.env파일의COS_BUCKET_NAME환경 변수로 복사합니다. 이 스타터킷의 목적상, Cloud Object Storage에 생성한 버킷은 공용 액세스를 필요로 합니다. - 서비스 자격 증명에 포함된
apikey및iam_role_crn값을 2 단계에서 생성한.env파일의COS_API_KEY및COS_IAM_ROLE_CRN환경 변수로 복사합니다. - 서비스 자격 증명에 있는
endpointsURL로 이동(예를 들어, https://control.cloud-object-storage.cloud.ibm.com/v2/endpoints)하고 여러분 지역과 가장 가까운publicservice-endpoint을 선택합니다. 여러분이 선택한 엔드포인트(endpoint)를 2 단계에서 생성한.env파일의COS_ENDPOINT환경 변수로 복사합니다.
- 주어진 이름으로 표준 버킷(bucket)을 생성하고 2 단계에서 생성한
4. 의존성 패키지 설치 및 애플리케이션 실행하기
서버
1.프로젝트 최상위 디렉토리에서 pipenv 가상 환경을 만듭니다:
```bash
pipenv --python <path to python executable>
```
예시, python 3.6 이 설치 되어 있는 경우:
```bash
pipenv --python 3.6
```
2.pipenv shell을 활성화 합니다:
```bash
pipenv shell
```
- 프로젝트 의존성 패키지를 설치합니다:
pipenv install 로컬에서 애플리케이션을 실행하려면 아래 명령을 사용하세요:
python manage.py startmanage.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.js 및 Yarn을 설치하지 않은 경우 설치합니다.
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 요청 형식으로 전달되는 부분에서 source 및 target 언어를 볼 수 있습니다. 지원되는 언어 모델은 서버가 실행되고 있는 동안 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 엔드포인트 :
/health
Flask 프로젝트의 디버깅 옵션은 다음 두 가지가 있습니다:
python manage.py runserver를 실행하여 네이티브 Flask 개발 서버를 시작합니다. 이 경우 Werkzeug 스택-트레이스 디버거가 함께 제공됩니다. 이 디버거는 브라우저 내에서 런타임 장애 스택-트레이스를 제공하며 트레이스의 어느 지점에서든 오브젝트를 검사할 수 있습니다. 자세한 정보는 Werkzeug 문서에서 확인하세요.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 배포 방법에 관해서도 다루었습니다. 이제 이 간단한 앱을 기반으로 더 복잡한 기능을 추가하거나 교사와 학생의 온라인 학습 경험을 개선하는 강력한 학습 앱을 만들 수 있습니다.