前提条件 AWS リソースを作成する Amazon Lex botを作成しますを作成する HTML ブラウザスクリプトを作成次のステップ

Amazon Lex chatbotを構築する

ウェブアプリケーション内に Amazon Lex chatbotを作成して、ウェブサイトの訪問者に対応することができます。Amazon Lex chatbotは、人と直接連絡することなく、ユーザーとのオンラインチャットの会話を実行する機能です。例えば、次の図は、ホテルの部屋の予約についてユーザーに対応する Amazon Lex chatbotを示しています。

Chatbot interface demonstrating a hotel booking conversation with user inputs and bot responses.

この AWS チュートリアルで作成した Amazon Lex チャットボットは、複数の言語を処理できます。例えば、フランス語を話すユーザーは、フランス語のテキストを入力し、フランス語で応答を返すことができます。

Chatbot interface demonstrating Amazon Lex integration with French language support.

同様に、ユーザーはイタリア語でAmazon Lex chatbotで通信できます。

Chat interface showing Italian language exchange between user and Amazon Lex chatbot.

この AWS チュートリアルでは、Amazon Lex チャットボットを作成し、Node.js ウェブアプリケーションに統合する方法について説明します。 AWS SDK for JavaScript (v3) は、次の AWS サービスを呼び出すために使用されます。

Amazon Lex
Amazon Comprehend
Amazon Translate

完了コスト： このドキュメントに含まれる AWS サービスは、AWS 無料利用枠に含まれています。

注意: このチュートリアルを進めるうえで作成したすべてのリソースを終了して、料金が発生しないようにしてください。

前提条件

この例をセットアップして実行するには、まず次のタスクを完了する必要があります。

これらの Node TypeScript 例を実行するようにプロジェクト環境を設定し、必要な AWS SDK for JavaScript モジュールとサードパーティーモジュールをインストールします。の指示に従います GitHub。
ユーザーの認証情報を使用して、共有設定ファイルを作成します。共有認証情報ファイルの提供の詳細については、「」および「ツールリファレンスガイド」の「共有設定ファイルと認証情報ファイル」を参照してください。 AWS SDKs

重要

この例では ECMAScript6 () を使用しますES6。これには Node.js バージョン 13.x 以降が必要です。Node.js の最新バージョンをダウンロードしてインストールするには、「Node.js ダウンロード」を参照してください。

ただし、CommonJS 構文を使用したい場合は、「JavaScript ES6/CommonJS 構文」を参照してください。

AWS リソースを作成する

このチュートリアルでは、以下のリソースが必要です。

以下のアクセス許可がアタッチされた認証されていないIAMロール。
- Amazon Comprehend
- Amazon Translate
- Amazon Lex

このリソースは手動で作成できますが、このチュートリアルで説明されている AWS CloudFormation ように、を使用してこれらのリソースをプロビジョニングすることをお勧めします。

を使用して AWS リソースを作成する AWS CloudFormation

AWS CloudFormation では、 AWS インフラストラクチャのデプロイを予測可能かつ繰り返し作成およびプロビジョニングできます。の詳細については AWS CloudFormation、AWS CloudFormation 「ユーザーガイド」を参照してください。

を使用して AWS CloudFormation スタックを作成するには AWS CLI：

AWS CLI ユーザーガイドの AWS CLI 以下の手順をインストールして設定します。
プロジェクトフォルダのルートディレクトリsetup.yamlにという名前のファイルを作成し、その上に GitHubコンテンツをコピーします。
注記
AWS CloudFormation テンプレートは、 AWS CDK で利用可能な GitHubを使用して生成されました。の詳細については AWS CDK、AWS Cloud Development Kit (AWS CDK) 「デベロッパーガイド」を参照してください。
コマンドラインから次のコマンドを実行し、STACK_NAME スタックの一意の名前。

