Construindo um aplicativo simples de ortografia de palavras com ElevenLabs, Streamlit e Claude

Você sabe do que as vozes generativas são capazes? Que vastas possibilidades eles abrem e quantas áreas podem se beneficiar deles?

Talvez você precise de um aplicativo para dublar um blog de vídeo ou livro. Talvez você queira dar vida a um personagem de jogo com uma narração profissional. Que tal criar um aplicativo para aprender línguas estrangeiras?

Hoje, o lablab.ai preparou um tutorial para você que vai te ajudar a conhecer melhor as tecnologias de voz AI! Vamos mergulhar!

Introdução

É um dos momentos mais empolgantes para o desenvolvimento de software, com o surgimento de várias ferramentas de " IA generativa " no mercado. Apenas nomeie, geração de carta de apresentação? Verificar! Geração de email? Verificar! Geração automática de comentários de código? Verificar! Mesmo fora da codificação e do desenvolvimento de software, as possibilidades de casos de uso são enormes.

Agora, podemos gerar imagens com prompts de texto com vários modelos de geração de imagens. Assim, nos possibilita incorporar os ativos gerados em nossos diversos produtos. A próxima pergunta é: e as vozes? A tendência das experiências do usuário nos últimos anos mencionou o "comando de voz" como uma das tendências emergentes.

É natural que o software que construímos incorpore vozes como um dos recursos. É por isso que, neste tutorial, mostraremos o recurso " Síntese de fala " oferecido pelo ElevenLabs em um aplicativo simples, que gera palavras aleatórias e as soletra. Para construir a interface do usuário para este aplicativo baseado em Python , usaremos o Streamlit , uma nova biblioteca de interface do usuário para compartilhar projetos de ciência de dados.

Introdução ao ElevenLabs

A ElevenLabs é uma empresa de pesquisa em tecnologia de voz que oferece soluções de síntese de fala . Com API fácil de usar, permite que os desenvolvedores gerem discursos de alta qualidade usando IA. Isso é possível graças ao modelo de IA, que foi treinado em uma grande quantidade de audiolivros e também podcasts. O treinamento permite que a IA forneça resultados previsíveis e de alta qualidade na geração de fala.

Existem dois recursos principais que o ElevenLabs oferece, o primeiro é o VoiceLab, onde os usuários podem clonar vozes de áudio gravado e/ou vozes pré-fabricadas existentes e também "projetar" vozes com base em gênero, idade, etnia e raça. Assim que os usuários tiverem as vozes para trabalhar, eles podem passar para o próximo recurso, Síntese de fala, onde podem gerar falas usando suas vozes projetadas ou apenas usando as pré-fabricadas.

Introdução ao Modelo Claude da Anthropic

Claude é o mais recente modelo de IA desenvolvido pela Anthropic , uma organização de pesquisa de IA que se concentra em melhorar a interoperabilidade, robustez e segurança dos sistemas de inteligência artificial.

O modelo Claude foi projetado para gerar respostas semelhantes às humanas, tornando-o uma ferramenta poderosa para uma ampla gama de aplicações, desde a criação de conteúdo, legal, até o atendimento ao cliente. Assim como qualquer outro modelo de IA no mercado, Claude também é treinado em uma ampla variedade de textos da Internet. No entanto, ao contrário da maioria dos modelos de IA, ele tem foco na "segurança", o que possibilita recusar saídas que considera "nocivas" ou "inverídicas" para os usuários.

Introdução ao Streamlit

Streamlit é uma biblioteca Python de código aberto que torna fácil e possível para desenvolvedores e cientistas de dados criar e compartilhar aplicativos da Web personalizados e visualmente atraentes. Os desenvolvedores podem usar o Streamlit para criar e implantar aplicativos de ciência de dados completos em minutos. Isso é possível graças à API simples e intuitiva que pode ser usada para transformar scripts de dados em componentes de interface do usuário.

Pré-requisitos

• Conhecimento básico de Python e desenvolvimento de interface do usuário usando Streamlit
• Acesso à API antrópica
• Acesso à API ElevenLabs

Contorno

1. Inicializando nosso projeto Streamlit
2. Adicionando o recurso de geração de palavras usando o modelo Claude
3. Adicionando recurso de geração de fala usando a API ElevenLabs
4. Testando o aplicativo gerador de palavras

Discussão

Há pelo menos quatro etapas pelas quais passaremos neste tutorial. Primeiro, precisamos inicializar o projeto baseado em Streamlit, para ter uma ideia geral do desenvolvimento de interfaces de usuário usando Streamlit.

