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
        });
    });
});

執行結果就像是這樣:

參考資料

results matching ""

    No results matching ""