PowerAppsでAzureOpenAIChatアプリを作ろう.pptx

2023.08.25
Speaker :
出戻りガツオ🐟
（@DemodoriGatsuo）
ギークフジワラ
（@geekfujiwara）
Power Appsで
Azure OpenAI Chatアプリを
作ろう！
GATSUO
and
GEEK !!
🐟🐟🐟

Profile
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
2
出戻りガツオ🐟
Shogo Shindo
@DemodoriGatsuo
https://note.com/bonito_vba_gas
魁
!!
鰹
塾
塾
長
🐟
- Job ハード系市民開発者
- Career ADをすぐ退職・・給与計算下請け、
病院本部、ERPパッケージベンダー
今は流浪の民
- Skill Power Platform
- Excel VBA, Google Apps Script, Python
- RPA (WinAutomation – Power Automate for desktop)
- Power Platform
Power Apps
Power Automate
Power BI

3
初級 >>>>>>>>>>>>>>>>中級>>>>>>>>>>上級>>>>>>>>>マニアック
藤原弘道 | ギークフジワラ
Hiromichi Fujiwara
ブログ | geekfujiwara.com
ギークフジワラ
日本マイクロソフト株式会社
Low-code Technical Lead
誰でもアプリを作れる世の中になるように
Power Platform に関する配信を行っています。
Twitter | @geekfujiwara
Udemy
体系的に学び、ゼロから業務で使えるように！
で検索！
🔍 ギークフジワラ
さらに最新情報をキャッチアップ！
時々マニアックな内容も。
技術的な最新情報やクイズを出題したりしています。
テキストの方がわかりやすいコンテンツなどを中心に掲載。
にも対応！

本日のテーマ！
AI Builderについて
AI Builderは、コーティングやデータサイエンスの専門知識が無くても、
簡単にAIの強力な機能が使える機能
AI Builderの機能の例
• フォーム処理：フォームのスキャンおよび処理によるデータ入力の自動化
• オブジェクト検出：画像内のオブジェクトを検出して分類する
• テキスト認識：画像内のテキストを抽出して分類する
• 予測：歴史的なデータから未来の結果を予測する
• 分類：データを分類して、ビジネスプロセスを自動化する
August 25, 2023
Copyright (c) 2023,
4
本日（2023.08.25時点）取り扱う内容は、Power Appsでお手軽に
AI BuilderでAzure OpenAI Chatアプリを作ること！

AI BuilderでAzure OpenAIが使えるということ
AIとText Chatを実施する手段は増えていますが、自作するうえ
では、最も簡単な手段であると個人的には感じています。
August 25, 2023
Copyright (c) 2023,
5
1. リソースの
申請
Power AppsかPower Automateで設定
AI Builderの場合
• Power Apps
• Power Automateを介して
Power Virtual Agents
• その他
Azure OpenAIの場合
• Teamsアプリ
• Power Virtual Agents
• その他
2. デプロイ
3. アプリに
実装
※ どの媒体で実現するかでこのステップの労力は
大きく変わります
※ 使用できるモデルなど柔軟な選択は上記と比較し
てできなくなります

具体的なメリット
AI Builderにおける「GPTでテキストを作成する」機能は、
Azure OpenAIの技術、下記の点でのメリットが受けられる
August 25, 2023
Copyright (c) 2023,
6
ChatGPT Azure OpenAI
入力した内容が学習に利用される入力した内容が学習に利用されない
情報漏洩リスクを防ぐことが出来るメリットがある
※ Azure内で作成できるChatGPTとは比較していません

使い方
Power Apps、Power Automateともに非常に簡単です
※現在はあくまでプレビュー機能、使えるリージョンが限定されています
August 25, 2023
Copyright (c) 2023,
7
Power Apps Power Automate
1. Power Apps Studioで「データの追
加」
2. `GPTでテキストを作成する`とい
う関数でGPTを利用可能！
フローに組み込み
1. Power Automateで「GPTでテキスト
を作成する」アクションを経由
2. Power Appsから文字列を
渡し、結果を返すことに
よって実行が可能
'GPT でテキストを作成する
'.Predict(InstructionsInput1.Text,{Pa
rameters:})

Parameterについて
現在はプレビュー段階。登場が待ち遠しい状態です。
本日は作りながら、使いこなすポイントを学びましょう！
August 25, 2023
Copyright (c) 2023,
8
Parameter 日本語訳コメント
max_tokens 最大応答
• 応答の文字数
• 1 つのトークンは、一般的な英語テキストの約 4 文字
• 最大 4000 トークン
temperature 温度
• ランダム性
• この値が高いと、より創造的、低いと決定的なレスポン
スになる
top_p 上位 P
• 確率が高いトークンと低いトークンの両方から選択
• 温度または上位 P の両方ではなくどちらかを調整するこ
とが推奨されている
stop シーケンスの停止 • モデルの応答を目的のポイントで終了する
frequency_penalty 頻度のペナルティ
• 応答でまったく同じテキストが繰り返される可能
性を低下させる
presence_penalty プレゼンスペナルティ • 応答で新しいトピックを紹介する可能性を高める

