FIXER cloud.config Tech Blog

Power AppsとOpenAIコネクタでChatGPTもどきアプリを簡単に作ってみる

2023年03月14日 13時00分更新

文● 佐藤晴輝／FIXER

　本記事はFIXERが提供する「cloud.config Tech Blog」に掲載された「PowerAppsで OpenAIコネクターを使って ChatGPTもどきを作ってみる」を再編集したものです。

　こんにちは、さとはるです。

　今回はPower Appsのキャンバスアプリ上で質問に答えてくれる先生をAIを使って作成します。

　Power AppsにはOpenAIのコネクターが用意されているので、それを使うことで容易にAIを埋め込んだアプリを作ることができます。

流れ

1. OpenAIのAPIキーを取得する
2. キャンバスアプリを作成する
3. キャンバスアプリに必要なコネクターを追加する
4. キャンバスアプリからAIを呼び出す

Open AI のAPIキーを取得する

　OpneAIのサイトにログインし、APIキーを発行します。

　「Create new secret key」をクリックするとAPI keyが発行されます。

　このkeyは忘れずにメモっておきましょう。

キャンバスアプリを作成する

　いつもの通りキャンバスアプリを作成します。

　どちらでもいいですが、いつでも先生に質問できる方が嬉しいので「形式」を「電話」にしておきます。

　自動保存を有効にするために、作成直後のまっさらな状態でかまわないので保存ボタンを押しておきましょう。

キャンバスアプリに必要なコネクターを追加する

　今回のアプリでは、AIに繋ぐためのコネクタと翻訳のためのコネクタがあります。

OpenAI

　画面左の「データ」欄を開き、「＋データの追加」をクリックします。

　検索窓に「OpenAI」と入力して表示されるコネクターをクリックします。

　keyの入力を求められますが、先ほど取得したAPI keyそのままではなく、「Bearer 」という形で入力する必要があります。

Microsoft Translator

　OpenAIの時と同様「データ」欄を開き、「＋データの追加」をクリックします。

　検索窓に「Translator」と入力し「Microsoft Translator V2」をクリックします。

　subscription keyの入力を求められますが、空のまま「接続」をクリックします。

キャンバスアプリからAIを呼び出す

　ひとまずUIを配置します。今回は最も素朴な形で、テキストインプットを二つとボタンを一つ配置します。

　ボタンのOnSelectに以下のコードを挿入します。


// 変数初期化UpdateContext(
    {
        answer: Blank(),
        prompt: Blank()
    }
);
// OpenAIコネクタが英語にしか対応してないので質問を英語に翻訳
UpdateContext(
    {
        prompt: MicrosoftTranslatorV2.Translate(
            "en",
            "先生として「" & TextInput1.Text & "」という質問に回答しなさい"
        )
    }
);
// AIに実際に質問を投げる
UpdateContext(
    {
        res: 'OpenAI(IndependentPublisher)'.Completion(
            "text-davinci-002",
            prompt,
            {
                n: 1,
                best_of: 1,
                max_tokens: 500,
                temperature: 1,
                frequency_penalty: 0,
                presence_penalty: 0
            }
        )
    }
);
// 英語で回答が返ってくるので日本語に翻訳する
UpdateContext(
    {
        answer: MicrosoftTranslatorV2.Translate(
            "ja",
            First(res.choices.text).text
        )
    }
);

　ボタンを押すと「answer」というコンテキスト変数に結果が格納されるので、結果を表示する用のInputBoxのTextに設定しておきます。

　これでアプリは完成です。

試してみる