이준성 / khuwitch

Go to a project
Toggle navigation Toggle navigation pinning
박진수
417c9421 2 parents ad38932e 328a56ed

Merge branch 'master' into 'master' 

README.md 초안 작성

교수님께서 작성해주신 목차를 바탕으로 초안을 작성했습니다.
추가로 필요한 내용이 있으면 말씀해주시기바랍니다.

See merge request !3
Inline Side-by-side
Showing 3 changed files with 154 additions and 44 deletions
The MIT License (MIT)
Copyright (c) 2020 Jinsu Park(2016101168)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
## Polly
# Khuwitch
> Polly는 text를 음성으로 변환해주는 AWS의 한 서비스이다.
khuwitch는 다국어 번역 지원하며, 이를 음성으로도 들을 수 있도록해주는 twitch bot 입니다.
### 권한 (Cognito service)
khuwitch를 이용하면 채널 관리자는 자신의 채널의 외국어 채팅을 한국어로 바로 번역해 볼 수 있고, 필요한 경우 이를 음성파일로 변환하여 재생한 뒤 시청자들에게 송출할 수도 있습니다.
모든 AWS는 이용하려면 그를 위한 자격 증명이 필요하다.
브라우저에서 이용자가 바로 AWS 서비스를 이용하려면 AWS 서비스를 이용하기위한 자격증명이 필요하지만, IAM User의 Credential을
웹페이지 코드에 공개하는 것은 바람직하지않다.
`Cognito` 는 이런 경우에 웹페이지에서의 인증, 인가 상태와 AWS 서비스를 위한 인증, 인가를 연동할 수 있도록 해주는 AWS의 한 서비스이다.
## 아키텍쳐
우리는 인증되지않은 사용자도 Polly를 통해 TTS(text to speech) 기능을 이용할 수 있도록 Cognito의 자격 증명 풀을 생성했고, 그들은 Polly full access 권한을 갖는다.
> 추후 추가 예정
### 사용 방법
## 사용되는 API
```html
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.796.0.min.js"></script>
* [Papago 언어 감지 API](https://developers.naver.com/docs/papago/papago-detectlangs-overview.md)
* [Papago 번역 API](https://developers.naver.com/docs/papago/papago-nmt-overview.md)
* [Twitch Authentication API](https://dev.twitch.tv/docs/authentication)
* [Twitch Chatbot API](https://dev.twitch.tv/docs/irc)
## 사용된 기술 및 동작 방법
khuwitch는 크게 아래의 항목들로 동작한다고 볼 수 있습니다.
* `websocket` 을 기반으로 Twtich api를 편리하게 이용할 수 있게해주는 `tmi client`
* `Papago API` 를 통한 번역
* `Socket io` 를 이용한 frontend, backend의 통신
* `AWS Polly` 를 이용한 TTS(Text To Speech)
위의 기술들을 바탕으로 khuwitch는 아래와 같이 동작합니다.
1. `websocket` 을 기반으로 를 통해 메시지를 받아보거나 작성할 수 있습니다.
2. Papago의 언어감지 API를 이용해 해당 채팅 메시지가 어떤 언어인지 판별합니다.
3. 채팅 메시지가 외국어인 경우 Papago의 번역 API를 이용해 내용을 번역한 뒤 채팅으로 번역 내용을 전송하고, socket io를 통해 현재 khuwith 서비스에 접속 중인 사용자에게도 번역 내용을 전송합니다.
4. frontend에서는 수신한 text를 `AWS Polly` 를 이용해 음성 파일로 변환한 뒤, 접속자의 브라우저에서 재생합니다.
## 빌드 및 실행 방법
> 추후 보완 예정
### local에서 실행하기
**frontend**
```bash
$ KHUWITCH_PORT=8000 npm start
```
브라우저에서 javascript AWS SDK를 설치한다(불러온다).
```html
<script>
// Polly를 사용하기 위한 자격증명을 설정한다.
AWS.config.region = 'ap-northeast-2';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: 'ap-northeast-2:03db97c9-a857-45f3-be6e-3cf84d6f619b'});
const polly = new AWS.Polly({
signatureVersion: 'v4',
region: 'ap-northeast-2',
});
let params = {
'Text': '반가워 친구야~',
'OutputFormat': 'mp3',
'VoiceId': 'Seoyeon'
};
let tts = new AWS.Polly.Presigner(params, polly)
// tts로 변환한 음성 파일을 얻는다.
tts.getSynthesizeSpeechUrl(params, function(error, url) {
if (error) {
} else {
setTimeout(()=>{
console.log("실행")
let audio = new Audio(url)
audio.play()
.then(delete audio);
}, 3000)
}
})
</script>
**backend**
```bash
$ KHUWITCH_PORT=3000 npm start
```
### docker image 빌드 후 docker-compose로 실행
**frontend 빌드**
```bash
$ docker build -f Dockerfile-frontend -t khuwitch/frontend
```
**backend 빌드**
```bash
$ docker build -f Dockerfile-backend -t khuwitch/backend
```
**docker-compose로 실행**
```bash
$ docker-compose -f docker-compose.yml -f docker-compose-dev.yml up
```
기본적 설정으로 존재하는 `docker-compose.yml` 에 추가적인 내용을 담은 `docker-compose-{{NAME}}.yml` 을 전달함으로써 설정을 Override할 수 있습니다.
## 사용 방법
_로그인 화면 추후 추가.png_
_봇 입장 화면 추후 추가.png_
채널관리자는 twitch login을 통해 khuwitch bot을 자신의 Twitch 채널에 입장시킬 수 있습니다.
_번역 화면 추가.png_
khuwitch bot이 채널에 입장하면 모든 message에 대해 언어감지를 한 뒤 한국어가 아닌 경우는 해당 text를 한국어로 번역하여 누가 어떤 말을 했는지 알려줍니다.
_tts 선택화면 추가.png_
단순한 번역 챗봇을 넘어 TTS 번역 봇으로 이용하고 싶다면, TTS를 청취하고싶은 채널을 선택할 수 있습니다. 이후 변환된 음성 파일이 자동으로 재생되므로 내 채널로도 해당 음성이 송출되어 시청자들도 들을 수 있게 됩니다.
## License
누구나 편리하게 khuwitch를 개발하고 사용할 수 있도록 해당 프로젝트의 License를 MIT License로 선정하였습니다.
......
## Polly
> Polly는 text를 음성으로 변환해주는 AWS의 한 서비스이다.
### 권한 (Cognito service)
모든 AWS는 이용하려면 그를 위한 자격 증명이 필요하다.
브라우저에서 이용자가 바로 AWS 서비스를 이용하려면 AWS 서비스를 이용하기위한 자격증명이 필요하지만, IAM User의 Credential을
웹페이지 코드에 공개하는 것은 바람직하지않다.
`Cognito` 는 이런 경우에 웹페이지에서의 인증, 인가 상태와 AWS 서비스를 위한 인증, 인가를 연동할 수 있도록 해주는 AWS의 한 서비스이다.
우리는 인증되지않은 사용자도 Polly를 통해 TTS(text to speech) 기능을 이용할 수 있도록 Cognito의 자격 증명 풀을 생성했고, 그들은 Polly full access 권한을 갖는다.
### 사용 방법
```html
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.796.0.min.js"></script>
```
브라우저에서 javascript AWS SDK를 설치한다(불러온다).
```html
<script>
// Polly를 사용하기 위한 자격증명을 설정한다.
AWS.config.region = 'ap-northeast-2';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: 'ap-northeast-2:03db97c9-a857-45f3-be6e-3cf84d6f619b'});
const polly = new AWS.Polly({
signatureVersion: 'v4',
region: 'ap-northeast-2',
});
let params = {
'Text': '반가워 친구야~',
'OutputFormat': 'mp3',
'VoiceId': 'Seoyeon'
};
let tts = new AWS.Polly.Presigner(params, polly)
// tts로 변환한 음성 파일을 얻는다.
tts.getSynthesizeSpeechUrl(params, function(error, url) {
if (error) {
} else {
setTimeout(()=>{
console.log("실행")
let audio = new Audio(url)
audio.play()
.then(delete audio);
}, 3000)
}
})
</script>
```
\ No newline at end of file