7,624 文字
YouTubeの書き起こしのためにJavaScriptを使ってLangGraphでAIエージェントを構築してみましょう。エージェントは生活の一部を自動化したり、あるいは例えば、あるソースからデータを取得して別の形に変換したりするのに非常に役立ちます。この動画では、YouTubeの動画から書き起こしを取得し、画面上で要約できるYouTube書き起こしエージェントを構築します。
このために、Ollamaを使用してローカルで実行されるモデルを使い、Next.jsでフロントエンドアプリを構築し、そしてWXFlowsからYouTube書き起こしツールを使用します。では、VSCodeに入って、どのように構築されているか見てみましょう。
VSCodeでは、すでに新しいプロジェクトをセットアップしています。ここで、新しいNext.jsアプリケーションをブートストラップするコマンドを実行します。このために、Create Next App CLIを使用し、最新バージョンを使用するようにします。また、プロジェクトの名前を提供する必要があります。LandgraphのYouTubeエージェントと名付けます。これをセットアップするには、いくつかの質問に答える必要があります。例えば、TypeScriptを使用しますか？などです。そして、他のデフォルト設定についていくつか質問されます。
また、CSSの記述を助けるためのライブラリであるTailwindをインストールするかどうかも尋ねられます。あなたのニーズによって、独自のプロジェクトを構築する際には異なる決断をするかもしれません。これが完了すると、すべてのファイルを含む新しいディレクトリが生成されます。この新しいLandgraph YouTubeエージェントディレクトリに移動します。ここではNext.jsアプリケーションのすべてのボイラープレートコードを見つけることができます。
ここにpage.tsxというファイルがあり、これが誰かが私のアプリケーションを見たときにレンダリングされるメインファイルになります。ここにあるすべてのコードを削除し、別のもので置き換えます。ここに独自のアプリケーションのボイラープレートを追加します。
また、このコンポーネントをクライアントサイドコンポーネントとして設定する必要があります。これにより、後で状態管理を使用できるようになります。このdiv内には、アプリケーションをレンダリングするために必要なすべてのコードを設定できます。まず、ヘッダーから始めます。このために、エージェントの名前であるYouTube書き起こしエージェントを含むヘッダーを追加し、次に動画リンクを送信するための入力バーを追加します。
これも入れておきましょう。これを保存すると、すでにnpm run devを実行してブラウザでアプリケーションを訪問できますが、まず、プレースホルダーの動画も追加しておきます。これにより、後で実装するアプリケーションのセットアップをモックします。入力バーのすぐ下に、この最後の部分を貼り付けます。これにより、動画リンクを送信するボタン付きの入力バーと、YouTubeの動画用のiframeが表示されます。
ただし、これらの定義がすべて正しい形式であることを確認する必要があります。なぜなら、Reactは他のJavaScriptアプリケーションとは異なる要件を持っているからです。リファラルポリシー、フレームボーダー、そしてこのfull screen許可オプションを更新する必要があります。このファイルをフォーマットして保存しましょう。
ターミナルでは、npm run devを実行してNext.jsアプリケーションを起動できます。これにより、ブラウザで新しいページが開き、アプリケーションを見ることができます。ブラウザでは、ヘッダー、動画リンクを送信するためのバー、リンクを実際に送信するためのボタン、そしてYouTubeからの埋め込みiframeを含む動画をレンダリングする場所があることがわかります。
YouTube及びollamaを使用して実行されるモデルを両方使用して、このスペースを動的に埋めることができるLandGraphエージェントを追加します。では、VSCodeに戻り、まずターミナルでNext.jsを実行しているプロセスを終了し、ollamaが適切にインストールされているかを確認します。
ollamaを使えば、マシン上でローカルにモデルを実行できます。これらはすべてオープンソースモデルで、まずマシンにダウンロードする必要があります。このコマンドを初めて実行する場合、llama 3.2モデルを実際にダウンロードするための追加コマンドが表示されるかもしれません。これらはすべてオープンソースモデルなので、どこでも実行できます。例えば、watsonx.aiでも利用可能です。llama 3.2がインストールされていることが確認できたので、Ctrl Dを実行してこのプロセスを閉じることができます。ターミナルをクリアして、LangGraphをインストールしましょう。
LangGraphはLangchainのスーパーセットなので、使用するためにはいくつかのLangchainライブラリをインストールする必要があります。LangChain、LangGraph、そして他のコアライブラリをインストールします。これらがインストールされたら、新しいファイルを作成する必要があります。このファイルをactions.tsと呼びます。このactions.tsファイルで、LandGraphエージェントを作成します。
また、ファイルの一番上に「use server」を設定して、このファイルがサーバーサイドで実行されるようにする必要があります。ここではtranscribe関数を作成し始めることができます。これにはYouTubeの詳細を取得して画面上に表示するLangGraphエージェントが含まれます。この関数をtranscribeと呼びます。これは一つの入力、つまり動画URLを取り、動画URLは文字列である必要があります。ここでは、先ほどインストールしたさまざまなライブラリをインポートする必要もあります。
どのライブラリが必要かを分解してみましょう。まず、マシン上で実行されているOllamaモデルのチャットインターフェースであるChatOllamaが必要です。次に、LangGraphでエージェントを作成するために使用されるcreateReactAgent関数が必要です。さらに、ツールの作成に関連する2つのライブラリをインポートし、最後に、TypeScriptを使用しているため、いくつかの型定義も必要です。これで、transcribe関数内にエージェントをセットアップすることができます。
ここでもOllamaからのチャットインターフェースを使用していることがわかります。モデルをllama 3.2に設定し、温度をゼロに設定しています。また、大規模言語モデル(LLM)がJSON形式を返すように強制します。これは後で、LLMにJSON形式で何かを返すように強制するシステムプロンプトを見るときに重要になります。
レスポンスにはいくつかのメッセージが必要です。一つはシステムプロンプトで、もう一つは人間のメッセージです。これは通常あなたの質問です。しかし、今はチャットアプリを構築しているので、事前定義された質問があり、動画URLが動的なものです。システムプロンプトでは、LLMが与えられたYouTube URLからビデオIDを取得する必要があることがわかります。
私たちはLLMにURLからビデオIDを解析させることに依存します。そして、ビデオIDを含むJSON構造で出力を返します。最後に、これを返す必要があります。transcribe関数を呼び出すと、このJSONオブジェクトが返されます。actions.tsファイルを保存し、page.tsxコンポーネントを通じてすべてを接続しましょう。
このコンポーネントの上部では、いくつかの状態変数を設定する必要があります。2つを作成します。一つは入力バーを制御されたコンポーネントにするための状態変数です。これは、入力バーに何かを入力するたびに、ビデオURLの最新部分で状態が更新されることを意味します。
このために、videoURLという変数を作成します。そして、ビデオURLを更新する関数も作成します。これは入力バーのonChange関数で使用されます。このために、Reactからuseステートフックをインポートする必要があり、空の文字列をデフォルト状態として設定します。
次に、ビデオの状態も作成します。エージェントを使用してビデオを取得するたびに、それをローカル状態に保存したいと思います。これは、このコンポーネント全体で使用できることを意味します。constがあり、setVideoがあります。useStateは今回は空です。後でこの状態変数に対して型安全な定義を作成します。
これを設定した後、入力ボックスに接続できますが、まず、書き起こしのためにエージェントを使用するtranscribe関数を実際に呼び出す関数を作成します。このtranscribe video関数には、actions.tsにあるtranscribe関数が必要です。そして結果を解析する必要があります。
LLMにJSONを返すように強制していますが、lengthchainまたはlength graphが私に返すものは常に文字列です。そのため、この文字列を解析して、実際のJSONを取得する必要があります。そしてこのJSONはsetVideo関数を使用して状態に配置されます。下にスクロールすると、入力ボックスをその値としてビデオURLに接続できます。
ここにビデオURLを入れ、onChange関数を設定し、入力ボックスに入力するものをイベントに接続して状態に保存する必要があります。setVideoURL関数があり、これはe.target.valueを入力として取ります。これを保存したら、transcribe video関数がこのボタンに接続されていることを確認するだけです。
これを行った後、エージェントに接続されている大規模言語モデルに要求を送信して、ビデオ書き起こしを取得することができるはずです。まだ完全な書き起こしを取得していません。ビデオIDを取得することだけを確認していますが、後でツールを追加して実際に書き起こしを取得します。
少し下にスクロールしてこのiframeセクションに行き、中括弧で囲み、レンダリングする前にまずビデオ状態の存在を確認するようにしましょう。これにより、このソースに動的なビデオIDを接続できます。ここにあるソースの代わりに、テンプレートリテラルである新しいソースを作成します。
埋め込みURLが必要なので、これをすべて取ります。しかし今度はビデオIDはハードコードされず、代わりに状態で利用可能な動的変数を取ります。これはvideo IDで、これを削除します。これを保存すると、アプリケーションを起動し、ブラウザでアプリケーションの最初の部分を見ることができるはずです。
npm rundevを実行し、これによりアプリケーションが起動します。ブラウザでは、ページを更新してから動画リンクを入力する必要があります。このボタンを押すと何かが起こっていることを知るためにローディングインジケータを設定する必要がありますが、動画が正しく取得され、ビデオIDがYouTube iframeに渡されていることがわかります。
actions.tsに戻ると、もう少し作業が必要です。すでにいくつかのツールライブラリをインポートしたので、これを使用してYouTubeのビデオページから情報を取得するツールを作成します。これにはPlaywrightを使用します。Playwrightはプログラム的にウェブサイトを開き、そのウェブサイトから詳細を取得するライブラリです。
ターミナルで実行中のコマンドを閉じ、ここでnpm install playwrightを実行します。これによりnpmからPlaywrightライブラリがインストールされます。Playwrightライブラリをインストールした後、もちろんactions.tsファイルにインポートする必要があります。一番上にライブラリをインポートし、YouTubeの関数を定義し始めることができます。
まず、ツール定義を定義します。LangchainまたはLangGraphのツール（これはLangGraphですがエージェント化されたもの）には、ツール実行関数とツール定義の両方が必要だからです。例えば、getYouTubedetailsと呼ぶツールがある場合、LangChainからツール関数を使用してこのツールを作成します。
実行関数は非同期であるべきなので、これを後でasync関数にします。残りは同期的でも問題ありません。そして、ここにツール定義を追加します。これをクリーンアップすると、getYouTubedetailsというツールのツール定義を追加したことがわかります。これはYouTubeビデオのタイトルと説明を取得するツールとして説明されています。
その入力はビデオIDです。これは、与えられたYouTube URLからLLMが解析したビデオIDです。LLMがgetYouTubedetail関数を呼び出すことを提案するたびに実行されるべきコールバック関数は、ここで接続します。ここでは入力変数を探す必要があります。
非同期関数があります。playwrightを呼び出す必要があります。このコードをここに入れて、入力引数を取得するようにしましょう。少しクリーンアップしましょう。Playwrightがここで行っていることは、Chromiumブラウザを起動しています。ChromiumはChromeに関連しています。これを初めて実行する場合、コマンドをインストールする必要があるかもしれません。npm install Playwrightを実行して、Chromiumブラウザをプロジェクトにダウンロードする必要があるかもしれません。
ブラウザで特定のYouTubeページを開き、次に異なるロケーターを取得してオブジェクトとして保存します。まず、ビデオのタイトルを持つH1要素を探し、次にdivのどこかにあるビデオの説明を探します。そして、もちろん常に開いている必要はないので、ブラウザを閉じます。
コールバック関数とツール定義の両方を持つgetYouTubedetailツールを作成しました。これを保存し、getYouTubedetailツールをOllamaに渡し、それをLandgraphに接続してエージェントを形成するようにしましょう。これを保存しますが、実際にブラウザで試す前に、小さな変更を加えたいかもしれません。
システムメッセージを更新したいかもしれません。なぜなら、今はツールを取得しているからです。与えられたビデオのタイトルと説明を取得することに加えて、先ほど提供したツールを使用してビデオの書き起こしも取得したいと思います。
LLMには利用可能なすべてのツールを使用してほしいと伝え、YouTube書き起こしツールの使用方法についていくつかの例を提供します。そして、非常に興味深いことに、書き起こしを使用して説明を生成します。以前に、YouTubeのビデオページから説明を取得しましたが、今回は書き起こしツールが提供したキャプションに基づいてLLMを使用して生成します。
キャプションもJSONの出力に表示したいので、キャプションもここに追加しましょう。これはビデオのキャプションです。これを保存しましょう。actions.tsファイルでは全て完了したので、page.tsxでいくつかの変更を加えることができます。ここでキャプションも取得する必要があります。
型定義に文字列としてキャプションを追加しましょう。結果を解析していて、キャプションはこの結果の一部であるべきで、もう少し下にスクロールすると、キャプションも画面に表示したいと思います。キャプションを使用して説明を生成するだけでなく、これらのキャプションを使用して生成します。
これらのキャプションを使用して、ページ上にここに表示します。少しクリーンアップしましょう。なぜここでエラーが出ているのでしょうか？そしてページをフォーマットします。今、npm run devを使用してアプリケーションを再度実行すると、ブラウザを開いて、タイトルと説明の他に、動画のキャプションを見ることができるはずです。
ブラウザに戻り、このURLをコピーしてページを更新します。このリンクを貼り付けて、大規模言語モデルと利用可能なツールを使用してエージェントが何を生成しているか見てみましょう。ここで見られるように、ビデオのタイトルがあります。ビデオIDを使用して埋め込まれたビデオがあり、そして説明があります。
説明は書き起こしを見ることによって生成されました。書き起こしが少し切れていることが分かります。ここでいくつかのことが起こる可能性があります。おそらくLLMに与えるトークンの量が全体の書き起こしを取得するのに十分ではないか、あるいは単にスタイルの問題かもしれません。max new tokensのようなパラメータを更新したい場合は、actions.tsファイルですべて設定できます。
少し上にスクロールすると、chat.ollama関数に接続しています。ここでパラメータを設定できます。max new tokensやmax retriesなどの設定も可能です。ここで多くの異なることを設定できます。これの設定についてもっと知りたい場合は、line chainのドキュメントを確認してください。
これがJavaScriptを使用してLangGraphエージェントを作成する方法です。このビデオでは、Next.jsを使用してフロントラインアプリケーションを構築しました。次に、LLMで実行されるモデルを使用し、LangGraphに接続しました。最後に、wxflowsからYouTube書き起こしツールを使用して、YouTubeから動画を書き起こしました。このアプリケーションの構築についてもっと知りたい場合は、ビデオの説明にあるリンクをご覧ください。
コメント