Gradio: Ein Leitfaden zur Erstellung dynamischer Apps

Einführung

Gradio ist ein Open-Source-Python-Paket, das es ermöglicht, in kürzester Zeit ein Demo oder eine Webanwendung für Ihr maschinelles Lernmodell, Ihre API oder jede beliebige Python-Funktion zu erstellen. Mit Gradio können Sie in wenigen Sekunden einen Link zu Ihrem Demo oder Ihrer Webanwendung teilen, indem Sie die integrierten Freigabefunktionen von Gradio nutzen. Keine JavaScript-, CSS- oder Webhosting-Erfahrung erforderlich!

Installation

Voraussetzung: Gradio benötigt Python 3.8 oder höher.

Wir empfehlen, Gradio mit pip zu installieren, das standardmäßig in Python enthalten ist. Führen Sie diesen Befehl in Ihrem Terminal oder der Eingabeaufforderung aus:

```
pip install gradio
```

Tipp: Es ist am besten, Gradio in einer virtuellen Umgebung zu installieren. Detaillierte Installationsanweisungen für alle gängigen Betriebssysteme finden Sie auf der Gradio-Website.

Erstellung Ihres ersten Demos

Sie können Gradio in Ihrem bevorzugten Code-Editor, Jupyter-Notebook, Google Colab oder überall dort ausführen, wo Sie Python schreiben. Hier ist ein einfaches Beispiel:

```
import gradio as gr

def greet(name, intensity):
return "Hallo, " + name + "!" * int(intensity)

demo = gr.Interface(
fn=greet,
inputs=["text", "slider"],
outputs=["text"],
)

demo.launch()
```

Tipp: Wir kürzen den importierten Namen von gradio zu gr ab, um die Lesbarkeit des Codes zu verbessern. Dies ist eine weit verbreitete Konvention, die Sie befolgen sollten, damit jeder, der mit Ihrem Code arbeitet, ihn leicht verstehen kann.

Wenn Sie Ihren Code geschrieben haben, führen Sie ihn aus. Wenn Sie den Python-Code in einer Datei namens app.py gespeichert haben, führen Sie `python app.py` im Terminal aus. Das Demo wird in einem Browser unter http://localhost:7860 geöffnet, wenn es von einer Datei ausgeführt wird. Wenn Sie innerhalb eines Notebooks arbeiten, wird das Demo eingebettet im Notebook angezeigt.

Tipp: Wenn Sie lokal entwickeln, können Sie Ihre Gradio-App im Hot-Reload-Modus ausführen, der die Gradio-App automatisch neu lädt, wenn Sie Änderungen an der Datei vornehmen. Geben Sie dazu einfach `gradio` vor dem Namen der Datei anstelle von `python` ein. In dem obigen Beispiel würden Sie `gradio app.py` in Ihrem Terminal eingeben. Erfahren Sie mehr über Hot Reloading im Hot Reloading Guide.

Verständnis der Interface-Klasse

Um Ihr erstes Demo zu erstellen, haben Sie eine Instanz der `gr.Interface`-Klasse erstellt. Die `Interface`-Klasse ist so konzipiert, dass sie Demos für maschinelle Lernmodelle erstellt, die eine oder mehrere Eingaben akzeptieren und eine oder mehrere Ausgaben zurückgeben.

Die `Interface`-Klasse hat drei Kernargumente:
- fn: die Funktion, um die eine Benutzeroberfläche (UI) erstellt werden soll
- inputs: die Gradio-Komponente(n) für die Eingabe. Die Anzahl der Komponenten sollte mit der Anzahl der Argumente in Ihrer Funktion übereinstimmen.
- outputs: die Gradio-Komponente(n) für die Ausgabe. Die Anzahl der Komponenten sollte mit der Anzahl der Rückgabewerte Ihrer Funktion übereinstimmen.

Das fn-Argument ist sehr flexibel - Sie können jede Python-Funktion übergeben, die Sie mit einer UI umgeben möchten. In dem obigen Beispiel haben wir eine relativ einfache Funktion gesehen, aber die Funktion könnte alles sein, von einem Musikgenerator über einen Steuerrechner bis hin zur Vorhersagefunktion eines vortrainierten maschinellen Lernmodells.

Die input- und output-Argumente nehmen eine oder mehrere Gradio-Komponenten. Gradio umfasst mehr als 30 eingebaute Komponenten (wie `gr.Textbox()`, `gr.Image()` und `gr.HTML()`), die für maschinelle Lernanwendungen entwickelt wurden.

Tipp: Für die inputs- und outputs-Argumente können Sie den Namen dieser Komponenten als Zeichenfolge ("textbox") oder eine Instanz der Klasse (gr.Textbox()) übergeben. Wenn Ihre Funktion mehr als ein Argument akzeptiert, wie oben der Fall, übergeben Sie eine Liste von Eingabekomponenten an inputs, wobei jede Eingabekomponente einem der Argumente der Funktion in der Reihenfolge entspricht. Das Gleiche gilt, wenn Ihre Funktion mehr als einen Wert zurückgibt: Übergeben Sie einfach eine Liste von Komponenten an outputs. Diese Flexibilität macht die `Interface`-Klasse zu einer sehr leistungsstarken Möglichkeit, Demos zu erstellen.

Teilen Ihres Demos

Was nützt ein schönes Demo, wenn Sie es nicht teilen können? Gradio ermöglicht es Ihnen, ein maschinelles Lern-Demo einfach zu teilen, ohne sich um das Hosting auf einem Webserver kümmern zu müssen. Setzen Sie einfach `share=True` in `launch()`, und eine öffentlich zugängliche URL wird für Ihr Demo erstellt. Hier ist ein Beispiel:

```
import gradio as gr

def greet(name):
return "Hallo " + name + "!"

demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")
demo.launch(share=True) # Teilen Sie Ihr Demo mit nur einem zusätzlichen Parameter 🚀
```

Wenn Sie diesen Code ausführen, wird eine öffentliche URL für Ihr Demo in wenigen Sekunden generiert, etwa so:
👉 https://a23dsf231adb.gradio.live

Jetzt kann jeder auf der Welt Ihr Gradio-Demo von seinem Browser aus ausprobieren, während das maschinelle Lernmodell und alle Berechnungen weiterhin lokal auf Ihrem Computer ausgeführt werden.

Um mehr über das Teilen Ihres Demos zu erfahren, lesen Sie unseren dedizierten Leitfaden zum Teilen Ihrer Gradio-Anwendung.

Ein Überblick über Gradio

Bisher haben wir die `Interface`-Klasse besprochen, die eine hochrangige Klasse ist, die es ermöglicht, Demos schnell mit Gradio zu erstellen. Aber was macht Gradio sonst noch?

Chatbots mit `gr.ChatInterface`

Gradio umfasst eine weitere hochrangige Klasse, `gr.ChatInterface`, die speziell für die Erstellung von Chatbot-UIs entwickelt wurde. Ähnlich wie bei der `Interface`-Klasse geben Sie eine Funktion an, und Gradio erstellt eine voll funktionsfähige Chatbot-Oberfläche. Wenn Sie daran interessiert sind, einen Chatbot zu erstellen, können Sie direkt zu unserem dedizierten Leitfaden zu `gr.ChatInterface` springen.

Benutzerdefinierte Demos mit `gr.Blocks`

Gradio bietet auch einen niedrigeren Ansatz für die Gestaltung von Web-Apps mit flexibleren Layouts und Datenflüssen mit der `gr.Blocks`-Klasse. `Blocks` ermöglicht es Ihnen, Dinge wie die Positionierung von Komponenten auf der Seite zu steuern, komplexe Datenflüsse zu verarbeiten (z. B. können Ausgaben als Eingaben für andere Funktionen dienen) und Eigenschaften/Sichtbarkeit von Komponenten basierend auf Benutzerinteraktionen zu aktualisieren - alles in Python.

Sie können sehr benutzerdefinierte und komplexe Anwendungen mit `gr.Blocks()` erstellen. Zum Beispiel ist die beliebte Bildgenerierung Automatic1111 Web UI mit Gradio Blocks gebaut. Wir tauchen tiefer in die `gr.Blocks`-Serie zum Aufbau von Blocks ein.

Das Gradio-Ökosystem aus Python- und JavaScript-Bibliotheken

Das ist der Kern der Gradio-Python-Bibliothek, aber Gradio ist tatsächlich so viel mehr! Es ist ein ganzes Ökosystem von Python- und JavaScript-Bibliotheken, die es Ihnen ermöglichen, maschinelle Lernanwendungen zu erstellen oder sie programmatisch in Python oder JavaScript abzufragen. Hier sind weitere verwandte Teile des Gradio-Ökosystems:
- Gradio Python Client (gradio_client): Abfrage jeder Gradio-App programmatisch in Python.
- Gradio JavaScript Client (@gradio/client): Abfrage jeder Gradio-App programmatisch in JavaScript.
- Gradio-Lite (@gradio/lite): Schreiben Sie Gradio-Apps in Python, die vollständig im Browser laufen (kein Server erforderlich!), Dank Pyodide.
- Hugging Face Spaces: Der beliebteste Ort, um Gradio-Anwendungen kostenlos zu hosten!

Was kommt als Nächstes?

Lernen Sie Gradio weiterhin sequentiell mit den Gradio-Anleitungen, die Erklärungen sowie Beispielcode und eingebettete interaktive Demos enthalten. Als Nächstes: Schlüsselfunktionen von Gradio-Demos.

Oder, wenn Sie bereits die Grundlagen kennen und nach etwas Bestimmtem suchen, können Sie die technischeren API-Dokumentationen durchsuchen.

Schlüsselfunktionen

- Eigene Komponenten erstellen und teilen
- Interaktive Demos und Webanwendungen mit Leichtigkeit erstellen
- Flexibles Layout und Datenflusssteuerung
- Einfache Möglichkeit, Demos mit der Welt zu teilen

Fazit

Gradio verändert die Art und Weise, wie interaktive Demos und Webanwendungen für maschinelle Lernmodelle und Datenwissenschafts-Workflows erstellt werden. Die Einfachheit, Flexibilität und erweiterten Funktionen machen es zu einem unverzichtbaren Werkzeug für Datenpraktiker, um ihre Modelle mühelos zu präsentieren, bereitzustellen und zu debuggen. Ob Sie ein professioneller Datenwissenschaftler oder ein Hobbyist sind, Gradio ermöglicht es Ihnen, fesselnde Demos zu erstellen, die es den Benutzern ermöglichen, Ihre Modelle in Echtzeit zu erleben.

Probieren Sie Gradio aus, erkunden Sie seine Funktionen und erstellen Sie wirkungsvolle Demos, die Benutzer ansprechen und informieren.

Bibliographie

https://gradio.app/
https://www.gradio.app/guides/quickstart
https://www.gradio.app/docs
https://www.gradio.app/guides/theming-guide
https://github.com/gradio-app
https://www.gradio.app/guides/custom-CSS-and-JS
https://www.gradio.app/3.50.2/guides/quickstart
https://medium.com/@pouyahallaj/gradio-building-dynamic-ml-web-apps-ddeb8cbf2e70