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.
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
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:
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)
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.
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:
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:
gleiche Eingänge muss die Anzahl der Ausgabebomponenten mit der Anzahl der zurückgegebenen Werte aus der Verarbeitungsfunktion übereinstimmen.
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:
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:
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:
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 -AppsFü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:
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:
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.
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:
organisieren Gradio -Anwendungen in Python -Skripten für eine bessere Version, Zusammenarbeit und Bereitstellung.
Verwenden Sie entsprechende Größen- und Layout -Tools (z. B. gr. column (), gr.row ()), um eine ausgewogene, reaktionsschnelle Schnittstelle zu gewährleisten.
Verwenden Sie "Info "- und" Label "-attribute, um für jede Komponente klare Anweisungen und Kontext zu geben.
Für Modelle mit vielen Funktionen verwenden Sie Dateieingaben (CSV, JSON), um Stapelvorhersagen zu aktivieren und die Schnittstelle zu vereinfachen.
Verwenden Sie Python-dotenv für die lokale Entwicklung und setzen Sie Variablen in den Umarmungsräumen zur Bereitstellung.
Eingänge validieren, klare Fehlermeldungen angeben und Try-Except-Blöcke für die Umgang mit fehlerhafter Fehler verwenden.
Implementieren Sie das Caching, das faule Laden für große Modelle und verwenden Sie Gr.LoadingStatus () für langlebige Aufgaben.
Stellen Sie einen hohen Kontrast sicher, geben Sie ALT -Text für Bilder an und aktivieren Sie die Tastaturnavigation für alle interaktiven Elemente.
Verwenden Sie Akkordeons oder Registerkarten, um komplexe Schnittstellen zu organisieren, wodurch erweiterte Optionen nach Bedarf angezeigt werden.
Die Abhängigkeiten auf dem neuesten Stand halten, Fehler überwachen und sich kontinuierlich verbessern, basierend auf dem Benutzer -Feedback.
Verwenden Sie Harmgingface -Tools und Ressourcen für die nahtlose Integration in Gradio, einschließlich Modellrepositories und Datensätze.
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.
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.
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:
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
