はじめに
皆さんご存じの通り、ChatGPT では、例えば、以下のような感じで、プログラムのコードについて質問をすると、装飾付きの回答がもらえるため、可読性が上がります。
以下の記事で紹介したような、入口の部分を Power Apps にして、Azure OpenAI Service を介して ChatGPT を利用して同様の質問をした場合、以下のように表示されます。
こちらは、Power Apps のラベルコントロールでは、マークダウンの回答を上手く表示できないためと考えます。
そのため、代替案を探していたところ、以下のような素敵なコントロールが pcf ギャラリーにございました。
こちらを使用したところ、以下のような感じになり、コード部分の表示が改善されました。
そのため、今回は、こちらを利用して、Power Apps を入口とした場合における、ChatGPT からの回答のコード部分の表示を改善する方法について紹介します。
MarkDown Viewer のインポート
こちらからソリューションをダウンロード可能です。
利用したい環境にソリューションをインポートします。
環境の設定で、キャンバス アプリの Power Apps Component Framework をオンにします。
Power Apps 側の実装
こちらのコンポーネントを利用したいアプリにて、以下の方法でコンポーネントを追加します。
以下の箇所から追加可能です。
以下の記事で紹介したように、Power Apps でチャットライクなエクスペリエンスを作成する場合において、こちらのコンポーネントを利用する方法を補足します。
まず、上記で紹介したように、元々利用していたラベルコントロールはそのままにしておき、非表示にします。
ラベルを非表示にすることで、MarkDown コンポーネント側の高さが自動調整されない場合は、MarkDown コンポーネント側が上に来るようにして、ラベルの表示をオンにして、ラベルの文字の色を透明にするなどして見えなくするようにしてみてください
その上で、[Content]プロパティを ChatGPT からの応答に設定し、[Width]プロパティや[Height]プロパティをラベルと同じにします。
ラベルコントロールは、[AutoHeight]プロパティの設定が可能なため、返答の文字数に応じてラベルの高さが自動で調整されますが、追加したコンポーネントにはそのプロパティがないため、ラベルコントロールのサイズと同じになるようにしています。
元々のアプリにコンポーネントを追加し、上記の通り、少し変更を加えるだけで、コード付き回答の見た目が改善しました。
まとめ
今回は、Power Apps を入口とした場合における、ChatGPT からの回答のコード部分の表示を改善する方法について紹介しました。
Power Apps を入口にすることで、独自の追加機能の実装含め、構築コストや期間の削減、メンテナンスの容易性等のメリットを享受しつつ、ChatGPT のチャットエクスペリエンスの良さを出来る限り取り入れるという意味で、少しでも参考になれば幸いです。