Erstellen des Browser-Skripts - AWS SDK for JavaScript

Helfen Sie uns, dasAWS SDK for JavaScriptVersion 3 (V3) -Dokumentation durch Feedback unter Verwendung derFeedbackLink oder erstellen Sie ein Problem oder ziehen Sie eine Anfrage anGitHubaus.

DieAWS SDK for JavaScriptReferenzhandbuch zur V3-API-Referenzbeschreibt ausführlich alle API-Operationen für dieAWS SDK for JavaScriptVersion 3 (V3).

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Erstellen des Browser-Skripts

Dieses Thema ist Teil eines Tutorials, das einen Amazon Lex Lex-Chatbot in einer Webanwendung erstellt, um Ihren Website-Besucher zu gewinnen. Um am Anfang des Tutorials zu beginnen, lesen Sie Aufbau eines Amazon Lex Chatbots.

Erstellen Sie eine Datei namens index.js. Kopieren Sie den folgenden Code und fügen Sie ihn einindex.jsaus. Importieren Sie das erforderlicheAWS SDK for JavaScriptModule und Befehle. Erstellen Sie Kunden für Amazon Lex, Amazon Comprehend und Amazon Translate. ErsetzenREGIONmitAWSRegion undIDENTITY_POOL_IDmit der ID des -Identitäten-Pools, den Sie imErstellen derAWSRessourcen aus. Um diese Identitäten-Pool-ID abzurufen, öffnen Sie den Identitätenpool in der Amazon Cognito Cognito-Konsole und wählen SieIdentitäten-Pool bearbeiten, und wählenBeispiel-Codeim Seitenmenü. Die Identitäten-Pool-ID wird in rotem Text in der Konsole angezeigt.

Erstellen Sie zunächst einenlibserstellen Sie die erforderlichen Service-Client-Objekte, indem Sie drei Dateien erstellen,comprehendClient.js,lexClient.js, undtranscribeClient.jsaus. Fügen Sie den unten stehenden Lehrlingscode in jeden ein und ersetzen SieREGIONundIDENTITY_POOL_IDin jedem.

Anmerkung

Verwenden Sie die ID des Amazon Cognito-Identitäten-Pools, den Sie erstellt habenErstellen derAWS-Ressourcen verwendenAWS CloudFormationaus.

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"; //e.g. "us-east-1" const IdentityPoolId = "IDENTITY_POOL_ID"; const comprehendClient = new ComprehendClient({ region: REGION, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: REGION }), identityPoolId: IdentityPoolId }), });
import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity"; import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity"; import { LexClient } from "@aws-sdk/client-lex"; const REGION = "REGION"; //e.g. "us-east-1" const IdentityPoolId = "IDENTITY_POOL_ID"; const lexClient = new LexRuntimeServiceClient({ region: REGION, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: REGION }), identityPoolId: IdentityPoolId }), });
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"; //e.g. "us-east-1" const IdentityPoolId = "IDENTITY_POOL_ID"; const translateClient = new TranslateClient({ region: REGION, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: REGION }), identityPoolId: IdentityPoolId }), });

Dieser Code ist verfügbarhier auf GitHub:aus.

Erstellen Sie als nächstes eineindex.html-Datei und fügen Sie den folgenden Code ein.

ErsetzenBOT_ALIASundBOT_NAMEmit dem Alias und Namen Ihres Amazon Lex Bots undUSER_IDmit einer Benutzer-ID. DiecreateResponseDie asynchrone Funktion tut Folgendes:

  • Übernimmt den vom Benutzer eingegebenen Text in den Browser und bestimmt mithilfe von Amazon Comprehend seinen Sprachcode.

  • Nimmt den Sprachcode und übersetzt den Text mit Amazon Translate ins Englische.

  • Nimmt den übersetzten Text und generiert mithilfe von Amazon Lex eine Antwort.

  • Postet die Antwort auf die Browserseite.

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 {comprehendClient} from ".libs/comprehendClient.js"; import {translateClient} from ".libs/translateClient.js"; var g_text = ""; // set the focus to the input box document.getElementById("wisdom").focus(); function showRequest(daText) { var conversationDiv = document.getElementById("conversation"); var requestPara = document.createElement("P"); requestPara.className = "userRequest"; requestPara.appendChild(document.createTextNode(g_text)); conversationDiv.appendChild(requestPara); conversationDiv.scrollTop = conversationDiv.scrollHeight; }; function showResponse(lexResponse) { var conversationDiv = document.getElementById("conversation"); var responsePara = document.createElement("P"); responsePara.className = "lexResponse"; var 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; var 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(event) { var msg = event.target.responseText; showRequest(); showResponse(msg); // re-enable input var wisdomText = document.getElementById("wisdom"); wisdomText.value = ""; wisdomText.locked = false; }; // Respond to user's input. const createResponse = async () => { // Confirm there is text to submit. var wisdomText = document.getElementById("wisdom"); if (wisdomText && wisdomText.value && wisdomText.value.trim().length > 0) { // Disable input to show it is being sent. var wisdom = wisdomText.value.trim(); wisdomText.value = "..."; wisdomText.locked = true; 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 = { botAlias: "BOT_ALIAS", botName: "BOT_NAME", inputText: data.TranslatedText, userId: "USER_ID" // For example, 'chatbot-demo'. }; try { const data = await lexClient.send(new PostTextCommand(lexParams)); console.log("Success. Response is: ", data.message); document.getElementById("conversation").innerHTML = data.message; } 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); } } }; window.createResponse = createResponse;

Dieser Code ist verfügbarhier auf GitHub:aus.

Verwenden Sie nun das Webpack, um dasindex.jsundAWS SDK for JavaScript-Module in eine einzige Datei,main.jsaus.

  1. Wenn noch nicht erfolgt, folgen Sie derPrerequisitesfür dieses Beispiel, um Webpack zu installieren.

    Anmerkung

    Weitere Informationen zuWebpack, finden Sie unterAnwendungsbündelung mit Webpackaus.

  2. Führen Sie Folgendes in der Befehlszeile aus, um das JavaScript für dieses Beispiel in eine Datei mit dem Namen zu bündeln<index.js>:

    webpack index.js --mode development --target web --devtool false -o main.js