Spaces:
Running
Running
File size: 8,296 Bytes
4d83ec2 8361df7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CXART | When AI Dreams of X-Rays</title>
<meta name="description" content="A gallery of artefactual chest X-ray images generated by a Diffusion Transformer (DiT) model. Where radiology meets hallucination." />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🩻</text></svg>" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Ambient Background -->
<div class="ambient-bg">
<div class="ambient-bg__orb ambient-bg__orb--1"></div>
<div class="ambient-bg__orb ambient-bg__orb--2"></div>
<div class="ambient-bg__orb ambient-bg__orb--3"></div>
</div>
<!-- Particle Canvas -->
<canvas id="particles"></canvas>
<!-- Texture overlays -->
<div class="noise"></div>
<div class="scanlines"></div>
<!-- Main Content -->
<div class="content">
<!-- ===== Hero ===== -->
<header class="hero">
<div class="hero__badge">DiT Generated · Artefactual CXR</div>
<h1 class="hero__title">CXART</h1>
<p class="hero__subtitle">
What happens when you ask a Diffusion Transformer to generate chest X-rays?
Keyboards for ribs, clockwork lungs, and the occasional renaissance angel.
</p>
<hr class="hero__divider" />
<p class="hero__meta">
<span>6</span> artefacts · <span>1</span> DiT model · <span>∞</span> confusion
</p>
</header>
<!-- ===== Gallery ===== -->
<main class="gallery" id="gallery">
<!-- Card 1 -->
<article class="card" id="card-1">
<span class="card__number">01</span>
<div class="card__image-wrap">
<img class="card__image" src="the-ribcage-plays-beethoven.webp" alt="AI-generated chest X-ray with keyboard-like rib structures" loading="lazy" />
</div>
<div class="card__body">
<h2 class="card__title">The Ribcage Plays Beethoven</h2>
<p class="card__tagline">When the model confuses anatomy with an office supplies catalog</p>
<p class="card__description">
The DiT model got its wires crossed, literally. Instead of ribs, it generated
what appears to be a full QWERTY keyboard embedded in the thorax. Each "key" sits
neatly between intercostal spaces. The AI apparently thinks touch-typing is an
organ function.
</p>
<span class="card__tag">keyboard thorax</span>
</div>
</article>
<!-- Card 2 -->
<article class="card" id="card-2">
<span class="card__number">02</span>
<div class="card__image-wrap">
<img class="card__image" src="steampunk-surgery-gone-wrong.webp" alt="AI-generated chest X-ray with clockwork gears in lung" loading="lazy" />
</div>
<div class="card__body">
<h2 class="card__title">Steampunk Surgery Gone Wrong</h2>
<p class="card__tagline">Victorian engineers have entered the radiology department</p>
<p class="card__description">
Intricate clockwork gears and mechanical components have invaded the right lung
field. The left lung looks relatively normal, as if the AI ran out of steampunk
ideas halfway through. A catheter-like tube snakes through the scene for good measure.
</p>
<span class="card__tag">mechanical lung</span>
</div>
</article>
<!-- Card 3 -->
<article class="card" id="card-3">
<span class="card__number">03</span>
<div class="card__image-wrap">
<img class="card__image" src="thorax-civil-war.webp" alt="AI-generated double-exposure chest X-ray with reality tear" loading="lazy" />
</div>
<div class="card__body">
<h2 class="card__title">Thorax: Civil War</h2>
<p class="card__tagline">Even the AI couldn't commit to a single chest</p>
<p class="card__description">
Two separate chest X-rays collide in one frame, split by a jagged vertical tear.
The heart shadow is displaced, caught between dimensions. It's as if the model tried
to generate two patients simultaneously and just said "why not both?"
</p>
<span class="card__tag">dimensional rift</span>
</div>
</article>
<!-- Card 4 -->
<article class="card" id="card-4">
<span class="card__number">04</span>
<div class="card__image-wrap">
<img class="card__image" src="404-heart-not-found.webp" alt="AI-generated chest X-ray with circuit board patterns and text hallucinations" loading="lazy" />
</div>
<div class="card__body">
<h2 class="card__title">404: Heart Not Found</h2>
<p class="card__tagline">Have you tried turning your ribcage off and on again?</p>
<p class="card__description">
Circuit boards, electronic chips, and mysterious text hallucinations ("OMO XC")
replace the organs entirely. The trachea branches into what looks like wiring.
Somewhere in there, a motherboard is serving as the mediastinum. The model
went full cyberpunk.
</p>
<span class="card__tag">digital anatomy</span>
</div>
</article>
<!-- Card 5 -->
<article class="card" id="card-5">
<span class="card__number">05</span>
<div class="card__image-wrap">
<img class="card__image" src="you-are-engraved-in-my-heart.webp" alt="AI-generated X-ray with hallucinated text scrawled across it" loading="lazy" />
</div>
<div class="card__body">
<h2 class="card__title">You Are Engraved In My Heart</h2>
<p class="card__tagline">Roses are red, violets are blue, "RRQYEN" means I love you</p>
<p class="card__description">
The model went rogue and decided to graffiti the X-ray. Bold, hallucinated text
"RRQYEN" is scrawled across what appears to be a pelvic/abdominal view instead
of a proper chest X-ray. Grid artifacts and checkerboard patterns round out this
beautifully unhinged composition.
</p>
<span class="card__tag">text hallucination</span>
</div>
</article>
<!-- Card 6 -->
<article class="card" id="card-6">
<span class="card__number">06</span>
<div class="card__image-wrap">
<img class="card__image" src="you-are-my-heart-you-are-my-soul.webp" alt="AI-generated surreal humanoid mannequin with rib-bone wings" loading="lazy" />
</div>
<div class="card__body">
<h2 class="card__title">You Are My Heart, You Are My Soul</h2>
<p class="card__tagline">Asked for a chest X-ray, got a renaissance angel with commitment issues</p>
<p class="card__description">
The crown jewel of the collection. Instead of an X-ray, the DiT model generated
a full humanoid mannequin figure with what can only be described as rib-bone wings.
The uncanny valley energy is off the charts. This is what the model dreams about
when it closes its weights.
</p>
<span class="card__tag">uncanny valley</span>
</div>
</article>
</main>
<!-- ===== Lightbox ===== -->
<div class="lightbox" id="lightbox">
<div class="lightbox__inner">
<button class="lightbox__close" id="lightbox-close" aria-label="Close lightbox">✕</button>
<img class="lightbox__image" id="lightbox-img" src="" alt="Full size X-ray" />
<div class="lightbox__caption">
<p class="lightbox__caption-title" id="lightbox-title"></p>
<p class="lightbox__caption-tagline" id="lightbox-tagline"></p>
</div>
</div>
</div>
<!-- ===== Footer ===== -->
<footer class="footer">
<p class="footer__text">
CXART | Artefactual chest X-rays generated by a DiT model<br />
Built with questionable taste and zero medical accuracy
</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
|