Gradio: applicazioni web in python per AI [parte1]

Scrivere applicazioni web per i nostri modelli di machine learning e/o di intelligenza artificiale può richiedere molto tempo e competenze che non sono in nostro possesso. Per snellire e velocizzare questo compito ci viene in aiuto Gradio, una libreria Python pensata per creare applicazioni web con poche righe di codice. Scopriamo le sue funzionalità base con alcuni esempi.

Share

Reading time: 6 minutes

I data scientists si occupano principalmente di sviluppare algoritmi e/o framework per analizzare i dati di loro interesse. Tuttavia, il risultato del loro lavoro molte volte si traduce in grafici e tabelle che mostrano i risultati ottenuti con diversi esperimenti, configurazioni e dati. Questo aspetto può risultare limitante in quanto il loro prodotto rimane del codice difficilmente utilizzabile da altri. Sarebbe, invece, molto più utile fornire ciò che è stato sviluppato mediante un’applicazione web in modo tale da dare più visibilità ai risultati ma soprattutto sfruttare l’algoritmo o il framework sviluppato in un ambiente user-friendly.

Ovviamente sviluppare applicazioni web richiede tempo, ma anche competenze tecniche che a volte i data scientists non padroneggiano a dovere. Per questo motivo sono nati dei frameworks che permettono di sviluppare in maniera veloce semplice applicazioni web. Abbiamo già visto negli articoli Streamlit: costruire una Web App in pochi minuti, Streamlit: come migliorare l’esperienza utente di una web app e OpenCV e Streamlit: creare un’app di photo editing Streamlit, una libreria Python utilizzata per questo scopo. In questo articolo analizzeremo, invece, Gradio che in modo analogo permette di creare applicazioni web ma che è più orientato a fornire interfacce per sfruttare modelli di intelligenza artificiale o di machine learning.

Che cos’è Gradio?

Gradio è un pacchetto Python open-source che consente di creare rapidamente componenti UI facili da usare e personalizzabili per il proprio modello di Machine Learning (ML), Deep Learning  e/o Large Language Model (LLM), per qualsiasi API o anche per una funzione Python da noi create, utilizzando poche righe di codice. È, inoltre, possibile integrare l’interfaccia grafica di Gradio direttamente nel proprio notebook Jupyter o condividerla come link con chiunque. Prima di addentrarci nei componenti di Gradio vediamo come impostare il nostro ambiente di lavoro

Installazione di Gradio

L’installazione di Gradio può essere effettuata utilizzando pip dal prompt dei comandi o in Google Colab.

				
					pip install gradio
				
			

Se si utilizza un notebook Jupyter, si può anche digitare quanto segue:

				
					!pip install gradio
				
			

Gli esempi che vedremo in seguito saranno eseguiti in Colab.

Come eseguire le applicazioni Gradio

Ora che abbiamo installato Gradio nel nostro sistema, cominciamo a vedere come eseguire le applicazioni Gradio.

Consideriamo una semplice applicazione Python che prende in input il nome di un utente e genera un messaggio di saluto per l’utente.

				
					import gradio as gra
def user_greeting(name):
    return "Hi! " + name + " Welcome to your first Gradio application!😎"
    
#define gradio interface and other parameters
app =  gra.Interface(fn = user_greeting, inputs="text", outputs="text")
app.launch()
				
			

Dopo aver importato la libreria Gradio, ed eventualmente le librarie che sono necessarie, definiamo una funzione che restituisce un messaggio personalizzato in base al parametro passato. A questo punto nel corpo principale dello script creiamo una variabile app che contiene la nostra interfaccia. Per eseguirla sarà necessario solamente usare la funzione launch() associata alla variabile app. Ecco il risultato che otterremo.

Eseguire l’applicazione dal prompt dei comandi

È possibile eseguire l’applicazione anche utilizzando il prompt dei comandi. Dal prompt dei comandi, eseguire:

				
					gradio app.py
				
			

Per visualizzare l’applicazione, aprire l’URL: http://localhost:7862. Questo potrebbe essere diverso nel vostro caso.

Eseguire l’applicazione da Jupyter Notebook

In alternativa, è possibile eseguire il codice in Jupyter Notebook. In questo caso verrà creato un nuovo widget.

Classe Interface

Nell’esempio precedente abbiamo visto com’è semplice creare un’interfaccia in gradio. Interface, infatti, è la classe principale di alto livello che consente di creare l’interfaccia grafica per le funzioni e i modelli di machine learning. Dall’applicazione che abbiamo definito sopra, noterete che la classe richiede tre parametri, cioè Interface(fn, input, output, …).

