Erstellen einer einfachen Wortbuchstabier-App mit ElevenLabs, Streamlit und Claude

Wissen Sie, wozu generative Stimmen fähig sind? Welche enormen Möglichkeiten eröffnen sie und wie viele Bereiche können davon profitieren?

Vielleicht benötigen Sie eine App zum Vertonen eines Videoblogs oder Buchs. Vielleicht möchten Sie eine Spielfigur mit einem professionellen Voice-Over zum Leben erwecken. Wie wäre es mit der Erstellung einer Anwendung zum Erlernen von Fremdsprachen?

Heute hat lablab.ai ein Tutorial für Sie vorbereitet, das Ihnen hilft, KI-Sprachtechnologien besser kennenzulernen! Lass uns eintauchen!

Einführung

Es ist eine der aufregendsten Zeiten für die Softwareentwicklung, da verschiedene „ generative KI “-Tools auf dem Markt auftauchen. Nennen Sie es einfach: Anschreiben erstellen? Überprüfen! E-Mail-Generierung? Überprüfen! Automatische Generierung von Codekommentaren? Überprüfen! Auch außerhalb der Codierung und Softwareentwicklung sind die Anwendungsfallmöglichkeiten enorm.

Jetzt können wir Bilder mit Textaufforderungen mit verschiedenen Bildgenerierungsmodellen generieren. Dadurch ist es uns möglich, generierte Vermögenswerte in unsere verschiedenen Produkte einzubinden. Die nächste Frage ist: Wie wäre es mit Stimmen? Der Trend der Benutzererfahrungen in den letzten Jahren erwähnte „Sprachbefehle“ als einen der aufkommenden Trends.

Es ist nur natürlich, dass die von uns erstellte Software Stimmen als eine der Funktionen enthält. Aus diesem Grund stellen wir in diesem Tutorial die von ElevenLabs angebotene Funktion „ Sprachsynthese “ in einer einfachen App vor, die zufällige Wörter generiert und diese buchstabieren lässt. Um die Benutzeroberfläche für diese Python-basierte App zu erstellen, verwenden wir Streamlit , eine neue UI-Bibliothek zum Teilen von Data-Science-Projekten.

Einführung in ElevenLabs

ElevenLabs ist ein Forschungsunternehmen für Sprachtechnologie, das Sprachsyntheselösungen anbietet. Dank der benutzerfreundlichen API können Entwickler mithilfe von KI hochwertige Reden generieren. Möglich wird dies durch das KI-Modell, das auf einer Vielzahl von Hörbüchern und Podcasts trainiert wurde. Das Training ermöglicht es der KI, vorhersehbare und qualitativ hochwertige Ergebnisse bei der Sprachgenerierung zu liefern.

ElevenLabs bietet zwei Hauptfunktionen: Die erste ist VoiceLab, wo Benutzer Stimmen aus aufgezeichneten Audiodaten und/oder vorhandenen vorgefertigten Stimmen klonen und auch Stimmen basierend auf Geschlecht, Alter, ethnischer Zugehörigkeit und Rasse „entwerfen“ können. Sobald Benutzer über die Stimmen verfügen, mit denen sie arbeiten können, können sie mit der nächsten Funktion, der Sprachsynthese, fortfahren, wo sie Reden mit ihren entworfenen Stimmen oder einfach mit den vorgefertigten Stimmen generieren können.

Einführung in das Claude-Modell von Anthropic

Claude ist das neueste KI-Modell, das von Anthropic entwickelt wurde, einer KI-Forschungsorganisation, die sich auf die Verbesserung der Interoperabilität, Robustheit und Sicherheit von Systemen der künstlichen Intelligenz konzentriert.

Das Claude- Modell ist darauf ausgelegt, menschenähnliche Antworten zu generieren, was es zu einem leistungsstarken Werkzeug für eine Vielzahl von Anwendungen macht, von der Inhaltserstellung über die Rechtsabteilung bis hin zum Kundenservice. Wie alle anderen KI-Modelle auf dem Markt ist auch Claude in einer Vielzahl von Internettexten geschult. Im Gegensatz zu den meisten KI-Modellen liegt der Schwerpunkt jedoch auf „Sicherheit“, was es ermöglicht, Ausgaben abzulehnen, die es für die Benutzer als „schädlich“ oder „unwahr“ erachtet.

Einführung in Streamlit

