reflex
v0.6.6.post3
+ Searching for Pynecone? You are in the right repo. Pynecone has been renamed to Reflex. +Inglês | 简体中文 | 繁體中文 | Turquia | हिंदी | English (Brasil) | Italiano | Espanhol | 한국어 | 日本語 | Alemão | Persa (پارسی) | Tiếng Việt
Reflex é uma biblioteca para construir aplicativos web full-stack em Python puro.
Principais recursos:
Consulte nossa página de arquitetura para saber como o Reflex funciona nos bastidores.
Abra um terminal e execute (requer Python 3.9+):
pip install reflex A instalação reflex também instala a ferramenta de linha de comando reflex .
Teste se a instalação foi bem-sucedida criando um novo projeto. (Substitua my_app_name pelo nome do seu projeto):
mkdir my_app_name
cd my_app_name
reflex initEste comando inicializa um aplicativo modelo em seu novo diretório.
Você pode executar este aplicativo em modo de desenvolvimento:
reflex runVocê deverá ver seu aplicativo rodando em http://localhost:3000.
Agora você pode modificar o código-fonte em my_app_name/my_app_name.py . O Reflex possui atualizações rápidas para que você possa ver suas alterações instantaneamente ao salvar seu código.
Vejamos um exemplo: criar uma UI de geração de imagens em torno do DALL·E. Para simplificar, chamamos apenas a API OpenAI, mas você pode substituí-la por um modelo de ML executado localmente.
Aqui está o código completo para criar isso. Tudo isso é feito em um arquivo 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" )
Vamos começar com a IU.
def index ():
return rx . center (
...
) Esta função index define o frontend do aplicativo.
Usamos diferentes componentes, como center , vstack , input e button para construir o frontend. Os componentes podem ser aninhados uns nos outros para criar layouts complexos. E você pode usar argumentos de palavras-chave para estilizá-los com todo o poder do CSS.
O Reflex vem com mais de 60 componentes integrados para ajudá-lo a começar. Estamos adicionando ativamente mais componentes e é fácil criar seus próprios componentes.
O Reflex representa sua IU em função do seu estado.
class State ( rx . State ):
"""The app state."""
prompt = ""
image_url = ""
processing = False
complete = FalseO estado define todas as variáveis (chamadas vars) em um aplicativo que podem ser alteradas e as funções que as alteram.
Aqui o estado é composto por um prompt e image_url . Existem também os processing booleanos e complete para indicar quando desabilitar o botão (durante a geração da imagem) e quando mostrar a imagem resultante.
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 , TrueDentro do estado, definimos funções chamadas manipuladores de eventos que alteram as vars de estado. Os manipuladores de eventos são a forma como podemos modificar o estado no Reflex. Eles podem ser chamados em resposta a ações do usuário, como clicar em um botão ou digitar em uma caixa de texto. Essas ações são chamadas de eventos.
Nosso DALL·E. app tem um manipulador de eventos, get_image , para o qual obtém esta imagem da API OpenAI. Usar yield no meio de um manipulador de eventos fará com que a IU seja atualizada. Caso contrário, a UI será atualizada no final do manipulador de eventos.
Finalmente, definimos nosso aplicativo.
app = rx . App ()Adicionamos uma página da raiz do aplicativo ao componente de índice. Também adicionamos um título que aparecerá na guia de visualização da página/navegador.
app . add_page ( index , title = "DALL-E" )Você pode criar um aplicativo de várias páginas adicionando mais páginas.
? Documentos | ?️ Blog | Biblioteca de Componentes | ?️ Modelos | ? Implantação
Reflex lançado em dezembro de 2022 com o nome Pynecone.
Desde fevereiro de 2024, nosso serviço de hospedagem está em fase alfa! Durante esse período, qualquer pessoa pode implantar seus aplicativos gratuitamente. Consulte nosso roteiro para ver o que está planejado.
Reflex tem novos lançamentos e recursos todas as semanas! Certifique-se de marcar com estrela e ? assista a este repositório para se manter atualizado.
Aceitamos contribuições de qualquer tamanho! Abaixo estão algumas boas maneiras de começar na comunidade Reflex.
Estamos procurando ativamente colaboradores, independentemente do seu nível de habilidade ou experiência. Para contribuir, confira CONTIBUTING.md
Reflex é de código aberto e licenciado sob a Licença Apache 2.0.
