ウェブサイト検索

Cloud Functions を使用して GenAI プラットフォームを既存の Web アプリケーションに統合する方法


導入

このチュートリアルでは、DigitalOcean GenAI プラットフォームを既存の Web アプリケーションに統合する方法を学習します。これを行うには、Jamstack アプリケーション開発ガイドから構築された既存のデモ アプリケーションの上に構築します。 この既存のデモ プロジェクトは、Node.js で記述された DigitalOcean サーバーレス関数を呼び出して MongoDB データベースからコンテンツを取得することによってコンテンツをレンダリングする静的 HTML です。

このチュートリアルの最後には、アプリによってレンダリングされるさまざまなコーヒー コンテンツに関する情報をクエリするためのチャットボット機能を備えた静的 Web アプリケーションが完成します。このチュートリアルのレッスンでは、DigitalOcean Cloud Functions を活用して、DigitalOcean GenAI プラットフォームを Web ベースのアプリケーションに統合する方法を説明します。

前提条件

このプロジェクトを完了するには、次のものが必要です。

  • DigitalOcean クラウド アカウント。
  • コーヒーデモアプリケーション。デモ アプリケーションのコードベースを取得するには、このリポジトリを GitHub アカウントにフォークしてローカル マシンにクローンするか、このガイドに従ってそのようなデモ プロジェクトを作成して DigitalOcean アプリ プラットフォームにデプロイする方法を学ぶことができます。
  • DigitalOcean GenAI プラットフォームへのアクセス。
  • DigitalOcean CLI コマンドを使用するためにシステムにインストールされている doctl の最新バージョン。
  • システムにインストールされている npm の最新バージョン。

ステップ1-プロジェクトのセットアップ

GitHub のデモ アプリケーションのコードベースからフォークしてクローンを作成すると、2 つのブランチがあることがわかります。 GenAI 統合を含む完全なコードを含む main ブランチと、チャットボット機能を統合するためにこのチュートリアルで上に構築する開始コードを含む Setup ブランチ。以下のコマンドは、プロジェクトのクローンをローカル環境に作成し、プロジェクトのルートに移動し、Setup ブランチに切り替えて、アプリケーションの依存関係をインストールするのに役立ちます。

git clone https://github.com/digitalocean/Jamstack-DigitalOcean-Coffee-App.git
cd Jamstack-DigitalOcean-Coffee-App 
git checkout Setup

テキスト エディターまたは IDE でプロジェクトを開くと、プロジェクト構造は次のようになります。

GitHub リポジトリからデモ アプリケーションをフォークしてクローンした場合は、必ず DigitalOcean 管理の Mongodb データベースを作成し、このアプリケーションがコンテンツをレンダリングするために必要なサンプル データを追加してください。ガイドのこの部分は、それを行うのに役立ちます。データベースを作成したら、アプリのディレクトリに .env ファイルを作成し、データベース接続文字列をコピーして .env ファイルに設定することで、データベース アクセス用のアプリケーションの環境変数を構成できます。 。ガイドのこの部分は、環境変数の構成に役立ちます。

環境変数を構成すると、アプリケーションがどのように見えるかを確認できるようになります。まず、ブラウザで Web ディレクトリにある index.html ファイルを開きます。そして、それは次のようになります。

注: 上記のプロジェクト構造を見ると、ガイドに従ってデモ アプリケーションを作成した場合、関数名の 1 つである getCoffee が < に微調整されていることがわかります。getCoffees. その理由は、特に getCoffees 関数がデータベース内の利用可能なコーヒーをすべて取得するためです。今後は、個々のコーヒーに関する情報を取得できるように、getCoffee という名前の別の関数を追加します。したがって、ガイドから作成したデモ アプリケーションに必要な変更を加えて、このアプリケーションに加えたい新しい変更を反映させます。

ステップ2-DigitalOcean GenAIチャットボットの作成

左側のサイドバーにある DigitalOcean クラウド パネルにログインし、GenAI プラットフォーム タブをクリックします。 GenAI ダッシュボード ページは次のようになります。

このページの [エージェント] タブで [エージェントの作成] ボタンをクリックすると、エージェントを構成するためのページが開きます。エージェント ページの設定は次のようになります。

エージェントの構成には次のことが含まれます。

  • エージェント名を指定します。ここではデフォルトの名前を使用しました。
  • エージェント指示を与えて、エージェントに何をしてほしいのか、どのように実行すべきかを指示します。ここでは、この命令を使用します。 さまざまなコーヒー、価格、その詳細について多くの情報を提供するコーヒー マシンとして機能します。
  • モデルの選択。選択されているデフォルトのモデルを使用します。
  • ナレッジベースを追加します。今はそれを追加しないでください。ナレッジ ベースを作成し、後でモデルにアタッチします。
  • プロジェクトを選択してタグを追加します。ここでは、デフォルトの first project を使用し、タグは追加されていません。

エージェントを構成したら、ページの下にある [エージェントの作成] ボタンをクリックして、エージェントを作成して展開できます。 これにより、次のような新しいページが開きます。

エージェントが作成されたら、必要な情報をクエリできます。以下は、フレンチ ロースト コーヒーの価格と体への影響 に関するクエリですが、応答は非常に一般的であり、このアプリケーションの情報と一致しません。当社のエージェントがこのアプリケーションに関する正確な情報をユーザーに提供するには、それらの詳細をエージェントに公開する必要があります。ここでCloud Functionsの出番です。DigitalOcean GenAIプラットフォームには、エージェントに機能を付加して適切な情報を提供できるリソース機能があります。

ステップ 3 - クラウド機能の作成とエージェントへの接続

次に、MongoDB データベース クラスターに接続し、個々のコーヒーに関する単一のデータを取得する別の Node.js 関数をアプリケーションに追加する必要があります。

関数をアプリに追加するには、アプリのルート ディレクトリの packages という特別なディレクトリに、cloud< という名前のフォルダーに新しいフォルダー getCoffee を作成しましょう。。 Node.js プロジェクトの場合は、getCoffee ディレクトリを初期化する必要があるため、ターミナルからそこに移動して、以下のコマンドを実行しましょう。

npm init -y

Node.js がプロジェクトの依存関係と属性を追跡するために使用する package.json ファイルを作成しています。 -y フラグを使用すると、このチュートリアルを完了するために必要のないいくつかのユーザー入力プロンプトがスキップされ、初期化プロセスが短縮されます。この関数は MongoDB データベースと対話する必要があるため、以下を実行してそれを支援するパッケージをインストールしましょう。

npm install --package-lock-only mongodb

ここでは、 --package-lock-only フラグを使用して、依存関係自体をインストールせずに、関数に必要な依存関係で package.json ファイルを更新しました。これは、機能をクラウドからデプロイしてテストできるため、モジュールをローカルにインストールする必要がないためです。

関数の依存関係を更新した後、getCoffee ディレクトリに index.js というファイルを作成します。このファイルには関数のコードが含まれています。

テキスト エディタで、次のコードを index.js ファイルに貼り付けます。

const { MongoClient } = require('mongodb');

async function main(args) {

    const uri = process.env['DATABASE_URL'];
    let client = new MongoClient(uri);

    try {
        let name = args.name;
        await client.connect();
        const inventory = await client.db("do-coffee").collection("available-coffees").findOne({name})
        console.log(inventory);
        return {
            "body": inventory
        };
    } catch (e) {
        console.error(e);
        return {
            "body": { "error": "There was a problem retrieving data - " + e.message },
            "statusCode": 400
        };
    } finally {
        await client.close();
    }
}

exports.main = main; 

コードから、この関数がデータベース レコードを検索して、指定されたコーヒー名に基づいて一致するコーヒーを見つけることがわかります。関数を作成したので、アプリケーションのルート フォルダーにある project.yml という名前の YAML 仕様ファイルを更新して、作成された関数の変更を反映させましょう。 project.yml ファイルは、アプリのパッケージ ディレクトリ内の各関数をリストし、サービスが環境変数を認識できるようにするマニフェストです。新しい関数を含む更新された project.yml ファイルは次のようになります。

