Spaces:
Running
Running
Download index.html from bag-lab/MARS: direct link, hf CLI and curl.
- Browser
- Download file 30.4 kB
-
https://huggingface.co/spaces/bag-lab/MARS/resolve/main/index.html
- Command line
-
hf download hf://spaces/bag-lab/MARS/index.html
-
curl -L -o index.html https://huggingface.co/spaces/bag-lab/MARS/resolve/main/index.html
30.4 kB
| <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> | |
| <!-- Global site tag (gtag.js) - Google Analytics --> | |
| <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"); | |
| // List all 4 images in your ./test folder | |
| 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"> | |
| <!-- PDF Link. --> | |
| <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> | |
| <!-- Code Link. --> | |
| <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> | |
| <!-- Dataset Link. --> | |
| <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"> | |
| <!-- <video poster="" id="blueshirt" autoplay controls muted loop playsinline height="100%"> | |
| <source src="./videos/dtb70/2.mp4" | |
| type="video/mp4"> | |
| </video> --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section" id="Abstract"> | |
| <div class="container is-max-desktop"> | |
| <!-- Abstract. --> | |
| <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"> | |
| <!-- Animation. --> | |
| <div class="columns is-centered has-text-centered"> | |
| <div class="column is-full-width"> | |
| <h2 class="title is-3">Click 1 Demo</h2> | |
| <!-- Interpolating. --> | |
| <!-- <h3 class="title is-4">Interpolating states</h3> --> | |
| <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> | |
| <!--/ Animation. --> | |
| </div> | |
| </section> | |
| <section class="section" id="Click 2 Demo"> | |
| <div class="container is-max-desktop"> | |
| <!-- Animation. --> | |
| <div class="columns is-centered has-text-centered"> | |
| <div class="column is-full-width"> | |
| <h2 class="title is-3">Click 2 Demo</h2> | |
| <!-- Interpolating. --> | |
| <!-- <h3 class="title is-4">Interpolating states</h3> --> | |
| <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> | |
| <!--/ Animation. --> | |
| </div> | |
| </section> | |
| <section class="section" id="Click 3 Demo"> | |
| <div class="container is-max-desktop"> | |
| <!-- Animation. --> | |
| <div class="columns is-centered has-text-centered"> | |
| <div class="column is-full-width"> | |
| <h2 class="title is-3">Click 3 Demo</h2> | |
| <!-- Interpolating. --> | |
| <!-- <h3 class="title is-4">Interpolating states</h3> --> | |
| <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> | |
| <!--/ Animation. --> | |
| </div> | |
| </section> | |
| <!-- CLICK JITTER --> | |
| <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"> | |
| <!-- Left column: Fixed ground truth image --> | |
| <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> | |
| <!-- Middle column: Fixed correct click position --> | |
| <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> | |
| <!-- Right column: Slider with jitter images --> | |
| <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() { | |
| // Click jitter images (excluding 101_77.png since it's fixed in the middle) | |
| 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> | |
| <!-- Intersection Slider --> | |
| <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> | |
| <!-- Roundabout Slider --> | |
| <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> | |
| <!-- Splits Slider --> | |
| <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> | |
| <!-- T-Junction Slider --> | |
| <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() { | |
| // Intersection images | |
| 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" | |
| ]; | |
| // Roundabout images | |
| 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", | |
| ]; | |
| // Splits images | |
| 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" | |
| ]; | |
| // T-Junction images (only 1 image visible in folder) | |
| 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" | |
| ]; | |
| // Setup slider for Intersection | |
| setupSlider('intersection', intersectionImages); | |
| // Setup slider for Roundabout | |
| setupSlider('roundabout', roundaboutImages); | |
| // Setup slider for Splits | |
| setupSlider('splits', splitsImages); | |
| // Setup slider for T-Junction | |
| 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"> | |
| <!-- Animation. --> | |
| <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> | |
| <!-- Interpolating. --> | |
| <!-- <h3 class="title is-4">Interpolating states</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"> | |
| <!-- <h3 class="subtitle is-5">Original Inference</h3> --> | |
| <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"> | |
| <!-- <h3 class="subtitle is-5">After Click</h3> --> | |
| <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"> | |
| <!-- <h3 class="subtitle is-5">After Click</h3> --> | |
| <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> | |
| <!-- Interpolating. --> | |
| <!-- <h3 class="title is-4">Interpolating states</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"> | |
| <!-- <h3 class="subtitle is-5">Original Inference</h3> --> | |
| <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"> | |
| <!-- <h3 class="subtitle is-5">After Click</h3> --> | |
| <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"> | |
| <!-- <h3 class="subtitle is-5">After Click</h3> --> | |
| <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/> | |
| <!-- Interpolating. --> | |
| <!-- <h3 class="title is-4">Interpolating states</h3> --> | |
| <br/> | |
| </div> | |
| </div> | |
| <!--/ Animation. --> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |