Skip to content

Latest commit

 

History

History
262 lines (174 loc) · 10.8 KB

README.md

File metadata and controls

262 lines (174 loc) · 10.8 KB
Raw
+ Suchst du nach Pynecone? Dann bist du hier in der richtigen Repository. Pynecone wurde in Reflex umbenannt. +
Reflex Logo Reflex Logo

✨ Performante, anpassbare Web-Apps in purem Python. Bereitstellung in Sekunden. ✨

PyPI version tests versions Documentation Discord

English | 简体中文 | 繁體中文 | Türkçe | हिंदी | Português (Brasil) | Italiano | Español | 한국어 | 日本語 | Deutsch

Reflex

Reflex ist eine Bibliothek, mit der man Full-Stack-Web-Applikationen in purem Python erstellen kann.

Wesentliche Merkmale:

  • Pures Python - Schreibe dein Front- und Backend in Python, es gibt also keinen Grund, JavaScript zu lernen.
  • Volle Flexibilität - Reflex ist einfach zu handhaben, kann aber auch für komplexe Anwendungen skaliert werden.
  • Sofortige Bereitstellung - Nach dem Erstellen kannst du deine App mit einem einzigen Befehl bereitstellen oder auf deinem eigenen Server hosten.

Auf unserer Architektur-Seite erfahren Sie, wie Reflex unter der Haube funktioniert.

⚙️ Installation

Öffne ein Terminal und führe den folgenden Befehl aus (benötigt Python 3.8+):

pip install reflex

🥳 Erstelle deine erste App

Die Installation von reflex installiert auch das reflex-Kommandozeilen-Tool.

Teste, ob die Installation erfolgreich war, indem du ein neues Projekt erstellst. (Ersetze my_app_name durch deinen Projektnamen):

mkdir my_app_name
cd my_app_name
reflex init

Dieser Befehl initialisiert eine Vorlage in deinem neuen Verzeichnis.

Du kannst diese App im Entwicklungsmodus ausführen:

reflex run

Du solltest deine App unter http://localhost:3000 laufen sehen.

Nun kannst du den Quellcode in my_app_name/my_app_name.py ändern. Reflex hat schnelle Aktualisierungen, sodass du deine Änderungen sofort siehst, wenn du deinen Code speicherst.

🫧 Beispiel-App

Lass uns ein Beispiel durchgehen: die Erstellung einer Benutzeroberfläche für die Bildgenerierung mit DALL·E. Zur Vereinfachung rufen wir einfach die OpenAI-API auf, aber du könntest dies auch durch ein lokal ausgeführtes ML-Modell ersetzen.

 

Eine Benutzeroberfläche für DALL·E, die im Prozess der Bildgenerierung gezeigt wird.

 

Hier ist der komplette Code, um dies zu erstellen. Das alles wird in einer Python-Datei gemacht!

import reflex as rx
import openai

openai_client = openai.OpenAI()


class State(rx.State):
    """Der Zustand der App."""

    prompt = ""
    image_url = ""
    processing = False
    complete = False

    def get_image(self):
        """Hole das Bild aus dem 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",
    )

# Füge Zustand und Seite zur App hinzu.
app = rx.App()
app.add_page(index, title="Reflex:DALL-E")

Schauen wir uns das mal genauer an.

Erläuterung der Unterschiede zwischen Backend- und Frontend-Teilen der DALL-E-App.

Reflex-UI

Fangen wir mit der Benutzeroberfläche an.

def index():
    return rx.center(
        ...
    )

Diese index-Funktion 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 du kannst Schlüsselwortargumente verwenden, um sie mit der vollen Kraft von CSS zu stylen.

Reflex wird mit über 60 eingebauten Komponenten geliefert, die dir den Einstieg erleichtern. Wir fügen aktiv weitere Komponenten hinzu, und es ist einfach, eigene Komponenten zu erstellen.

State

Reflex stellt deine Benutzeroberfläche als Funktion deines Zustands dar.

class State(rx.State):
    """Der Zustand der App."""
    prompt = ""
    image_url = ""
    processing = False
    complete = False

Der Zustand definiert alle Variablen (genannt Vars) in einer App, die sich ändern können, und die Funktionen, die sie ändern.

Hier besteht der Zustand aus einem prompt und einer image_url. Es gibt auch die Booleans processing und complete, um anzuzeigen, wann der Button deaktiviert werden soll (während der Bildgenerierung) und wann das resultierende Bild angezeigt werden soll.

Event-Handler

def get_image(self):
    """Hole das Bild aus dem 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

Innerhalb des Zustands definieren wir Funktionen, die als Event-Handler bezeichnet werden und die Zustand-Variablen ändern. Event-Handler sind die Art und Weise, wie wir den Zustand in Reflex ändern können. Sie können als Reaktion auf Benutzeraktionen aufgerufen werden, z.B. beim Klicken auf eine Schaltfläche oder bei der Eingabe in ein Textfeld. Diese Aktionen werden als Ereignisse bezeichnet.

Unsere DALL-E.-App hat einen Event-Handler, get_image, der dieses Bild von der OpenAI-API abruft. Die Verwendung von yield in der Mitte eines Event-Handlers führt zu einer Aktualisierung der Benutzeroberfläche. Andernfalls wird die Benutzeroberfläche am Ende des Ereignishandlers aktualisiert.

Routing

Schließlich definieren wir unsere App.

app = rx.App()

Wir fügen der Indexkomponente eine Seite aus dem Stammverzeichnis der Anwendung hinzu. Wir fügen auch einen Titel hinzu, der in der Seitenvorschau/Browser-Registerkarte angezeigt wird.

app.add_page(index, title="DALL-E")

Du kannst eine mehrseitige App erstellen, indem du weitere Seiten hinzufügst.

📑 Ressourcen

📑 Docs   |   🗞️ Blog   |   📱 Komponentenbibliothek   |   🖼️ Galerie   |   🛸 Bereitstellung  

✅ Status

Reflex wurde im Dezember 2022 unter dem Namen Pynecone gestartet.

Ab Februar 2024 befindet sich unser Hosting-Service in der Alpha-Phase! In dieser Zeit kann jeder seine Apps kostenlos bereitstellen. Siehe unsere Roadmap, um zu sehen, was geplant ist.

Reflex hat wöchentliche Veröffentlichungen und neue Features! Stelle sicher, dass du dieses Repository mit einem ⭐ Stern markierst und 👀 beobachtest, um auf dem Laufenden zu bleiben.

Beitragende

Wir begrüßen Beiträge jeder Größe! Hier sind einige gute Möglichkeiten, um in der Reflex-Community zu starten.

  • Tritt unserem Discord bei: Unser Discord ist der beste Ort, um Hilfe für dein Reflex-Projekt zu bekommen und zu besprechen, wie du beitragen kannst.
  • GitHub-Diskussionen: Eine großartige Möglichkeit, über Funktionen zu sprechen, die du hinzugefügt haben möchtest oder Dinge, die verwirrend sind/geklärt werden müssen.
  • GitHub-Issues: Issues sind eine ausgezeichnete Möglichkeit, Bugs zu melden. Außerdem kannst du versuchen, ein bestehendes Problem zu lösen und eine PR einzureichen.

Wir suchen aktiv nach Mitwirkenden, unabhängig von deinem Erfahrungslevel oder deiner Erfahrung. Um beizutragen, sieh dir CONTRIBUTING.md an.

Vielen Dank an unsere Mitwirkenden:

Lizenz

Reflex ist Open-Source und lizenziert unter der Apache License 2.0.