Die Nützlichkeit der heutigen KI -Modelle wird ohne zug?ngliche Benutzeroberfl?chen stark verringert. Mit Gradio, einer Open-Source-Python-Web-UI-Bibliothek, k?nnen Sie diese Lücke zwischen LLMs und nicht-technischen Endbenutzern überbrücken. Sie k?nnen schnelle Prototypen für Ihre KI -Projekte erstellen und deren Bereitstellung für ein breiteres Publikum vereinfachen.

Dieses Tutorial richtet sich an Ingenieure für maschinelles Lernen, die normalerweise keine Webentwicklungserfahrung haben. Es deckt die Gradio -Grundlagen und die Kernkonzepte, die Erstellung der Schnittstellenerstellung für verschiedene KI -Modelltypen, erweiterte Funktionen für UX und Interaktivit?t sowie Bereitstellung und Freigabe Best Practices ab.

Beginnen wir los.

Erste Schritte mit Gradio

Installation

wir werden mit dem Erstellen einer virtuellen Umgebung (vorzugsweise Conda):

beginnen

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

Dann k?nnen Sie PIP verwenden, um Gradio und seine Abh?ngigkeiten zu installieren:

$ pip install gradio ipykernel

Wir haben auch das Ipykernel -Paket installiert, damit wir Gradio -Schnittstellen direkt in Jupyter -Notizbüchern anzeigen k?nnen. Bei diesem Vorgang müssen Sie die virtuelle Umgebung hinzufügen, die Sie als Kernel zum Jupyter Lab erstellt haben. Hier ist der Befehl, dies zu tun:

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

Auf diese Weise k?nnen Sie ein Notizbuch mit einem Kernel erstellen, das Gradio installiert hat. Um zu überprüfen, importieren Sie es unter seinen Standard -Alias ??und drucken Sie seine Version aus:

import gradio as gr
print(gr.__version__)
4.37.1

grundlegende Konzepte und Terminologie

Wir werden in Gradio eintauchen, indem wir seine Schlüsselkonzepte und -terminologie durch ein Beispiel ?Hello World“ lernen:

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

Wenn Sie den obigen Code in einer Zelle ausführen, ist die Ausgabe eine kleine interaktive Schnittstelle, die eine benutzerdefinierte Begrü?ungsnachricht zurückgibt:

Gradio dreht sich um einige Schlüsselkonzepte:

1. Schnittstelle : Die Kernklasse zum Erstellen von UIS.
2. Komponenten : Eingabe- und Ausgabeelemente wie Textfelder, Bilder und Audio. Ab sofort gibt es mehr als 30 eingebaute Komponenten.
3. Funktionen : Python -Funktionen, die die Informationen aus den Eingabekomponenten verarbeitet und die Ergebnisse mit Ausgabekomponenten anzeigen.
4. starten : Die Methode zum Starten Ihrer Gradio -App.

oben haben wir eine GREET -Funktion erstellt, die eine Texteingabe nimmt und zurückgibt. Aus diesem Grund werden die Eingangs- und Ausgangskomponenten als Text in der Schnittstellenklasse angegeben.

am Ende rufen wir die Startmethode auf, die einen lokalen Server startet. Um die Benutzeroberfl?che für jeden zur Verfügung zu stellen, k?nnen Sie den Parameter Share auf True einstellen. Dadurch wird ein SSH -Tunnel gestartet und die Gradio -App auf einer ?ffentlich gemeinsam genutzbaren Webseite 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

Sie werden die meiste Zeit damit verbringen, sich an verschiedenen Komponenten zu basteln und sie auf der Seite zu platzieren, w?hrend Sie Gradio -Apps erstellen. Schauen wir uns also genauer an, was Sie zur Verfügung stehen.

Eingangs- und Ausgangskomponenten

Gradio bietet eine breite Palette von Komponenten zum Erstellen interaktiver Schnittstellen. Diese Komponenten sind im Allgemeinen in zwei Kategorien unterteilt: Eingabe und Ausgabe.

