

Bild vom Herausgeber
# Wir stellen Gradio vor
Gradio ist ein Python-Framework, das die Artwork und Weise verändert, wie Praktiker des maschinellen Lernens interaktive Webschnittstellen für ihre Modelle erstellen. Mit nur wenigen Codezeilen können Sie ausgefeilte Anwendungen erstellen, die verschiedene Eingaben (Textual content, Bilder, Audio) akzeptieren und Ausgaben auf intuitive Weise anzeigen. Egal, ob Sie Forscher, Datenwissenschaftler oder Entwickler sind, Gradio macht die Modellbereitstellung für jeden zugänglich.
Zu den Vorteilen von Gradio gehören:
- Damit können Sie in wenigen Minuten vom Modell zur Demo wechseln
- Sie benötigen keine Frontend-Kenntnisse, sondern lediglich eine reine Python-Implementierung
- Es unterstützt Textual content, Bilder, Audio und mehr
- Sie können Inhalte ganz einfach teilen und lokal bereitstellen sowie auch kostenlos öffentlich hosten
# Gradio und Foundation-Setup installieren
Um mit Gradio zu beginnen, müssen Sie das Paket mit dem Befehl pip installieren.
Nachdem Sie Gradio nun installiert haben, erstellen wir Ihre erste Gradio-Anwendung. Erstellen Sie zunächst eine Datei und benennen Sie sie gradio_app.py Fügen Sie dann diesen Code hinzu:
import gradio as gr
def greet(title):
return f"Hiya {title}!"
demo = gr.Interface(
fn=greet,
inputs="textual content",
outputs="textual content",
title="Greeting App"
)
demo.launch()
Führen Sie dies mit aus python gradio_app.pyund Sie haben eine laufende Webanwendung unter http://127.0.0.1:7860/. Die Schnittstelle bietet eine Texteingabe, eine Schaltfläche zum Senden und eine Textausgabe – alles automatisch generiert aus Ihrer einfachen Spezifikation.


Bild vom Autor
// Die Gradio-Schnittstelle verstehen
Der gr.Interface class ist die Excessive-Stage-API (Software Programming Interface) von Gradio, die Komplexität abstrahiert. Es erfordert drei wesentliche Komponenten:
- Funktion (
fn): Ihre Python-Funktion, die Eingaben verarbeitet - Eingaben: Angabe der Eingabeart(en)
- Ausgaben: Angabe der Ausgabeart(en)
// Erkunden von Eingabe- und Ausgabekomponenten
Sie können zwar einfache Zeichenfolgen wie verwenden "textual content", "picture"oder "audio" Um Komponenten anzugeben, bietet Gradio mehr Kontrolle durch explizite Komponentenklassen.
import gradio as gr
demo = gr.Interface(
fn=lambda x: x,
inputs=gr.Textbox(traces=2, placeholder="Enter textual content right here..."),
outputs=gr.Textbox(label="Output")
)
Zu den üblichen Komponenten gehören:
gr.Textbox(): Mehrzeilige Texteingabegr.Picture(): Bild-Add/Vorschaugr.Audio(): Handhabung von Audiodateiengr.Checkbox(): Boolesche Eingabegr.Slider(): Numerische Bereichseingabegr.Radio(): A number of-Alternative-Auswahlgr.Dropdown(): Wählen Sie aus Optionen
// Umgang mit mehreren Ein- und Ausgängen
Reale Anwendungen erfordern oft mehrere Eingaben oder erzeugen mehrere Ausgaben. Gradio handhabt dies elegant mit Hear.
import gradio as gr
def process_form(title, is_morning, temperature):
greeting = "Good morning" if is_morning else "Hiya"
message = f"{greeting}, {title}! Temperature: {temperature}°C"
return message, temperature * 1.8 + 32 # Convert to Fahrenheit
demo = gr.Interface(
fn=process_form,
inputs=(
gr.Textbox(label="Identify"),
gr.Checkbox(label="Is it morning?"),
gr.Slider(0, 100, label="Temperature (°C)")
),
outputs=(
gr.Textbox(label="Greeting"),
gr.Quantity(label="Temperature (°F)")
)
)
demo.launch()
Ausgabe:


Bild vom Autor
Wenn Sie mehrere Eingaben verwenden, muss Ihre Funktion die gleiche Anzahl von Parametern akzeptieren. Ebenso erfordern mehrere Ausgaben, dass Ihre Funktion mehrere Werte zurückgibt.
// Bilder verarbeiten
Gradio macht die Demonstration von Bildverarbeitungsmodellen unglaublich einfach:
import gradio as gr
import numpy as np
def apply_sepia(picture):
# Picture comes as numpy array with form (top, width, channels)
sepia_filter = np.array(((0.393, 0.769, 0.189),
(0.349, 0.686, 0.168),
(0.272, 0.534, 0.131)))
sepia_image = picture.dot(sepia_filter.T)
sepia_image = np.clip(sepia_image, 0, 255).astype(np.uint8)
return sepia_image
demo = gr.Interface(
fn=apply_sepia,
inputs=gr.Picture(label="Enter Picture"),
outputs=gr.Picture(label="Sepia Filtered"),
title="Sepia Filter App"
)
demo.launch()
Ausgabe:


