+ Stai cercando Pynecone? Sei nella repository giusto. Pynecone è stato rinominato in Reflex. +
English | 简体中文 | 繁體中文 | Türkçe | हिंदी | Português (Brasil) | Italiano | 한국어 | 日本語 | Deutsch | Persian (پارسی)
Apri un terminale ed esegui (Richiede Python 3.9+):
pip install reflexInstallando 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 initQuesto comando inizializza un'app template nella tua nuova directory.
Puoi eseguire questa app in modalità sviluppo con:
reflex runDovresti 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.
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.api_key = "TUA_API_KEY"
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.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="Prompt Vuoto", on_blur=State.set_prompt),
rx.button(
"Genera Immagine",
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",
)
# Aggiungi stato e pagina all'app.
app = rx.App()
app.add_page(index, title="reflex:DALL·E")Cominciamo con l'UI.
def index():
return rx.center(
...
)Questo 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. 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.
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 = FalseLo 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 mostrare l'andamento circolare e l'immagine.
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.Image.create(prompt=self.prompt, n=1, size="1024x1024")
self.image_url = response["data"][0]["url"]
self.processing, self.complete = False, TrueDentro 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.
Infine, definiamo la nostra app.
app = rx.App()Possiamo aggiungere 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.
📑 Documentazione | 🗞️ Blog | 📱 Libreria Componenti | 🖼️ Immagini | 🛸 Distribuzione
Reflex è stato lanciato nel dicembre 2022 con il nome Pynecone.
Da luglio 2023, siamo nella fase di Beta Pubblica.
- ✅ Alfa Pubblica: Chiunque può installare e utilizzare Reflex. Potrebbero esserci dei problemi, ma stiamo lavorando per risolverli attivamente.
- 🔶 Beta Pubblica: Abbastanza stabile per casi d'uso non aziendali.
- Beta Hosting Pubblico: Opzionalmente, distribuisci e ospita le tue app su Reflex!
- Pubblico: Reflex è pronto per la produzione.
Reflex ha nuove versioni e funzionalità in arrivo ogni settimana! Assicurati di ⭐ mettere una stella e 👀 osservare questa repository per rimanere aggiornato.
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: 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.
Reflex è open-source e rilasciato sotto la Licenza Apache 2.0.