Prompt API を使用してローカルおよびオフライン対応の chatbot を作成する

Christian Liebel

公開日: 2025 年 1 月 13 日

この投稿は、LLM チャットボットに関する 3 部構成のシリーズの最後です。前回の記事では、クライアントサイド LLM の力について説明し、WebLLM を利用した chatbot を ToDo リストアプリケーションに追加する方法について解説しました。

一部の新しいデバイスには、大規模言語モデルなどの AI モデルがデバイスに搭載されています。Chrome は、組み込みの AI API をブラウザに統合することを提案しており、さまざまな API がさまざまな開発段階にあります。これらの API の多くは標準化プロセスを経ているため、ウェブサイトは同じ実装とモデルを使用して推論パフォーマンスを最大限に高めることができます。

Prompt API は、そのような AI API の 1 つです。この機能を使用するには、早期プレビュープログラムに登録することをおすすめします。承認されると、ブラウザで Prompt API を有効にする手順が届きます。Prompt API は Chrome 拡張機能のオリジントライアルで利用できるため、実際の拡張機能ユーザーに対してこの API をテストできます。

共有モデルへのアクセス

Prompt API は WebLLM と同様に動作します。ただし、今回はモデル選択はありません（ブラウザに付属している LLM を使用する必要があります）。組み込み AI を有効にすると、Chrome は Gemini Nano をブラウザにダウンロードします。このモデルは複数のオリジンで共有され、最大限のパフォーマンスで実行されます。デベロッパーがモデル選択機能の追加をリクエストした GitHub の問題があります。

会話を設定する

メッセージの会話はまったく同じ方法で開始できますが、Prompt API にはシステムプロンプトを指定するための短縮構文も用意されています。LanguageModel インターフェースの create() メソッドを使用して、言語モデルセッションを開始します。

const session = await LanguageModel.create({
  initialPrompt: [
    {
      type: 'system',
      content: `You are a helpful assistant. You will answer questions related
        to the user's to-do list. Decline all other requests not related to the
         user's todos. This is the to-do list in JSON: ${JSON.stringify(todos)}`,
    },
  ],
});

最初の質問に回答する

ストリーミングを構成するための構成オブジェクトの代わりに、Prompt API には次の 2 つのメソッドが用意されています。

prompt() は文字列全体を返します
promptStreaming() は非同期イテラブルを返します。WebLLM とは異なり、Prompt API は完全な文字列レスポンスを返すため、結果を自分で結合する必要はありません。

他のオリジンがモデルのダウンロードをトリガーしたことがない場合、Gemini Nano がブラウザにダウンロードされるまで、最初のリクエストに非常に時間がかかることがあります。モデルがすでに使用可能な場合、推論はすぐに開始されます。

const stream = session.promptStreaming("How many open todos do I have?");
for await (const reply of stream) {
  console.log(reply);
}

デモ

概要

LLM をアプリケーションに統合すると、ユーザーエクスペリエンスを大幅に向上させることができます。クラウドサービスは、ユーザーのデバイスに関係なく、高品質のモデルと高い推論パフォーマンスを提供しますが、WebLLM や Chrome の Prompt API などのオンデバイスソリューションは、オフラインで使用でき、プライバシーを強化し、クラウドベースの代替手段と比較してコストを削減できます。これらの新しい API を試して、ウェブアプリケーションをよりスマートにしましょう。