Créer une application d'orthographe simple avec ElevenLabs, Streamlit et Claude

Savez-vous de quoi sont capables les voix génératives ? Quelles vastes possibilités ouvrent-elles et combien de domaines peuvent en bénéficier ?

Peut-être avez-vous besoin d'une application pour exprimer un blog vidéo ou un livre. Peut-être souhaitez-vous donner vie à un personnage de jeu avec une voix off professionnelle. Que diriez-vous de créer une application pour apprendre les langues étrangères ?

Aujourd'hui, lablab.ai vous a préparé un tutoriel qui vous aidera à mieux connaître les technologies vocales de l'IA ! Plongeons-nous !

Introduction

C'est l'une des périodes les plus excitantes pour le développement de logiciels, avec l'émergence de divers outils « d'IA générative » sur le marché. Nommez-le, génération de lettre de motivation ? Vérifier! Génération d'e-mails ? Vérifier! Génération automatique de commentaires de code ? Vérifier! Même en dehors du codage et du développement de logiciels, les possibilités de cas d'utilisation sont énormes.

Maintenant, nous pouvons générer des images avec des invites de texte avec différents modèles de génération d'images. Ainsi, il nous permet d'intégrer les actifs générés dans nos différents produits. La question suivante est : qu'en est-il des voix ? La tendance des expériences utilisateur au cours des dernières années a mentionné la "commande vocale" comme l'une des tendances émergentes.

Il est naturel que le logiciel que nous construisons intègre des voix comme l'une des fonctionnalités. C'est pourquoi, dans ce tutoriel, nous allons présenter la fonctionnalité " Synthèse vocale " proposée par ElevenLabs dans une application simple, qui génère des mots aléatoires et les fait épeler. Pour créer l'interface utilisateur de cette application basée sur Python , nous utiliserons Streamlit , une nouvelle bibliothèque d'interface utilisateur pour partager des projets de science des données.

Présentation d' Eleven Labs

ElevenLabs est une société de recherche en technologie vocale qui propose une solution de synthèse vocale . Avec une API facile à utiliser, il permet aux développeurs de générer des discours de haute qualité à l'aide de l'IA. Cela est rendu possible par le modèle d'IA qui a été formé sur une grande quantité de livres audio et également de podcasts. La formation permet à l'IA de fournir des résultats prévisibles et de haute qualité dans la génération de la parole.

ElevenLabs a deux fonctionnalités principales à offrir, la première est VoiceLab, où les utilisateurs peuvent cloner des voix à partir d'audio enregistré et/ou de voix préfabriquées existantes, et également "concevoir" des voix en fonction du sexe, de l'âge, de l'ethnie et de la race. Une fois que les utilisateurs ont les voix avec lesquelles travailler, ils peuvent passer à la fonctionnalité suivante, la synthèse vocale, où ils peuvent générer des discours en utilisant leurs voix conçues ou simplement en utilisant celles prédéfinies.

Introduction au modèle Claude d'Anthropic

Claude est le dernier modèle d'IA développé par Anthropic , une organisation de recherche en IA qui se concentre sur l'amélioration de l'interopérabilité, de la robustesse et de la sécurité des systèmes d'intelligence artificielle.

Le modèle Claude est conçu pour générer des réponses humaines, ce qui en fait un outil puissant pour un large éventail d'applications, de la création de contenu, juridique, au service client. Comme tous les autres modèles d'IA sur le marché, Claude est également formé sur une gamme variée de textes Internet. Cependant, contrairement à la plupart des modèles d'IA, il met l'accent sur la "sécurité", ce qui permet de refuser les sorties qu'il considère comme "nocives" ou "mensongères" pour les utilisateurs.

Présentation de Streamlit

Streamlit est une bibliothèque Python open source qui permet aux développeurs et aux scientifiques des données de créer et de partager facilement des applications Web visuellement attrayantes et personnalisées. Les développeurs peuvent utiliser Streamlit pour créer et déployer des applications de science des données complètes en quelques minutes. Cela est rendu possible par l'API simple et intuitive qui peut être utilisée pour transformer des scripts de données en composants d'interface utilisateur.

Conditions préalables

• Connaissance de base de Python et du développement d'interface utilisateur à l'aide de Streamlit
• Accès à l'API Anthropic
• Accès à l'API ElevenLabs

Contour

1. Initialisation de notre projet Streamlit
2. Ajout de la fonctionnalité de génération de mots à l'aide du modèle Claude
3. Ajout de la fonctionnalité de génération de parole à l'aide de l'API ElevenLabs
4. Test de l' application Word Generator

Discussion

Il y a au moins quatre étapes que nous allons suivre dans ce tutoriel. Nous devons d'abord initialiser le projet basé sur Streamlit, pour avoir une idée générale du développement d'interfaces utilisateur à l'aide de Streamlit.

Ensuite, nous commençons à ajouter plus de fonctionnalités, en commençant par l'invite d'ingénierie pour que le modèle Claude nous donne un mot aléatoire qui est souvent mal orthographié. Après cela, nous ajouterons la génération de synthèse vocale fournie par ElevenLabs pour démontrer comment le modèle multilingue épelle les mots. Enfin, nous allons tester l'application simple.