Streamlit ist eine Open-Source -Python- Bibliothek, die es Entwicklern und Datenwissenschaftlern einfach und möglich macht, visuell ansprechende und angepasste Web-Apps zu erstellen und zu teilen. Entwickler können Streamlit verwenden, um in wenigen Minuten voll funktionsfähige Data-Science-Apps zu erstellen und bereitzustellen. Möglich wird dies durch die einfache und intuitive API, mit der Datenskripte in UI-Komponenten umgewandelt werden können.

Voraussetzungen

• Grundkenntnisse in Python und UI-Entwicklung mit Streamlit
• Zugriff auf die Anthropic API
• Zugriff auf die ElevenLabs-API

Gliederung

1. Initialisierung unseres Streamlit-Projekts
2. Hinzufügen einer Wortgenerierungsfunktion mithilfe des Claude- Modells
3. Hinzufügen einer Sprachgenerierungsfunktion mithilfe der ElevenLabs-API
4. Testen der Wortgenerator-App

Diskussion

Es gibt mindestens vier Schritte, die wir in diesem Tutorial durchlaufen werden. Zuerst müssen wir das Streamlit-basierte Projekt initialisieren, um ein allgemeines Gefühl für die Entwicklung von Benutzeroberflächen mit Streamlit zu bekommen.

Als nächstes beginnen wir mit dem Hinzufügen weiterer Funktionen, beginnend mit der technischen Aufforderung, das Claude -Modell dazu zu bringen, uns ein zufälliges Wort zu geben, das häufig falsch geschrieben wird. Anschließend fügen wir die von ElevenLabs bereitgestellte Text-to-Voice-Generierung hinzu, um zu demonstrieren, wie das mehrsprachige Modell die Wörter buchstabiert. Abschließend testen wir die einfache App.

Initialisierung unseres Streamlit-Projekts

Kommen wir zur Codierungsaktion! Erstellen wir zunächst ein Verzeichnis für unser Projekt und geben Sie es ein!

 mkdir randomwords cd randomwords

Als Nächstes verwenden wir dieses Verzeichnis als Grundlage für unser Streamlit- Projekt. Da es sich bei einem Streamlit- Projekt im Wesentlichen um ein Python- Projekt handelt, müssen wir einige Schritte ausführen, um unser Python- Projekt zu initialisieren, beispielsweise das Definieren und Aktivieren unserer virtuellen Umgebung.

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

Nach der Aktivierung sollte die Ausgabe unseres Terminals den Namen der virtuellen Umgebung (env) anzeigen, etwa so:

Als nächstes ist es an der Zeit, die Bibliotheken zu installieren, die wir für dieses Projekt benötigen! Lassen Sie uns den Befehl pip verwenden, um die streamlit , anthropic und elevenlabs Bibliotheken zu installieren. Beachten Sie, dass wir auch eine versionierte pydantic Bibliothek installieren, um einen Pydantic-bezogenen Fehler in einer der elevenlabs Funktionen zu verhindern.

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

Nachdem alle Anforderungen des Projekts geklärt sind, stürzen wir uns nun in den Codierungsteil! Erstellen Sie eine neue Datei in unserem Projektverzeichnis, nennen wir sie randomwords_app.py .

 touch randomwords_app.py

Nachdem die Datei erstellt wurde, öffnen wir sie in unserem bevorzugten Code-Editor oder in der integrierten Entwicklungsumgebung (IDE). Lassen Sie uns zunächst unsere einfache App aus möglichst einfachen Teilen erstellen: einem Titel und einem Text für die Bildunterschrift!

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

Um unseren Projektinitialisierungsteil abzuschließen, versuchen wir, die App testweise auszuführen. Stellen Sie sicher, dass sich unser aktuelles Arbeitsverzeichnis noch in unserem Projekt befindet und unsere virtuelle Umgebung bereits aktiviert ist. Wenn alles fertig ist, verwenden Sie den streamlit run <app-name> , um die App auszuführen.

 streamlit run randomwords_app.py

Die App sollte in unseren Standardbrowsern automatisch geöffnet werden! Es sollten zunächst der Titel und der Text angezeigt werden. Als Nächstes fügen wir mithilfe des Claude-Modells von Anthropic eine Funktion zur Zufallswortgenerierung hinzu.

Eine letzte Sache ist jedoch, dass wir unserer App die API-Schlüssel für die Dienste bereitstellen müssen, die wir verwenden werden, nämlich das Claude-Modell von Anthropic und die Sprachsynthesefunktion von ElevenLabs . Da diese Schlüssel als sensibel gelten, sollten wir sie an einem sicheren und isolierten Ort aufbewahren.

