reflex
v0.6.6.post3
+ Searching for Pynecone? You are in the right repo. Pynecone has been renamed to Reflex. +Englisch | 简体中文 | 繁體中文 | Türkei | हिंदी | Português (Brasilien) | Italienisch | Spanisch | 한국어 | 日本語 | Deutsch | Persisch (پارسی) | Tiếng Việt
Reflex ist eine Bibliothek zum Erstellen von Full-Stack-Webanwendungen in reinem Python.
Hauptmerkmale:
Auf unserer Architekturseite erfahren Sie, wie Reflex unter der Haube funktioniert.
Öffnen Sie ein Terminal und führen Sie es aus (erfordert Python 3.9+):
pip install reflex Durch die Installation reflex wird auch das reflex Befehlszeilentool installiert.
Testen Sie, ob die Installation erfolgreich war, indem Sie ein neues Projekt erstellen. (Ersetzen Sie my_app_name durch Ihren Projektnamen):
mkdir my_app_name
cd my_app_name
reflex initDieser Befehl initialisiert eine Vorlagen-App in Ihrem neuen Verzeichnis.
Sie können diese App im Entwicklungsmodus ausführen:
reflex runIhre App sollte unter http://localhost:3000 ausgeführt werden.
Jetzt können Sie den Quellcode in my_app_name/my_app_name.py ändern. Reflex verfügt über schnelle Aktualisierungen, sodass Sie Ihre Änderungen sofort sehen können, wenn Sie Ihren Code speichern.
Sehen wir uns ein Beispiel an: Erstellen einer Benutzeroberfläche zur Bildgenerierung rund um DALL·E. Der Einfachheit halber nennen wir einfach die OpenAI-API, Sie können diese jedoch durch ein lokal ausgeführtes ML-Modell ersetzen.
Hier ist der vollständige Code, um dies zu erstellen. Dies geschieht alles in einer Python-Datei!
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" )
Beginnen wir mit der Benutzeroberfläche.
def index ():
return rx . center (
...
) Diese index definiert das Frontend der App.
Wir verwenden verschiedene Komponenten wie center , vstack , input und button , um das Frontend zu erstellen. Komponenten können ineinander verschachtelt werden, um komplexe Layouts zu erstellen. Und Sie können Schlüsselwortargumente verwenden, um sie mit der vollen Leistung von CSS zu formatieren.
Reflex verfügt über mehr als 60 integrierte Komponenten, die Ihnen den Einstieg erleichtern. Wir fügen aktiv weitere Komponenten hinzu und es ist einfach, eigene Komponenten zu erstellen.
Reflex stellt Ihre Benutzeroberfläche als Funktion Ihres Zustands dar.
class State ( rx . State ):
"""The app state."""
prompt = ""
image_url = ""
processing = False
complete = FalseDer Status definiert alle Variablen (Variablen genannt) in einer App, die sich ändern können, sowie die Funktionen, die sie ändern.
Hier besteht der Status aus einer prompt und image_url . Es gibt auch die booleschen Werte processing und complete , um anzugeben, wann die Schaltfläche deaktiviert werden soll (während der Bildgenerierung) und wann das resultierende Bild angezeigt werden soll.
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 , TrueInnerhalb des Status definieren wir Funktionen, sogenannte Event-Handler, die die Statusvariablen ändern. Mithilfe von Ereignishandlern können wir den Status in Reflex ändern. Sie können als Reaktion auf Benutzeraktionen aufgerufen werden, z. B. das Klicken auf eine Schaltfläche oder das Eingeben in ein Textfeld. Diese Aktionen werden Ereignisse genannt.
Unser DALL·E. Die App verfügt über einen Ereignishandler, get_image , der dieses Bild von der OpenAI-API abruft. Die Verwendung yield mitten in einem Event-Handler führt zu einer Aktualisierung der Benutzeroberfläche. Andernfalls wird die Benutzeroberfläche am Ende des Ereignishandlers aktualisiert.
Abschließend definieren wir unsere App.
app = rx . App ()Wir fügen der Indexkomponente eine Seite vom Stammverzeichnis der App hinzu. Wir fügen außerdem einen Titel hinzu, der in der Seitenvorschau/im Browser-Tab angezeigt wird.
app . add_page ( index , title = "DALL-E" )Sie können eine mehrseitige App erstellen, indem Sie weitere Seiten hinzufügen.
? Dokumente | ?️ Blog | Komponentenbibliothek | ?️ Vorlagen | ? Einsatz
Reflex wurde im Dezember 2022 unter dem Namen Pynecone eingeführt.
Seit Februar 2024 befindet sich unser Hosting-Service in der Alpha-Phase! Während dieser Zeit kann jeder seine Apps kostenlos bereitstellen. Sehen Sie sich unsere Roadmap an, um zu sehen, was geplant ist.
Reflex bietet jede Woche neue Veröffentlichungen und Funktionen! Stellen Sie sicher, dass Sie ein Sternchen und ? Sehen Sie sich dieses Repository an, um auf dem Laufenden zu bleiben.
Wir freuen uns über Beiträge jeder Größe! Nachfolgend finden Sie einige gute Möglichkeiten für den Einstieg in die Reflex-Community.
Wir sind aktiv auf der Suche nach Mitwirkenden, unabhängig von Ihrem Können oder Ihrer Erfahrung. Um einen Beitrag zu leisten, schauen Sie sich CONTIBUTING.md an
Reflex ist Open Source und unter der Apache-Lizenz 2.0 lizenziert.