Eingabebomponenten erm?glichen es Benutzern, den zugrunde liegenden Prozessor Daten bereitzustellen (dies kann jede Python -Funktion sein). Einige g?ngige Eingaben sind:

• textBox
• Bild
• audio
• Slider
• Dropdown

Hier ist eine Dummy -Schnittstelle, die einige der oben genannten Komponenten verwendet:

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

In diesem Beispiel erfordert die Funktion process_inputs fünf Parameter. Daher müssen wir fünf Eingangskomponenten erstellen und an Eing?nge übergeben. W?hrend die Anzahl der Eingangskomponenten mit der Anzahl der erforderlichen Funktionsparameter übereinstimmt, ist dies keine strenge Regel. Um Fehler und Warnungen zu vermeiden, setzen Sie Standardwerte für Parameter, für die keine Benutzereingabe aus der Benutzeroberfl?che erforderlich ist.

Beachten Sie, wie wir eine Textbox -Klasse verwenden, um die Eingabekomponente anstelle eines einfachen String -Textes wie das erste Beispiel anzugeben. Es wird immer empfohlen, dedizierte Klassen zu verwenden, um Eingangs- und Ausgabekomponenten anzugeben, um sie anpassbar zu machen. Beispielsweise haben alle Komponentenklassen ein nützliches Label -Attribut, w?hrend Slider und Dropdown Argumente haben, um den Bereich und die verfügbaren Optionen anzugeben.

Viele Eingangskomponenten k?nnen auch verwendet werden, um die Ausgabe anzuzeigen. Hier sind einige gemeinsame Szenarien:

• Etikett: zum Anzeigen von Text- oder Klassifizierungsergebnissen
• Bild: Zur Anzeige verarbeiteter oder erzeugter Bilder
• Audio: zum Abspielen verarbeiteter oder generierter Audio
• Plot: Zum Anzeigen von Diagrammen oder Diagrammen

gleiche Eing?nge muss die Anzahl der Ausgabebomponenten mit der Anzahl der zurückgegebenen Werte aus der Verarbeitungsfunktion übereinstimmen.

Erscheinungsbild des Komponenten

anpassen Mit

Gradio k?nnen Sie das Erscheinungsbild Ihrer Komponenten an Ihre Bedürfnisse anpassen. Hier ist ein Beispiel, das angepasste Textfelder verwendet:

$ pip install gradio ipykernel

In diesem Beispiel haben wir die Textbox -Komponenten angepasst, indem wir die Anzahl der Zeilen angeben, einen Platzhalter und einen Info -Text hinzufügen und eine Kopierschaltfl?che für die Ausgabe enthalten.

Experimentieren Sie mit verschiedenen Komponenten und ihren Eigenschaften, um Schnittstellen zu erstellen, die den Anforderungen Ihrer AI -Anwendung am besten entsprechen. Um herauszufinden, welche Art von Eigenschaften Sie für Ihre Komponente ?ndern k?nnen, k?nnen Sie seine Dokumente besuchen oder noch besser die verwenden? Operand in Jupyter Lab nach seinem Klassennamen:

Geb?udeschnittstellen für LLMs

Lassen Sie uns alles zusammenstellen, was wir gelernt haben, indem wir zwei reale Text- und bildbasierte Schnittstellen erstellen, die von LLMs betrieben werden.

Erstens bauen wir einen Sprachübersetzer von Englisch bis Türkisch, Spanisch oder Chinesisch:

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

Anfangs definieren wir eine übersetzungsfunktion. In seinem K?rper setzen wir den OpenAI -API -Schlüssel und erstellen eine Sprachkarte. Dann konstruieren wir die Aufforderung zur übersetzung. In einem Try-Except-Block senden wir dann eine Anfrage an den ChatCompletion-Endpunkt mit einer Systemaufforderung. Am Ende geben wir die erste Wahl zurück.