fn è una funzione arbitraria o il modello di machine che viene incluso nell’interfaccia Gradio. La funzione accetta almeno un parametro e restituisce uno o più valori:

  • Input: definisce il tipo di componente di input. Gradio fornisce molti componenti precostituiti, come testo, immagine o microfono. Il numero di componenti di ingresso deve essere uguale al numero di parametri specificati in fn. Se gli ingressi sono impostati su None, vengono mostrati solo i componenti di uscita.
  • Output: specifica il tipo o i tipi di componenti di output. Gradio fornisce molti componenti di output predefiniti, come immagini, testi o etichette. Il numero di componenti di uscita deve confrontarsi con il numero di valori restituiti da fn. Se le uscite sono impostate su None, vengono visualizzati solo i componenti di ingresso.

Per ulteriori parametri e le loro funzioni, vi consigliamo di consultare la documentazione di Gradio.

E’ possibile anche creare diverse interfacce. In questo caso, Gradio fornisce classi come TabbedInterface, Parallel e Series per combinarle insieme.

Ad esempio, partendo dall’applicazione di benvenuto, possiamo definire un’altra funzione arbitraria che visualizzi ciò che l’utente desidera fare e utilizzare TabbedInterface per combinare le interfacce.

				
					import gradio as gr

title = "Multiple Interfaces"

#app 1
def user_greeting(name):
    return "Hi! " + name + " Welcome to your first Gradio application!😎"

#app 2
def user_help(do):
    return "So today we will do " + do + "using Gradio. Great choice!"

#interface 1
app1 =  gr.Interface(fn = user_greeting, inputs="text", outputs="text")
#interface 2

app2 =  gr.Interface(fn = user_help, inputs="text", outputs="text")

demo = gr.TabbedInterface([app1, app2], ["Welcome", "What to do"])

demo.launch()
				
			

L’applicazione risultate sarà come segue.

Componenti

Negli esempi precedenti abbiamo usato solamente componenti semplici di unput e output.  Gradio fonrisce molte altri componenti precostituiti per varie funzioni. Questi componenti vanno dal testo e dai media come audio, immagini e video ai grafici creati con pacchetti come Plotly e Altair. In questa sezione esploreremo come Gradio visualizza i vari componenti.

Visualizzazione del testo

Il testo può essere visualizzato utilizzando gradio.Text o gradio.Textbox. Ciascun metodo fornisce un’area di testo per inserire stringhe o visualizzare output di stringhe.

				
					#display a text
import gradio as gr

def text_display(text):
    return text

demo = gr.Interface(text_display, gr.Text(), "text")
#alternatively use gr.TextBox()
demo.launch()

				
			

Visualizzazione dei dati

Tipi di dati come “str”, “number”, “bool”, “date” e “markdown” possono essere visualizzati in Gradio. Per impostazione predefinita, si utilizza un DataFrame di Pandas.

È possibile ottenere altri tipi di dati specificando il tipo di output desiderato. Ad esempio, è possibile ottenere un array NumPy quando si specifica numpy e array per un array Python.

				
					#display a data
import gradio as gr

def data_display(input_img):
    return input_img

demo = gr.Interface(data_display, gr.Dataframe(), "dataframe")
demo.launch()

				
			

Visualizzazione di media

In Gradio è possibile visualizzare media come le immagini. Inoltre, è possibile trasformare le immagini applicando un filtro come quello seppia o blu. È possibile visualizzare i media passando l’input corretto come Immagine, Video, Audio o File.

L’esempio seguente mostra come visualizzare un’immagine dopo aver applicato un filtro di tonalità blu.

				
					import numpy as np
import gradio as gr

def blue_hue(input_img):
    blue_hue_filter = np.array([
            [0.272, 0.534, 0.131], 
            [0.349, 0.686, 0.168],
            [0.393, 0.769, 0.189]])
    blue_hue_img = input_img.dot(blue_hue_filter.T)
    blue_hue_img /= blue_hue_img.max()
    return blue_hue_img

demo = gr.Interface(blue_hue, gr.Image(), "image")
demo.launch()

				
			

In alternativa, è possibile visualizzare i media video come segue, senza alcuna pre-elaborazione:

				
					#display a video
import gradio as gr

def video_display(input_img):
    return input_img

demo = gr.Interface(video_display, gr.Video(), "video")
demo.launch()
				
			

Visualizzazione del codice

Possiamo utilizzare gradio.Textbox per visualizzare del codice sorgente di nostro piacimento.

				
					import gradio as gr
#define your code
#average of a list
code = '''def cal_average(numbers):
    sum_number = 0
    for t in numbers:
        sum_number = sum_number + t           

    average = sum_number / len(numbers)
    return average'''

with gr.Blocks() as demo:
    gr.Textbox(code)
    
demo.launch()
				
			

Visualizzazione dell’avanzamento

Per mostrare l’avanzamento e lo stato del processo in corso, specificare show_progress = ‘full’ nei componenti che supportano change(). Ad esempio in gradio.Textbox.change() o gradio.Slider.change().

Lo stato del processo sottostante viene visualizzato specificando il parametro show_progess in change().

				
					import gradio as gr

def show_text(x):
    return x


demo = gr.Blocks()

