如何使用Azure自定义视觉服务响应boundingBox绘制形状 [英] How to use Azure custom vision service response boundingBox to plot shape

问题描述

我正在使用Azure认知服务

以上是我在自定义视觉API调用中得到的响应.但是问题出在boundingBox上.它总是具有从0开始的小数部分的值.现在，如果我要使用该值并要绘制一个正方形，那是不可能的，因为我不知道从该值绘制正方形/矩形的确切逻辑.

如何使用这些值并使用它绘制一个矩形/正方形?

解决方案

回复/TL; DR

这些boundingBox值以图像原始大小的百分比表示，因此您可以通过将值乘以图像宽度(对于左侧和宽度值)或图像高度(对于顶部和高度值)来绘制矩形. /p>

请记住，位置是从左上角开始表示的，所以位置0,0是该角.

带有样本的详细信息

我有一个小的自定义视觉检测可乐瓶.

原始图片如下:

我使用Custom Vision门户进行了预测，并得到了以下结果-让我们专注于这一突出结果，得分为87.5％:

使用API​​(在此处提供) )，我还进行了Predict操作，并(除其他细节外)获得了此预测:

{
    "probability": 0.875464261,
    "tagId": "1932c95f-ed4a-4675-bde4-c2457e1389e6",
    "tagName": "CocaLight",
    "boundingBox": {
      "left": 0.453497916,
      "top": 0.0,
      "width": 0.2523211,
      "height": 0.8738168
    }
}

考虑到我的图片尺寸为 800 x 652 (因此ImageWidth 800，ImageHeight 652):

矩形绘制

左上角的位置?

• x(距左边框的垂直距离)= API的左值x ImageWidth => 0.453497916 x 800 = 362
• y(距顶部边框的水平距离)= API的顶部值x ImageHeight => 0.0 x 652 = 0

所以我的矩形起始位置是(362,0).

大小?

• 矩形宽度= API的宽度x ImageWidth => 201
• 矩形高度= API的高度x ImageHeight => 569

我们来画吧！

向右看！

I am using Azure cognitive-service custom vision service to detect shapes from capture images. As per their documentation, I got the response as per their format.

But I am an facing issue to plot the shape above the image.

{
    "id": "0fbda4ee-8956-4979-bf57-a252441af98d",
    "project": "9ca4032b-beeb-40ad-9396-1c3fcfd9ba89",
    "iteration": "27c85265-a158-4fc4-b22a-d535dd758d80",
    "created": "2018-06-11T09:34:29.9496528Z",
    "predictions": [
        {
            "probability": 0.0102891214,
            "tagId": "677afcf8-bc4a-493f-b588-707663286125",
            "tagName": "ball",
            "boundingBox": {
                "left": 0.2889924,
                "top": 0.0169312358,
                "width": 0.7007024,
                "height": 0.8284572
            }
        },
        {
            "probability": 0.012788726,
            "tagId": "ca844f08-b6c0-4d9a-9010-73945d442708",
            "tagName": "cricket ball",
            "boundingBox": {
                "left": 0.304018974,
                "top": 0.413163722,
                "width": 0.299461246,
                "height": 0.436399817
            }
        },
        {
            "probability": 0.0229086485,
            "tagId": "ca844f08-b6c0-4d9a-9010-73945d442708",
            "tagName": "cricket ball",
            "boundingBox": {
                "left": 0.2889924,
                "top": 0.0169312358,
                "width": 0.7007024,
                "height": 0.8284572
            }
        },
        {
            "probability": 0.0100123268,
            "tagId": "4672144d-5593-446f-be63-5144a35d0e6e",
            "tagName": "pipe",
            "boundingBox": {
                "left": 0.711509764,
                "top": 0.377838552,
                "width": 0.07217276,
                "height": 0.113578767
            }
        },
        {
            "probability": 0.0167990718,
            "tagId": "4672144d-5593-446f-be63-5144a35d0e6e",
            "tagName": "pipe",
            "boundingBox": {
                "left": 0.9821227,
                "top": 0.9500536,
                "width": 0.0115685463,
                "height": 0.033854425
            }
        },
        {
            "probability": 0.923659563,
            "tagId": "4672144d-5593-446f-be63-5144a35d0e6e",
            "tagName": "pipe",
            "boundingBox": {
                "left": 0.288039029,
                "top": 0.411838,
                "width": 0.291451037,
                "height": 0.4237842
            }
        }
    ]
}

Above is the response I got in that Custom vision API call. But the issue is with boundingBox. It is having values always in a fraction, starting from 0. Now if I want to use that and want to draw a square, then it is not possible as because I don't know exact logic behind drawing square/rectangles from that values.

How can I use those values and draw a rectangles/square using it?

解决方案

Reply / TL;DR

These boundingBox values are in percent of the image original size, so you can draw the rectangle by multiplying the values by the image width (for left and width values) or by the image height (for top and height values).

Keep in mind that the position is expressed from the top left corner, so position 0,0 is this corner.

Details with a sample

I got a small custom vision detecting cola bottles.

Original image is the following one:

I used the Custom Vision portal to make a prediction and got the following result - let's focus on this highlighted result with a 87,5% score:

Using the API (available here), I also made the Predict operation and got (among other details) this prediction:

{
    "probability": 0.875464261,
    "tagId": "1932c95f-ed4a-4675-bde4-c2457e1389e6",
    "tagName": "CocaLight",
    "boundingBox": {
      "left": 0.453497916,
      "top": 0.0,
      "width": 0.2523211,
      "height": 0.8738168
    }
}

Considering that my image dimension is 800 x 652 (so ImageWidth 800, ImageHeight 652):

Rectangle draw

Top left point position?

• x (vertical distance from the left border) = left value from API x ImageWidth => 0.453497916 x 800 = 362
• y (horizontal distance from the top border) = top value from the API x ImageHeight => 0.0 x 652 = 0

So my rectangle starting position is (362,0).

Size?

• Rectangle width = width from the API x ImageWidth => 201
• Rectangle height = height from the API x ImageHeight => 569

Let's draw it!

Looks right!

这篇关于如何使用Azure自定义视觉服务响应boundingBox绘制形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！