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

生成音声にはどのような機能があるかご存知ですか?それらはどのような広大な可能性を開き、どれほど多くの分野で恩恵を受けることができるのでしょうか? ビデオブログや書籍を音声化するためのアプリが必要な場合があります。プロのナレーションでゲームのキャラクターに命を吹き込みたいと思うかもしれません。外国語学習用のアプリを作ってみてはいかがでしょうか？ 今日、 、AI 音声テクノロジーをより深く理解するのに役立つチュートリアルを用意しました。 lablab.ai は 飛び込んでみましょう！ 序章 現在は、さまざまな「 」ツールが市場に登場しており、ソフトウェア開発にとって最もエキサイティングな時期の 1 つです。名前だけ言っても、カバーレターの世代ですか？チェック！電子メールの生成?チェック！コードコメントの自動生成?チェック！コーディングやソフトウェア開発以外でも、ユースケースの可能性は膨大です。 生成 AI これで、さまざまな画像生成モデルを使用してテキスト プロンプト付きの画像を生成できるようになりました。したがって、生成された資産をさまざまな製品に組み込むことが可能になります。次の質問は、音声についてはどうですか?ここ数年のユーザー エクスペリエンスのトレンドでは、新たなトレンドの 1 つとして「音声コマンド」が挙げられています。 私たちが作るソフトウェアに音声が機能の一つとして組み込まれるのは当然のことです。そのため、このチュートリアルでは、ランダムな単語を生成し、それを綴らせる簡単なアプリで、 が提供する「 」機能を紹介します。この の UI を構築するには、データ サイエンス プロジェクトを共有するための新しい UI ライブラリである を使用します。 イレブンラボ 音声合成 Python ベースのアプリ Streamlit の紹介 イレブンラボ 、 ソリューションを提供する音声技術研究会社です。使いやすい により、開発者は AI を使用して高品質のスピーチを生成できます。これは、膨大な量のオーディオブックやポッドキャストでトレーニングされた AI モデルによって可能になります。このトレーニングにより、AI は音声生成において予測可能な高品質の結果を提供できるようになります。 イレブンラボは 音声合成 API が提供する主な機能は 2 つあり、1 つ目は VoiceLab で、ユーザーは録音されたオーディオや既存の音声から音声をクローンしたり、性別、年齢、民族、人種に基づいて音声を「デザイン」したりできます。ユーザーが作業する音声を取得したら、次の機能である音声合成に進むことができます。そこでは、設計した音声または既成の音声を使用して音声を生成できます。 イレブンラボ モデルの紹介 Anthropic のクロード 、人工知能システムの相互運用性、堅牢性、安全性の向上に重点を置く AI 研究組織である によって開発された最新の AI モデルです。 Claude は Anthropic モデルは、人間のような応答を生成するように設計されており、コンテンツ作成、法律、顧客サービスに至るまで、幅広いアプリケーションで強力なツールになります。市場の他の と同様に、 もさまざまなインターネット テキストでトレーニングを受けています。ただし、ほとんどの AI モデルとは異なり、「安全性」に重点を置いているため、ユーザーにとって「有害」または「真実ではない」とみなされる出力を拒否することができます。 クロード AI モデル クロード の概要 Streamlit は、開発者やデータ サイエンティストが、視覚的に魅力的でカスタマイズされた Web アプリを簡単に作成して共有できるようにするオープンソースの ライブラリです。開発者は を使用して、完全な機能を備えたデータ サイエンス アプリを数分で構築およびデプロイできます。これは、データ スクリプトを UI コンポーネントに変換するために使用できるシンプルで直感的な API によって可能になります。 Streamlit Python Streamlit 前提条件 と を使用した の基礎知識 Python Streamlit UI 開発 へのアクセス Anthropic API へのアクセス イレブンラボ API 概要 を初期化する Streamlit プロジェクト モデルを使用した単語生成機能の追加 クロード を使用した音声生成機能の追加 イレブンラボ API テスト 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) の名前が表示されるはずです。 次に、このプロジェクトに必要なライブラリをインストールします。 コマンドを使用して、 、 、および ライブラリをインストールしましょう。 関数の 1 つでの Pydantic 関連のエラーを防ぐために、バージョンがロックされた ライブラリもインストールすることに注意してください。 pip streamlit anthropic elevenlabs elevenlabs 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 streamlit run randomwords_app.py アプリはデフォルトのブラウザで自動的に開きます。現時点ではタイトルとテキストが表示されているはずです。次に、 モデルを使用してランダムな単語生成機能を追加します。 Anthropic の Claude ただし、最後に 1 つ、使用するサービス、つまり モデルと 機能の API キーをアプリに提供する必要があります。これらのキーは機密性が高いと考えられるため、安全で隔離された場所に保管する必要があります。 Anthropic の Claude イレブンラボの音声合成 ただし、今回は ファイルには保存しません。これは、Streamlit が環境変数を異なる方法で処理するためです。 によると、 ディレクトリ内にシークレット設定ファイルを作成する必要があります。プロジェクト内にディレクトリを作成してから、ファイルを作成します。 .env ドキュメント .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 この関数では、最も重い作業は ** **l (ありがとう、 ! 😉) によって行われます。ただし、この関数における私たちの役割は、Claude が一貫して正確な形式を返すようにする方法です。したがって、 「形式に厳密に従う」ように指示することと、最初のプロンプトの後に追加して応答例を与えることの両方が必要です。 Anthropic のクロード モード クロード クロードに 最後に、「パターンに従ってのみ応答することを忘れないでください」とクロードに依頼することで、クロードが契約を遵守していることを確認します。この関数は、 からの応答を返すことで終了します。 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 のシンプルさと読みやすさ、そして 使いやすい API のおかげで、このコードだけを使用して音声を生成できます。この関数は、音声の生成に使用するランダムな単語を受け入れます。また、特に多言語モデルである「eleven_multilingual_v1」モデルを使用します。これは、外国語やよくスペルミスされる単語のスペルと発音を示すユースケースに最適です。最後に、このチュートリアルでは「 」音声を使用します。これは、 が提供する既製の音声の 1 つです。 Python Celebrities の Bella イレブンラボ 次に、生成された音声を再生するオーディオ プレーヤーを追加します。 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」はフランス語のアクセントで発音する必要があります。 結論 この短いチュートリアルでは、 が提供する音声生成テクノロジーの機能を探索できたことを願っています。多言語モデルを使用すると、英語以外の聞き手に向けたスピーチを簡単に生成できます。私たちのユースケースでは、スペルを間違えやすい英語以外の単語の正しい発音とスペルを見つけるのに役立つ多言語モデルが必要です。 イレブンラボ たくさんのアイデアがあるので、未来の創造に参加してくれる開発者を招待します。 、 、 モデルを使用して独自の音声 AI アプリを作成できる 。 (さらに、ハッカソン テクノロジーと直接競合しない限り、大規模言語モデル、画像およびビデオ生成モデルなどの他の AI モデルを活用することもできます)。 7 月 28 日 lablab.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