앱인벤터 페이크 보이스(Fake Voice) 앱
앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.
이번 튜터리얼 앱은 인공지능 딥페이크 기술을 활용하여 영상과 소리를 만드는 앱이다. 강력한 컴퓨터는 인간의 기록으로부터 배운 다음, 인간과 거의 정확하게 일치하는 새로운 가짜 버전을 만들어냄으로써 딥페이크(deep fake)를 만든다.
예를 들어, Jay-Z의 목소리는 이 비디오의 컴퓨터 모델에 의해 만들어졌다. 이 딥페이크 비디오는 마치 제이지가 셰익스피어의 "죽을 것인가, 죽을 것인가" 연설을 읽는 것처럼 보이게 한다.
때때로 가짜의 목소리는 약간 가짜처럼 들린다. 다른 때에는, 구별하기가 어렵게 들린다. 사용자들이 들은 것을 다시 믿을 수 있는 사람이 있나요?
아래의 페이크 보이스 앱을 코딩하여 나만의 이상하거나 으스스한 목소리를 만들어 보자. 이 목소리들은 인공 지능을 사용하지 않기 때문에 진정한 가짜는 아니지만, 꽤 좋다!
이 튜터리얼은 appinventor 홈페이지에서 제공하는 과정 중 하나의 앱이다. 우리는 또한 다음 강좌에 인공지능을 사용하는 가짜 목소리를 탐색할 수 있다.
자, 이제 시작해보자...
페이크 보이스 앱 디자인
음성을 인식하여 텍스트로 변환하는 작업을 먼저 실행한다. 버튼을 클릭하면 음성을 녹음하고 이를 텍스트로 변환하여 레이블에 표시할 것이다.
피치와 레이트 값을 슬라이더로 디자인하여 값을 설정하고 레이블에 저장된 텍스트를 음성을 말하기를 하여 음성을 변환시킨다. 피치값이 크면 조금 높은 소리로, 피치값이 작으면 낮은 톤의 소리로 말하기가 되고, 레이트가 크면 빠른 목소리로, 레이트가 작으면 느린 목소리로 말하게 될 것이다. 이를 통해 피치와 레이트를 변경시켜 페이크 보이스 효과를 내고자 한다.
이를 위해 화면 디자인은 아래와 같이 한다.
'Say Something' 버튼을 클릭하면 음성을 받아들여 텍스트로 변환하여 아래 주황색 레이블에 표시한다.
피치 슬라이더와 레이트 슬라이더를 통해 값을 변경하여 'Hear the Words Read Back' 버튼을 클릭하면 말한 내용의 피치와 레이트를 변화시켜 말하는 것이다.
페이크 보이스 앱 기본 설계
기본으로 음성을 텍스트로 변환하여 사용자에게 화면에 보여준다.
피치 값과 레이트 값을 변화시켜 사용자가 말한 텍스트를 음성을 변환하여 말하여 처음에 말한 음성과 피치와 레이트가 변경한 말을 비교해 보자.
페이크 보이스 앱의 가장 핵심의 컴포넌트는 음성인식 컴포넌트와 텍스트를 음성으로 변환하는 음성변환 컴포넌트를 활용한다. 그리고 2개의 버튼 컴포넌트와 1개의 컴포넌트를 사용할 것이다.
페이크 보이스 앱 컴포넌트
앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 화면에 버튼과 레이블 컴포넌트를 활용하여 화면을 구성하고 앱을 만들려고 한다.
컴포넌트 리스트
. 버튼컴포넌트 : 'Say Something'의 텍스트로 사용자에게 버튼을 클릭하며 음성으로 말하는 것을 안내한다.
. 레이블 컴포넌트 : 사용자가 음성으로 한 말을 텍스트로 변환하여 레이블 컴포넌트에 표시한다.
. 음성인식 컴포넌트 : 음성을 텍스트로 변환하는 컴포넌트이다.
. 버튼컴포넌트 : 'Hear the Words Read back'의 텍스트로 사용자에게 버튼을 클릭하며 텍스트를 음성으로 듣는 것을 안내한다.
. 레이블 컴포넌트 : 'Change the Pitch' 안내 문구를 사용자에게 표시한다.
. 피치 슬라이더 컴포넌트 : 0~2값 범위로 값을 설정한다.
. 레이블 컴포넌트 : 'Change the Rate' 안내 문구를 사용자에게 표시한다.
. 레이트 슬라이더 컴포넌트 : 0~2값 범위로 값을 설정한다.
아래 그림은 앱이벤터로 작성한 클라우드DB 채팅 입의 디자인과 사용된 컴포넌트이다
버튼 컴포넌트 설정값 설정하기
버튼 컴포넌트 속성값은 다음과 같다. 초기값은 다음과 같다.
배경색 : #be2f29ff
모양 : 둥근모서리
텍스트 : Say Something
텍스트정렬 : 가운데
텍스트색상 : 흰색
레이블 컴포넌트 설정값 설정하기
음성으로 말한 내용을 텍스트로 표시하기 위해 사용하는 레이블 컴포넌트이다.
레이블 컴포넌트 속성값은 다음과 같다.
배경색 : #ecaf44ff
글꼴 : 세리프
높이 : 20퍼센트
너비 : 부모 요소에 맞추기
힌트 : Your words show up here
여러줄 : 체크
버튼 컴포넌트 설정값 설정하기
버튼은 피치와 레이트를 변경하여 텍스트를 음성으로 변환하여 말하는 이벤트를 발생한다.
텍스트 : Hear the Words Read Back
레이블 컴포넌트 설정값 설정하기
"Change the Pitch" 문구를 사용자에게 표시하기 위해 사용하는 레이블 컴포넌트이다.
텍스트 : Change the Pitch
슬라이더 컴포넌트 설정값 설정하기
음성의 피치 값을 설정하기 위해 0~2 범위 내의 값을 설정하는 슬라이더 컴포넌트이다.
너비 : 부모요소에 맞추기
최댓값 : 2
최솟값 : 0
섬네일위치 : 1
레이블 컴포넌트 설정값 설정하기
"Change the Rate" 문구를 사용자에게 표시하기 위해 사용하는 레이블 컴포넌트이다.
텍스트 : Ratethe Pitch
슬라이더 컴포넌트 설정값 설정하기
음성의 레이트 값을 설정하기 위해 0~2 범위 내의 값을 설정하는 슬라이더 컴포넌트이다.
너비 : 부모요소에 맞추기
최댓값 : 2
최솟값 : 0
섬네일위치 : 1
음성인식 컴포넌트 설정값 설정하기
음성을 텍스트로 변환하는 컴포넌트이다.
앱인벤터 음성인식 컴포넌트
앱인벤터 음성인식 컴포넌트 앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다. 이번 시간에는 미디어에서 음성인식 컴포넌트에 대해
flycoding.tistory.com
음성변환 컴포넌트 설정값 설정하기
텍스트를 음성으로 변환하는 컴포넌트이다.
앱인벤터 음성변환 컴포넌트
앱인벤터 음성변환 컴포넌트 앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다. 이번 시간에는 음성인식의 반대로 텍스트를 음성으로
flycoding.tistory.com
코딩블럭
블록 코딩은 내가 하고자 하는 내용을 문장으로 만들어 보라. 그것을 그대로 코딩하면 된다.
우리가 무엇을 할 것인지 생각해보라. 간단하다.
버튼을 누루면 말하고 말한 것을 텍스트로 변환하며 텍스트를 레이블에 표시한다.
. 전역변수
none.
* 'Say Something' 버튼을 클릭했을때
'Say Something' 버튼을 클릭하면 사용자가 말하고 말한 음성 내용을 텍스트로 변환한다.
. "음성인식" 텍스트가져온후에
이 이벤트는 음성인식.텍스트가져오기 호출 블럭을 실행한 후, 음성인식이 완료되면 호출되는 블럭이다. 즉 음성을 텍스트로 인식을 완료했을 때 호출되는 블럭이다. 텍스트로 변환이 완료되면 레이블에 결과값을 표시하면 된다.
. 'HearTheWordsButton' 버튼을 클릭했을때
피치와 레이트값이 슬라이더를통해 변경된 값을 음성변환 컴포넌트에 설정하고 음성변환 컴포넌트의 '말하기' 호출 블럭을 사용하여 텍스트를 말한다.
| 음성변환.피치값 <- 피치슬라이더.섬네일위치 음성변환.말하기속도값 <- 레이트슬라이더.섬네일위치 음성변환.말하기 <- SpeechTextBox.텍스트 |
실행결과 화면
앱인벤터의 나에게말해줘 앱을 작성하였다. 실행 결과 화면은 아래와 같다.
첫번째 화면은 앱이 처음 구동되었을 때 화면이다.
"Say something" 버튼을 클릭하면 구글 보이스가 실행이 된다.
'안녕하세요' 말을 하면 음성을 인식하며 문자로 레이블에 표시한다.
이제 피치와 레이트를 조절해 가면서 '안녕하세요' 소리의 높이와 빠르기를 통해 서로 다른 소리를 내보자.
페이크 보이스 앱 실행 동영상 화면이다.
지금까지 페이브 보이스 앱을 작성하였다. 실제로 딥러닝을 통해 말하는 것은 아니지만, 말 그대로 페이크를 사용하여, 즉 말하기에서 피치와 속도를 조절하여 다른 목소리를 흉내내는 효과를 낼 수 있었다. 실제로 인공지능의 딥러닝은 아니지만 유사한 효과를 내는 것을 앱인벤터로 작성해보았다. 다음은 좀 더 인공지능의 모듈을 활용하여 한단계 더 인공지능 앱을 활용하여 앱을 작성해보도록 하자.
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
'앱인벤터 > 앱인벤터 코딩따라하기' 카테고리의 다른 글
| 앱인벤터에서 자바스크립트를 사용하여 Firebase 인증-설계편 (0) | 2022.11.17 |
|---|---|
| 앱인벤터 오마이스파이크 앱-설계편 (0) | 2022.11.15 |
| 앱인벤터 페인트팟2-큰점작은점 추가 (0) | 2022.10.20 |
| 앱인벤터 페인트팟 앱(PaintPot) (0) | 2022.10.18 |
| 앱인벤터 멀티스크린 도화지 앱(multi screen)-코딩편 (0) | 2022.10.16 |
댓글