生成 AI による新しい UI/UX 〜サーバーレスで実現する Generative UI の世界〜 / generative ui with serverless

Slide 1

Slide 1 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Daisuke Awaji Amazon Web Services Japan G.K. Solutions Architect 生成 AI による新しい UI/UX 〜サーバーレスで実現する Generative UI の世界〜 S E R V E R L E S S D A Y S T O K Y O 2 0 2 4

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. ⽣成 AI が HTML のファイルを作り出し、ブラウザの iframe に埋め込んで表⽰します Generative UI のアーキテクチャ（Basic） 9 ユーザー AWS Cloud AWS Lambda Amazon Bedrock API サーバー生成AI基盤モデル Claude3 ユーザーの⼊⼒プロンプト︓ 観葉植物を取り扱うECサイトを作ってくださいサイトの名前は「Green Village」です HTML Iframe で指定箇所に埋め込みユーザの⼊⼒プロンプト＋システムプロンプト https://github.com/daisuke-awaji/bedrock-engineer/blob/main/src/renderer/src/prompts/prompts.ts 実際はもう少し複雑なプロンプトです。詳細は以下コードを参照ください。

Slide 10

Slide 10 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. ⽣成 AI が HTML のファイルを作り出し、ブラウザの iframe に埋め込んで表⽰します Generative UI のアーキテクチャ（Basic） 10 ユーザー AWS Cloud AWS Lambda Amazon Bedrock API サーバー生成AI基盤モデル Claude3 ユーザーの⼊⼒プロンプト︓ 観葉植物を取り扱うECサイトを作ってくださいサイトの名前は「Green Village」です HTML Iframe で指定箇所に埋め込みユーザの⼊⼒プロンプト＋システムプロンプトあなたは HTML を作成する AI アシスタントです https://github.com/daisuke-awaji/bedrock-engineer/blob/main/src/renderer/src/prompts/prompts.ts 実際はもう少し複雑なプロンプトです。詳細は以下コードを参照ください。

Slide 11

Slide 11 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Lambda Response Streaming レスポンスデータが利用可能になった時点で返却することで TTFB を改善する最大 20MB のレスポンスペイロードをサポート Response streaming Next.js などのフレームワークでの Streaming Response も可能（Lambda Web Adapter を利用）

Slide 12

Slide 12 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Response streaming Demo Next.js の Streaming HTML を AWS Lambda Response Streaming で https://github.com/awslabs/aws-lambda-web-adapter/tree/main/examples/nextjs-response-streaming Header など、すぐに表示できるものは即座に返却しつつ動的なコンテンツはサーバサイドで準備できてから順次返却する

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Markdown 形式のテキストを⽣成し、画⾯でレイアウトしますスライド生成のアーキテクチャ（Basic） 16 ユーザー AWS Cloud AWS Lambda Amazon Bedrock API サーバー生成AI基盤モデル Claude3 ユーザの入力プロンプト＋システムプロンプトユーザーの⼊⼒プロンプト︓ 〇〇のスライドを作って Markdown形式のテキストライブラリ（Marpなど）を活⽤して、 Markdown をスライドとして表⽰

Slide 17

Slide 17 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Markdown 形式のテキストを⽣成し、画⾯でレイアウトしますスライド生成のアーキテクチャ（Basic） 17 ユーザー AWS Cloud AWS Lambda Amazon Bedrock API サーバー生成AI基盤モデル Claude3 ユーザの入力プロンプト＋システムプロンプトユーザーの⼊⼒プロンプト︓ 〇〇のスライドを作って Markdown形式のテキストライブラリ（Marpなど）を活⽤して、 Markdown をスライドとして表⽰あなたは Markdown を作成する AI アシスタントです

Slide 18

Slide 18 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. RAG の仕組みを活⽤して、特定のデータに閉じた利⽤も可能にスライド生成のアーキテクチャ（Basic + RAG） 18 ユーザー AWS Cloud AWS Lambda Amazon Bedrock API サーバー生成AI基盤モデル Claude3 ユーザの入力プロンプト＋システムプロンプトユーザーの⼊⼒プロンプト︓ 〇〇のスライドを作って Markdown形式のテキストライブラリ（Marpなど）を活⽤して、 Markdown をスライドとして表⽰ Amazon S3 Knowledge Base RAG PDF Word HTML テキストなど…

Slide 19

Slide 19 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 拡張検索生成（RAG: Retrieval-Augmented Generation）をフルマネージドに提供 Amazon Bedrock Knowledge Bases 19 Amazon Bedrock Knowledge Base ユーザーアプリケーションエージェントナレッジベースデータソース InvokeAgent API Retrieve API / RetrieveAndGenerate API ドキュメント（.pdf, .docx, .html, .txt, …）取り込み RAG用モデル埋込用モデル Amazon OpenSearch Serverless Amazon Aurora PostgreSQL Pinecone.io MongoDB Atras Redis Enterprise Cloud 応答生成ベクトル生成ベクトル保存＆類似クエリ

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 24 文脈に沿ったレコメンド機能生成 AI (Claude) の結果を JSON 形式にすることで UI に組み込みやすく工夫する JSON 形式でパースできない場合、クライアントからリトライを行う https://docs.anthropic.com/en/docs/test-and-evaluate/strengthen-guardrails/increase-consistency#example-generating-consistent-market-intelligence レコメンド機能 Amazon Bedrock 生成AI基盤モデル Claude3 title, value というキーを含む JSON形式の配列で出⼒してください以下はその例です。 [{title: ʼʼ, value: ʻʼ}] [ { title: ”導⼊画像の最適化”, value: ”画像のロードを…” }, { title: “カートの詳細化”, value: “ショッピングカート機能を・・・” } ] プロンプト出力 JSON Schema を含めるとなお良い

