Spaces:

madmax3366
/

AutoEnv_demo

Running

App Files Files Community

madmax3366 commited on Nov 11

Commit

124022a

verified ·

1 Parent(s): 8ca7ca7

Update index.html

Browse files

Files changed (1) hide show

index.html +25 -44

index.html CHANGED Viewed

@@ -33,42 +33,35 @@
   <script src="./static/js/index.js"></script>
   <style>
-    /* light paper-like tuning to match os-world vibe */
     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; }
-    /* Ensure both system images line up nicely */
-    .sysimg { width: 100%; height: auto; display: block; }
     .system-overview-desc { margin-top: 12px; }
   </style>
 </head>
 <body>
-<!-- Minimal navbar with quick links -->
-<!-- <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://arxiv.org/abs/2509.21143" target="_blank" rel="noopener">
-        <span class="icon"><i class="ai ai-arxiv"></i></span>&nbsp;Paper
-      </a>
-      <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>&nbsp;Code
-      </a>
-    </div>
-  </div>
-</nav> -->
 <!-- Hero: title, authors, links -->
 <section class="hero">
   <div class="hero-body">
@@ -115,8 +108,7 @@
   </div>
 </section>
-<!-- Teaser video (local mp4 like os-world's teaser section)
-     Put your video at ./static/videos/demo.mp4 -->
 <section class="hero teaser">
   <div class="container is-max-desktop">
     <div class="hero-body">
@@ -127,11 +119,7 @@
   </div>
 </section>
-<!-- System overview (two stacked images + description)
-     Place images at:
-       ./static/images/demo_task.jpg
-       ./static/images/demo_arch.jpg
--->
 <section class="section" id="system-overview">
   <div class="container is-max-desktop">
     <div class="columns is-centered">
@@ -139,14 +127,14 @@
         <h2 class="title is-3 has-text-centered">System Overview</h2>
         <figure class="system-figure has-text-centered" style="margin-bottom:16px;">
-          <img class="sysimg" src="./static/images/demo_task.jpg" alt="Automotive-ENV task overview">
           <figcaption class="subtitle is-6" style="margin-top:8px;">
             Task instruction: Open the front windshield defroster, open the rear windshield defroster.
           </figcaption>
         </figure>
         <figure class="system-figure has-text-centered">
-          <img class="sysimg" src="./static/images/demo_arch.jpg" alt="Automotive-ENV system architecture overview">
         </figure>
         <div class="content has-text-justified system-overview-desc">
@@ -156,7 +144,6 @@
             Task success is determined by low-level programmatic checks of system signals.
           </p>
         </div>
       </div>
     </div>
   </div>
@@ -201,7 +188,7 @@
   <div class="container is-max-desktop">
     <div class="columns is-centered">
       <div class="column is-four-fifths">
-        <h2 class="title is-3">Task Statistics and Comparison</h2>
         <div class="content has-text-justified">
           <p>
@@ -212,7 +199,6 @@
           </p>
         </div>
-        <!-- Figure A -->
         <figure class="system-figure has-text-centered" style="margin-top:12px;">
           <img src="./static/images/static.jpg" alt="Task distributions across dimensions and categories">
           <figcaption class="subtitle is-6" style="margin-top:8px;">
@@ -221,14 +207,12 @@
           </figcaption>
         </figure>
-        <!-- Figure B -->
         <figure class="system-figure has-text-centered" style="margin-top:18px;">
           <img src="./static/images/task_and_check.jpg" alt="Representative instructions and validation methods">
           <figcaption class="subtitle is-6" style="margin-top:8px;">
             Representative user instructions for in-vehicle tasks, categorized by task type, with corresponding validation methods.
           </figcaption>
         </figure>
       </div>
     </div>
   </div>
@@ -239,7 +223,7 @@
   <div class="container is-max-desktop">
     <div class="columns is-centered">
       <div class="column is-four-fifths">
-        <h2 class="title is-3">Results and Analysis</h2>
         <div class="content has-text-justified">
           <p>
@@ -250,7 +234,6 @@
           </p>
         </div>
-        <!-- Figure 1: Success rates -->
         <figure class="system-figure has-text-centered" style="margin-top:12px;">
           <img src="./static/images/results.jpg" alt="Success rates of different agent configurations across task groups">
           <figcaption class="subtitle is-6" style="margin-top:8px;">
@@ -260,7 +243,6 @@
           </figcaption>
         </figure>
-        <!-- Figure 2: Tokens & GPS comparison -->
         <figure class="system-figure has-text-centered" style="margin-top:18px;">
           <img src="./static/images/task_and_check.jpg" alt="Token length distributions and task-wise performance with vs. without GPS">
           <figcaption class="subtitle is-6" style="margin-top:8px;">
@@ -268,7 +250,6 @@
             token lengths. Right: task-wise performance across hotspot categories.
           </figcaption>
         </figure>
       </div>
     </div>
   </div>
@@ -277,7 +258,7 @@
 <!-- BibTeX -->
 <section class="section" id="BibTeX">
   <div class="container is-max-desktop content">
-    <h2 class="title">BibTeX</h2>
     <pre><code>@misc{yan2025automotiveenvbenchmarkingmultimodalagents,
   title={Automotive-ENV: Benchmarking Multimodal Agents in Vehicle Interface Systems},
   author={Junfeng Yan and Biao Wu and Meng Fang and Ling Chen},

   <script src="./static/js/index.js"></script>
   <style>
+    /* Paper-like tuning */
     body { background: #ffffff; color: #111; }
     .hero { background: #fff; }
     .publication-title { letter-spacing: -0.02em; }
     .publication-links .button { margin: 0 6px 8px; }
     .subtitle { color: #444; }
     .footer { background: #fafafa; }
+    /* Make all section h2 titles centered like the hero title */
+    .section .title.is-3 { text-align: center; }
+    /* Match content width to teaser video width (full container), overriding Bulma's 4/5 column */
+    .container.is-max-desktop .columns .column.is-four-fifths {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+    /* Consistent media scaling */
+    .hero.teaser video#teaser { width: 100%; height: auto; display: block; }
+    .system-figure img,
+    #task-statistics img,
+    #results-analysis img { width: 100%; height: auto; display: block; border: 1px solid #eee; border-radius: 6px; }
+    /* Gentle spacing under the overview description */
     .system-overview-desc { margin-top: 12px; }
   </style>
 </head>
 <body>
 <!-- Hero: title, authors, links -->
 <section class="hero">
   <div class="hero-body">
   </div>
 </section>
+<!-- Teaser video (local mp4). Put your video at ./static/videos/demo.mp4 -->
 <section class="hero teaser">
   <div class="container is-max-desktop">
     <div class="hero-body">
   </div>
 </section>
+<!-- System overview: two stacked images + description -->
 <section class="section" id="system-overview">
   <div class="container is-max-desktop">
     <div class="columns is-centered">
         <h2 class="title is-3 has-text-centered">System Overview</h2>
         <figure class="system-figure has-text-centered" style="margin-bottom:16px;">
+          <img src="./static/images/demo_task.jpg" alt="Automotive-ENV task overview">
           <figcaption class="subtitle is-6" style="margin-top:8px;">
             Task instruction: Open the front windshield defroster, open the rear windshield defroster.
           </figcaption>
         </figure>
         <figure class="system-figure has-text-centered">
+          <img src="./static/images/demo_arch.jpg" alt="Automotive-ENV system architecture overview">
         </figure>
         <div class="content has-text-justified system-overview-desc">
             Task success is determined by low-level programmatic checks of system signals.
           </p>
         </div>
       </div>
     </div>
   </div>
   <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">Task Statistics and Comparison</h2>
         <div class="content has-text-justified">
           <p>
           </p>
         </div>
         <figure class="system-figure has-text-centered" style="margin-top:12px;">
           <img src="./static/images/static.jpg" alt="Task distributions across dimensions and categories">
           <figcaption class="subtitle is-6" style="margin-top:8px;">
           </figcaption>
         </figure>
         <figure class="system-figure has-text-centered" style="margin-top:18px;">
           <img src="./static/images/task_and_check.jpg" alt="Representative instructions and validation methods">
           <figcaption class="subtitle is-6" style="margin-top:8px;">
             Representative user instructions for in-vehicle tasks, categorized by task type, with corresponding validation methods.
           </figcaption>
         </figure>
       </div>
     </div>
   </div>
   <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">Results and Analysis</h2>
         <div class="content has-text-justified">
           <p>
           </p>
         </div>
         <figure class="system-figure has-text-centered" style="margin-top:12px;">
           <img src="./static/images/results.jpg" alt="Success rates of different agent configurations across task groups">
           <figcaption class="subtitle is-6" style="margin-top:8px;">
           </figcaption>
         </figure>
         <figure class="system-figure has-text-centered" style="margin-top:18px;">
           <img src="./static/images/task_and_check.jpg" alt="Token length distributions and task-wise performance with vs. without GPS">
           <figcaption class="subtitle is-6" style="margin-top:8px;">
             token lengths. Right: task-wise performance across hotspot categories.
           </figcaption>
         </figure>
       </div>
     </div>
   </div>
 <!-- BibTeX -->
 <section class="section" id="BibTeX">
   <div class="container is-max-desktop content">
+    <h2 class="title is-3 has-text-centered">BibTeX</h2>
     <pre><code>@misc{yan2025automotiveenvbenchmarkingmultimodalagents,
   title={Automotive-ENV: Benchmarking Multimodal Agents in Vehicle Interface Systems},
   author={Junfeng Yan and Biao Wu and Meng Fang and Ling Chen},