OpenAI、Vercel AI SDK、Next.js を使用した Ollama を使用して AI アシスタントを構築する方法

今日のブログ投稿では、3 つの異なる AI モデル (OpenAI の Whisper と TTS、および Meta の Llama 3.1) を使用して AI アシスタントを構築します。

AI を探索する中で、さまざまなことを試して、音声で動作する AI アシスタントを作成したいと思いました。この好奇心が私に、OpenAI の Whisper モデルと TTS モデルを Meta の Llama 3.1 と組み合わせて、音声起動アシスタントを構築することにしました。

これらのモデルがどのように連携するかは次のとおりです:

• まず、音声を Whisper モデルに送信し、音声からテキストに変換します。
• 次に、そのテキストを Llama 3.1 モデルに渡します。ラマはテキストを理解して応答を生成します。
• 最後に、Llama の応答を取得して TTS モデルに送信し、テキストを音声に戻します。その後、その音声をクライアントにストリーミングして返します。

この優れた AI アシスタントの構築を始めましょう!

はじめに

アシスタントを構築するにはさまざまなツールを使用します。クライアント側を構築するには、Next.js を使用します。ただし、好みのフレームワークを選択できます。

OpenAI モデルを使用するには、その TypeScript / JavaScript SDK を使用します。この API を使用するには、次の環境変数が必要です: OPENAI_API_KEY—

このキーを取得するには、OpenAI ダッシュボードにログインし、API キー セクションを見つける必要があります。ここで、新しいキーを生成できます。

すごいですね。次に、Llama 3.1 モデルを使用するために、ollama-ai-provider というプロバイダーを利用して、Ollama と Vercel AI SDK を使用します。

Ollama を使用すると、好みのモデル (Phi などの別のモデルを使用することもできます) をダウンロードしてローカルで実行できます。 Vercel SDK は、Next.js プロジェクトでの使用を容易にします。

Ollama を使用するには、Ollama をダウンロードして、好みのモデルを選択するだけです。このブログ投稿では、Llama 3.1 を選択します。 Ollama をインストールした後、ターミナルを開いて次のコマンドを記述することで、Ollama が動作しているかどうかを確認できます:

「llama3.1」と書いたのは、これが私が選んだモデルであることに注意してください。ただし、ダウンロードしたものを使用する必要があります。

物事を始める

Next.js アプリをセットアップして作業を開始しましょう。このコマンドから始めましょう:

コマンドを実行すると、アプリの詳細を設定するためのプロンプトがいくつか表示されます。ステップバイステップで進みましょう:

• アプリに名前を付けます.
• アプリルーターを有効にする.

他の手順はオプションであり、完全にあなた次第です。私の場合は、TypeScript と Tailwind CSS も使用することにしました。

これで完了です。プロジェクトに入り、モデルを実行するために必要な依存関係をインストールしましょう。

クライアントロジックの構築

ここでの目標は、音声を録音してバックエンドに送信し、バックエンドから音声応答を受け取ることです。

音声を録音するには、クライアント側の関数を使用する必要があります。つまり、クライアント コンポーネントを使用する必要があります。私たちの場合、クライアント機能を使用するようにページ全体を変換し、ツリー全体をクライアント バンドルに含める必要はありません。代わりに、サーバー コンポーネントを使用し、クライアント コンポーネントをインポートして、アプリケーションを段階的に強化したいと考えています。

それでは、クライアント側のロジックを処理する別のコンポーネントを作成しましょう。

アプリ フォルダー内にコンポーネント フォルダーを作成しましょう。ここでコンポーネントを作成します。

コンポーネントを初期化しましょう。いくつかのスタイルを含むボタンを追加しました:

そして、それを Page Server コンポーネントにインポートします。

ここでアプリを実行すると、次のように表示されるはずです:

すごい！さて、このボタンは何も行いませんが、目的は音声を録音してどこかに送信することです。そのために、ロジックを含むフックを作成しましょう:

音声を録音するには、navigator と MediaRecorder という 2 つの API を使用します。ナビゲーター API はユーザーのメディア オーディオなどのユーザーのメディア デバイスに関する情報を提供し、MediaRecorder はそこからオーディオを録音するのに役立ちます。これが彼らが一緒にプレイする方法です:

このコードをステップごとに説明しましょう。まず、2 つの新しい状態を作成します。 1 つ目はいつ録音しているかを追跡するためのもので、2 つ目は MediaRecorder のインスタンスを保存します。

次に、最初のメソッド startRecording を作成します。ここでは、音声の録音を開始するロジックを用意します。
まず、ユーザーのブラウザ環境に関する情報を提供するナビゲーター API のおかげで、ユーザーが利用可能なメディア デバイスを持っているかどうかを確認します。

音声を録音するメディアデバイスがない場合は、そのまま戻ります。そうした場合は、オーディオ メディア デバイスを使用してストリームを作成しましょう。

