Zenn
📚

Amazon Bedrock実装④：Cloud9環境のhtmlプレビューでBedrockを使えるようにする

2023/11/05に公開
AWS
Lambda
Cloud 9
Bedrock
tech

はじめに

Cloud9のhtmlプレビュー機能を使用し、Bedrockを使えるようにします。
具体的には、htmlのJavaScriptでBedrockを実行するLambdaを実行し、Lambdaの実行結果を表示します。

デモ

作ったものはこれ。Cloud9環境でhtmlプレビューを使用しBedrockを使用しています。

https://www.youtube.com/watch?v=uX6io8uNTf0

構成

デモは、test.htmlから始まる①～⑤の処理になります。test.htmlはCloud9のプレビュー機能を使用しているため、test.htmlのためにWebサーバは構築していません。

  • 処理の流れ
    • ① test.htmlの "スクリプト実行" ボタンをクリックする
    • ② LambdaからBedrockをキックする
    • ③ Bedrockで処理する
    • ④ LambdaがBedrockの処理結果を受け取る
    • ⑤ test.htmlがLambdaの処理結果を受け取る

参考

以下を組合せると今回の環境が作れます

作り方

Lambdaを作成する

Lambdaは以下の記事で作成方法をまとめています。

HTML(+JavaScript)を作成する

以下の記事で作成方法をまとめています。

test.htmlファイルは以下のようになっています。
※accessKeyId, secretAccessKeyの値は環境にあわせて修正が必要です

test.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bedrockサンプル</title>
</head>
<body>

<h1>Bedrockを使う</h1>
<textarea id="request" name="request" rows="4" cols="50" placeholder="ここにメッセージを入力してください"></textarea>
<br>
<input type="button" value="スクリプト実行" onclick="clickflow()">

<div id="lambdaResult"></div>

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.6.10.min.js"></script>
<script type="text/javascript">
// 環境変数から認証情報を取得
const accessKeyId = process.env.AWS_ACCESS_KEY_ID;
const secretAccessKey = process.env.AWS_SECRET_ACCESS_KEY;

// Lambdaの設定
AWS.config.update({
    accessKeyId,
    secretAccessKey,
    region: 'us-east-1' // バージニアリージョンを指定
});

function exeLambda(loRequest){
    const lambda = new AWS.Lambda();

    payloadStr = `{"prompt": "Human:${loRequest}\\nAssistant:"}`;

    // Lambda関数を呼び出す
    const params = {
        FunctionName: 'bedrocklambda2', // Lambda関数の名前
        InvocationType: 'RequestResponse', // 同期呼び出し
        Payload: payloadStr // ペイロード
    };

    lambda.invoke(params, (err, data) => {
        if (err) {
            console.error('Error calling Lambda function:', err);
        } else {
            const result = JSON.parse(data.Payload);
            console.log(result);
            let resutlBody = result;
            document.getElementById('lambdaResult').innerText = `Lambda function result: ${resutlBody}`;
        }
    });
}

function clickflow() {
    let request = document.getElementById("request").value;
    document.getElementById('lambdaResult').innerText = "・・・考え中";
    exeLambda(request);
}
</script>
</body>
</html>

以上です。

===

Discussion