2.2 接收與回傳多媒體內容
使用者與對談機器人的對話中可能會使用到像是圖片、音樂或檔案等純文字以外的多媒體內容,這些內容在 Bot Framework 中會把它當作是訊息的附件(attachment) 來處理。所以接收使用者的多媒體檔案,就是從訊息物件中的附件來取;而回覆就是產生一個帶有附件的訊息給使用者。
接收使用者的圖片內容
假設使用者傳了一張圖片訊息來,我們可以用下面這段程式碼來讀取這張圖片,然後使用 Microsoft Cognitive Services 的 Computer Vision (電腦視覺) API 來辨識這張圖片的內容。
const builder = require("botbuilder");
const restify = require("restify");
const request = require('request');
const MCS_CV_ENDPOINT = process.env.MCS_CV_ENDPOINT;
const MCS_CV_KEY = process.env.MCS_CV_KEY;
let server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3978, () => {
console.log('%s listening to %s', server.name, server.url);
});
let connector = new builder.ChatConnector();
server.post('/api/messages', connector.listen());
let bot = new builder.UniversalBot(connector, (session) => {
let msg = session.message;
if (msg.attachments && msg.attachments.length > 0) {
let attachment = msg.attachments[0];
session.sendTyping();
if (attachment.contentType == 'image/jpg' ||
attachment.contentType == 'image/jpeg') {
// 拿到檔案內容
request({ url: attachment.contentUrl, encoding:null }, (error, response, body) => {
let postOpt = {
url: `${MCS_CV_ENDPOINT}/analyze?visualFeatures=Description`,
method: 'POST',
encoding: null,
headers: {
'Content-Type': 'application/octet-stream',
'Ocp-Apim-Subscription-Key': MCS_CV_KEY
},
body: body
};
// 呼叫 Cognitive Services - Computer Vision API
request(postOpt, (e, r, b) => {
let resp = JSON.parse(b);
session.send(`您傳的圖片可能是「${resp.description.captions[0].text}」`);
});
});
}
}
});
當使用者上傳圖片時,機器中可以從附件中的 contentUrl
來拿到這個附件的內容,所以就可以直接拿它來做處理。以下是執行的結果:
如果你注意看程式碼,會注意到有一行
session.sendTyping()
的呼叫,這是用來提示使用者機器人已經收到訊息並正在處理,避免使用者以為哪裡出錯了。
回覆圖片內容
要回給使用者圖片訊息,其實也是用附件的方式回傳,下面這個例子是使用者輸入了關鍵字後,使用 Bing Image Search API 來搜尋相關的圖片回傳給用戶。
const builder = require("botbuilder");
const restify = require("restify");
const request = require('request');
const IMGSEARCH_URL = 'https://api.cognitive.microsoft.com/bing/v5.0/images/search'
const BING_KEY = '申請一個你自己的 BING SEARCH KEY 吧';
let server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3978, () => {
console.log('%s listening to %s', server.name, server.url);
});
let connector = new builder.ChatConnector();
server.post('/api/messages', connector.listen());
var bot = new builder.UniversalBot(connector, (session) => {
let msg = session.message;
let postOpt = {
url: `${IMGSEARCH_URL}?q=${msg.text}`,
method: 'POST',
json: true,
headers: {
'Content-Type': 'application/json',
'Ocp-Apim-Subscription-Key': BING_KEY
},
};
session.sendTyping();
request(postOpt, (error, response, body) => {
let imgArr = [];
body.value.forEach((img) => {
imgArr.push({
name: img.name,
contentType: `image/${img.encodingFormat}`,
contentUrl: img.contentUrl
});
});
session.send({
text: '您的搜尋結果:',
attachments: imgArr
});
});
});
執行結果就像是這樣: