Update index.html

index.html

@@ -5,164 +5,213 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>AUTOMOTIVE-ENV: Benchmarking Multimodal Agents in Vehicle Interface Systems</title>
   <meta name="description" content="AUTOMOTIVE-ENV: Benchmarking Multimodal Agents in Vehicle Interface Systems" />
+
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
   <style>
-    :root {
+    :root{
+      --page-w: 1100px;
+      --fg: #0b0b0b;
       --bg: #ffffff;
-      --fg: #0a0a0a;
       --muted: #555;
-      --border: #e6e6e6;
+      --border: #e7e7ea;
       --accent: #111;
-      --maxw: 960px;
-      --radius: 14px;
-      --shadow: 0 1px 2px rgba(0,0,0,0.05), 0 6px 20px rgba(0,0,0,0.06);
+      --accent-weak: rgba(0,0,0,.08);
+      --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 22px rgba(0,0,0,.06);
+      --radius: 12px;
+    }
+    *{box-sizing:border-box}
+    html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
+    a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-weak)}
+    a:hover{border-bottom-color:rgba(0,0,0,.28)}
+    .container{max-width:var(--page-w);margin:0 auto;padding:0 20px}
+
+    /* Minimal top nav (centered like many paper pages) */
+    .nav{border-bottom:1px solid var(--border);background:#fff}
+    .nav-inner{display:flex;align-items:center;justify-content:center;gap:20px;height:54px}
+    .nav a{border-bottom:0;font-weight:600;color:#222}
+
+    /* Hero / header */
+    header.hero{padding:48px 0 28px;border-bottom:1px solid var(--border)}
+    h1.title{font-size:clamp(28px,4.2vw,46px);line-height:1.12;margin:0 0 10px;letter-spacing:-0.02em;text-align:center}
+    .authors,.affils{color:var(--muted);text-align:center}
+    .authors{margin:6px auto 0;font-size:15px}
+    .affils{margin:2px auto 0;font-size:14px}
+    .lead{max-width:900px;margin:14px auto 0;text-align:center;color:var(--muted);font-size:clamp(16px,2vw,18px)}
+
+    /* Link badges (Paper / Code) */
+    .links{display:flex;gap:12px;justify-content:center;margin-top:18px}
+    .badge{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border);border-radius:999px;background:#fff;box-shadow:var(--shadow);font-size:14px}
+    .badge span.icon{font-weight:700;font-size:14px}
+
+    /* Sections in paper style */
+    section{padding:34px 0;border-bottom:1px solid var(--border)}
+    section:last-of-type{border-bottom:0}
+    h2{font-size:22px;margin:0 0 14px}
+    p{margin:10px 0}
+
+    /* Figure (image above video) with zoom */
+    .figure{margin-top:6px}
+    .figure img{
+      width:100%;height:auto;display:block;
+      max-height:72vh;object-fit:contain;
+      border:1px solid var(--border);border-radius:var(--radius);
+      background:#fff;
     }
-    * { box-sizing: border-box; }
-    html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
-    a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.1); }
-    a:hover { border-bottom-color: rgba(0,0,0,0.3); }
-    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 32px 20px 80px; }
-    header { text-align: center; padding: 40px 0 24px; }
-    h1 { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.02em; }
-    .lead { color: var(--muted); margin: 8px auto 18px; font-size: clamp(16px, 2vw, 18px); max-width: 840px; }
-    .authors, .affils { margin: 10px auto 0; color: var(--muted); font-size: 15px; }
-    .authors a { border-bottom: 1px dashed rgba(0,0,0,0.2); }
-    .badgebar { display: inline-flex; gap: 10px; margin-top: 18px; }
-    .badge { display: inline-block; font-size: 14px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); background: #fff; }
-    .section { margin: 30px 0; }
-    .card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; padding: 20px; }
-    .card h2 { margin: 0 0 12px; font-size: 22px; }
-    .video { overflow: hidden; }
-    .video video, .video iframe { width: 100%; height: auto; display: block; border-radius: 12px; }
-    .grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
-    @media (min-width: 900px) { .grid.two { grid-template-columns: 1fr 1fr; } }
-    footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); text-align: center; font-size: 14px; }
-    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-break: break-word; background: #fafafa; border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
+    .caption{font-size:14px;color:var(--muted);text-align:center;margin-top:8px}
+
+    /* CSS-only lightbox */
+    .lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.92);padding:24px;z-index:999}
+    .lightbox:target{display:flex}
+    .lightbox img{max-width:96vw;max-height:96vh}
+
+    /* Video */
+    .video video, .video iframe{width:100%;height:auto;display:block;border-radius:var(--radius);background:#000;border:1px solid var(--border)}
+
+    /* Grid for “Tasks (preview)” */
+    .grid{display:grid;gap:18px}
+    @media (min-width: 880px){ .grid.two{grid-template-columns:1fr 1fr} }
+
+    /* Code block (BibTeX) */
+    pre{background:#fafafa;border:1px solid var(--border);border-radius:10px;padding:14px;overflow:auto}
+    code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
+
+    /* Footer */
+    footer{padding:26px 0;color:var(--muted);text-align:center;font-size:14px}
   </style>
 </head>
+
 <body>
-  <div class="wrap">
-    <!-- header -->
-    <header>
-      <h1>AUTOMOTIVE-ENV: BENCHMARKING MULTIMODAL AGENTS IN VEHICLE INTERFACE SYSTEMS</h1>
+  <!-- minimal top nav (optional) -->
+  <nav class="nav">
+    <div class="container nav-inner">
+      <a href="#">AUTOMOTIVE-ENV</a>
+      <a href="https://arxiv.org/abs/2509.21143" target="_blank" rel="noopener">Paper</a>
+      <a href="#" target="_blank" rel="noopener">Code</a>
+    </div>
+  </nav>
+
+  <!-- hero -->
+  <header class="hero">
+    <div class="container">
+      <h1 class="title">AUTOMOTIVE-ENV: BENCHMARKING MULTIMODAL AGENTS IN VEHICLE INTERFACE SYSTEMS</h1>
+
       <div class="authors">
-        <strong>Junfeng Yan</strong><sup>*1</sup>, <strong>Biao Wu</strong><sup>*1</sup>, <strong>Meng Fang</strong><sup>2</sup>, <strong>Ling Chen</strong><sup>1</sup>
+        <strong>Junfeng Yan</strong><sup>*1</sup>,
+        <strong>Biao Wu</strong><sup>*1</sup>,
+        <strong>Meng Fang</strong><sup>2</sup>,
+        <strong>Ling Chen</strong><sup>1</sup>
       </div>
       <div class="affils">
-        <sup>1</sup>Australian Artificial Intelligence Institute, Sydney, Australia &nbsp;&nbsp;|&nbsp;&nbsp; <sup>2</sup>University of Liverpool, Liverpool, United Kingdom
+        <sup>1</sup>Australian Artificial Intelligence Institute, Sydney, Australia &nbsp;&nbsp;|&nbsp;&nbsp;
+        <sup>2</sup>University of Liverpool, Liverpool, United Kingdom
       </div>
+
       <p class="lead">
-        Multimodal agents have shown strong general GUI abilities, but in-vehicle systems impose unique constraints: limited driver attention, strict safety, and location-aware interaction. <em>Automotive-ENV</em> is a high-fidelity benchmark and interaction environment for vehicle GUIs with 185 parameterized tasks and reproducible checks. We further propose <em>ASURADA</em>, a geo-aware agent that leverages GPS context for safer decisions.
+        Multimodal agents show strong generic GUI skills, but in-vehicle systems impose unique constraints: limited driver attention, strict safety, and location-aware interaction. <em>Automotive-ENV</em> is a high-fidelity benchmark for vehicle GUIs with 185 parameterized tasks and reproducible checks. We further propose <em>ASURADA</em>, a geo-aware agent leveraging GPS context for safer decisions.
       </p>
-      <div class="badgebar">
-        <a class="badge" href="https://arxiv.org/abs/2509.21143" target="_blank" rel="noopener">Paper</a>
-        <a class="badge" href="#" target="_blank" rel="noopener">Code: Release soon</a>
+
+      <div class="links">
+        <a class="badge" href="https://arxiv.org/abs/2509.21143" target="_blank" rel="noopener">
+          <span class="icon">⧉</span><span>Paper (arXiv)</span>
+        </a>
+        <a class="badge" href="#" target="_blank" rel="noopener">
+          <span class="icon">★</span><span>Code (coming soon)</span>
+        </a>
       </div>
-    </header>
+    </div>
+  </header>
 
-    <section class="card figure" aria-label="system-overview">
+  <!-- system overview image (click to zoom) -->
+  <section aria-label="system-overview">
+    <div class="container">
       <h2>System Overview</h2>
-      <img src="demo_arch.jpg" alt="System architecture diagram" loading="lazy">
-      <p class="caption">Figure 1. Automotive-ENV architecture overview.</p>
-    </section>
-
-    <!-- demo video -->
-    <section class="section">
-      <div class="card video" aria-label="demo video">
-        <!-- Place demo.mp4 at the repo root (same folder as this index.html) -->
-        <video src="demo.mp4" autoplay muted loop playsinline controls></video>
-      </div>
-    </section>
-
-    <!-- abstract + quick highlights -->
-    <section class="section grid two">
-      <div class="card">
-        <h2>Abstract</h2>
-        <p>
-          In-vehicle GUIs present distinct challenges: drivers’ limited attention, strict safety
-          requirements, and complex location-based interaction patterns. We introduce
-          <strong>Automotive-ENV</strong>, the first high-fidelity benchmark and interaction
-          environment tailored for vehicle GUIs. The platform defines <strong>185 parameterized tasks</strong>
-          spanning explicit control, implicit intent, and safety-aware tasks, and provides structured
-          multimodal observations with precise programmatic checks for reproducible evaluation.
-        </p>
-        <p>
-          Building on this benchmark, we propose <strong>ASURADA</strong>, a geo-aware multimodal agent that
-          integrates GPS-informed context to adapt actions by location, environment, and regional norms.
-          Experiments show geo-awareness significantly improves safety-aware task success. We will release
-          Automotive-ENV, with tasks and tooling, to advance safe and adaptive in-vehicle agents.
-        </p>
+      <div class="figure">
+        <!-- Put your image next to index.html as demo_arch.jpg (or change the src) -->
+        <a href="#fig-arch"><img src="demo_arch.jpg" alt="Automotive-ENV architecture overview"></a>
+        <p class="caption">Figure 1. Automotive-ENV architecture overview. Click to zoom.</p>
       </div>
-      <div class="card">
-        <h2>Highlights</h2>
-        <ul>
-          <li>High-fidelity vehicle GUI environment with reproducible checks.</li>
-          <li>185 parameterized tasks across control, intent, and safety categories.</li>
-          <li>Structured multimodal observations and programmatic success criteria.</li>
-          <li>ASURADA: GPS/geo-aware planning boosts safety-aware task success.</li>
-        </ul>
+    </div>
+  </section>
+
+  <!-- teaser / demo video -->
+  <section aria-label="demo">
+    <div class="container">
+      <h2>Demo</h2>
+      <!-- Place demo.mp4 next to this index.html -->
+      <div class="video">
+        <video src="demo.mp4" autoplay muted loop playsinline controls></video>
       </div>
-    </section>
-
-    <!-- tasks placeholder (you can expand later) -->
-    <section class="section">
-      <div class="card">
-        <h2>Tasks (preview)</h2>
-        <p>
-          This section is reserved for a compact task overview similar to os-world:
-          categories, difficulty tiers, and a few illustrative examples with thumbnails or short clips.
-        </p>
-        <div class="grid two">
-          <div>
-            <h3>Explicit Control</h3>
-            <ul>
-              <li>Climate, media, navigation, connectivity</li>
-              <li>Deterministic UI manipulations with constraints</li>
-            </ul>
-          </div>
-          <div>
-            <h3>Implicit Intent</h3>
-            <ul>
-              <li>Goal inference from short user context</li>
-              <li>Minimal UI steps with preference awareness</li>
-            </ul>
-          </div>
-          <div>
-            <h3>Safety-Aware</h3>
-            <ul>
-              <li>Sensor + context classification (danger vs. do-nothing)</li>
-              <li>Strict action gating and escalation logic</li>
-            </ul>
-          </div>
-          <div>
-            <h3>Evaluation</h3>
-            <ul>
-              <li>Programmatic checks, success/failure traces</li>
-              <li>Generalization splits and ablations</li>
-            </ul>
-          </div>
+    </div>
+  </section>
+
+  <!-- abstract -->
+  <section aria-label="abstract">
+    <div class="container">
+      <h2>Abstract</h2>
+      <p>
+        In-vehicle GUIs present distinct challenges: drivers’ limited attention, strict safety requirements, and
+        complex location-based interaction patterns. We introduce <strong>Automotive-ENV</strong>, a high-fidelity benchmark and
+        interaction environment tailored for vehicle GUIs. The platform defines <strong>185 parameterized tasks</strong> spanning
+        explicit control, implicit intent understanding, and safety-aware tasks, and provides structured multimodal
+        observations with precise programmatic checks for reproducible evaluation.
+      </p>
+      <p>
+        Building on this benchmark, we propose <strong>ASURADA</strong>, a geo-aware multimodal agent that integrates GPS-informed
+        context to adapt actions by location, environment, and regional norms. Experiments show geo-awareness
+        significantly improves safety-aware task success. We will release Automotive-ENV, with tasks and tooling, to
+        advance safe and adaptive in-vehicle agents.
+      </p>
+    </div>
+  </section>
+
+  <!-- tasks preview (reserved area you can expand later) -->
+  <section aria-label="tasks">
+    <div class="container">
+      <h2>Tasks (preview)</h2>
+      <div class="grid two">
+        <div>
+          <h3>Explicit Control</h3>
+          <p>Deterministic UI manipulations under constraints (climate, media, navigation, connectivity).</p>
+        </div>
+        <div>
+          <h3>Implicit Intent</h3>
+          <p>Goal inference from short user context with preference awareness and minimal steps.</p>
+        </div>
+        <div>
+          <h3>Safety-Aware</h3>
+          <p>Sensor + context classification (danger vs. do-nothing) with strict action gating and escalation logic.</p>
+        </div>
+        <div>
+          <h3>Evaluation</h3>
+          <p>Programmatic checks, success/failure traces, generalization splits, and ablations.</p>
         </div>
       </div>
-    </section>
+    </div>
+  </section>
 
-    <!-- bibtex -->
-    <section class="section">
-      <div class="card">
-        <h2>Citation</h2>
-        <pre class="mono">@article{yan2025automotive_env,
+  <!-- citation -->
+  <section aria-label="citation">
+    <div class="container">
+      <h2>Citation</h2>
+      <pre><code>@article{yan2025automotive_env,
   title   = {AUTOMOTIVE-ENV: Benchmarking Multimodal Agents in Vehicle Interface Systems},
   author  = {Yan, Junfeng and Wu, Biao and Fang, Meng and Chen, Ling},
   journal = {arXiv preprint arXiv:2509.21143},
   year    = {2025}
-}</pre>
-      </div>
-    </section>
+}</code></pre>
+    </div>
+  </section>
+
+  <footer>
+    © 2025 automotive-env — hosted on GitHub Pages
+  </footer>
 
-    <footer>
-      © 2025 automotive-env • hosted on GitHub Pages
-    </footer>
-  </div>
+  <!-- Lightbox target (click anywhere to close) -->
+  <a id="fig-arch" class="lightbox" href="#">
+    <img src="demo_arch.jpg" alt="Automotive-ENV architecture overview (full size)">
+  </a>
 </body>
 </html>