Dieses Mal speichern wir sie jedoch nicht in einer .env Datei. Dies liegt daran, dass Streamlit Umgebungsvariablen unterschiedlich behandelt. Laut Dokumentation müssen wir eine geheime Konfigurationsdatei in einem .streamlit Verzeichnis erstellen. Wir können das Verzeichnis in unserem Projekt erstellen und dann die Datei erstellen.

 mkdir .streamlit touch .streamlit/secrets.toml

Bearbeiten wir nun die von uns erstellte TOML-Datei. Beachten Sie, dass die TOML-Datei eine andere Formatierung verwendet als die übliche .env Datei.

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

Hinzufügen einer Wortgenerierungsfunktion mithilfe des Claude-Modells

In diesem Schritt fügen wir eine Schaltfläche hinzu, die das zufällige Wort generiert, das Überschriftenelement, um das generierte Wort anzuzeigen, und die Unterüberschrift, um die Bedeutung des Worts anzuzeigen. Da ich jedoch einen Webdev-Hintergrund habe, bin ich der festen Überzeugung, dass UI-Elemente in Containern platziert und angeordnet werden sollten. Also werden wir genau das tun.

Importieren Sie die erforderlichen Bibliotheken

Fügen wir zunächst einige Importanweisungen hinzu. Wir werden die anthropic Bibliothek importieren, um unsere zufälligen Wörter zu generieren.

 import streamlit as st import anthropic

Bevor wir dann zum UI-Teil kommen, erstellen wir zunächst unsere Wortgenerierungsfunktion.

Definieren der Wortgenerierungsfunktion

 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

In dieser Funktion übernimmt der Claude-Modus von Anthropic die meiste Arbeit (Danke, Claude ! 😉). Unser Teil dieser Funktion besteht jedoch darin, Claude dazu zu bringen, konsistent das genaue Format zurückzugeben. Daher müssen wir Claude anweisen, „strikt das Format einzuhalten“, und ihm eine Beispielantwort geben, indem wir diese nach unserer ersten Aufforderung hinzufügen.

Schließlich stellen wir sicher, dass Claude unsere Vereinbarungen einhält, indem wir ihn bitten: „Denken Sie daran, nur nach dem Muster zu antworten.“ Die Funktion endet mit der Rückgabe der Antwort von Claude .

Kommen wir als Nächstes zurück zur Bearbeitung der Benutzeroberfläche!

Aktualisierung der Benutzeroberfläche

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

Dieses Mal haben wir einen Container mit einigen darin enthaltenen Elementen hinzugefügt. Die Kopfzeile, die Unterüberschrift zur Anzeige des zufälligen Worts und das Textelement zur Darstellung der Bedeutung des Worts. Wir haben auch einen Text, der den Hinweis zur Verwendung der App anzeigt, sowie eine Schaltfläche darunter.

In Streamlit können wir einen Click-Event-Handler mithilfe einer bedingten Anweisung deklarieren, die True zurückgibt, wenn auf die Schaltfläche geklickt wird. In diesem Code rufen wir die Funktion generate_word() auf, die das generierte Wort und die Bedeutung zurückgibt, und teilen das Ergebnis in separate Variablen für das Wort bzw. die Bedeutung auf. Abschließend aktualisieren wir die Unterüberschrift und das Textelement, um das Wort und die Bedeutung anzuzeigen.

Finale Form

Lassen Sie uns unseren Code noch einmal überprüfen! Es sollte die Importanweisungen, die Funktion zum Generieren des Zufallsworts und die aktualisierte Benutzeroberfläche enthalten, die Unterüberschriften und Textelemente sowie eine Schaltfläche enthält, die das Wort durch Aufrufen der Funktion generate_word() generiert.

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

Testen der Wortgenerierungsfunktion

Lassen Sie uns die App noch einmal mit demselben Befehl ausführen. Wir können die App auch einfach erneut ausführen, indem wir auf das Menü oben rechts und dann auf „ Erneut ausführen “ klicken, wenn die App bereits zuvor ausgeführt wurde.

Es sollte diese aktualisierte Benutzeroberfläche anzeigen.

Versuchen wir nun, auf die Schaltfläche Generate zu klicken!

Das Schöne an Streamlit ist, dass es das Laden übernimmt und die Ladeanzeige sofort bereitstellt. Wir sollten die Anzeige in der oberen rechten Ecke sowie die Option zum „ Stoppen “ des Vorgangs sehen. Ordentlich, oder?

Nach einigen Sekunden sollte das Ergebnis in der Benutzeroberfläche angezeigt werden.

