안녕하세요. 이지이지입니다.
이번 포스팅에서는 텍스트를 입력하면 텍스트에 맞게 인공지능이 그림을 그려주는 인공주능 화가 앱을 구현해보도록 하겠습니다.
위의 예시는 "an astronaut playing basketball with cats in space in a watercolor style"을 입력했을 때 인공지능이 그려 준 이미지입니다.
예제 앱에서 사용한 인공지능은 DALL·E 2입니다.
DALL·E 2는 요즘 핫한 ChatGPT를 만든 Open AI에서 서비스하는 이미지 생성 인공지능입니다.
DALL·E 2는 이미지 생성 뿐만 아니라 편집 등도 할 수 있습니다.
이미지 생성 인공지능에는 DALL·E 2 뿐만 아니라, 카카오에서 제공하는 Karlo(칼로)도 있습니다.
DALL·E 2와 Karlo 모두 일정량만 무료이고, 이후에는 유료로 사용해야 합니다.
DALL·E 2는 최초 3개월 동안 18$ 크레딧을 무료로 사용할 수 있습니다.
이미지 크기에 따라 가격이 달라지긴 하는데, DALL·E 2에서 요청할 수 있는 최대 1024X1024가 이미지당 0.02$가 부괴되기 때문에 18/0.02 = 900장의 이미지를 테스트해 볼 수 있습니다.
Karlo의 경우 월간 500건의 무료 쿼터를 제공합니다.
DALL·E 2나 Karlo 모두 요청방법은 비슷하니 적절한 것을 선택하여 만들어보시기 바랍니다.
이제 본격적으로 앱을 만들어 보도록 하겠습니다.
다음 소스 파일을 참고하시기 바랍니다.
| 사전 준비 |
DALL·E 2를 사용하기 위해서는 먼저 API Key를 얻어야 합니다.
1. 다음 링크를 통해 Open AI API사이트에 접속합니다.
OpenAI API
OpenAI is an AI research and deployment company. Our mission is to ensure that artificial general intelligence benefits all of humanity.
openai.com
2. 우측 상단의 SIGN UP을 클릭하여 회원가입합니다.
3. 회원가입 또는 로그인 후 상단의 개인 계정을 클릭하고, [View API keys]를 클릭합니다.
4. [+Create new secret key]를 클릭하여 key를 생성합니다.
Open AI에서 만든 key는 다시 볼 수 없으니, 꼭 다른 곳에 기록해두고 앱인벤터에서 사용할 수 있도록 합니다.
(key를 최초로 만들 때에만 확인할 수 있습니다.)
| 화면 구성 |
화면 구성에 있어 특별한 것은 없습니다.
아래 Non-visible components 추가하는 것을 잊지 마시구요.
Non-visible components의 기능을 말씀드리자면...
MyFonts1: 폰트를 내가 설정한 폰트로 사용할 수 있도록 해주는 확장 프로그램입니다. 저는 타이틀 부분의 팔레트나, 마이크 아이콘을 Material Icon font로 사용하기 위해 추가하였습니다.
이해가 되지 않으시면 저의 예전 포스팅을 참고하시기 바랍니다.
앱인벤터 Tips ::: 구글 아이콘(Material Icons) 폰트처럼 사용하기
안녕하세요. 이지이지입니다. 이번 앱인벤터 Tip은 구글 아이콘(Material Icon)을 폰트처럼 사용하기 입니다. 앱인벤터에서 아이콘을 사용할 때 복잡하게 이미지를 활용해서 하시나요??? 안드로이드
egeasy.tistory.com
Notifier1: 사용자에게 알림을 주거나, Progress Dialog(진행상황 표시)를 사용하기 위한 컴포넌트입니다.
SpeechRecognizer1: 음성인식을 사용하기 위한 컴포넌트입니다.
Web1: 인공지능 서버와 통신하기 위한 컴포넌트입니다.
이상 화면 구성에 대한 간략한 설명이었습니다.
다른 디자인적 세부사항은 위에 올려드린 소스 파일을 참고하시기 바랍니다.
| 블록 코딩 |
전체 블록 코딩 화면입니다.
그리 복잡하지 않으니 천천히 따라해보세요.
다음은 [앱이 처음 실행되었을 때], [다시하기] 버튼을 클릭했을 때 일어나는 이벤트 블록입니다.
①~② 앱이 처음 실행되었을 때 또는 [다시하기] 버튼을 클릭했을 때 SetDesign 프로시저를 호출합니다.
③ Lbl_topicon, Btn_refresh, Btn_mic 컴포넌트의 폰트가 확장 프로그램 MyFonts1에서 설정한 폰트를 사용하도록 합니다.
※ 첨부해 드린 소스에서 보면 MyFonts1의 폰트는 MaterialIcons-Regular.ttf로 설정되어 있습니다.
④ Canvas1의 배경이미지를 아무것도 없는 상태로 설정합니다.
⑤ Canvas1의 가운데에 "Image"라는 글씨가 나타나도록 합니다.
※ 앱이 처음 실행되었을 때에는 아무런 이미지가 없을 것이므로 사용자에게 이미지가 표시될 자리라는 것을 알려주기 위함입니다.
⑥ 요청할 이미지의 내용을 입력하는 텍스트상자를 공백으로 설정합니다.
다음은 마이크 아이콘을 클릭했을 때 실행되는 블록입니다.
① 마이크 버튼을 클릭했을 때, 음성인식을 시작합니다.
② 음성인식의 결과를 텍스트 상자에 표시되도록 합니다.
다음은 이미지 생성 버튼을 클릭했을 때 실행되는 블록입니다.
① 만약 텍스트상자(생성할 이미지를 묘사하는 상자)가 공백이라면
② 이미지 정보를 입력하라는 알림을 사용자에게 띄웁니다.
③ 텍스트상자에 커서가 자동으로 위치해 깜빡이도록 합니다.
④~⑥ 인공지능 API와 통신하는 내용입니다. 다음 문서를 참고합니다.
OpenAI API
An API for accessing new AI models developed by OpenAI
beta.openai.com
④ (①이 아니라면) Web1 컴포넌트(인공지능 서버와 통신할 컴포넌트)의 헤더를 구성합니다.
{Your API Key}에는 여러분이 Open AI에서 얻은 key를 입력하며 중괄호{ }는 삭제합니다.
위 문서에서 다음 사진의 형광색 칠한 부분에 해당합니다.
⑤ Web1이 통신할 API의 주소입니다.
⑥ 인공지능 API에 요청할 내용입니다.
위 문서에서 다음 사진의 형광색 칠한 부분에 해당합니다.
- 기본적으로 { } 안의 모든 부분을 복사한다고 생각하면 되는데...
- prompt(필수 입력사항)는 가장 중요한 것으로 바로 이미지를 묘사하는 내용입니다.
- n(옵션, 기본값 1)은 생성할 이미지의 개수로 1부터 10까지 지정할 수 있습니다.
- size(옵션, 기본값 1024 x 1024)는 이미지 크기로 256x256, 512x512, 1024x1024 중 하나로 설정할 수 있습니다.
- response_format(옵션, 기본값 url)은 생성된 이미지가 반환될 형태로 url 또는 b64_json 중 하나로 설정할 수 있습니다.
예제에서는 b64_json을 사용하였습니다.
⑦ 이미지를 가져오는 동안 사용자에게 앱이 문제가 있다는 것이 아니라는 것을 보여주기 위해 Progress Dialog를 보여줍니다.
※ 보통 10초 이상이 소요됩니다.
다음은 인공지능 API로부터 이미지를 받았을 때 실행되는 블록과 이때 사용되는 변수입니다.
① API로부터 받은 이미지를 임시저장할 (전역)변수입니다.
② (지역)변수 OpenAIData에 API로부터 받은 내용을 딕셔너리 형태로 저장합니다.
③ 변수 tempImage에 API로부터 받은 base64 형식으로 된 이미지를 저장합니다.
※ 인공지능에 요청할 때 n(이미지의 개수)을 1로 설정하였다면, 위 이미지 그대로 사용하시면 됩니다.
※ API, JSON, 딕셔너리 등에 대한 이해를 원하시면 저의 예전 포스팅을 참고하시기 바랍니다.
앱인벤터 강좌 #5 API, JSON 사용방법 및 Dictionary 컴포넌트 활용하기
안녕하세요. 이지이지입니다. 이번 포스팅에서는 각종 API 사용방법과 API를 통해 데이터를 받았을 때 가장 흔히 쓰이는 데이터 형식인 JSON 다루기, 그리고 앱인벤터에서 JSON과 잘 어울리는 Dictiona
egeasy.tistory.com
④ Canvas1의 배경이미지를 변수 tempImage에 저장해두었던 이미지로 설정합니다.
⑤ 이미지가 이제 생성되었으므로 이미지가 생성중이라는 것을 알려주었던 Progress Dialog를 종료합니다.
이상 인공지능 화가 앱 만들기 포스팅이었습니다.
창의적인 아이디어를 더해 좋은 앱 만들어보시기 바랍니다. ^^
P.S:
1. DALL·E, Karlo 모두 현재 영어만 지원하고 있습니다. 번역앱까지 통합해보면 좋겠네요.
2. 생성된 이미지를 저장하고, 갤러리 형식으로 보여주고, 삭제까지 할 수 있는 앱을 구상해보세요.
댓글