Technology 2 - Gradio

Gradio

Wat is Gradio?

Gradio is an open-source Python package that allows you to quickly build a demo or web application for your machine learning model, API, or any arbitary Python function. You can then share a link to your demo or web application in just a few seconds using Gradio’s built-in sharing features. No JavaScript, CSS, or web hosting experience needed!

Gradio Documentatie

De Gradio Documentatie is grondig uitgewerkt, je kan deze raadplegen via: https://www.gradio.app/docs/interface

Getting Started

pip install gradio

Installeer de nodige packages (let op: Python 3.8 of hoger)

Basis Interface

import gradio as gr

def greet(name, intensity):
    return "Hello, " + name + "!" * int(intensity)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "slider"],
    outputs=["text"],
)

demo.launch()

Getting Started

Open bovenstaande code met

python app.py

Resultaat

Breakdown

import gradio as gr

def greet(name, intensity):
    return "Hello, " + name + "!" * int(intensity)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "slider"],
    outputs=["text"],
)

demo.launch()

De Interface klasse aanvaardt één of meer inputs en geeft één of meer outputs terug

fn: de functie die centraal staat in de interface en zal uitgevoerd worden

inputs: de Gradio input componenten, het aantal componenten moeten overeenkomen met het aantal parameters in de functie

outputs: de Gradio output componenten, het aantal componenten moeten overeenkomen met de terug te geven data

Breakdown

fn argument is vrij flexibel, je kan elke Python functie hier aan toevoegen.
De input en output parameters bestaan uit één of meerdere Gradio componenten.
In Gradio zijn er meer dan 30 ingebouwde componenten.
Het aantal parameters van je functie komt overeen met het aantal input componenten die je hebt opgegven.
Het aantal return values van je functie komt overeen met het aantal output componenten.

Delen van je interface

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")
    
demo.launch(share=True)  # Share your demo with just 1 extra parameter 🚀

Door de parameter share=True genereer je een publieke link naar je gradio demo in deze stijl:

👉 https://a23dsf231adb.gradio.live

4 types interfaces

Standaard demos: heeft afzonderlijk inputs en outputs (links en rechts)
- Bijv. een image classifier of speech-to-text
Ouput-only demos: neemt geen input, geeft enkel iets terug
- Bijv. een afbeelding generator, zonder input
Input-only demos: neemt enkel input
- Bijv. wanneer je afbeeldingen wil uploaden
Unified demos: dit is een combinatie van input en output componenten (bijv. text generation)

Tip

Autoreloading helpt tijdens ontwikkeling om je interface te wijzigen wanneer je een aanpassing doet in de code.
Zet je gradio in reload mode met

gradio run.py

python run.py

In plaats van

Gradio

Blocks & Event Listeners

Structuur

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")
    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")

demo.launch()

Structuur

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")
    greet_btn.click(fn=greet, inputs=name, 
    outputs=output, api_name="greet")

demo.launch()

with gr.Blocks() as demo: de code staat binnen dit statement

Zelfde manier van componenten in Interface, alleen worden deze niet doorgegeven via een constructor maar aangemaakt dmv de with clausule

De click() event listener zal de functie greet uitvoeren en "lijmt" de input en output compnenten aan elkaar.

Interactivity

De input component is interactief, je kan tekst aanpassen
De output component is dat niet, maar je kan dit wel wijzigen

output = gr.Textbox(label="Output", interactive=True)

Rijen

Standaard zijn Components en Blocks verticaal geordend. Je kan de layout controleren met gr.Row() en gr.Column()
Elementen binnen gr.Row() zullen horizontaal worden getoond:

with gr.Blocks() as demo:
    with gr.Row():
        btn1 = gr.Button("Button 1")
        btn2 = gr.Button("Button 2")

Rijen

Elk element even groot maken doe je met:

with gr.Blocks() as demo:
    with gr.Row(equal_height=True):
        textbox = gr.Textbox()
        btn2 = gr.Button("Button 2")

De breedte van een element binnen een rij kan je controleren met een combinatie van scale en min_width
- Scale is een integer, met een schaal op 1 of meer zal het element uitbreiden
- min_width zet de min breedte wat een element zal innemen

Rijen

with gr.Blocks() as demo:
    with gr.Row():
        btn0 = gr.Button("Button 0", scale=0)
        btn1 = gr.Button("Button 1", scale=1)
        btn2 = gr.Button("Button 2", scale=2)

Kolommen en nesting

Kolommen binnen een kolom zullen bovenop elkaar worden gezet

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        text1 = gr.Textbox(label="t1")
        slider2 = gr.Textbox(label="s2")
        drop3 = gr.Dropdown(["a", "b", "c"], label="d3")
    with gr.Row():
        with gr.Column(scale=1, min_width=600):
            text1 = gr.Textbox(label="prompt 1")
            text2 = gr.Textbox(label="prompt 2")
            inbtw = gr.Button("Between")
        with gr.Column(scale=2, min_width=600):
            text4 = gr.Textbox(label="prompt 3")
            text5 = gr.Textbox(label="prompt 4")
            btn = gr.Button("Go")

