{"id":1109,"date":"2022-11-08T12:09:10","date_gmt":"2022-11-08T04:09:10","guid":{"rendered":"https:\/\/pixeling.net\/work\/wp\/?post_type=rara-portfolio&#038;p=1109"},"modified":"2026-07-09T07:30:51","modified_gmt":"2026-07-08T23:30:51","slug":"semantic-segmentation","status":"publish","type":"rara-portfolio","link":"https:\/\/pixeling.net\/work\/wp\/?rara-portfolio=semantic-segmentation","title":{"rendered":"Semantic Segmentation"},"content":{"rendered":"<h4>Goal<\/h4>\n<p><span style=\"font-weight: 400;\">The main goal of the Semantic Segmentation project was to <\/span><span style=\"font-weight: 400;\">have a more accurate annotation and the ability for more efficient customer review, where customers could review and get delivery output of masks instead.<\/span><\/p>\n<p>This project was divided into 3 milestones and I was tasked to design for milestones 1 and 2.<\/p>\n<h4>Issues to Solve<\/h4>\n<p><b>Milestone 1: Tight borders between entities<\/b><\/p>\n<p><span style=\"font-weight: 400;\">When two entities are adjacent, there should be no gaps and overlaps between them. Currently, the manual placement of polygon vertices makes it impossible for annotators to get the annotation of two vertices without gaps and overlaps. Refer to the Figma video below:<\/span><\/p>\n<p><iframe loading=\"lazy\" style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" src=\"https:\/\/www.figma.com\/embed?embed_host=share&amp;url=https%3A%2F%2Fwww.figma.com%2Fproto%2FERL4IdgmywASApdehPBsHG%2FSemantic-Segmentation%3Fpage-id%3D0%253A1%26node-id%3D203%253A46862%26viewport%3D346%252C-396%252C0.03%26scaling%3Dcontain%26starting-point-node-id%3D203%253A46862\" width=\"800\" height=\"450\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><b>Milestone 2: Entity Ordering and Mask Opacity<\/b><\/p>\n<p>Reviewers should be able to review annotations as a pixel mask and get the mask output instead of polygon borders. Currently, this requires the use of customized platform scripts. By having this feature, it should be easier for annotators to see the classified regions and areas that may remain unclassified. Therefore, we wanted to have the ability to order shapes in an image or video in order to control how pixels are classified in regions where polygons overlap.<\/p>\n<p>Where classified regions must overlap, for example, road markers, signs on buildings, items with holes or voids, there needs to be a way to specify that a polygon needs to be in front for visualization and mask generation.<\/p>\n<div id='gallery-1' class='gallery galleryid-1109 gallery-columns-1 gallery-size-large'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"608\" src=\"https:\/\/pixeling.net\/work\/wp\/wp-content\/uploads\/2023\/02\/semseg1-1024x830.png\" class=\"attachment-large size-large\" alt=\"\" aria-describedby=\"gallery-1-1111\" srcset=\"https:\/\/pixeling.net\/work\/wp\/wp-content\/uploads\/2023\/02\/semseg1-1024x830.png 1024w, https:\/\/pixeling.net\/work\/wp\/wp-content\/uploads\/2023\/02\/semseg1-300x243.png 300w, https:\/\/pixeling.net\/work\/wp\/wp-content\/uploads\/2023\/02\/semseg1-768x623.png 768w, https:\/\/pixeling.net\/work\/wp\/wp-content\/uploads\/2023\/02\/semseg1-74x60.png 74w, https:\/\/pixeling.net\/work\/wp\/wp-content\/uploads\/2023\/02\/semseg1.png 1046w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-1111'>\n\t\t\t\tAn example is when an instance needs to be identified by 2 regions. Grouping or layering is required.\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n<h4>The Process and Solution<\/h4>\n<p>Both milestones&#8217; features sounded familiar to me. As a matter of fact, both of the features are available in the existing authoring tools, like Photoshop, Illustrator, and even Figma. What I needed to do was to integrate these features into the existing Video\/Image annotation tool. I did not do much research as I dived in right away into the design as I knew what I had to do.<\/p>\n<p>For shared edges, we decided to have an option in the tool itself, where annotators could turn it on, and the vertices of the polygons could be snapped into place if there were adjacent vertices available.<\/p>\n<h4><\/h4>\n<div class=\"wp-playlist wp-video-playlist wp-playlist-light\">\n\t\t<video controls=\"controls\" preload=\"none\" width=\"728\"\n\t\t height=\"410\"\t><\/video>\n\t<div class=\"wp-playlist-next\"><\/div>\n\t<div class=\"wp-playlist-prev\"><\/div>\n\t<noscript>\n\t<ol>\n\t\t<li><a href='https:\/\/pixeling.net\/work\/wp\/wp-content\/uploads\/2023\/02\/Shared-Edges-Enabled.mp4'>Shared Edges Enabled<\/a><\/li>\t<\/ol>\n\t<\/noscript>\n\t<script type=\"application\/json\" class=\"wp-playlist-script\">{\"type\":\"video\",\"tracklist\":true,\"tracknumbers\":true,\"images\":true,\"artists\":true,\"tracks\":[{\"src\":\"https:\/\/pixeling.net\/work\/wp\/wp-content\/uploads\/2023\/02\/Shared-Edges-Enabled.mp4\",\"type\":\"video\/mp4\",\"title\":\"Shared Edges Enabled\",\"caption\":\"\",\"description\":\"\",\"meta\":{\"length_formatted\":\"0:56\"},\"dimensions\":{\"original\":{\"width\":1920,\"height\":1080},\"resized\":{\"width\":728,\"height\":410}},\"image\":{\"src\":\"https:\/\/pixeling.net\/work\/wp\/wp-includes\/images\/media\/video.svg\",\"width\":48,\"height\":64},\"thumb\":{\"src\":\"https:\/\/pixeling.net\/work\/wp\/wp-includes\/images\/media\/video.svg\",\"width\":48,\"height\":64}}]}<\/script>\n<\/div>\n\t\n<p>As for the mask opacity and layer reordering, they were quite similar to what we see in Photoshop and other authoring tools, where there will be a shortcut menu for the annotators to access.<\/p>\n<div class=\"wp-playlist wp-video-playlist wp-playlist-light\">\n\t\t<video controls=\"controls\" preload=\"none\" width=\"728\"\n\t\t height=\"410\"\t><\/video>\n\t<div class=\"wp-playlist-next\"><\/div>\n\t<div class=\"wp-playlist-prev\"><\/div>\n\t<noscript>\n\t<ol>\n\t\t<li><a href='https:\/\/pixeling.net\/work\/wp\/wp-content\/uploads\/2023\/02\/Mask-Opacity-and-Reordering.mp4'>Mask Opacity and Reordering<\/a><\/li>\t<\/ol>\n\t<\/noscript>\n\t<script type=\"application\/json\" class=\"wp-playlist-script\">{\"type\":\"video\",\"tracklist\":true,\"tracknumbers\":true,\"images\":true,\"artists\":true,\"tracks\":[{\"src\":\"https:\/\/pixeling.net\/work\/wp\/wp-content\/uploads\/2023\/02\/Mask-Opacity-and-Reordering.mp4\",\"type\":\"video\/mp4\",\"title\":\"Mask Opacity and Reordering\",\"caption\":\"\",\"description\":\"\",\"meta\":{\"length_formatted\":\"0:31\"},\"dimensions\":{\"original\":{\"width\":1920,\"height\":1080},\"resized\":{\"width\":728,\"height\":410}},\"image\":{\"src\":\"https:\/\/pixeling.net\/work\/wp\/wp-includes\/images\/media\/video.svg\",\"width\":48,\"height\":64},\"thumb\":{\"src\":\"https:\/\/pixeling.net\/work\/wp\/wp-includes\/images\/media\/video.svg\",\"width\":48,\"height\":64}}]}<\/script>\n<\/div>\n\t\n<p>Below are the concept design workflows in Figma.<\/p>\n<p><iframe loading=\"lazy\" style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" src=\"https:\/\/www.figma.com\/embed?embed_host=share&amp;url=https%3A%2F%2Fwww.figma.com%2Ffile%2FERL4IdgmywASApdehPBsHG%2FSemantic-Segmentation%3Fnode-id%3D0%253A1%26t%3Dz1gcCb3T6bW4PTHc-1\" width=\"800\" height=\"450\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h4>Conclusion<\/h4>\n<p><span style=\"font-weight: 400;\">Milestone 1 and milestone 2 features were released in late October 2022, and although they weren&#8217;t considered really big features, still, they helped the annotators a lot, especially when annotating thousands of data in the system. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Goal The main goal of the Semantic Segmentation project was to have a more accurate annotation and the ability for more efficient customer review, where customers could review and get delivery output of masks instead. This project was divided into 3 milestones and I was tasked to design for milestones 1 and 2. Issues to &hellip; <\/p>\n","protected":false},"author":1,"featured_media":1343,"comment_status":"closed","ping_status":"closed","template":"","rara_portfolio_categories":[2],"class_list":["post-1109","rara-portfolio","type-rara-portfolio","status-publish","has-post-thumbnail","hentry","rara_portfolio_categories-uiux","latest_post"],"_links":{"self":[{"href":"https:\/\/pixeling.net\/work\/wp\/index.php?rest_route=\/wp\/v2\/rara-portfolio\/1109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixeling.net\/work\/wp\/index.php?rest_route=\/wp\/v2\/rara-portfolio"}],"about":[{"href":"https:\/\/pixeling.net\/work\/wp\/index.php?rest_route=\/wp\/v2\/types\/rara-portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/pixeling.net\/work\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixeling.net\/work\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1109"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixeling.net\/work\/wp\/index.php?rest_route=\/wp\/v2\/media\/1343"}],"wp:attachment":[{"href":"https:\/\/pixeling.net\/work\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1109"}],"wp:term":[{"taxonomy":"rara_portfolio_categories","embeddable":true,"href":"https:\/\/pixeling.net\/work\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Frara_portfolio_categories&post=1109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}