Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>MAP Benchmark</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; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| background: var(--surface); | |
| color: var(--ink); | |
| } | |
| .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; | |
| } | |
| .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: 58vh; | |
| display: grid; | |
| align-items: end; | |
| background: | |
| linear-gradient(90deg, rgba(17, 24, 39, 0.88), rgba(17, 24, 39, 0.54) 55%, rgba(17, 24, 39, 0.08)), | |
| 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: 112px 0 46px; | |
| color: #ffffff; | |
| } | |
| .eyebrow { | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 32px; | |
| border-left: 4px solid var(--amber); | |
| padding: 4px 10px; | |
| background: rgba(255, 255, 255, 0.14); | |
| font-weight: 800; | |
| font-size: 0.86rem; | |
| text-transform: uppercase; | |
| } | |
| h1 { | |
| max-width: 820px; | |
| margin: 18px 0 16px; | |
| font-size: 3.7rem; | |
| line-height: 1; | |
| } | |
| .lead { | |
| max-width: 800px; | |
| margin: 0; | |
| color: #eef5ff; | |
| font-size: 1.16rem; | |
| line-height: 1.65; | |
| } | |
| .band { | |
| padding: 54px 20px; | |
| } | |
| .band.alt { | |
| background: #ffffff; | |
| } | |
| .inner { | |
| width: min(1100px, 100%); | |
| margin: 0 auto; | |
| } | |
| .intro { | |
| max-width: 820px; | |
| margin-bottom: 26px; | |
| } | |
| h2 { | |
| margin: 0 0 10px; | |
| font-size: 2rem; | |
| line-height: 1.1; | |
| } | |
| h3 { | |
| margin: 0 0 8px; | |
| font-size: 1.08rem; | |
| } | |
| 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: 188px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 18px; | |
| background: var(--paper); | |
| } | |
| .tile:nth-child(1), | |
| .tile:nth-child(2), | |
| .tile:nth-child(3) { | |
| border-top: 5px solid var(--amber); | |
| } | |
| .split { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 22px; | |
| } | |
| .listbox { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #ffffff; | |
| padding: 22px; | |
| } | |
| .listbox.public, | |
| .listbox.private { | |
| border-top: 5px solid var(--amber); | |
| } | |
| ul { | |
| margin: 12px 0 0; | |
| padding-left: 20px; | |
| color: var(--muted); | |
| line-height: 1.65; | |
| } | |
| .paper { | |
| display: grid; | |
| grid-template-columns: 1.15fr 0.85fr; | |
| gap: 24px; | |
| align-items: start; | |
| } | |
| .placeholder { | |
| border: 1px dashed #94a3b8; | |
| border-top: 5px solid var(--amber); | |
| border-radius: 8px; | |
| padding: 22px; | |
| background: #f8fafc; | |
| } | |
| .links { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin-top: 24px; | |
| } | |
| .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(1100px, 100%); | |
| margin: 0 auto; | |
| color: #64748b; | |
| font-size: 0.9rem; | |
| line-height: 1.55; | |
| } | |
| @media (max-width: 860px) { | |
| .topbar { | |
| position: static; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| background: #111827; | |
| padding: 14px 16px; | |
| } | |
| .nav { | |
| justify-content: flex-start; | |
| } | |
| .hero { | |
| min-height: 54vh; | |
| } | |
| .hero-inner { | |
| padding: 52px 0 42px; | |
| } | |
| h1 { | |
| font-size: 2.45rem; | |
| } | |
| h2 { | |
| font-size: 1.55rem; | |
| } | |
| .grid, | |
| .split, | |
| .paper { | |
| grid-template-columns: 1fr; | |
| } | |
| .nav a, | |
| .button { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .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 Benchmark</div> | |
| <nav class="nav" aria-label="MAP public pages"> | |
| <a href="https://huggingface.co/spaces/map-ai-benchmark/challenge" target="_blank" rel="noopener noreferrer" aria-label="Challenge, opens in a new tab">Challenge</a> | |
| <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> | |
| </nav> | |
| </header> | |
| <main id="main-content" tabindex="-1"> | |
| <section class="hero" aria-labelledby="benchmark-title"> | |
| <div class="hero-inner"> | |
| <span class="eyebrow">Benchmark</span> | |
| <h1 id="benchmark-title">Evaluation design and data</h1> | |
| <p class="lead"> | |
| MAP evaluates multimodal systems on accessibility planning in an open-world setting with maintained information on places and their relevant features. | |
| </p> | |
| </div> | |
| </section> | |
| <section class="band alt" aria-labelledby="benchmark-overview-title"> | |
| <div class="inner"> | |
| <div class="intro"> | |
| <h2 id="benchmark-overview-title">Benchmark Overview</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" aria-labelledby="benchmark-task-title"> | |
| <h3 id="benchmark-task-title">Task</h3> | |
| <p>Assist users in deciding whether a real place is suitable for their accessibility requirements.</p> | |
| </article> | |
| <article class="tile" aria-labelledby="benchmark-evidence-title"> | |
| <h3 id="benchmark-evidence-title">Evidence</h3> | |
| <p>Responses are assessed against feature-level ground truth data on places and features related to accessibility requirements.</p> | |
| </article> | |
| <article class="tile" aria-labelledby="benchmark-outputs-title"> | |
| <h3 id="benchmark-outputs-title">Outputs</h3> | |
| <p>System results will be published through the leaderboard after submission and scoring.</p> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="band alt" aria-labelledby="paper-documentation-title"> | |
| <div class="inner paper"> | |
| <div> | |
| <h2 id="paper-documentation-title">Paper and Documentation</h2> | |
| <p> | |
| The benchmark paper will be added here shortly. | |
| </p> | |
| <nav class="links" aria-label="Related MAP pages"> | |
| <a class="button challenge" href="https://huggingface.co/spaces/map-ai-benchmark/challenge" target="_blank" rel="noopener noreferrer" aria-label="Challenge, opens in a new tab">Challenge</a> | |
| <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> | |
| </nav> | |
| </div> | |
| <aside class="placeholder" aria-labelledby="paper-placeholder-title"> | |
| <h3 id="paper-placeholder-title">Paper to be added</h3> | |
| <p>Coming soon.</p> | |
| </aside> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="foot"></div> | |
| </footer> | |
| </body> | |
| </html> | |