Gradio: Dynamische Layouts mit @gr.render

Einführung

Gradio, eine beliebte Bibliothek für die Erstellung von benutzerfreundlichen Schnittstellen für maschinelle Lernmodelle, hat eine neue Funktion eingeführt: dynamische Layouts mit dem @gr.render Dekorator. Diese Funktion ermöglicht es Entwicklern, Komponenten und Ereignis-Listener dynamisch in einer Anwendung hinzuzufügen, anstatt auf ein fest definiertes Layout beschränkt zu sein. In diesem Artikel werden wir die Details dieser neuen Funktion und ihre Anwendungsmöglichkeiten untersuchen.

Was ist der @gr.render Dekorator?

Der @gr.render Dekorator ist eine neue Ergänzung zu Gradio, die es ermöglicht, Layouts dynamisch zu gestalten. Dies bedeutet, dass die Komponenten und Ereignis-Listener in einer Anwendung sich basierend auf benutzerdefinierten Logiken ändern können. Der Dekorator wird an eine Funktion angehängt, die Komponenten und Ereignis-Listener enthält, die basierend auf den Eingaben aktualisiert werden.

Grundlegende Nutzung

Die grundlegende Nutzung von @gr.render besteht aus den folgenden Schritten:

Beispielanwendung

Hier ist ein einfaches Beispiel, wie der @gr.render Dekorator verwendet werden kann:

import gradio as gr

with gr.Blocks() as demo:
input_text = gr.Textbox()

@gr.render(inputs=input_text)
def show_split(text):
if len(text) == 0:
gr.Markdown("## No Input Provided")
else:
for letter in text:
with gr.Row():
text = gr.Textbox(letter)
btn = gr.Button("Clear")
btn.click(lambda: gr.Textbox(value=""), None, text)


Vorteile der dynamischen Layouts

Die Einführung von dynamischen Layouts bringt mehrere Vorteile mit sich:

- Flexibilität: Entwickler können Layouts erstellen, die sich basierend auf Benutzereingaben oder anderen Bedingungen ändern.
- Benutzerfreundlichkeit: Anwendungen können interaktiver und ansprechender gestaltet werden.
- Effizienz: Dynamische Layouts ermöglichen es, Ressourcen effizienter zu nutzen, da nur die erforderlichen Komponenten gerendert werden.

Anwendungsbeispiele

Todo-Liste

Ein gängiges Beispiel für die Nutzung dynamischer Layouts ist eine Todo-Liste, bei der die Anzahl der Elemente variabel ist:

import gradio as gr

with gr.Blocks() as demo:
todos_var = gr.State([])

@gr.render
def todo_list(todos: todos_var):
for i, todo in enumerate(todos):
with gr.Row():
complete = gr.Checkbox(bind=(todos_var[i]["complete"]))
item_name = gr.Textbox(bind=(todos_var[i]["name"]))
delete_btn = gr.Button("Delete")

@gr.on(delete_btn.click)
def remove_element(todos: todos_var) -> todos_var:
del todos[i]
return todos

add_btn = gr.Button("Add Item")
@gr.on(add_btn.click)
def add_item(todos: todos_var) -> todos_var:
todos.append({"name": "", "complete": False})
return todos


Multipage App

Ein weiteres Beispiel ist eine Anwendung mit mehreren Seiten, die auf Tab-Wechsel reagiert:

import gradio as gr
from start_page import start_blocks
from about_page import about_blocks
from contact_page import contact_blocks

with gr.Blocks() as demo:
page = gr.State("Start", url_param="page")
expanded_view = gr.State(False, url_param="expanded")

with gr.Tabs(bind=page):
with gr.Tab("Start"):
start_blocks.render()
with gr.Tab("About"):
about_blocks.render()
with gr.Tab("Contact"):
contact_blocks.render()

expand = gr.Checkbox(label="Expand", bind=expanded_view)
@gr.render
def expansion(expand: expand):
if expand:
# more content here


Erstellen benutzerdefinierter Komponenten

Gradio 4.0 führt auch benutzerdefinierte Komponenten ein, die es Entwicklern ermöglichen, ihre eigenen Komponenten zu erstellen und in Gradio-Anwendungen zu verwenden. Der Workflow besteht aus vier Schritten: create, dev, build und publish.

1. create

Erstellen Sie ein neues Template mit dem Befehl:

gradio cc create MyComponent --template SimpleTextbox

2. dev

Starten Sie einen Entwicklungsserver mit:

gradio cc dev

3. build

Erstellen Sie ein Python-Paket mit:

gradio cc build

4. publish

Veröffentlichen Sie Ihr Paket mit:

gradio cc publish

Schlussfolgerung

Die Einführung von dynamischen Layouts und benutzerdefinierten Komponenten in Gradio 4.0 bietet Entwicklern neue Möglichkeiten, ihre Anwendungen flexibler und interaktiver zu gestalten. Diese Funktionen sind ein großer Schritt nach vorne und werden sicherlich die Art und Weise, wie wir maschinelle Lernmodelle präsentieren und interaktive Anwendungen entwickeln, verändern.

Bibliographie

https://www.gradio.app/docs/gradio/render
https://www.gradio.app/guides/dynamic-apps-with-render-decorator
https://www.gradio.app/guides/blocks-and-event-listeners
https://github.com/gradio-app/gradio/issues/4689
https://github.com/gradio-app/gradio/issues/2566
https://www.gradio.app/guides/custom-components-in-five-minutes
https://www.gradio.app/docs/gradio/html
https://www.gradio.app/guides/key-component-concepts