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.
