+ Searching for Pynecone? You are in the right repo. Pynecone has been renamed to Reflex. +
영어 | 简体中文 | 중국어 | 터키어 | 힌두교 | 포르투갈어(브라질) | 이탈리아노 | 스페인어 | 영어 | 일본어 | 독일어 | 페르시아어(پارسی) | 티엥 비엣
Reflex는 순수 Python으로 전체 스택 웹 앱을 구축하기 위한 라이브러리입니다.
주요 기능:
Reflex가 내부적으로 어떻게 작동하는지 알아보려면 아키텍처 페이지를 참조하세요.
터미널을 열고 실행합니다(Python 3.9+ 필요):
pip install reflex
reflex
설치하면 reflex
명령줄 도구도 설치됩니다.
새 프로젝트를 생성하여 설치가 성공했는지 테스트합니다. ( my_app_name
프로젝트 이름으로 바꾸세요):
mkdir my_app_name
cd my_app_name
reflex init
이 명령은 새 디렉터리에서 템플릿 앱을 초기화합니다.
개발 모드에서 이 앱을 실행할 수 있습니다.
reflex run
http://localhost:3000에서 앱이 실행되는 것을 볼 수 있습니다.
이제 my_app_name/my_app_name.py
에서 소스 코드를 수정할 수 있습니다. Reflex에는 빠른 새로 고침 기능이 있어 코드를 저장하면 변경 사항을 즉시 확인할 수 있습니다.
DALL·E를 중심으로 이미지 생성 UI를 생성하는 예를 살펴보겠습니다. 단순화를 위해 OpenAI API만 호출하지만 이를 로컬에서 실행되는 ML 모델로 대체할 수도 있습니다.
이를 생성하는 전체 코드는 다음과 같습니다. 이 모든 작업은 하나의 Python 파일에서 수행됩니다!
import reflex as rx
import openai
openai_client = openai . OpenAI ()
class State ( rx . State ):
"""The app state."""
prompt = ""
image_url = ""
processing = False
complete = False
def get_image ( self ):
"""Get the image from the prompt."""
if self . prompt == "" :
return rx . window_alert ( "Prompt Empty" )
self . processing , self . complete = True , False
yield
response = openai_client . images . generate (
prompt = self . prompt , n = 1 , size = "1024x1024"
)
self . image_url = response . data [ 0 ]. url
self . processing , self . complete = False , True
def index ():
return rx . center (
rx . vstack (
rx . heading ( "DALL-E" , font_size = "1.5em" ),
rx . input (
placeholder = "Enter a prompt.." ,
on_blur = State . set_prompt ,
width = "25em" ,
),
rx . button (
"Generate Image" ,
on_click = State . get_image ,
width = "25em" ,
loading = State . processing
),
rx . cond (
State . complete ,
rx . image ( src = State . image_url , width = "20em" ),
),
align = "center" ,
),
width = "100%" ,
height = "100vh" ,
)
# Add state and page to the app.
app = rx . App ()
app . add_page ( index , title = "Reflex:DALL-E" )
UI부터 시작해 보겠습니다.
def index ():
return rx . center (
...
)
이 index
함수는 앱의 프런트엔드를 정의합니다.
center
, vstack
, input
및 button
과 같은 다양한 구성 요소를 사용하여 프런트엔드를 구축합니다. 구성 요소를 서로 중첩하여 복잡한 레이아웃을 만들 수 있습니다. 그리고 키워드 args를 사용하여 CSS의 모든 기능을 활용하여 스타일을 지정할 수 있습니다.
Reflex에는 시작하는 데 도움이 되는 60개 이상의 구성 요소가 내장되어 있습니다. 우리는 더 많은 구성 요소를 적극적으로 추가하고 있으며 자신만의 구성 요소를 쉽게 만들 수 있습니다.
Reflex는 UI를 상태의 함수로 나타냅니다.
class State ( rx . State ):
"""The app state."""
prompt = ""
image_url = ""
processing = False
complete = False
상태는 앱에서 변경할 수 있는 모든 변수(vars라고 함)와 이를 변경하는 함수를 정의합니다.
여기서 상태는 prompt
와 image_url
로 구성됩니다. 버튼을 비활성화할 시기(이미지 생성 중)와 결과 이미지를 표시할 시기를 나타내는 부울 processing
및 complete
도 있습니다.
def get_image ( self ):
"""Get the image from the prompt."""
if self . prompt == "" :
return rx . window_alert ( "Prompt Empty" )
self . processing , self . complete = True , False
yield
response = openai_client . images . generate (
prompt = self . prompt , n = 1 , size = "1024x1024"
)
self . image_url = response . data [ 0 ]. url
self . processing , self . complete = False , True
상태 내에서 상태 변수를 변경하는 이벤트 핸들러라는 함수를 정의합니다. 이벤트 핸들러는 Reflex에서 상태를 수정할 수 있는 방법입니다. 버튼을 클릭하거나 텍스트 상자에 입력하는 등의 사용자 작업에 대한 응답으로 호출될 수 있습니다. 이러한 동작을 이벤트라고 합니다.
우리 DALL·E. 앱에는 OpenAI API에서 이 이미지를 가져오는 이벤트 핸들러 get_image
있습니다. 이벤트 핸들러 중간에 yield
사용하면 UI가 업데이트됩니다. 그렇지 않으면 이벤트 핸들러가 끝날 때 UI가 업데이트됩니다.
마지막으로 앱을 정의합니다.
app = rx . App ()
앱 루트의 페이지를 인덱스 구성 요소에 추가합니다. 또한 페이지 미리보기/브라우저 탭에 표시될 제목을 추가합니다.
app . add_page ( index , title = "DALL-E" )
더 많은 페이지를 추가하여 다중 페이지 앱을 만들 수 있습니다.
? 문서 | ?️ 블로그 | 구성 요소 라이브러리 | ?️ 템플릿 | ? 전개
Reflex는 2022년 12월 Pynecone이라는 이름으로 출시되었습니다.
2024년 2월 현재 호스팅 서비스가 알파 버전입니다! 이 기간 동안 누구나 무료로 앱을 배포할 수 있습니다. 계획된 내용을 보려면 로드맵을 참조하세요.
Reflex에는 매주 새로운 릴리스와 기능이 출시됩니다! 별표를 표시하고 ? 최신 상태를 유지하려면 이 저장소를 시청하세요.
우리는 어떤 규모의 기여도 환영합니다! 다음은 Reflex 커뮤니티를 시작하는 몇 가지 좋은 방법입니다.
우리는 귀하의 기술 수준이나 경험에 관계없이 적극적으로 기여자를 찾고 있습니다. 기여하려면 CONTIBUTING.md를 확인하세요.
Reflex는 오픈 소스이며 Apache License 2.0에 따라 라이센스가 부여됩니다.