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

© 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

rights reserved. Daisuke Awaji Amazon Web Services Japan Solutions Architect 2 @gee0awa サーバーレス / 生成 AI / フロントエンドアプリが好きです

rights reserved. 3 Generative UI 生成 AI がフロントエンドの UI を生成すること

rights reserved. Generative UI の簡単な例ウェブサイト生成 4

rights reserved. チャットによるコード生成は開発者体験が悪い目的に特化した生成 AI の活用が可能にフィードバックループの速さ Generative UI は何が嬉しいか 5 Feedback loop

rights reserved. チャットによるコード生成は開発者体験が悪い目的に特化した生成 AI の活用が可能にフィードバックループの速さ Generative UI は何が嬉しいか 6 Feedback loop 本当にそれだけ？

rights reserved. Generative UI の応用ステップ 7 ⾃律的な AI エージェントが UI を描画する Level 3 構造化されたテキストを UI に反映する Level 2 対話的な I/F でウェブサイトを⽣成する Level 1

rights reserved. 8 Level 1 対話的な I/F でウェブサイトを⽣成する

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 実際はもう少し複雑なプロンプトです。詳細は以下コードを参照ください。

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 実際はもう少し複雑なプロンプトです。詳細は以下コードを参照ください。

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

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 など、すぐに表示できるものは即座に返却しつつ動的なコンテンツはサーバサイドで準備できてから順次返却する

rights reserved. 13 Level 2 構造化されたテキストを UI に反映する

rights reserved. スライドの生成 14

rights reserved. スライドの生成 15 デモンストレーション

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

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

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 テキストなど…

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 応答生成ベクトル生成ベクトル保存＆類似クエリ

rights reserved. draw.io の XML ファイルを生成して描画する AWS 構成図の生成 20 draw.io の xml ファイル

rights reserved. AWS 構成図の生成 21 デモンストレーション

rights reserved. みんな大好き ASL (Amazon State Language) も描けるっ・・・！！ AWS Step Functions の ASL を生成する 22

rights reserved. AWS Step Functions の ASL を生成する 23 デモンストレーション

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形式の配列で出⼒してください以下はその例です。 <example> [{title: ʼʼ, value: ʻʼ}] </example> [ { title: ”導⼊画像の最適化”, value: ”画像のロードを…” }, { title: “カートの詳細化”, value: “ショッピングカート機能を・・・” } ] プロンプト出力 JSON Schema を含めるとなお良い

rights reserved. 25 Level 3 ⾃律的な AI エージェントが UI を描画する

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

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…

rights reserved. 開発を自律的に行う生成 AI を利用する 28 デモンストレーションファイルを作成して、ソフトウェアを実装する

rights reserved. Claude 3 Tool Use の実装例 29 toolSpec の定義（Claude に送信する）実行される Tool (Function) の実装

rights reserved. 開発を自律的に行う生成 AI を利用する 30 デモンストレーション既存のソースコードを読んで図解する

rights reserved. ToolUse を Generative UI に応用した例 Anthropic Claude 3.5 の Artifact 31 UI 要素の種類に応じて描画する機能を出し分けている HTML の描画、グラフの描画など

rights reserved. ⽬的に特化した UI を描く Tool を使い分ける Generative UI のアーキテクチャ（Advanced） 32 User Input LLM HTML Graph Diagram Tools HTML UI Execute Tool

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) +

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 +

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

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

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

rights reserved. 38

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 を⽣成する

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 を生成しプレビュー • 追加機能のレコメンド

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

rights reserved. UI は React ベースに実装しているのでファイル操作（OS操作）が不要であれば 👆 の構成にも移植可能 Bedrock Engineer のアーキテクチャ 42

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

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

rights reserved. Thank you! Daisuke Awaji Amazon Web Services Japan G.K. Solutions Architect 45

生成 AI による新しい UI/UX 〜サーバーレスで実現する Generative UI の...

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

More Decks by geeawa

Other Decks in Technology

Featured

Transcript