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

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

pip install -U "huggingface_hub[cli]"
  • Eenmaal geïnstalleerd controleer of alles werkt
huggingface-cli --help
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

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

1

2

Technology 2 - Gradio

By timdpaep

Made with Slides.com

Technology 2 - Gradio

  • 395

More from timdpaep