Streamen en cachen met Supabase
Handleiding · Hierbij wordt ervan uitgegaan dat je de ElevenAPI quickstart hebt voltooid en een Supabase-account hebt.
Inleiding
In deze handleiding leer je hoe je een edge API bouwt om spraak te genereren, streamen, opslaan en cachen met Supabase Edge Functions, Supabase Storage en ElevenLabs.
Vereisten
- Een ElevenLabs-account met een API-sleutel.
- Een Supabase-account (je kunt je via database.new aanmelden voor een gratis account).
- De Supabase CLI geïnstalleerd op je computer.
- De Deno runtime geïnstalleerd op je computer en optioneel ingesteld in je favoriete IDE.
Instellen
Lokaal een Supabase-project maken
Voer na het installeren van de Supabase CLI de volgende opdracht uit om lokaal een nieuw Supabase-project te maken:
De storagebucket configureren
Je kunt de Supabase CLI automatisch een storagebucket laten genereren door deze configuratie toe te voegen aan het bestand config.toml:
Wanneer je supabase start uitvoert, wordt hiermee een nieuwe storagebucket gemaakt in je lokale Supabase-
project. Als je deze wilt pushen naar je gehoste Supabase-project, kun je supabase seed buckets --linked uitvoeren.
Achtergrondtaken voor Supabase Edge Functions configureren
Om achtergrondtaken in Supabase Edge Functions te gebruiken wanneer je lokaal ontwikkelt, moet je de volgende configuratie toevoegen aan het bestand config.toml:
Wanneer je met het beleid per_worker werkt, wordt Function niet automatisch opnieuw geladen na wijzigingen. Je moet
deze handmatig herstarten door supabase functions serve uit te voeren.
Een Supabase Edge Function maken voor het genereren van spraak
Maak een nieuwe Edge Function door de volgende opdracht uit te voeren:
Als je VS Code of Cursor gebruikt, selecteer je y wanneer de CLI vraagt: “Generate VS Code settings for Deno? [y/N]”!
De omgevingsvariabelen instellen
Maak in de directory supabase/functions een nieuw .env-bestand en voeg de volgende variabelen toe:
Afhankelijkheden
Het project gebruikt een aantal afhankelijkheden:
- De bibliotheek @supabase/supabase-js om met de Supabase-database te werken.
- De ElevenLabs JavaScript SDK om met de text-to-speech API te werken.
- De open-sourcebibliotheek object-hash om een hash uit de requestparameters te genereren.
Omdat Supabase Edge Function de Deno runtime gebruikt, hoef je de afhankelijkheden niet te installeren. Je kunt ze via het voorvoegsel npm: importeren.
De Supabase Edge Function coderen
Voeg de volgende code toe aan je nieuw gemaakte bestand supabase/functions/text-to-speech/index.ts:
Verdieping in de code
Er zijn enkele zaken in de code die het vermelden waard zijn. Laten we ze stap voor stap doornemen.
Het binnenkomende request afhandelen
Gebruik de handler Deno.serve om het binnenkomende request af te handelen. In de demo valideren we de request origin niet, maar je kunt bijvoorbeeld de request origin valideren, of een gebruikerstoegangstoken toevoegen en dit valideren met Supabase Auth.
Uit het binnenkomende request haalt de functie de parameters text en voiceId. De parameter voiceId is optioneel en heeft standaard de ElevenLabs-ID voor de stem “Allison”.
Met de bibliotheek object-hash genereert de functie een hash uit de requestparameters. Deze hash wordt gebruikt om te controleren op bestaande audiobestanden in Supabase Storage.
Controleren op bestaand audiobestand in Supabase Storage
Supabase Storage heeft een slimme CDN ingebouwd, waarmee je je bestanden eenvoudig kunt cachen en aanbieden.
Hier controleert de functie op een bestaand audiobestand in Supabase Storage. Als het bestand bestaat, retourneert de functie het bestand uit Supabase Storage.
Spraak als stream genereren en opsplitsen in twee vertakkingen
Met de streamingmogelijkheden van de ElevenLabs API genereert de functie een stream. Het voordeel is dat je, ook bij grotere teksten, de audio onmiddellijk naar je gebruiker kunt streamen en de stream vervolgens op de achtergrond kunt uploaden naar Supabase Storage.
Dit zorgt voor de best mogelijke gebruikerservaring, waardoor zelfs grote tekstblokken magisch snel aanvoelen. Dit gebeurt op regel 17, waar de methode stream.tee() de readablestream opsplitst in twee vertakkingen: één voor de browser en één voor Supabase Storage.
De audiostream op de achtergrond uploaden naar Supabase Storage
De methode EdgeRuntime.waitUntil op regel 20 in de vorige stap wordt gebruikt om de audiostream op de achtergrond te uploaden naar Supabase Storage met de functie uploadAudioToStorage. Hierdoor kan de functie het streamingantwoord onmiddellijk aan de browser retourneren terwijl de audio naar Supabase Storage wordt geüpload.
Zodra het storageobject is gemaakt, retourneert de functie het audiobestand via de Supabase Storage CDN wanneer je gebruikers de volgende keer een request met dezelfde parameters doen.
Lokaal uitvoeren
Voer de volgende opdrachten uit om de functie lokaal uit te voeren:
Zodra de lokale Supabase-stack actief is, voer je de volgende opdracht uit om de functie te starten en de logs te bekijken:
Probeer het
Ga naar http://127.0.0.1:54321/functions/v1/text-to-speech?text=hello%20world om de functie in actie te horen.
Ga daarna naar http://127.0.0.1:54323/project/default/storage/buckets/audio om het audiobestand in je lokale Supabase Storage-bucket te zien.
Deployen naar Supabase
Als je dat nog niet hebt gedaan, maak dan een nieuw Supabase-account aan op database.new en koppel het lokale project aan je Supabase-account:
Voer daarna de volgende opdracht uit om de functie te deployen:
De function secrets instellen
Nu je al je secrets lokaal hebt ingesteld, kun je de volgende opdracht uitvoeren om de secrets in je Supabase-project in te stellen:
De functie testen
De functie is zo ontworpen dat deze rechtstreeks als bron voor een <audio>-element kan worden gebruikt.