SlideShare una empresa de Scribd logo
1 de 52
Descargar para leer sin conexión
看圖說故事AI機器⼈
奇步應⽤ 陳佳新
jarsing@chibuapp.com
2022-07-30
2
個⼈部落格【奇步老爹】
3
https://chibupapa.com
⾃詡為聊天機器⼈傳教⼠
4
2019舉辦中部⼈的聊天機器⼈⼩⼩聚
臉書搜尋「Chatbot DevelopersTaiwan」社團
5
臉書社團
活動議程LINE Bot
2020成為LINE官⽅認證技術專家
俗稱的聊天機器⼈專家,LINE API Expert,簡稱LAE
6
2021成為微軟AI⼈⼯智慧領域
MVP最有價值專家
7
8
9
歡迎與我聯絡
陳佳新
https://facebook.com/jarsing
奇步應⽤
https://facebook.com/chibuapp
課程⼤綱
聊天機器⼈的崛起
如何開發LINE聊天機器⼈?
如何整合微軟AI影像辨識?
GitHub給星星&Demo
Q&A
10
聊天機器⼈的崛起
11
12
回想⼀下,
你今天FB或LINE了沒?
再回想⼀下,
你今天開了哪些App?
13
通訊軟體
正努⼒成為⼤平台!
14
聊天機器⼈的崛起
2016年4⽉
Facebook宣布
將旗下的
Messenger
平台化
15
聊天機器⼈的崛起
2016年4⽉
LINE提供
LINE BOT API
試⽤帳號
Facebook宣布
將旗下的
Messenger
平台化
16
2016年3⽉
聊天機器⼈的崛起
2016年4⽉
LINE提供
LINE BOT API
試⽤帳號
Microsoft提出
「對話即平台」
(Conversation
as a Platform)
Facebook宣布
將旗下的
Messenger
平台化
17
2016年3⽉
聊天機器⼈的崛起
2016年4⽉
LINE提供
LINE BOT API
試⽤帳號
現在
Microsoft提出
「對話即平台」
(Conversation
as a Platform)
Facebook宣布
將旗下的
Messenger
平台化
時⾄今⽇,
經過多年的
蓬勃發展,
聊天機器⼈
的應⽤可謂
遍地開花
18
聊天機器⼈=主機+程式
(更多彈性、更多數據)
19
LINE Messaging API如何運作?
20
來源:https://developers.line.biz/en/docs/messaging-api/overview/#how-messaging-api-works
⾸先:建立LINE官⽅帳號頻道
21
來源:https://developers.line.biz/en/docs/messaging-api/overview/#how-messaging-api-works
LINE BOT SDK
• Java
• PHP
• Go
• Perl
• Ruby
• Python
• Node.js
• ……
22
來源:https://developers.line.biz/en/docs/messaging-api/line-bot-sdk/#messaging-api-sdks
以PHP SDK為例,從應聲蟲開始
23
來源:https://github.com/line/line-bot-sdk-php/tree/master/line-bot-sdk-tiny
Azure主機,免費開始
24
來源:https://azure.microsoft.com/zh-tw/
開發者⽂件
25
來源:https://developers.line.biz/en/reference/messaging-api/
開發者⽂件
26
來源:https://developers.line.biz/en/reference/messaging-api/
開發者⽂件
27
來源:https://developers.line.biz/en/reference/messaging-api/
開發者⽂件
28
來源:https://developers.line.biz/en/reference/messaging-api/
最後:部署到主機,掛載
Webhook
29
來源:https://developers.line.biz/en/docs/messaging-api/overview/#how-messaging-api-works
預期結果(正確)
30
預期結果(稍微失誤)
31
程式運作流程
(稍後分解說明)
1. 上傳照片(看圖)
2. 暫存圖片
3. 呼叫影像分析API(說)
4. 回覆結果(故事)
32
LINE聊天機器⼈
1
2
3
4
描述包含⼈類可讀語⾔的影像
33
來源:https://docs.microsoft.com/zh-tw/azure/cognitive-services/computer-vision/concept-describing-images
「 a black and white
photo of a city 」
快速入⾨:
影像分析 REST API
34
來源:https://docs.microsoft.com/zh-tw/azure/cognitive-services/computer-vision/quickstarts-sdk/image-analysis-client-library?pivots=programming-language-rest-api&tabs=visual-studio
呼叫影像分析 API
• https://docs.microsoft.com/zh-tw/azure/cognitive-services/
computer-vision/how-to/call-analyze-image?tabs=rest
• 參數
1. Ocp-Apim-Subscription-Key(⾦鑰)
2. 端點及參數(visualFeatures、details)
3. url(圖片網址)
35
操作Azure (1/2):
登入帳號,建立ComputerVision資源
36
選⽤F0免費訂價層,
每分鐘最多呼叫 20 次,
每個⽉最多呼叫 5,000 次。
操作Azure (2/2):
取得⾦鑰和端點
37
實作看圖說故事機器⼈ (1/4)
上傳照片(看圖)
• switch ($event[‘type’][‘message’][‘type’])
• case ‘image’
• case ‘text’
• case ‘sticker’
• case ‘video’
• case ‘audio’
• case ‘location’
• ……
38
實作看圖說故事機器⼈ (2/4)
暫存圖片
1. 呼叫Get Content API,讀取image訊息的內容
• GET https://api-data.line.me/v2/bot/message/{messageId}/
content
2. PHP存檔函式
• 先file_get_contents()讀取image內容
• 再file_put_contents()寫檔,可⽤messageId當檔名
39
實作看圖說故事機器⼈ (3/4)
呼叫影像分析API(說)
• curl -H “Ocp-Apim-
Subscription-Key:{⾦鑰}” -H
"Content-Type: application/
json" “{端點}/vision/v3.2/
analyze?
visualFeatures=Categories,D
escription&details=Landmark
s” -d “{”url”:"{圖片網址}"}"
• PHP的curl函式
• curl_init(),
curl_setopt(),
curl_exec(),
curl_getinfo(),
curl_close()
40
實作看圖說故事機器⼈ (4/4)
回覆結果(故事)
• $client->replyMessage([
'replyToken' => $event['replyToken'],
'messages' => [
[
'type' => 'text',
'text' => '🤖 我覺得這張照片看起來像是……'
],
[
'type' => 'text',
'text' => json_decode($response)->description->captions[0]->text
],
[
'type' => 'text',
'text' => '🖼 歡迎再次上傳照片,讓我看圖說故事給你聽吧。'
]
]
]);
41
偽Live Demo
(早上10點鐘拍的照片)
42
看圖
偽Live Demo
(早上10點鐘拍的照片)
43
說故事
GitHub給星星&Demo
44
請到GitHub給星星 ⭐
45
GitHub
加入好友&Demo
46
影片
加入LINE好友
未來⼯作
• 中⽂化
• language=zh參數
• 呼叫翻譯API
• ⽤講的
• 呼叫語⾳API
47
Q & A
48
⾃備問與答,避免尬聊 (1/2) 😅
1. 電腦視覺API的收費⽅式?
➡ F0免費是每分鐘20次呼叫,每個⽉5,000次呼叫,S1等級是
每1,000次呼叫收費NTD$11~30。
2. 其他微軟Azure認知服務(Cognitive Services)還有哪些?
• 語⾳(語⾳轉換⽂字/⽂字轉換語⾳/語⾳翻譯/說話者辨識)
• 語⾔(情緒分析/問題解答/語⾔理解/翻譯⼯具)
• 辨識(電腦視覺/⼈臉識別/⾃訂視覺)
49
⾃備問與答,避免尬聊 (2/2) 😅
3. Chatbot聊天機器⼈的學習資源?
➡ 最推薦,臉書「Chatbot Developers
Taiwan」社團! 👍
4. Azure認知服務的學習資源?
➡ 最推薦,臉書「AzureTaiwan User
Group」社團! 🤩
50
請到GitHub給星星 ⭐
51
GitHub
[COSCUP 2022]看圖說故事AI機器人

