イレブンラボ、Streamlit、Claude を使用してシンプルな単語スペル アプリを構築する

生成音声にはどのような機能があるかご存知ですか?それらはどのような広大な可能性を開き、どれほど多くの分野で恩恵を受けることができるのでしょうか?

ビデオブログや書籍を音声化するためのアプリが必要な場合があります。プロのナレーションでゲームのキャラクターに命を吹き込みたいと思うかもしれません。外国語学習用のアプリを作ってみてはいかがでしょうか？

今日、 lablab.ai は、AI 音声テクノロジーをより深く理解するのに役立つチュートリアルを用意しました。飛び込んでみましょう！

序章

現在は、さまざまな「生成 AI 」ツールが市場に登場しており、ソフトウェア開発にとって最もエキサイティングな時期の 1 つです。名前だけ言っても、カバーレターの世代ですか？チェック！電子メールの生成?チェック！コードコメントの自動生成?チェック！コーディングやソフトウェア開発以外でも、ユースケースの可能性は膨大です。

これで、さまざまな画像生成モデルを使用してテキスト プロンプト付きの画像を生成できるようになりました。したがって、生成された資産をさまざまな製品に組み込むことが可能になります。次の質問は、音声についてはどうですか?ここ数年のユーザー エクスペリエンスのトレンドでは、新たなトレンドの 1 つとして「音声コマンド」が挙げられています。

私たちが作るソフトウェアに音声が機能の一つとして組み込まれるのは当然のことです。そのため、このチュートリアルでは、ランダムな単語を生成し、それを綴らせる簡単なアプリで、イレブンラボが提供する「音声合成」機能を紹介します。このPython ベースのアプリの UI を構築するには、データ サイエンス プロジェクトを共有するための新しい UI ライブラリであるStreamlitを使用します。

イレブンラボの紹介

イレブンラボは、音声合成ソリューションを提供する音声技術研究会社です。使いやすいAPIにより、開発者は AI を使用して高品質のスピーチを生成できます。これは、膨大な量のオーディオブックやポッドキャストでトレーニングされた AI モデルによって可能になります。このトレーニングにより、AI は音声生成において予測可能な高品質の結果を提供できるようになります。

イレブンラボが提供する主な機能は 2 つあり、1 つ目は VoiceLab で、ユーザーは録音されたオーディオや既存の音声から音声をクローンしたり、性別、年齢、民族、人種に基づいて音声を「デザイン」したりできます。ユーザーが作業する音声を取得したら、次の機能である音声合成に進むことができます。そこでは、設計した音声または既成の音声を使用して音声を生成できます。

Anthropic のクロードモデルの紹介

Claude は、人工知能システムの相互運用性、堅牢性、安全性の向上に重点を置く AI 研究組織であるAnthropicによって開発された最新の AI モデルです。

クロードモデルは、人間のような応答を生成するように設計されており、コンテンツ作成、法律、顧客サービスに至るまで、幅広いアプリケーションで強力なツールになります。市場の他のAI モデルと同様に、クロードもさまざまなインターネット テキストでトレーニングを受けています。ただし、ほとんどの AI モデルとは異なり、「安全性」に重点を置いているため、ユーザーにとって「有害」または「真実ではない」とみなされる出力を拒否することができます。

Streamlitの概要

Streamlitは、開発者やデータ サイエンティストが、視覚的に魅力的でカスタマイズされた Web アプリを簡単に作成して共有できるようにするオープンソースのPythonライブラリです。開発者はStreamlitを使用して、完全な機能を備えたデータ サイエンス アプリを数分で構築およびデプロイできます。これは、データ スクリプトを UI コンポーネントに変換するために使用できるシンプルで直感的な API によって可能になります。

前提条件

• PythonとStreamlitを使用したUI 開発の基礎知識
• Anthropic APIへのアクセス
• イレブンラボ APIへのアクセス

概要

1. Streamlit プロジェクトを初期化する
2. クロードモデルを使用した単語生成機能の追加
3. イレブンラボ APIを使用した音声生成機能の追加
4. Word Generator アプリのテスト

議論

このチュートリアルでは少なくとも 4 つのステップを実行します。まず、Streamlit を使用してユーザー インターフェイスを開発する一般的な感覚を得るために、Streamlit ベースのプロジェクトを初期化する必要があります。

次に、より多くの機能の追加を開始します。まず、クロードモデルに、スペルをよく間違えられるランダムな単語を与えるエンジニアリング プロンプトを取得します。その後、 ElementalLabsが提供するテキストから音声への生成を追加して、多言語モデルが単語をどのように綴るかを示します。最後に、簡単なアプリをテストします。

