Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>MAP Challenge</title> | |
| <style> | |
| :root { | |
| color-scheme: light; | |
| --ink: #111827; | |
| --muted: #4b5563; | |
| --line: #d7dee8; | |
| --surface: #f8fafc; | |
| --paper: #ffffff; | |
| --blue: #1d4ed8; | |
| --green: #0f766e; | |
| --amber: #b45309; | |
| --coral: #be3a2f; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| color: var(--ink); | |
| background: var(--surface); | |
| } | |
| a { | |
| color: inherit; | |
| } | |
| .skip-link { | |
| position: absolute; | |
| left: 16px; | |
| top: 16px; | |
| z-index: 100; | |
| transform: translateY(-160%); | |
| border-radius: 8px; | |
| padding: 10px 14px; | |
| background: #ffffff; | |
| color: var(--ink); | |
| font-weight: 800; | |
| text-decoration: none; | |
| box-shadow: 0 0 0 3px #fbbf24; | |
| } | |
| .skip-link:focus-visible { | |
| transform: translateY(0); | |
| } | |
| a:focus-visible { | |
| outline: 3px solid #fbbf24; | |
| outline-offset: 3px; | |
| } | |
| .topbar { | |
| position: absolute; | |
| z-index: 10; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 18px; | |
| padding: 18px max(24px, calc((100vw - 1160px) / 2)); | |
| color: #ffffff; | |
| } | |
| .brand { | |
| font-weight: 800; | |
| font-size: 1rem; | |
| } | |
| .nav { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: flex-end; | |
| gap: 10px; | |
| } | |
| .nav a { | |
| min-height: 38px; | |
| display: inline-flex; | |
| align-items: center; | |
| border: 1px solid rgba(255, 255, 255, 0.42); | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| color: #ffffff; | |
| background: rgba(17, 24, 39, 0.28); | |
| text-decoration: none; | |
| font-weight: 700; | |
| font-size: 0.92rem; | |
| } | |
| .nav a:focus-visible { | |
| background: #ffffff; | |
| color: var(--ink); | |
| } | |
| .hero { | |
| min-height: 66vh; | |
| display: grid; | |
| align-items: end; | |
| position: relative; | |
| isolation: isolate; | |
| background: | |
| linear-gradient(90deg, rgba(17, 24, 39, 0.88), rgba(17, 24, 39, 0.58) 52%, rgba(17, 24, 39, 0.16)), | |
| url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/VBZ_Tram_4035_leaving_Schiffbau%2C_Z%C3%BCrich.jpg/1280px-VBZ_Tram_4035_leaving_Schiffbau%2C_Z%C3%BCrich.jpg") center / cover; | |
| } | |
| .hero-inner { | |
| width: min(1160px, calc(100% - 40px)); | |
| margin: 0 auto; | |
| padding: 120px 0 54px; | |
| color: #ffffff; | |
| } | |
| .eyebrow { | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 32px; | |
| border-left: 4px solid var(--green); | |
| padding: 4px 10px; | |
| background: rgba(255, 255, 255, 0.14); | |
| font-weight: 800; | |
| font-size: 0.86rem; | |
| text-transform: uppercase; | |
| } | |
| h1 { | |
| max-width: 830px; | |
| margin: 18px 0 16px; | |
| font-size: 4rem; | |
| line-height: 0.98; | |
| } | |
| .lead { | |
| max-width: 820px; | |
| margin: 0; | |
| color: #eef5ff; | |
| font-size: 1.18rem; | |
| line-height: 1.65; | |
| } | |
| .band { | |
| padding: 54px 20px; | |
| } | |
| .band.alt { | |
| background: #ffffff; | |
| } | |
| .inner { | |
| width: min(1160px, 100%); | |
| margin: 0 auto; | |
| } | |
| .section-head { | |
| max-width: 780px; | |
| margin-bottom: 26px; | |
| } | |
| h2 { | |
| margin: 0 0 10px; | |
| font-size: 2rem; | |
| line-height: 1.1; | |
| } | |
| p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 1rem; | |
| line-height: 1.68; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 16px; | |
| } | |
| .tile { | |
| min-height: 178px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 18px; | |
| background: var(--paper); | |
| } | |
| .tile h3 { | |
| margin: 0 0 8px; | |
| font-size: 1.05rem; | |
| } | |
| .tile.accent-blue, | |
| .tile.accent-green, | |
| .tile.accent-amber { | |
| border-top: 5px solid var(--green); | |
| } | |
| .workflow { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 14px; | |
| } | |
| .step { | |
| min-height: 154px; | |
| border: 1px solid var(--line); | |
| border-top: 5px solid var(--green); | |
| border-radius: 8px; | |
| padding: 16px; | |
| background: #ffffff; | |
| } | |
| .number { | |
| width: 34px; | |
| height: 34px; | |
| display: inline-grid; | |
| place-items: center; | |
| border-radius: 50%; | |
| margin-bottom: 12px; | |
| background: #e0f2fe; | |
| color: #075985; | |
| font-weight: 850; | |
| } | |
| .status { | |
| display: grid; | |
| grid-template-columns: 1.2fr 1fr; | |
| gap: 24px; | |
| align-items: start; | |
| } | |
| .status-list { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .status-row { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 16px; | |
| border-bottom: 1px solid var(--line); | |
| padding: 12px 0; | |
| } | |
| .status-row span:last-child { | |
| color: var(--muted); | |
| font-weight: 700; | |
| } | |
| .cta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin-top: 22px; | |
| } | |
| .button { | |
| min-height: 44px; | |
| display: inline-flex; | |
| align-items: center; | |
| border-radius: 8px; | |
| border: 1px solid var(--line); | |
| padding: 10px 14px; | |
| background: #ffffff; | |
| color: var(--ink); | |
| font-weight: 800; | |
| text-decoration: none; | |
| } | |
| .button.challenge { | |
| background: var(--green); | |
| color: #ffffff; | |
| border-color: var(--green); | |
| } | |
| .button.workshop { | |
| background: var(--blue); | |
| color: #ffffff; | |
| border-color: var(--blue); | |
| } | |
| .button.benchmark { | |
| background: var(--amber); | |
| color: #ffffff; | |
| border-color: var(--amber); | |
| } | |
| .button:focus-visible { | |
| box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px #fbbf24; | |
| } | |
| footer { | |
| border-top: 1px solid var(--line); | |
| padding: 22px 20px 30px; | |
| background: #ffffff; | |
| } | |
| .foot { | |
| width: min(1160px, 100%); | |
| margin: 0 auto; | |
| color: #64748b; | |
| font-size: 0.9rem; | |
| line-height: 1.55; | |
| } | |
| .foot a { | |
| color: #1d4ed8; | |
| } | |
| @media (max-width: 860px) { | |
| .topbar { | |
| position: static; | |
| background: #111827; | |
| color: #ffffff; | |
| padding: 14px 16px; | |
| align-items: flex-start; | |
| } | |
| .hero { | |
| min-height: 58vh; | |
| } | |
| .hero-inner { | |
| padding: 56px 0 44px; | |
| } | |
| h1 { | |
| font-size: 2.7rem; | |
| } | |
| .lead { | |
| font-size: 1.05rem; | |
| } | |
| .grid, | |
| .workflow, | |
| .status { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 520px) { | |
| .topbar { | |
| flex-direction: column; | |
| } | |
| .nav { | |
| justify-content: flex-start; | |
| } | |
| .nav a, | |
| .button { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| h1 { | |
| font-size: 2.25rem; | |
| } | |
| h2 { | |
| font-size: 1.55rem; | |
| } | |
| .band { | |
| padding: 42px 16px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a class="skip-link" href="#main-content">Skip to main content</a> | |
| <header class="topbar"> | |
| <div class="brand">MAP AI Benchmark</div> | |
| <nav class="nav" aria-label="Public MAP pages"> | |
| <a href="https://huggingface.co/spaces/map-ai-benchmark/workshop" target="_blank" rel="noopener noreferrer" aria-label="Workshop, opens in a new tab">Workshop</a> | |
| <a href="https://huggingface.co/spaces/map-ai-benchmark/benchmark" target="_blank" rel="noopener noreferrer" aria-label="Benchmark, opens in a new tab">Benchmark</a> | |
| </nav> | |
| </header> | |
| <main id="main-content" tabindex="-1"> | |
| <section class="hero" aria-labelledby="challenge-title"> | |
| <div class="hero-inner"> | |
| <span class="eyebrow">Challenge</span> | |
| <h1 id="challenge-title">Multimodal accessibility planning with AI models</h1> | |
| <p class="lead"> | |
| The MAP evaluation assesses multimodal AI systems as assistants for users with accessibility requirements when planning visits to real places. | |
| We enable evaluation in an open world setting and allow for dynamic changes in the real world by running assessments within specified windows. | |
| </p> | |
| </div> | |
| </section> | |
| <section class="band alt" aria-labelledby="challenge-scope-title"> | |
| <div class="inner"> | |
| <div class="section-head"> | |
| <h2 id="challenge-scope-title">Challenge Scope</h2> | |
| <p> | |
| The first version of MAP focuses on the city of Zurich, Switzerland. Systems are assessed on providing useful and accurate | |
| information for requests with specifications related to accessibility in relation to real locations such as restaurants, cafes, | |
| museums, local government, offices, and other places of interest. | |
| </p> | |
| </div> | |
| <div class="grid"> | |
| <article class="tile accent-green" aria-labelledby="challenge-places-title"> | |
| <h3 id="challenge-places-title">Places</h3> | |
| <p>Real-world entities where users need practical visit-planning information, including food venues, cultural venues, offices, and public-facing services.</p> | |
| </article> | |
| <article class="tile accent-blue" aria-labelledby="challenge-features-title"> | |
| <h3 id="challenge-features-title">Accessibility Features</h3> | |
| <p>Features include provisions for mobility, blind or low-vision, hearing, and cognitive requirements, including step-free entrance, toilet-door width, hearing-access provisions, coordinates, and related accessibility information.</p> | |
| </article> | |
| <article class="tile accent-amber" aria-labelledby="challenge-window-title"> | |
| <h3 id="challenge-window-title">Evaluation Window</h3> | |
| <p>Assessments run within specified windows so that model outputs can be judged against changing real-world conditions.</p> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="band" aria-labelledby="evaluation-design-title"> | |
| <div class="inner"> | |
| <div class="section-head"> | |
| <h2 id="evaluation-design-title">Evaluation Design</h2> | |
| <p> | |
| MAP is designed around realistic requests from the community and aims to take account of real-world changes. | |
| </p> | |
| </div> | |
| <div class="workflow"> | |
| <article class="step" aria-labelledby="prepare-title"> | |
| <div class="number">1</div> | |
| <h3 id="prepare-title">Prepare</h3> | |
| <p>Entrants use challenge details and validation data to prepare model systems.</p> | |
| </article> | |
| <article class="step" aria-labelledby="respond-title"> | |
| <div class="number">2</div> | |
| <h3 id="respond-title">Respond</h3> | |
| <p>Systems respond to samples from a set of prompt types.</p> | |
| </article> | |
| <article class="step" aria-labelledby="score-title"> | |
| <div class="number">3</div> | |
| <h3 id="score-title">Score</h3> | |
| <p>Responses are scored against ground truth data on places and features.</p> | |
| </article> | |
| <article class="step" aria-labelledby="report-title"> | |
| <div class="number">4</div> | |
| <h3 id="report-title">Report</h3> | |
| <p>Approved results will be published through a public leaderboard following evaluation phases.</p> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="band alt" aria-labelledby="phase-one-title"> | |
| <div class="inner status"> | |
| <div> | |
| <h2 id="phase-one-title">Phase One</h2> | |
| <p> | |
| These pages provide information on the challenge and workshop. Information on submission and the leaderboard will be added shortly. | |
| </p> | |
| <nav class="cta" aria-label="Related MAP pages"> | |
| <a class="button workshop" href="https://huggingface.co/spaces/map-ai-benchmark/workshop" target="_blank" rel="noopener noreferrer" aria-label="Workshop, opens in a new tab">Workshop</a> | |
| <a class="button benchmark" href="https://huggingface.co/spaces/map-ai-benchmark/benchmark" target="_blank" rel="noopener noreferrer" aria-label="Benchmark, opens in a new tab">Benchmark</a> | |
| </nav> | |
| </div> | |
| <div class="status-list" aria-label="MAP page status"> | |
| <div class="status-row"><strong>Challenge</strong><span>Live</span></div> | |
| <div class="status-row"><strong>Workshop</strong><span>Live</span></div> | |
| <div class="status-row"><strong>Benchmark</strong><span>Live</span></div> | |
| <div class="status-row"><strong>Submission portal</strong><span>Coming soon</span></div> | |
| <div class="status-row"><strong>Leaderboard</strong><span>Coming soon</span></div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="foot"></div> | |
| </footer> | |
| </body> | |
| </html> | |