Más contenido relacionado

La actualidad más candente

エンジニアなら知っておきたい「仮想マシン」のしくみ (BPStudy38)
エンジニアなら知っておきたい「仮想マシン」のしくみ (BPStudy38)エンジニアなら知っておきたい「仮想マシン」のしくみ (BPStudy38)
エンジニアなら知っておきたい「仮想マシン」のしくみ (BPStudy38)
Takeshi HASEGAWA
 
大規模トラフィックにどのように備えて負荷対策を実施しているのか?
大規模トラフィックにどのように備えて負荷対策を実施しているのか?大規模トラフィックにどのように備えて負荷対策を実施しているのか?
大規模トラフィックにどのように備えて負荷対策を実施しているのか?
Yusuke Shirakawa
 

La actualidad más candente (20)

え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
 
WeblateでOSSの翻訳に参加する
WeblateでOSSの翻訳に参加するWeblateでOSSの翻訳に参加する
WeblateでOSSの翻訳に参加する
 
twMVC#44 讓我們用 k6 來進行壓測吧
twMVC#44 讓我們用 k6 來進行壓測吧twMVC#44 讓我們用 k6 來進行壓測吧
twMVC#44 讓我們用 k6 來進行壓測吧
 
Swaggerでのapi開発よもやま話
Swaggerでのapi開発よもやま話Swaggerでのapi開発よもやま話
Swaggerでのapi開発よもやま話
 
