README.md



Khuwitch

khuwitch는 다국어 번역 지원하며, 이를 음성으로도 들을 수 있도록해주는 twitch bot 입니다.

khuwitch를 이용하면 채널 관리자는 자신의 채널의 외국어 채팅을 한국어로 바로 번역해 볼 수 있고, 필요한 경우 이를 음성파일로 변환하여 재생한 뒤 시청자들에게 송출할 수도 있습니다.


사용되는 API


Papago 언어 감지 API
Papago 번역 API
Twitch Authentication API
Twitch Chatbot API


아키텍쳐


사용된 기술 및 동작 방법

khuwitch는 크게 아래의 항목들로 동작한다고 볼 수 있습니다.


websocket 을 기반으로 Twtich api를 편리하게 이용할 수 있게해주는 tmi client


Papago API 를 통한 번역

Socket io 를 이용한 frontend, backend의 통신

AWS Polly 를 이용한 TTS(Text To Speech)


위의 기술들을 바탕으로 khuwitch는 아래와 같이 동작합니다.


websocket 을 기반으로 를 통해 메시지를 받아보거나 작성할 수 있습니다.
Papago의 언어감지 API를 이용해 해당 채팅 메시지가 어떤 언어인지 판별합니다.
채팅 메시지가 외국어인 경우 Papago의 번역 API를 이용해 내용을 번역한 뒤 채팅으로 번역 내용을 전송하고, socket io를 통해 현재 khuwith 서비스에 접속 중인 사용자에게도 번역 내용을 전송합니다.
frontend에서는 수신한 text를 AWS Polly 를 이용해 음성 파일로 변환한 뒤, 접속자의 브라우저에서 재생합니다.


빌드 및 배포 방법

우선은 docker-compose를 이용해 서버에서 실행할 것이기 때문에 이미지 빌드를 위해 docker를 설치해야하고, 서버에는 docker와 docker-compose를 설치해야합니다.


빌드

frontend를 예시로하겠습니다. backend의 경우 frontend 를 server로 변경하면 됩니다.

# docker 설치 후
$ cd frontend
# frontend의 경우에만 SPA build
$ npm run build && \
  docker build . -t umi0410/khuwitch-frontend &&\
  docker push umi0410/khuwitch-frontend


배포

배포는 frontend든 backend든 상관없이 docker-compose로 한 번에 배포합니다. 빌드 때와 마찬가지로 docker를 설치해주시고, 추가적으로 docker-compose를 설치한 뒤 서비스를 구동시킵니다.

# 서버 접속 후 docker 설치 후 docker-compose 설치
$ sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose
$ curl http://khuhub.khu.ac.kr/khuwitch/khuwitch/raw/master/docker-compose.yml -o docker-compose.yml

# 실제 배포
$ docker-compose down && \
  docker rmi -f umi0410/khuwitch-frontend umi0410/khuwitch-server && \
  docker-compose pull && \
  docker-compose up # or docker-compose up -d 


개발을 위해 실행하기

frontend

$ cd frontend
$ npm install
$ PORT=8000 npm start


backend

$ cd server
$ npm install
$ npm start


사용 방법

로그인 화면 추후 추가.png
봇 입장 화면 추후 추가.png

채널관리자는 twitch login을 통해 khuwitch bot을 자신의 Twitch 채널에 입장시킬 수 있습니다.

번역 화면 추가.png

khuwitch bot이 채널에 입장하면 모든 message에 대해 언어감지를 한 뒤 한국어가 아닌 경우는 해당 text를 한국어로 번역하여 누가 어떤 말을 했는지 알려줍니다.

tts 선택화면 추가.png

단순한 번역 챗봇을 넘어 TTS 번역 봇으로 이용하고 싶다면, TTS를 청취하고싶은 채널을 선택할 수 있습니다. 이후 변환된 음성 파일이 자동으로 재생되므로 내 채널로도 해당 음성이 송출되어 시청자들도 들을 수 있게 됩니다.


License

누구나 편리하게 khuwitch를 개발하고 사용할 수 있도록 해당 프로젝트의 License를 MIT License로 선정하였습니다.