#技育CAMP ハッカソンで使い勝手の良い Microsoft の AI 系ツールとそのデモ

このイベントでの登壇資料です。https://talent.supporterz.jp/events/41a8e0ab-ace8-4ef9-bb46-2b323b74aaed/
各種 Azure Cognitive Service と、QnA Maker を使った FAQ 一問一答 bot の作り方を解説しています

1. . 千代田まどか (@chomado) Microsoft 社 Cloud Developer Advocate
2. https://talent.supporterz.jp/events/41a8e0ab-ace8-4ef9-bb46-2b323b74aaed/ このイベントでの 登壇資料です
3. たくさんのツイートありがとうございました！
4. たくさんのツイートありがとうございました！
5. たくさんのツイートありがとうございました！
6. 自己紹介：ニックネーム「ちょまど」 • Twitter: @chomado • 新卒入社した会社を 3 ヶ月で退職 • 前職 (2社目) は iOS/Android アプリを 開発していた プログラマ • 現在 Microsoft 社員 • エンジニア兼マンガ家 HoloLens (ゴーグル 型デバイス) が好き
7. 2021年 内閣サイバーセキュリティ月間の公式冊子の 漫画 (全 9 話) を描きました！(『ラブライブ！サンシャイン!!』コラボ) https://www.nisc.go.jp/security- site/month/lovelive.html 私の描いた 漫画の一例
8. 描いた絵
9. フォロワーさん 8.2 万人 Twitter : @chomado
10. [祝 5 周年] Microsoft に入社して 5 年が経った ツイッターなどで お祝いコメント欲しいで す！！！！！！😊
12. 無料で FAQ bot を爆速で作れる「QnA Maker」 https://www.qnamaker.ai/ ナレッジベースに 質問＆回答のペアを 読み込ませる (画面ポチポチ)
13. 無料で FAQ bot を爆速で作れる「QnA Maker」 https://www.qnamaker.ai/ ナレッジベースに 質問＆回答のペアを 読み込ませる (画面ポチポチ) プレビュー画面で Chat bot をテストできる
14. 無料で FAQ bot を爆速で作れる「QnA Maker」 このエンドポイントに HTTP POST リクエストを 投げる リクエストの中身はこの JSON データ。 質問内容などを記述する。 (例：”question” : “QnA maker and LUIS”)
15. 無料で FAQ bot を爆速で作れる「QnA Maker」 返ってくるレスポンスは、このような JSON データ。 回答や、その回答に関連する質問が入っている。 例："questions": [ "How can I integrate LUIS with QnA Maker?" ], "answer": "There is no direct integration of LUIS with QnA Maker. But, in your bot code, you can use LUIS and QnA Maker together.“,
16. 無料で FAQ bot を爆速で作れる「QnA Maker」 公式チュートリアルあります https://aka.ms/qna-maker-tutorial-jp
17. オレオレ画像認識 AI が無料で簡単に作れる Custom Vision https://www.customvision.ai/ 例） 松屋、 吉野家、 すき家 判別器
18. オレオレ画像認識 AI が無料で簡単に作れる Custom Vision https://www.customvision.ai/ 学習用に大量に 画像をアップロード
19. オレオレ画像認識 AI が無料で簡単に作れる Custom Vision https://www.customvision.ai/ 学習用に大量に 画像をアップロード ラベル付け 松屋、 吉野家、 すき家
20. オレオレ画像認識 AI が無料で簡単に作れる Custom Vision https://www.customvision.ai/ 学習用に大量に 画像をアップロード ラベル付け 松屋、 吉野家、 すき家 Train ボタンを押す (完)
21. オレオレ画像認識 AI が無料で簡単に作れる Custom Vision 作成したモデルを 利用できる API を 発行してくれる 作成したアプリから この API を叩けば 画像判別機の完成！
22. オレオレ画像認識 AI が無料で簡単に作れる Custom Vision 松屋とそれ以外の牛丼を 画像識別するスマホアプリ 「松屋警察」 https://twitter.com/chomado/status/898812060624068609
23. オレオレ画像認識 AI が無料で簡単に作れる Custom Vision その漫画の表紙を認識 （巻数まで） https://twitter.com/yoshiwo_konogi/stat us/1154271438129418240 https://twitter.com/henjo_official/status/1015863933687685121
24. 使用例）Custom Vision を使ってマスク検知アプリ https://dev.to/azure/corona-face-mask-detection-with-custom- vision-and-tensorflow-js-53e
25. 学習させること無く そのまま使える AI 系サービス Cognitive Services (QnA Maker も Custom Vision も 学習用のデータを自分で用意したけど これから紹介するのは Microsoft により学習が完了されているもの)
26. Cognitive Service – Face (顔認識) どこに顔があるとかを JSON で返してくれる https://aka.ms/FaceAPIjp
27. Cognitive Service – Face (顔認識) https://aka.ms/FaceAPIjp どこに顔があり 感情は何、 というのを JSON で返す 例） 「驚き」が 99.1 % 「恐れ」が 0.6 %
28. Cognitive Service – Computer Vision 「どこどこに train があります」や 説明文「people waiting at a train station」などを JSON で返してくれる https://aka.ms/ComputerVisionJP
29. Cognitive Service – Translator (翻訳) https://aka.ms/TranslatorAPIjp 例 https://qiita.com/TakeshiNickOsanai/items/a8039ba8d558f7c8a05e
30. Cognitive Service – Speech Translation (音声リアルタイム翻訳) https://azure.microsoft.com/ja-jp/services/cognitive-services/speech-translation/
31. Bing Image Search (テキストから画像を検索) https://azure.microsoft.com/ja-jp/services/cognitive-services/bing-image-search-api/
32. 参考）オレオレ Teams を作る [Preview 版] Azure Communication Services https://aka.ms/AzureCommunicationServicesJP
33. 参考）オレオレ Teams を作る [Preview 版 (近々GA)] Azure Communication Services https://aka.ms/AzureCommunicationServicesJP アプリ内に簡単に ビデオ通話機能や チャット機能が 組み込める新サービス
34. https://aka.ms/AzureCommunicationServicesJP 参考）オレオレ Teams を作る [Preview 版 (近々GA)] Azure Communication Services アプリ内に簡単に ビデオ通話機能や チャット機能が 組み込める新サービス
35. 参考）オレオレ Teams を作る [Preview 版 (近々GA)] Azure Communication Services サンプルコードが GitHub に 公開されています (C#) https://github.com/Azure/Communication/
36. 参考）オレオレ Teams を作る [Preview 版] Azure Communication Services SDK 自体は JS, C#, Python, Java に対応 https://github.com/Azure/Communication/
37. • 既存のサービスをうまく活用して自アプリを進化させよう • Microsoft Cognitive Services や、 画面ポチポチでオレオレ画像判別機が作れる Custom Vision 画面ポチポチで FAQ 会話 bot が作れる QnA Maker などお勧め！ • どれも自アプリ側から REST API を叩くものなので めっちゃお手軽に使えるよ！ まとめ
40. aka.ms/teams-faq-bot-jp
41. アーキテクチャ図 ナレッジベース ボット アプリ が動く Azure Web Apps QnA Maker Web アプリ ボット (Azure Bot Services) Teams Azure Web Apps QnA Maker で トレーニングした 質問に対する 回答を返す Web API デプロイ ボットの設定 チャンネルの設定 API 呼び出し Teams からの 会話内容が 渡される
42. Bot 開発の統合環境 • bot アプリ開発用の SDK を用意してくれていて、それをもとに開発し、 Azure 上にホストして、 Teams や Skype、Slack、LINE などとの接続まで 面倒見てくれるサービス • エンドポイントなどを定義する「Bot チャンネル登録」 • Bot 開発用の SDK である「Bot Framework SDK」 • Bot とチャネル (Teams など) の間で メッセージやイベントを送受信する「Bot Framework Service 」 • など Azure Bot Services とは
43. https://github.com/microsoft/botframework-sdk Bot Framework とは
44. QnA Maker とは • 質問＆回答リストから 学習し、FAQ を作成 • Bot Service または REST API で回答を取得 Knowledge Base •質問＆回答のリストを作成し •「Save and Train」で学習 Test •実際に web 上でチャットを試せる。 •質問データを手動で増やしたりなど Save & train / Publish •BotまたはRESTで呼び出し WebサービスとしてAPI経由で利用可能
45. Azure Bot Services • エンドポイントなどを定義する「Bot チャンネル登録」 • Bot 開発用の SDK である「Bot Framework SDK」 • Bot Framework 用のエミュレーター「Bot Framework Emulator」 • などなど Azure Web Apps QnA Maker まとめ
46. aka.ms/teams-faq-bot-jp
47. 無料で Microsoft Azure アカウントを作成 https://aka.ms/CreateAzureAccountJP
48. Twitter : @chomado ありがとうございました！