Spaces:
Running
Running
| <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> | |