Slide 25

Slide 25 text

Slide 26

Slide 26 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 開発を自律的に行う生成 AI を利用する 26 • プロジェクト構造ごと生成AIに解釈させ、ソースコードを生成する新しい方法 • 「React でアンケートサイトを作って」というユーザの指示に対して、１ファイルではなく複数ファイルをディレクトリ構造を理解して作成し、指定した到達目標まで自動で作成し続ける • Claude 3 の Tool Use (Function Calling) を活用して OS 操作を可能にする

Slide 27

Slide 27 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Claude 3 Tool Use (Function Calling) 27 https://github.com/anthropics/courses/blob/master/ToolUse/01_tool_use_overview.ipynb 外部ツールまたは関数を定義して呼び出すことで、Claude の機能を拡張する外部ツールの例）Web API, DataBase, FileSystem, OS API etc…

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. ⽬的に特化した UI を描く Tool を使い分ける Generative UI のアーキテクチャ（Advanced） 33 Amazon Bedrock User Input LLM HTML Graph Diagram Tools UI Execute Tool HTML Server Client (Browser, Native App) +

Slide 34

Slide 34 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. サーバーサイドで処理が必要な場合にも応⽤が可能⾃律的な AI は UI の出⼒制御だけの技術ではない Generative UI のアーキテクチャ（Advanced） 34 Amazon Bedrock User Input LLM HTML Graph Diagram Tools HTML Diagram UI Server Client (Browser, Native App) Execute Tool Diagram HTML AWS Lambda +

Slide 35

Slide 35 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Claude Artifacts の Bedrock 版の実装例ユーザの入力に応じて、HTMLのプレビューやグラフの描画を出し分ける Open Artifacts for Amazon Bedrock 35 https://github.com/aws-samples/open_artifacts_for_bedrock

Slide 36

Slide 36 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. OpenArtifact の機能に加えて、必要に応じてウェブ検索やデータベースからデータを取得して理解する機能も搭載 Artifacts and Tools for Bedrock 36 https://github.com/aws-samples/artifacts-and-tools-for-bedrock データベースから取得する機能は今後の搭載を予定しています

Slide 37

Slide 37 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. RAG の仕組みを応用したウェブサイト生成 37 Figma GitHub （デザインシステムの React コードなど） Website Knowledge Bases for Amazon Bedrock 既存のソースやデザインシステムを参照して、デザインに⼀貫性のある UI を⽣成する AWS のデザインシステム CloudScape に従うウェブサイトを生成した例

Slide 38

Slide 38 text

Slide 39

Slide 39 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Generative UI + RAG の Prompt Chaining 39 User Input CloudScape デザインシステムを使ってTODOアプリを作って Amazon Bedrock (Claude 3 Haiku) 必要となるコンポーネントを検討 Button, Table, Checkbox Step 1 Amazon Bedrock (Claude 3.5 sonnet) ソースコードの生成 React ソースコード Step 3 Knowledge base 必要なコードの取得関連するソースコード sync CloudScape Design System Step 2 gpt-repository-loader のようなツールを使って LLM Readable な形式に変換してから Knowledge base に入れるのがおすすめ「」既存のソースやデザインシステムを参照して、デザインに⼀貫性のある UI を⽣成する

Slide 40

Slide 40 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Bedrock Engineer 40 このソフトウェアは私の個人的なお試し実装です。現在 AWS 公式のサンプルではないことにご注意ください。 https://github.com/daisuke-awaji/bedrock-engineer Amazon Bedrock を使用した開発を支援する AI アシスタント 1. Agent Chat アプリを実装するエージェント以下のツールをサポート • ファイルの読み書き • フォルダの読み書き • ウェブ検索 2. Website Generator • React/Vue/Svelte/Vanilla.js のコードを生成しプレビュー • 追加機能のレコメンド • デザインシステムとの統合 3. Step Functions Generator • ASL を生成しプレビュー • 追加機能のレコメンド

Slide 41

Slide 41 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. • Electron を使用して mac, win, linux で動作するネイティブアプリとして実装 • クラウドは、Amazon Bedrock のみ使用 • AWS Lambda も不要なサーバーレス構成 • CDK を使ったデプロイすら不要 Bedrock Engineer のアーキテクチャ 41

Slide 42

Slide 42 text

Slide 43

Slide 43 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. • 「生成 AI = チャット」の枠を超え、フィードバックループの良い体験を目指す • Generative UI によって目的特化したアプリケーションを作る • 自律的な AI エージェントを視野に入れる • ソースコード RAG の可能性を感じるまとめ 43

Slide 44

Slide 44 text

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. • Builders.flash ブログ生成 AI による新しい UI/UX ~ Generative “UI” の世界観を感じよう ~ https://aws.amazon.com/jp/builders-flash/202406/generative-ai-ux/ • Open Artifacts for Amazon Bedrock https://github.com/aws-samples/open_artifacts_for_bedrock • Bedrock Engineer https://github.com/daisuke-awaji/bedrock-engineer • Generative AI Use Cases JP https://github.com/aws-samples/generative-ai-use-cases-jp/ Appendix 44