본문 바로가기
REFLEX 튜토리얼

[pynecone] Dall-E 2 이미지 생성 앱 만들기② #UI배치

by 일코 2023. 2. 15.

지난 포스팅에서는

openai.com Dall-E2의 API를 활용하여
이미지를 생성해보았습니다.
(아직 본격적인 파인콘 앱을 만들지는 않았습니다.)

2023.02.15 - [pynecone 튜토리얼] - [pynecone] Dall-E 2 이미지 생성 앱 만들기①

 

[pynecone] Dall-E 2 이미지 생성 앱 만들기①

이번에 밑바닥부터 만들어볼 pynecone 앱은 바로 Dall-E 이미지 생성기입니다. 아시다시피 Pynecone은 React.js라는 자바스크립트 UI 라이브러리를 래핑한 파이썬 패키지인데요. 파이썬 풀스택 웹프레임

martinii.fun

 

이번 포스팅은 본격적으로 코딩을 시작하기 전에..

우리가 진행할 파인콘 프로젝트를 차근차근 알아가봅시다.
입문자를 대상으로 하는 만큼,
가급적 상세하게 천천히 설명드릴 예정이지만
마음이 급한 분들은 아래 링크를 통해
전체 코드와 데모서비스를 먼저 확인해보실 수 있습니다.

전체 소스코드(Pynecone Gallery)

pynecone-examples/dalle at main · pynecone-io/pynecone-examples (github.com)

라이브 앱(Pynecone Gallery)

Pynecone:DALL-E


지난 포스팅 도입부에
프로젝트 파일인 dall_e.py 파일을 생성해두었죠?

import pynecone as pc


class State(pc.State):
    pass


def index():
    return


app = pc.App(state=State)
app.add_page(index)
app.compile()

 

여기에 우리가 생성한 openai의 API키를 먼저 추가해줍시다.
임포트문 포함해서 화살표 표시된 두 줄을 추가하였습니다.

import openai  # <--
import pynecone as pc

openai.api_key = "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"  # <--


class State(pc.State):
    pass


def index():
    return


app = pc.App(state=State)
app.add_page(index, title="Pynecone:DALL-E2")  # <--
app.compile()
하단의 add_page에 타이틀도 소소하게 추가하였습니다.

 

그리고 나서

우리가 만들 예정인 앱을 다시 한 번 살펴봅시다.
몇 종류의 컴포넌트로 구성될지 하나씩 곰곰이 생각해 보시기 바랍니다.

① 앱 시작화면

앱 시작화면

 

② 이미지 생성 후 화면

몇 개 정도 될 거라고 예상하시나요?

입문 튜토리얼이라고 시작해놓고
다 알 거라는 듯이 물어보는 게 너무 짖궂네요ㅜ

 

우선 두 개의 화면을 구성하는 컴포넌트는 아래 8종류예요.

그리고 아직 이 화면엔 보이지는 않지만

조건에 따라 레이아웃을 변경할 수 있는 (if문과 비슷한) pc.cond
이미지 로딩시 원형 프로그레스바를 보여주는 pc.circular_progress도 사용할 예정이에요.

그럼 총 10개의 컴포넌트를 사용하겠네요?

맞아요. 각각의 컴포넌트에 대한 설명은 그때그때 알려드릴게요.
조금씩 만들어가면서 배워야 재미도 있고, 따라올 힘도 생기는 것 같아요ㅎㅎ
그리고 파인콘은 리액트와 비슷해서
조립하는 맛이 일품이에요ㅎ
html 코드 작성하는 것과는 또 다른 느낌일테니
다음 포스팅을 기대해주세요^^

2023.02.16 - [pynecone 튜토리얼] - [pynecone] Dall-E 2 이미지 생성 앱 만들기③

 

[pynecone] Dall-E 2 이미지 생성 앱 만들기③

지난 포스팅에서는 우리 튜토리얼 프로젝트인 Dall-E 웹앱에 들어가는 구성요소, 즉 우리 앱을 구성할 컴포넌트 목록에 대해 알아보았습니다. 2023.02.15 - [pynecone 튜토리얼] - [pynecone] Dall-E 2 이미지

martinii.fun

 

댓글