Streamlit プロジェクトを初期化する

コーディング作業に移りましょう。まず、プロジェクトのディレクトリを作成してそこに入りましょう。

 mkdir randomwords cd randomwords

次に、このディレクトリをStreamlitプロジェクトの基礎として使用します。 Streamlitプロジェクトは本質的にPythonプロジェクトであるため、仮想環境の定義やアクティブ化など、 Pythonプロジェクトを初期化するためのいくつかの手順を実行する必要があります。

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

アクティブ化すると、ターミナルの出力には次のように仮想環境 (env) の名前が表示されるはずです。

次に、このプロジェクトに必要なライブラリをインストールします。 pipコマンドを使用して、 streamlit 、 anthropic 、およびelevenlabsライブラリをインストールしましょう。 elevenlabs関数の 1 つでの Pydantic 関連のエラーを防ぐために、バージョンがロックされたpydanticライブラリもインストールすることに注意してください。

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

プロジェクトの要件をすべて終えたので、コーディング部分に進みましょう。プロジェクト ディレクトリ内に新しいファイルを作成し、 randomwords_app.pyと名付けます。

 touch randomwords_app.py

ファイルが作成されたら、お気に入りのコード エディターまたは統合開発環境 (IDE) でファイルを開いてみましょう。まずは、タイトルとキャプションのテキストという、可能な限り単純な部分からシンプルなアプリを構築してみましょう。

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

プロジェクトの初期化部分を締めくくるために、アプリのテスト実行を試してみましょう。現在の作業ディレクトリがまだプロジェクト内にあり、仮想環境がすでにアクティブ化されていることを確認してください。すべての準備ができたら、 streamlit run <app-name>を使用してアプリを実行します。

 streamlit run randomwords_app.py

アプリはデフォルトのブラウザで自動的に開きます。現時点ではタイトルとテキストが表示されているはずです。次に、 Anthropic の Claudeモデルを使用してランダムな単語生成機能を追加します。

ただし、最後に 1 つ、使用するサービス、つまりAnthropic の Claudeモデルとイレブンラボの音声合成機能の API キーをアプリに提供する必要があります。これらのキーは機密性が高いと考えられるため、安全で隔離された場所に保管する必要があります。

ただし、今回は.envファイルには保存しません。これは、Streamlit が環境変数を異なる方法で処理するためです。ドキュメントによると、 .streamlitディレクトリ内にシークレット設定ファイルを作成する必要があります。プロジェクト内にディレクトリを作成してから、ファイルを作成します。

 mkdir .streamlit touch .streamlit/secrets.toml

作成した TOML ファイルを編集しましょう。TOML ファイルは通常の.envファイルとは異なる形式を使用していることに注意してください。

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

クロードモデルを使用した単語生成機能の追加

このステップでは、ランダムな単語を生成するボタン、生成された単語を表示する見出し要素、単語の意味を表示する小見出しを追加します。ただし、Web 開発のバックグラウンドを持つ私は、UI 要素はコンテナー内に配置および配置されるべきだと強く信じています。それで、まさにそれをやります。

必要なライブラリをインポートする

まず、いくつかの import ステートメントを追加しましょう。 anthropicライブラリをインポートして、ランダムな単語を生成します。

 import streamlit as st import anthropic

次に、UI 部分に入る前に、まず単語生成関数を作成しましょう。

単語生成関数の定義

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

この関数では、最も重い作業は ** Anthropic のクロード モード**l (ありがとう、クロード! 😉) によって行われます。ただし、この関数における私たちの役割は、Claude が一貫して正確な形式を返すようにする方法です。したがって、クロードに「形式に厳密に従う」ように指示することと、最初のプロンプトの後に追加して応答例を与えることの両方が必要です。

最後に、「パターンに従ってのみ応答することを忘れないでください」とクロードに依頼することで、クロードが契約を遵守していることを確認します。この関数は、 Claudeからの応答を返すことで終了します。

次に、UI の編集に戻りましょう。

UIの更新

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

今回は、内部にいくつかの要素を含むコンテナを追加しました。ランダムな単語を表示するヘッダー、サブヘッダー、および単語の意味を示すテキスト要素。アプリの使い方のヒントを示すテキストとその下にボタンもあります。