ゼロからはじめるKVM超入門
ゼロからはじめるKVM超入門ゼロからはじめるKVM超入門
ゼロからはじめるKVM超入門
 
Hypervisors
HypervisorsHypervisors
Hypervisors
 
エンジニアなら知っておきたい「仮想マシン」のしくみ (BPStudy38)
エンジニアなら知っておきたい「仮想マシン」のしくみ (BPStudy38)エンジニアなら知っておきたい「仮想マシン」のしくみ (BPStudy38)
エンジニアなら知っておきたい「仮想マシン」のしくみ (BPStudy38)
 
Yiiフレームワークを使ってみた
Yiiフレームワークを使ってみたYiiフレームワークを使ってみた
Yiiフレームワークを使ってみた
 
containerdの概要と最近の機能
containerdの概要と最近の機能containerdの概要と最近の機能
containerdの概要と最近の機能
 
Dockerクイックツアー
DockerクイックツアーDockerクイックツアー
Dockerクイックツアー
 
【解説】IKE(IIJ Kubernetes Engine):= Vanilla Kubernetes + 何?
【解説】IKE(IIJ Kubernetes Engine):= Vanilla Kubernetes + 何?【解説】IKE(IIJ Kubernetes Engine):= Vanilla Kubernetes + 何?
【解説】IKE(IIJ Kubernetes Engine):= Vanilla Kubernetes + 何?
 
OverlayFS を使って Raspberry Pi を Network Bootする
OverlayFS を使って Raspberry Pi を Network BootするOverlayFS を使って Raspberry Pi を Network Bootする
OverlayFS を使って Raspberry Pi を Network Bootする
 
ゼロトラスト・アーキテクチャを無料で(やれるだけ)実現する
ゼロトラスト・アーキテクチャを無料で(やれるだけ)実現するゼロトラスト・アーキテクチャを無料で(やれるだけ)実現する
ゼロトラスト・アーキテクチャを無料で(やれるだけ)実現する
 
FIWARE IoTデバイスを保護する方法
FIWARE IoTデバイスを保護する方法FIWARE IoTデバイスを保護する方法
FIWARE IoTデバイスを保護する方法
 
音声認識超比較、各社コグニティブサービス全部入り
音声認識超比較、各社コグニティブサービス全部入り音声認識超比較、各社コグニティブサービス全部入り
音声認識超比較、各社コグニティブサービス全部入り
 
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
 