Em seguida, começamos a adicionar mais recursos, começando com o prompt de engenharia para fazer com que o modelo Claude nos forneça uma palavra aleatória que geralmente é escrita incorretamente. Depois disso, adicionaremos a geração de texto para voz fornecida pelo ElevenLabs para demonstrar como o modelo multilíngue soletra as palavras. Finalmente, vamos testar o aplicativo simples.

Inicializando nosso projeto Streamlit

Vamos entrar na ação de codificação! Primeiro, vamos criar um diretório para nosso projeto e inseri-lo!

 mkdir randomwords cd randomwords

Em seguida, vamos usar esse diretório como base do nosso projeto Streamlit . Como um projeto Streamlit é essencialmente um projeto Python , precisamos executar algumas etapas para inicializar nosso projeto Python , como definir e ativar nosso ambiente virtual.

 # Creating the virtual environment python -m venv env # Activate the virtual environment # On Linux/Mac source env/bin/activate # On Windows: .\env\Scripts\activate

Uma vez ativado, a saída do nosso terminal deve mostrar o nome do ambiente virtual (env), assim:

Em seguida, é hora de instalar as bibliotecas necessárias para este projeto! vamos usar o comando pip para instalar as bibliotecas streamlit , anthropic e elevenlabs . Observe que também instalamos uma biblioteca pydantic de versão bloqueada para evitar um erro relacionado ao Pydantic em uma das funções do elevenlabs .

 pip install streamlit anthropic elevenlabs "pydantic==1.*"

Com todos os requisitos do projeto resolvidos, agora vamos mergulhar na parte de codificação! Crie um novo arquivo dentro do diretório do nosso projeto, vamos chamá-lo de randomwords_app.py .

 touch randomwords_app.py

Após a criação do arquivo, vamos abri-lo em nosso editor de código favorito ou ambiente de desenvolvimento integrado (IDE). Para começar, vamos construir nosso aplicativo simples a partir das partes mais simples possíveis, um título e um texto para a legenda!

 import streamlit as st st.title("Random Words Generator") st.text("Hello, this is a random words generator app")

Para encerrar nossa parte de inicialização do projeto, vamos testar a execução do aplicativo. Certifique-se de que nosso diretório de trabalho atual ainda esteja dentro de nosso projeto e nosso ambiente virtual já esteja ativado. Quando tudo estiver pronto, use a streamlit run <app-name> para executar o aplicativo.

 streamlit run randomwords_app.py

O aplicativo deve abrir automaticamente em nossos navegadores padrão! ele deve mostrar o título e o texto por enquanto. Em seguida, vamos adicionar o recurso de geração de palavras aleatórias usando o modelo Claude da Anthropic .

Uma última coisa, porém, teremos que fornecer ao nosso aplicativo as chaves de API para os serviços que vamos usar, ou seja, o modelo Claude da Anthropic e o recurso Speech Synthesis da ElevenLabs . Como essas chaves são consideradas sensíveis, devemos guardá-las em local seguro e isolado.

No entanto, desta vez não os armazenamos em um arquivo .env . Isso ocorre porque Streamlit lida com variáveis de ambiente de maneira diferente. De acordo com a documentação , precisamos criar um arquivo de configuração secreto dentro de um diretório .streamlit . Podemos criar o diretório dentro do nosso projeto e depois criar o arquivo.

 mkdir .streamlit touch .streamlit/secrets.toml

Vamos editar o arquivo TOML que criamos, observe que o arquivo TOML usa formatação diferente do arquivo .env usual.

 xi_api_key = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx" claude_key = "sk-ant-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

Adicionando o recurso de geração de palavras usando o modelo Claude

Nesta etapa, adicionaremos um botão que gerará a palavra aleatória, o elemento cabeçalho para mostrar a palavra gerada e o subtítulo para mostrar o significado da palavra. No entanto, tendo experiência em webdev, acredito fortemente que os elementos da interface do usuário devem ser colocados e organizados dentro de contêineres. Então, faremos exatamente isso.

Importe as bibliotecas necessárias

Primeiro de tudo, vamos adicionar algumas declarações de importação. Vamos importar a biblioteca anthropic para gerar nossas palavras aleatórias.

 import streamlit as st import anthropic

Então, antes de chegarmos à parte da interface do usuário, vamos criar nossa função de geração de palavras primeiro.