Initialisation de notre projet Streamlit

Entrons dans l'action de codage ! Commençons par créer un répertoire pour notre projet et entrez-le !

 mkdir randomwords cd randomwords

Ensuite, nous allons utiliser ce répertoire comme base de notre projet Streamlit . Étant donné qu'un projet Streamlit est essentiellement un projet Python , nous devons effectuer certaines étapes pour initialiser notre projet Python , telles que la définition et l'activation de notre environnement virtuel.

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

Une fois activé, la sortie de notre terminal devrait afficher le nom de l'environnement virtuel (env), comme ceci :

Ensuite, il est temps d'installer les bibliothèques dont nous avons besoin pour ce projet ! utilisons la commande pip pour installer les bibliothèques streamlit , anthropic et elevenlabs . Notez que nous installons également une bibliothèque pydantic à version verrouillée pour éviter une erreur liée à Pydantic dans l'une des fonctions elevenlabs .

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

Avec toutes les exigences du projet à l'écart, plongeons maintenant dans la partie codage ! Créez un nouveau fichier dans notre répertoire de projet, appelons-le randomwords_app.py .

 touch randomwords_app.py

Une fois le fichier créé, ouvrons le fichier dans notre éditeur de code préféré ou notre environnement de développement intégré (IDE). Pour commencer, construisons notre application simple à partir des éléments les plus simples possibles, un titre et un texte pour la légende !

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

Pour conclure notre partie d'initialisation du projet, essayons de tester l'exécution de l'application. Assurez-vous que notre répertoire de travail actuel est toujours dans notre projet et que notre environnement virtuel est déjà activé. Lorsque tout est prêt, utilisez le streamlit run <app-name> pour exécuter l'application.

 streamlit run randomwords_app.py

L'application devrait s'ouvrir automatiquement dans nos navigateurs par défaut ! il devrait afficher le titre et le texte pour l'instant. Ensuite, nous allons ajouter une fonction de génération de mots aléatoires à l'aide du modèle Claude d'Anthropic .

Une dernière chose cependant, nous devrons fournir à notre application les clés API pour les services que nous allons utiliser, à savoir le modèle Claude d'Anthropic et la fonctionnalité de synthèse vocale d'ElevenLabs . Comme ces clés sont considérées comme sensibles, nous devons les conserver dans un endroit sûr et isolé.

Cependant, cette fois, nous ne les stockons pas dans un fichier .env . En effet, Streamlit traite différemment les variables d'environnement. Selon la documentation , nous devons créer un fichier de configuration secret dans un répertoire .streamlit . Nous pouvons créer le répertoire dans notre projet, puis créer le fichier.

 mkdir .streamlit touch .streamlit/secrets.toml

Modifions le fichier TOML que nous avons créé, notez que le fichier TOML utilise un formatage différent du fichier .env habituel.

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

Ajout de la fonctionnalité de génération de mots à l'aide du modèle Claude

Dans cette étape, nous ajouterons un bouton qui générera le mot aléatoire, l'élément d'en-tête pour afficher le mot généré et le sous-titre pour afficher la signification du mot. Cependant, venant d'un milieu webdev, je crois fermement que les éléments d'interface utilisateur doivent être placés et disposés à l'intérieur de conteneurs. Donc, nous allons faire exactement cela.

Importer les bibliothèques nécessaires

Tout d'abord, ajoutons quelques instructions d'importation. Nous allons importer la bibliothèque anthropic pour générer nos mots aléatoires.

 import streamlit as st import anthropic

Ensuite, avant d'en arriver à la partie UI, créons d'abord notre fonction de génération de mots.

Définition de la fonction de génération de mots

 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

Dans cette fonction, le levage le plus lourd est effectué par ** le mode Claude d'Anthropic **l (Merci, Claude ! 😉). Cependant, notre rôle dans cette fonction est de savoir comment faire en sorte que Claude renvoie le format exact de manière cohérente. Nous devons donc à la fois demander à Claude de "suivre strictement le format" et lui donner un exemple de réponse en l'ajoutant après notre invite initiale.

Enfin, nous nous assurons que Claude respecte nos accords en lui demandant de "N'oubliez pas de ne répondre qu'en suivant le modèle". La fonction se termine en retournant la réponse de Claude .

Revenons ensuite à la modification de l'interface utilisateur !

Mise à jour de l'interface utilisateur

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

Cette fois, nous avons ajouté un conteneur avec quelques éléments à l'intérieur. L'en-tête, le sous-en-tête pour afficher le mot aléatoire et l'élément de texte pour montrer la signification du mot. Nous avons également un texte pour montrer l'astuce sur la façon d'utiliser l'application, ainsi qu'un bouton en dessous.

Dans Streamlit , nous pouvons déclarer le gestionnaire d'événements click en utilisant une instruction conditionnelle, où il renvoie True lorsque le bouton est cliqué. Dans ce code, nous invoquons la fonction generate_word() qui renvoie le mot généré et la signification, et divisons le résultat en variables distinctes pour le mot et la signification, respectivement. Enfin, nous mettons à jour le sous-en-tête et l'élément de texte pour afficher le mot et sa signification.

