update lucidnft

Author: FeiSong123

LucidNFT/gallery/182_lq.png

@@ -176,7 +176,7 @@ <h2>LucidLR Dataset</h2>
         <section id="results" class="info-section">
             <h2>Results</h2>
             <ul>
-                <li><strong>Stable optimization.</strong> Training curves in the paper show both LucidConsistency and perceptual IQA rewards improve steadily during preference optimization on LucidFlux.</li>
+                <li><strong>Stable optimization.</strong> Training curves show both LucidConsistency and perceptual IQA rewards improve steadily during preference optimization on LucidFlux.</li>
                 <li><strong>Consistent benchmark gains.</strong> On RealLQ250, DRealSR, and RealSR, LucidFlux + LucidNFT improves most no-reference IQA metrics over the LucidFlux baseline, including CLIP-IQA+, Q-Align, MUSIQ, UniPercept IQA, and NIQE.</li>
                 <li><strong>Better perceptual-faithfulness trade-off.</strong> The method improves visual quality without relying on a faithfulness-only objective that could encourage under-restoration.</li>
             </ul>
@@ -703,6 +703,29 @@ <h2>Gallery</h2>
                         <span class="lq-sub">LR</span>
                     </div>
                 </div>
+
+                <div class="lq-card" tabindex="0" role="button" aria-label="Example 182 gallery item" data-example="182">
+                    <div class="lq-media">
+                        <img class="lq-thumb" src="gallery/182_lq.png" alt="Example 182 LR input">
+                        <div class="lq-hover-compare" aria-hidden="true">
+                            <div class="image-comparison inline-comparison">
+                                <img src="gallery/182_lucidflux.jpg" alt="LucidFlux output" class="before-image">
+                                <img src="gallery/182_lucidnft.jpg" alt="LucidFlux(+LucidNFT) output" class="after-image">
+                                <div class="comparison-slider" aria-label="Comparison slider">
+                                    <div class="slider-handle">
+                                        <div class="slider-arrow">◀ ▶</div>
+                                    </div>
+                                </div>
+                                <div class="compare-tag before">LucidFlux</div>
+                                <div class="compare-tag after">LucidFlux(+LucidNFT)</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="lq-meta">
+                        <span class="lq-title">Example 182</span>
+                        <span class="lq-sub">LR</span>
+                    </div>
+                </div>
             </div>
         </section>
 

LucidNFT/gallery/182_lucidflux.jpg

@@ -254,7 +254,7 @@ body {
 .lq-media {
     position: relative;
     border-radius: 12px;
-    overflow: hidden;
+    overflow: visible; /* allow thumbnail to float/zoom like UltraFlux */
 }
 
 .lq-thumb {
@@ -266,9 +266,11 @@ body {
     inset: 0;
     opacity: 0;
     transform: translateY(6px);
-    transition: opacity 0.22s ease 0.12s, transform 0.22s ease 0.12s;
+    transition: opacity 0.22s ease 0.18s, transform 0.22s ease 0.18s;
     pointer-events: none;
     z-index: 6;
+    border-radius: 12px;
+    overflow: hidden; /* keep slider contents clipped */
 }
 
 .lq-card:hover .lq-hover-compare,
@@ -280,7 +282,7 @@ body {
 
 .lq-card:hover .lq-thumb,
 .lq-card:focus-visible .lq-thumb {
-    transform: translateY(-3px) scale(1.18);
+    transform: translateY(-3px) scale(1.8);
     box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
     z-index: 5;
 }
@@ -488,7 +490,7 @@ body {
 
 .compare-tag {
     position: absolute;
-    top: 12px;
+    bottom: 12px;
     padding: 6px 10px;
     border-radius: 999px;
     background: rgba(15, 23, 42, 0.78);