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名称:

由於我们使用 Line Get content API来取得用户在官方帐号输入的影像档案，其返回的是该影像的BufferArray型态。
Custom Vison SKD分类图片使用的是PredictionAPIClient类别的classifyImage方法，该方法的Input除了local file路径, 影像存取uri...我们确认一下Method Details-classifyImage官方文件是否支援影像BufferArray型态如下图：

classifyImage方法的input是HTTPRequestBody支援BufferArray的型态！

测试结果classifyImage回传的辨识结果资料格式范例如下：标签将由高～低依序返回

再来在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专案重新部署即完成喽！
测试Chatbot展示如下：

完赛心得

12th铁人赛到今天终於完赛了！！这30天记录了一段每天利用空挡时间自学Azure，使用Azure云服务打造聊天机器人的过程，回顾共使用了：

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

回到开赛第一天Day [1] 缘起-云端运算提到善用云端运算服务，加速开发应用程序！开发人员只需简单地设定、租用便能使用Azure云服务设计开发应用程序的解决方案，Azure提供的服务数以百计，希望自己在完赛後，也能持续自学使用Azure的云端运算服务。最後感谢各位邦友收看!