Jetzt k?nnen wir die Schnittstelle erstellen:

$ pip install gradio ipykernel

Der Code ist einfach, wie die früheren Schnittstellen, aber wir stellen ein paar neue Eigenschaften ein:

• Argument der Textfelder eingeben. ?ndern Sie das Feld der Eingabe der Ebene des Klartextens in die Kennworteingabe und verstecken Sie den Text.
• Titel und Beschreibung Argumente der Schnittstellenklasse fügt dem oberen Zentrum der Seite einen H1 -Titel und einen Untertitel hinzu.

Hier ist das Ergebnis:

Sie fragen sich vielleicht, warum wir den API -Schlüssel des Benutzers als Teil der App fragen, anstatt sie selbst bereitzustellen. Der Grund hat damit zu tun, wie Gradio UIS bereitstellt.

Wenn wir unseren eigenen API -Schlüssel als Umgebungsvariable (die Standardpraxis) bereitgestellt haben, würde die ?ffentlich gemeinsam genutzbare App -Version nicht funktionieren, da sie keinen Zugriff auf unsere Umgebungsvariablen h?tte. Im Bereich Bereitstellungsabschnitt werden wir sehen, wie dies behoben wird, indem wir unsere Apps für Umarmungsr?ume bereitstellen.

Erstellen wir eine weitere Benutzeroberfl?che zum Generieren von Bildern:

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

Wir erstellen eine Funktion namens generate_surrealist_art, die eine Anfrage an Dall-E-3 sendet und die generierte Bild-URL mit einer surrealistischen Eingabeaufforderung zurückgibt. Dann werden wir diese Funktion erneut in eine Schnittstellenklasse einfügen:

import gradio as gr
print(gr.__version__)
4.37.1

Wir geben zwei Eingaben für den API -Schlüssel und das Konzept an, das wir in einem surrealistischen Bild erfassen m?chten. Anschlie?end erstellen wir eine Ausgabekomponente für das generierte Bild mit der Bildklasse. Wenn Sie sein Wertargument auf STR festlegen, kann die Komponente Bilder von URLs herunterladen und anzeigen, genau das, was wir brauchen.

Und hier ist das Ergebnis:

Schnittstellen für klassische ML -Modelle bauen

Erstellen wir nun eine Schnittstelle für ein klassisches tabellarisches Regressionsmodell. Wir werden den Diamonds -Datensatz verwenden, der in Seaborn erh?ltlich ist.

Beginnen Sie mit dem Erstellen eines neuen Arbeitsverzeichnisses und eines neuen Skripts namens App.py in. Fügen Sie dann den Code aus diesem Github-Gist ein, der die Daten l?dt, ihn mit einer Scikit-Learn-Pipeline verarbeitet und ein ZufallsforestRegressionsmodell trainiert.

Der n?chste Schritt besteht darin, eine Verarbeitungsfunktion zu erstellen, die die gleiche Anzahl von Eing?ngen akzeptiert, wie es Funktionen im Diamonds -Datensatz gibt:

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

Die Funktion wandelt diese Eingaben in einen Datenrahmen um und übergibt sie an die .Predict () -Methode der trainierten Modellpipeline. Am Ende gibt es eine Zeichenfolge mit dem vorhergesagten Preis zurück.

Nun muss die Schnittstellenklasse mit der Signatur dieser Funktion übereinstimmen: Neun Eingangskomponenten für die Verarbeitung der Funktionen und eine Ausgabe für die Anzeige des vorhergesagten Preises:

$ pip install gradio ipykernel

In der Klasse erstellen wir drei Dropdowns für die kategorialen Merkmale. Die Optionen werden mit den einzigartigen Kategorien in jeder Funktion ausgefüllt. Wir erstellen auch sechs Slider -Komponenten, um numerische Funktionen zu akzeptieren. Die Bereiche der Schieberegler werden durch die minimalen und maximalen Werte jedes Merkmals bestimmt.

