Creación de una aplicación de ortografía de palabras simple con ElevenLabs, Streamlit y Claude

¿Sabes de lo que son capaces las voces generativas? ¿Qué vastas posibilidades abren y cuántas áreas pueden beneficiarse de ellas?

Tal vez necesite una aplicación para expresar un video blog o un libro. Tal vez quieras dar vida a un personaje de juego con una voz en off profesional. ¿Qué tal crear una aplicación para aprender idiomas extranjeros?

¡Hoy, lablab.ai ha preparado un tutorial para ti que te ayudará a conocer mejor las tecnologías de voz de IA! ¡Vamos a sumergirnos!

Introducción

Es uno de los momentos más emocionantes para el desarrollo de software, con la aparición de varias herramientas de " IA generativa " en el mercado. Solo nómbrelo, ¿generación de carta de presentación? ¡Controlar! ¿Generación de correo electrónico? ¡Controlar! ¿Generación automática de comentarios de código? ¡Controlar! Incluso fuera de la codificación y el desarrollo de software, las posibilidades de casos de uso son enormes.

Ahora, podemos generar imágenes con indicaciones de texto con varios modelos de generación de imágenes. Por lo tanto, nos permite incorporar los activos generados en nuestros diversos productos. La siguiente pregunta es: ¿qué hay de las voces? La tendencia de las experiencias de usuario en los últimos años mencionó el "comando de voz" como una de las tendencias emergentes.

Es natural que el software que construimos incorpore voces como una de las funciones. Es por eso que, en este tutorial, mostraremos la función " Síntesis de voz " que ofrece ElevenLabs en una aplicación simple, que genera palabras aleatorias y las deletrea. Para crear la interfaz de usuario para esta aplicación basada en Python , usaremos Streamlit , una nueva biblioteca de interfaz de usuario para compartir proyectos de ciencia de datos.

Introducción a ElevenLabs

ElevenLabs es una empresa de investigación de tecnología de voz que ofrece una solución de síntesis de voz . Con una API fácil de usar, permite a los desarrolladores generar discursos de alta calidad utilizando IA. Es posible gracias al modelo de IA que se ha entrenado en una gran cantidad de audiolibros y también en podcasts. El entrenamiento permite que la IA brinde resultados predecibles y de alta calidad en la generación de voz.

Hay dos características principales que ElevenLabs tiene para ofrecer, la primera es VoiceLab, donde los usuarios pueden clonar voces de audio grabado y/o voces prefabricadas existentes, y también "diseñar" voces basadas en género, edades, etnias y razas. Una vez que los usuarios tienen las voces con las que trabajar, pueden pasar a la siguiente función, Síntesis de voz, donde pueden generar discursos usando sus voces diseñadas o simplemente usando las prefabricadas.

Introducción al Modelo Claude de Anthropic

Claude es el último modelo de IA desarrollado por Anthropic , una organización de investigación de IA que se centra en mejorar la interoperabilidad, la solidez y la seguridad de los sistemas de inteligencia artificial.

El modelo Claude está diseñado para generar respuestas similares a las humanas, lo que lo convierte en una poderosa herramienta para una amplia gama de aplicaciones, desde la creación de contenido, legal, hasta el servicio al cliente. Al igual que cualquier otro modelo de IA en el mercado, Claude también está capacitado en una amplia gama de textos de Internet. Sin embargo, a diferencia de la mayoría de los modelos de IA, se centra en la "seguridad", lo que permite rechazar salidas que considera "dañinas" o "falsas" para los usuarios.

Introducción a Streamlit

Streamlit es una biblioteca Python de código abierto que facilita y hace posible que los desarrolladores y científicos de datos creen y compartan aplicaciones web personalizadas y visualmente atractivas. Los desarrolladores pueden usar Streamlit para crear e implementar aplicaciones de ciencia de datos con todas las funciones en minutos. Es posible gracias a la API simple e intuitiva que se puede usar para convertir secuencias de comandos de datos en componentes de interfaz de usuario.

requisitos previos

• Conocimientos básicos de Python y desarrollo de UI usando Streamlit
• Acceso a la API de Anthropic
• Acceso a la API de ElevenLabs

Describir

1. Inicializando nuestro Proyecto Streamlit
2. Adición de la función de generación de palabras usando el modelo Claude
3. Adición de la función de generación de voz mediante la API de ElevenLabs
4. Prueba de la aplicación Generador de palabras

Discusión

Hay al menos cuatro pasos que seguiremos en este tutorial. Primero necesitamos inicializar el proyecto basado en Streamlit, para tener una idea general del desarrollo de interfaces de usuario usando Streamlit.

A continuación, comenzamos a agregar más funciones, comenzando con el indicador de ingeniería para que el modelo de Claude nos proporcione una palabra aleatoria que comúnmente se escribe mal. Después de eso, agregaremos la generación de texto a voz proporcionada por ElevenLabs para demostrar cómo el modelo multilingüe deletrea las palabras. Finalmente, vamos a probar la aplicación simple.

