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

Slide 1

Slide 1 text

【超⼊⾨から応⽤まで】 Azure OpenAI Service × LangChain

Slide 2

Slide 2 text

会社概要会社名：株式会社エーピーコミュニケーションズ 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エンジニアを育成。

Slide 3

Slide 3 text

吉川俊甫 / Shunsuke Yoshikawa 株式会社エーピーコミュニケーションズ Experience • ⼤⼿物流企業にてITインフラの運⽤業務に従事 • オンプレミスからプライベートクラウド、パブリッククラウドまで幅広く対応 • 株式会社エーピーコミュニケーションズにて Azure / GitHubを活⽤したクラウドネイティブアプリケーション基盤構築に従事 • 2023/06 Microsoft MVP (Microsoft Azure) Expertise

Slide 4

Slide 4 text

apc-y-satake satyus 佐⽵祐亮 / Yusuke Satake 株式会社エーピーコミュニケーションズ Experience • 学習塾の起業 • ITコンサルティングファームにて仮想通貨取引システムの開発に従事 • SaaS 企業にてPM業務に従事 • プログラミングスクールの起業 • 株式会社エーピーコミュニケーションズにてDXコンサルタントに従事 Expertise 学習塾起業プログラミングスクール起業ソフトウェア開発 React / Next.js Node.js Microsoft Azure 数学ⅠA・ⅡB・ⅢC 物理

Slide 5

Slide 5 text

Agenda 本⽇の⽬標使⽤する概念の説明⼤規模⾔語モデル(LLM) LLMを強化する⽅法 ReActとは？ LangChainとは？ハンズオン AOAI + LangChainでReActアプリケーション開発最後に

Slide 6

Slide 6 text

本⽇の⽬標 Azure OpenAI ServiceとLangChainを⽤いてアプリケーションの実装をハンズオン形式で実施します。アプリケーション内で使⽤するReActという概念についても学習し、これから Azure OpenAI Serviceが⾃社内や個⼈開発の中で利活⽤出来そうだと感じれることがゴールです。⼤規模⾔語モデル(LLM)の説明から記載しているので、初学者の⽅もご安⼼してついてきていただければと存じます。各種質問についてはGoogle Spread Sheetを展開しておりますので、そこへ記載していただければと存じます。それでは始めましょう！

Slide 7

Slide 7 text

使⽤する概念の説明

Slide 8

Slide 8 text

⼤規模⾔語モデルの概要と課題⼤規模⾔語モデル(LLM: Large Language Models)は⾃然⾔語処理(NLP) の分野で⽤いられる⼤量のテキストデータから学習した機械学習モデルのこと LLMが出来ること • ⾃然⾔語⽣成 • 質問応答 • 翻訳 • 要約 • ⽂書分類 • 要素認識 • 感情分析

Slide 9

Slide 9 text

⼤規模⾔語モデルの概要と課題⼤規模⾔語モデル(LLM)の開発の歴史があり、各社様々なAIを開発出典 https://arxiv.org/pdf/2104.04473.pdf enterprise LLM Google BERT OpenAI GPT NVIDIA Megatron-LM Microsoft Turning-NLG トランスフォーマーを使った最初のモデルスケール測の発見データを増やせば精度が上がる学習に数億~数十億の投資

Slide 10

Slide 10 text

⼤規模⾔語モデルの概要と課題特に最近注⽬されているChatGPTを詳細に⾒てみましょう。 2022年11⽉30⽇リリース GPTモデルを使って作られたチャットアプリサービスリリース後2ヶ⽉で1億ユーザ突破 GPT 3 / 4 モデルの学習データは2022年1⽉までのデータしかない先⽇発表されたGPT 4 Turboは2023年4 ⽉までのデータがあるが、現在の情報が必要な回答作成は難しい

Slide 11

Slide 11 text

⼤規模⾔語モデルの概要と課題⼤規模⾔語モデル(LLM)の問題点はAIが学習した範囲内でしか回答出来ないということです。そこで昨今では以下のようなニーズがあるかと存じます。・2022年1⽉以降の情報も回答してほしい… ・外部には公開していない社内の情報への質問にも正確に回答してほしい… →LLMを独⾃に強化する必要がある。

Slide 12

Slide 12 text

Prompt Engineering LLM に与えるプロンプト内に追加データを含めたり、不⾜がある場合に外部ツールを呼び出してデータを追加することで回答精度を向上させる⽅法 Ex) 以前の情報をヒントにして回答 Web で検索して回答 Fine Tuning LLM ⾃体を追加学習させ、パラメータを調整することで回答精度を向上させる⽅法膨⼤なコストとデータが必要 Ex) GPT3.5 に独⾃データを加えたモデルを作成 LLMを強化する⽅法今回⽤いるのがPrompt Engineering の⼿法であるReActという概念になります。

Slide 13

Slide 13 text

ReActとは？ ReAct（REasoning and ACTing）は、⾔語モデル（LLM）を使⽤して思考（推論）と⾏動を同時に⾏うための新しい枠組みです。 ReAct の主な⽬的は、⾃然⾔語推論と意思決定のタスクを統合することで、より⾼度な⾔語理解と知識活⽤を可能にすることです。出典 https://react-lm.github.io/

Slide 14

Slide 14 text

