card_model.py

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 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 = ""
    for _id, cx, cy, w, h, label, logit, is_selected, _ in boxes:
        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
    """
    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