Streaming i cache'owanie z Supabase
Generuj i streamuj mowę przez Supabase Edge Functions. Przechowuj mowę w Supabase Storage i cache’uj odpowiedzi przez wbudowane CDN.
Przewodnik · Zakłada, że masz za sobą szybki start ElevenAPI i konto Supabase.
Wprowadzenie
Z tego przewodnika dowiesz się, jak zbudować brzegowe API do generowania, przesyłania strumieniowego, przechowywania i buforowania mowy za pomocą Supabase Edge Functions, Supabase Storage i ElevenLabs.
Wymagania
- Konto ElevenLabs z kluczem API.
- Konto Supabase (bezpłatne konto założysz przez database.new).
- Zainstalowane na komputerze Supabase CLI.
- Zainstalowane na komputerze środowisko Deno oraz opcjonalnie skonfigurowane w ulubionym IDE.
Konfiguracja
Utwórz lokalny projekt Supabase
Po zainstalowaniu Supabase CLI uruchom poniższe polecenie, aby lokalnie utworzyć nowy projekt Supabase:
Skonfiguruj bucket magazynu
Możesz skonfigurować Supabase CLI tak, aby automatycznie utworzyło bucket magazynu. Dodaj tę konfigurację do pliku config.toml:
Po uruchomieniu supabase start powstanie nowy bucket magazynu w lokalnym projekcie Supabase.
Jeśli chcesz przesłać go do hostowanego projektu Supabase, uruchom supabase seed buckets --linked.
Skonfiguruj zadania w tle dla Supabase Edge Functions
Aby używać zadań w tle w Supabase Edge Functions podczas lokalnego tworzenia, dodaj tę konfigurację do pliku config.toml:
Przy zasadzie per_worker funkcja nie będzie automatycznie przeładowywana po zmianach. Musisz
ręcznie uruchomić ją ponownie za pomocą supabase functions serve.
Utwórz Supabase Edge Function do generowania mowy
Utwórz nową Edge Function, uruchamiając poniższe polecenie:
Jeśli używasz VS Code lub Cursor, wybierz y, gdy CLI wyświetli pytanie „Generate VS Code settings for Deno? [y/N]”!
Ustaw zmienne środowiskowe
W katalogu supabase/functions utwórz nowy plik .env i dodaj poniższe zmienne:
Zależności
Projekt używa kilku zależności:
- Biblioteki @supabase/supabase-js do interakcji z bazą danych Supabase.
- SDK JavaScript ElevenLabs do interakcji z API zamiany tekstu na mowę.
- Otwartoźródłowej biblioteki object-hash do generowania hasha z parametrów żądania.
Ponieważ Supabase Edge Function używa środowiska Deno, nie musisz instalować zależności. Możesz je importować przez prefiks npm:.
Napisz kod Supabase Edge Function
W nowo utworzonym pliku supabase/functions/text-to-speech/index.ts dodaj poniższy kod:
Omówienie kodu
Warto zwrócić uwagę na kilka elementów kodu. Przejdźmy przez nie krok po kroku.
Obsłuż przychodzące żądanie
Do obsługi przychodzącego żądania użyj procedury Deno.serve. W tym demo nie sprawdzamy pochodzenia żądania, ale możesz na przykład je zweryfikować albo dołączyć token dostępu użytkownika i sprawdzić go w Supabase Auth.
Z przychodzącego żądania funkcja pobiera parametry text i voiceId. Parametr voiceId jest opcjonalny, a domyślnie ustawiany na identyfikator ElevenLabs głosu „Allison”.
Za pomocą biblioteki object-hash funkcja generuje hash z parametrów żądania. Ten hash służy do sprawdzania istniejących plików audio w Supabase Storage.
Sprawdź istniejący plik audio w Supabase Storage
Supabase Storage ma wbudowaną inteligentną sieć CDN, która pozwala łatwo buforować i udostępniać pliki.
Tutaj funkcja sprawdza, czy plik audio istnieje w Supabase Storage. Jeśli tak, zwraca go z Supabase Storage.
Wygeneruj mowę jako strumień i podziel go na dwie gałęzie
Korzystając z przesyłania strumieniowego API ElevenLabs, funkcja generuje strumień. Dzięki temu nawet w przypadku dłuższego tekstu możesz od razu zacząć przesyłać audio do użytkownika, a następnie w tle przesłać strumień do Supabase Storage.
Zapewnia to jak najlepsze wrażenia użytkownika — nawet duże bloki tekstu wydają się błyskawiczne. Kluczowy moment jest w wierszu 17, gdzie metoda stream.tee() dzieli odczytywalny strumień na dwie gałęzie: jedną dla przeglądarki i drugą dla Supabase Storage.
Prześlij strumień audio do Supabase Storage w tle
Metoda EdgeRuntime.waitUntil w wierszu 20 poprzedniego kroku służy do przesłania strumienia audio do Supabase Storage w tle za pomocą funkcji uploadAudioToStorage. Dzięki temu funkcja może od razu zwrócić odpowiedź strumieniową do przeglądarki, podczas gdy audio jest przesyłane do Supabase Storage.
Po utworzeniu obiektu w magazynie, gdy użytkownicy następnym razem wyślą żądanie z tymi samymi parametrami, funkcja zwróci plik audio z CDN Supabase Storage.
Uruchom lokalnie
Aby uruchomić funkcję lokalnie, wykonaj poniższe polecenia:
Gdy lokalny stos Supabase będzie działać, uruchom poniższe polecenie, aby wystartować funkcję i obserwować logi:
Wypróbuj
Wejdź na http://127.0.0.1:54321/functions/v1/text-to-speech?text=hello%20world, aby usłyszeć działanie funkcji.
Następnie wejdź na http://127.0.0.1:54323/project/default/storage/buckets/audio, aby zobaczyć plik audio w lokalnym buckecie Supabase Storage.
Wdróż w Supabase
Jeśli jeszcze tego nie zrobiono, utwórz nowe konto Supabase na database.new i połącz lokalny projekt z kontem Supabase:
Następnie uruchom poniższe polecenie, aby wdrożyć funkcję:
Ustaw sekrety funkcji
Gdy wszystkie sekrety są już ustawione lokalnie, uruchom poniższe polecenie, aby ustawić je w projekcie Supabase:
Przetestuj funkcję
Funkcja została zaprojektowana tak, by można było użyć jej bezpośrednio jako źródła elementu <audio>.