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,
魁!!鰹塾. All rights reserved
4
本日(2023.08.25時点)取り扱う内容は、Power Appsでお手軽に
AI BuilderでAzure OpenAI Chatアプリを作ること!
AI BuilderでAzure OpenAIが使えるということ
AIとText Chatを実施する手段は増えていますが、自作するうえ
では、最も簡単な手段であると個人的には感じています。
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
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,
魁!!鰹塾. All rights reserved
6
ChatGPT Azure OpenAI
入力した内容が学習に利用される 入力した内容が学習に利用されない
情報漏洩リスクを防ぐことが出来るメリットがある
※ Azure内で作成できるChatGPTとは比較していません
使い方
Power Apps、Power Automateともに非常に簡単です
※現在はあくまでプレビュー機能、使えるリージョンが限定されています
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
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,
魁!!鰹塾. All rights reserved
8
Parameter 日本語訳 コメント
max_tokens 最大応答
• 応答の文字数
• 1 つのトークンは、一般的な英語テキストの約 4 文字
• 最大 4000 トークン
temperature 温度
• ランダム性
• この値が高いと、より創造的、低いと決定的なレスポン
スになる
top_p 上位 P
• 確率が高いトークンと低いトークンの両方から選択
• 温度または上位 P の両方ではなくどちらかを調整するこ
とが推奨されている
stop シーケンスの停止 • モデルの応答を目的のポイントで終了する
frequency_penalty 頻度のペナルティ
• 応答でまったく同じテキストが繰り返される可能
性を低下させる
presence_penalty プレゼンス ペナルティ • 応答で新しいトピックを紹介する可能性を高める
作ってみよう – 大枠
コンテナというコントロールを使いながら進めます。
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
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,
魁!!鰹塾. All rights reserved
10
■ 色について
完全に好みで構いませ
ん!
ハンズオンでは、
以下の色を使います。
サイドバー:黒
ヘッダー:
- 塗りつぶし #1072BC
- テキスト #FA9B70
フッター:濃い灰色
#343541
文字色:白か黒
作ってみよう – 1. 横幅を分割する
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
11
※イメージは16:9になっていませんのでご注意ください
横幅全体は下記で表現します
• App.Width
• Parent.Width
サイドバー
2
メインセクション
8
App.Width * 0.2 App.Width * 0.8
作ってみよう– 2. サイドバーに垂直コンテナーを挿入する
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
12
垂直コンテナー
※イメージは16:9になっていませんのでご注意ください
サイドバーに
垂直コンテナーを挿入する
メインセクション
作ってみよう– 3. メインセクションに水平コンテナーを3つ挿入する
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
13
※イメージは16:9になっていませんのでご注意ください
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,
魁!!鰹塾. All rights reserved
14
※イメージは16:9になっていませんのでご注意ください
コンテナの
塗りつぶしを
設定 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,
魁!!鰹塾. All rights reserved
15
※イメージは16:9になっていませんのでご注意ください
2. BodyとImageを消す
3. TemplateSizeプロパティを下記の通り設定
Min(100, Self.Height)
4. 高さ(伸縮可能)をオン
5. 最小高さは 0 にする
6. テキストラベル Body1は
・ 高さの自動調整 オン
・ 折り返す オン
1. 「高さが伸縮可能な
ギャラリー」を挿入
作ってみよう– 4.メインセクションをアレンジする – 3. フッター
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
16
※イメージは16:9になっていませんのでご注意ください
1. コンテナーは塗りつぶしを■#343541にする
2. テキスト入力(TextInput)を挿入
3. アイコン(送信)を挿入
作ってみよう– 4.メインセクションをアレンジする – 3. フッター
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
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,
魁!!鰹塾. All rights reserved
18
※イメージは16:9になっていませんのでご注意ください
サイドバー
P11で垂直コンテナーを挿入しました。
-----
1. 上記の垂直コンテナーのパディング 上を30に。
2. 塗りつぶしを#202123に
3. ボタンを挿入
4. プロパティは右記を参照👉
+ New Chat
作ってみよう – 5. サイドバー アイコンとギャラリー
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
19
※イメージは16:9になっていませんのでご注意ください
5. アイコン[ ごみ箱 ]を挿入
6. 中央揃えにして、
高さ(伸縮可能)をオフ、
パディングを各方位に20設けることがポイント!
※サイズはお好みですが、一旦84にしています!
7. 空の垂直ギャラリーを挿入します
※主催の動きを見ながら進めましょう
• 最小幅を 0 にします
• ギャラリーの中に、
アイコン[ メッセージ ] と テキストラベルを
挿入します!
作ってみよう – ここでデータを追加 !!
1. Office 365ユーザー
2. AI Builderの`GPTでテキストを作成する`モデル
1. 反映されない場合はPower Automateで対処
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
20
反映されていない場合は
Power Automateで対応
仕上げ – 1. GPTを起動する関数
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
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,
魁!!鰹塾. All rights reserved
22
Collect(colHistory,{col:colChat});
Clear(colChat);
1. 現在のコレクションを、履歴用のコレクションに格納
2. 現在のコレクションをクリアしている
+ New ChatボタンのOnSelect
仕上げ – 3. 過去の履歴を呼び戻す関数
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
23
ClearCollect(colChat,ThisItem.col)
1. 選択したコレクションを、colChatというチャット用のコレクションに
上書きしている
GalleyのOnSelect
仕上げ – 4. 履歴を全て削除する関数
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
24
Clear(colHistory);
1. 履歴用のコレクションをクリアする関数
IconのOnSelect
ギャラリー – 過去のチャット履歴
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
25
データソースは、コレクション: colHistory
テキストラベルの値は First(ThisItem.col)._text
colHistoryのOnSelectは「ClearCollect(colChat,ThisItem.col)」とする
ギャラリー –チャット画面
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
26
データソースは、コレクション: colChat
テキストラベルの値は First(ThisItem.col)._text
・ 画像(Image)は ThisItem._imgで設定
・ テキストラベル(Label)は ThisItem._textで設定
値のほとんどが関数で設定されます。
伸縮可能なギャラリーで、幅が伸びるようにすることが大切です!
ギークフジワ
ラ先生の
ターン!
使いこなすポイントを聞こう🧐
27 Copyright (c) 2023, 魁!!鰹塾. All rights reserved August 25, 2023
質問 Welcome !!
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
28
Guest!! ギークフジワラさんに聞いてみよう!!
Teamsチャットで是非どうぞ!
出戻りガツオ🐟からの質問
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
29
皆様の質問を優先しますが、出るまでは私の質問から!
1. ただ文字渡すだけで上手く使える?
• Azure OpenAIだとパラメータの設定など面倒、AI Builderの場合どうすればいいですか?🧐
2. 特定の役割に対して使うには??
• 何でもありなChat Botではなく、自社のニーズに合わせたBotにする設定はできる?🧐
3. レスポンシブレイアウトにするためには!?
• モバイルでも使いやすいようにするためには、どうすればいいでしょうか?🧐
最後に!
本日はありがとうございました!
プレビュー機能で登場が待ち遠しいですが
AI BuilderによってGPTが使いやすくなる未来はそう遠くないで
すね!
市民開発者から変革盛り上げていきましょう🐟🔥
August 25, 2023
Copyright (c) 2023,
魁!!鰹塾. All rights reserved
30
参加者の皆様!
ギークさん!
ありがとうございました!!

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

  • 1.
  • 2.
    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.
    3 初級 >>>>>>>>>>>>>>>>中級>>>>>>>>>>上級>>>>>>>>>マニアック 藤原 弘道| ギークフジワラ Hiromichi Fujiwara ブログ | geekfujiwara.com ギークフジワラ 日本マイクロソフト株式会社 Low-code Technical Lead 誰でもアプリを作れる世の中になるように Power Platform に関する配信を行っています。 Twitter | @geekfujiwara Udemy 体系的に学び、ゼロから業務で使えるように! で検索! 🔍 ギークフジワラ さらに最新情報をキャッチアップ! 時々マニアックな内容も。 技術的な最新情報やクイズを出題したりしています。 テキストの方がわかりやすいコンテンツなどを中心に掲載。 にも対応!
  • 4.
    本日のテーマ! AI Builderについて AI Builderは、コーティングやデータサイエンスの専門知識が無くても、 簡単にAIの強力な機能が使える機能 AIBuilderの機能の例 • フォーム処理:フォームのスキャンおよび処理によるデータ入力の自動化 • オブジェクト検出:画像内のオブジェクトを検出して分類する • テキスト認識:画像内のテキストを抽出して分類する • 予測:歴史的なデータから未来の結果を予測する • 分類:データを分類して、ビジネスプロセスを自動化する August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 4 本日(2023.08.25時点)取り扱う内容は、Power Appsでお手軽に AI BuilderでAzure OpenAI Chatアプリを作ること!
  • 5.
    AI BuilderでAzure OpenAIが使えるということ AIとTextChatを実施する手段は増えていますが、自作するうえ では、最も簡単な手段であると個人的には感じています。 August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 5 1. リソースの 申請 Power AppsかPower Automateで設定 AI Builderの場合 • Power Apps • Power Automateを介して Power Virtual Agents • その他 Azure OpenAIの場合 • Teamsアプリ • Power Virtual Agents • その他 2. デプロイ 3. アプリに 実装 ※ どの媒体で実現するかでこのステップの労力は 大きく変わります ※ 使用できるモデルなど柔軟な選択は上記と比較し てできなくなります
  • 6.
    具体的なメリット AI Builderにおける「GPTでテキストを作成する」機能は、 Azure OpenAIの技術、下記の点でのメリットが受けられる August25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 6 ChatGPT Azure OpenAI 入力した内容が学習に利用される 入力した内容が学習に利用されない 情報漏洩リスクを防ぐことが出来るメリットがある ※ Azure内で作成できるChatGPTとは比較していません
  • 7.
    使い方 Power Apps、Power Automateともに非常に簡単です ※現在はあくまでプレビュー機能、使えるリージョンが限定されています August25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 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:})
  • 8.
    Parameterについて 現在はプレビュー段階。登場が待ち遠しい状態です。 本日は作りながら、使いこなすポイントを学びましょう! August 25, 2023 Copyright(c) 2023, 魁!!鰹塾. All rights reserved 8 Parameter 日本語訳 コメント max_tokens 最大応答 • 応答の文字数 • 1 つのトークンは、一般的な英語テキストの約 4 文字 • 最大 4000 トークン temperature 温度 • ランダム性 • この値が高いと、より創造的、低いと決定的なレスポン スになる top_p 上位 P • 確率が高いトークンと低いトークンの両方から選択 • 温度または上位 P の両方ではなくどちらかを調整するこ とが推奨されている stop シーケンスの停止 • モデルの応答を目的のポイントで終了する frequency_penalty 頻度のペナルティ • 応答でまったく同じテキストが繰り返される可能 性を低下させる presence_penalty プレゼンス ペナルティ • 応答で新しいトピックを紹介する可能性を高める
  • 9.
    作ってみよう – 大枠 コンテナというコントロールを使いながら進めます。 August25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 9 1. 水平コンテナーというコントロールを使い、画面の横幅を 2 : 8に分割する • 2の部分がサイドバー、8の部分がメインセクション 2. サイドバー(2)の部分に、垂直コンテナーを挿入する 3. メインセクション(8)の部分に、垂直コンテナーを挿入する • このメインセクションに、3つ水平コンテナーを挿入する。大きさは高さを8等分する • 1つ目(最上部)のコンテナーはヘッダー、1/8の高さ • 2つ目(真ん中)のコンテナーはチャット画面、6/8の高さ • 3つ目(最下部)のコンテナーはフッター、1/8の高さ 4. メインセクションをアレンジする 5. サイドバーをアレンジする
  • 10.
    作ってみよう – イメージ August25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 10 ■ 色について 完全に好みで構いませ ん! ハンズオンでは、 以下の色を使います。 サイドバー:黒 ヘッダー: - 塗りつぶし #1072BC - テキスト #FA9B70 フッター:濃い灰色 #343541 文字色:白か黒
  • 11.
    作ってみよう – 1.横幅を分割する August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 11 ※イメージは16:9になっていませんのでご注意ください 横幅全体は下記で表現します • App.Width • Parent.Width サイドバー 2 メインセクション 8 App.Width * 0.2 App.Width * 0.8
  • 12.
    作ってみよう– 2. サイドバーに垂直コンテナーを挿入する August25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 12 垂直コンテナー ※イメージは16:9になっていませんのでご注意ください サイドバーに 垂直コンテナーを挿入する メインセクション
  • 13.
    作ってみよう– 3. メインセクションに水平コンテナーを3つ挿入する August25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 13 ※イメージは16:9になっていませんのでご注意ください App.Height( Parent.Height ) / 8 ヘッダー 1/8 チャット画面 6/8 フッター 1/8 App.Height( Parent.Height ) / 8 * 6 App.Height( Parent.Height ) / 8
  • 14.
    作ってみよう– 4. メインセクションをアレンジする– 1. ヘッダー August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 14 ※イメージは16:9になっていませんのでご注意ください コンテナの 塗りつぶしを 設定 Fill ColorValue("#1072BC") テキスト ラベルを挿入 1. 高さ(Height)を Parent.Height 2. 横幅(Width)を Parent.Width 3. 文字列(Text)はお好みで 4. 文字サイズはお好みですが、例は 40 5. テキストのアラインメントは左右中央揃え 垂直方向の配置も中央 6. テキストのカラーは、例はColorValue("#FA9B70") 7. 表示モードは「ビュー」にしておくと○
  • 15.
    作ってみよう– 4. メインセクションをアレンジする– 2. メインセクション August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 15 ※イメージは16:9になっていませんのでご注意ください 2. BodyとImageを消す 3. TemplateSizeプロパティを下記の通り設定 Min(100, Self.Height) 4. 高さ(伸縮可能)をオン 5. 最小高さは 0 にする 6. テキストラベル Body1は ・ 高さの自動調整 オン ・ 折り返す オン 1. 「高さが伸縮可能な ギャラリー」を挿入
  • 16.
    作ってみよう– 4.メインセクションをアレンジする –3. フッター August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 16 ※イメージは16:9になっていませんのでご注意ください 1. コンテナーは塗りつぶしを■#343541にする 2. テキスト入力(TextInput)を挿入 3. アイコン(送信)を挿入
  • 17.
    作ってみよう– 4.メインセクションをアレンジする –3. フッター August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 17 フッターに絞って解説 1. コンテナーのパディング 左を40に。 1.によって40pointの余白 2. テキストインプットは下記のプロパティに変更 既定 なし ヒントのテキスト Send a message クリア ボタン、 スペルチェックの有効化 オン モード 複数行 配置(垂直方向) 中央揃え Width Parent.Width / 10 * 8.5 Height Parent.Height / 3 * 2 3. 送信アイコンは ・幅を伸縮可能にして中央揃え!
  • 18.
    作ってみよう – 5.サイドバー コンテナーとボタン August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 18 ※イメージは16:9になっていませんのでご注意ください サイドバー P11で垂直コンテナーを挿入しました。 ----- 1. 上記の垂直コンテナーのパディング 上を30に。 2. 塗りつぶしを#202123に 3. ボタンを挿入 4. プロパティは右記を参照👉 + New Chat
  • 19.
    作ってみよう – 5.サイドバー アイコンとギャラリー August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 19 ※イメージは16:9になっていませんのでご注意ください 5. アイコン[ ごみ箱 ]を挿入 6. 中央揃えにして、 高さ(伸縮可能)をオフ、 パディングを各方位に20設けることがポイント! ※サイズはお好みですが、一旦84にしています! 7. 空の垂直ギャラリーを挿入します ※主催の動きを見ながら進めましょう • 最小幅を 0 にします • ギャラリーの中に、 アイコン[ メッセージ ] と テキストラベルを 挿入します!
  • 20.
    作ってみよう – ここでデータを追加!! 1. Office 365ユーザー 2. AI Builderの`GPTでテキストを作成する`モデル 1. 反映されない場合はPower Automateで対処 August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 20 反映されていない場合は Power Automateで対応
  • 21.
    仕上げ – 1.GPTを起動する関数 August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 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
  • 22.
    仕上げ – 2.現在の対話を記録する関数 August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 22 Collect(colHistory,{col:colChat}); Clear(colChat); 1. 現在のコレクションを、履歴用のコレクションに格納 2. 現在のコレクションをクリアしている + New ChatボタンのOnSelect
  • 23.
    仕上げ – 3.過去の履歴を呼び戻す関数 August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 23 ClearCollect(colChat,ThisItem.col) 1. 選択したコレクションを、colChatというチャット用のコレクションに 上書きしている GalleyのOnSelect
  • 24.
    仕上げ – 4.履歴を全て削除する関数 August 25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 24 Clear(colHistory); 1. 履歴用のコレクションをクリアする関数 IconのOnSelect
  • 25.
    ギャラリー – 過去のチャット履歴 August25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 25 データソースは、コレクション: colHistory テキストラベルの値は First(ThisItem.col)._text colHistoryのOnSelectは「ClearCollect(colChat,ThisItem.col)」とする
  • 26.
    ギャラリー –チャット画面 August 25,2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 26 データソースは、コレクション: colChat テキストラベルの値は First(ThisItem.col)._text ・ 画像(Image)は ThisItem._imgで設定 ・ テキストラベル(Label)は ThisItem._textで設定 値のほとんどが関数で設定されます。 伸縮可能なギャラリーで、幅が伸びるようにすることが大切です!
  • 27.
  • 28.
    質問 Welcome !! August25, 2023 Copyright (c) 2023, 魁!!鰹塾. All rights reserved 28 Guest!! ギークフジワラさんに聞いてみよう!! Teamsチャットで是非どうぞ!
  • 29.
    出戻りガツオ🐟からの質問 August 25, 2023 Copyright(c) 2023, 魁!!鰹塾. All rights reserved 29 皆様の質問を優先しますが、出るまでは私の質問から! 1. ただ文字渡すだけで上手く使える? • Azure OpenAIだとパラメータの設定など面倒、AI Builderの場合どうすればいいですか?🧐 2. 特定の役割に対して使うには?? • 何でもありなChat Botではなく、自社のニーズに合わせたBotにする設定はできる?🧐 3. レスポンシブレイアウトにするためには!? • モバイルでも使いやすいようにするためには、どうすればいいでしょうか?🧐
  • 30.

Editor's Notes

  • #4 誰もがアプリを作れるような世の中になるよう、個人でもギークフジワラという名前でPower Platform というマイクロソフトのアプリ開発ツールに関する配信を行っております。 私は、もともと特に製造業のお客様にERPの導入コンサルを行っておりまして、ツールの使い方を教えるのではなく、現場の具体的な課題を解決することをモットーにYouTubeやUdemy での配信を行っております。 最近、UB二私の講座が登録されましたので、ぜひ!
  • #29 Azure OpenAI Studioにも触れる
  • #30 Azure OpenAI Studioにも触れる