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

© 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 夏祭り

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. generative-ai-use-cases-jp (GenU) は OSS です

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

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

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

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

rights reserved. ⽣成 AI が HTML のファイルを作り出し、ブラウザの iframe に埋め込んで表⽰します Generative UI のアーキテクチャ（Basic） 10 ユーザー AWS Cloud AWS Lambda Amazon Bedrock API サーバー生成AI基盤モデル Claude3 ユーザーの⼊⼒プロンプト︓ 観葉植物を取り扱うECサイトを作ってくださいサイトの名前は「Green Village」です HTML Iframe で指定箇所に埋め込みユーザの⼊⼒プロンプト＋システムプロンプト

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 アシスタントです

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

rights reserved. スライドの生成 13

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

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

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

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

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

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

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

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

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

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…

rights reserved. 開発を自律的に行う生成 AI を利用する 24 デモンストレーション

rights reserved. Bedrock Engineer 25 このソフトウェアは私の個人的なお試し実装のため、 ToolUse の振る舞いと実装方法を把握するために利用してください https://github.com/daisuke-awaji/bedrock-engineer

rights reserved. Claude 3 Tool Use (Function Calling) 26 https://github.com/anthropics/courses/blob/master/ToolUse/01_tool_use_overview.ipynb アプリと Claude の間のリクエストの流れ

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

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

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

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 +

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

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

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

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

生成AIによる新しいUI/UX ~Generative UI の世界を感じよう~ / intr...

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

More Decks by geeawa

Other Decks in Programming

Featured

Transcript