Streaming e cache com Supabase
Guia prático · Pressupõe que você tenha concluído o guia de início rápido da ElevenAPI e tenha uma conta no Supabase.
Introdução
Neste guia, você vai aprender a criar uma API de borda para gerar, transmitir, armazenar e armazenar em cache áudio de fala usando Supabase Edge Functions, Supabase Storage e ElevenLabs.
Requisitos
- Uma conta da ElevenLabs com uma chave de API.
- Uma conta no Supabase (você pode criar uma conta gratuita em database.new).
- A CLI do Supabase instalada na sua máquina.
- O runtime Deno instalado na sua máquina e, opcionalmente, configurado na sua IDE favorita.
Configuração
Criar um projeto Supabase localmente
Depois de instalar a CLI do Supabase, execute o comando a seguir para criar um novo projeto Supabase localmente:
Configurar o bucket de armazenamento
Você pode configurar a CLI do Supabase para gerar automaticamente um bucket de armazenamento adicionando esta configuração ao arquivo config.toml:
Ao executar supabase start, um novo bucket de armazenamento será criado no seu projeto Supabase
local. Se quiser enviar isso para seu projeto Supabase hospedado, execute supabase seed buckets --linked.
Configurar tarefas em segundo plano para Supabase Edge Functions
Para usar tarefas em segundo plano nas Supabase Edge Functions durante o desenvolvimento local, você precisa adicionar a seguinte configuração ao arquivo config.toml:
Ao executar com a política per_worker, a função não será recarregada automaticamente após edições. Você precisará
reiniciá-la manualmente executando supabase functions serve.
Criar uma Supabase Edge Function para geração de fala
Crie uma nova Edge Function executando o seguinte comando:
Se você usa VS Code ou Cursor, selecione y quando a CLI perguntar “Generate VS Code settings for Deno? [y/N]”!
Configurar as variáveis de ambiente
No diretório supabase/functions, crie um novo arquivo .env e adicione as seguintes variáveis:
Dependências
O projeto usa algumas dependências:
- A biblioteca @supabase/supabase-js para interagir com o banco de dados do Supabase.
- O SDK JavaScript da ElevenLabs para interagir com a API de Text to Speech.
- O object-hash de código aberto para gerar um hash a partir dos parâmetros da solicitação.
Como a Supabase Edge Function usa o runtime Deno, você não precisa instalar as dependências; basta importá-las pelo prefixo npm:.
Programar a Supabase Edge Function
No arquivo supabase/functions/text-to-speech/index.ts que você acabou de criar, adicione o código a seguir:
Análise detalhada do código
Há alguns pontos importantes sobre o código. Vamos analisá-lo passo a passo.
Processar a solicitação recebida
Para processar a solicitação recebida, use o handler Deno.serve. Na demonstração, não validamos a origem da solicitação, mas você pode, por exemplo, validar a origem da solicitação ou adicionar um token de acesso do usuário e validá-lo com o Supabase Auth.
A partir da solicitação recebida, a função extrai os parâmetros text e voiceId. O parâmetro voiceId é opcional e, por padrão, usa o ID da ElevenLabs para a voz “Allison”.
Usando a biblioteca object-hash, a função gera um hash a partir dos parâmetros da solicitação. Esse hash é usado para verificar se há arquivos de áudio existentes no Supabase Storage.
Verificar se há um arquivo de áudio existente no Supabase Storage
O Supabase Storage inclui uma CDN inteligente integrada, permitindo armazenar em cache e disponibilizar seus arquivos facilmente.
Aqui, a função verifica se há um arquivo de áudio existente no Supabase Storage. Se o arquivo existir, a função o retorna do Supabase Storage.
Gerar fala como stream e dividi-la em duas ramificações
Usando os recursos de streaming da API da ElevenLabs, a função gera um stream. A vantagem é que, mesmo para textos maiores, você pode começar a transmitir o áudio de volta ao usuário imediatamente e enviar o stream para o Supabase Storage em segundo plano.
Isso proporciona a melhor experiência possível ao usuário, fazendo com que até grandes blocos de texto pareçam surpreendentemente rápidos. A mágica acontece na linha 17, em que o método stream.tee() divide o stream legível em duas ramificações: uma para o navegador e outra para o Supabase Storage.
Enviar o stream de áudio para o Supabase Storage em segundo plano
O método EdgeRuntime.waitUntil na linha 20 da etapa anterior é usado para enviar o stream de áudio ao Supabase Storage em segundo plano usando a função uploadAudioToStorage. Isso permite que a função retorne imediatamente a resposta em streaming ao navegador enquanto o áudio é enviado ao Supabase Storage.
Depois que o objeto de armazenamento for criado, na próxima vez que seus usuários fizerem uma solicitação com os mesmos parâmetros, a função retornará o arquivo de áudio da CDN do Supabase Storage.
Executar localmente
Para executar a função localmente, execute os comandos a seguir:
Quando a stack local do Supabase estiver em execução, execute o comando a seguir para iniciar a função e acompanhar os logs:
Experimente
Acesse http://127.0.0.1:54321/functions/v1/text-to-speech?text=hello%20world para ouvir a função em ação.
Em seguida, acesse http://127.0.0.1:54323/project/default/storage/buckets/audio para ver o arquivo de áudio no seu bucket local do Supabase Storage.
Implantar no Supabase
Se ainda não fez isso, crie uma nova conta no Supabase em database.new e vincule o projeto local à sua conta do Supabase:
Depois, execute o comando a seguir para implantar a função:
Definir os segredos da função
Agora que todos os seus segredos estão configurados localmente, você pode executar o comando a seguir para defini-los no seu projeto Supabase:
Testar a função
A função foi projetada para poder ser usada diretamente como fonte de um elemento <audio>.