add a comparison for SDXL-F8C4 vae and Sana-F32C32 AE;

index.html

@@ -145,6 +145,19 @@
             border-top-right-radius: 20px;
             box-shadow: 2px 4px 12px #00000054;
         }
+        .description_noborder {
+            font-family: Arial, sans-serif;
+            font-style: normal;
+            font-size: 17px;
+            line-height: 1.47;
+            color: #333;
+            /*color: black; !* Text color *!*/
+            letter-spacing: -0.022em;
+            font-weight: 400;
+            background-color: #fff; /* Solid background color that spans the entire width */
+            padding: 20px 0; /* Add vertical padding */
+            text-align: center; /* Center align text */
+        }
         .description-content {
             /*background-color: rgba(255, 255, 255, 0.1); !* Semi-transparent background inside the section *!*/
             /*border: 2px solid #555; !* Adding a lighter border *!*/
@@ -257,7 +270,50 @@
             font-size: 14px; /* Increase the size of the superscript */
             color: black; /* Change the color if needed */
           }
-
+        /* Image comparison container */
+        .image-comparison-container {
+            background-color: #fff; /* Solid background color that spans the entire width */
+        }
+        .image-comparison-content {
+            position: relative;
+            width: 580px;  /* Adjust the width as needed */
+            height: 402px; /* Adjust the height as needed */
+            overflow: hidden; /* Make sure overflow isn't hiding any part of the images */
+            margin: 0 auto;
+            cursor: ew-resize;
+            border-radius: 10px;
+        }
+        .image-comparison-content img {
+            position: absolute;
+            width: 100%;
+            height: 99%;
+            background-color: #fff;
+            object-fit: contain; /* Use contain to ensure the whole image is visible */
+        }
+        .image-comparison-content .slider {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 50%;
+            width: 2px;
+            background-color: #fff;
+            z-index: 10;
+        }
+        .image-comparison-content .slider-black {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 50%;
+            width: 2px;
+            background-color: black;
+            z-index: 10;
+        }
+        .image-comparison-content .image-2 {
+            clip-path: inset(0 0 0 50%);
+        }
+        .image-comparison-content .image-4 {
+            clip-path: inset(0 0 0 50%);
+        }
         @media (max-width: 4096px) {
             .gallery {
                 /*grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); !* Adjust columns for smaller screens *!*/
@@ -376,6 +432,9 @@
                 background-color: #222; /* Dark color for dark mode */
                 color: white;
             }
+            .image-comparison-container {
+                background-color: #333; /* Dark color for dark mode */
+            }
         }
     </style>
 </head>
@@ -502,6 +561,30 @@ <h2>Several Core Design Details for Efficiency</h2>
               We introduce a new Autoencoder (AE) that aggressively increases the scaling factor to 32.
               Compared with AE-F8, our AE-F32 outputs 16× fewer latent tokens, which is crucial for efficient training
               and generating ultra-high-resolution images, such as 4K resolution.<br>
+          </p>
+        </div>
+    </section>
+
+    <section class="image-comparison-container">
+        <div class="image-comparison-content">
+            <img src="asset/content/ae/2_img_vae_junyu.png" alt="Image 1" class="image-1"/>
+            <img src="asset/content/ae/2_img_origin.png" alt="Image 2" class="image-2"/>
+            <div class="slider"></div>
+        </div>
+    </section>
+
+<!--    <section class="image-comparison-container">-->
+<!--        <div class="image-comparison-content">-->
+<!--            <img src="asset/content/ae/3_img_vae_junyu.png" alt="Image 3" class="image-3"/>-->
+<!--            <img src="asset/content/ae/3_img_origin.png" alt="Image 4" class="image-4"/>-->
+<!--            <div class="slider-black"></div>-->
+<!--        </div>-->
+<!--    </section>-->
+
+    <section class="description_noborder">
+        <div class="description-content">
+          <p>
+
               &nbsp;&nbsp;&nbsp;&nbsp;&bull;&nbsp;&nbsp; <strong style="font-size: 18px;">Efficient Linear DiT: </strong>
               We introduce a new linear DiT, replacing vanilla quadratic attention and reducing complexity from O(N<span style="font-size: 0.8em;"><sup>2</sup></span>) to O(N)
               Mix-FFN, with 3×3 depth-wise convolution in MLP, enhances the local information of tokens.
@@ -624,5 +707,27 @@ <h2 class="title">BibTeX</h2>
       });
     </script>
 
+    <script>
+        const container = document.querySelector('.image-comparison-content');
+        const slider = document.querySelector('.slider');
+        // const slider_black = document.querySelector('.slider-black');
+        const image2 = document.querySelector('.image-2');
+        // const image4 = document.querySelector('.image-4');
+
+        container.addEventListener('mousemove', (e) => {
+            const rect = container.getBoundingClientRect();
+            let xPos = e.clientX - rect.left;
+
+            if (xPos < 0) xPos = 0;
+            if (xPos > rect.width) xPos = rect.width;
+
+            const percentage = (xPos / rect.width) * 100;
+
+            slider.style.left = `${percentage}%`;
+            // slider_black.style.left = `${percentage}%`;
+            image2.style.clipPath = `inset(0 0 0 ${percentage}%)`;
+            // image4.style.clipPath = `inset(0 0 0 ${percentage}%)`;
+        });
+    </script>
 </body>
 </html>