Gradio-Lite Gradio senza server che funziona interamente nel tuo browser

Gradio-Lite L'app senza server che funziona direttamente nel tuo browser

Gradio è una popolare libreria Python per creare applicazioni interattive di machine learning. Tradizionalmente, le applicazioni Gradio si basano sull’infrastruttura lato server per essere eseguite, il che può essere un ostacolo per gli sviluppatori che devono ospitare le proprie applicazioni.

Entra in scena Gradio-lite (@gradio/lite): una libreria che sfrutta Pyodide per portare Gradio direttamente nel tuo browser. In questo articolo, esploreremo cos’è @gradio/lite, vedremo un esempio di codice e illustreremo i vantaggi che offre per l’esecuzione di applicazioni Gradio.

Cos’è @gradio/lite?

@gradio/lite è una libreria JavaScript che consente di eseguire applicazioni Gradio direttamente nel tuo browser web. Ciò viene realizzato utilizzando Pyodide, un runtime Python per WebAssembly, che consente l’esecuzione di codice Python nell’ambiente del browser. Con @gradio/lite, puoi scrivere codice Python regolare per le tue applicazioni Gradio, che verranno eseguite in modo del tutto trasparente nel browser, senza la necessità di un’infrastruttura lato server.

Iniziare

Creiamo un’app Gradio “Hello World” in @gradio/lite

1. Importa JS e CSS

Inizia creando un nuovo file HTML, se non ne hai già uno. Importa il JavaScript e il CSS corrispondenti al pacchetto @gradio/lite utilizzando il seguente codice:

<html>    <head>        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />    </head></html>

Nota che dovresti generalmente utilizzare l’ultima versione di @gradio/lite disponibile. Puoi vedere le versioni disponibili qui.

2. Crea i tag <gradio-lite>

Inserisci da qualche parte nel corpo della tua pagina HTML (dove desideri che l’app Gradio venga visualizzata) i tag di apertura e chiusura <gradio-lite>.

<html>    <head>        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />    </head>    <body>        <gradio-lite>        </gradio-lite>    </body></html>

Nota: puoi aggiungere l’attributo theme al tag <gradio-lite> per forzare il tema scuro o chiaro (per impostazione predefinita, rispetta il tema di sistema). Ad esempio.

<gradio-lite theme="dark">...</gradio-lite>

3. Scrivi la tua app Gradio all’interno dei tag

Ora, scrivi la tua app Gradio come faresti normalmente, in Python! Ricorda che poiché si tratta di Python, la spaziatura e l’indentazione sono importanti.

<html>    <head>        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />    </head>    <body>        <gradio-lite>        import gradio as gr        def greet(name):            return "Ciao, " + name + "!"                gr.Interface(greet, "textbox", "textbox").launch()        </gradio-lite>    </body></html>

Ecco fatto! Ora dovresti essere in grado di aprire la tua pagina HTML nel browser e vedere l’app Gradio renderizzata! Tieni presente che potrebbe richiedere un po ‘di tempo per il caricamento iniziale dell’app Gradio poiché Pyodide può richiedere del tempo per l’installazione nel tuo browser.

Nota sul debug: per vedere eventuali errori nella tua applicazione Gradio-lite, apri l’ispettore nel tuo browser web. Tutti gli errori (compresi gli errori Python) verranno stampati lì.

Altri esempi: Aggiunta di file e requisiti aggiuntivi

Cosa succede se desideri creare un’app Gradio che si estende su più file? O che ha requisiti Python personalizzati? Entrambi sono possibili con @gradio/lite!

File multipli

L’aggiunta di file multipli all’interno di un’app @gradio/lite è molto semplice: utilizza il tag <gradio-file>. Puoi avere quanti tag <gradio-file> desideri, ma ognuno deve avere un attributo name e il punto di ingresso della tua app Gradio deve avere l’attributo entrypoint.

Ecco un esempio:

<gradio-lite><gradio-file name="app.py" entrypoint>import gradio as grfrom utils import adddemo = gr.Interface(fn=add, inputs=["number", "number"], outputs="number")demo.launch()</gradio-file><gradio-file name="utils.py" >def add(a, b):    return a + b</gradio-file></gradio-lite>

Requisiti aggiuntivi

Se la tua app Gradio ha requisiti aggiuntivi, è generalmente possibile installarli nel browser utilizzando micropip. Abbiamo creato un wrapper per rendere tutto ciò particolarmente conveniente: elenca semplicemente i tuoi requisiti nella stessa sintassi di un file requirements.txt e racchiudili tra i tag <gradio-requirements>.

Ecco, installiamo transformers_js_py per eseguire direttamente nel browser un modello di classificazione del testo!

<gradio-lite><gradio-requirements>transformers_js_py</gradio-requirements><gradio-file name="app.py" entrypoint>from transformers_js import import_transformers_jsimport gradio as grtransformers = await import_transformers_js()pipeline = transformers.pipelinepipe = await pipeline('sentiment-analysis')async def classify(text):    return await pipe(text)demo = gr.Interface(classify, "textbox", "json")demo.launch()</gradio-file></gradio-lite>

Provalo: Puoi vedere questo esempio in esecuzione in questo spazio statico di Hugging Face, che ti consente di ospitare applicazioni web statiche (serverless) gratuitamente. Visita la pagina e sarai in grado di eseguire un modello di machine learning senza accesso a Internet!

Vantaggi dell’utilizzo di @gradio/lite

1. Distribuzione serverless

Il vantaggio principale di @gradio/lite è che elimina la necessità di infrastrutture di server. Ciò semplifica la distribuzione, riduce i costi correlati al server e facilita la condivisione delle applicazioni Gradio con gli altri.

2. Basso livello di latenza

Utilizzando il browser, @gradio/lite offre interazioni a bassa latenza per gli utenti. Non è necessario che i dati viaggino da e verso un server, il che si traduce in risposte più veloci e un’esperienza utente più fluida.

3. Privacy e sicurezza

Poiché tutto il processo avviene all’interno del browser dell’utente, @gradio/lite migliora la privacy e la sicurezza. I dati dell’utente rimangono sul suo dispositivo, offrendo tranquillità riguardo alla gestione dei dati.

Limitazioni

  • Attualmente, la limitazione più importante nell’utilizzo di @gradio/lite è che le tue app Gradio richiederanno generalmente più tempo (di solito da 5 a 15 secondi) per caricarsi inizialmente nel browser. Ciò perché il browser deve caricare il runtime di Pyodide prima di poter renderizzare il codice Python.

  • Non tutti i pacchetti Python sono compatibili con Pyodide. Sebbene gradio e molti altri pacchetti popolari (tra cui numpy, scikit-learn e transformers-js) possano essere installati in Pyodide, se la tua app ha molte dipendenze, vale la pena verificare se le dipendenze sono incluse in Pyodide o se possono essere installate con micropip.

Provalo!

Puoi provare subito @gradio/lite copiando e incollando questo codice in un file locale index.html e aprendolo con il tuo browser:

<html>    <head>        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />    </head>    <body>        <gradio-lite>        import gradio as gr        def greet(name):            return "Ciao, " + name + "!"                gr.Interface(greet, "textbox", "textbox").launch()        </gradio-lite>    </body></html>

Abbiamo anche creato un playground sul sito web di Gradio che ti permette di modificare il codice interattivamente e vedere i risultati immediatamente!

Playground: https://www.gradio.app/playground