Inicializando nuestro Proyecto Streamlit

¡Entremos en la acción de codificación! Primero, ¡hagamos un directorio para nuestro proyecto e introdúzcamoslo!

 mkdir randomwords cd randomwords

A continuación, vamos a utilizar este directorio como base de nuestro proyecto Streamlit . Debido a que un proyecto Streamlit es esencialmente un proyecto de Python , debemos realizar algunos pasos para inicializar nuestro proyecto de Python , como definir y activar nuestro entorno 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

Una vez activado, la salida de nuestro terminal debería mostrar el nombre del entorno virtual (env), así:

¡Luego, es hora de instalar las bibliotecas que necesitamos para este proyecto! usemos el comando pip para instalar la biblioteca streamlit , anthropic y elevenlabs . Tenga en cuenta que también instalamos una biblioteca pydantic con bloqueo de versión para evitar un error relacionado con Pydantic en una de las funciones elevenlabs .

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

Con todos los requisitos del proyecto fuera del camino, ¡ahora vamos a sumergirnos en la parte de codificación! Cree un nuevo archivo dentro de nuestro directorio de proyectos, llamémoslo randomwords_app.py .

 touch randomwords_app.py

Después de crear el archivo, abramos el archivo en nuestro editor de código favorito o entorno de desarrollo integrado (IDE). Para empezar, construyamos nuestra aplicación simple a partir de las partes más simples posibles, ¡un título y un texto para la leyenda!

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

Para concluir nuestra parte de inicialización del proyecto, intentemos ejecutar la aplicación. Asegúrese de que nuestro directorio de trabajo actual todavía esté dentro de nuestro proyecto y que nuestro entorno virtual ya esté activado. Cuando todo esté listo, use streamlit run <app-name> para ejecutar la aplicación.

 streamlit run randomwords_app.py

¡La aplicación debería abrirse automáticamente en nuestros navegadores predeterminados! debería mostrar el título y el texto por ahora. A continuación, agregaremos la función de generación de palabras aleatorias utilizando el modelo Claude de Anthropic .

Sin embargo, una última cosa, tendremos que proporcionar a nuestra aplicación las claves API para los servicios que vamos a utilizar, a saber, el modelo Claude de Anthropic y la función de síntesis de voz de ElevenLabs . Como estas claves se consideran sensibles, debemos guardarlas en un lugar seguro y aislado.

Sin embargo, esta vez no los almacenamos en un archivo .env . Esto se debe a que Streamlit trata las variables de entorno de manera diferente. Según la documentación , necesitamos crear un archivo de configuración secreto dentro de un directorio .streamlit . Podemos crear el directorio dentro de nuestro proyecto y luego crear el archivo.

 mkdir .streamlit touch .streamlit/secrets.toml

Editemos el archivo TOML que creamos, tenga en cuenta que el archivo TOML usa un formato diferente del archivo .env habitual.

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

Adición de la función de generación de palabras usando el modelo Claude

En este paso, agregaremos un botón que generará la palabra aleatoria, el elemento de encabezado para mostrar la palabra generada y el subtítulo para mostrar el significado de la palabra. Sin embargo, viniendo de un fondo de desarrollo web, creo firmemente que los elementos de la interfaz de usuario deben colocarse y organizarse dentro de los contenedores. Entonces, haremos exactamente eso.

Importar las bibliotecas necesarias

En primer lugar, agreguemos algunas declaraciones de importación. Vamos a importar la biblioteca anthropic para generar nuestras palabras aleatorias.

 import streamlit as st import anthropic

Luego, antes de llegar a la parte de la interfaz de usuario, primero creemos nuestra función de generación de palabras.

Definición de la función de generación de palabras

 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

En esta función, el trabajo más pesado lo realiza ** Claude mode **l de Anthropic (¡Gracias, Claude ! 😉). Sin embargo, nuestra parte en esta función es cómo hacer que Claude devuelva el formato exacto de manera consistente. Por lo tanto, debemos indicarle a Claude que "siga estrictamente el formato" y darle una respuesta de ejemplo agregándola después de nuestro aviso inicial.

Finalmente, nos aseguramos de que Claude cumpla con nuestros acuerdos pidiéndole que "Recuerde responder solo siguiendo el patrón". La función termina devolviendo la respuesta de Claude .

A continuación, volvamos a editar la interfaz de usuario.

Actualización de la interfaz de usuario

 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}")

Esta vez, agregamos un contenedor con algunos elementos en su interior. El encabezado, subtítulo para mostrar la palabra aleatoria y el elemento de texto para mostrar el significado de la palabra. También tenemos un texto para mostrar la sugerencia sobre cómo usar la aplicación, así como un botón debajo.

