PowerAppsで OpenAIコネクターを使って ChatGPTもどきを作ってみる | cloud.config Tech Blog

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

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

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

流れ

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

Open AI のAPIキーを取得する

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

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

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

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

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

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

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

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

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

OpenAI

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

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

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

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
        )
    }
);