ガチで聞く!ヤフーのOpenStackプライベート・クラウドの実態とは
ガチで聞く!ヤフーのOpenStackプライベート・クラウドの実態とはガチで聞く!ヤフーのOpenStackプライベート・クラウドの実態とは
ガチで聞く!ヤフーのOpenStackプライベート・クラウドの実態とは
 
乗っ取れコンテナ!!開発者から見たコンテナセキュリティの考え方(CloudNative Days Tokyo 2021 発表資料)
乗っ取れコンテナ!!開発者から見たコンテナセキュリティの考え方(CloudNative Days Tokyo 2021 発表資料)乗っ取れコンテナ!!開発者から見たコンテナセキュリティの考え方(CloudNative Days Tokyo 2021 発表資料)
乗っ取れコンテナ!!開発者から見たコンテナセキュリティの考え方(CloudNative Days Tokyo 2021 発表資料)
 
BuildKitによる高速でセキュアなイメージビルド
BuildKitによる高速でセキュアなイメージビルドBuildKitによる高速でセキュアなイメージビルド
BuildKitによる高速でセキュアなイメージビルド
 
大規模トラフィックにどのように備えて負荷対策を実施しているのか?
大規模トラフィックにどのように備えて負荷対策を実施しているのか?大規模トラフィックにどのように備えて負荷対策を実施しているのか?
大規模トラフィックにどのように備えて負荷対策を実施しているのか?
 

Similar a [COSCUP 2022]看圖說故事AI機器人

《氪周刊:互联网创业必读》(第80期)
《氪周刊:互联网创业必读》(第80期)《氪周刊:互联网创业必读》(第80期)
《氪周刊:互联网创业必读》(第80期)
36Kr.com
 
《氪周刊:互联网创业必读》(第83期)
《氪周刊:互联网创业必读》(第83期)《氪周刊:互联网创业必读》(第83期)
《氪周刊:互联网创业必读》(第83期)
36Kr.com
 
2023_施XX_Generative AI collaboration教學分享.pptx
2023_施XX_Generative AI collaboration教學分享.pptx2023_施XX_Generative AI collaboration教學分享.pptx
2023_施XX_Generative AI collaboration教學分享.pptx
KuanTsaeHuang
 

Similar a [COSCUP 2022]看圖說故事AI機器人 (20)

ChatGPT讓任務型機器人變身
「真」聊天機器人
ChatGPT讓任務型機器人變身
「真」聊天機器人ChatGPT讓任務型機器人變身
「真」聊天機器人
ChatGPT讓任務型機器人變身
「真」聊天機器人
 
活用Flex彈性訊息,讓你的LINE聊天機器人更親民、更出色!
活用Flex彈性訊息,讓你的LINE聊天機器人更親民、更出色!活用Flex彈性訊息,讓你的LINE聊天機器人更親民、更出色!
活用Flex彈性訊息,讓你的LINE聊天機器人更親民、更出色!
 
[COSCUP 2021]在群組裡面放支LINE聊天機器人是個好點子嗎?
[COSCUP 2021]在群組裡面放支LINE聊天機器人是個好點子嗎?[COSCUP 2021]在群組裡面放支LINE聊天機器人是個好點子嗎?
[COSCUP 2021]在群組裡面放支LINE聊天機器人是個好點子嗎?
 
LINE TechPulse 2020 新星計畫團隊的應用觀察
LINE TechPulse 2020 新星計畫團隊的應用觀察LINE TechPulse 2020 新星計畫團隊的應用觀察
LINE TechPulse 2020 新星計畫團隊的應用觀察
 
從 GPT 到 DALL·E:在 Azure 上實現 AI 的創造性應用
從 GPT 到 DALL·E:在 Azure 上實現 AI 的創造性應用從 GPT 到 DALL·E:在 Azure 上實現 AI 的創造性應用
從 GPT 到 DALL·E:在 Azure 上實現 AI 的創造性應用
 
Azure Cognitive Services - TTS 文字轉語音小幫手機器人
Azure Cognitive Services - TTS 文字轉語音小幫手機器人Azure Cognitive Services - TTS 文字轉語音小幫手機器人
Azure Cognitive Services - TTS 文字轉語音小幫手機器人
 
