Azure OpenAI ServiceのAdd your Dataで(出 来る限り簡単に)企業の独自情報にも回答してく れるシステムをハンズオンで作ってみる .NETラボ 1月 佐竹 祐亮

fe_js_engineer satyus 佐竹祐亮 / Yusuke Satake 株式会社エーピーコミュニケーションズ 兼 佐竹塾 仕事 • 株式会社エーピーコミュニケーションズにてDXコンサルタントに従事 • 学習塾とプログラミングスクールを経営 経歴  大学院終了後の2018年よりIT企業へ勤務開始  仮想通貨取引システムの開発  ドキュメント管理システムのPM  SIerでAzureに関わるDXコンサルタント  現在社会人6年目 →大阪で学校作ってます。

Agenda  本日の概要  従来の独自データの扱い方  Add your dataでの独自データの扱い方  ハンズオン  AOAI + Add your dataでクラウドネイティブアプリケーション開発  最後に

本日の概要  Azure OpenAI Serviceで現在プレビュー中の機能であるAdd Your dataを使って (出来る限り簡単に)企業の独自情報にも回答してくれるシステムを開発してみ ました。  実装方法を以下の記事にまとめてりますので、是非ハンズオンを通じてAzure OpenAI Serviceで遊んでみてください！  概念の説明 https://techblog.ap-com.co.jp/entry/2024/01/14/172841 ・ ハンズオン https://zenn.dev/yusu29/articles/azure_openai_addyourdata

従来の独自データの扱い方  Azure OpenAI Service(AOAI)で独自データを扱うためには以下の図のような アーキテクチャが必要でした。  AOAIとAzure AI Search(旧Cognitive Search)を並列に配置し、RAGアーキ テクチャを用いて独自情報を取り出す方法が一般的でした。 参考：https://github.com/Azure-Samples/azure-search-openai-demo

従来の独自データの扱い方  アプリの実装の難易度が高くなる (RAGアーキテクチャの実装)  LangChain等を使うと、ライブラリの version upについていかないといけな い  AI Search内で使用するIndexを自 前で生成する必要がある …etc 参考：https://github.com/Azure-Samples/azure-search-openai-demo  従来の方法での独自データの扱いには数点の課題

Add your dataでの独自データの扱い方  現在プレビュー中のAOAIの機能、Add your dataでのデータの取り扱いは従 来の方法と比較して非常に簡単になりました。  APIをAOAIが用意してくれるので、ア プリ側からAPIを叩くだけでOK  AI Search内で使用するIndexを自 動で生成 …etc

Add your dataでの独自データの扱い方  Add your dataのAPIを叩く方法は２パターン  Completions extensions APIを叩く  Add your dataからデプロイした WebAppsのAPIを叩く dataSourcesは都度指定 WebApps AOAIに直接アクセス WebAppsのAPIへアクセス dataSourcesは固定  会話の内容によってデータソースを切替 可能  とにかくアプリの実装が楽

ハンズオン AOAI + Add your dataでクラウドネイティブアプリケーション開発を開発してみます。

本日のハンズオンのアーキテクチャ  アプリケーションはNext.jsを使用  Add your dataからデプロイした WebAppsのAPIを叩く  独自データはBlob Storageにpdfを配 置(私の個人的な旅行のしおり)  Add your dataを用いてAI Search へ Indexを自動作成  Add your dataの機能でWebAppsを 自動デプロイし、APIとして利用

本日のハンズオンのアーキテクチャ サーバサイドの実装  Azure OpenAI Serviceの作成  Azure AI Searchの作成  BlobStorageの作成し、独自データを 格納  Add your dataでWebAppsをデプロ イし、APIを作成

本日のハンズオンのアーキテクチャ フロントサイドの実装  Next.jsで実装したフロントサイドのアプ リケーションから先ほどのWebAppsの APIを叩く

すごいちなみに…読み込ませたデータは以下です。

DEMO

最後に いかがだったでしょうか。  今回Add your dataを用いて独自データを扱うシステムを簡単に構築出来る 方法をハンズオン形式にてご紹介いたしました。  是非ご視聴された皆様でAdd your dataを使ったことがない方は一度ハンズオ ンして楽しんでいただけますと幸いです。

ご清聴頂きありがとうございました。

参考資料  Zenn https://zenn.dev/yusu29/articles/azure_react_llm  APCブログ https://techblog.ap-com.co.jp/entry/2023/12/28/143632  X https://twitter.com/fe_js_engineer