関数を追加し、project.yml ファイルを更新したら、新しい関数をデプロイできるようになります。これを行うには、プロジェクトのルートからコマンドを実行して、関数名前空間に接続しているかどうかをテストできます。

doctl serverless connect

接続が成功したら、アプリのルート ディレクトリから次のコマンドを実行して関数をデプロイできます。

doctl serverless deploy .

デプロイメントが成功すると、次のような出力が返されます。

DigitalOcean クラウド パネルを通じて関数がどのように動作するかをテストできます。 DigitalOcean クラウド パネルの左側のサイドバーにある 関数 タブに移動して、cloud/getCoffee 関数を選択します。 [ソース] タブで、以下の テスト パラメータ を追加します。

これで、Run ボタンをクリックして関数を実行できるようになり、以下のような応答が返されます。

これで機能が完成したので、エージェントでこれを使用することができます。

関数のアタッチとエージェントのテスト

エージェントの リソース の下で、ここでエージェントに関数をアタッチできます。 関数ルートの追加 を探します。それをクリックすると、次のような新しいページが開くはずです。

関数ルートの構成には次のことが含まれます。

  • 関数の名前空間を選択します。
  • 関数の選択: ここでは cloud/getCoffee 関数を選択します。
  • 機能の指示を与える。 コーヒーの詳細が要求されたときにこの関数を呼び出すで問題ありません。
  • 関数ルート名を与える。
  • 入力スキーマを定義します。これには関数に渡されるパラメータが含まれており、以下のスキーマを追加できます。
{
  "name": {
    "type": "string",
    "required": true,
    "description": "name of coffee"
  }
}
  • 出力スキーマを定義します。これには、関数が呼び出されたときの応答の詳細が含まれます。そのためにこのスキーマを追加できます。
{
  "_id": {
    "type": "string",
    "description": "Id of the coffee item"
  },
  "pic": {
    "type": "string",
    "description": "A picture of coffee item"
  },
  "name": {
    "type": "string",
    "description": "Name of coffee item"
  },
  "price": {
    "type": "string",
    "description": "Price of the coffee item"
  },
  "description": {
    "type": "string",
    "description": "Description of the coffee item"
  }
}

これで、変更を保存できます。エージェントが関数を正常にアタッチし、変更を反映するまでに数分かかります。

変更後は、お客様が所有しているさまざまなコーヒーについてエージェントに問い合わせることができ、ほぼ正確な情報を得ることができます。以下はそのようなクエリの例です。

ステップ4 — GenAIチャットボットをJamstackアプリケーションに追加する

DigitalOcean クラウド パネルのGenAI プラットフォーム > エージェントの選択 > エンドポイントに移動 タブ。 エンドポイントの詳細 セクションでエンドポイントの可用性が Playground に設定されている場合、GenAI ダッシュボード ページは次のようになります。

プレイグラウンドの横にある編集をクリックして、可用性を公開に変更します。これにより、チャットボット スクリプトが含まれるようにページが変更されます。ページは以下のようになるはずです。

このチャットボット スクリプトはアプリケーションにすでに存在します。スクリプトをコピーし、index.html コードを更新します。最後の script タグの直後にチャットボット スクリプトを追加するだけです。

これで、チャットボット機能がアプリケーション内で稼働し、以前クラウド パネルで行ったように情報のクエリに使用できるようになります。変更を GitHub リポジトリにコミットすると、DigitalOcean アプリ プラットフォームがパイプラインを自動的に再構築し、変更がアプリケーションに反映されます。

結論

DigitalOcean サーバーレス機能を活用して、チャットボットを既存の Web アプリケーションに正常に統合しました。このステップバイステップ ガイドに従って、DigitalOcean GenAI プラットフォームを Web ベースのプロジェクトに統合できます。