最後に、この音声を録音するための MediaRecorder のインスタンスを作成します。

次に、録音を停止するメソッドが必要です。これが stopRecording になります。ここでは、メディア レコーダーが存在する場合に備えて、録音を停止します。

音声を録音していますが、どこにも保存しません。これを達成するために、新しい useEffect と ref を追加しましょう。
新しい ref が必要になります。ここにオーディオ データのチャンクが保存されます。

useEffect では、主に 2 つのことを実行します。それらのチャンクを ref に保存し、停止したら、audio/mp3 タイプの新しい Blob を作成します。

このフックを AudioRecorder コンポーネントに接続します。

コインの反対側、バックエンドに行きましょう!

サーバー側のセットアップ

私たちはサーバー上でモデルを使用して、安全性を確保し、より高速に実行したいと考えています。新しいルートを作成し、Next.js のルート ハンドラーを使用してそのハンドラーを追加しましょう。 App フォルダーに、次のルートを含む「Api」フォルダーを作成しましょう:

私たちはサーバー上でモデルを使用して、安全性を確保し、より高速に実行したいと考えています。新しいルートを作成し、Next.js のルート ハンドラーを使用してそのハンドラーを追加しましょう。 App フォルダーに、次のルートを含む「Api」フォルダーを作成しましょう:

私たちのルートは「チャット」と呼ばれています。 Route.ts ファイルでハンドラーを設定します。まずは OpenAI SDK をセットアップしましょう。

このルートでは、フロントエンドから音声をbase64文字列として送信します。次に、それを受信して​​ Buffer オブジェクトに変換します。

いよいよ最初のモデルを使用します。この音声をテキストに変換し、OpenAI の Whisper Speech-To-Text モデルを使用したいと考えています。 Whisper ではテキストを作成するために音声ファイルが必要です。ファイルの代わりにバッファがあるため、次のように「toFile」メソッドを使用してオーディオ バッファをオーディオ ファイルに変換します。

「mp3」を指定したことに注目してください。これは、Whisper モデルで使用できる多数の拡張機能の 1 つです。サポートされている拡張機能の完全なリストは、こちらでご覧いただけます: https://platform.openai.com/docs/api-reference/audio/createTranscription#audio-createtranscription-file

ファイルの準備ができたので、それを Whisper に渡しましょう! OpenAI インスタンスを使用して、次のようにモデルを呼び出します。

それだけです！ここで、次のステップに進むことができます。Llama 3.1 を使用してこのテキストを解釈し、答えを返します。これには 2 つの方法を使用します。まず、「ollama-ai-provider」パッケージの「ollama」を使用します。これにより、ローカルで実行されている Ollama でこのモデルを使用できるようになります。次に、Vercel AI SDK の「generateText」を使用してテキストを生成します。
補足: Ollama をローカルで実行するには、ターミナルで次のコマンドを記述する必要があります:

ついに、最後のモデル、OpenAI の TTS が登場しました。ユーザーに音声で返信したいので、このモデルは非常に役立ちます。テキストを音声に変換します:

TTS モデルは、応答を音声ファイルに変換します。この音声を次のようにユーザーにストリーミングして返したいと考えています:

バックエンド コード全体はこれですべてです。次に、フロントエンドに戻って、すべての配線を完了します。

すべてをまとめる

useRecordVoice.tsx フックで、API エンドポイントを呼び出す新しいメソッドを作成しましょう。このメソッドは応答を返し、バックエンドからストリーミングしているオーディオをユーザーに再生します。

すごいですね！ストリーミング応答を取得したので、それを処理してユーザーに音声を再生する必要があります。これには AudioContext API を使用します。この API を使用すると、オーディオを保存し、デコードして、準備ができたらユーザーに再生することができます。

それで終わりです!これで、ユーザーはデバイスで音声応答を聞くことができるようになります。最後に、少しの読み込みインジケーターを追加して、アプリをもう少し良くしましょう:

結論

このブログ投稿では、複数の AI モデルを組み合わせることが目標の達成にどのように役立つかを説明しました。私たちは、Llama 3.1 などの AI モデルをローカルで実行し、Next.js アプリで使用する方法を学びました。また、これらのモデルに音声を送信し、応答をストリーム バックしてユーザーに音声を再生する方法も発見しました。

これは AI を使用できる数多くの方法の 1 つにすぎません。可能性は無限です。 AI モデルは、かつては実現が難しかったものをこのような品質で作成できるようにする素晴らしいツールです。読んでいただきありがとうございます。今度はあなたが AI を使って素晴らしいものを構築する番です!

完全なデモは GitHub でご覧いただけます: AI Assistant with Whisper TTS and Ollama using Next.js

以上がOpenAI、Vercel AI SDK、Next.js を使用した Ollama を使用して AI アシスタントを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。