|
|
@@ -1,22 +1,36 @@
|
|
|
<div align="center">
|
|
|
-<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
|
|
|
-<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
|
|
|
+<img src="/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
|
|
|
+<img src="/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
### **✨ Web apps customizáveis, performáticos, em Python puro. Faça deploy em segundos. ✨**
|
|
|
|
|
|
[](https://badge.fury.io/py/reflex)
|
|
|
-
|
|
|
|
|
|
[](https://reflex.dev/docs/getting-started/introduction)
|
|
|
+[](https://pepy.tech/projects/reflex)
|
|
|
[](https://discord.gg/T5WSbC2YtQ)
|
|
|
|
|
|
</div>
|
|
|
|
|
|
---
|
|
|
|
|
|
-## [English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md)
|
|
|
+[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+# Reflex
|
|
|
+
|
|
|
+Reflex é uma biblioteca para construir aplicações web full-stack em Python puro.
|
|
|
+
|
|
|
+Principais características:
|
|
|
+
|
|
|
+- **Python Puro** - Escreva o frontend e o backend da sua aplicação inteiramente em Python, sem necessidade de aprender Javascript.
|
|
|
+- **Flexibilidade Total** - O Reflex é fácil de começar a usar, mas também pode escalar para aplicações complexas.
|
|
|
+- **Deploy Instantâneo** - Após a construção, faça o deploy da sua aplicação com um [único comando](https://reflex.dev/docs/hosting/deploy-quick-start/) ou hospede-a em seu próprio servidor.
|
|
|
+
|
|
|
+Veja nossa [página de arquitetura](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) para aprender como o Reflex funciona internamente.
|
|
|
|
|
|
## ⚙️ Instalação
|
|
|
|
|
|
@@ -48,16 +62,16 @@ reflex run
|
|
|
|
|
|
Você 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.
|
|
|
+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 instantaneamente quando você salva o seu código.
|
|
|
|
|
|
## 🫧 Exemplo de App
|
|
|
|
|
|
-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.
|
|
|
+Veja o seguinte exemplo: criar uma interface de criação de imagens por meio do [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Para fins de simplicidade, vamos apenas chamar a [API da OpenAI](https://platform.openai.com/docs/api-reference/authentication), mas você pode substituir esta solução por um modelo de ML executado localmente.
|
|
|
|
|
|
|
|
|
|
|
|
<div align="center">
|
|
|
-<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/dalle.gif" alt="Um encapsulador frontend para o DALL-E, mostrado no processo de criação de uma imagem." width="550" />
|
|
|
+<img src="/docs/images/dalle.gif" alt="Um encapsulador frontend para o DALL-E, mostrado no processo de criação de uma imagem." width="550" />
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@@ -68,10 +82,12 @@ Aqui está o código completo para criar este projeto. Isso tudo foi feito apena
|
|
|
import reflex as rx
|
|
|
import openai
|
|
|
|
|
|
-openai.api_key = "YOUR_API_KEY"
|
|
|
+openai_client = openai.OpenAI()
|
|
|
+
|
|
|
|
|
|
class State(rx.State):
|
|
|
"""Estado da aplicação."""
|
|
|
+
|
|
|
prompt = ""
|
|
|
image_url = ""
|
|
|
processing = False
|
|
|
@@ -84,33 +100,33 @@ class State(rx.State):
|
|
|
|
|
|
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"]
|
|
|
+ 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"),
|
|
|
- rx.input(placeholder="Enter a prompt", on_blur=State.set_prompt),
|
|
|
+ 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,
|
|
|
- is_loading=State.processing,
|
|
|
- width="100%",
|
|
|
+ width="25em",
|
|
|
+ loading=State.processing
|
|
|
),
|
|
|
rx.cond(
|
|
|
State.complete,
|
|
|
- rx.image(
|
|
|
- src=State.image_url,
|
|
|
- height="25em",
|
|
|
- width="25em",
|
|
|
- )
|
|
|
+ rx.image(src=State.image_url, width="20em"),
|
|
|
),
|
|
|
- padding="2em",
|
|
|
- shadow="lg",
|
|
|
- border_radius="lg",
|
|
|
+ align="center",
|
|
|
),
|
|
|
width="100%",
|
|
|
height="100vh",
|
|
|
@@ -118,11 +134,15 @@ def index():
|
|
|
|
|
|
# Adição do estado e da página no app.
|
|
|
app = rx.App()
|
|
|
-app.add_page(index, title="reflex:DALL·E")
|
|
|
+app.add_page(index, title="Reflex:DALL-E")
|
|
|
```
|
|
|
|
|
|
## Vamos por partes.
|
|
|
|
|
|
+<div align="center">
|
|
|
+<img src="/docs/images/dalle_colored_code_example.png" alt="Explicando as diferenças entre as partes de backend e frontend do app DALL-E." width="900" />
|
|
|
+</div>
|
|
|
+
|
|
|
### **Reflex UI**
|
|
|
|
|
|
Vamos começar com a UI (Interface de Usuário)
|
|
|
@@ -139,7 +159,7 @@ 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](https://reflex.dev/docs/library) para te ajudar. Estamos adicionando ativamente mais componentes, mas também é fácil [criar seus próprios componentes](https://reflex.dev/docs/wrapping-react/overview/).
|
|
|
+O Reflex vem com [60+ componentes nativos](https://reflex.dev/docs/library) para te ajudar a começar. Estamos adicionando ativamente mais componentes, e é fácil [criar seus próprios componentes](https://reflex.dev/docs/wrapping-react/overview/).
|
|
|
|
|
|
### **Estado**
|
|
|
|
|
|
@@ -152,11 +172,12 @@ class State(rx.State):
|
|
|
image_url = ""
|
|
|
processing = False
|
|
|
complete = False
|
|
|
+
|
|
|
```
|
|
|
|
|
|
-O estado define todas as variáveis (chamadas de vars) que podem ser modificadas por funções no seu app.
|
|
|
+O estado define todas as variáveis (chamadas de vars) em um app que podem mudar e as funções que as alteram.
|
|
|
|
|
|
-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.
|
|
|
+Aqui, o estado é composto por um `prompt` e uma `image_url`. Há também os booleanos `processing` e `complete` para indicar quando desabilitar o botão (durante a geração da imagem) e quando mostrar a imagem resultante.
|
|
|
|
|
|
### **Handlers de Eventos**
|
|
|
|
|
|
@@ -168,12 +189,14 @@ def get_image(self):
|
|
|
|
|
|
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"]
|
|
|
+ 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
|
|
|
```
|
|
|
|
|
|
-Dentro 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.
|
|
|
+Dentro 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 são chamadas de eventos.
|
|
|
|
|
|
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.
|
|
|
|
|
|
@@ -185,19 +208,19 @@ 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.
|
|
|
+Adicionamos uma página na raíz do app, apontando para o componente index. Também adicionamos um título que irá aparecer na visualização da página/aba do navegador.
|
|
|
|
|
|
```python
|
|
|
app.add_page(index, title="DALL-E")
|
|
|
```
|
|
|
|
|
|
-Você pode criar mais páginas e adicioná-las ao seu app.
|
|
|
+Você pode criar um app com múltiplas páginas adicionando mais páginas.
|
|
|
|
|
|
## 📑 Recursos
|
|
|
|
|
|
<div align="center">
|
|
|
|
|
|
-📑 [Docs](https://reflex.dev/docs/getting-started/introduction) | 🗞️ [Blog](https://reflex.dev/blog) | 📱 [Biblioteca de Componentes](https://reflex.dev/docs/library) | 🖼️ [Galeria](https://reflex.dev/docs/gallery) | 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy)
|
|
|
+📑 [Docs](https://reflex.dev/docs/getting-started/introduction) | 🗞️ [Blog](https://reflex.dev/blog) | 📱 [Biblioteca de Componentes](https://reflex.dev/docs/library) | 🖼️ [Templates](https://reflex.dev/templates/) | 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)
|
|
|
|
|
|
</div>
|
|
|
|
|
|
@@ -205,14 +228,9 @@ Você pode criar mais páginas e adicioná-las ao seu app.
|
|
|
|
|
|
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**.
|
|
|
-
|
|
|
-- :white_check_mark: **Alpha Público**: Qualquer um pode instalar e usar o Reflex. Podem existir alguns problemas, mas estamos trabalhando ativamente para resolvê-los.
|
|
|
-- :large_orange_diamond: **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.
|
|
|
+A partir de 2025, o [Reflex Cloud](https://cloud.reflex.dev) foi lançado para fornecer a melhor experiência de hospedagem para apps Reflex. Continuaremos a desenvolvê-lo e implementar mais recursos.
|
|
|
|
|
|
-O Reflex agora possui novas versões e funcionalidades sendo lançadas toda semana! Lembre-se de marcar o repositório com uma :star: estrela e :eyes: acompanhe para ficar atualizado sobre o projeto.
|
|
|
+O Reflex tem novas versões e recursos chegando toda semana! Certifique-se de marcar com :star: estrela e :eyes: observar este repositório para se manter atualizado.
|
|
|
|
|
|
## Contribuições
|
|
|
|
|
|
@@ -220,10 +238,16 @@ Nós somos abertos a contribuições de qualquer tamanho! Abaixo, seguem algumas
|
|
|
|
|
|
- **Entre no nosso Discord**: Nosso [Discord](https://discord.gg/T5WSbC2YtQ) é 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.
|
|
|
+- **Issues no GitHub**: [Issues](https://github.com/reflex-dev/reflex/issues) são uma excelente forma de reportar bugs. Além disso, você pode tentar resolver alguma issue existente e enviar um PR.
|
|
|
+
|
|
|
+Estamos ativamente buscando novos contribuidores, não importa o seu nível de habilidade ou experiência. Para contribuir, confira [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md).
|
|
|
+
|
|
|
+## Todo Agradecimento aos Nossos Contribuidores:
|
|
|
|
|
|
-Estamos ativamente buscando novos contribuidores, não importa o seu nível de habilidade ou experiência.
|
|
|
+<a href="https://github.com/reflex-dev/reflex/graphs/contributors">
|
|
|
+ <img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
|
|
|
+</a>
|
|
|
|
|
|
## Licença
|
|
|
|
|
|
-O Reflex é um software de código aberto, sob a [Apache License 2.0](LICENSE).
|
|
|
+O Reflex é de código aberto e licenciado sob a [Apache License 2.0](/LICENSE).
|
Khaleel Al-Adhami