作ってみよう – 大枠
コンテナというコントロールを使いながら進めます。
August 25, 2023
Copyright (c) 2023,
9
1. 水平コンテナーというコントロールを使い、画面の横幅を 2 : 8に分割する
• 2の部分がサイドバー、8の部分がメインセクション
2. サイドバー(2)の部分に、垂直コンテナーを挿入する
3. メインセクション(8)の部分に、垂直コンテナーを挿入する
• このメインセクションに、3つ水平コンテナーを挿入する。大きさは高さを8等分する
• 1つ目（最上部）のコンテナーはヘッダー、1/8の高さ
• 2つ目（真ん中）のコンテナーはチャット画面、6/8の高さ
• 3つ目（最下部）のコンテナーはフッター、1/8の高さ
4. メインセクションをアレンジする
5. サイドバーをアレンジする

作ってみよう – イメージ
August 25, 2023
Copyright (c) 2023,
10
■ 色について
完全に好みで構いませ
ん！
ハンズオンでは、
以下の色を使います。
サイドバー：黒
ヘッダー：
- 塗りつぶし #1072BC
- テキスト #FA9B70
フッター：濃い灰色
#343541
文字色：白か黒

作ってみよう – 1. 横幅を分割する
August 25, 2023
Copyright (c) 2023,
11
※イメージは16:9になっていませんのでご注意ください
横幅全体は下記で表現します
• App.Width
• Parent.Width
サイドバー
2
メインセクション
8
App.Width * 0.2 App.Width * 0.8

作ってみよう– 2. サイドバーに垂直コンテナーを挿入する
August 25, 2023
Copyright (c) 2023,
12
垂直コンテナー
サイドバーに
垂直コンテナーを挿入する
メインセクション

作ってみよう– 3. メインセクションに水平コンテナーを3つ挿入する
August 25, 2023
Copyright (c) 2023,
13
App.Height( Parent.Height ) / 8
ヘッダー
1/8
チャット画面
6/8
フッター
1/8
App.Height( Parent.Height ) / 8 * 6
App.Height( Parent.Height ) / 8

作ってみよう– 4. メインセクションをアレンジする – 1. ヘッダー
August 25, 2023
Copyright (c) 2023,
14
コンテナの
塗りつぶしを
設定 Fill
ColorValue("#1072BC")
テキストラベルを挿入
1. 高さ（Height）を Parent.Height
2. 横幅（Width）を Parent.Width
3. 文字列（Text）はお好みで
4. 文字サイズはお好みですが、例は 40
5. テキストのアラインメントは左右中央揃え
垂直方向の配置も中央
6. テキストのカラーは、例はColorValue("#FA9B70")
7. 表示モードは「ビュー」にしておくと○

作ってみよう– 4. メインセクションをアレンジする – 2. メインセクション
August 25, 2023
Copyright (c) 2023,
15
2. BodyとImageを消す
3. TemplateSizeプロパティを下記の通り設定
Min(100, Self.Height)
4. 高さ（伸縮可能）をオン
5. 最小高さは 0 にする
6. テキストラベル Body1は
・高さの自動調整オン
・折り返すオン
1. 「高さが伸縮可能な
ギャラリー」を挿入

作ってみよう– 4.メインセクションをアレンジする – 3. フッター
August 25, 2023
Copyright (c) 2023,
16
1. コンテナーは塗りつぶしを■#343541にする
2. テキスト入力（TextInput）を挿入
3. アイコン（送信）を挿入

作ってみよう– 4.メインセクションをアレンジする – 3. フッター
August 25, 2023
Copyright (c) 2023,
17
フッターに絞って解説
1. コンテナーのパディング左を40に。
1.によって40pointの余白
2. テキストインプットは下記のプロパティに変更
既定なし
ヒントのテキスト Send a message
クリアボタン、
スペルチェックの有効化
オン
モード複数行
配置(垂直方向) 中央揃え
Width Parent.Width / 10 * 8.5
Height Parent.Height / 3 * 2
3. 送信アイコンは
・幅を伸縮可能にして中央揃え！

作ってみよう – 5. サイドバーコンテナーとボタン
August 25, 2023
Copyright (c) 2023,
18
サイドバー
P11で垂直コンテナーを挿入しました。
-----
1. 上記の垂直コンテナーのパディング上を30に。
2. 塗りつぶしを#202123に
3. ボタンを挿入
4. プロパティは右記を参照👉
+ New Chat

作ってみよう – 5. サイドバーアイコンとギャラリー
August 25, 2023
Copyright (c) 2023,
19
5. アイコン[ ごみ箱 ]を挿入
6. 中央揃えにして、
高さ(伸縮可能)をオフ、
パディングを各方位に20設けることがポイント！
※サイズはお好みですが、一旦84にしています！
7. 空の垂直ギャラリーを挿入します
※主催の動きを見ながら進めましょう
• 最小幅を 0 にします
• ギャラリーの中に、
アイコン[ メッセージ ] とテキストラベルを
挿入します！

作ってみよう – ここでデータを追加 !!
1. Office 365ユーザー
2. AI Builderの`GPTでテキストを作成する`モデル
1. 反映されない場合はPower Automateで対処
August 25, 2023
Copyright (c) 2023,
20
反映されていない場合は
Power Automateで対応

仕上げ – 1. GPTを起動する関数
August 25, 2023
Copyright (c) 2023,
21
If(TextInput1.Text <> "",
UpdateContext({_prompt:TextInput1.Text});
Collect(colChat,{_img:_photo,_text:TextInput1.Text});
//// Power Apps
Collect(colChat,{_img:ChatGPT,_text:'GPT でテキストを作成する'.Predict(_prompt).Text;});
//// Power Automate
Collect(colChat,{_img:ChatGPT,_text:GPTbyAIBuilder.Run(TextInput1.Text).result});
Reset(TextInput1);
);
送信アイコンのOnSelect

仕上げ – 2. 現在の対話を記録する関数
August 25, 2023
Copyright (c) 2023,
22
Collect(colHistory,{col:colChat});
Clear(colChat);
1. 現在のコレクションを、履歴用のコレクションに格納
2. 現在のコレクションをクリアしている
+ New ChatボタンのOnSelect

仕上げ – 3. 過去の履歴を呼び戻す関数
August 25, 2023
Copyright (c) 2023,
23
ClearCollect(colChat,ThisItem.col)
1. 選択したコレクションを、colChatというチャット用のコレクションに
上書きしている
GalleyのOnSelect

仕上げ – 4. 履歴を全て削除する関数
August 25, 2023
Copyright (c) 2023,
24
Clear(colHistory);
1. 履歴用のコレクションをクリアする関数
IconのOnSelect

ギャラリー – 過去のチャット履歴
August 25, 2023
Copyright (c) 2023,
25
データソースは、コレクション: colHistory
テキストラベルの値は First(ThisItem.col)._text
colHistoryのOnSelectは「ClearCollect(colChat,ThisItem.col)」とする

ギャラリー –チャット画面
August 25, 2023
Copyright (c) 2023,
26
データソースは、コレクション: colChat
テキストラベルの値は First(ThisItem.col)._text
・画像（Image）は ThisItem._imgで設定
・テキストラベル（Label）は ThisItem._textで設定
値のほとんどが関数で設定されます。
伸縮可能なギャラリーで、幅が伸びるようにすることが大切です！

質問 Welcome !!
August 25, 2023
Copyright (c) 2023,
28
Guest!! ギークフジワラさんに聞いてみよう！！
Teamsチャットで是非どうぞ！

出戻りガツオ🐟からの質問
August 25, 2023
Copyright (c) 2023,
29
皆様の質問を優先しますが、出るまでは私の質問から！
1. ただ文字渡すだけで上手く使える？
• Azure OpenAIだとパラメータの設定など面倒、AI Builderの場合どうすればいいですか?🧐
2. 特定の役割に対して使うには？？
• 何でもありなChat Botではなく、自社のニーズに合わせたBotにする設定はできる?🧐
3. レスポンシブレイアウトにするためには！？
• モバイルでも使いやすいようにするためには、どうすればいいでしょうか?🧐

最後に！
本日はありがとうございました！
プレビュー機能で登場が待ち遠しいですが
AI BuilderによってGPTが使いやすくなる未来はそう遠くないで
すね！
市民開発者から変革盛り上げていきましょう🐟🔥
August 25, 2023
Copyright (c) 2023,
30
参加者の皆様！
ギークさん！
ありがとうございました！！

PowerAppsでAzureOpenAIChatアプリを作ろう.pptx

More Related Content

Similar to PowerAppsでAzureOpenAIChatアプリを作ろう.pptx

More from Demodori Gatsuo - A Certain Citizen Developers Association

Recently uploaded

PowerAppsでAzureOpenAIChatアプリを作ろう.pptx

Editor's Notes