Add logos; cleanup; nicer formatting

index.html

@@ -141,16 +141,6 @@ <h1 class="title is-1 publication-title">Ensembling Prioritized Hybrid Policies
   </div>
 </section>
 
-
-  <!-- Title Image -->
-  <section class="hero teaser">
-    <div class="container is-max-desktop">
-      <div class="hero-body">
-        <img src="static/images/Overview.svg" alt="EPH Overview" width="960px"/>
-      </div>
-    </div>
-  </section>
-  <!-- End teaser video -->
 
 
 <!-- Paper abstract -->
@@ -188,10 +178,12 @@ <h2 class="title is-3">Abstract</h2>
 </section>
 <!-- End paper abstract -->
 
+
 <section class="hero contributions">
   <div class="container is-max-desktop">
-    <h2 class="title is-3 is-3-light">Contributions</h2>
     <div class="hero-body">
+      <h2 class="title is-3 is-3-light">Contributions</h2>
+      <img src="static/images/Overview.svg" alt="EPH Overview" width="960px"/>
       <p>We propose <strong>EPH</strong> (<em>Ensembling Prioritized Hybrid Policies</em>), a Q-learning-based MARL-MAPF solver with communication. Our key contributions include:</p>
       <ol>
         <li><strong>Selective Communication</strong>: Enhanced communication block using Transformer-inspired improvements for better information extraction.</li>
@@ -205,8 +197,8 @@ <h2 class="title is-3 is-3-light">Contributions</h2>
 
 <section class="hero method is-light">
   <div class="container is-max-desktop">
-    <h2 class="title is-3 is-3-light">EPH</h2>
     <div class="hero-body">
+      <h2 class="title is-3 is-3-light">EPH</h2>
       <p><strong>EPH</strong>. EPH can be divided into two parts, as shown in the above picture. The upper part shows the neural network structure of EPH, and how local partial observations are transformed into Q vectors. The lower part shows that instead of getting action by directly applying \( a^t_i = \text{argmax} (q^t_i) \), several inference techniques, as mentioned in the <em>Contributions</em>, can be used to improve actions quality and avoid collisions.</p>
 
       <p><strong>Training Method</strong>. The Q value for agent \(i\) is obtained via:</p>
@@ -240,8 +232,8 @@ <h2 class="title is-3 is-3-light">EPH</h2>
 
 <section class="hero inference-techniques">
   <div class="container is-max-desktop">
-    <h2 class="title is-3 is-3-light">Inference Techniques</h2>
     <div class="hero-body">
+      <h2 class="title is-3 is-3-light">Inference Techniques</h2>
       <div class="columns">
         <div class="column is-half">
           <p><strong><em>Hybrid Expert Guidance</em></strong></p>
@@ -268,8 +260,8 @@ <h2 class="title is-3 is-3-light">Inference Techniques</h2>
 
 <section class="hero experiment-results is-light">
   <div class="container is-max-desktop">
-    <h2 class="title is-3 is-3-light">Experimental Results</h2>
     <div class="hero-body">
+      <h2 class="title is-3 is-3-light">Experimental Results</h2>
       <div class="columns">
         <div class="column is-half">
           <img src="static/images/success_rate.svg" alt="Success Rate" style="width:100%;">
@@ -327,9 +319,12 @@ <h2 class="title is-3">Videos</h2>
 
 
 <!-- BibText citation + copy to clipboard -->
-<section class="section" id="Code">
-  <div class="container is-max-desktop content">
+<section class="hero is-light" id="Code">
+  <div class="hero-body">
+    <div class="container">
+    <br>
     <h2 class="title">BibTeX</h2>
+    If you find this work useful, please consider citing it. We will appreciate it!
     <div class="code-container">
       <pre><code class="code-content language-text">@inproceedings{tang2024eph,
         title={Ensembling Prioritized Hybrid Policies for Multi-agent Pathfinding},
@@ -350,31 +345,60 @@ <h2 class="title">BibTeX</h2>
       <div class="copy-tooltip">Copy to clipboard</div>
     </div>
   </div>
+  <br>
+  </div>
 </section>
 
 </section>
 <!--End BibTex citation -->
 
 
-  <footer class="footer">
+
+<section class="logos-section">
+  <div class="container">
+    <div class="logos-container">
+      <div class="logo-item">
+        <a href="https://kaist.ac.kr/en/" target="_blank">
+          <img src="static/images/logos/kaist_logo.png" alt="KAIST Logo">
+        </a>
+      </div>
+      <div class="logo-item">
+        <a href="https://omelet.ai/" target="_blank">
+          <img src="static/images/logos/omelet.png" alt="Omelet Logo">
+        </a>
+      </div>
+      <div class="logo-item">
+        <a href="https://iros2024-abudhabi.org/" target="_blank">
+          <img src="static/images/logos/iros2024.png" alt="IROS 2024 Logo">
+        </a>
+      </div>
+      <div class="logo-item">
+        <a href="https://github.com/ai4co" target="_blank">
+          <img src="static/images/logos/ai4co.png" alt="AI4CO Logo">
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+
+  <!-- <footer class="footer"> -->
   <div class="container">
     <div class="columns is-centered">
       <div class="column is-8">
         <div class="content">
-
           <p>
             This page was built using the <a href="https://github.com/ai4co/research-project-page-template" target="_blank">Research Project Page Template</a> which is based on 
             the <a href="https://github.com/eliahuhorwitz/Academic-project-page-template" target="_blank">Academic Project Page Template</a> and the 
             <a href="https://nerfies.github.io" target="_blank">Nerfies project page</a>. You are free to borrow the of this website, we just ask that you link back to this page in the footer.
             This website is licensed under a <a rel="license"  href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Creative
             Commons Attribution-ShareAlike 4.0 International License</a>.
           </p>
-
         </div>
       </div>
     </div>
   </div>
-</footer>
-
+  
+<!-- </footer> -->
   </body>
   </html>

static/css/code.css

@@ -4,7 +4,7 @@
     border-radius: 6px;
     padding: 1rem 2.5rem 0rem 1rem;
     margin-top: 1rem;
-    border: 1px solid #f3f3f3;
+    border: 1px solid #000000;
     overflow-x: auto;
     overflow-y: hidden;
   }

static/css/index.css

@@ -235,4 +235,46 @@ img {
     height: 75vh; /* Set a large fixed height for larger screens */
     padding-top: 0; /* Remove padding-top for larger screens */
   }
-}
+}
+
+
+.logos-section {
+  padding: 2em 0;
+  background-color: #ffffff; /* Optional: Add background color for the section */
+}
+
+
+.logos-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.logo-item {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  padding: 0 1em;
+}
+
+.logo-item img {
+  max-height: 100px;
+  max-width: 100%;
+  object-fit: contain;
+  transition: transform 0.3s ease, filter 0.3s ease; /* Smooth transition for transform and shadow */
+  will-change: transform, filter; /* Optimizes animation performance */
+  filter: none; /* No shadow when not hovered */
+}
+
+/* Hover effect with pop-up and shadow */
+.logo-item:hover img {
+  transform: scale(1.1); /* Slightly enlarge the logo */
+  filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.4)); /* Only add shadow on hover */
+}
+
+/* Optional: Press effect on click */
+.logo-item:active img {
+  transform: scale(1.05); /* Slight press-down effect */
+  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.2)); /* Lighter shadow on click */
+}