Skip to content

Commit 5720bf1

Browse files
FeiSong123FeiSong123
committed
update LucidNFT
1 parent f2ab5c5 commit 5720bf1

2 files changed

Lines changed: 303 additions & 90 deletions

File tree

‎LucidNFT/index.html‎

Lines changed: 100 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -246,75 +246,109 @@ <h2>Results</h2>
246246

247247
<section id="visual-results" class="info-section">
248248
<h2>Visual Results</h2>
249-
<div class="sample-gallery">
250-
<article>
251-
<h3>Sample 016</h3>
252-
<div class="sample-columns">
253-
<figure>
254-
<img src="gallery/016_lq.jpg" alt="Sample 016 low-quality input">
255-
<figcaption>LR input</figcaption>
256-
</figure>
257-
<figure>
258-
<img src="gallery/016_lucidflux.jpg" alt="Sample 016 LucidFlux result">
259-
<figcaption>LucidFlux</figcaption>
260-
</figure>
261-
<figure>
262-
<img src="gallery/016_lucidnft.jpg" alt="Sample 016 LucidNFT result">
263-
<figcaption>LucidNFT</figcaption>
264-
</figure>
249+
<div class="visualization-stack">
250+
<figure class="visual-figure">
251+
<img src="visualization/visualization_1.png" alt="Visual comparison on RealLQ250">
252+
<figcaption>Visual comparison on RealLQ250. LucidNFT variants recover more accurate text structures and finer local textures while preserving LR-supported semantics.</figcaption>
253+
</figure>
254+
<figure class="visual-figure">
255+
<img src="visualization/visualization_2.png" alt="Visual comparison on RealLQ250">
256+
<figcaption>Visual comparison on RealLQ250. LucidFlux(+LucidNFT) improves local details while avoiding LR-inconsistent artifacts.</figcaption>
257+
</figure>
258+
</div>
259+
260+
<div class="lq-gallery">
261+
<div class="lq-card" tabindex="0" role="button" aria-label="Example 016 gallery item" data-example="016">
262+
<div class="lq-media">
263+
<img class="lq-thumb" src="gallery/016_lq.jpg" alt="Example 016 LR input">
264+
<div class="lq-hover-compare" aria-hidden="true">
265+
<div class="image-comparison inline-comparison">
266+
<img src="gallery/016_lucidflux.jpg" alt="Example 016 LucidFlux output" class="before-image">
267+
<img src="gallery/016_lucidnft.jpg" alt="Example 016 LucidFlux(+LucidNFT) output" class="after-image">
268+
<div class="comparison-slider" aria-label="Comparison slider">
269+
<div class="slider-handle">
270+
<div class="slider-arrow">◀ ▶</div>
271+
</div>
272+
</div>
273+
<div class="compare-tag before">LucidFlux</div>
274+
<div class="compare-tag after">LucidFlux(+LucidNFT)</div>
275+
</div>
276+
</div>
265277
</div>
266-
</article>
267-
<article>
268-
<h3>Sample 137</h3>
269-
<div class="sample-columns">
270-
<figure>
271-
<img src="gallery/137_lq.jpg" alt="Sample 137 low-quality input">
272-
<figcaption>LR input</figcaption>
273-
</figure>
274-
<figure>
275-
<img src="gallery/137_lucidflux.jpg" alt="Sample 137 LucidFlux result">
276-
<figcaption>LucidFlux</figcaption>
277-
</figure>
278-
<figure>
279-
<img src="gallery/137_lucidnft.jpg" alt="Sample 137 LucidNFT result">
280-
<figcaption>LucidNFT</figcaption>
281-
</figure>
278+
<div class="lq-meta">
279+
<span class="lq-title">Example 016</span>
280+
<span class="lq-sub">LR</span>
282281
</div>
283-
</article>
284-
<article>
285-
<h3>Sample 182</h3>
286-
<div class="sample-columns">
287-
<figure>
288-
<img src="gallery/182_lq.png" alt="Sample 182 low-quality input">
289-
<figcaption>LR input</figcaption>
290-
</figure>
291-
<figure>
292-
<img src="gallery/182_lucidflux.jpg" alt="Sample 182 LucidFlux result">
293-
<figcaption>LucidFlux</figcaption>
294-
</figure>
295-
<figure>
296-
<img src="gallery/182_lucidnft.jpg" alt="Sample 182 LucidNFT result">
297-
<figcaption>LucidNFT</figcaption>
298-
</figure>
282+
</div>
283+
284+
<div class="lq-card" tabindex="0" role="button" aria-label="Example 137 gallery item" data-example="137">
285+
<div class="lq-media">
286+
<img class="lq-thumb" src="gallery/137_lq.jpg" alt="Example 137 LR input">
287+
<div class="lq-hover-compare" aria-hidden="true">
288+
<div class="image-comparison inline-comparison">
289+
<img src="gallery/137_lucidflux.jpg" alt="Example 137 LucidFlux output" class="before-image">
290+
<img src="gallery/137_lucidnft.jpg" alt="Example 137 LucidFlux(+LucidNFT) output" class="after-image">
291+
<div class="comparison-slider" aria-label="Comparison slider">
292+
<div class="slider-handle">
293+
<div class="slider-arrow">◀ ▶</div>
294+
</div>
295+
</div>
296+
<div class="compare-tag before">LucidFlux</div>
297+
<div class="compare-tag after">LucidFlux(+LucidNFT)</div>
298+
</div>
299+
</div>
299300
</div>
300-
</article>
301-
<article>
302-
<h3>Sample 223</h3>
303-
<div class="sample-columns">
304-
<figure>
305-
<img src="gallery/223_lq.png" alt="Sample 223 low-quality input">
306-
<figcaption>LR input</figcaption>
307-
</figure>
308-
<figure>
309-
<img src="gallery/223_lucidflux.jpg" alt="Sample 223 LucidFlux result">
310-
<figcaption>LucidFlux</figcaption>
311-
</figure>
312-
<figure>
313-
<img src="gallery/223_lucidnft.jpg" alt="Sample 223 LucidNFT result">
314-
<figcaption>LucidNFT</figcaption>
315-
</figure>
301+
<div class="lq-meta">
302+
<span class="lq-title">Example 137</span>
303+
<span class="lq-sub">LR</span>
316304
</div>
317-
</article>
305+
</div>
306+
307+
<div class="lq-card" tabindex="0" role="button" aria-label="Example 223 gallery item" data-example="223">
308+
<div class="lq-media">
309+
<img class="lq-thumb" src="gallery/223_lq.png" alt="Example 223 LR input">
310+
<div class="lq-hover-compare" aria-hidden="true">
311+
<div class="image-comparison inline-comparison">
312+
<img src="gallery/223_lucidflux.jpg" alt="Example 223 LucidFlux output" class="before-image">
313+
<img src="gallery/223_lucidnft.jpg" alt="Example 223 LucidFlux(+LucidNFT) output" class="after-image">
314+
<div class="comparison-slider" aria-label="Comparison slider">
315+
<div class="slider-handle">
316+
<div class="slider-arrow">◀ ▶</div>
317+
</div>
318+
</div>
319+
<div class="compare-tag before">LucidFlux</div>
320+
<div class="compare-tag after">LucidFlux(+LucidNFT)</div>
321+
</div>
322+
</div>
323+
</div>
324+
<div class="lq-meta">
325+
<span class="lq-title">Example 223</span>
326+
<span class="lq-sub">LR</span>
327+
</div>
328+
</div>
329+
330+
<div class="lq-card" tabindex="0" role="button" aria-label="Example 182 gallery item" data-example="182">
331+
<div class="lq-media">
332+
<img class="lq-thumb" src="gallery/182_lq.png" alt="Example 182 LR input">
333+
<div class="lq-hover-compare" aria-hidden="true">
334+
<div class="image-comparison inline-comparison">
335+
<img src="gallery/182_lucidflux.jpg" alt="Example 182 LucidFlux output" class="before-image">
336+
<img src="gallery/182_lucidnft.jpg" alt="Example 182 LucidFlux(+LucidNFT) output" class="after-image">
337+
<div class="comparison-slider" aria-label="Comparison slider">
338+
<div class="slider-handle">
339+
<div class="slider-arrow">◀ ▶</div>
340+
</div>
341+
</div>
342+
<div class="compare-tag before">LucidFlux</div>
343+
<div class="compare-tag after">LucidFlux(+LucidNFT)</div>
344+
</div>
345+
</div>
346+
</div>
347+
<div class="lq-meta">
348+
<span class="lq-title">Example 182</span>
349+
<span class="lq-sub">LR</span>
350+
</div>
351+
</div>
318352
</div>
319353
</section>
320354

@@ -333,6 +367,7 @@ <h2>Contact Us</h2>
333367
<p>For questions or collaboration, contact sfei285@connect.hkust-gz.edu.cn, tye610@connect.hkust-gz.edu.cn, or leizhu@hkust-gz.edu.cn.</p>
334368
</section>
335369
</div>
370+
<script src="script.js"></script>
336371
</body>
337372

338373
</html>

0 commit comments

Comments
 (0)