重要
スタック名は、 AWS リージョンと AWS アカウント内で一意である必要があります。最大 128 文字まで指定でき、数字とハイフンを使用できます。
```
aws cloudformation create-stack --stack-name STACK_NAME --template-body file://setup.yaml --capabilities CAPABILITY_IAM
```
create-stack コマンドパラメータの詳細については、 AWS CLI Command Reference guide (コマンドリファレンスガイド）および「AWS CloudFormation ユーザーガイド」を参照してください。

作成されたリソースを表示するには、Amazon Lex コンソールを開き、スタックを選択し、Resources (リソース)タブを選びます。

Amazon Lex botを作成します

重要

Amazon Lex V1 コンソールを使用してボットを作成します。この例は V2 を使用して作成されたボットでは機能しません。

最初のステップは、Amazon Web Services マネジメントコンソールを使用して Amazon Lex chatbotを作成することです。この例では、Amazon Lex BookTripの例が使用されます。詳細については「Book Trip (出張の予約)」を参照してください。

Amazon Web Services マネジメントコンソールにサインインして、Amazon Web Services Console (Amazon Web Services コンソール)のAmazon Lex コンソールを開きます。
Botsページで、Create（作成）を選択します。
BookTrip 設計図を選択します (デフォルトのボット名はそのままにしますBookTrip）。
デフォルト設定を入力し、作成 (コンソールにボットが表示されます) BookTrip を選択します。編集タブで、事前設定されているインテントの詳細を確認します。
テストウィンドウでボットをテストします。ホテルの部屋を予約したいと入力してテストを開始します。
発行を選択し、エイリアス名を指定します ( を使用する場合、この値が必要です AWS SDK for JavaScript）。

注記

JavaScript コード内のボット名とボットエイリアスを参照する必要があります。

を作成する HTML

index.html という名前のファイルを作成します。以下のコードをコピーして、index.htmlに貼り付けます。これは HTMLを参照しますmain.js。これは index.js のバンドルバージョンであり、必要な AWS SDK for JavaScript モジュールが含まれています。このファイルはを作成する HTML で作成します。index.html はスタイルを追加する style.css も参照します。


<!doctype html>
<head>
  <title>Amazon Lex - Sample Application (BookTrip)</title>
  <link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>
  <h1 id="title">Amazon Lex - BookTrip</h1>
  <p id="intro">
    This multiple language chatbot shows you how easy it is to incorporate
    <a
      href="https://aws.amazon.com/lex/"
      title="Amazon Lex (product)"
      target="_new"
      >Amazon Lex</a
    >
    into your web apps. Try it out.
  </p>
  <div id="conversation"></div>
  <input
    type="text"
    id="wisdom"
    size="80"
    value=""
    placeholder="J'ai besoin d'une chambre d'hôtel"
  />
  <br />
  <button onclick="createResponse()">Send Text</button>
  <script type="text/javascript" src="./main.js"></script>
</body>

このコードは、でも GitHub利用できます。

ブラウザスクリプトを作成

index.js という名前のファイルを作成します。以下のコードをコピーして、index.jsに貼り付けます。必要な AWS SDK for JavaScript モジュールとコマンドをインポートします。Amazon Lex、Amazon Comprehend、およびAmazon Translate のクライアントを作成します。置換 REGION AWS リージョン、および IDENTITY_POOL_ID で作成した ID プールの IDAWS リソースを作成する。このアイデンティティプールのIDを取得するには、Amazon Cognito コンソールでアイデンティティプールを開き、Edit identity pool (アイデンティティプールの編集) を選択し、サイドメニューのSample code (サンプルコード)を選択します。アイデンティティプールの IDはコンソールに赤いテキストで表示されます。

まず、libsディレクトリを作成し、3つのファイル、comprehendClient.js、lexClient.js、translateClient.jsを作成することで、必要なサービスクライアントオブジェクトを作成します。以下の適切なコードを各に貼り付け、置き換えます。REGION また、IDENTITY_POOL_ID 各ファイルで。

注記

を使用して AWS リソースを作成する AWS CloudFormationで作成したAmazon CognitoアイデンティティプールのIDを使用します。


import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import { ComprehendClient } from "@aws-sdk/client-comprehend";

const REGION = "REGION";
const IDENTITY_POOL_ID = "IDENTITY_POOL_ID"; // An Amazon Cognito Identity Pool ID.

// Create an Amazon Comprehend service client object.
const comprehendClient = new ComprehendClient({
  region: REGION,
  credentials: fromCognitoIdentityPool({
    client: new CognitoIdentityClient({ region: REGION }),
    identityPoolId: IDENTITY_POOL_ID,
  }),
});

export { comprehendClient };


import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import { LexRuntimeServiceClient } from "@aws-sdk/client-lex-runtime-service";

const REGION = "REGION";
const IDENTITY_POOL_ID = "IDENTITY_POOL_ID"; // An Amazon Cognito Identity Pool ID.

// Create an Amazon Lex service client object.
const lexClient = new LexRuntimeServiceClient({
  region: REGION,
  credentials: fromCognitoIdentityPool({
    client: new CognitoIdentityClient({ region: REGION }),
    identityPoolId: IDENTITY_POOL_ID,
  }),
});

export { lexClient };


import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import { TranslateClient } from "@aws-sdk/client-translate";

const REGION = "REGION";
const IDENTITY_POOL_ID = "IDENTITY_POOL_ID"; // An Amazon Cognito Identity Pool ID.

// Create an Amazon Translate service client object.
const translateClient = new TranslateClient({
  region: REGION,
  credentials: fromCognitoIdentityPool({
    client: new CognitoIdentityClient({ region: REGION }),
    identityPoolId: IDENTITY_POOL_ID,
  }),
});

export { translateClient };

このコードは、で入手できます GitHub。

次に、index.jsファイルを作成し、そこへ以下のコードを貼り付けます。

置換 BOT_ALIAS また、BOT_NAME Amazon Lex ボットのエイリアスと名前をそれぞれ指定し、USER_ID ユーザー ID を持つ。createResponse非同期関数は以下を実行します。

ユーザーが入力したテキストをブラウザに取り込み、Amazon Comprehend を使用して言語コードを決定します。
言語コードを取得し、Amazon Translate を使用してテキストを英語に翻訳します。
翻訳されたテキストを取得し、Amazon Lex を使用してレスポンスを生成します。
レスポンスをブラウザページに投稿します。


import { DetectDominantLanguageCommand } from "@aws-sdk/client-comprehend";
import { TranslateTextCommand } from "@aws-sdk/client-translate";
import { PostTextCommand } from "@aws-sdk/client-lex-runtime-service";
import { lexClient } from "./libs/lexClient.js";
import { translateClient } from "./libs/translateClient.js";
import { comprehendClient } from "./libs/comprehendClient.js";

let g_text = "";
// Set the focus to the input box.
document.getElementById("wisdom").focus();

function showRequest() {
  const conversationDiv = document.getElementById("conversation");
  const requestPara = document.createElement("P");
  requestPara.className = "userRequest";
  requestPara.appendChild(document.createTextNode(g_text));
  conversationDiv.appendChild(requestPara);
  conversationDiv.scrollTop = conversationDiv.scrollHeight;
}

function showResponse(lexResponse) {
  const conversationDiv = document.getElementById("conversation");
  const responsePara = document.createElement("P");
  responsePara.className = "lexResponse";

  const lexTextResponse = lexResponse;

  responsePara.appendChild(document.createTextNode(lexTextResponse));
  responsePara.appendChild(document.createElement("br"));
  conversationDiv.appendChild(responsePara);
  conversationDiv.scrollTop = conversationDiv.scrollHeight;
}

function handletext(text) {
  g_text = text;
  const xhr = new XMLHttpRequest();
  xhr.addEventListener("load", loadNewItems, false);
  xhr.open("POST", "../text", true); // A Spring MVC controller
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //necessary
  xhr.send(`text=${text}`);
}

function loadNewItems() {
  showRequest();

  // Re-enable input.
  const wisdomText = document.getElementById("wisdom");
  wisdomText.value = "";
  wisdomText.locked = false;
}

// Respond to user's input.
const createResponse = async () => {
  // Confirm there is text to submit.
  const wisdomText = document.getElementById("wisdom");
  if (wisdomText?.value && wisdomText.value.trim().length > 0) {
    // Disable input to show it is being sent.
    const wisdom = wisdomText.value.trim();
    wisdomText.value = "...";
    wisdomText.locked = true;
    handletext(wisdom);

    const comprehendParams = {
      Text: wisdom,
    };
    try {
      const data = await comprehendClient.send(
        new DetectDominantLanguageCommand(comprehendParams),
      );
      console.log(
        "Success. The language code is: ",
        data.Languages[0].LanguageCode,
      );
      const translateParams = {
        SourceLanguageCode: data.Languages[0].LanguageCode,
        TargetLanguageCode: "en", // For example, "en" for English.
        Text: wisdom,
      };
      try {
        const data = await translateClient.send(
          new TranslateTextCommand(translateParams),
        );
        console.log("Success. Translated text: ", data.TranslatedText);
        const lexParams = {
          botName: "BookTrip",
          botAlias: "mynewalias",
          inputText: data.TranslatedText,
          userId: "chatbot", // For example, 'chatbot-demo'.
        };
        try {
          const data = await lexClient.send(new PostTextCommand(lexParams));
          console.log("Success. Response is: ", data.message);
          const msg = data.message;
          showResponse(msg);
        } catch (err) {
          console.log("Error responding to message. ", err);
        }
      } catch (err) {
        console.log("Error translating text. ", err);
      }
    } catch (err) {
      console.log("Error identifying language. ", err);
    }
  }
};
// Make the function available to the browser.
window.createResponse = createResponse;

このコードは、で入手できます GitHub。

次に、ウェブパックを使用して、 index.jsと AWS SDK for JavaScript モジュールを 1 つのファイルにバンドルしますmain.js。

まだの場合は、この例の前提条件に従ってwebpackをインストールしてください。

注記
Webpack の詳細については、Webpack でアプリケーションをバンドルするを参照してください。
コマンドラインで以下を実行して、この例 JavaScript のをというファイルにバンドルしますmain.js。
```
webpack index.js --mode development --target web --devtool false -o main.js
```

次のステップ

お疲れ様でした。Amazon Lex を使用してインタラクティブなユーザーエクスペリエンスを実現する Node.js アプリケーションが作成されました。このチュートリアルの冒頭で説明したように、チュートリアルを進めるうえで作成したすべてのリソースを終了して、料金が発生しないようにしてください。これを行うには、このチュートリアルのAWS リソースを作成するトピックで作成した AWS CloudFormation スタックを次のように削除します。

AWS CloudFormation コンソールを開きます。
「スタック」ページで、スタックを選択します。
[削除] を選択します。

AWS クロスサービスの例については、AWS SDK for JavaScript 「クロスサービスの例」を参照してください。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

クロスサービス: スケジュールされた Lambda イベント

コードの例