Definindo a função de geração de palavras

 def generate_word(): prompt = (f"{anthropic.HUMAN_PROMPT} Give me one non-English word that's commonly misspelled and the meaning. Please strictly follow the format! example: Word: Schadenfreude; Meaning: joy at other's expenses." f"{anthropic.AI_PROMPT} Word: Karaoke; Meaning: a form of entertainment where people sing popular songs over pre-recorded backing tracks." f"{anthropic.HUMAN_PROMPT} Great! just like that. Remember, only respond following the pattern.") c = anthropic.Anthropic(api_key=st.secrets["claude_key"]) resp = c.completions.create( prompt=f"{prompt} {anthropic.AI_PROMPT}", stop_sequences=[anthropic.HUMAN_PROMPT], model="claude-v1.3-100k", max_tokens_to_sample=900, ) print(resp.completion) return resp.completion

Nesta função, o levantamento mais pesado é feito pelo modo **Anthropic's Claude **l (Obrigado, Claude ! 😉). No entanto, nossa parte nessa função é como fazer com que Claude retorne o formato exato de forma consistente. Portanto, precisamos instruir Claude a "seguir rigorosamente o formato" e fornecer uma resposta de exemplo adicionando-a após nosso prompt inicial.

Por fim, garantimos que Claude cumpra nossos acordos, solicitando-lhe "Lembre-se de responder apenas seguindo o padrão". A função termina retornando a resposta de Claude .

Em seguida, vamos voltar à edição da IU!

Atualizando a IU

 st.title("Random Words Generator") with st.container(): st.header("Random Word") random_word = st.subheader("-") word_meaning = st.text("Meaning: -") st.write("Click the `Generate` button to generate new word") if st.button("Generate"): result = generate_word() # Split the string on the semicolon split_string = result.split(";") # Split the first part on ": " to get the word word = split_string[0].split(": ")[1] # Split the second part on ": " to get the meaning meaning = split_string[1].split(": ")[1] print(f"word result: {word}") random_word.subheader(word) word_meaning.text(f"Meaning: {meaning}")

Desta vez, adicionamos um container com alguns elementos dentro dele. O cabeçalho, subcabeçalho para exibir a palavra aleatória e o elemento de texto para mostrar o significado da palavra. Temos também um texto para mostrar a dica de como usar o app, assim como um botão abaixo dele.

No Streamlit , podemos declarar o manipulador de eventos de clique usando uma instrução condicional, em que retorna True quando o botão é clicado. Neste código, invocamos a função generate_word() que retorna a palavra gerada e o significado, e dividimos o resultado em variáveis separadas para a palavra e o significado, respectivamente. Por fim, atualizamos o subtítulo e o elemento de texto para exibir a palavra e o significado.

forma final

Vamos verificar nosso código mais uma vez! Ele deve conter as instruções de importação, a função para gerar a palavra aleatória e a interface do usuário atualizada que contém o subcabeçalho e os elementos de texto, bem como o botão que gera a palavra invocando a função generate_word() .

 import streamlit as st import anthropic def generate_word(): prompt = (f"{anthropic.HUMAN_PROMPT} Give me one non-English word that's commonly misspelled and the meaning. Please strictly follow the format! example: Word: Schadenfreude; Meaning: joy at other's expenses." f"{anthropic.AI_PROMPT} Word: Karaoke; Meaning: a form of entertainment where people sing popular songs over pre-recorded backing tracks." f"{anthropic.HUMAN_PROMPT} Great! just like that. Remember, only respond following the pattern.") c = anthropic.Anthropic(api_key=st.secrets["claude_key"]) resp = c.completions.create( prompt=f"{prompt} {anthropic.AI_PROMPT}", stop_sequences=[anthropic.HUMAN_PROMPT], model="claude-v1.3-100k", max_tokens_to_sample=900, ) print(resp.completion) return resp.completion st.title("Random Words Generator") with st.container(): st.header("Random Word") random_word = st.subheader("-") word_meaning = st.text("Meaning: -") st.write("Click the `Generate` button to generate new word") if st.button("Generate"): result = generate_word() # Split the string on the semicolon split_string = result.split(";") # Split the first part on ": " to get the word word = split_string[0].split(": ")[1] # Split the second part on ": " to get the meaning meaning = split_string[1].split(": ")[1] print(f"word result: {word}") random_word.subheader(word) word_meaning.text(f"Meaning: {meaning}")

Testando a função de geração de palavras

Vamos executar o aplicativo novamente com o mesmo comando. Também podemos executar novamente o aplicativo clicando no menu superior direito e clicando em " Executar novamente " se o aplicativo já estiver em execução antes.

Ele deve mostrar esta interface de usuário atualizada.

Agora, vamos tentar clicar no botão Generate !

