Spaces:

madmax3366
/

AutoEnv_demo

Running

App Files Files Community

madmax3366 commited on Oct 21

Commit

2a9cc3f

verified ·

1 Parent(s): 9b4a15e

Update index.html

Browse files

Files changed (1) hide show

index.html +207 -187

index.html CHANGED Viewed

@@ -1,217 +1,237 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <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{
-      --page-w: 1100px;
-      --fg: #0b0b0b;
-      --bg: #ffffff;
-      --muted: #555;
-      --border: #e7e7ea;
-      --accent: #111;
-      --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;
-    }
-    .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>
-  <!-- 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>
-      </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
-      </div>
-      <p class="lead">
-        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="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>
     </div>
-  </header>
-  <!-- system overview image (click to zoom) -->
-  <section aria-label="system-overview">
-    <div class="container">
-      <h2>System Overview</h2>
-      <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>
-  </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>
     </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>
     </div>
-  </section>
-  <!-- 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}
 }</code></pre>
     </div>
-  </section>
-  <footer>
-    © 2025 automotive-env — hosted on GitHub Pages
-  </footer>
-  <!-- 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>

 <!DOCTYPE html>
+<html>
 <head>
+  <meta charset="utf-8">
+  <meta name="description"
+        content="AUTOMOTIVE-ENV: Benchmarking Multimodal Agents in Vehicle Interface Systems. A high-fidelity benchmark and environment for in-vehicle GUIs with 185 parameterized tasks and reproducible checks.">
+  <meta name="keywords" content="Automotive-ENV, multimodal agents, vehicle GUI, benchmark, ASURADA">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>AUTOMOTIVE-ENV: Benchmarking Multimodal Agents in Vehicle Interface Systems</title>
+  <!-- Optional: remove if you don't use GA -->
+  <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">
+  <!-- All local files in the repo root -->
+  <link rel="stylesheet" href="bulma.min.css">
+  <link rel="stylesheet" href="bulma-carousel.min.css">
+  <link rel="stylesheet" href="bulma-slider.min.css">
+  <link rel="stylesheet" href="fontawesome.all.min.css">
+  <link rel="stylesheet" href="index.css">
+  <link rel="icon" href="favicon.svg">
+  <script defer src="fontawesome.all.min.js"></script>
+  <script src="bulma-carousel.min.js"></script>
+  <script src="bulma-slider.min.js"></script>
+  <script src="index.js"></script>
   <style>
