【超入門から応用まで】 Azure OpenAI Service × LangChain

前半は大規模言語モデル(LLM)の概念やReActの概念について説明致します。
後半はAzure OpenAI Service × LangChain × Azure Static Web Apps を組み合わせ、2022年1月以降の情報でも、OpenAIが自身で検索しながら補完してくれるような機能を実装したアプリケーションをハンズオンで実装します。

Transcript

1. 【超⼊⾨から応⽤まで】 Azure OpenAI Service × LangChain
2. 会社概要 会社名 ： 株式会社エーピーコミュニケーションズ URL ： http://www.ap-com.co.jp/ 社員数 ： 430名(2023年1⽉現在) エーピーコミュニケーションズ（APC）は、お客様のことを真剣に考えられるエンジニアを育成し、熱狂できるキャリアパスを創出し、 パフォーマンスを最⼤化できる環境を創り、従来の慣例に捉われずに⼯夫と挑戦を⾏い続ける NeoSIer（ネオエスアイヤー） です。 業界にとっての新しいSIのモデルNeoSIer × SIのDX化 攻めのDX/AI内製化・Microsoft Azure Engineer driven(エンジニア⽂化の育成) Azure有資格者100名以上 ・NeoSIerを掲げ、DX時代に必要なSIモデル変⾰に挑戦。 DockerEnterpriseを買収したMirantisとのJVを設⽴。 攻めのDX/AIの内製化、⾃社事業のDX化、ネットワーク⾃動化、 SASE(ゼロトラスト)サービス、⾃社プロダクトの世界拡販、プライム化など。 ・Microsoft様DevOps Specialization、SolutionPartner(3カテゴリ)。 ・コミュニティ登壇・blog・技術イベント・エンジニアメンター制度など、 エンジニア中⼼の組織⽂化を構築。 ・社内⼤学制度APアカデミーなども⽣かし、Azureエンジニアを育成。
3. 吉川 俊甫 / Shunsuke Yoshikawa 株式会社エーピーコミュニケーションズ Experience • ⼤⼿物流企業にてITインフラの運⽤業務に従事 • オンプレミスからプライベートクラウド、パブリッククラウドまで幅広く対応 • 株式会社エーピーコミュニケーションズにて Azure / GitHubを活⽤したクラウドネイティブアプリケーション基盤構築に従事 • 2023/06 Microsoft MVP (Microsoft Azure) Expertise
4. apc-y-satake satyus 佐⽵祐亮 / Yusuke Satake 株式会社エーピーコミュニケーションズ Experience • 学習塾の起業 • ITコンサルティングファームにて仮想通貨取引システムの開発に従事 • SaaS 企業にてPM業務に従事 • プログラミングスクールの起業 • 株式会社エーピーコミュニケーションズにてDXコンサルタントに従事 Expertise ž 学習塾起業 ž プログラミングスクール起業 ž ソフトウェア開発 ž React / Next.js ž Node.js ž Microsoft Azure ž 数学ⅠA・ⅡB・ⅢC ž 物理
5. Agenda ž 本⽇の⽬標 ž 使⽤する概念の説明 ž ⼤規模⾔語モデル(LLM) ž LLMを強化する⽅法 ž ReActとは？ ž LangChainとは？ ž ハンズオン ž AOAI + LangChainでReActアプリケーション開発 ž 最後に
6. 本⽇の⽬標 ž Azure OpenAI ServiceとLangChainを⽤いてアプリケーションの実装をハンズ オン形式で実施します。 ž アプリケーション内で使⽤するReActという概念についても学習し、これから Azure OpenAI Serviceが⾃社内や個⼈開発の中で利活⽤出来そうだと感 じれることがゴールです。 ž ⼤規模⾔語モデル(LLM)の説明から記載しているので、初学者の⽅もご安⼼し てついてきていただければと存じます。 ž 各種質問についてはGoogle Spread Sheetを展開しておりますので、そこへ記 載していただければと存じます。 それでは始めましょう！
7. 使⽤する概念の説明
8. ⼤規模⾔語モデルの概要と課題 ž ⼤規模⾔語モデル(LLM: Large Language Models)は⾃然⾔語処理(NLP) の分野で⽤いられる⼤量のテキストデータから学習した機械学習モデルのこと LLMが出来ること • ⾃然⾔語⽣成 • 質問応答 • 翻訳 • 要約 • ⽂書分類 • 要素認識 • 感情分析
9. ⼤規模⾔語モデルの概要と課題 ž ⼤規模⾔語モデル(LLM)の開発の歴史があり、各社様々なAIを開発 出典 https://arxiv.org/pdf/2104.04473.pdf enterprise LLM Google BERT OpenAI GPT NVIDIA Megatron-LM Microsoft Turning-NLG トランス フォーマーを 使った最初の モデル スケール測の発見 データを増やせば精度が上が る 学習に数億~数十億の投資
10. ⼤規模⾔語モデルの概要と課題 ž 特に最近注⽬されているChatGPTを詳細に⾒てみましょう。 ž 2022年11⽉30⽇リリース ž GPTモデルを使って作られたチャットアプリサー ビス ž リリース後2ヶ⽉で1億ユーザ突破 ž GPT 3 / 4 モデルの学習データは2022年1⽉ までのデータしかない ž 先⽇発表されたGPT 4 Turboは2023年4 ⽉までのデータがあるが、現在の情報が必要 な回答作成は難しい
11. ⼤規模⾔語モデルの概要と課題 ž ⼤規模⾔語モデル(LLM)の問題点はAIが学習した範囲内でしか回答出来な いということです。 ž そこで昨今では以下のようなニーズがあるかと存じます。 ・2022年1⽉以降の情報も回答してほしい… ・外部には公開していない社内の情報への質問にも正確に回答してほしい… →LLMを独⾃に強化する必要がある。
12. Prompt Engineering ž LLM に与えるプロンプト内に追加データを 含めたり、不⾜がある場合に外部ツールを 呼び出してデータを追加することで回答精 度を向上させる⽅法 Ex) ž 以前の情報をヒントにして回答 ž Web で検索して回答 Fine Tuning ž LLM ⾃体を追加学習させ、パラメータを調 整することで回答精度を向上させる⽅法 ž 膨⼤なコストとデータが必要 Ex) ž GPT3.5 に独⾃データを加えたモデルを作成 LLMを強化する⽅法 今回⽤いるのがPrompt Engineering の⼿法であるReActという概念になります。
13. ReActとは？ ž ReAct（REasoning and ACTing）は、⾔語モデル（LLM）を使⽤して 思考（推論）と⾏動を同時に⾏うための新しい枠組みです。 ž ReAct の主な⽬的は、⾃然⾔語推論と意思決定のタスクを統合することで、 より⾼度な⾔語理解と知識活⽤を可能にすることです。 出典 https://react-lm.github.io/
14. ReActとは？ 1. ⼈からの質問 2. Azure OpenAIへ質問を送る 3. OpenAIだけで回答を出すのが難しい 場合、Bing Searchを⽤いて検索を ⾏い情報を得る 4. Bing Searchから得た情報も含めて OpenAIへ送り、回答の要約を作成 5. ⼈へ回答を返す ž 実際に図にしてみると以下のイメージ。 思考（推論）と⾏動 を⾏っていることがわかります。
15. LangChainとは？ 特徴 1. ReActプロセスを簡単に構築出来る 2. LLMを他のデータソース(RDBなど)に接続出来る ž GPTなどのLLMを使ったアプリケーションを開発する際に使⽤出来る開発を効 率化するためのライブラリ
16. 本⽇のハンズオンのアーキテクチャ 1. リソースグループの作成 2. Azure OpenAIの作成 3. Bing Searchの作成 4. GitHubよりコードクローン 5. Gitpodにて動作確認 6. Azure Static Web Appsへデプロイ ž ハンズオン⼿順について
17. ハンズオン AOAI + LangChainでReActアプリケーション開発
18. 本⽇のハンズオンのアーキテクチャ 1. リソースグループの作成 2. Azure OpenAIの作成 3. Bing Searchの作成 4. GitHubよりコードクローン 5. Gitpodにて動作確認 6. Azure Static Web Appsへデプロイ ž ハンズオン⼿順について
19. リソースグループの作成 Azureポータルより、リソースグループを選 択後、リソースグループ名を⼊⼒し、作成 をクリック
20. 本⽇のハンズオンのアーキテクチャ 1. リソースグループの作成 2. Azure OpenAIの作成 3. Bing Searchの作成 4. GitHubよりコードクローン 5. Gitpodにて動作確認 6. Azure Static Web Appsへデプロイ ž ハンズオン⼿順について
21. Azure OpenAIの作成 Azure OpenAI の作成より、以下を設定 ・リソースグループを選択 ・名前を⼊⼒ ・価格レベル「Standard S0」を選択 後はデフォルトで作成ボタンをクリック
22. Azure OpenAIの作成 Azure OpenAI がデプロイされたら、リソー スへ移動し、Azure OpenAI Studioへ移 動する。 画⾯左側ペインのデプロイを選択し、新し いデプロイの作成をクリック モデルのデプロイの画⾯が表⽰されるので、 以下を設定し、作成 ・モデル：gpt-35-turbo ・デプロイ名：gpt-35-turbo
23. 本⽇のハンズオンのアーキテクチャ 1. リソースグループの作成 2. Azure OpenAIの作成 3. Bing Searchの作成 4. GitHubよりコードクローン 5. Gitpodにて動作確認 6. Azure Static Web Appsへデプロイ ž ハンズオン⼿順について
24. Bing Searchの作成 画⾯上部の検索窓へBing Searchと検 索後、Bingリソースを選択 追加→Bing Searchを選択してください。 以下を設定してください。 リソースグループ 名前 価格レベル：F1 確認と作成よりリソース作成してください。
25. 本⽇のハンズオンのアーキテクチャ 1. リソースグループの作成 2. Azure OpenAIの作成 3. Bing Searchの作成 4. GitHubよりコードクローン 5. Gitpodにて動作確認 6. Azure Static Web Appsへデプロイ ž ハンズオン⼿順について
26. GitHubよりコードをフォーク 次にGitHubへログインし、下記のURLへ アクセスしてください。 画⾯右上のForkを選択し、Create fork をクリックして、ご⾃⾝のアカウントへクロー ンを作成してください。 https://github.com/SatakeYusuke19920527/poc-react-app GitHubリポジトリ
27. Gitpodにて動作確認 次にGitpodへアクセスしてログインし、アカ ウントを作成してください。 New Workspaceを選択し、先ほどクロー ンしたpoc-react-appを選択してください。
28. Gitpodにて動作確認 電話でのコード認証を終えると、New Workspaceが作成出来る画⾯になりま す。 Continueをクリックすると、ブラウザ上で VSCodeが開き、buildと開発環境でrun された画⾯が表⽰されます。 3000portにアクセスするとアプリケーション の画⾯が表⽰されます。
29. Gitpodにて動作確認 画⾯左上のNewFileをクリックし、 .env.local というファイルを作成してください。 AZURE_OPENAI_API_KEY=Azure OpenAI ServiceのAPIキー AZURE_OPENAI_API_INSTANCE_NAME=Azure OpenAI Serviceのリソース名 AZURE_OPENAI_API_DEPLOYMENT_NAME=Azure OpenAI Studioのデプロイ名 AZURE_OPENAI_API_VERSION=2023-08-01-preview AZURE_OPENAI_API_ENDPOINT=Azure OpenAI Serviceのエンドポイント AZURE_BINGSEARCH_API_KEY=Bing SearchのAPIキー
30. Gitpodにて動作確認 ctrl + cで⼀旦開発環境を⽌め、以下の コマンドで再実⾏してください。 npm run dev もう⼀度ブラウザへアクセスして動作を確 かめてみてください。
31. フロントサイドの実装を確認 フロントサイドよりサーバサイドへ httpリクエストをする実装部分と なります。 axios.postの部分でhttpリクエス トをサーバサイドに送ります。 コードはNext.jsを使⽤しており、 ’api/langchain’と記載すると、 pages配下のapiディレクトリ内の コードにアクセスすることが出来ま す。 src/pages/index.tsx const getAgentData = async () => { setIsLoading(true); try { console.log('start’); const res = await axios.post('api/langchain', { message }); setContent(res.data.result.output); } catch (err) { console.log('🚀 ~ file: index.tsx:28 ~ getAgentData ~ err:', err); } setIsLoading(false); };
32. サーバサイドの実装を確認 ChatOpenAIクラスを使⽤して、モデル・ temperature(回答のばらつき)・topP( 選択肢の幅)を設定します。 次にtoolsを指定してmarketを⽇本とし 、BingSearchを使⽤します。 最後に initializeAgentExecutorWithOption sを使って、上記で定義したllmとtools を⽤いてReActの動作を実⾏出来るよ うになります。 src/pages/api/langchain.ts const llm = new ChatOpenAI({ modelName: "gpt-3.5-turbo", temperature: 0.9, topP: 1, }) const tools = [ new BingSerpAPI( process.env.AZURE_BINGSEARCH_API_KEY, { 'mkt': 'ja-JP' }, ), new Calculator() ] const executor = await initializeAgentExecutorWithOptions(tools,llm, { agentType: 'chat-conversational-react-description’, … } )
33. 本⽇のハンズオンのアーキテクチャ 1. リソースグループの作成 2. Azure OpenAIの作成 3. Bing Searchの作成 4. GitHubよりコードクローン 5. Gitpodにて動作確認 6. Azure Static Web Appsへデプロイ ž ハンズオン⼿順について
34. Azure Static Web Appsへデプロイ Azureの検索窓にstaticと⼊⼒すると、 【静的Webアプリ】と表⽰されます。 選択して、画⾯左上の作成から以下を 設定してください。 - リソースグループ - 名前 - プランの種類(Standard) - リージョン(East Asia)
35. Azure Static Web Appsへデプロイ 次にデプロイの詳細を設定していきます。 以下を設定してください。 - ソース(GitHub) - GitHubアカウント(先ほどのGitHubアカ ウント) - ビルドのプリセット(Next.js) - 出⼒先(.next) これで後はデフォルトの設定で作成してく ださい。
36. Azure Static Web Appsへデプロイ ⾃動でGitHubアクションのビルドとデプロ イが⾛ります。 問題なく成功していればOKです。
37. Azure Static Web Appsへデプロイ 最後に環境変数を設定すれば完了です。 Azureポータル内のStatic Web Appsの 画⾯から【構成】→【アプリケーション設 定】に.env.localで記載した環境変数を 追加
38. Azure Static Web Appsへデプロイ
39. 最後に ž いかがだったでしょうか。 最後まで辿りつけましたでしょうか。 ž 今回はAOAI + Bing Searchの構成にしましたが、Bing Searchの箇所を社内 独⾃のデータにすれば、独⾃情報を取り扱うことの出来るAIが作成出来ますし 、フロント部分をStatic Web AppsからAzure Communication Serviceに変 えれば電話対応をAI化することも可能です。 ž 様々な拡張性があるAzure OpenAI Serviceを是⾮みなさまも⾊々と触って みたい！と思っていただければ幸いです。
40. アンケートにご協⼒をお願いします
41. ご清聴頂きありがとうございました。