生成AIによる新しいUI/UX ~Generative UI の世界を感じよう~ / introducing-generative-ui

1. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Daisuke Awaji アマゾン ウェブ サービス ジャパン合同会社 ソリューションアーキテクト 生成 AI による新しい UI/UX 〜Generative UI の世界を感じよう〜 J A W S - U G 名 古 屋 生 成 A I 夏 祭 り
2. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Daisuke Awaji Amazon Web Services Japan Solutions Architect 2 @gee0awa サーバーレス / 生成 AI / フロントエンドアプリが好きです
3. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 3 Generative UI 生成 AI がフロントエンドの UI を生成すること
4. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Generative UI の簡単な例 ウェブサイト生成 4
5. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. generative-ai-use-cases-jp (GenU) は OSS です
6. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. チャットによるコード生成は開発者体験が悪い 目的に特化した生成 AI の活用が可能に フィードバックループの速さ Generative UI は何が嬉しいか 6 Feedback loop
7. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. チャットによるコード生成は開発者体験が悪い 目的に特化した生成 AI の活用が可能に フィードバックループの速さ Generative UI は何が嬉しいか 7 Feedback loop 本当にそれだけ？
8. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Generative UI の応用ステップ 8 ⾃律的な AI エージェントが UI を描画する Level 3 構造化されたテキストを UI に反映する Level 2 対話的な I/F でウェブサイトを⽣成する Level 1
9. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 9 Level 1 対話的な I/F でウェブサイトを⽣成する
10. © 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 で指定箇所に埋め込み ユーザの⼊⼒プロンプト ＋ システムプロンプト
11. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. ⽣成 AI が HTML のファイルを作り出し、ブラウザの iframe に埋め込んで表⽰します Generative UI のアーキテクチャ（Basic） 11 ユーザー AWS Cloud AWS Lambda Amazon Bedrock API サーバー 生成AI基盤モデル Claude3 ユーザーの⼊⼒プロンプト︓ 観葉植物を取り扱うECサイトを作ってください サイトの名前は「Green Village」です HTML Iframe で指定箇所に埋め込み ユーザの⼊⼒プロンプト ＋ システムプロンプト あなたは HTML を 作成する AI アシスタントです
12. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 12 Level 2 構造化されたテキストを UI に反映する
13. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. スライドの生成 13
14. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. スライドの生成 14 デモンストレーション
15. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Markdown 形式のテキストを⽣成し、画⾯でレイアウトします スライド生成 のアーキテクチャ（Basic） 15 ユーザー AWS Cloud AWS Lambda Amazon Bedrock API サーバー 生成AI基盤モデル Claude3 ユーザの入力プロンプト ＋ システムプロンプト ユーザーの⼊⼒プロンプト︓ 〇〇のスライドを作って Markdown形式のテキスト ライブラリ（Marpなど）を活⽤して、 Markdown をスライドとして表⽰
16. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. RAG の仕組みを活⽤して、特定のデータに閉じた利⽤も可能に スライド生成 のアーキテクチャ（Basic + RAG） 16 ユーザー AWS Cloud AWS Lambda Amazon Bedrock API サーバー 生成AI基盤モデル Claude3 ユーザの入力プロンプト ＋ システムプロンプト ユーザーの⼊⼒プロンプト︓ 〇〇のスライドを作って Markdown形式のテキスト ライブラリ（Marpなど）を活⽤して、 Markdown をスライドとして表⽰ Amazon S3 Amazon Kendra RAG PDF Word HTML テキスト など…
17. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. draw.io の XML ファイルを生成して描画する AWS 構成図の生成 17 draw.io の xml ファイル
18. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS 構成図の生成 18 デモンストレーション
19. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. みんな大好き ASL (Amazon State Laungage) も描けるっ・・・！！ AWS Step Functions の ASL を生成する 19
20. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Step Functions の ASL を生成する 20 デモンストレーション
21. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 21 Level 3 ⾃律的な AI エージェントが UI を描画する
22. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 開発を自律的に行う生成 AI を利用する 22 • プロジェクト構造ごと生成AIに解釈させ、ソースコードを生成する新しい方法 • 「React でアンケートサイトを作って」というユーザの指示に対して、 １ファイルではなく複数ファイルをディレクトリ構造を理解して作成し、 指定した到達目標まで自動で作成し続ける • Claude 3 の Tool Use (Function Calling) を活用して OS 操作を可能にする
23. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Claude 3 Tool Use (Function Calling) 23 https://github.com/anthropics/courses/blob/master/ToolUse/01_tool_use_overview.ipynb 外部ツールまたは関数を定義して呼び出すことで、Claude の機能を拡張する 外部ツールの例）Web API, DataBase, FileSystem, OS API etc…
24. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 開発を自律的に行う生成 AI を利用する 24 デモンストレーション
25. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Bedrock Engineer 25 このソフトウェアは私の個人的なお試し実装のため、 ToolUse の振る舞いと実装方法を把握するために利用してください https://github.com/daisuke-awaji/bedrock-engineer
26. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Claude 3 Tool Use (Function Calling) 26 https://github.com/anthropics/courses/blob/master/ToolUse/01_tool_use_overview.ipynb アプリ と Claude の間のリクエストの流れ
27. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. ToolUse を Generative UI に応用した例 Anthropic Claude 3.5 の Artifact 27 UI 要素の種類に応じて 描画する機能を出し分けている HTML の描画、グラフの描画など
28. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. ⽬的に特化した UI を描く Tool を使い分ける Generative UI のアーキテクチャ（Advanced） 28 User Input LLM HTML Graph Diagram Tools UI Execute Tool
29. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. ⽬的に特化した UI を描く Tool を使い分ける Generative UI のアーキテクチャ（Advanced） 29 Amazon Bedrock User Input LLM HTML Graph Diagram Tools UI Execute Tool HTML Server Client (Browser, Native App) +
30. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. サーバーサイドで処理が必要な場合にも応⽤が可能 ⾃律的な AI は UI の出⼒制御だけの技術ではない Generative UI のアーキテクチャ（Advanced） 30 Amazon Bedrock User Input LLM HTML Graph Diagram Tools HTML Diagram UI Server Client (Browser, Native App) Execute Tool Diagram HTML AWS Lambda +
31. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Claude Artifacts の Bedrock 版の実装例 ユーザの入力に応じて、HTMLのプレビューやグラフの描画を出し分ける Open Artifacts for Amazon Bedrock 31 https://github.com/aws-samples/open_artifacts_for_bedrock
32. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. OpenArtifact の機能に加えて、 必要に応じてウェブ検索やデータベースからデータを取得して理解する機能も搭載 Artifacts and Tools for Bedrock 32 https://github.com/aws-samples/artifacts-and-tools-for-bedrock データベースから取得する機能は今後の搭載を予定しています
33. © 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. • 「生成 AI = チャット」の枠を超え、フィードバックループの良い体験を目指す • Generative UI によって目的特化したアプリケーションを作る • 自律的な AI エージェントを視野に入れる まとめ 33
34. © 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 34