+    body { background: #ffffff; color: #111; }
+    .hero { background: #fff; }
+    .publication-title { letter-spacing: -0.02em; }
+    .publication-links .button { margin: 0 6px 8px; }
+    .system-figure img { max-width: 100%; height: auto; border: 1px solid #eee; border-radius: 6px; }
+    .subtitle { color: #444; }
+    .footer { background: #fafafa; }
+    section, .hero, .navbar { border-bottom: 0 !important; }
   </style>
 </head>
 <body>
+<nav class="navbar" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
+    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+  <div class="navbar-menu">
+    <div class="navbar-start" style="flex-grow: 1; justify-content: center;">
+      <a class="navbar-item" href="https://github.com/automotive-env/AutmotiveEnv.github.io" target="_blank" rel="noopener">
+        <span class="icon"><i class="fab fa-github"></i></span>
+      </a>
+      <a class="navbar-item" href="https://arxiv.org/abs/2509.21143" target="_blank" rel="noopener">
+        <span class="icon"><i class="ai ai-arxiv"></i></span>
+      </a>
     </div>
+  </div>
+</nav>
+<section class="hero">
+  <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">AUTOMOTIVE-ENV: Benchmarking Multimodal Agents in Vehicle Interface Systems</h1>
+          <div class="is-size-5 publication-authors">
+            <span class="author-block"><strong>Junfeng Yan</strong><sup>*1</sup>,</span>
+            <span class="author-block"><strong>Biao Wu</strong><sup>*1</sup>,</span>
+            <span class="author-block"><strong>Meng Fang</strong><sup>2</sup>,</span>
+            <span class="author-block"><strong>Ling Chen</strong><sup>1</sup></span>
+          </div>
+          <div class="is-size-6 publication-authors" style="margin-top:6px;">
+            <span class="author-block"><sup>1</sup>Australian Artificial Intelligence Institute, Sydney, Australia</span><br>
+            <span class="author-block"><sup>2</sup>University of Liverpool, Liverpool, United Kingdom</span>
+          </div>
+          <div class="column has-text-centered" style="margin-top:16px;">
+            <div class="publication-links">
+              <span class="link-block">
+                <a href="https://arxiv.org/abs/2509.21143"
+                   class="external-link button is-normal is-rounded is-dark" target="_blank" rel="noopener">
+                  <span class="icon"><i class="ai ai-arxiv"></i></span>
+                  <span>Paper</span>
+                </a>
+              </span>
+              <span class="link-block">
+                <a href="https://github.com/automotive-env/AutmotiveEnv.github.io"
+                   class="external-link button is-normal is-rounded is-dark" target="_blank" rel="noopener">
+                  <span class="icon"><i class="fab fa-github"></i></span>
+                  <span>Code (site)</span>
+                </a>
+              </span>
+              <span class="link-block">
+                <a href="demo.mp4"
+                   class="external-link button is-normal is-rounded is-dark" target="_blank" rel="noopener">
+                  <span class="icon"><i class="fas fa-play"></i></span>
+                  <span>Demo Video</span>
+                </a>
+              </span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
+  </div>
+</section>
+<section class="section">
+  <div class="container is-max-desktop">
+    <div class="columns is-centered">
+      <div class="column is-four-fifths">
+        <h2 class="title is-3 has-text-centered">System Overview</h2>
+        <div class="system-figure has-text-centered">
+          <!-- image at repo root -->
+          <img src="demo_arch.jpg" alt="Automotive-ENV system architecture overview">
+          <p class="subtitle is-6" style="margin-top:8px;">Figure 1. Automotive-ENV architecture overview.</p>
+        </div>
       </div>
     </div>
+  </div>
+</section>
+<section class="hero teaser">
+  <div class="container is-max-desktop">
+    <div class="hero-body">
+      <video id="teaser" autoplay muted loop playsinline height="100%">
+        <!-- video at repo root -->
+        <source src="demo.mp4" type="video/mp4">
+      </video>
+      <h2 class="subtitle has-text-centered" style="margin-top:10px;">
+        A short looping demo showcasing Automotive-ENV tasks and agent behavior.
+      </h2>
     </div>
+  </div>
+</section>
+<section class="section">
+  <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>
+            Multimodal agents have demonstrated strong performance in general GUI interactions, but their
+            application in automotive systems has been largely unexplored. In-vehicle GUIs present distinct
+            challenges: drivers’ limited attention, strict safety requirements, and complex location-based
+            interaction patterns. To address these challenges, we introduce <strong>Automotive-ENV</strong>,
+            the first high-fidelity benchmark and interaction environment tailored for vehicle GUIs.
+          </p>
+          <p>
+            This 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. Building on this
+            benchmark, we propose <strong>ASURADA</strong>, a geo-aware multimodal agent that integrates
+            GPS-informed context to dynamically adjust actions based on location, environmental conditions,
+            and regional driving norms.
+          </p>
+          <p>
+            Experiments show that geo-aware information significantly improves success on safety-aware tasks,
+            highlighting the importance of location-based context in automotive environments. We will release
+            Automotive-ENV, complete with all tasks and benchmarking tools, to further the development of
+            safe and adaptive in-vehicle agents.
+          </p>
         </div>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="section">
+  <div class="container is-max-desktop">
+    <div class="columns is-centered">
+      <div class="column is-full-width">
+        <h2 class="title is-3">Tasks (Preview)</h2>
+        <div class="content has-text-justified">
+          <p>
+            Automotive-ENV groups tasks into three categories with programmatic success criteria:
+          </p>
+          <ul>
+            <li><strong>Explicit Control</strong>: climate, media, navigation, connectivity.</li>
+            <li><strong>Implicit Intent</strong>: infer user goals from short context; minimize UI steps.</li>
+            <li><strong>Safety-Aware</strong>: sensor + context classification with strict action gating.</li>
+          </ul>
+          <p>Per-task thumbnails and clips will be added in future updates.</p>
         </div>
       </div>
     </div>
+  </div>
+</section>
+<section class="section" id="BibTeX">
+  <div class="container is-max-desktop content">
+    <h2 class="title">BibTeX</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}
 }</code></pre>
+  </div>
+</section>
+<footer class="footer">
+  <div class="container">
+    <div class="content has-text-centered">
+      <a class="icon-link" href="https://arxiv.org/abs/2509.21143" target="_blank" rel="noopener">
+        <i class="ai ai-arxiv"></i>
+      </a>
+      <a class="icon-link" href="https://github.com/automotive-env/AutmotiveEnv.github.io" target="_blank" rel="noopener">
+        <i class="fab fa-github"></i>
+      </a>
     </div>
+    <div class="columns is-centered">
+      <div class="column is-8">
+        <div class="content has-text-centered">
+          <p>This website reuses the open-source Nerfies/OS-World page framework. Remove analytics if not used.</p>
+          <p>© 2025 automotive-env — Hosted on GitHub Pages.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
 </body>
 </html>