如何使用 MESSENGER 輕鬆打造電商聊天機器人 | CHATISFY
如何使用 MESSENGER 輕鬆打造電商聊天機器人 | CHATISFY如何使用 MESSENGER 輕鬆打造電商聊天機器人 | CHATISFY
如何使用 MESSENGER 輕鬆打造電商聊天機器人 | CHATISFY
 
SignalR整合LINE,在LIFF裡建立一對一聊天管道
SignalR整合LINE,在LIFF裡建立一對一聊天管道SignalR整合LINE,在LIFF裡建立一對一聊天管道
SignalR整合LINE,在LIFF裡建立一對一聊天管道
 
微博合作介绍 V0.2
微博合作介绍 V0.2微博合作介绍 V0.2
微博合作介绍 V0.2
 
利用 Luis打造fb聊天機器人
利用 Luis打造fb聊天機器人利用 Luis打造fb聊天機器人
利用 Luis打造fb聊天機器人
 
如何透過聊天機器人(Chatbot)來翻轉企業與客戶溝通方式&【凡事都有個 Bot:虛擬篇】聊天機器人的前世今生 | 20160918 科技時事報導
如何透過聊天機器人(Chatbot)來翻轉企業與客戶溝通方式&【凡事都有個 Bot:虛擬篇】聊天機器人的前世今生 | 20160918 科技時事報導  如何透過聊天機器人(Chatbot)來翻轉企業與客戶溝通方式&【凡事都有個 Bot:虛擬篇】聊天機器人的前世今生 | 20160918 科技時事報導
如何透過聊天機器人(Chatbot)來翻轉企業與客戶溝通方式&【凡事都有個 Bot:虛擬篇】聊天機器人的前世今生 | 20160918 科技時事報導
 
Bot framework composer---用圖形化介面來建立聊天機器人
Bot framework composer---用圖形化介面來建立聊天機器人Bot framework composer---用圖形化介面來建立聊天機器人
Bot framework composer---用圖形化介面來建立聊天機器人
 
來玩 Bot Framework Composer 2.0版吧!
來玩 Bot Framework Composer 2.0版吧!來玩 Bot Framework Composer 2.0版吧!
來玩 Bot Framework Composer 2.0版吧!
 
《氪周刊:互联网创业必读》(第80期)
《氪周刊:互联网创业必读》(第80期)《氪周刊:互联网创业必读》(第80期)
《氪周刊:互联网创业必读》(第80期)
 
Global Azure Bootcamp @ 廣州 - 智能聊天機器人四代目
Global Azure Bootcamp @ 廣州 - 智能聊天機器人四代目Global Azure Bootcamp @ 廣州 - 智能聊天機器人四代目
Global Azure Bootcamp @ 廣州 - 智能聊天機器人四代目
 
ChatBot
ChatBotChatBot
ChatBot
 
Cfi social media watch-59
Cfi social media watch-59Cfi social media watch-59
Cfi social media watch-59
 
《氪周刊:互联网创业必读》(第83期)
《氪周刊:互联网创业必读》(第83期)《氪周刊:互联网创业必读》(第83期)
《氪周刊:互联网创业必读》(第83期)
 
2023_施XX_Generative AI collaboration教學分享.pptx
2023_施XX_Generative AI collaboration教學分享.pptx2023_施XX_Generative AI collaboration教學分享.pptx
2023_施XX_Generative AI collaboration教學分享.pptx
 
人工智慧的使用體驗 AI時代的UI與創新
人工智慧的使用體驗 AI時代的UI與創新人工智慧的使用體驗 AI時代的UI與創新
人工智慧的使用體驗 AI時代的UI與創新
 

Más de 佳新 陳

Más de 佳新 陳 (19)

行動代號「院長Gemini」AI聊天機器人計畫
行動代號「院長Gemini」AI聊天機器人計畫行動代號「院長Gemini」AI聊天機器人計畫
行動代號「院長Gemini」AI聊天機器人計畫
 