Wir müssen jetzt nur noch das Skript ausführen, um die App auszuführen und bereitzustellen:

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

Hier ist das Ergebnis:

überspringen

Bereitstellen von Gradio -Apps

Wir haben bereits gesehen, wie einfach es ist, Gradio -Apps bereitzustellen, indem wir ein einzelnes Argument aktivieren. Natürlich besteht der Nachteil dieser Methode darin, dass die Demos innerhalb von 72 Stunden ablaufen. Die empfohlene Methode zur Bereitstellung von Gradio besteht also über Umarmungsfl?chen. Huggingface erwarb Gradio im Jahr 2021 und macht die Integration zwischen den beiden Plattformen nahtlos.

Für dieses Tutorial oder zukünftige Apps, die Sie mit Gradio erstellen, melden Sie sich für ein kostenloses Konto bei Huggingface.co an und navigieren Sie zu Einstellungen & GT; Token, um ein Zugangstoken zu generieren:

Das Token wird nur einmal angezeigt. Lagern Sie es also an einem sicheren Ort.

Mit diesem Token k?nnen Sie so viele Gradio -Apps bereitstellen, wie Sie m?chten, mit dauerhaftem Hosting auf R?umen. Als Beispiel werden wir das Vorhersagemodell für Diamond -Preise aus dem vorherigen Abschnitt einsetzen, und Sie werden es überraschend einfach finden.

Alles, was Sie tun müssen, ist mit dem UI -Skript zum Verzeichnis zu navigieren und Gradio aufzurufen, das auf dem Terminal bereitgestellt wird:

Das Terminal führt Sie durch die Konvertierung Ihres Skripts in einen funktionierenden Umarmungsraum. Es fragt nach Details wie:

Das von Ihnen generierte Zugriffstoken
Space -Titel: Dies ist Teil der Space -URL nach der Bereitstellung
Der Name des Skripts mit Gradio UI -Code (app.py Standard)
Space's Hardware; Lassen Sie leer, um nur CPUs (frei)
• zu verwenden
Alle Umgebungsvariablen, die das Skript verwendet (hier speichern Sie API -Schlüssel und Benutzergeheimnisse sicher)
Abh?ngigkeiten - Geben Sie einzeln ein, indem Sie die Eingabetaste
• drücken

und das Terminal pr?sentiert Ihnen einen bereitgestellten Space -Link. So sieht es aus:

Eine weitere gro?artige Sache an dieser Bereitstellungsmethode ist, dass Gradio die Demo automatisch in eine funktionierende REST -API umwandelt. Die Anweisungen zum Zugriff und Abfragen befinden sich immer unten:

Auf einmal haben Sie beide ein dauerhaftes UI-Hosting für Ihre Anwendung für nicht-technische Benutzer und eine REST-API für Ihre Kollegen und Entwicklerfreunde.

Weitere Bereitstellungs- und Freigabeoptionen, z. B. das Einbetten von Demos in Webseiten, die Hinzufügung von Google -Authentifizierung zu Apps usw. Besuchen Sie den Abschnitt ?Teilen Ihrer App“ der Dokumentation von Gradio.

Gradio Best Practices und Tipps

Bei der Entwicklung von Benutzeroberfl?chen mit Gradio kann die Befolgung von Best Practices die Benutzererfahrung und die Wartbarkeit Ihrer Anwendung erheblich verbessern. Hier sind einige wichtige Empfehlungen:

1. Verwenden Sie Skripte für Organisation und Wartbarkeit

organisieren Gradio -Anwendungen in Python -Skripten für eine bessere Version, Zusammenarbeit und Bereitstellung.

2. Optimieren Sie die Raumzuweisung für Komponenten

Verwenden Sie entsprechende Gr??en- und Layout -Tools (z. B. gr. column (), gr.row ()), um eine ausgewogene, reaktionsschnelle Schnittstelle zu gew?hrleisten.