ReActとは？ 1. ⼈からの質問 2. Azure OpenAIへ質問を送る 3. OpenAIだけで回答を出すのが難しい場合、Bing Searchを⽤いて検索を⾏い情報を得る 4. Bing Searchから得た情報も含めて OpenAIへ送り、回答の要約を作成 5. ⼈へ回答を返す実際に図にしてみると以下のイメージ。思考（推論）と⾏動を⾏っていることがわかります。

Slide 15

Slide 15 text

LangChainとは？特徴 1. ReActプロセスを簡単に構築出来る 2. LLMを他のデータソース(RDBなど)に接続出来る GPTなどのLLMを使ったアプリケーションを開発する際に使⽤出来る開発を効率化するためのライブラリ

Slide 16

Slide 16 text

本⽇のハンズオンのアーキテクチャ 1. リソースグループの作成 2. Azure OpenAIの作成 3. Bing Searchの作成 4. GitHubよりコードクローン 5. Gitpodにて動作確認 6. Azure Static Web Appsへデプロイハンズオン⼿順について

Slide 17

Slide 17 text

ハンズオン AOAI + LangChainでReActアプリケーション開発

Slide 18

Slide 18 text

Slide 19

Slide 19 text

リソースグループの作成 Azureポータルより、リソースグループを選択後、リソースグループ名を⼊⼒し、作成をクリック

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Azure OpenAIの作成 Azure OpenAI の作成より、以下を設定・リソースグループを選択・名前を⼊⼒・価格レベル「Standard S0」を選択後はデフォルトで作成ボタンをクリック

Slide 22

Slide 22 text

Azure OpenAIの作成 Azure OpenAI がデプロイされたら、リソースへ移動し、Azure OpenAI Studioへ移動する。画⾯左側ペインのデプロイを選択し、新しいデプロイの作成をクリックモデルのデプロイの画⾯が表⽰されるので、以下を設定し、作成・モデル：gpt-35-turbo ・デプロイ名：gpt-35-turbo

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Bing Searchの作成画⾯上部の検索窓へBing Searchと検索後、Bingリソースを選択追加→Bing Searchを選択してください。以下を設定してください。リソースグループ名前価格レベル：F1 確認と作成よりリソース作成してください。

Slide 25

Slide 25 text

Slide 26

Slide 26 text

GitHubよりコードをフォーク次にGitHubへログインし、下記のURLへアクセスしてください。画⾯右上のForkを選択し、Create fork をクリックして、ご⾃⾝のアカウントへクローンを作成してください。 https://github.com/SatakeYusuke19920527/poc-react-app GitHubリポジトリ

Slide 27

Slide 27 text

Gitpodにて動作確認次にGitpodへアクセスしてログインし、アカウントを作成してください。 New Workspaceを選択し、先ほどクローンしたpoc-react-appを選択してください。

Slide 28

Slide 28 text

Gitpodにて動作確認電話でのコード認証を終えると、New Workspaceが作成出来る画⾯になります。 Continueをクリックすると、ブラウザ上で VSCodeが開き、buildと開発環境でrun された画⾯が表⽰されます。 3000portにアクセスするとアプリケーションの画⾯が表⽰されます。

Slide 29

Slide 29 text

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キー

Slide 30

Slide 30 text

Gitpodにて動作確認 ctrl + cで⼀旦開発環境を⽌め、以下のコマンドで再実⾏してください。 npm run dev もう⼀度ブラウザへアクセスして動作を確かめてみてください。

Slide 31

Slide 31 text

フロントサイドの実装を確認フロントサイドよりサーバサイドへ 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); };

Slide 32

Slide 32 text

サーバサイドの実装を確認 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’, … } )

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Azure Static Web Appsへデプロイ Azureの検索窓にstaticと⼊⼒すると、【静的Webアプリ】と表⽰されます。選択して、画⾯左上の作成から以下を設定してください。 - リソースグループ - 名前 - プランの種類(Standard) - リージョン(East Asia)

Slide 35

Slide 35 text

Azure Static Web Appsへデプロイ次にデプロイの詳細を設定していきます。以下を設定してください。 - ソース(GitHub) - GitHubアカウント(先ほどのGitHubアカウント) - ビルドのプリセット(Next.js) - 出⼒先(.next) これで後はデフォルトの設定で作成してください。

Slide 36

Slide 36 text

Azure Static Web Appsへデプロイ⾃動でGitHubアクションのビルドとデプロイが⾛ります。問題なく成功していればOKです。

Slide 37

Slide 37 text

Azure Static Web Appsへデプロイ最後に環境変数を設定すれば完了です。 Azureポータル内のStatic Web Appsの画⾯から【構成】→【アプリケーション設定】に.env.localで記載した環境変数を追加

Slide 38

Slide 38 text

Azure Static Web Appsへデプロイ

Slide 39

Slide 39 text

最後にいかがだったでしょうか。最後まで辿りつけましたでしょうか。今回はAOAI + Bing Searchの構成にしましたが、Bing Searchの箇所を社内独⾃のデータにすれば、独⾃情報を取り扱うことの出来るAIが作成出来ますし、フロント部分をStatic Web AppsからAzure Communication Serviceに変えれば電話対応をAI化することも可能です。様々な拡張性があるAzure OpenAI Serviceを是⾮みなさまも⾊々と触ってみたい！と思っていただければ幸いです。