+ Está procurando pelo Pynecone? Este é o repositório certo. Pynecone foi renomeado para Reflex. +
Abra um terminal e execute (Requer Python 3.8+):
pip install reflexInstalar reflex também instala a ferramenta de linha de comando reflex.
Crie um novo projeto para verificar se a instalação foi bem sucedida. (Mude nome_do_meu_app com o nome do seu projeto):
mkdir nome_do_meu_app
cd nome_do_meu_app
reflex initEste comando inicializa um app base no seu novo diretório.
Você pode executar este app em modo desenvolvimento:
reflex runVocê deve conseguir verificar seu app sendo executado em http://localhost:3000.
Agora, você pode modificar o código fonte em nome_do_meu_app/nome_do_meu_app.py. O Reflex apresenta recarregamento rápido para que você possa ver suas mudanças instantâneamente quando você salva o seu código.
Veja o seguinte exemplo: criar uma interface de criação de imagens por meio do DALL-E. Para fins de simplicidade, vamos apenas chamar a API da OpenAI, mas você pode substituir esta solução por qualquer modelo de aprendizado de máquina que preferir, executando localmente.
Aqui está o código completo para criar este projeto. Isso tudo foi feito apenas em um arquivo Python!
import reflex as rx
import openai
openai.api_key = "YOUR_API_KEY"
class State(rx.State):
"""Estado da aplicação."""
prompt = ""
image_url = ""
processing = False
complete = False
def get_image(self):
"""Obtenção da imagem a partir do prompt."""
if self.prompt == "":
return rx.window_alert("Prompt Empty")
self.processing, self.complete = True, False
yield
response = openai.Image.create(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"),
rx.input(placeholder="Enter a prompt", on_blur=State.set_prompt),
rx.button(
"Generate Image",
on_click=State.get_image,
is_loading=State.processing,
width="100%",
),
rx.cond(
State.complete,
rx.image(
src=State.image_url,
height="25em",
width="25em",
)
),
padding="2em",
shadow="lg",
border_radius="lg",
),
width="100%",
height="100vh",
)
# Adição do estado e da página no app.
app = rx.App()
app.add_page(index, title="reflex:DALL·E")Vamos começar com a UI (Interface de Usuário)
def index():
return rx.center(
...
)Esta função index define o frontend do app.
Usamos diferentes componentes, como center, vstack, input e button, para construir o frontend. Componentes podem ser aninhados um no do outro
para criar layouts mais complexos. E você pode usar argumentos de chave-valor para estilizá-los com todo o poder do CSS.
O Reflex vem com 60+ componentes nativos para te ajudar. Estamos adicionando ativamente mais componentes, mas também é fácil criar seus próprios componentes.
O Reflex representa a sua UI como uma função do seu estado.
class State(rx.State):
"""Estado da aplicação."""
prompt = ""
image_url = ""
processing = False
complete = FalseO estado define todas as variáveis (chamadas de vars) que podem ser modificadas por funções no seu app.
Aqui, o estado é composto por um prompt e uma image_url, representando, respectivamente, o texto que descreve a imagem a ser gerada e a url da imagem gerada.
def get_image(self):
"""Obtenção da imagem a partir do prompt."""
if self.prompt == "":
return rx.window_alert("Prompt Empty")
self.processing, self.complete = True, False
yield
response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024")
self.image_url = response["data"][0]["url"]
self.processing, self.complete = False, TrueDentro do estado, são definidas funções chamadas de Handlers de Eventos, que podem mudar as variáveis do estado. Handlers de Eventos são a forma com a qual podemos modificar o estado dentro do Reflex. Eles podem ser chamados como resposta a uma ação do usuário, como o clique de um botão ou a escrita em uma caixa de texto. Estas ações geram eventos que são processados pelos Handlers.
Nosso app DALL-E possui um Handler de Evento chamado get_image, que obtêm a imagem da API da OpenAI. Usar yield no meio de um Handler de Evento causa a atualização da UI do seu app. Caso contrário, a UI seria atualizada no fim da execução de um Handler de Evento.
Finalmente, definimos nosso app.
app = rx.App()Adicionamos uma página na raíz do app, apontando para o componente index. Também adicionamos um título ("DALL-E") que irá aparecer na aba no navegador.
app.add_page(index, title="DALL-E")Você pode criar mais páginas e adicioná-las ao seu app.
📑 Docs | 🗞️ Blog | 📱 Biblioteca de Componentes | 🖼️ Galeria | 🛸 Deployment
O Reflex foi lançado em Dezembro de 2022 com o nome Pynecone.
Em Julho de 2023, estamos no estágio de Beta Público.
- ✅ Alpha Público: Qualquer um pode instalar e usar o Reflex. Podem existir alguns problemas, mas estamos trabalhando ativamente para resolvê-los.
- 🔶 Beta Público: Estável o suficiente para utilizar em projetos pessoais, com menor criticidade.
- Hospedagem Pública Beta: Opcionalmente, implante e hospede os seus apps no Reflex!
- Público: O Reflex está pronto para produção.
O Reflex agora possui novas versões e funcionalidades sendo lançadas toda semana! Lembre-se de marcar o repositório com uma ⭐ estrela e 👀 acompanhe para ficar atualizado sobre o projeto.
Nós somos abertos a contribuições de qualquer tamanho! Abaixo, seguem algumas boas formas de começar a contribuir para a comunidade do Reflex.
- Entre no nosso Discord: Nosso Discord é o melhor lugar para conseguir ajuda no seu projeto Reflex e para discutir como você pode contribuir.
- Discussões no GitHub: Uma boa forma de conversar sobre funcionalidades que você gostaria de ver ou coisas que ainda estão confusas/exigem ajuda.
- Issues no GitHub: Excelente forma de reportar bugs. Além disso, você pode tentar resolver alguma issue existente e enviar um Pull Request.
Estamos ativamente buscando novos contribuidores, não importa o seu nível de habilidade ou experiência.
O Reflex é um software de código aberto, sob a Apache License 2.0.