Streaming och cachning med Supabase
Guide · Förutsätter att du har slutfört ElevenAPI- snabbstarten och har ett Supabase-konto.
Introduktion
I den här guiden lär du dig att bygga ett edge-API för att generera, streama, lagra och cacha tal med Supabase Edge Functions, Supabase Storage och ElevenLabs.
Krav
- Ett ElevenLabs-konto med en API-nyckel.
- Ett Supabase-konto (du kan registrera ett kostnadsfritt konto via database.new).
- Supabase CLI installerat på din dator.
- Deno runtime installerat på din dator och valfritt konfigurerat i din favorit-IDE.
Konfiguration
Skapa ett Supabase-projekt lokalt
När du har installerat Supabase CLI kör du följande kommando för att skapa ett nytt Supabase-projekt lokalt:
Konfigurera lagrings-bucketen
Du kan konfigurera Supabase CLI så att den automatiskt skapar en lagrings-bucket genom att lägga till följande konfiguration i filen config.toml:
När du kör supabase start skapas en ny lagrings-bucket i ditt lokala Supabase-
projekt. Om du vill skicka detta till ditt hostade Supabase-projekt kan du köra supabase seed buckets --linked.
Konfigurera bakgrundsaktiviteter för Supabase Edge Functions
För att använda bakgrundsaktiviteter i Supabase Edge Functions vid lokal utveckling behöver du lägga till följande konfiguration i filen config.toml:
När du kör med policyn per_worker laddas Function inte om automatiskt vid ändringar. Du måste
starta om den manuellt genom att köra supabase functions serve.
Skapa en Supabase Edge Function för talgenerering
Skapa en ny Edge Function genom att köra följande kommando:
Om du använder VS Code eller Cursor väljer du y när CLI frågar “Generate VS Code settings for Deno? [y/N]”!
Konfigurera miljövariablerna
Skapa en ny .env-fil i katalogen supabase/functions och lägg till följande variabler:
Beroenden
Projektet använder ett par beroenden:
- Biblioteket @supabase/supabase-js för att interagera med Supabase-databasen.
- ElevenLabs JavaScript SDK för att interagera med text-till-tal-API:et.
- Open source-biblioteket object-hash för att generera en hash från förfrågningsparametrarna.
Eftersom Supabase Edge Function använder Deno runtime behöver du inte installera beroendena. Du kan i stället importera dem med prefixet npm:.
Koda Supabase Edge Function
Lägg till följande kod i den nyligen skapade filen supabase/functions/text-to-speech/index.ts:
Djupdykning i koden
Det finns ett par saker i koden som är värda att notera. Vi går igenom den steg för steg.
Hantera den inkommande förfrågan
Använd hanteraren Deno.serve för att hantera den inkommande förfrågan. I demon validerar vi inte förfrågans ursprung, men du kan till exempel validera ursprunget eller lägga till en användaråtkomsttoken och validera den med Supabase Auth.
Från den inkommande förfrågan extraherar funktionen parametrarna text och voiceId. Parametern voiceId är valfri och använder som standard ElevenLabs-ID:t för rösten “Allison”.
Med biblioteket object-hash genererar funktionen en hash från förfrågningsparametrarna. Den här hashen används för att kontrollera om det finns befintliga ljudfiler i Supabase Storage.
Kontrollera om det finns en befintlig ljudfil i Supabase Storage
Supabase Storage har ett smart CDN inbyggt som gör det enkelt att cacha och leverera dina filer.
Här kontrollerar funktionen om det finns en befintlig ljudfil i Supabase Storage. Om filen finns returnerar funktionen filen från Supabase Storage.
Generera tal som en ström och dela upp den i två grenar
Med streamingfunktionerna i ElevenLabs API genererar funktionen en ström. Fördelen är att du kan börja streama ljudet tillbaka till användaren direkt, även för längre text, och sedan ladda upp strömmen till Supabase Storage i bakgrunden.
Det ger bästa möjliga användarupplevelse och gör att även stora textblock känns magiskt snabba. Det sker på rad 17, där metoden stream.tee() delar upp läsströmmen i två grenar: en för webbläsaren och en för Supabase Storage.
Ladda upp ljudströmmen till Supabase Storage i bakgrunden
Metoden EdgeRuntime.waitUntil på rad 20 i föregående steg används för att ladda upp ljudströmmen till Supabase Storage i bakgrunden med funktionen uploadAudioToStorage. Det gör att funktionen kan returnera streamingsvaret direkt till webbläsaren medan ljudet laddas upp till Supabase Storage.
När lagringsobjektet har skapats kommer funktionen nästa gång dina användare gör en förfrågan med samma parametrar att returnera ljudfilen från Supabase Storage CDN.
Kör lokalt
Kör följande kommandon för att köra funktionen lokalt:
När den lokala Supabase-stacken är igång kör du följande kommando för att starta funktionen och se loggarna:
Prova själv
Gå till http://127.0.0.1:54321/functions/v1/text-to-speech?text=hello%20world för att höra funktionen i praktiken.
Gå sedan till http://127.0.0.1:54323/project/default/storage/buckets/audio för att se ljudfilen i din lokala Supabase Storage-bucket.
Distribuera till Supabase
Om du inte redan har gjort det skapar du ett nytt Supabase-konto på database.new och länkar det lokala projektet till ditt Supabase-konto:
Kör sedan följande kommando för att distribuera funktionen:
Ange funktionens hemligheter
Nu när du har angett alla hemligheter lokalt kan du köra följande kommando för att ange hemligheterna i ditt Supabase-projekt:
Testa funktionen
Funktionen är utformad så att den kan användas direkt som källa för ett <audio>-element.