Web platform for sharing free data for ML and research

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

Show shapes in preview on hover

roundabout,
created on Friday, 6 September 2024, 17:25:01 (1725643501), received on Friday, 6 September 2024, 19:35:57 (1725651357)
Author identity: vlad <vlad.muntoiu@gmail.com>

07c353bb6c4c4b9b889d5d11e8f296078574a225

app.py

@@ -348,7 +348,7 @@ def has_object(id):

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                return flask.render_template("object.html", object=object_, resources=resources, page_number=page,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                                             page_length=per_page, num_pages=resources.pages, prev_page=resources.prev_num,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                         next_page=resources.next_num)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                         next_page=resources.next_num, PictureRegion=PictureRegion)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            @app.route("/upload")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -413,6 +413,7 @@ def upload_post():

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                file.save(path.join(config.DATA_PATH, "pictures", str(resource.id)))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                pil_image = Image.open(path.join(config.DATA_PATH, "pictures", str(resource.id)))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                resource.width, resource.height = pil_image.size
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            db.session.commit()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                if flask.request.form.get("annotations"):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                    try:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -29,18 +29,18 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                font-size: 2rem;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        #annotation-zone {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        #annotation-zone, .annotation-zone {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                position: relative;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                user-select: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        #annotation-image {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        #annotation-image, .annotation-image {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                user-drag: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                -webkit-user-drag: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                image-rendering: pixelated;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        #annotation-zone > svg {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        #annotation-zone > svg, .annotation-zone > svg {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                z-index: 1;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                position: absolute;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                top: 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -116,7 +116,7 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                min-height: 2lh;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .shape-container-viewonly > .shape {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .shape-container-viewonly > .shape, .thumbnail-list > li .shape {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                fill: var(--color-info);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                stroke: var(--color-info);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                fill-opacity: 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -125,11 +125,11 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .shape-container-viewonly > .shape-polyline {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                fill: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .shape-container-viewonly > .shape-point {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                stroke: var(--color-info);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -177,6 +177,11 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                stroke-opacity: 1;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .thumbnail-list > li:hover .shape {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            fill-opacity: 0.2;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            stroke-opacity: 1;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            /* Disabled for now, until there is more navigation that would benefit from transitions */
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            /*
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            @view-transition {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/object.html

@@ -10,7 +10,33 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                        {% for resource in resources %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            <li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                                <a href="/picture/{{ resource.id }}">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                <img src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                <div class="annotation-zone">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                    <img src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                    {% for i in PictureRegion.query.filter_by(resource=resource, object=object) %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                        {% if i.json.type == "bbox" %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                            <svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                                <rect x="{{ i.json.shape.x * resource.width }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                                      y="{{ i.json.shape.y * resource.height }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                                      width="{{ i.json.shape.w * resource.width }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                                      height="{{ i.json.shape.h * resource.height }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                                      fill="none" class="shape-bbox shape"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                                ></rect>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                            </svg>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                        {% elif i.json.type == "polygon" %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                            <svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                                <polygon points="{% for point in i.json.shape %}{{ point.x * resource.width }},{{ point.y * resource.height }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                            </svg>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                        {% elif i.json.type == "polyline" %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                            <svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                                <polyline points="{% for point in i.json.shape %}{{ point.x * resource.width }},{{ point.y * resource.height }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                            </svg>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                        {% elif i.json.type == "point" %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                            <svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                                <circle cx="{{ i.json.shape.x * resource.width }}" cy="{{ i.json.shape.y * resource.height }}" r="0" fill="none" class="shape-point shape"></circle>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                            </svg>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                        {% endif %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                    {% endfor %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                                    <div class="list-detail">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                                        {{ resource.title }}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                                    </div>