lex bot web integration

0

dealing with lex web ui integration; I'm using lex api url = https://runtime-v2-lex.us-east-1.amazonaws.com/bots/botid/botAliases/botaliasid/botLocales/en_US/sessions/Session23_/text this api work fine on postman, I typed a simple python script and it's works fine also. But when I tried to integrate this api with necessery authorizations into a web page using html/js I got this error : caught ReferenceError: AWSRequestsAuth is not defined I even tried to reinstall AWSRequestsAuth with the command below but in vain: pip install aws-requests-auth

** HTML page script : **

<!DOCTYPE html>
<html>
<head>
	<title>Chatbot Example</title>
</head>
<body>
	<h1>Chatbot Example</h1>
	<form>
		<label for="input">Input:</label>
		<input type="text" id="input" name="input">
		<button type="submit">Send</button>
	</form>

	<div id="output"></div>

	<script>
		const form = document.querySelector('form');
		const output = document.querySelector('#output');

		form.addEventListener('submit', (event) => {
			event.preventDefault();
			const input = document.querySelector('#input').value;
			const payload = {text: input};
			const url = 'https://runtime-v2-lex.us-east-1.amazonaws.com/bots/botid/botAliases/botaliasid/botLocales/en_US/sessions/Session23_/text';

			const headers = {
				'Content-Type': 'application/json',
				'X-Amz-Content-Sha256': 'XXXXXXXXXXXX',
				'X-Amz-Date': new Date().toISOString().replace(/[:-]|\.\d{3}/g, ''),
			};

			const auth = new AWSRequestsAuth({
				accessKeyId: 'XXXXXXXXXX',
				secretAccessKey: 'XXXXXXXXXXXXXX',
				host: 'runtime-v2-lex.us-east-1.amazonaws.com',
				region: 'us-east-1',
				service: 'lex',
			});

			fetch(url, {
				method: 'POST',
				headers: headers,
				body: JSON.stringify(payload),
				auth: auth,
			})
			.then(response => response.json())
			.then(data => {
				const messages = data.messages.filter(message => message.contentType === 'PlainText');
				const outputText = messages.map(message => message.content).join('\n');
				output.textContent = outputText;
			})
			.catch(error => {
				console.error(error);
				output.textContent = 'Error: ' + error.message;
			});
		});
	</script>
</body>
</html>

2 Antworten
0

Hi,

it could be related that you are missing some script that expose the missing component.

Try to look here: https://github.com/aws-samples/aws-lex-web-ui/blob/master/src/README.md as it could be the aws-lex loader the culprit.

Hope it help ;)

profile picture
EXPERTE
beantwortet vor einem Jahr
  • thanks for responding; I don't think so because the problem is related to the AWSRequestsAuth library that is not running correctly, although I already install it, this is what I got with pip list command : Package Version


    aws-requests-auth 0.4.3

0

There is an opensource web UI for Lex that you could either use, or perhaps look at the code for inspiration. https://github.com/aws-samples/aws-lex-web-ui

profile pictureAWS
beantwortet vor einem Jahr

Du bist nicht angemeldet. Anmelden um eine Antwort zu veröffentlichen.

Eine gute Antwort beantwortet die Frage klar, gibt konstruktives Feedback und fördert die berufliche Weiterentwicklung des Fragenstellers.

Richtlinien für die Beantwortung von Fragen