object-detection-safari / card_model.py
mpsk's picture
sql-compute-grad (#2)
88c0383
raw
history blame
3.2 kB
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