En Streamlit , podemos declarar el controlador de eventos de clic mediante el uso de una declaración condicional, donde devuelve True cuando se hace clic en el botón. En este código, invocamos la función generate_word() que devuelve la palabra generada y el significado, y divide el resultado en variables separadas para la palabra y el significado, respectivamente. Finalmente, actualizamos el subtítulo y el elemento de texto para mostrar la palabra y el significado.

Forma definitiva

¡Veamos dos veces nuestro código una vez más! Debe contener las declaraciones de importación, la función para generar la palabra aleatoria y la interfaz de usuario actualizada que contiene subtítulos y elementos de texto, así como un botón que genera la palabra al invocar la función 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}")

Prueba de la función de generación de palabras

Ejecutemos la aplicación una vez más con el mismo comando. También podemos simplemente volver a ejecutar la aplicación haciendo clic en el menú superior derecho y hacer clic en " Volver a ejecutar " si la aplicación se ha ejecutado anteriormente.

Debería mostrar esta interfaz de usuario actualizada.

Ahora, intentemos hacer clic en el botón Generate .

Una de las cosas dulces de Streamlit es que manejó la carga y proporcionó el indicador de carga listo para usar. Deberíamos ver el indicador en la esquina superior derecha, así como la opción de " detener " la operación. Listo, ¿eh?

Después de unos segundos, el resultado debería mostrarse en la interfaz de usuario.

¡Perfecto! observe que la aplicación dividió correctamente el texto generado del modelo Claude en palabra y significado. Sin embargo, si el resultado no sale de acuerdo con el formato esperado, siempre podemos volver a hacer clic en el botón Generate .

El siguiente paso es la característica principal de esta aplicación, incorporar la generación de voz en nuestro generador de palabras aleatorias. Además de demostrar cómo generar el archivo de audio utilizando la API proporcionada por ElevenLabs, este paso también sirve para demostrar las capacidades del modelo multilingüe de ElevenLabs.

Adición de la función de generación de voz mediante la API de ElevenLabs

El primer paso de esta sección es, como probablemente habrás adivinado, ¡añadir más instrucciones de importación! Entonces, agreguemos algunas funciones de elevenlabs que usaremos para la función de generación de voz.

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

A continuación, vamos a definir la función para manejar la generación de voz.

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

Gracias a la simplicidad y legibilidad de Python , y también a la API fácil de usar de ElevenLabs , ¡podemos generar el discurso usando solo este código! La función acepta la palabra aleatoria que usamos para generar el discurso. También usamos específicamente el modelo "eleven_multilingual_v1", que es un modelo multilingüe, perfecto para nuestro caso de uso para demostrar la ortografía y pronunciación de palabras extranjeras y comúnmente mal escritas. Finalmente, usamos la voz " Bella " para este tutorial, que es una de las voces prefabricadas proporcionadas por ElevenLabs .

A continuación, agregaremos un reproductor de audio para reproducir el discurso generado.

 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')

Justo debajo de nuestro último código anterior, agregamos la variable para almacenar el discurso generado y ejecutamos el discurso usando el reproductor de audio provisto por la función st.audio de Streamlit. En este punto, nuestra aplicación debería funcionar como se esperaba, mostrando solo el reproductor de audio cuando hay una palabra aleatoria disponible para "leer".

¿Curioso cómo funciona? ¡yo también! ¡Probemos la aplicación ahora!

Prueba de la función de ortografía de palabras

Ejecutemos la aplicación de nuevo usando streamlit run o simplemente volvamos a ejecutar la aplicación si ya la tenemos en ejecución. Debería verse exactamente igual que la última vez que lo dejamos. Sin embargo, intentemos hacer clic en el botón "Generar" esta vez.

¡Asombroso! ¡Esta vez, la aplicación también muestra un reproductor de audio! Intentemos jugarlo. Usando el modelo multilingüe, el discurso generado debe usar el acento y la entonación que se acerque al idioma de origen de la palabra. Por ejemplo, "emprendedor" debe pronunciarse con acento francés.

Conclusión

En este breve tutorial, esperamos haber explorado las capacidades de la tecnología de generación de voz que ofrece ElevenLabs . Con el modelo multilingüe, es fácil generar discursos destinados a oyentes que no hablan inglés. En nuestro caso de uso, necesitamos un modelo multilingüe que nos ayude a encontrar la forma correcta de pronunciar y deletrear palabras que no están en inglés y que comúnmente se escriben mal.

¡Con tantas ideas, invitamos a los desarrolladores a unirse a nosotros para crear el futuro!

¡ El 28 de julio , lablab.ai lanzó un desafío en el que puedes crear tu propia aplicación de IA de voz con modelos de ElevenLabs ! (Además, puede aprovechar otros modelos de IA, como modelos de lenguaje grande, modelos generativos de imágenes y videos, etc., siempre que no estén en competencia directa con la tecnología de 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.

¡Puede encontrar más tutoriales AQUÍ y puede UNIRSE a otros hackatones para construir con tecnologías de vanguardia!

Y muchas gracias a Septian Adi Nugraha , el autor de este artículo. 💚