Postman-20240129

ベクトルデータベースと React による RAG サンプルアプリ開発に VS Code、 Postman を最⼤限活⽤した話 鈴⽊ 章太郎 主席エンタープライズアーキテクト ヴイエムウェア株式会社 2024/1/29 Broadcom Proprietary Proprietary and Confidential. and Confidential. Copyright Copyright © 2023 Broadcom. © 2023 Broadcom. All RightsAll Reserved. Rights Reserved. The termThe “Broadcom” term “Broadcom” refers to refers Broadcom to Broadcom Inc. and/or Inc.itsand/or subsidiaries. its subsidiaries. 1 | Broadcom

鈴⽊ 章太郎 X (Twitter) : @shosuz ヴイエムウェア株式会社 主席エンタープライズアーキテクト Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、 Microsoft Azure 等の開発者向け技術啓発活動を 実施。その後 Dell、Accenture、Elastic での開発者 向け技術啓発活動等を経て現職。 モダンアプリケーション開発、マルチクラウド対応、アーキ テクチャ策定等を中⼼に、開発者向け最新技術啓発 活動中。 2019年4⽉より2021年8⽉まで、内閣官房 IT 総合戦 略室 政府 CIO 補佐官、2021年9⽉より、デジタル庁 プロジェクトマネージャーユニット ソリューションアーキテクト を兼務。 https://www.docswell.com/user/shosuz 2 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://www.docswell.com/user/shosuz

RAG サンプルアプリの概要 Broadcom Proprietary Proprietary and Confidential. and Confidential. Copyright Copyright © 2023 Broadcom. © 2023 Broadcom. All RightsAll Reserved. Rights Reserved. The termThe “Broadcom” term “Broadcom” refers to refers Broadcom to Broadcom Inc. and/or Inc.itsand/or subsidiaries. its subsidiaries. 5 | Broadcom

VMware Explore US セッション⼀覧（英語）/ビデオデータ https://www.vmware.com/explore/us.html 6 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 6

• https://www.vmware.com/explore/us.html

VMware Explore US セッションを⽇本語で検索・サマリーアプリ Xxx について教えて もっと詳しく教えて セッションを検索 1 2 3 ボタンを押す 4 詳細情報表⽰ 関連セッションの表 ⽰ pgvector を使⽤した セマンティック検索 検索 App Deploy 該当セッションの 概要 全⽂ テーブル テーブル 2. pgvector にてクエリと概要のベクトルを ⽐較し、関連セッションを検索 全⽂を検索 6 質問＋検索結果情報から プロンプトをビルド 3. UI に関連セッション⼀覧を表⽰ 4. 詳しく知りたいセッションの 「もっと詳しく」 リンクを押す 7 Session 全⽂ ⽂字起こしの要 約を⽣成 5. 該当セッションの全⽂を検索 6. Greenplum DB より取得された全⽂の ⽂字起こしから、LLM へのプロンプトを ⽣成し、LLM へクエリ Transformer Model を使⽤したベクトル情報の付与 7. セッション全⽂の要約を⽣成 Hugging Face LLAMA2 7 Workflow: 1. ユーザーが UI を通じて知りたいワードを React 5 セッションの 8 Explore US Explore US Session 概要 Session 全⽂ ⽂字起こし 8. UI にセッションの詳細を表⽰ (LLM) | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 7

VMware Greenplum とは ? Tanzu data のオファリング、Postgres、Gemfire, Greenplum 全てがベクターサポート 分析アプリケーション 課題 ソリューション 読み込み/書き込み SQL Language 組み込みアナリティクス • データサイエンティストの • 汎⽤技術 ANSI SQL 完全対応 GPtext and more 採⽤ • 分析をするにもデータが • 組み込みアナリティクス機能 マスターノード(仮想マシン) ほしいところにない スタンバイノードノード(仮想マシン) インターコネクト (⾼速ネットワークスイッチ) • データを蓄積するほど パフォーマンスが懸念 セグメント ホスト （仮想マシン） セグメント ホスト （仮想マシン） セグメント ホスト （仮想マシン） セグメント ホスト （仮想マシン） • クラウドのコスト気になる • 分散 Postgres による 無限に スケールアウト 超並列処理の実現 • コア課⾦による 予想可能なコスト vSphere+ / vSAN+ • 拡張に伴い運⽤が⼤変そう • データが簡単には移⾏ ができない Platform Extension Framework (PXF) 読み込み/書き込み vSAN vSAN Disk DiskvSAN DiskvSAN Disk • vSphere 技術と連動した⾼い Elasticity (弾⼒性）の確保 S3 オブジェクト ストレージ Hadoop リレーショナル • PXF による外部データの統合 データベース 外部データソース 8 8 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

アプリのデモ Broadcom Proprietary Proprietary and Confidential. and Confidential. Copyright Copyright © 2023 Broadcom. © 2023 Broadcom. All RightsAll Reserved. Rights Reserved. The termThe “Broadcom” term “Broadcom” refers to refers Broadcom to Broadcom Inc. and/or Inc.itsand/or subsidiaries. its subsidiaries. 9 | Broadcom

VMware Explore US セッションを⽇本語で検索・サマリーアプリ Xxx について教えて もっと詳しく教えて セッションを検索 1 2 3 ボタンを押す 4 詳細情報表⽰ 関連セッションの表 ⽰ pgvector を使⽤した セマンティック検索 検索 App Deploy 該当セッションの 概要 全⽂ テーブル テーブル 2. pgvector にてクエリと概要のベクトルを ⽐較し、関連セッションを検索 全⽂を検索 6 質問＋検索結果情報から プロンプトをビルド 3. UI に関連セッション⼀覧を表⽰ 4. 詳しく知りたいセッションの 「もっと詳しく」 リンクを押す 7 Session 全⽂ ⽂字起こしの要 約を⽣成 5. 該当セッションの全⽂を検索 6. Greenplum DB より取得された全⽂の ⽂字起こしから、LLM へのプロンプトを ⽣成し、LLM へクエリ Transformer Model を使⽤したベクトル情報の付与 7. セッション全⽂の要約を⽣成 Hugging Face LLAMA2 10 Workflow: 1. ユーザーが UI を通じて知りたいワードを React 5 セッションの 8 Explore US Explore US Session 概要 Session 全⽂ ⽂字起こし 8. UI にセッションの詳細を表⽰ (LLM) | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 10

11 11 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

12 12 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

VS Code と Postman の利⽤ Broadcom Proprietary Proprietary and Confidential. and Confidential. Copyright Copyright © 2023 Broadcom. © 2023 Broadcom. All RightsAll Reserved. Rights Reserved. The termThe “Broadcom” term “Broadcom” refers to refers Broadcom to Broadcom Inc. and/or Inc.itsand/or subsidiaries. its subsidiaries. 13 | Broadcom

Pivotaltracker による Backlog の管理 14 14 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

Postman for VS Code https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode • VS Code から直接 Postman の パワーを使って API 開発とテストを 合理化 • Postman にサインイン • API リクエストを送信 • HTTP API リクエストの送信 • マルチプロトコル API リクエストを 送信 • 履歴から API リクエストを送信 • コレクションを使う • API を⽂書化 • データをインポート • クッキーを使⽤ • API のテスト • スクリプトを使った API のテスト • Postman コンソールでのトラブル シューティング 15 15 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode

Schema.sql の確定 https://github.com/mhoshi-vm/explore-api/blob/main/src/main/resources/schema.sql 16 16 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/mhoshi-vm/explore-api/blob/main/src/main/resources/schema.sql

Swagger UI ⽣成 17 17 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

ブラウザーから Search API へのアクセス 18 18 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

Postman for VS Code で実⾏ - Search API https://explore-apiexplore.tap01.cl01.lespaulstudio plus.info/api/search?prompt=Aria 19 19 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://explore-api-

出⼒を全部またずに応答を返すための SSE (Server Side Event) 実装 SSE はクライアント側での実装も必要（参考 URL） https://www.baeldung.com/spring-mvc-ssestreams#2-client-side-1 20 20 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://www.baeldung.com/spring-mvc-sse-streams

Postman for VS Code で実⾏ - Summarize API https://explore-apiexplore.tap01.cl01.lespaulstudioplus .info/api/summarize?sessionId=MAP B2503LV 21 21 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://explore-api-explore.tap01.cl01.lespaulstudioplus.info/api/summarize?sessionId=MAPB2503LV

Tanzu Application Platform にデプロイする API 側 GitHub リポジトリ https://github.com/mhoshi-vm/explore-api 22 22 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/mhoshi-vm/explore-api

React フロントエンド側アプリケーション GitHub リポジトリ https://github.com/shosuz-evangelist/react-ai-explore 23 23 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/shosuz-evangelist/react-ai-explore

今回の API を Tanzu Application Platform にデプロイするコマンド Docker ファイルを書かずに Container をデプロイできる 24 24 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

VMware Tanzu Application Platform / Greenplum データベースと React による RAG サンプルアプリご紹介 https://qiita.com/shosuz/items/cc36e9794f8946eb888a 25 25 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://qiita.com/shosuz/items/cc36e9794f8946eb888a

Thank You for your attention! Broadcom Proprietary Proprietary and Confidential. and Confidential. Copyright Copyright © 2023 Broadcom. © 2023 Broadcom. All RightsAll Reserved. Rights Reserved. The termThe “Broadcom” term “Broadcom” refers to refers Broadcom to Broadcom Inc. and/or Inc.itsand/or subsidiaries. its subsidiaries. 26 | Broadcom