Bild vom Autor
Der gr.Picture Die Komponente verwaltet automatisch Datei-Uploads, Vorschauen und Konvertierungen von Bildern NumPy Arrays zur Verarbeitung.
// Umgang mit der Audioverarbeitung
Ebenso unkompliziert sind Audioanwendungen:
import gradio as gr
def transcribe_audio(audio):
return "Transcribed textual content would seem right here"
demo = gr.Interface(
fn=transcribe_audio,
inputs=gr.Audio(label="Add Audio", kind="filepath"),
outputs=gr.Textbox(label="Transcription"),
title="Speech-to-Textual content Demo"
)
demo.launch()
In einer realen Anwendung würden Sie ein Spracherkennungsmodell innerhalb des aufrufen transcribe_audio(audio) Funktion. Zur Demonstration geben wir einen Platzhalter zurück.
Ausgabe:


Bild vom Autor
# Erstellen erweiterter Layouts mit Gradio-Blöcken
Während gr.Interface eignet sich hervorragend für einfache Anwendungen, gr.Blocks bietet vollständige Kontrolle über Format und Datenfluss. Stellen Sie sich Blocks als die Low-Stage-API vor, mit der Sie komplexe, mehrstufige Anwendungen erstellen können.
// Beispiel für die Implementierung eines Basisblocks
import gradio as gr
def greet(title):
return f"Hiya {title}!"
with gr.Blocks() as demo:
name_input = gr.Textbox(label="Your Identify")
greet_button = gr.Button("Greet")
output = gr.Textbox(label="Greeting")
greet_button.click on(
fn=greet,
inputs=name_input,
outputs=output
)
demo.launch()
Ausgabe:


Bild vom Autor
// Erstellen komplexer Layouts mit Zeilen und Spalten
Hier ist ein anspruchsvolleres Beispiel für die Integration mit Transformatoren. Stellen Sie sicher, dass die Transformatoren Das Paket ist auf Ihrem Laptop installiert.
pip set up transformers
import gradio as gr
from transformers import pipeline
# Load a translation mannequin
translator = pipeline("translation_en_to_de", mannequin="t5-small")
def translate_text(textual content):
outcome = translator(textual content, max_length=40)(0)
return outcome('translation_text')
with gr.Blocks(title="English to German Translator") as demo:
gr.Markdown("# 🌍 English to German Translator")
with gr.Row():
with gr.Column():
english_input = gr.Textbox(
label="English Textual content",
placeholder="Enter textual content to translate...",
traces=4
)
translate_btn = gr.Button("Translate", variant="major")
with gr.Column():
german_output = gr.Textbox(
label="German Translation",
traces=4
)
# Add instance prompts
gr.Examples(
examples=(
("Hiya, how are you?"),
("The climate is gorgeous at the moment"),
("Machine studying is fascinating")
),
inputs=english_input
)
translate_btn.click on(
fn=translate_text,
inputs=english_input,
outputs=german_output
)
demo.launch()
Ausgabe:


Bild vom Autor
# Statusverwaltung in Gradio-Anwendungen
Die Zustandsverwaltung ist für interaktive Anwendungen wichtig. Gradio bietet zwei Ansätze: globalen Standing und Sitzungsstatus.
// Sitzungsstatus verwalten (benutzerspezifisch)
Für benutzerspezifische Standing verwenden Sie die integrierte Statusverwaltung von Gradio. Das folgende Beispiel demonstriert eine einfache Chatbot-Logik, die den Standing verwendet, um den Gesprächsverlauf zu verwalten.
import gradio as gr
with gr.Blocks() as demo:
chatbot = gr.Chatbot(label="Dialog")
msg = gr.Textbox(label="Your Message")
clear = gr.Button("Clear")
state = gr.State(())
def user_message(message, historical past):
# Replace historical past with person message and placeholder for bot
return "", historical past + ((message, None))
def bot_response(historical past):
# Easy echo bot logic
response = f"I obtained: {historical past(-1)(0)}"
historical past(-1)(1) = response
return historical past
msg.submit(
user_message,
(msg, state),
(msg, state)
).then(
bot_response,
state,
chatbot
)
clear.click on(lambda: (None, ()), None, (chatbot, state))
demo.launch()
# Bereitstellen und Freigeben Ihrer Anwendungen
Zum schnellen Teilen kann Gradio eine öffentliche URL erstellen:
Dadurch wird ein temporärer, öffentlich zugänglicher Hyperlink generiert, der sich perfekt für Demos und den schnellen Austausch mit Kollegen eignet. Die Gültigkeit beträgt in der Regel 72 Stunden.
Kostenloses, dauerhaftes Internet hosting:
- Erstellen Sie eine Umarmendes Gesicht Konto
- Erstellen Sie einen neuen House mit Gradio als Software program Growth Package (SDK)
- Laden Sie Ihre Bewerbungsunterlagen hoch:
app.py(Ihre Hauptbewerbungsdatei) undnecessities.txt(Python-Abhängigkeiten). Ein Beispiel dafür, was in der enthalten sein solltenecessities.txtDatei:
git add .
git commit -m "Preliminary commit"
git push
Ihre Bewerbung finden Sie unter https://huggingface.co/areas/your-username/your-space-name.
Gradio-Anwendungen können auf jeder Plattform bereitgestellt werden, die Python-Webanwendungen unterstützt:
- Verwenden
demo.launch(server_name="0.0.0.0", server_port=7860) - Packen Sie Ihre Anwendung mit allen Abhängigkeiten in einen Docker-Container
- Bereitstellung auf AWS, Google Cloud, Azure und anderen Plattformen
# Erstellen eines Bildklassifizierungs-Dashboards
Lassen Sie uns alles zusammenfassen, was wir gelernt haben, und ein Projekt aufbauen. Bei diesem Projekt handelt es sich um ein einfaches Bildklassifizierungs-Dashboard, mit dem erstellt wurde PyTorch und Gradio. Es ermöglicht Benutzern, ein Bild über eine Weboberfläche hochzuladen und die fünf besten vorhergesagten Klassen zu erhalten, die von einem vorab trainierten Deep-Studying-Modell generiert wurden.
Wir werden verwenden ResNet-50ein bekanntes Faltungs-Neuronales Netzwerk, das auf dem ImageNet-Datensatz trainiert wird. Da das Modell vorab trainiert ist, erfordert das Projekt kein benutzerdefiniertes Coaching oder gekennzeichnete Daten. Es ist eher für Demonstrations-, Experimentier- und Bildungszwecke als für den Produktionseinsatz gedacht.
Wir werden Gradio verwenden, um eine schlanke Benutzeroberfläche bereitzustellen, sodass Benutzer direkt über einen Browser mit dem Modell interagieren können.
import gradio as gr
import torch
from torchvision import fashions, transforms
from PIL import Picture
# Load pre-trained mannequin
mannequin = fashions.resnet50(pretrained=True)
mannequin.eval()
# Preprocessing
preprocess = transforms.Compose((
transforms.Resize(256),
transforms.CenterCrop(224),
transforms.ToTensor(),
transforms.Normalize(
imply=(0.485, 0.456, 0.406),
std=(0.229, 0.224, 0.225)
)
))
def classify_image(picture):
picture = Picture.fromarray(picture)
input_tensor = preprocess(picture)
input_batch = input_tensor.unsqueeze(0)
with torch.no_grad():
output = mannequin(input_batch)
# Get prime 5 predictions
possibilities = torch.nn.purposeful.softmax(output(0), dim=0)
top5_prob, top5_catid = torch.topk(possibilities, 5)
outcomes = ()
for i in vary(top5_prob.dimension(0)):
outcomes.append(f"Class {top5_catid(i).merchandise()}: {top5_prob(i).merchandise()*100:.2f}%")
return "n".be a part of(outcomes)
demo = gr.Interface(
fn=classify_image,
inputs=gr.Picture(label="Add Picture"),
outputs=gr.Textbox(label="High 5 Predictions"),
title="Picture Classifier"
)
demo.launch()
# Zusammenfassung
Gradio erleichtert die Bereitstellung von maschinellem Lernen, indem es die herkömmlichen Barrieren zwischen Modellentwicklung und Benutzerinteraktion beseitigt. Mit diesem Crashkurs haben Sie die Grundlagen der Erstellung von Gradio-Schnittstellen, komponentenbasiertes Design für verschiedene Eingabe-/Ausgabetypen, erweiterte Layouts mit Gradio-Blöcken, Statusverwaltung für interaktive Anwendungen und Bereitstellungsstrategien für die gemeinsame Nutzung Ihrer Arbeit erlernt.
Die wahre Stärke von Gradio liegt in seiner Einfachheit und Flexibilität. Es spielt keine Rolle, ob Sie einen schnellen Prototyp für interne Exams oder eine ausgefeilte Anwendung für die öffentliche Nutzung erstellen. Gradio bietet die Instruments, die Sie benötigen, um Ihre Modelle für maschinelles Lernen zum Leben zu erwecken.
Shittu Olumide ist ein Software program-Ingenieur und technischer Autor, der sich leidenschaftlich dafür einsetzt, modernste Technologien zu nutzen, um fesselnde Erzählungen zu erschaffen, mit einem scharfen Blick fürs Element und einem Gespür für die Vereinfachung komplexer Konzepte. Sie können Shittu auch auf finden Twitter.