3. Geben Sie umfassende Informationen

an

Verwenden Sie "Info "- und" Label "-attribute, um für jede Komponente klare Anweisungen und Kontext zu geben.

4. Behandeln Sie gro?e Merkmalss?tze effizient

Für Modelle mit vielen Funktionen verwenden Sie Dateieingaben (CSV, JSON), um Stapelvorhersagen zu aktivieren und die Schnittstelle zu vereinfachen.

5. Umgebungsvariablen richtig verwalten

Verwenden Sie Python-dotenv für die lokale Entwicklung und setzen Sie Variablen in den Umarmungsr?umen zur Bereitstellung.

6. Implementieren Sie die Fehlerbehandlung und -validierung

Eing?nge validieren, klare Fehlermeldungen angeben und Try-Except-Bl?cke für die Umgang mit fehlerhafter Fehler verwenden.

7. Leistung

optimieren

Implementieren Sie das Caching, das faule Laden für gro?e Modelle und verwenden Sie Gr.LoadingStatus () für langlebige Aufgaben.

8. Design für Barrierefreiheit

Stellen Sie einen hohen Kontrast sicher, geben Sie ALT -Text für Bilder an und aktivieren Sie die Tastaturnavigation für alle interaktiven Elemente.

9. Implementieren Sie progressive Offenlegung

Verwenden Sie Akkordeons oder Registerkarten, um komplexe Schnittstellen zu organisieren, wodurch erweiterte Optionen nach Bedarf angezeigt werden.

10. Regelm??ig aktualisieren und beibehalten

Die Abh?ngigkeiten auf dem neuesten Stand halten, Fehler überwachen und sich kontinuierlich verbessern, basierend auf dem Benutzer -Feedback.

11. Nutzen Sie die Ressourcen von Huggingface

Verwenden Sie Harmgingface -Tools und Ressourcen für die nahtlose Integration in Gradio, einschlie?lich Modellrepositories und Datens?tze.

12. Host gro?e Modelle für das Hubface Hub

für gro?e tabellarische Modelle, laden Sie in das Hubface -Hub hoch und laden Sie direkt in Ihr Gradio -Skript, um die Leistung zu verbessern und die lokalen Speicheranforderungen zu verringern.

13. Verwenden Sie die Datasets von Huggingface

für gro?e Datens?tze, laden Sie in HuggingFace -Hub hoch und greifen Sie direkt in Ihrer Gradio -Anwendung zu, um die Datenverwaltung zu optimieren und die Ladezeiten zu verbessern.

Schlussfolgerung und weitere Ressourcen

In diesem Artikel haben wir die Grundlagen des Erstellens von Benutzeroberfl?chen für AI -Anwendungen mit Gradio gelernt. Wir sind gerade unter die Oberfl?che getaucht, da Gradio viele weitere Funktionen für den Bau komplexer Schnittstellen bietet. Zum Beispiel erm?glicht Ihre App Ihre App aus den Ausg?ngen von einem Funktionsaufruf zum anderen. Reaktive Schnittstellen ?ndern die Benutzeroberfl?che dynamisch, sobald sich der Benutzereingang ?ndert. Mit Bl?cken k?nnen Sie Apps mit benutzerdefinierten Layouts und Designs erstellen.

In ?hnlicher Weise finden Sie diese zugeh?rigen Ressourcen für weitere Inhalte:

• 10 Python -Pakete, die zu Ihrem Data Science Stack addieren k?nnen
• 7 Wesentliche generative KI-Tools zum Erstellen von AI-Anwendungen
• 5 Projekte, die Sie mit Gen AI -Modellen bauen k?nnen
• ci/cd für maschinelles Lernen

topicsSartificial Intelligencepython

Das obige ist der detaillierte Inhalt vonErstellen von Benutzeroberfl?chen für AI -Anwendungen mit Gradio in Python. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!