Uma das vantagens do Streamlit é que ele lidava com o carregamento e fornecia o indicador de carregamento pronto para uso. Devemos ver o indicador no canto superior direito, bem como a opção de " interromper " a operação. Legal, hein?

Após alguns segundos, o resultado deve ser exibido na interface do usuário.

Perfeito! observe que o aplicativo dividiu corretamente o texto gerado do modelo Claude em palavras e o significado. No entanto, se o resultado não sair de acordo com o formato esperado, podemos sempre clicar novamente no botão Generate .

O próximo passo é a principal característica deste aplicativo, para incorporar a geração de fala em nosso gerador de palavras aleatórias. Além de demonstrar como gerar o arquivo de áudio usando a API fornecida pelo ElevenLabs, esta etapa também serve para demonstrar as capacidades do modelo multilíngue do ElevenLabs.

Adicionando recurso de geração de fala usando a API ElevenLabs

A primeira etapa desta seção, como você provavelmente já deve ter adivinhado, é adicionar mais instruções de importação! Então, vamos adicionar algumas funções do elevenlabs que usaremos para o recurso de geração de fala.

 import streamlit as st import anthropic ++ from elevenlabs import generate, set_api_key

A seguir, vamos definir a função para lidar com a geração de fala.

 def generate_speech(word): set_api_key(st.secrets['xi_api_key']) audio = generate( text=word, voice="Bella", model='eleven_multilingual_v1' ) return audio

Graças à simplicidade e legibilidade do Python , e também à API fácil de usar do ElevenLabs , podemos gerar a fala usando apenas este código! A função aceita a palavra aleatória que usamos para gerar a fala. Também usamos especificamente o modelo "eleven_multilingual_v1", que é um modelo multilíngue, perfeito para nosso caso de uso para demonstrar a ortografia e a pronúncia de palavras estrangeiras e comumente com erros ortográficos! Por fim, usamos a voz " Bella " para este tutorial, que é uma das vozes pré-fabricadas fornecidas pela ElevenLabs .

Em seguida, adicionaremos um reprodutor de áudio para reproduzir a fala gerada.

 print(f"word result: {word}") random_word.subheader(word) word_meaning.text(f"Meaning: {meaning}") ++ speech = generate_speech(word) ++ st.audio(speech, format='audio/mpeg')

Logo abaixo do nosso código mais recente, adicionamos a variável para armazenar a fala gerada e executamos a fala usando o reprodutor de áudio fornecido pela função st.audio do Streamlit. Neste ponto, nosso aplicativo deve funcionar conforme o esperado, mostrando o reprodutor de áudio apenas quando houver uma palavra aleatória disponível para "ler".

Curioso para saber como funciona? eu também! vamos testar o app agora!

Testando o recurso de ortografia de palavras

Vamos executar o aplicativo novamente usando streamlit run ou apenas executar novamente o aplicativo se já estiver em execução. Deve parecer exatamente o mesmo da última vez que o deixamos. No entanto, vamos tentar clicar no botão "Gerar" desta vez!

Incrível! desta vez, o aplicativo também mostra um reprodutor de áudio! Vamos tentar jogá-lo. No modelo multilíngue, a fala gerada deve utilizar o sotaque e a entonação próximos ao idioma de origem da palavra. Por exemplo, "empreendedor" deve ser pronunciado com sotaque francês.

Conclusão

Neste breve tutorial, esperamos ter explorado os recursos da tecnologia de geração de fala oferecidos pelo ElevenLabs . Com o modelo multilíngue, é fácil gerar falas destinadas a ouvintes que não falam inglês. Em nosso caso de uso, precisamos de um modelo multilíngue para nos ajudar a encontrar a maneira correta de pronunciar e soletrar palavras não inglesas que geralmente são escritas incorretamente.

Com tantas ideias, convidamos os desenvolvedores a se juntarem a nós na criação do futuro!

Em 28 de julho , lablab.ai lança um desafio onde você pode criar seu próprio aplicativo de IA de voz com modelos ElevenLabs ! (Além disso, você pode aproveitar outros modelos de IA, como modelos de linguagem grande, modelos geradores de imagem e vídeo, etc., desde que não estejam em competição direta com a tecnologia hackathon).

*Your final submission should consist of a ready-to-play working prototype of your idea, a video pitch, and a presentation showcasing your solution.

Você pode encontrar mais tutoriais AQUI e pode PARTICIPAR de outros hackathons para construir com tecnologias de ponta!

E muito obrigado ao septiano Adi Nugraha - o autor deste artigo. 💚