Benutzeroberflächen für KI-Anwendungen mit Gradio in Python bauen

Die Nützlichkeit heutiger KI-Modelle schrumpft drastisch ohne zugängliche Benutzeroberflächen. Mit Gradio, einer Open-Source-Web-UI-Bibliothek für Python, schließt du die Lücke zwischen LLMs und nicht-technischen Endnutzern. So baust du schnell Prototypen für deine KI-Projekte und stellst sie unkompliziert einer größeren Zielgruppe bereit.

Dieses Tutorial richtet sich an Machine-Learning-Engineers ohne Webentwicklungserfahrung. Es behandelt die Gradio-Grundlagen und -Konzepte, das Erstellen von Interfaces für unterschiedliche KI-Modelltypen, erweiterte Features für UX und Interaktivität sowie Best Practices für Deployment und Sharing.

Los geht’s.

Erste Schritte mit Gradio

Installation

Wir starten mit dem Anlegen einer virtuellen Umgebung (idealerweise Conda):

$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial

Anschließend installierst du Gradio und seine Abhängigkeiten mit PIP:

$ pip install gradio ipykernel

Wir haben auch das Paket ipykernel installiert, damit sich Gradio-Interfaces direkt in Jupyter-Notebooks anzeigen lassen. Dafür musst du die erstellte virtuelle Umgebung als Kernel zu Jupyter Lab hinzufügen. Mit diesem Befehl klappt’s:

$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab  # Start the lab

Damit kannst du ein Notebook mit einem Kernel erstellen, in dem Gradio installiert ist. Zur Kontrolle importierst du es unter dem Standardalias und gibst die Version aus:

import gradio as gr
print(gr.__version__)
4.37.1

Grundkonzepte und Terminologie

Wir steigen mit einem „Hello World“-Beispiel in die wichtigsten Konzepte und Begriffe von Gradio ein:

def greet(name):
   return f"Hello, {name}!"
demo = gr.Interface(
   fn=greet,
   inputs=['text'],
   outputs="text",
)
demo.launch()

Wenn du den obigen Code in einer Zelle ausführst, erscheint ein kleines interaktives Interface, das eine persönliche Begrüßung zurückgibt:

Gradio dreht sich um ein paar Kernelemente:

1. Interface: Die zentrale Klasse zum Erstellen von UIs.
2. Components: Ein- und Ausgabeelemente wie Textfelder, Bilder oder Audio. Aktuell gibt es über 30 eingebaute Komponenten.
3. Functions: Python-Funktionen, die die Eingaben verarbeiten und Ergebnisse für die Ausgabekomponenten zurückgeben.
4. Launch: Die Methode, um deine Gradio-App zu starten.

Oben haben wir eine Funktion greet erstellt, die Text entgegennimmt und Text zurückgibt. Daher sind die Ein- und Ausgabekomponenten in der Klasse Interface als text angegeben.

Zum Schluss rufen wir die Methode launch auf, die einen lokalen Server startet. Möchtest du die UI öffentlich zugänglich machen, setze den Parameter share auf True. Dadurch wird ein SSH-Tunnel aufgebaut und die Gradio-App auf einer öffentlich teilbaren Seite bereitgestellt:

demo.launch(share=True)
Running on public URL: https://d638ed5f2ce0044296.gradio.live
This share link expires in 72 hours. For free permanent hosting and GPU upgrades, run gradio deploy from Terminal to deploy to Spaces (https://huggingface.co/spaces)

Gradio-Komponenten

Beim Bauen von Gradio-Apps verbringst du die meiste Zeit damit, mit verschiedenen Komponenten zu experimentieren und sie sinnvoll auf der Seite anzuordnen. Schauen wir uns an, was dir zur Verfügung steht.

Eingabe- und Ausgabekomponenten

Gradio bietet eine große Auswahl an Komponenten für interaktive Interfaces. Grundsätzlich lassen sie sich in Eingaben und Ausgaben einteilen.

Eingabekomponenten liefern Daten an den zugrunde liegenden Prozessor (beliebige Python-Funktionen). Häufige Eingaben sind:

• Textbox
• Image
• Audio
• Slider
• Dropdown

Hier ist ein Dummy-Interface, das einige der oben genannten Komponenten nutzt:

def process_inputs(text, image, audio, number, option):
   # Process inputs and return results
   return f"Processed: {text}, {number}, {option}"
demo = gr.Interface(
   fn=process_inputs,
   inputs=[
       gr.Textbox(label="Enter text"),
       gr.Image(label="Upload image"),
       gr.Audio(label="Upload audio"),  # Uncomment this line to add audio input
       gr.Slider(0, 100, label="Choose a number"),
       gr.Dropdown(["Streamlit", "Taipy", "Gradio"], label="Select a UI library"),
   ],
   outputs="text",
)
demo.launch()

In diesem Beispiel erwartet die Funktion process_inputs fünf Parameter. Entsprechend erstellen wir fünf Eingabekomponenten und übergeben sie an inputs. Die Anzahl der Eingaben sollte zu den erforderlichen Funktionsparametern passen, ist aber kein striktes Muss. Um Fehler und Warnungen zu vermeiden, setze für Parameter ohne UI-Eingabe sinnvolle Default-Werte.

Beachte, dass wir hier die Klasse Textbox statt eines einfachen Strings text wie im ersten Beispiel nutzen. Empfohlen ist immer die Verwendung der dedizierten Klassen, um Ein- und Ausgaben besser anpassen zu können. So besitzen alle Komponenten z. B. das nützliche Attribut label, während Slider und Dropdown Parameter für Wertebereiche und Optionen bieten.

Viele Eingabekomponenten lassen sich auch zur Ausgabe verwenden. Häufige Szenarien sind:

• Label: Zum Anzeigen von Text oder Klassifikationsergebnissen
• Image: Für verarbeitete oder generierte Bilder
• Audio: Für verarbeitete oder generierte Audios
• Plot: Zum Anzeigen von Diagrammen und Grafiken

Wie bei Eingaben muss die Anzahl der Ausgabekomponenten der Anzahl der von der Verarbeitungsfunktion zurückgegebenen Werte entsprechen.

Komponenten optisch anpassen

Gradio ermöglicht es dir, das Erscheinungsbild deiner Komponenten nach Bedarf anzupassen. Hier ein Beispiel mit individualisierten Textboxen:

demo = gr.Interface(
   fn=lambda x: int(x) ** 7,
   inputs=gr.Textbox(
       lines=5,
       placeholder="Enter any number...",
       label="Custom textbox",
       info="This is a customized textbox component to raise any number to the power of 7.",
   ),
   outputs=gr.Textbox(label="And the number is...", show_copy_button=True),
)
demo.launch()

In diesem Beispiel haben wir die Textbox-Komponenten angepasst, indem wir die Zeilenanzahl, einen Platzhalter- und Infotext definiert und für die Ausgabe einen Kopierbutton aktiviert haben.

Probiere verschiedene Komponenten und ihre Eigenschaften aus, um Interfaces zu bauen, die optimal zu den Anforderungen deiner KI-Anwendung passen. Welche Eigenschaften sich ändern lassen, erfährst du in der Dokumentation der jeweiligen Komponente oder direkt in Jupyter Lab mit dem ?-Operator nach dem Klassennamen:

Interfaces für LLMs bauen

Setzen wir alles zusammen und erstellen zwei praxisnahe, text- und bildbasierte Interfaces, die von LLMs angetrieben werden.

Zunächst bauen wir einen Übersetzer von Englisch nach Türkisch, Spanisch oder Chinesisch:

import openai  # pip install openai
def translate_text(api_key, text, target_language):
  
   openai.api_key = api_key  # Set openai API key
  
   language_map = {
       "Turkish": "Turkish",
       "Spanish": "Spanish",
       "Chinese": "Chinese (Simplified)",
   }
   prompt = f"Translate the following English text to {language_map[target_language]}:\n\nEnglish: {text}\n\n{target_language} translation:"
   try:
       response = openai.chat.completions.create(
           model="gpt-4",
           messages=[
               {"role": "system", "content": "You are a professional translator."},
               {"role": "user", "content": prompt},
           ],
       )
       translation = response.choices[0].message.content.strip()
       return translation
   except Exception as e:
       return f"Error: {str(e)}"

Zuerst definieren wir die Funktion translate_text. Darin setzen wir den OpenAI-API-Schlüssel und legen eine Sprachzuordnung an. Dann konstruieren wir den Prompt für die Übersetzung und senden ihn in einem try-except-Block an den Endpunkt ChatCompletion mitsamt System-Prompt. Am Ende geben wir die erste Antwort zurück.

Jetzt bauen wir das Interface:

iface = gr.Interface(
   fn=translate_text,
   inputs=[
       gr.Textbox(
           placeholder="Enter your OpenAI API key",
           type="password",
           label="OpenAI API Key",
       ),
       gr.Textbox(
           lines=4,
           placeholder="Enter English text to translate...",
           label="English Text",
       ),
       gr.Dropdown(choices=["Turkish", "Spanish", "Chinese"], label="Target Language"),
   ],
   outputs=gr.Textbox(label="Translation", show_copy_button=True),
   title="English to Turkish/Spanish/Chinese Translator",
   description="Translate English text to Turkish, Spanish, or Chinese using OpenAI's GPT-4 model. Enter your OpenAI API key, the text you want to translate, and select the target language.",
)
iface.launch(share=True)

Der Code ist ähnlich simpel wie in den vorherigen Interfaces, führt aber ein paar neue Eigenschaften ein:

• Mit dem Argument type der Textbox wird das Klartextfeld zu einem Passwortfeld, das die Eingabe ausblendet.
• Die Argumente title und description der Interface-Klasse fügen oben mittig eine H1-Überschrift und einen Untertitel hinzu.

So sieht das Ergebnis aus:

Du fragst dich vielleicht, warum wir den API-Schlüssel der Nutzer abfragen statt selbst einen bereitzustellen. Der Grund liegt in der Art, wie Gradio UIs deployed.

Wenn wir unseren API-Schlüssel als Umgebungsvariable setzen (üblich in der Praxis), funktioniert die öffentlich teilbare Version nicht, da sie keinen Zugriff auf unsere Variablen hat. Im Deployment-Abschnitt zeigen wir, wie du das mit einem Deployment auf HuggingFace Spaces löst.

Als Nächstes bauen wir ein UI zur Bildgenerierung:

def generate_surrealist_art(api_key, prompt):
   surrealist_prompt = f"Create a surrealist artwork based on the following concept: {prompt}. The artwork should be dreamlike, with unexpected juxtapositions and a sense of the uncanny."
   client = OpenAI(api_key=api_key)
   response = client.images.generate(
       model="dall-e-3",
       prompt=surrealist_prompt,
       size="1024x1024",
   )
   image_url = response.data[0].url
   return image_url

Wir erstellen die Funktion generate_surrealist_art, die eine Anfrage an dall-e-3 schickt und mit einem surrealistischen Prompt die Bild-URL zurückgibt. Diese Funktion übergeben wir wieder an eine Interface-Klasse:

iface = gr.Interface(
   fn=generate_surrealist_art,
   inputs=[
       gr.Textbox(
           placeholder="Enter your OpenAI API key",
           type="password",
           label="OpenAI API Key",
       ),
       gr.Textbox(
           lines=2,
           placeholder="Describe your surrealist concept...",
           label="Concept Description",
       ),
   ],
   outputs=gr.Image(value="str"),
   title="Surrealist Artwork Generator",
   description="Generate surrealist artwork based on your prompts using DALL-E. Enter your OpenAI API key and describe your concept.",
)
iface.launch(share=True)

Wir definieren zwei Eingaben für den API-Schlüssel und das Konzept, das im surrealistischen Bild eingefangen werden soll. Die Ausgabe übernimmt eine Image-Komponente. Setzt du ihr Argument value auf str, kann die Komponente Bilder aus URLs laden und anzeigen – genau was wir brauchen.

Und so sieht das Ergebnis aus:

Interfaces für klassische ML-Modelle bauen

Jetzt bauen wir ein Interface für ein klassisches tabellarisches Regressionsmodell. Wir verwenden den Diamonds-Datensatz aus Seaborn.

Lege zunächst ein neues Arbeitsverzeichnis an und darin ein Skript namens app.py. Füge dann den Code aus diesem GitHub Gist ein, der die Daten lädt, sie mit einer Scikit-learn-Pipeline verarbeitet und ein RandomForestRegression-Modell trainiert.

Als Nächstes erstellen wir eine Verarbeitungsfunktion, die genauso viele Eingaben annimmt wie der Diamonds-Datensatz Features hat:

# Create the Gradio interface
def predict_price(carat, cut, color, clarity, depth, table, x, y, z):
  
   input_data = pd.DataFrame(
       {
           "carat": [carat],
           "cut": [cut],
           "color": [color],
           "clarity": [clarity],
           "depth": [depth],
           "table": [table],
           "x": [x],
           "y": [y],
           "z": [z],
       }
   )
  
   prediction = model.predict(input_data)[0]
   return f"Predicted Price: ${prediction:.2f}"

Die Funktion wandelt die Eingaben in ein DataFrame um und übergibt es an die Methode .predict() der trainierten Pipeline. Am Ende gibt sie einen String mit dem vorhergesagten Preis zurück.

Nun muss die Interface-Klasse zur Funktionssignatur passen: neun Eingabekomponenten für die Features und eine Ausgabe für den vorhergesagten Preis:

iface = gr.Interface(
   fn=predict_price,
   inputs=[
       gr.Slider(
           minimum=diamonds["carat"].min(),
           maximum=diamonds["carat"].max(),
           label="Carat",
       ),
       gr.Dropdown(["Fair", "Good", "Very Good", "Premium", "Ideal"], label="Cut"),
       gr.Dropdown(["D", "E", "F", "G", "H", "I", "J"], label="Color"),
       gr.Dropdown(
           ["I1", "SI2", "SI1", "VS2", "VS1", "VVS2", "VVS1", "IF"], label="Clarity"
       ),
       gr.Slider(
           minimum=diamonds["depth"].min(),
           maximum=diamonds["depth"].max(),
           label="Depth",
       ),
       gr.Slider(
           minimum=diamonds["table"].min(),
           maximum=diamonds["table"].max(),
           label="Table",
       ),
       gr.Slider(minimum=diamonds["x"].min(), maximum=diamonds["x"].max(), label="X"),
       gr.Slider(minimum=diamonds["y"].min(), maximum=diamonds["y"].max(), label="Y"),
       gr.Slider(minimum=diamonds["z"].min(), maximum=diamonds["z"].max(), label="Z"),
   ],
   outputs="text",
   title="Diamond Price Predictor",
   description="Enter the characteristics of a diamond to predict its price.",
)
iface.launch(share=True)

In der Klasse erstellen wir drei Dropdowns für die kategorialen Features. Die Optionen enthalten die jeweiligen Ausprägungen. Außerdem definieren wir sechs Slider für numerische Features. Die Wertebereiche ergeben sich aus den Minimal- und Maximalwerten der Features.

Jetzt musst du nur noch das Skript ausführen, um die App zu starten und zu deployen:

$ python app.py

So sieht das Ergebnis aus:

Best Practices und Optimierungstipps findest du im folgenden Abschnitt.

Gradio-Apps deployen

Wir haben bereits gesehen, wie leicht sich Gradio-Apps mit einem einzigen Argument deployen lassen. Nachteil: Die Demos laufen nach 72 Stunden ab. Empfohlen ist deshalb das Deployment über HuggingFace Spaces. HuggingFace hat Gradio 2021 übernommen, die Integration ist daher nahtlos.

Für dieses Tutorial oder zukünftige Gradio-Apps: Erstelle ein kostenloses Konto auf huggingface.co und gehe zu Settings > Tokens, um ein Zugriffstoken zu generieren:

Das Token wird nur einmal angezeigt. Speichere es deshalb sicher ab.

Mit diesem Token kannst du beliebig viele Gradio-Apps mit dauerhaftem Hosting auf Spaces deployen. Als Beispiel deployen wir das Modell zur Vorhersage von Diamantpreisen aus dem vorherigen Abschnitt – überraschend einfach.

Wechsle dazu in das Verzeichnis mit dem UI-Skript und rufe im Terminal gradio deploy auf:

Das Terminal führt dich Schritt für Schritt durch die Umwandlung deines Skripts in eine funktionsfähige HuggingFace Space. Es fragt unter anderem nach:

• Dem generierten Zugriffstoken
• Titel der Space: wird Teil der URL nach dem Deployment
• Dem Namen des Skripts mit Gradio-UI-Code (Standard: app.py)
• Der Hardware-Ausstattung der Space; leer lassen für nur CPU (kostenlos)
• Etwaigen Umgebungsvariablen (hier speicherst du API-Keys und Secrets sicher)
• Abhängigkeiten — einzeln eingeben und mit ENTER bestätigen

Anschließend erhältst du einen Link zur deployed Space. So sieht das aus:

Ein weiterer Vorteil dieses Deployments: Gradio konvertiert die Demo automatisch in eine funktionierende REST-API. Die Zugriffs- und Abfragehinweise findest du immer unten auf der Seite:

So erhältst du in einem Rutsch sowohl dauerhaftes UI-Hosting für nicht-technische Nutzer als auch eine REST-API für Kolleginnen, Kollegen und Entwickler:innen.

Weitere Optionen zum Deployen und Teilen, etwa zum Einbetten in Webseiten oder mit Google-Authentifizierung, findest du im Abschnitt „Sharing Your App“ der Gradio-Dokumentation.

Gradio Best Practices und Tipps

Wenn du Benutzeroberflächen mit Gradio entwickelst, verbessern Best Practices die User Experience und die Wartbarkeit erheblich. Hier die wichtigsten Empfehlungen:

1. Skripte für Struktur und Wartbarkeit nutzen

Organisiere Gradio-Anwendungen in Python-Skripten für besseres Versionieren, Zusammenarbeit und Deployment.

2. Platzaufteilung für Komponenten optimieren

Nutze passende Größen und Layout-Helfer (z. B. gr.Column(), gr.Row()), um ein ausgewogenes, responsives Interface zu gewährleisten.

3. Umfassend informieren

Setze die Attribute „info“ und „label“ ein, um klare Anweisungen und Kontext für jede Komponente zu bieten.

4. Viele Features effizient handhaben

Bei Modellen mit vielen Features nutze Dateiuploads (CSV, JSON) für Batch-Vorhersagen und ein aufgeräumtes Interface.

5. Umgebungsvariablen richtig managen

Verwende python-dotenv in der lokalen Entwicklung und setze Variablen für das Deployment in Hugging Face Spaces.

6. Fehlerbehandlung und Validierung einbauen

Validiere Eingaben, gib klare Fehlermeldungen aus und nutze try-except-Blöcke für robuste Fehlerbehandlung.

7. Performance optimieren

Implementiere Caching, Lazy Loading für große Modelle und setze gr.LoadingStatus() für lang laufende Tasks ein.

8. Barrierefreiheit mitdenken

Sorge für hohen Kontrast, Alt-Texte für Bilder und Tastaturnavigation für alle interaktiven Elemente.

9. Progressive Offenlegung nutzen

Organisiere komplexe Interfaces mit Akkordeons oder Tabs und blende erweiterte Optionen bei Bedarf ein.

10. Regelmäßig aktualisieren und pflegen

Halte Abhängigkeiten aktuell, beobachte Bugs und verbessere kontinuierlich basierend auf Nutzerfeedback.

11. HuggingFace-Ressourcen nutzen

Nutze Tools und Ressourcen von HuggingFace für eine nahtlose Integration mit Gradio, inkl. Modell-Repositories und Datensätzen.

12. Große Modelle auf dem HuggingFace Hub hosten

Lade große tabellarische Modelle in den HuggingFace Hub hoch und lade sie direkt im Gradio-Skript. Das verbessert die Performance und spart lokalen Speicher.

13. HuggingFace-Datasets einsetzen

Lade große Datensätze in den HuggingFace Hub hoch und greife in deiner Gradio-App direkt darauf zu. Das vereinfacht das Datenmanagement und verkürzt Ladezeiten.

Fazit und weiterführende Ressourcen

In diesem Artikel hast du die Grundlagen zum Bauen von Benutzeroberflächen für KI-Anwendungen mit Gradio kennengelernt. Wir haben nur an der Oberfläche gekratzt – Gradio bietet deutlich mehr für komplexe Interfaces. Zum Beispiel erlaubt der Interface State, dass sich Ausgaben zwischen Funktionsaufrufen merken lassen. Reactive Interfaces passen die UI dynamisch an, sobald sich Nutzereingaben ändern. Mit Blocks baust du Apps mit individuellen Layouts und Designs.

Weitere Inhalte findest du hier:

• 10 Python-Pakete, die in deinen Data-Science-Stack gehören
• 7 unverzichtbare Generative-AI-Tools für herausragende KI-Anwendungen
• 5 Projekte, die du mit Gen-AI-Modellen bauen kannst
• CI/CD für Machine Learning Kurs