demo.launch()

Kolommen en nesting

Resultaat

Tabs & Accordion

Je kan gebruik van maken van tabbladen via with gr.Tab('tab_name')
Elk component kan je gebruiken in een tabblad

import numpy as np
import gradio as gr

def flip_text(x):
    return x[::-1]

def flip_image(x):
    return np.fliplr(x)

with gr.Blocks() as demo:
    gr.Markdown("Flip text or image files using this demo.")
    with gr.Tab("Flip Text"):
        text_input = gr.Textbox()
        text_output = gr.Textbox()
        text_button = gr.Button("Flip")
    with gr.Tab("Flip Image"):
        with gr.Row():
            image_input = gr.Image()
            image_output = gr.Image()
        image_button = gr.Button("Flip")

    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)

demo.launch()

Tabs & Accordion

Resultaat

En meer...

Gradio

Chatbots

Chatbots are a popular application of large language models. Using gradio, you can easily build a demo of your chatbot model and share that with your users, or try it yourself using an intuitive chatbot UI.

This tutorial uses gr.ChatInterface(), which is a high-level abstraction that allows you to create your chatbot UI fast, often with a single line of code.

Chat functie

Via gr.ChatInterface() definieer je eerst een chat functie.
De chat functie aanvaardt twee argumenten: message en history
- message: een str dat de input van de gebruiker voorstelt
- history: een list van de hele conversatie. Elk item bevat een list met de user input en het antwoord van de bot

Voorbeeld

import random
import gradio as gr

def alternatingly_agree(message, history):
    if len(history) % 2 == 0:
        return f"Yes, I do think that '{message}'"
    else:
        return "I don't think so"

gr.ChatInterface(alternatingly_agree).launch()

Aanpassen

Voeg een title en description toe
Voeg een theme of extra css toe
Voeg voorbeelden toe (cache voorbeelden)
Pas de tekst op de knoppen aan: submit_btn, retry_btn, undo_btn, clear_btn

gr.ChatInterface(
    yes_man,
    chatbot=gr.Chatbot(height=300),
    textbox=gr.Textbox(placeholder="Ask me a yes or no question", container=False, scale=7),
    title="Yes Man",
    description="Ask Yes Man any question",
    theme="soft",
    examples=["Hello", "Am I cool?", "Are tomatoes vegetables?"],
    cache_examples=True,
    retry_btn=None,
    undo_btn="Delete Previous",
    clear_btn="Clear",
).launch()

En meer...

Gradio

Deploy op Huggingface

Login Huggingface

Zorg dat je een huggingface account hebt
Installeer de huggingface CLI

pip install -U "huggingface_hub[cli]"

Eenmaal geïnstalleerd controleer of alles werkt

huggingface-cli --help

Maak een nieuwe token aan in Huggingface
Login via de huggingface CLI en plak je token wanneer ernaar gevraagd wordt - enter

huggingface-cli login

Login Huggingface

Voeg token toe aan git credential - enter
Je bent nu ingelogd

_|    _|  _|    _|    _|_|_|    _|_|_|  _|_|_|  _|      _|    _|_|_|      _|_|_|_|    _|_|      _|_|_|  _|_|_|_|
_|    _|  _|    _|  _|        _|          _|    _|_|    _|  _|            _|        _|    _|  _|        _|
_|_|_|_|  _|    _|  _|  _|_|  _|  _|_|    _|    _|  _|  _|  _|  _|_|      _|_|_|    _|_|_|_|  _|        _|_|_|
_|    _|  _|    _|  _|    _|  _|    _|    _|    _|    _|_|  _|    _|      _|        _|    _|  _|        _|
_|    _|    _|_|      _|_|_|    _|_|_|  _|_|_|  _|      _|    _|_|_|      _|        _|    _|    _|_|_|  _|_|_|_|

To login, `huggingface_hub` requires a token generated from https://huggingface.co/settings/tokens .
Token:
Add token as git credential? (Y/n)
Token is valid (permission: write).
Your token has been saved in your configured git credential helpers (store).
Your token has been saved to /home/wauplin/.cache/huggingface/token
Login successful

Space Setup

Navigeer naar Huggingface Spaces en klik op Create new Space
- Of navigeer meteen naar Create a new space
Vul in:
- Je Space Name
- Je space SDK (in ons geval Gradio)
- Welke hardware je wenst
- Of je space public of private is

Space Setup

Clone nu je space naar je lokaal toestel

git clone https://huggingface.co/spaces/timdpaep/testspace

Plak de voorgestelde code in een bestand app.py in je gekloonde folder

import gradio as gr

def greet(name):
    return "Hello " + name + "!!"

iface = gr.Interface(fn=greet, inputs="text", outputs="text")
iface.launch()

Push je code naar je online space

git add app.py
git commit -m "Add application file"
git push

Space Setup

Ga naar je online space, je applicatie is momenteel in status building.
Wacht tot het builden klaar is om je Gradio applicatie online te kunnen gebruiken.
Je kan je code offline aanpassen, maar ook online
- Ga in je space naar Files
- Klik op app.py
- Klik op edit