使用 Microsoft Azure CustomVision.ai 和 Tulip Vision 进行视觉检测

const byteArray = Uint8Array.from(window.atob(image), c => c.charCodeAt(0))；

 return new Blob([byteArray], {type: 'application/octet-stream'})；

}


async function detectAnomalies() {

 let image = getValue("imageBase64String")；

 const url = '<<< 使用 CustomVision.ai 中的 URL>>'；

 $.ajax({

 url: url、

 type: 'post'、

 data: b64toblob(image)、

 cache:false、

 processData: false、

 headers：{

 预测密钥<<< 使用预测密钥 >>>'、

 内容类型"："应用程序/八进制流

 },

 success: (response) => {

 setValue("predictions", response["predictions"])；

 },

 错误：（err） => {

 console.log(err)；

 },

 async: false、

 });

} ```


**CSS**


``` .button {

 background-color：


## 616161;


border: none；

 color: white；

 padding：15px 32px；

 text-align: center；

 text-decoration: none；

 display: inline-block；

 font-size: 16px；

 width: 100%；

} ```


确保在自定义 Widget 上启用 jQuery 外部库。![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screen%20Shot%202022-10-12%20at%2011.00.35%20AM_shadow.jpg){height="" width=""}


您的自定义 Widget 应如下所示：


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Using%20Microsoft%20Azure%20CustomVision.ai%20with%20Tulip%20Vision%20for%20Visual%20Inspection_490283461.png)


## 在郁金香应用程序中使用预测 Widget


现在 Widget 已设置完成，您只需将其添加到将运行推理请求的应用程序中即可。您可以构建如下应用程序步骤：


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Using%20Microsoft%20Azure%20CustomVision.ai%20with%20Tulip%20Vision%20for%20Visual%20Inspection_497394399.png)


使用常规按钮从视觉检测摄像头拍摄快照并保存到变量中：


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Using%20Microsoft%20Azure%20CustomVision.ai%20with%20Tulip%20Vision%20for%20Visual%20Inspection_490299484.png)


使用 "检测异常 "自定义部件。


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Using%20Microsoft%20Azure%20CustomVision.ai%20with%20Tulip%20Vision%20for%20Visual%20Inspection_490295795.png){height="" width="350"}


配置窗口小部件，使其接受快照图像变量作为 base64string。


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Using%20Microsoft%20Azure%20CustomVision.ai%20with%20Tulip%20Vision%20for%20Visual%20Inspection_490296728.png){height="" width="300"}


将输出分配给一个变量，以便在屏幕上显示或以其他方式使用。


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Using%20Microsoft%20Azure%20CustomVision.ai%20with%20Tulip%20Vision%20for%20Visual%20Inspection_490302048.png){height="" width="350"}


现在，您的应用程序已准备就绪，可以运行可视化检测的推理请求。


## 运行视觉检测应用程序


应用程序准备就绪后，在带有用于数据收集的检测相机的 Player 机器上运行。重要的是，要复制与检测推理相同的数据采集环境，以消除光线、距离或角度差异造成的误差。


下面是一个运行中的视觉检测应用程序示例：


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Using%20Microsoft%20Azure%20CustomVision.ai%20with%20Tulip%20Vision%20for%20Visual%20Inspection_497398652.png)


## 更多阅读


* [视觉检测入门](https://support.tulip.co/docs/getting-started-with-vision)
* [为视觉检测收集数据](https://support.tulip.co/docs/collecting-data-for-visual-inspection-with-vision)
* [登陆人工智能自定义小工具](https://support.tulip.co/docs/landingai-widget)
* [登陆人工智能单元测试](https://tulip.co/library/apps/landingai-unit-test/)
* [自定义小工具概述](https://support.tulip.co/docs/custom-widgets-overview)