Streaming e caching con Supabase
Guida pratica · Presuppone che tu abbia completato la guida rapida di ElevenAPI e disponga di un account Supabase.
Introduzione
In questa guida imparerai a creare un’API edge per generare, trasmettere in streaming, archiviare e memorizzare nella cache il parlato usando Supabase Edge Functions, Supabase Storage ed ElevenLabs.
Requisiti
- Un account ElevenLabs con una chiave API.
- Un account Supabase (puoi creare un account gratuito tramite database.new).
- La CLI di Supabase installata sul tuo computer.
- Il runtime Deno installato sul tuo computer e, facoltativamente, configurato nel tuo IDE preferito.
Configurazione
Crea un progetto Supabase in locale
Dopo aver installato la CLI di Supabase, esegui il comando seguente per creare un nuovo progetto Supabase in locale:
Configura il bucket di storage
Puoi configurare la CLI di Supabase affinché generi automaticamente un bucket di storage aggiungendo questa configurazione al file config.toml:
Eseguendo supabase start verrà creato un nuovo bucket di storage nel tuo progetto Supabase
locale. Se vuoi inviarlo al tuo progetto Supabase fornito, puoi eseguire supabase seed buckets --linked.
Configura le attività in background per Supabase Edge Functions
Per usare le attività in background in Supabase Edge Functions durante lo sviluppo locale, devi aggiungere la seguente configurazione al file config.toml:
Quando esegui con la policy per_worker, la Function non verrà ricaricata automaticamente dopo le modifiche. Dovrai
riavviarla manualmente eseguendo supabase functions serve.
Crea una Supabase Edge Function per la generazione del parlato
Crea una nuova Edge Function eseguendo il comando seguente:
Se usi VS Code o Cursor, seleziona y quando la CLI chiede “Generate VS Code settings for Deno? [y/N]”!
Configura le variabili d’ambiente
All’interno della directory supabase/functions, crea un nuovo file .env e aggiungi le seguenti variabili:
Dipendenze
Il progetto usa alcune dipendenze:
- La libreria @supabase/supabase-js per interagire con il database Supabase.
- L’SDK JavaScript di ElevenLabs per interagire con l’API Text to Speech.
- Il pacchetto open source object-hash per generare un hash dai parametri della richiesta.
Poiché Supabase Edge Function usa il runtime Deno, non devi installare le dipendenze: puoi invece importarle tramite il prefisso npm:.
Scrivi il codice della Supabase Edge Function
Nel file appena creato supabase/functions/text-to-speech/index.ts, aggiungi il seguente codice:
Analisi approfondita del codice
Ci sono alcuni aspetti del codice che vale la pena notare. Vediamoli passo dopo passo.
Gestisci la richiesta in arrivo
Per gestire la richiesta in arrivo, usa l’handler Deno.serve. Nella demo non convalidiamo l’origine della richiesta, ma puoi ad esempio convalidarla oppure aggiungere un token di accesso utente e convalidarlo con Supabase Auth.
Dalla richiesta in arrivo, la funzione estrae i parametri text e voiceId. Il parametro voiceId è facoltativo e usa per impostazione predefinita l’ID ElevenLabs della voce “Allison”.
Usando la libreria object-hash, la funzione genera un hash dai parametri della richiesta. Questo hash viene usato per verificare la presenza di file audio esistenti in Supabase Storage.
Verifica la presenza di un file audio in Supabase Storage
Supabase Storage include una CDN intelligente integrata che ti consente di memorizzare facilmente i file nella cache e fornirli.
Qui, la funzione verifica la presenza di un file audio in Supabase Storage. Se il file esiste, la funzione restituisce il file da Supabase Storage.
Genera il parlato come stream e dividilo in due rami
Usando le capacità di streaming dell’API ElevenLabs, la funzione genera uno stream. Il vantaggio è che, anche con testi più lunghi, puoi iniziare subito a trasmettere l’audio in streaming al tuo utente e caricare poi lo stream su Supabase Storage in background.
Questo offre la migliore esperienza utente possibile, facendo sembrare incredibilmente rapidi anche grandi blocchi di testo. Il punto chiave è alla riga 17, dove il metodo stream.tee() divide il readablestream in due rami: uno per il browser e uno per Supabase Storage.
Carica lo stream audio su Supabase Storage in background
Il metodo EdgeRuntime.waitUntil alla riga 20 del passaggio precedente viene usato per caricare lo stream audio su Supabase Storage in background tramite la funzione uploadAudioToStorage. Questo consente alla funzione di restituire immediatamente la risposta in streaming al browser mentre l’audio viene caricato su Supabase Storage.
Una volta creato l’oggetto di storage, la prossima volta che gli utenti effettueranno una richiesta con gli stessi parametri, la funzione restituirà il file audio dalla CDN di Supabase Storage.
Esegui in locale
Per eseguire la funzione in locale, esegui i seguenti comandi:
Una volta avviato lo stack Supabase locale, esegui il comando seguente per avviare la funzione e visualizzare i log:
Provalo
Vai a http://127.0.0.1:54321/functions/v1/text-to-speech?text=hello%20world per ascoltare la funzione in azione.
Poi vai a http://127.0.0.1:54323/project/default/storage/buckets/audio per vedere il file audio nel bucket Supabase Storage locale.
Esegui il deploy su Supabase
Se non l’hai già fatto, crea un nuovo account Supabase su database.new e collega il progetto locale al tuo account Supabase:
Una volta fatto, esegui il comando seguente per distribuire la funzione:
Imposta i secret della funzione
Ora che hai configurato tutti i secret in locale, puoi eseguire il comando seguente per impostarli nel tuo progetto Supabase:
Testa la funzione
La funzione è progettata per poter essere usata direttamente come sorgente di un elemento <audio>.