概要
Amazon Bedrock上で動作するAnthropicのClaude 2を使用して、ChatGPTのようにテキストをリアルタイムで表示するWebアプリケーションを作成する方法を説明します。
ソースコード
- GitHubリポジトリ: こちらのリンクからソースコードにアクセスできます。
使い方
- .envファイルの設定
Amazon Bedrockを使用するために必要なAWSの設定を含む.envファイルを編集します。
Amazon Bedrockを使用するためのAWSの情報を設定します。
AWS_ACCESS_KEY_ID=あなたのアクセスキー
AWS_SECRET_ACCESS_KEY=あなたのシークレットキー
AWS_REGION=使用するAWSリージョン
- Docker Composeの起動
次のコマンドでDocker Composeを起動します。
docker compose up -d --build
- アクセス
ブラウザでhttp://localhost:8080/にアクセスします。
-
WebSocket接続
「(1)WebSocketに接続する」ボタンを押してWebSocketに接続します。
-
プロンプトの送信
プロンプトを入力し、「(2)プロンプトを送信する」ボタンを押します。
プログラムの解説
ブラウザとサーバーはWebSocketを通じて通信します。
サーバー側では、PythonでWebSocket接続を待ち受け、Anthropic Claude 2モデルに問い合わせを行い、結果をリアルタイムでクライアントに送信します。
サーバーサイド
サーバーのserver.pyはポート6789でWebSocketの接続を待ち受けます。
async def main():
async with websockets.serve(echo, "0.0.0.0", 6789):
await asyncio.Future() # プログラムが終了しないようにする
メッセージを受信すると、BedrockのAPIを実行して結果を返します。
async def echo(websocket, path):
"""WebSocket経由でメッセージを受信し、応答を返す"""
async for message in websocket:
logging.info(f"Received message: {message}")
async for response in invoke_bedrock(message):
logging.info(f"Sending response: {response}")
await websocket.send(response)
BedrockのAPIを実行すると、結果がストリームで返ってきます。
response = bedrock.invoke_model_with_response_stream(
modelId='anthropic.claude-v2',
accept='application/json',
contentType='application/json',
body=body
)
Bedrockから受け取った結果を返します。
stream = response.get('body')
if stream:
for event in stream:
chunk = event.get('chunk')
if chunk:
decoded = json.loads(chunk.get('bytes').decode())
yield(decoded['completion'])
クライアントサイド
クライアントのindex.htmlはサーバーとのWebSocket接続を確立し、ユーザーの入力に基づいてメッセージを送信し、受信した応答を表示します。
// サーバーとのWebSocket接続を確立
ws = new WebSocket("ws://127.0.0.1:6789/");
// メッセージを送信
const message = document.getElementById("message").value;
ws.send(message);
// 受信した応答を表示
ws.onmessage = function (event) {
log.textContent += event.data;
};
Amazon BedrockとAnthropic Claude 2を使用して、リアルタイムでテキストを表示するWebアプリケーションの作成方法を紹介しました。