Khaleel Al-Adhami
f7122fc31d
Update translated docs (#5208)
|
1 주 전 | |
|---|---|---|
| .. | ||
| README.md | 1 주 전 | |
README.md
### **✨ App web performanti e personalizzabili in puro Python. Distribuisci in pochi secondi. ✨** [](https://badge.fury.io/py/reflex)  [](https://reflex.dev/docs/getting-started/introduction)
[](https://pepy.tech/projects/reflex)
[](https://discord.gg/T5WSbC2YtQ)
English | 简体中文 | 繁體中文 | Türkçe | हिंदी | Português (Brasil) | Italiano | Español | 한국어 | 日本語 | Deutsch | Persian (پارسی) | Tiếng Việt
Reflex
Reflex è una libreria per sviluppare applicazioni web full-stack in Python puro.
Caratteristiche principali:
- Python Puro - Scrivi il frontend e il backend della tua app interamente in Python, senza bisogno di imparare Javascript.
- Flessibilità Totale - Reflex è facile da iniziare, ma può anche gestire app complesse.
- Distribuzione Istantanea - Dopo lo sviluppo, distribuisci la tua app con un singolo comando o ospitala sul tuo server.
Consulta la nostra pagina di architettura per scoprire come funziona Reflex sotto il cofano.
⚙️ Installazione
Apri un terminale ed esegui (Richiede Python 3.10+):
pip install reflex
🥳 Crea la tua prima app
Installando reflex si installa anche lo strumento da riga di comando reflex.
Verifica che l'installazione sia stata eseguita correttamente creando un nuovo progetto. (Sostituisci nome_app con il nome del tuo progetto):
mkdir nome_app
cd nome_app
reflex init
Questo comando inizializza un'app template nella tua nuova directory.
Puoi eseguire questa app in modalità sviluppo con:
reflex run
Dovresti vedere la tua app in esecuzione su http://localhost:3000.
Ora puoi modificare il codice sorgente in nome_app/nome_app.py. Reflex offre aggiornamenti rapidi, così puoi vedere le tue modifiche istantaneamente quando salvi il tuo codice.
🫧 Esempio App
Esaminiamo un esempio: creare un'interfaccia utente per la generazione di immagini attorno a DALL·E. Per semplicità, chiamiamo semplicemente l'API OpenAI, ma potresti sostituirla con un modello ML eseguito localmente.
Ecco il codice completo per crearlo. Tutto fatto in un unico file Python!
import reflex as rx
import openai
openai_client = openai.OpenAI()
class State(rx.State):
"""Lo stato dell'app."""
prompt = ""
image_url = ""
processing = False
complete = False
def get_image(self):
"""Ottieni l'immagine dal prompt."""
if self.prompt == "":
return rx.window_alert("Prompt Vuoto")
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="Inserisci un prompt..",
on_blur=State.set_prompt,
width="25em",
),
rx.button(
"Genera Immagine",
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",
)
# Aggiungi stato e pagina all'app.
app = rx.App()
app.add_page(index, title="Reflex:DALL-E")
Analizziamolo.
Reflex UI
Cominciamo con l'UI.
def index():
return rx.center(
...
)
Questa funzione index definisce il frontend dell'app.
Utilizziamo diversi componenti come center, vstack, input, e button per costruire il frontend. I componenti possono essere annidati gli uni negli altri per creare layout complessi. E puoi utilizzare argomenti chiave per stilizzarli con tutta la potenza di CSS.
Reflex offre più di 60 componenti integrati per aiutarti a iniziare. Stiamo attivamente aggiungendo più componenti ed è facile creare i tuoi componenti.
Stato (State)
Reflex rappresenta la tua UI come una funzione del tuo stato.
class State(rx.State):
"""Lo stato dell'app."""
prompt = ""
image_url = ""
processing = False
complete = False
Lo stato definisce tutte le variabili (chiamate vars) in un'app che possono cambiare e le funzioni che le cambiano.
Qui lo stato è composto da un prompt e image_url. Ci sono anche i booleani processing e complete per indicare quando disabilitare il pulsante (durante la generazione dell'immagine) e quando mostrare l'immagine risultante.
Gestori di Eventi (Event Handlers)
def get_image(self):
"""Ottieni l'immagine dal prompt."""
if self.prompt == "":
return rx.window_alert("Prompt Vuoto")
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
Dentro lo stato, definiamo funzioni chiamate gestori di eventi che cambiano le vars dello stato. I gestori di eventi sono il modo in cui possiamo modificare lo stato in Reflex. Possono essere chiamati in risposta alle azioni dell'utente, come fare clic su un pulsante o digitare in una casella di testo. Queste azioni vengono chiamate eventi.
La nostra app DALL·E ha un gestore di eventi, get_image con cui ottiene questa immagine dall'API OpenAI. Utilizzando yield nel mezzo di un gestore di eventi farà sì che l'UI venga aggiornata. Altrimenti, l'UI verrà aggiornata alla fine del gestore di eventi.
Instradamento (Routing)
Infine, definiamo la nostra app.
app = rx.App()
Aggiungiamo una pagina dalla radice dell'app al componente dell'indice. Aggiungiamo anche un titolo che apparirà nell'anteprima della pagina/scheda del browser.
app.add_page(index, title="DALL-E")
Puoi creare un'app multi-pagina aggiungendo altre pagine.
📑 Risorse
✅ Stato
Reflex è stato lanciato nel dicembre 2022 con il nome Pynecone.
A partire dal 2025, Reflex Cloud è stato lanciato per fornire la migliore esperienza di hosting per le app Reflex. Continueremo a svilupparlo e implementare più funzionalità.
Reflex ha nuove versioni e funzionalità in arrivo ogni settimana! Assicurati di :star: mettere una stella e :eyes: osservare questa repository per rimanere aggiornato.
Contribuire
Diamo il benvenuto a contributi di qualsiasi dimensione! Di seguito sono alcuni modi per iniziare nella comunità Reflex.
- Unisciti al nostro Discord: Il nostro Discord è posto migliore per ottenere aiuto sul tuo progetto Reflex e per discutere come puoi contribuire.
- Discussioni su GitHub: Un ottimo modo per parlare delle funzionalità che desideri aggiungere o di cose che creano confusione o necessitano chiarimenti.
- GitHub Issues: Le Issues sono un ottimo modo per segnalare bug. Inoltre, puoi provare a risolvere un problema esistente e inviare un PR.
Stiamo attivamente cercando collaboratori, indipendentemente dal tuo livello di abilità o esperienza. Per contribuire, consulta CONTRIBUTING.md
Un Grazie a Tutti i Nostri Contributori:
Licenza
Reflex è open-source e rilasciato sotto la Licenza Apache 2.0.