File size: 3,202 Bytes
3f1124e 1439326 3f1124e 1439326 88c0383 3f1124e 1439326 3f1124e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
import base64
from box_utils import cxywh2ltrb, cxywh2xywh
def style():
""" Style string for card models
"""
return """
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<style>
.img-overlay-wrap {
position: relative;
display: inline-block;
}
.img-overlay-wrap {
position: relative;
display: inline-block;
/* <= shrinks container to image size */
transition: transform 150ms ease-in-out;
}
.img-overlay-wrap img {
/* <= optional, for responsiveness */
display: block;
max-width: 100%;
height: auto;
}
.img-overlay-wrap svg {
position: absolute;
top: 0;
left: 0;
}
</style>
"""
def convert_img_url(img_url):
return img_url.replace('http://images.cocodataset.org', 'https://s3.us-east-1.amazonaws.com/images.cocodataset.org')
def card(img_url, img_w, img_h, boxes):
""" This is a hack to streamlit
Solution thanks to: https://discuss.streamlit.io/t/display-svg/172/5
Converting SVG to Base64 and display with <img> tag.
Also we used the
"""
_boxes = ""
img_url = convert_img_url(img_url)
for b in boxes:
_id, cx, cy, w, h, label, logit, is_selected = b[:8]
x, y, w, h = cxywh2xywh(cx, cy, w, h)
x = round(img_w * x)
y = round(img_h * y)
w = round(img_w * w)
h = round(img_h * h)
logit = "%.3f" % logit
_boxes += f'''
<text fill="white" font-size="20" x="{x}" y="{y}" style="fill:white;opacity:0.7">{label}: {logit}</text>
<rect x="{x}" y="{y}" width="{w}" height="{h}" style="fill:none;stroke:{"red" if is_selected else "green"};
stroke-width:4;opacity:0.5" />
'''
_svg = f'''
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {img_w} {img_h}">
{_boxes}
</svg>
'''
_svg = r'<img style="position:absolute;top:0;left:0;" src="data:image/svg+xml;base64,%s"/>' % \
base64.b64encode(_svg.encode('utf-8')).decode('utf-8')
_img_d = f'''
<div class="img-overlay-wrap" width="{img_w}" height="{img_h}">
<img width="{img_w}" height="{img_h}" src="{img_url}">
{_svg}
</div>
'''
return _img_d
def obj_card(img_url, img_w, img_h, cx, cy, w, h, *args, dst_len=100):
"""object card for displaying cropped object
Args:
Retrieved image and object info
Returns:
_obj_html: html string to display object
"""
img_url = convert_img_url(img_url)
w = img_w * w
h = img_h * h
s = max(w, h)
x = round(img_w * cx - s / 2)
y = round(img_h * cy - s / 2)
scale = dst_len / s
_obj_html = f'''
<div style="transform-origin:0 0;transform:scale({scale});">
<img src="{img_url}" style="margin:{-y}px 0px 0px {-x}px;">
</div>
'''
return _obj_html
|