1. システムとオフィスの融合
  2. media
  3. Power Apps Power Platform Open AI
  4. 【Power Platform】PowerAppsキャンバスアプリでAzure OpenAIのChatGPTを呼び出してみた

QESブログ

【Power Platform】PowerAppsキャンバスアプリでAzure OpenAIのChatGPTを呼び出してみた

  • LINEで送る
  • このエントリーをはてなブックマークに追加

はじめに

今回はPowerAppsで質問に答えてくれるキャンバスアプリを作成してみたいと思います。
Azure OpenAIのChatGPTを問い合わせ先として、回答をキャンバスアプリに表示する構成を試します。

※Azure OpenAIの環境作成は本稿では割愛します。
 環境作成後にエンドポイントとAPIキーが払い出されるのでこちらをご準備ください。

Azure OpenAIを利用することでMicrosoftクラウド上で完結したセキュアな環境を構築することができ、
権限管理や接続制限、チャット入出力の保存といった様々な対応が可能となります。

また、Azure OpenAIで提供されたデータについてはOpenAI社と切り離され、
Microsoft社のモデルトレーニングやサービス改善にも利用されないことが明言されています。

■Data, privacy, and security for Azure OpenAI Service
https://learn.microsoft.com/en-us/legal/cognitive-services/openai/data-privacy

カスタムコネクタの作成

OpenAI社が提供しているChatGPTは予め用意されているコネクタを利用することで容易に呼び出しが可能ですが、
Azure OpenAI経由で接続する場合はカスタムコネクタを作成する必要があります。

カスタムコネクタのページにて、「一から作成」を選択します。

a422_01.jpg


続く画面でコネクタの名前を設定します。

a422_02.jpg


全般情報の画面にて、スキーマが"HTTPS"であることを確認し、ホスト欄にエンドポイントの情報を入力します。
※エンドポイントは "*****.openai.azure.com" の形式 

a422_04.jpg


セキュリティの画面にて、下記の情報を入力します。
 認証タイプ:API キー  
 パラメーターのラベル:APIキー  
 パラメーター名:api-key  
 パラメーターの場所:ヘッダー

a422_05.jpg


定義の画面にて、新しいアクションを作成します。
概要、説明、操作IDに任意の値を設定します。

a422_06.jpg


要求欄の"サンプルからのインポート"を押下します。
下記のように入力し、"インポート"を押下します。
 動詞:POST  
 URL:https://*****.openai.azure.com/openai/deployments/*****/chat/completions?api-version=2024-02-15-preview
 ヘッダー:Content-type application/json
 本文:{ "messages": [ { "role": "system", "content": "You are an AI assistant that helps people find information." } ],"temperature": 0.7, "top_p": 0.95, "frequency_penalty": 0, "presence_penalty": 0, "max_tokens": 800, "stop": null}
※URLの部分については下記をご参考ください。
■Azure OpenAI Service の REST API リファレンス
https://learn.microsoft.com/ja-jp/azure/ai-services/openai/reference#completions


a422_07.jpg


ここまで設定したら"コネクタの作成"を押下し、カスタムコネクタを保存します。

a422_09.jpg


再度カスタムコネクタのテスト画面に移り、"新しい接続"を押下します。

a422_10.jpg


APIキーを入力し、接続を作成します。

a422_11.jpg


再度カスタムコネクタのテスト画面に戻り、下記の設定を行い、"テスト操作"を押下します。
 api-version: 2024-02-15-preview 
 Content-type:application/json
 role:user  
 content:任意の質問

a422_12.jpg

a422_13.jpg


応答が正常に返ってくることを確認します。 ボディをスクロールすると質問に対する回答が返ってきていますね。

a422_14.jpg


キャンバスアプリの作成

続いて先ほどのカスタムコネクタをキャンバスアプリに組み込みます。
キャンバスアプリの作成画面にて、"データの追加"から先ほど作成したカスタムコネクタを選択します。

a422_15.jpg


次に質問の入力、回答の出力が行えるように下記のコンポーネントを追加します。
 テキスト入力:質問の入力用領域  
 ボタン:質問の送信用ボタン  
 テキストラベル:回答の出力用領域

a422_16.jpg


ボタンのOnSelectに下記のコードを記載します。
//Azure OpenAIに質問を投げて回答をセット
Set(ans,
    AOAIConnect.AOAIConnectAction(
        {
            'api-version':"2024-02-15-preview",
            'Content-type':"application/json",
            messages:{
                role:"user",
                content:TextInput1.Text
            }
        }
    )
);

次に、テキストラベルに下記のコードを記載します。
Text(First(ans.choices).message.content)

アプリを保存して動作を確認してみましょう。

a422_17.jpg

質問に応じた回答が表示されることを確認出来ましたね。

まとめ

今回はAzure OpenAIを利用するための第一歩として、カスタムコネクタの作成とキャンバスアプリへ組み込む方法を紹介しました。
企業向けにChatGPTを利用するにあたり、セキュリティ面での懸念を解消できる点からAzure OpenAIでの構成がおすすめ出来ると思います。

QUICK E-Solutionsでは、「AIチャットボット構築サービス」をはじめとして、各AIサービスを利用したシステム導入のお手伝いをしております。それ以外でも QESでは様々なアプリケーションの開発・導入を行っております。提供するサービス・ソリューションにつきましては こちら に掲載しております。
システム開発・構築でお困りの問題や弊社が提供するサービス・ソリューションにご興味を抱かれましたら、是非一度 お問い合わせ ください。

※このブログで参照されている、Microsoft、PowerApps、Azure OpenAI、
 その他のマイクロソフト製品およびサービスは、米国およびその他の国におけるマイクロソフトの商標または登録商標です。
※その他の会社名、製品名は各社の登録商標または商標です。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

お気軽にお問い合わせください。

ページのトップへ