본문 바로가기
유용한 코드 모음

openAI api로 아웃페인팅을 (야매로) 싸게 이용하고 구현하기

by cuziam 2024. 2. 19.

openAI의 아웃페인팅을 해상도가 좀 낮더라도, 조금 노가다를 하더라도 싸게 이용할 수 없을까?

 

왼쪽: openAI의 이미지 생성 api 가격표, 오른쪽: openAI의 outpainting 웹페이지에서 제공한 가격

발상의 시작

openAI의 아웃페인팅은 dalle2 모델을 기반으로 하는데, 현재 115credits(총 460장의 이미지 생성)에 15달러, 즉 1장당 0.032달러이다. 그런데 openAI의 dalle2 모델의 api요금을 보면 1024*1024 해상도 이미지가 1장당 0.02달러이다.

 

여기서 뭔가 부조리함(?)을 느꼈다. 똑같은 생성모델을 이용하는데 api로 이미지를 만들면 60퍼센트 가격이라니. 이거 가격차이가 많이 나는 거 아니야? 그래서 혹시 이 dalle2 api가 아웃페인팅을 지원하고 있는가 찾아봤다.

* openai api 가격표

* outpainting 홈페이지

사실 openai의 이미지 관련 api는 아웃페인팅을 지원하지 않는다... 하지만 인페인팅은 된다.

api 문서를 찾아보면 인페인팅을 위한 edit 기능이란 게 있다.

* https://platform.openai.com/docs/api-reference/images/createEdit

openai의 api 문서를 읽어보면, 아웃페인팅은 지원하지 않고 인페인팅(inpainting: 이미지 내부의 빈 공간을 그려주는 기능)을 지원하는 api(edit 기능)가 존재한다. 여기서 힌트를 얻었다. 빈 캔버스를 만들고 여기에 내가 확장하고 싶은 이미지를 좀 작게 넣어서 인페인팅을 시키면 사실상 아웃페인팅처럼 동작하지 않을까?

 

 

왼쪽: 내가 openAI api 서버로 보낸 이미지, 오른쪽: 결과 이미지

 

결론은 정말 그렇게 동작했고 생각보다 어렵지는 않았다는 것이다. 그래서 야매로(?) 만든 아웃페인팅 코드와 사용법을 소개하려고 한다. 참고로 코드는 node.js로 작성했고 윈도우 OS를 사용한다고 가정했다. node.js를 조금만 이용할 줄 알아도 이용할 수 있을 정도로 거의 모든 코드를 작성해놨다.

 

 

<사용해보기>

  1. api 이용료 결제 및 api 키 받기
  2. 코드를 다운 받고 패키지 설치하기.
  3. 튜토리얼
  4. 그림판 3D로 사용할 소스이미지와 마스크 이미지 만들기

1. api 이용료 결제 및 api키 받기

일단 api를 이용해야 하니까 api 요금도 내고 키를 받아야 한다. 아래에 관련 링크를 첨부했다.

왼쪽: Create new secret key로 사용할 키를 받는다, 오른쪽: 결제 수단을 세팅하고 크레딧(요금)을 추가하자. 

* openai api 키 생성 홈페이지

* openai api 요금 청구 홈페이지

 

여기에 들어가서 api요금을 내고, 키도 발급받으면 된다. 참고로 api요금은 최소 5달러 이상부터 결제가 가능하다.

 

2. 코드를 다운받고 패키지 설치하기 

깃허브에서 원하는 방식으로 코드를 내려받는다. 그냥 편하게 zip파일로 받는 방식도 좋다.

내 깃허브에 코드를 올려놓았다. 아래 링크에서 이것을 다운받자.

https://github.com/cuziam/openai_simple_outpainting

 

 

이렇게 파일이 구성되어있다.

파일이 위와 같이 구성되어 있으면 정상이다.

 

다운을 받았으면 이제 패키지를 깔아야 한다. 

패키지들 설치!

한다. 터미널을 키고 해당 파일들이 위치한 폴더에 간다. 그리고 npm install을 하여 패키지들을 설치하자.

.env파일을 만들고 그 안에 위와 같이 openai api key를 넣어주자.

프로젝트 루트로 가서 .env파일을 만들고 이렇게 openai에서 발급받은 키를 넣어주자. 참고로 OPENAI_API_KEY라는 변수명은 앱에서 사용할 변수명이므로 이름을 바꾸면 안된다. 그리고 저장! 

 

 

이제 기본적인 세팅을 끝났다. 자 이게 어떻게 작동하는지 궁금할 것이다.

 

3. 튜토리얼

<원리>

원래는 이런 식으로 쓰라고 만들었다. 왼쪽: 소스(src)이미지, 중간: 마스크(mask) 이미지, 오른쪽: 결과 이미지

앞서 말했듯이 지금 내가 아웃페인팅을 구현한 방식은 사실 인페인팅(edit) api를 이용하는 것이다. 원래는 소스 이미지와 수정할 부분을 담은 이미지(마스크 이미지)를 이용하여 이미지의 내부를 채우는 것을 목적으로 하지만 이걸 약간 비틀 것이다.

 

투명 이미지 내에 내가 아웃페인팅하기 원하는 이미지를 넣고 이것을 그냥 소스이미지와 마스크 이미지로 사용하면 야매로 아웃페인팅을 구현한다.

