Gradio: Die Revolution der benutzerdefinierten Komponenten in der KI-Entwicklung

‍

Einführung

In der sich schnell entwickelnden Welt der künstlichen Intelligenz (KI) und des maschinellen Lernens (ML) suchen Entwickler ständig nach effizienteren Wegen, um ihre Modelle zu präsentieren und zu teilen. Hier kommt Gradio ins Spiel. Gradio ist ein Open-Source-Python-Paket, das es ermöglicht, Demos oder Webanwendungen für ML-Modelle, APIs oder beliebige Python-Funktionen schnell zu erstellen und zu teilen. Die neueste Version von Gradio, bekannt als Gradio 4.0, bringt aufregende neue Funktionen mit sich, darunter die Möglichkeit, benutzerdefinierte Komponenten zu erstellen und zu verwenden.

Warum Gradio?

Gradio bietet eine einfache und intuitive Möglichkeit, interaktive Demos für ML-Modelle zu erstellen. Es erfordert keine Kenntnisse in JavaScript, CSS oder Webhosting. Mit nur wenigen Zeilen Python-Code können Entwickler ihre Modelle in einer benutzerfreundlichen Oberfläche präsentieren und teilen. Ein besonders nützliches Feature ist die Möglichkeit, einen öffentlichen Link zu erstellen, über den jeder auf der Welt die Demo ausprobieren kann.

Die Einführung benutzerdefinierter Komponenten

Mit der Veröffentlichung von Gradio 4.0 haben Entwickler nun die Möglichkeit, ihre eigenen benutzerdefinierten Komponenten zu erstellen. Diese Funktion erweitert die Flexibilität und Anpassungsfähigkeit von Gradio erheblich. Benutzerdefinierte Komponenten können als Python-Pakete veröffentlicht werden, sodass andere Benutzer sie ebenfalls verwenden können. Entwickler können alle bestehenden Funktionen von Gradio, wie gr.Blocks, gr.Interface, API-Nutzung und Themen, in ihre benutzerdefinierten Komponenten integrieren.

Der Workflow für benutzerdefinierte Komponenten

Der Workflow für die Erstellung benutzerdefinierter Komponenten in Gradio besteht aus vier Schritten: erstellen, entwickeln, bauen und veröffentlichen.

1. Erstellen

Der erste Schritt besteht darin, ein neues Template zu erstellen. Dies kann durch den Befehl gradio cc create MyComponent --template SimpleTextbox erfolgen. Dabei wird ein Verzeichnis mit dem Namen der Komponente erstellt, das die erforderliche Struktur für die Entwicklung enthält.

2. Entwickeln

Nach dem Erstellen der Komponente kann ein Entwicklungsserver gestartet werden. Dieser ermöglicht das Hot-Reloading, sodass Änderungen an der Komponente in Echtzeit angezeigt werden. Der Befehl hierfür lautet gradio cc dev.

3. Bauen

Sobald die Komponente zufriedenstellend entwickelt wurde, kann sie gebaut werden, um sie außerhalb des Entwicklungsservers zu verwenden. Der Befehl gradio cc build erstellt eine Python-Paketdatei, die installiert werden kann.

4. Veröffentlichen

Der letzte Schritt besteht darin, die Komponente zu veröffentlichen. Mit dem Befehl gradio cc publish kann die Komponente auf PyPi hochgeladen und eine Demo auf Hugging Face Spaces veröffentlicht werden.

Erstellung interaktiver Demos

Ein zentraler Bestandteil von Gradio ist die Klasse gr.Interface. Diese Klasse ermöglicht es, Demos für ML-Modelle zu erstellen, die ein oder mehrere Eingaben akzeptieren und ein oder mehrere Ausgaben zurückgeben. Die Hauptargumente der Klasse sind:

   -

fn:

Die Funktion, die eine Benutzeroberfläche (UI) umgibt.    -

inputs:

Die Gradio-Komponente(n) für die Eingabe.    -

outputs:

Die Gradio-Komponente(n) für die Ausgabe.

Ein Beispiel für eine einfache Gradio-Anwendung ist:

import gradio as gr

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

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

demo.launch()

Mit diesem Code wird eine Demo erstellt, die eine Begrüßung basierend auf dem Namen und der Intensität zurückgibt.

Teilen Ihrer Demo

Gradio ermöglicht es, eine erstellte Demo leicht zu teilen, ohne sich um das Webhosting kümmern zu müssen. Durch das Setzen des Parameters share=True in der launch()-Methode wird eine öffentlich zugängliche URL für die Demo erstellt. Dies ermöglicht es jedem, die Demo auszuprobieren, während das ML-Modell und alle Berechnungen lokal auf dem Computer des Entwicklers ausgeführt werden.

Ein Beispiel für das Teilen einer Demo ist:

import gradio as gr

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

demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")
 
demo.launch(share=True)  # Share your demo with just 1 extra parameter 🚀

Nach dem Ausführen dieses Codes wird eine öffentliche URL für die Demo generiert.

Gradio für komplexe Anwendungen

Gradio bietet neben der gr.Interface-Klasse auch die gr.Blocks-Klasse, die eine flexiblere Gestaltung von Webanwendungen ermöglicht. Mit gr.Blocks können Entwickler komplexe Datenflüsse und Layouts erstellen, die alle in Python geschrieben sind. Ein Beispiel für eine komplexe Anwendung ist die beliebte Bildgenerierungs-Web-UI von Automatic1111, die mit Gradio Blocks erstellt wurde.

Das Gradio-Ökosystem

Gradio ist nicht nur eine Python-Bibliothek, sondern ein ganzes Ökosystem von Python- und JavaScript-Bibliotheken, die es ermöglichen, ML-Anwendungen zu erstellen oder sie programmgesteuert in Python oder JavaScript abzufragen. Zu den anderen Teilen des Gradio-Ökosystems gehören:

   -

Gradio Python Client (gradio_client):

Programmgesteuerte Abfragen von Gradio-Apps in Python.    -

Gradio JavaScript Client (@gradio/client):

Programmgesteuerte Abfragen von Gradio-Apps in JavaScript.    -

Gradio-Lite (@gradio/lite):

Schreiben von Gradio-Apps in Python, die vollständig im Browser ausgeführt werden (keine Server erforderlich), dank Pyodide.    -

Hugging Face Spaces:

Der beliebteste Ort zum Hosten von Gradio-Anwendungen – kostenlos!

Fazit

Gradio bietet Entwicklern eine leistungsstarke und flexible Plattform zur Erstellung und Freigabe von ML-Demos. Mit der Einführung benutzerdefinierter Komponenten in Gradio 4.0 wird die Anpassungsfähigkeit und Vielseitigkeit von Gradio erheblich erweitert. Ob einfache Demos oder komplexe Webanwendungen, Gradio bietet die Werkzeuge, um ML-Modelle effizient und benutzerfreundlich zu präsentieren.

Bibliographie

- https://www.gradio.app/guides/custom-components-in-five-minutes
- https://www.gradio.app/guides/quickstart
- https://gradio.app/
- https://github.com/gradio-app/gradio/wiki/Guide-to-Custom-Components-(Beta)/b2739ebf89f538b97d85ab0da98c44272e41ac80
- https://www.gradio.app/docs
- https://www.gradio.app/guides/documenting-custom-components
- https://www.gradio.app/guides/configuration