見出し画像
Photo by ia19200102

ChatGPTとPower Platformを組み合わせてアプリを作ってみました

AvaKansai

こんにちは、アバナードの大北です。

かなり出遅れた感がありますが、ChatGPTを使ってみたので共有します。
※この記事で扱っているものは、厳密に言うとChatGPTと同じGPT-3.5をベースとしたものです。

とはいえ、普通にChatGPTを使うだけであれば面白くないので、Power Platformと組み合わせて使ってみました。
やりたいこととしては、Power Appsの画面で入力した内容をもとにChatGPTに問い合わせて、結果を画面に表示するといった感じです。

さっそくやっていきましょう(^^)/
まずは、構築の流れから説明していきます。ザクっというと以下の4つだけです。

  • OpenAIでアカウントを作成する

  • アカウント作成後にAPIキーを取得する

  • Power Apps画面の作成

  • Power Automateフローの作成

では、実際の手順を説明していきます。

①OpemAIでアカウントの作成する

以下のURLに接続して、サインアップしてください。
＜URL＞
https://beta.openai.com/signup

OpenAIのサイトイメージ

②アカウント作成後にAPIキーを取得する


ログインし、画面右上の「Personal」をクリックします。

ログイン後のイメージ

メニューが表示させるので、「View API Key」をクリックします。
遷移先の画面でAPIキーを払い出し、キー情報をメモします。

③Power Apps画面の作成

待ちに待ったPower Appsでの画面作成ですｗ
画面に以下のアイテムを追加します。
入力テキスト：ChatGPTに質問したい内容を入力する。　
ボタン　　：Power Automateを呼び出す。引数は入力テキストの内容。
ラベル　　：検索結果を表示する。

Power Appsの画面

次にボタンをクリックした際の動作を設定していきます。
ボタンのOnSelectプロパティに以下を入力します。
UpdateContext({localResponse:PowerAppV2_flow.Run(TextInput1.Text)}) 
※上記の関数で、コンテキスト変数にPower Automateからの戻り値を設定しています。

ボタンのOnSelectプロパティの設定

ラベルのTextプロパティに以下を入力します。
localResponse.result
※コンテキスト変数に格納された値をセットしています。

ラベルのTextプロパティの設定

④Power Automateフローの作成

では、Power Automateフローを作成していきます。
フロー全体のイメージはこんな感じです。

フローの全体像

Power Appsからフローの追加をクリックし、フローを作成していきます。

Power Apps画面でのフロー追加

トリガーはPowerApps(V2)を選択し、Power Appsからの引数を受け取れるようにします。
※デフォルトのトリガーだと値を受け取れないので、デフォルトのトリガーを削除したうえで。PowerApps(V2)を選択してください。

PowerApps(V2)のイメージ

その後、データ操作の「作成」を4つ追加します。
（1つ目　認証で使うキー情報）
名前：SECRET KEY
入力：②で取得したAPIキーを設定

（2つ目　AIのモデル名）
名前：MODEL NAME
入力：text-davinci-003

（3つ目　ChatGPTからの回答の振れ幅）
名前：MODEL TEMP
入力：0.3

（4つ目　回答の文字数）
名前：MAX TOKENS
入力：2048

詳細な内容を確認したい方はOpenAIの以下のサイトを確認してください。
https://platform.openai.com/docs/api-reference/completions/create

データ操作「作成」の設定

あと、少しで完成なので、もうひと頑張りです。
HTTPアクションを追加していきます。設定内容は以下の通りです。

方法：POST
URI：https://api.openai.com/v1/completions
ヘッダー：
　　　　「Content-Type」に「application/json」を設定
　　　　「Authorization」に「Bearer @{outputs('SECRET_KEY')}」
本文：
{
"model": "@{outputs('MODEL_NAME')}",
"prompt": "@{triggerBody()['text']}",
"temperature": @{outputs('MODEL_TEMP')},
"max_tokens": @{outputs('MAX_TOKENS')}
}

HTTPの設定

最後に、Power Appsに結果を返却するためのアクション「PowerAppまたはFlowに応答する」を追加します。
以下の内容で設定します。
戻り値の名前：result
戻り値：trim(body('HTTP')?['choices'][0]?['text'])

「PowerAppまたはFlowに応答する」の設定

これで設定が完了したので、動作確認していきます。
「パンの作り方」を教えてもらいましょう(^^)/
「パンの作り方を教えて」と入力し、質問ボタンをクリックします。

質問前の画面

ちょっと時間がかかりますが、結果が返ってきました。

質問後の画面

ということで、最近？話題になっていたChatGPTとPower Apps／Power Automateを組み合わせたアプリの紹介でした。

最後まで読んでいただきありがとうございました。

いいなと思ったら応援しよう！