從走跳獸談LINE數位集章
從走跳獸談LINE數位集章從走跳獸談LINE數位集章
從走跳獸談LINE數位集章
 
奇步應用數位永續發展藍圖
奇步應用數位永續發展藍圖奇步應用數位永續發展藍圖
奇步應用數位永續發展藍圖
 
ChatGPT晚鳥專案
ChatGPT晚鳥專案ChatGPT晚鳥專案
ChatGPT晚鳥專案
 
更換大頭貼照的社群行銷術
更換大頭貼照的社群行銷術更換大頭貼照的社群行銷術
更換大頭貼照的社群行銷術
 
中部人的聊天機器人小小聚3週年回顧
中部人的聊天機器人小小聚3週年回顧中部人的聊天機器人小小聚3週年回顧
中部人的聊天機器人小小聚3週年回顧
 
用LINE聊天機器人打造尋找防疫口罩的小幫手
用LINE聊天機器人打造尋找防疫口罩的小幫手用LINE聊天機器人打造尋找防疫口罩的小幫手
用LINE聊天機器人打造尋找防疫口罩的小幫手
 
數位名片和型錄產生器
數位名片和型錄產生器數位名片和型錄產生器
數位名片和型錄產生器
 
使用 liff.shareTargetPicker 製作動畫賀年卡
使用 liff.shareTargetPicker 製作動畫賀年卡使用 liff.shareTargetPicker 製作動畫賀年卡
使用 liff.shareTargetPicker 製作動畫賀年卡
 
用liff.shareTargetPicker分享我的名片(電話及網址可點擊)
用liff.shareTargetPicker分享我的名片(電話及網址可點擊)用liff.shareTargetPicker分享我的名片(電話及網址可點擊)
用liff.shareTargetPicker分享我的名片(電話及網址可點擊)
 
我要奮發向上!聊天機器人有哪些書?
我要奮發向上!聊天機器人有哪些書?我要奮發向上!聊天機器人有哪些書?
我要奮發向上!聊天機器人有哪些書?
 
LIFF圖片測試工具,設計師和工程師從此溝通無礙
LIFF圖片測試工具,設計師和工程師從此溝通無礙LIFF圖片測試工具,設計師和工程師從此溝通無礙
LIFF圖片測試工具,設計師和工程師從此溝通無礙
 
防疫駭客松,4小時創作「尋找口罩」LINE Bot!
防疫駭客松,4小時創作「尋找口罩」LINE Bot!防疫駭客松,4小時創作「尋找口罩」LINE Bot!
防疫駭客松,4小時創作「尋找口罩」LINE Bot!
 
LINE Beacon,數位導覽的小幫手!(第二版)
LINE Beacon,數位導覽的小幫手!(第二版)LINE Beacon,數位導覽的小幫手!(第二版)
LINE Beacon,數位導覽的小幫手!(第二版)
 
LINE Beacon,數位導覽的小幫手!
LINE Beacon,數位導覽的小幫手!LINE Beacon,數位導覽的小幫手!
LINE Beacon,數位導覽的小幫手!
 
聊天機器人:一個沒有小編的世界
聊天機器人:一個沒有小編的世界聊天機器人:一個沒有小編的世界
聊天機器人:一個沒有小編的世界
 
AI機器人正夯
AI機器人正夯AI機器人正夯
AI機器人正夯
 
AppCoda中⽂版隆重登場
AppCoda中⽂版隆重登場AppCoda中⽂版隆重登場
AppCoda中⽂版隆重登場
 
[MOPCON 2014] 只要2天,你也可以贏得APP競賽佳作!
[MOPCON 2014] 只要2天,你也可以贏得APP競賽佳作![MOPCON 2014] 只要2天,你也可以贏得APP競賽佳作!
[MOPCON 2014] 只要2天,你也可以贏得APP競賽佳作!
 

[COSCUP 2022]看圖說故事AI機器人