이것을 비틀어서 위와 같이 소스이미지와 마스크이미지를 제공하면 아웃페인팅이 되는 것이다.

 

 

<파일 설명 및 실행 방법>

 

폴더 별로 각기 다른 이미지들이 담긴다.

 

내 파일들을 설명하면,

  • src폴더: 소스이미지와 마스크이미지
  • rgba폴더: openai서버로 보내기 전 src폴더에 있는 이미지들을 rgba값을 가진 png파일로 변환한 이미지.
  • dest폴더: 최종적으로 처리된 이미지
  • app.js: 실행 프로그램(앱)

 

 

이렇게 4개의 핵심 파일들로 이루어져 있다. 여러분들이 여기서 건드려야할 것은 src폴더와 app.js파일이다.

 

세팅만 잘 됐다면 여러분들은 이제 딱 3개만 신경쓰면 된다.

  1. src폴더에 사용할 소스이미지와 마스크 이미지 넣기
  2. app.js 코드파일의 config 수정
  3. app.js 실행

 

아래의 config에서 변수 4개만 수정하면 된다. 다른 건 제가 구현해놨어효...

소스이미지와 마스크이미지를 만드는 법은 튜토리얼을 마친 뒤 설명하도록 하겠다. App.js파일을 코드 에디터로 열어보면 맨 위에 이런 코드들이 있다. 여기서 나중에 config만 수정하면 된다. config에서도 사실 맨 위에 4개 srcImageName, maskImageName, theNumberOfImages, yourPrompt만 바꾸면 된다. 나머지는 폴더명 설정이라서 굳이 건드리지 않아도 된다. 

 

튜토리얼을 위해 샘플이미지들을 src폴더에 넣어놓고 기본 config을 세팅해놓았다. 추후에 튜토리얼이 끝나면 필요에 따라이미지들을 변경하고 config 값들을 변경하길 바란다.

 

터미널에서 npm run start를 하면 위와 같이 진행된다.

앱은 npm run start를 터미널에 입력해서 실행한다.

y를 입력하면 이미지들을 처리하고 openai api서버로 요청을 보내서 결과물을 다운로드한다. n을 입력하면 앱을 종료한다. 처리된 이미지들은 앞서 말했듯 기본적으로 dest폴더에 다운로드된다.

 

4. 그림판 3D로 소스 이미지와 마스크 이미지 만들고 활용하기

소스 이미지와 마스크 이미지를 만드는 방법은 여러가지지만 나는 윈도우 기본앱인 그림판 3D를 이용했다. 가장 많은 사람들이 활용할 수 있는 방법이라고 생각이 들어 이 방법으로 설명하려고 한다.

그림판 3d의 캔버스에 들어가서 투명한 캔버스를 체크하고, 캔버스의 가로 세로 사이즈를 재설정(1024*1024 추천)한다.

그림판 3d에 들어가서 위의 캔버스 항목에 들어간 뒤 오른쪽에서 투명한 캔버스를 체크하고, 캔버스의 크기를 조절한다. 결과 이미지가 1024*1024크기의 이미지라 그런지,개인적으로 소스이미지와 마스크이미지도 1024*1024크기로 설정하는 게 결과물이 좋다는 느낌이 있었다.

이미지를 크기 조절해서 넣고 저장한다. 잊지마십쇼. src폴더 내에 두 개!

내가 아웃페인팅할 이미지를 드래그앤드롭 한 뒤 크기를 조절한다. 그리고 똑같은 이미지를 src폴더 내에 다른 이름으로 두 개 저장한다. 하나는 소스이미지가 될 것이고 하나는 마스크 이미지가 될 것이다.

이미지들 이름에 따라 config수정 필수

app.js에서 config을 수정한 뒤 앞서 설명한 방법대로 app.js를 실행하면 된다.

 


 

<후기>

나중에 좀 더 유저친화적으로 만들어볼까 합니다. openai api가 클라이언트단에서 직접 연결해서 사용하는 것을 권장하지 않다보니까 좀 더 서버 친화적으로 작성하게 됐는데 프로그래밍을 아예 모르는 분들은 진입장벽이 있을 거라고 느껴지네요. 아무튼 만약에 질문이 있으시다면 덧글로 남겨주세요!

 

<같이 사용하면 좋은 것들>

* waifu2x(웹 이미지 업스케일링 앱): https://waifu2x.udp.jp/index.ko.html
웹에서 간단하게 이미지 업스케일링 할 때 사용. 저는 결과이미지 업스케일링 할 때 가끔 사용했어요.)

 

waifu2x

waifu2x 컨볼루션 신경망(CNN) 시스템을 통한 딥 러닝으로 2차원 이미지의 해상도를 개선합니다. 그림뿐 아니라 사진도 지원합니다. 실제 예제 보기 | GitHub에서 보기 This website uses Google Analytics to help

waifu2x.udp.jp

* translators24(웹 번역 앱): https://www.translators24.com/ 
제가 요즘 토이 프로젝트로 만든 건데
영어 프롬프트를 만들어야 할 때 빠르고 유용해서 실제로 많이 사용하고 있어요.

 

Translators24

 

www.translators24.com