Slide 1

Slide 1 text

API Gatewayを使ってgpt-4からの回答を ストリームレスポンスさせる KDDIアジャイル開発センター株式会社 山口 歩夢(@ayumun_jp) JAWS-UG Tokyo ランチタイム会LT #10 2024/4/16

Slide 2

Slide 2 text

山口歩夢 2021年にKDDIに新卒入社し、自社クラウドの 基盤開発に従事 2023年よりKAGに兼務出向し、 Webサービスの開発や地方拠点案件のシステム   開発を担当 2024年 AWS Community Buildersに選出  (カテゴリ:Serverless) 自己紹介

Slide 3

Slide 3 text

目次 構成図 1. デモ 2. 作成理由 3. 実装方法(ポイントのみ 4. まとめ 5.

Slide 4

Slide 4 text

構成図

Slide 5

Slide 5 text

デモ

Slide 6

Slide 6 text

作成理由 英語で日記を書いてるの で、文章を添削せたい AIからのレスポンスの 待ち時間を“体感”減らしたい プロンプトエンジニアリ ングに触れたい

Slide 7

Slide 7 text

バルクレスポンス(一括) ストリームレスポンス(逐次) デモ デモ 比較

Slide 8

Slide 8 text

REST APIではLambdaから画面に対してストリーム的にデータの返却はできない → Websocketを使う gptにストリーム形式で返答させる バルクレスポンス ストリームレスポンス 内部的に新しいチャンクが 利用可能になるまで待機する設計

Slide 9

Slide 9 text

API GatewayでWebsocket APIを選択する API Gatewayでは、Rest APIではなく Websocket APIを選択してデプロイする Websocketは、一度接続が確立すれば リアルタイムでのデータ送受信が可能 Websocketを利用することで ストリーム的に返却されるデータを扱える

Slide 10

Slide 10 text

lambdaにおけるwebsocketの扱い API Gatewayからのリクエストのコンテキスト (どのドメイン、ステージ、接続IDから来たか) を把握しAPI Gatewayへのメッセージ送信を実現 APIクライアントに対して値を逐次返却する

Slide 11

Slide 11 text

画面側でのWebsocketの扱い 入力と画面に返すための関数を 受け取ってWebsocketクライアントの インスタンスを作成 入力値を、サーバー側に渡す サーバからの返却値を受け取り、データが届く度に コールバック関数で呼び出し元にデータを返却

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

まとめ ストリームレスポンス気持ちいぃぃ

Slide 14

Slide 14 text

作成手順の詳細は Qiitaへ(@ayumun_jp)

Slide 15

Slide 15 text

No content