Forme définitive

Vérifions à nouveau notre code ! Il doit contenir les instructions d'importation, la fonction de génération du mot aléatoire et l'interface utilisateur mise à jour qui contient le sous-en-tête et les éléments de texte ainsi que le bouton qui génère le mot en appelant la fonction 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}")

Test de la fonction de génération de mots

Exécutons à nouveau l'application avec la même commande. Nous pouvons également simplement réexécuter l'application en cliquant sur le menu supérieur droit et cliquez sur " Rerun " si nous avons déjà exécuté l'application.

Il devrait afficher cette interface utilisateur mise à jour.

Maintenant, essayons de cliquer sur le bouton Generate !

L'un des avantages de Streamlit est qu'il gère le chargement et fournit l'indicateur de chargement prêt à l'emploi. Nous devrions voir l'indicateur dans le coin supérieur droit, ainsi que l'option pour " arrêter " l'opération. Propre, hein ?

Après quelques secondes, le résultat devrait être affiché dans l'interface utilisateur.

Parfait! notez que l'application a correctement divisé le texte généré à partir du modèle Claude en mot et en signification. Cependant, si le résultat ne sort pas selon le format attendu, nous pouvons toujours cliquer à nouveau sur le bouton Generate .

La prochaine étape est la principale caractéristique de cette application, pour incorporer la génération de la parole dans notre générateur de mots aléatoires. En plus de montrer comment générer le fichier audio à l'aide de l'API fournie par ElevenLabs, cette étape sert également à démontrer les capacités du modèle multilingue d'ElevenLabs.

Ajout de la fonctionnalité de génération de parole à l'aide de l'API ElevenLabs

La première étape de cette section est, comme vous l'avez probablement deviné, d'ajouter plus d'instruction d'importation ! Alors, ajoutons quelques fonctions d' elevenlabs que nous utiliserons pour la fonction de génération de parole.

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

Ensuite, nous allons définir la fonction pour gérer la génération de la parole.

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

Grâce à la simplicité et à la lisibilité de Python , ainsi qu'à l'API facile à utiliser d'ElevenLabs , nous pouvons générer le discours en utilisant ce code seul ! La fonction accepte le mot aléatoire que nous utilisons pour générer le discours. Nous utilisons également spécifiquement le modèle "eleven_multilingual_v1" qui est un modèle multilingue, parfait pour notre cas d'utilisation pour démontrer l'orthographe et la prononciation de mots étrangers et souvent mal orthographiés ! Enfin, nous utilisons la voix " Bella " pour ce tutoriel, qui est l'une des voix préfabriquées fournies par ElevenLabs .

Ensuite, nous ajouterons un lecteur audio pour lire le discours généré.

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

Juste en dessous de notre dernier code précédent, nous ajoutons la variable pour stocker le discours généré et exécutons le discours à l'aide du lecteur audio fourni par la fonction st.audio de Streamlit. À ce stade, notre application devrait fonctionner comme prévu, n'affichant le lecteur audio que lorsqu'un mot aléatoire est disponible pour "lire".

Curieux de savoir comment ça marche ? moi aussi! testons l'application maintenant !

Test de la fonctionnalité d'orthographe des mots

Exécutons à nouveau l'application en utilisant streamlit run ou réexécutons simplement l'application si elle est déjà en cours d'exécution. Il devrait ressembler exactement à la dernière fois que nous l'avons laissé. Cependant, essayons de cliquer sur le bouton "Générer" cette fois !

Incroyable! cette fois, l'application affiche également un lecteur audio ! Essayons d'y jouer. En utilisant le modèle multilingue, le discours généré doit utiliser l'accent et l'intonation proches de la langue d'origine du mot. Par exemple, « entrepreneur » doit être prononcé avec un accent français.

Conclusion

Dans ce court didacticiel, nous espérons avoir exploré les capacités de la technologie de génération de parole offerte par ElevenLabs . Avec le modèle multilingue, il est facile de générer des discours destinés à un auditeur non anglophone. Dans notre cas d'utilisation, nous avons besoin d'un modèle multilingue pour nous aider à trouver la bonne façon de prononcer et d'épeler les mots non anglais qui sont souvent mal orthographiés.

Avec tant d'idées, nous invitons les développeurs à se joindre à nous pour créer l'avenir !

Le 28 juillet , lablab.ai a lancé un défi où vous pouvez créer votre propre application d'IA vocale avec les modèles ElevenLabs ! (De plus, vous pouvez tirer parti d'autres modèles d'IA tels que les grands modèles de langage, les modèles génératifs d'images et de vidéos, etc., tant qu'ils ne sont pas en concurrence directe avec la technologie 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.

Vous pouvez trouver plus de tutoriels ICI et vous pouvez REJOINDRE d'autres hackathons pour construire avec des technologies de pointe !

Et un grand merci au Septian Adi Nugraha - l'auteur de cet article. 💚