Streamlitでは、条件ステートメントを使用してクリック イベント ハンドラーを宣言できます。ボタンがクリックされたときにTrueを返します。このコードでは、生成された単語と意味を返すgenerate_word()関数を呼び出し、その結果を単語と意味ごとに別々の変数に分割します。最後に、サブヘッダーとテキスト要素を更新して、単語と意味を表示します。

最終形態

もう一度コードを確認してみましょう。これには、インポート ステートメント、ランダムな単語を生成する関数、サブヘッダーを含む更新された UI、テキスト要素、および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}")

単語生成機能のテスト

同じコマンドでアプリをもう一度実行してみましょう。以前にアプリを実行したことがある場合は、右上のメニューをクリックして「再実行」をクリックするだけでアプリを再実行することもできます。

この更新されたユーザー インターフェイスが表示されるはずです。

それでは、 Generateボタンをクリックしてみましょう。

Streamlit の優れた点の 1 つは、読み込みを処理し、すぐに読み込みインジケーターを提供できることです。右上隅にインジケーターと、操作を「停止」するオプションが表示されます。きちんとしたね？

数秒後、結果が UI に表示されます。

完全！アプリがクロードモデルから生成されたテキストを単語と意味に正しく分割していることに注目してください。ただし、期待した形式に従って結果が得られない場合は、いつでもGenerateボタンを再度クリックできます。

次のステップは、このアプリの主な機能であり、音声生成をランダム単語ジェネレーターに組み込むことです。このステップは、イレブンラボが提供する API を使用してオーディオ ファイルを生成する方法を示すことに加えて、イレブンラボの多言語モデルの機能を示す役割も果たします。

イレブンラボAPI を使用した音声生成機能の追加

このセクションの最初のステップは、おそらくご想像のとおり、さらに import ステートメントを追加することです。そこで、音声生成機能に使用するelevenlabsの関数をいくつか追加しましょう。

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

次に、音声生成を処理する関数を定義します。

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

Pythonのシンプルさと読みやすさ、そしてCelebrities の使いやすい API のおかげで、このコードだけを使用して音声を生成できます。この関数は、音声の生成に使用するランダムな単語を受け入れます。また、特に多言語モデルである「eleven_multilingual_v1」モデルを使用します。これは、外国語やよくスペルミスされる単語のスペルと発音を示すユースケースに最適です。最後に、このチュートリアルでは「 Bella 」音声を使用します。これは、イレブンラボが提供する既製の音声の 1 つです。

次に、生成された音声を再生するオーディオ プレーヤーを追加します。

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

先ほどの最新のコードのすぐ下に、生成された音声を保存する変数を追加し、Streamlit のst.audio関数によって提供されるオーディオ プレーヤーを使用して音声を実行します。この時点で、アプリは期待どおりに動作し、「読み取る」ことができるランダムな単語がある場合にのみオーディオ プレーヤーを表示するはずです。

どのように機能するか興味がありますか?私もです！今すぐアプリをテストしましょう!

単語のスペルチェック機能のテスト

streamlit runを使用してアプリを再度実行してみます。すでにアプリを実行している場合は、アプリを再実行します。前回放置したときとまったく同じように見えるはずです。ただし、今回は「生成」ボタンをクリックしてみましょう。

すばらしい！今回は、アプリにオーディオプレーヤーも表示されます。遊んでみましょう。多言語モデルを使用すると、生成される音声は、単語の元の言語に近いアクセントとイントネーションを使用する必要があります。たとえば、「entrepreneur」はフランス語のアクセントで発音する必要があります。

結論

この短いチュートリアルでは、イレブンラボが提供する音声生成テクノロジーの機能を探索できたことを願っています。多言語モデルを使用すると、英語以外の聞き手に向けたスピーチを簡単に生成できます。私たちのユースケースでは、スペルを間違えやすい英語以外の単語の正しい発音とスペルを見つけるのに役立つ多言語モデルが必要です。

たくさんのアイデアがあるので、未来の創造に参加してくれる開発者を招待します。

7 月 28 日、 lablab.ai は、イレブンラボモデルを使用して独自の音声 AI アプリを作成できるチャレンジを開始しました。 (さらに、ハッカソン テクノロジーと直接競合しない限り、大規模言語モデル、画像およびビデオ生成モデルなどの他の AI モデルを活用することもできます)。

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

ここでその他のチュートリアルを見つけることができ、他のハッカソンに参加して最先端のテクノロジーを使用して構築することもできます。

そして、この記事の著者であるSeptian Adi Nugrahaに深く感謝します。 💚