| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="description" |
| content="MARS: A Foundational Map Auto-Regressor ."> |
| <meta name="keywords" content="Map Generation, Aerial Tracking, Grounding"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>MARS: A Foundational Map Auto-Regressor</title> |
|
|
| |
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-PYVRSFMDRL"></script> |
| <script> |
| window.dataLayer = window.dataLayer || []; |
| |
| function gtag() { |
| dataLayer.push(arguments); |
| } |
| |
| gtag('js', new Date()); |
| |
| gtag('config', 'G-PYVRSFMDRL'); |
| </script> |
|
|
| <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" |
| rel="stylesheet"> |
|
|
| <link rel="stylesheet" href="./static/css/bulma.min.css"> |
| <link rel="stylesheet" href="./static/css/bulma-carousel.min.css"> |
| <link rel="stylesheet" href="./static/css/bulma-slider.min.css"> |
| <link rel="stylesheet" href="./static/css/fontawesome.all.min.css"> |
| <link rel="stylesheet" |
| href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css"> |
| <link rel="stylesheet" href="./static/css/index.css"> |
| <link rel="icon" href="./static/images/favicon.svg"> |
|
|
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
| <script defer src="./static/js/fontawesome.all.min.js"></script> |
| <script src="./static/js/bulma-carousel.min.js"></script> |
| <script src="./static/js/bulma-slider.min.js"></script> |
| <script src="./static/js/index.js"></script> |
| </head> |
|
|
| <script> |
| const slider = document.getElementById("image-slider"); |
| const img = document.getElementById("slider-image"); |
| |
| |
| const images = [ |
| "./test/1.png", |
| "./test/2.png" |
| ]; |
| |
| slider.addEventListener("input", () => { |
| const index = parseInt(slider.value) - 1; |
| img.src = images[index]; |
| }); |
| </script> |
|
|
|
|
| <body> |
|
|
|
|
|
|
| <section class="hero" id="Overview"> |
| <div class="hero-body"> |
| <div class="container is-max-desktop"> |
| <div class="columns is-centered"> |
| <div class="column has-text-centered"> |
| <h1 class="title is-1 publication-title">MARS: A Foundational Map Auto-Regressor.</h1> |
| <h3 class="is-size-4 has-text-weight-bold" style="color: orange;"> |
| </h3> |
| <h3 class="is-size-4 has-text-weight-bold" style="color: orange;"> |
| </h3> |
|
|
|
|
| <div class="is-size-5 publication-authors"> |
| <span class="author-block"><sup></sup> </span> |
| </div> |
|
|
| <div class="column has-text-centered"> |
| <div class="publication-links"> |
| |
| <span class="link-block"> |
| <a href="https://openreview.net/pdf?id=QV4sV5cbLl" |
| class="external-link button is-normal is-rounded is-dark"> |
| <span class="icon"> |
| <i class="fas fa-file-pdf"></i> |
| </span> |
| <span>Paper</span> |
| </a> |
| </span> |
| |
| <span class="link-block"> |
| <a href="" |
| class="external-link button is-normal is-rounded is-dark"> |
| <span class="icon"> |
| <i class="fab fa-github"></i> |
| </span> |
| <span>Code</span> |
| </a> |
| </span> |
| |
| <span class="link-block"> |
| <a href="https://huggingface.co/datasets/bag-lab/MAP-3M" |
| class="external-link button is-normal is-rounded is-dark"> |
| <span class="icon"> |
| <i class="far fa-images"></i> |
| </span> |
| <span>Dataset</span> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation" style="background-color: #f5f5f5; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"> |
| <div class="container"> |
| <div class="navbar-menu"> |
| <div class="navbar-start" style="margin: 0 auto;"> |
| <a class="navbar-item" href="#abstract">Abstract</a> |
| <a class="navbar-item" href="#click1-demo">Click 1</a> |
| <a class="navbar-item" href="#click2-demo">Click 2</a> |
| <a class="navbar-item" href="#click3-demo">Click 3</a> |
| <a class="navbar-item" href="#click-jitter">Jitter Analysis</a> |
| <a class="navbar-item" href="#interactive-visualizations">Stroke Visualizations</a> |
| <a class="navbar-item" href="#failure-cases">Failure Cases</a> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
|
|
|
|
| <section class="hero is-light is-small" id="Inference Results"> |
| <div class="hero-body"> |
| <div class="container"> |
| <div id="results-carousel" class="carousel results-carousel"> |
| <div class="item item-chair-tp"> |
| <video poster="" id="chair-tp" autoplay controls muted loop playsinline height="100%"> |
| <source src="./inference_videos/1.mp4" |
| type="video/mp4"> |
| </video> |
| </div> |
| <div class="item item-shiba"> |
| <video poster="" id="shiba" autoplay controls muted loop playsinline height="100%"> |
| <source src="./inference_videos/2.mp4" |
| type="video/mp4"> |
| </video> |
| </div> |
| <div class="item item-fullbody"> |
| <video poster="" id="fullbody" autoplay controls muted loop playsinline height="100%"> |
| <source src="./inference_videos/3.mp4" |
| type="video/mp4"> |
| </video> |
| </div> |
| <div class="item item-blueshirt"> |
| |
| |
| |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
|
|
| <section class="section" id="Abstract"> |
| <div class="container is-max-desktop"> |
| |
| <div class="columns is-centered has-text-centered"> |
| <div class="column is-four-fifths"> |
| <h2 class="title is-3">Abstract</h2> |
| <div class="content has-text-justified"> |
| <p>Map generation tasks, featured by extensive non-structural vectorized data (e.g., |
| points, polylines, and polygons), pose significant challenges to common pixelwise generative models. Past works, by segmenting and then performing various |
| vectorized post-processing, usually sacrifice accuracy. Motivated by the recent |
| huge success of auto-regressive language modeling, we propose the first map |
| foundational model: Map Auto-Regressor (MARS), that is capable of generating both multi-polyline road networks and polygon buildings in a unified manner. |
| We collected by far the largest multi-class map dataset, MAP-3M, to support the |
| robust training. Extensive benchmarks highlight the performance superiority of |
| MARS against literature works. Meanwhile, benefited from the auto-regressive |
| teaching-forcing based training, we develop the “Chat with MARS” capability |
| that enables interactive human-in-the-loop map generation and correction.</p> |
|
|
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
|
|
| <section class="section" id="Click 1 Demo"> |
| <div class="container is-max-desktop"> |
| |
| <div class="columns is-centered has-text-centered"> |
| <div class="column is-full-width"> |
| <h2 class="title is-3">Click 1 Demo</h2> |
|
|
| |
| |
| <div class="content has-text-justified"> |
| <p> |
| This is particularly helpful when a test image is extremely blurry or out-of-domain: once the first |
| vertex predicted by MARS is ill-conditioned, due to error accumulation of auto-regressive nature, the whole sequence may suffer from less detections. In such case, SOS chatting can greatly improve |
| the full image prediction performance. |
| </p> |
| </div> |
| <div class="columns is-vcentered interpolation-panel"> |
| <div class="column is-6 has-text-centered"> |
| <h3 class="subtitle is-5">Original Inference</h3> |
| <video poster="" autoplay controls muted loop playsinline style="width: 100%; height: auto;"> |
| <source src="./click1_videos/29638.mp4" type="video/mp4"> |
| Your browser does not support the video tag. |
| </video> |
| </div> |
| <div class="column is-6 has-text-centered"> |
| <h3 class="subtitle is-5">After Click</h3> |
| <video poster="" autoplay controls muted loop playsinline style="width: 100%; height: auto;"> |
| <source src="./click1_videos/29638_click.mp4" type="video/mp4"> |
| Your browser does not support the video tag. |
| </video> |
| </div> |
| </div> |
| <br/> |
| </div> |
| </div> |
| |
| </div> |
| </section> |
|
|
|
|
| <section class="section" id="Click 2 Demo"> |
| <div class="container is-max-desktop"> |
| |
| <div class="columns is-centered has-text-centered"> |
| <div class="column is-full-width"> |
| <h2 class="title is-3">Click 2 Demo</h2> |
|
|
| |
| |
| <div class="content has-text-justified"> |
| <p> |
| Mid-of-sequence (MOS) chatting aims to intercept MARS’s prediction sequence when it drifts from |
| the desired trajectory, which is common in vectorized road generation. This is particularly helpful when certain predictions in an image needs to be adjusted. |
| </p> |
| </div> |
| <div class="columns is-vcentered interpolation-panel"> |
| <div class="column is-6 has-text-centered"> |
| <h3 class="subtitle is-5">Original Inference</h3> |
| <img src="./click2_videos/output.png" |
| alt="Original Inference" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| <div class="column is-6 has-text-centered"> |
| <h3 class="subtitle is-5">After Click</h3> |
| <img src="./click2_videos/output_click.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| </div> |
| <br/> |
| </div> |
| </div> |
| |
| </div> |
| </section> |
|
|
|
|
|
|
| <section class="section" id="Click 3 Demo"> |
| <div class="container is-max-desktop"> |
| |
| <div class="columns is-centered has-text-centered"> |
| <div class="column is-full-width"> |
| <h2 class="title is-3">Click 3 Demo</h2> |
|
|
| |
| |
| <div class="content has-text-justified"> |
| <p> |
| Mid-of-sequence (MOS) chatting aims to intercept MARS’s prediction sequence when it drifts from |
| the desired trajectory, which is common in vectorized road generation. This is particularly helpful when certain predictions in an image needs to be adjusted. |
| End-of-sequence (EOS) chatting aims to augment MARS’s prediction when there are objects missed |
| from the final predictions, which is common for various small map elements. |
| </p> |
| </div> |
| <div class="columns is-vcentered interpolation-panel"> |
| <div class="column is-6 has-text-centered"> |
| <h3 class="subtitle is-5">Original Inference</h3> |
| <video poster="" autoplay controls muted loop playsinline style="width: 100%; height: auto;"> |
| <source src="./click3_videos/53819.mp4" type="video/mp4"> |
| Your browser does not support the video tag. |
| </video> |
| </div> |
| <div class="column is-6 has-text-centered"> |
| <h3 class="subtitle is-5">After Click</h3> |
| <video poster="" autoplay controls muted loop playsinline style="width: 100%; height: auto;"> |
| <source src="./click3_videos/53819_click.mp4" type="video/mp4"> |
| Your browser does not support the video tag. |
| </video> |
| </div> |
| </div> |
| <br/> |
| </div> |
| </div> |
| |
| </div> |
| </section> |
|
|
|
|
|
|
| |
| <section class="section" id="Click Jitter"> |
| <div class="container is-max-desktop"> |
| <div class="columns is-centered has-text-centered"> |
| <div class="column is-full-width"> |
| <h2 class="title is-3">Click Jitter Analysis</h2> |
| |
| <div class="content has-text-justified" style="margin-top: 40px;"> |
| <h3 class="title is-4">Robustness to Click Position Variations</h3> |
| <p>The left image shows the ground truth reference. The middle image shows the prediction with correct click position. Use the slider to browse through predictions with different click positions.</p> |
| </div> |
| |
| <div class="columns is-vcentered"> |
| |
| <div class="column is-4 has-text-centered"> |
| <h4 class="subtitle is-6" style="margin-bottom: 10px;">Ground Truth</h4> |
| <img src="./click_jitter/initial.png" |
| alt="Ground Truth" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| |
| |
| <div class="column is-4 has-text-centered"> |
| <h4 class="subtitle is-6" style="margin-bottom: 10px;">Correct Click Position</h4> |
| <img src="./click_jitter/101_77.png" |
| alt="Correct Click Position" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| |
| |
| <div class="column is-4 has-text-centered"> |
| <h4 class="subtitle is-6" style="margin-bottom: 10px;">Click Position Variations</h4> |
| <img id="slider-jitter" |
| src="./click_jitter/101_64.png" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| <input class="slider is-fullwidth is-large is-info" |
| id="slider-jitter-input" |
| type="range" min="1" max="5" value="1" step="1" |
| style="margin-top: 20px;"> |
| <p class="has-text-centered" style="margin-top: 10px;"> |
| <span id="counter-jitter">Image 1 of 5</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const jitterImages = [ |
| "./click_jitter/101_64.png", |
| "./click_jitter/101_70.png", |
| "./click_jitter/101_85.png", |
| "./click_jitter/110_77.png", |
| "./click_jitter/90_77.png" |
| ]; |
| |
| const sliderJitter = document.getElementById('slider-jitter-input'); |
| const imgJitter = document.getElementById('slider-jitter'); |
| const counterJitter = document.getElementById('counter-jitter'); |
| |
| if (sliderJitter && imgJitter && counterJitter) { |
| sliderJitter.max = jitterImages.length; |
| |
| sliderJitter.addEventListener("input", () => { |
| const index = parseInt(sliderJitter.value) - 1; |
| imgJitter.src = jitterImages[index]; |
| counterJitter.textContent = `Image ${sliderJitter.value} of ${jitterImages.length}`; |
| }); |
| } |
| }); |
| </script> |
|
|
|
|
| <section class="section" id="Stroke Visualizations"> |
| <div class="container is-max-desktop"> |
| <div class="columns is-centered has-text-centered"> |
| <div class="column is-full-width"> |
| <h2 class="title is-3">Stroke Visualizations</h2> |
| |
| |
| <div class="content has-text-justified" style="margin-top: 40px;"> |
| <h3 class="title is-4">Intersection Examples</h3> |
| <p>Browse through different intersection visualizations.</p> |
| </div> |
| <div class="columns is-centered"> |
| <div class="column is-10"> |
| <img id="slider-intersection" |
| src="./stroke_visuals/intersection/19.png" |
| style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| <input class="slider is-fullwidth is-large is-info" |
| id="slider-intersection-input" |
| type="range" min="1" max="14" value="1" step="1" |
| style="margin-top: 20px;"> |
| <p class="has-text-centered" style="margin-top: 10px;"> |
| <span id="counter-intersection">Image 1 of 14</span> |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div class="content has-text-justified" style="margin-top: 40px;"> |
| <h3 class="title is-4">Roundabout Examples</h3> |
| <p>Browse through different roundabout visualizations.</p> |
| </div> |
| <div class="columns is-centered"> |
| <div class="column is-10"> |
| <img id="slider-roundabout" |
| src="./stroke_visuals/roundabout/65.png" |
| style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| <input class="slider is-fullwidth is-large is-info" |
| id="slider-roundabout-input" |
| type="range" min="1" max="11" value="1" step="1" |
| style="margin-top: 20px;"> |
| <p class="has-text-centered" style="margin-top: 10px;"> |
| <span id="counter-roundabout">Image 1 of 11</span> |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div class="content has-text-justified" style="margin-top: 40px;"> |
| <h3 class="title is-4">Splits Examples</h3> |
| <p>Browse through different road splits visualizations.</p> |
| </div> |
| <div class="columns is-centered"> |
| <div class="column is-10"> |
| <img id="slider-splits" |
| src="./stroke_visuals/splits/14.png" |
| style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| <input class="slider is-fullwidth is-large is-info" |
| id="slider-splits-input" |
| type="range" min="1" max="11" value="1" step="1" |
| style="margin-top: 20px;"> |
| <p class="has-text-centered" style="margin-top: 10px;"> |
| <span id="counter-splits">Image 1 of 11</span> |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div class="content has-text-justified" style="margin-top: 40px;"> |
| <h3 class="title is-4">T-Junction Examples</h3> |
| <p>Browse through different T-junction visualizations.</p> |
| </div> |
| <div class="columns is-centered"> |
| <div class="column is-10"> |
| <img id="slider-tjunction" |
| src="./stroke_visuals/T_Junction/19.png" |
| style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| <input class="slider is-fullwidth is-large is-info" |
| id="slider-tjunction-input" |
| type="range" min="1" max="10" value="1" step="1" |
| style="margin-top: 20px;"> |
| <p class="has-text-centered" style="margin-top: 10px;"> |
| <span id="counter-tjunction">Image 1 of 1</span> |
| </p> |
| </div> |
| </div> |
|
|
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const intersectionImages = [ |
| "./stroke_visuals/intersection/19.png", |
| "./stroke_visuals/intersection/53.png", |
| "./stroke_visuals/intersection/59.png", |
| "./stroke_visuals/intersection/119.png", |
| "./stroke_visuals/intersection/214.png", |
| "./stroke_visuals/intersection/305.png", |
| "./stroke_visuals/intersection/382.png", |
| "./stroke_visuals/intersection/411.png", |
| "./stroke_visuals/intersection/412.png", |
| "./stroke_visuals/intersection/676.png", |
| "./stroke_visuals/intersection/726.png", |
| "./stroke_visuals/intersection/920.png", |
| "./stroke_visuals/intersection/1016.png", |
| "./stroke_visuals/intersection/1058.png", |
| "./stroke_visuals/intersection/1099.png", |
| "./stroke_visuals/intersection/1248.png" |
| ]; |
| |
| |
| const roundaboutImages = [ |
| "./stroke_visuals/roundabout/83.png", |
| "./stroke_visuals/roundabout/115.png", |
| "./stroke_visuals/roundabout/173.png", |
| "./stroke_visuals/roundabout/187.png", |
| "./stroke_visuals/roundabout/217.png", |
| "./stroke_visuals/roundabout/224.png", |
| "./stroke_visuals/roundabout/356.png", |
| "./stroke_visuals/roundabout/400.png", |
| "./stroke_visuals/roundabout/413.png", |
| "./stroke_visuals/roundabout/420.png", |
| "./stroke_visuals/roundabout/688.png", |
| ]; |
| |
| |
| const splitsImages = [ |
| "./stroke_visuals/splits/14.png", |
| "./stroke_visuals/splits/54.png", |
| "./stroke_visuals/splits/71.png", |
| "./stroke_visuals/splits/122.png", |
| "./stroke_visuals/splits/135.png", |
| "./stroke_visuals/splits/145.png", |
| "./stroke_visuals/splits/341.png", |
| "./stroke_visuals/splits/386.png", |
| "./stroke_visuals/splits/813.png", |
| "./stroke_visuals/splits/938.png", |
| "./stroke_visuals/splits/953.png" |
| ]; |
| |
| |
| const tjunctionImages = [ |
| "./stroke_visuals/T_Junction/21.png", |
| "./stroke_visuals/T_Junction/31.png", |
| "./stroke_visuals/T_Junction/60.png", |
| "./stroke_visuals/T_Junction/254.png", |
| "./stroke_visuals/T_Junction/286.png", |
| "./stroke_visuals/T_Junction/296.png", |
| "./stroke_visuals/T_Junction/302.png", |
| "./stroke_visuals/T_Junction/310.png", |
| "./stroke_visuals/T_Junction/362.png", |
| "./stroke_visuals/T_Junction/749.png" |
| ]; |
| |
| |
| setupSlider('intersection', intersectionImages); |
| |
| setupSlider('roundabout', roundaboutImages); |
| |
| setupSlider('splits', splitsImages); |
| |
| setupSlider('tjunction', tjunctionImages); |
| |
| function setupSlider(name, images) { |
| const slider = document.getElementById(`slider-${name}-input`); |
| const img = document.getElementById(`slider-${name}`); |
| const counter = document.getElementById(`counter-${name}`); |
| |
| slider.max = images.length; |
| |
| slider.addEventListener("input", () => { |
| const index = parseInt(slider.value) - 1; |
| img.src = images[index]; |
| counter.textContent = `Image ${slider.value} of ${images.length}`; |
| }); |
| } |
| }); |
| </script> |
|
|
|
|
| <section class="section" id="Challenging Cases"> |
| |
| <div class="container is-max-desktop"> |
| |
| <div class="columns is-centered has-text-centered"> |
| <div class="column is-full-width"> |
| <h2 class="title is-3"> Challenging Cases</h2> |
| <h3 class="title is-4"> Complex Intersection</h3> |
|
|
| |
| |
| <div class="content has-text-justified"> |
| <p> |
| Good Examples. |
| </p> |
| </div> |
| <div class="columns is-vcentered interpolation-panel"> |
| <div class="column is-4 has-text-centered"> |
| <img src="./hardcase_good_visuals/intersection_good/plot_1349291.png" |
| alt="Original Inference" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| <div class="column is-4 has-text-centered"> |
| <img src="./hardcase_good_visuals/intersection_good/plot_1646496.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| <div class="column is-4 has-text-centered"> |
| <img src="./hardcase_good_visuals/intersection_good/plot_683728.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| </div> |
|
|
| <div class="columns is-vcentered interpolation-panel" style="margin-top: 20px;"> |
| <div class="column is-4 has-text-centered"> |
| <img src="./hardcase_good_visuals/intersection_good/plot_434008.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| <div class="column is-4 has-text-centered"> |
| <img src="./hardcase_good_visuals/intersection_good/plot_873922.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| <div class="column is-4 has-text-centered"> |
| <img src="./hardcase_good_visuals/intersection_good/plot_1349291.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| </div> |
| <div class="content has-text-justified"> |
| <p> |
| Poor Examples |
| </p> |
| </div> |
| <div class="columns is-vcentered interpolation-panel"> |
| <div class="column is-4 has-text-centered"> |
| |
| <img src="./failure_case_visuals/complex_intersection/plot_16248.png" |
| alt="Original Inference" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| <div class="column is-4 has-text-centered"> |
| |
| <img src="./failure_case_visuals/complex_intersection/plot_81558.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| <div class="column is-4 has-text-centered"> |
| |
| <img src="./failure_case_visuals/complex_intersection/plot_83875.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| </div> |
| <br/> |
| <h3 class="title is-4"> Occlusions</h3> |
|
|
| |
| |
| <div class="content has-text-justified"> |
| <p> |
| Good Examples. |
| </p> |
| </div> |
| <div class="columns is-vcentered interpolation-panel"> |
| <div class="column is-4 has-text-centered"> |
| <img src="./hardcase_good_visuals/occluded_good/plot_292951.png" |
| alt="Original Inference" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| <div class="column is-4 has-text-centered"> |
| <img src="./hardcase_good_visuals/occluded_good/plot_424350.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| <div class="column is-4 has-text-centered"> |
| <img src="./hardcase_good_visuals/occluded_good/plot_483392.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| </div> |
|
|
| <div class="columns is-vcentered interpolation-panel" style="margin-top: 20px;"> |
| <div class="column is-4 has-text-centered"> |
| <img src="./hardcase_good_visuals/occluded_good/plot_485453.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| <div class="column is-4 has-text-centered"> |
| <img src="./hardcase_good_visuals/occluded_good/plot_624019.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| <div class="column is-4 has-text-centered"> |
| <img src="./hardcase_good_visuals/occluded_good/plot_947394.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| </div> |
|
|
| <div class="content has-text-justified"> |
| <p> |
| Bad Examples. |
| </p> |
| </div> |
| <div class="columns is-vcentered interpolation-panel"> |
| <div class="column is-4 has-text-centered"> |
| |
| <img src="./failure_case_visuals/occluded/plot_113602.png" |
| alt="Original Inference" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| <div class="column is-4 has-text-centered"> |
| |
| <img src="./failure_case_visuals/occluded/plot_124720.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| <div class="column is-4 has-text-centered"> |
| |
| <img src="./failure_case_visuals/occluded/plot_13641.png" |
| alt="After Click" |
| style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> |
| </div> |
| </div> |
| <br/> |
| |
| |
| <br/> |
| </div> |
| </div> |
| |
| </div> |
| </section> |
|
|
|
|
|
|
| </body> |
| </html> |
