iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 30
0
Microsoft Azure

白眼狼的30天Azure跳槽計畫系列 第 30

Day [30] Azure Custom Vision-Line Chatbot整合(二)~完賽!

Use your model with the prediction API

昨天我們已經安裝好Azure Custom Vision Node.js moudule且設定Custom Vision 金鑰,預測節點等參數,現在我們來撰寫
在Azure Functions Webhook專案中新增CustomVision.ts程式如下:

import * as msRest from "@azure/ms-rest-js"
import * as PredictionApi from "@azure/cognitiveservices-customvision-prediction";
import { CUSTOMVISION } from "../config"

const predictor_credentials = new msRest.ApiKeyCredentials({ inHeader: { "Prediction-key": CUSTOMVISION.key } });
const predictor = new PredictionApi.PredictionAPIClient(predictor_credentials, CUSTOMVISION.endpoint);


export const classifyImageByCustomVision = async (imageBuffer: ArrayBuffer,): Promise<any> => {

    let tageName: String
    const projectId = CUSTOMVISION.projectId
    const publishedName = "maskClassification"
    const predictedResult = await predictor.classifyImage(projectId, publishedName, imageBuffer);


    console.log(predictedResult)
    console.log(`\t ${predictedResult.predictions[0].tagName}: ${(predictedResult.predictions[0].probability * 100.0).toFixed(2)}%`);

    tageName = predictedResult.predictions[0].tagName
    return tageName
    
}

程式中的publishedName變數是我們昨天發佈的Custom Vision Model名稱:

https://ithelp.ithome.com.tw/upload/images/20201015/20108281YYiGamBqPy.jpg

由於我們使用 Line Get content API來取得用戶在官方帳號輸入的影像檔案,其返回的是該影像的BufferArray型態。
Custom Vison SKD分類圖片使用的是PredictionAPIClient類別的classifyImage方法,該方法的Input除了local file路徑, 影像存取uri...我們確認一下Method Details-classifyImage官方文件是否支援影像BufferArray型態如下圖:

https://ithelp.ithome.com.tw/upload/images/20201012/201082814LBqBAnqmx.jpg
https://ithelp.ithome.com.tw/upload/images/20201012/201082812l9wKDERVW.jpg
classifyImage方法的input是HTTPRequestBody支援BufferArray的型態!

測試結果classifyImage回傳的辨識結果資料格式範例如下:標籤將由高~低依序返回
https://ithelp.ithome.com.tw/upload/images/20201015/20108281bOMx9rj0pg.jpg

再來在Workflow.ts中新增一支 predictionImage() function 來辨識圖片,並將結果回傳給用戶

export const predictionImage = async (imageBuffer: ArrayBuffer, replyToken: string) => {

    let replyMessage: string
    const tageName = await customVision.classifyImageByCustomVision(imageBuffer)

    switch (tageName) {
        case "withMask":
            replyMessage = "影像中人物有戴口罩!"
            break;
        case "withoutMask":
            replyMessage = "影像中人物沒戴口罩!!"
            break;

        default:
            break;
    }

    lineService.replyMessage(replyMessage, replyToken)
}

程式修改完成後我們將Azure Functions專案重新部署即完成嘍!/images/emoticon/emoticon18.gif
測試Chatbot展示如下:
https://ithelp.ithome.com.tw/upload/images/20201015/20108281N3XfuMWtws.png

完賽心得

/images/emoticon/emoticon31.gif12th鐵人賽到今天終於完賽了!!這30天記錄了一段每天利用空擋時間自學Azure,使用Azure雲服務打造聊天機器人的過程,回顧共使用了:

  • Azure Functions
  • Azure Cache for Redis
  • Azure Cognitive Services
  • LUIS
  • Azure Custom Vision

回到開賽第一天Day [1] 緣起-雲端運算提到善用雲端運算服務,加速開發應用程式!開發人員只需簡單地設定、租用便能使用Azure雲服務設計開發應用程式的解決方案,Azure提供的服務數以百計,希望自己在完賽後,也能持續自學使用Azure的雲端運算服務。最後感謝各位邦友收看! /images/emoticon/emoticon41.gif


上一篇
Day [29] Azure Custom Vision-Line Chatbot整合(一)
系列文
白眼狼的30天Azure跳槽計畫30

尚未有邦友留言

立即登入留言