Perfekt! Beachten Sie, dass die App den generierten Text aus dem Claude- Modell korrekt in Wort und Bedeutung aufgeteilt hat. Wenn das Ergebnis jedoch nicht dem erwarteten Format entspricht, können wir jederzeit erneut auf die Schaltfläche Generate klicken.

Der nächste Schritt ist die Hauptfunktion dieser App, die Sprachgenerierung in unseren Zufallswortgenerator zu integrieren. Neben der Demonstration, wie die Audiodatei mithilfe der von ElevenLabs bereitgestellten API generiert wird, dient dieser Schritt auch dazu, die Fähigkeiten des mehrsprachigen Modells von ElevenLabs zu demonstrieren.

Hinzufügen einer Sprachgenerierungsfunktion mithilfe der ElevenLabs -API

Der erste Schritt dieses Abschnitts besteht, wie Sie wahrscheinlich erraten haben, darin, weitere Importanweisungen hinzuzufügen! Fügen wir also einige Funktionen von elevenlabs hinzu, die wir für die Sprachgenerierungsfunktion verwenden werden.

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

Als Nächstes definieren wir die Funktion für die Sprachgenerierung.

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

Dank der Einfachheit und Lesbarkeit von Python und der benutzerfreundlichen API von ElevenLabs können wir die Sprache allein mit diesem Code generieren! Die Funktion akzeptiert das zufällige Wort, das wir zum Generieren der Sprache verwenden. Wir verwenden auch speziell das Modell „eleven_multilingual_v1“, ein mehrsprachiges Modell, das sich perfekt für unseren Anwendungsfall eignet, um die Rechtschreibung und Aussprache von Fremdwörtern und häufig falsch geschriebenen Wörtern zu demonstrieren! Schließlich verwenden wir für dieses Tutorial die Stimme „ Bella “, eine der vorgefertigten Stimmen von ElevenLabs .

Als Nächstes fügen wir einen Audioplayer hinzu, um die generierte Sprache abzuspielen.

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

Direkt unter unserem neuesten Code von früher fügen wir die Variable zum Speichern der generierten Sprache hinzu und führen die Sprache mit dem Audioplayer aus, der von der Funktion st.audio von Streamlit bereitgestellt wird. Zu diesem Zeitpunkt sollte unsere App wie erwartet funktionieren und den Audioplayer nur dann anzeigen, wenn ein zufälliges Wort zum „Lesen“ verfügbar ist.

Neugierig, wie es funktioniert? Ich auch! Lasst uns die App jetzt testen!

Testen der Wort-Rechtschreibfunktion

Lassen Sie uns die App erneut mit streamlit run ausführen oder die App einfach erneut ausführen, wenn sie bereits ausgeführt wird. Es sollte genauso aussehen wie beim letzten Mal, als wir es verlassen haben. Versuchen wir dieses Mal jedoch, auf die Schaltfläche „Generieren“ zu klicken!

Toll! Diesmal zeigt die App auch einen Audioplayer! Versuchen wir es zu spielen. Bei Verwendung des mehrsprachigen Modells sollte die erzeugte Sprache den Akzent und die Intonation verwenden, die der Ursprungssprache des Wortes nahe kommen. „Unternehmer“ sollte beispielsweise mit französischem Akzent ausgesprochen werden.

Abschluss

In diesem kurzen Tutorial haben wir hoffentlich die Möglichkeiten der Sprachgenerierungstechnologie von ElevenLabs untersucht. Mit dem mehrsprachigen Modell ist es einfach, Reden zu erstellen, die für nicht-englischsprachige Zuhörer gedacht sind. In unserem Anwendungsfall benötigen wir ein mehrsprachiges Modell, das uns dabei hilft, nicht-englische Wörter, die häufig falsch geschrieben werden, richtig auszusprechen und zu buchstabieren.

Bei so vielen Ideen laden wir Entwickler ein, gemeinsam mit uns die Zukunft zu gestalten!

Am 28. Juli startet lablab.ai eine Herausforderung , bei der Sie mit ElevenLabs- Modellen Ihre eigene Sprach-KI-App erstellen können! (Darüber hinaus können Sie andere KI-Modelle wie große Sprachmodelle, generative Bild- und Videomodelle usw. nutzen, sofern diese nicht in direkter Konkurrenz zur Hackathon-Technologie stehen.)

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

Weitere Tutorials finden Sie HIER und Sie können an anderen Hackathons teilnehmen , um mit modernsten Technologien zu bauen!

Und ein großes Dankeschön an den Septianer Adi Nugraha – den Autor dieses Artikels. 💚