with demo:
    gr.Markdown(
        """
    # Show text!
    Start typing below to see the output.
    """
    )
    input = gr.Textbox(placeholder="Flip this text")
    output = gr.Textbox()

    input.change(fn=show_text, inputs=input, outputs=output, show_progress = 'full')

demo.launch()
				
			

Come si può notare ogni volta che si digita qualcosa viene ricaricata l’interfaccia di output. Se vogliamo evitare questo comportamento dobbiamo utilizzare show_progress = ‘hidden’ si otterrà il seguente risultato:

Visualizzazione dei grafici

Gli elementi dei grafici vengono visualizzati in Gradio utilizzando il componente gradio.Plot(). Dopo aver creato il grafico, è possibile specificare fn = your_ploting_function, input = None e output = gradio.Plot().

Di seguito riportiamo il codice per generare un grafico utilizzando la libraria Plotly.

				
					import plotly.express as px
import pandas as pd
def plotly_plot():
    # prepare some data
    x = ["Math", "Business", "Statistics", "IT", "Commerce"]
    y = [68, 73, 82, 74, 85]
    data = pd.DataFrame()
    data['Subject'] = x
    data['Score'] = y
    # create a new plot
    p = px.bar(data, x='Subject', y='Score')

    return p

# show the results
outputs = gr.Plot()

demo = gr.Interface(fn=plotly_plot, inputs=None, outputs=outputs)

demo.launch()
				
			

Questo sarà il risultato finale.

Possiamo anche utilizzare Matplotlib per generare i grafici che vogliamo visualizzare. Di seguito il codice per generare il nostro grafico a barre.

				
					import matplotlib.pyplot as plt
def plt_plot():
    # prepare some data
    x = ["Math", "Business", "Statistics", "IT", "Commerce"]
    y = [68, 73, 82, 74, 85]
    # create a new plot
    plt.rcParams['figure.figsize'] = 6,4
    fig = plt.figure()
    ax = fig.add_axes([0,0,1,1])
    ax.bar(x, y)
    plt.title("Marks per subject")
    plt.xlabel("Subject")
    plt.ylabel("Score")

    return fig

# show the results
outputs = gr.Plot()

demo = gr.Interface(fn=plt_plot, inputs=None, outputs=outputs)

demo.launch()
				
			

Il risultato sarà il seguente.

Event listeners

Un event listener avvia un processo predefinito se si verifica un evento specifico. Pertanto, i vari componenti hanno diversi ascoltatori di eventi. Ad esempio, il componente gradio.Video() supporta un ascoltatore di eventi play(), attivato quando l’utente preme play, mentre gradio.Text() supporta un ascoltatore di eventi change(), che modifica il testo durante la digitazione.

				
					import gradio as gr

def welcome(name):
    return f"Welcome back, {name}!"

with gr.Blocks() as demo:
    gr.Markdown(
    """
    Type anything to see the output
    """)
    inp = gr.Textbox(placeholder="Enter your name")
    out = gr.Textbox()
    inp.change(welcome, inp, out)

demo.launch()
				
			

Questo sarà il risultato finale.

Componenti di streaming

Durante lo streaming, i dati vengono inviati continuamente al backend mentre l’interfaccia è in esecuzione continua. Alcuni componenti come Audio hanno una modalità di streaming in modalità microfono e anche il componente Immagine ha una webcam per lo streaming.

Durante lo streaming sono necessarie ulteriori autorizzazioni per l’accesso all’audio e alla telecamera, a seconda del tipo di streaming.

				
					import gradio as gr
import numpy as np

def flip(im):
    return np.flipud(im)

demo = gr.Interface(
    flip, 
    gr.Image(sources="webcam", streaming=True), 
    "image",
    live=True
)
demo.launch()
				
			

Ecco il risultato che otteniamo con il codice riportato in precedenza.

More To Explore

Python

Pandas: analisi dati con Python [parte 1]

I data scientists necessitano continuamente di leggere, manipolare e analizzare i dati. In molti casi si utilizzano dei tools specifici, ma a volte è necessario sviluppare il proprio codice. Per far ciò la libreria Pandas ci viene in aiuto. Scopriamo le sue strutture dati, come possiamo leggere i dati da diversi fonti e manipolarli per ii nostri scopi.

Intelligenza artificiale

Gradio: applicazioni web in python per AI [parte 3]

Con Gradio è possibile creare applicazioni web per i nostri modelli di machine learning e AI in poche righe di codice. Mediante alcuni esempi, vedremo le funzionalità avanzate disponibili, quali l’autenticazione, il caching e l’elaborazione dei file in ingresso. Costruiremo anche un chatbot e un classificatore di immagini partendo da modelli pre-addestrati. Infine discuteremo come distribuire il nostro progetto in pochi semplici passi.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Progetta con MongoDB!!!

Acquista il nuovo libro che ti aiuterà a usare correttamente MongoDB per le tue applicazioni. Disponibile ora su Amazon!

Design with MongoDB

Design with MongoDB!!!

Buy the new book that will help you to use MongoDB correctly for your applications. Available now on Amazon!