← back to Model Arena
auto-save: 2026-07-25T18:37:55 (19 files) — data/challenges.json data/artifacts/2b11fe341ffd/claude-code.html data/artifacts/2b11fe341ffd/claude-code.png data/artifacts/2b11fe341ffd/gemma3-12b.html data/artifacts/2b11fe341ffd/gemma3-12b.png
f109d9bd12e25e018c999d13b3452266db9dbb9c · 2026-07-25 18:38:00 -0700 · Steve Abrams
Files touched
A data/artifacts/2b11fe341ffd/claude-code.htmlA data/artifacts/2b11fe341ffd/claude-code.pngA data/artifacts/2b11fe341ffd/gemma3-12b.htmlA data/artifacts/2b11fe341ffd/gemma3-12b.pngA data/artifacts/2b11fe341ffd/hermes3-8b.htmlA data/artifacts/2b11fe341ffd/hermes3-8b.pngA data/artifacts/2b11fe341ffd/hf-qwen-coder-32b.htmlA data/artifacts/2b11fe341ffd/hf-qwen-coder-32b.pngA data/artifacts/5caa8f05b5a8/claude-code.htmlA data/artifacts/5caa8f05b5a8/claude-code.pngA data/artifacts/5caa8f05b5a8/gemma3-12b.htmlA data/artifacts/5caa8f05b5a8/gemma3-12b.pngA data/artifacts/5caa8f05b5a8/hermes3-8b.htmlA data/artifacts/5caa8f05b5a8/hermes3-8b.pngA data/artifacts/5caa8f05b5a8/hf-qwen-coder-32b.htmlA data/artifacts/5caa8f05b5a8/hf-qwen-coder-32b.pngA data/artifacts/5caa8f05b5a8/qwen3-14b.htmlA data/artifacts/5caa8f05b5a8/qwen3-14b.pngM data/challenges.json
Diff
commit f109d9bd12e25e018c999d13b3452266db9dbb9c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sat Jul 25 18:38:00 2026 -0700
auto-save: 2026-07-25T18:37:55 (19 files) — data/challenges.json data/artifacts/2b11fe341ffd/claude-code.html data/artifacts/2b11fe341ffd/claude-code.png data/artifacts/2b11fe341ffd/gemma3-12b.html data/artifacts/2b11fe341ffd/gemma3-12b.png
---
data/artifacts/2b11fe341ffd/claude-code.html | 472 ++++++++++++++++
data/artifacts/2b11fe341ffd/claude-code.png | Bin 0 -> 89880 bytes
data/artifacts/2b11fe341ffd/gemma3-12b.html | 263 +++++++++
data/artifacts/2b11fe341ffd/gemma3-12b.png | Bin 0 -> 34802 bytes
data/artifacts/2b11fe341ffd/hermes3-8b.html | 156 ++++++
data/artifacts/2b11fe341ffd/hermes3-8b.png | Bin 0 -> 37347 bytes
data/artifacts/2b11fe341ffd/hf-qwen-coder-32b.html | 214 ++++++++
data/artifacts/2b11fe341ffd/hf-qwen-coder-32b.png | Bin 0 -> 34589 bytes
data/artifacts/5caa8f05b5a8/claude-code.html | 609 +++++++++++++++++++++
data/artifacts/5caa8f05b5a8/claude-code.png | Bin 0 -> 149284 bytes
data/artifacts/5caa8f05b5a8/gemma3-12b.html | 303 ++++++++++
data/artifacts/5caa8f05b5a8/gemma3-12b.png | Bin 0 -> 43511 bytes
data/artifacts/5caa8f05b5a8/hermes3-8b.html | 179 ++++++
data/artifacts/5caa8f05b5a8/hermes3-8b.png | Bin 0 -> 60241 bytes
data/artifacts/5caa8f05b5a8/hf-qwen-coder-32b.html | 254 +++++++++
data/artifacts/5caa8f05b5a8/hf-qwen-coder-32b.png | Bin 0 -> 49164 bytes
data/artifacts/5caa8f05b5a8/qwen3-14b.html | 412 ++++++++++++++
data/artifacts/5caa8f05b5a8/qwen3-14b.png | Bin 0 -> 44054 bytes
data/challenges.json | 254 ++++++---
19 files changed, 3054 insertions(+), 62 deletions(-)
diff --git a/data/artifacts/2b11fe341ffd/claude-code.html b/data/artifacts/2b11fe341ffd/claude-code.html
new file mode 100644
index 0000000..af87246
--- /dev/null
+++ b/data/artifacts/2b11fe341ffd/claude-code.html
@@ -0,0 +1,472 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Style Showdown — Designer Wallcoverings</title>
+<style>
+ :root{
+ --bg:#f4efe6;
+ --surface:#fffdf8;
+ --ink:#1c1a17;
+ --muted:#8a8578;
+ --accent:#9a7b3f; /* single antique-brass metallic */
+ --accent-deep:#7d6236;
+ --line:#e4ddce;
+ --shadow:0 8px 24px rgba(28,26,23,.12);
+ --shadow-hi:0 18px 52px rgba(28,26,23,.20);
+ --glow:0 0 28px rgba(154,123,63,.42);
+ --ease:cubic-bezier(.22,1,.36,1);
+ --serif:'Cormorant Garamond','EB Garamond','Playfair Display',Didot,'Bodoni MT',Georgia,serif;
+ --sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+ }
+
+ *{box-sizing:border-box;margin:0;padding:0}
+ html,body{background:var(--bg);color:var(--ink)}
+ body{
+ font-family:var(--sans);
+ min-height:100vh;
+ -webkit-font-smoothing:antialiased;
+ overflow-x:hidden;
+ background-image:radial-gradient(120% 80% at 50% -10%,rgba(154,123,63,.06),transparent 60%);
+ }
+
+ /* ---------- HEADER / WORDMARK ---------- */
+ header.brandbar{
+ position:sticky;top:0;z-index:50;
+ background:var(--surface);
+ border-bottom:1px solid var(--line);
+ padding:18px clamp(20px,5vw,56px);
+ display:flex;align-items:center;justify-content:space-between;
+ gap:20px;flex-wrap:wrap;
+ box-shadow:0 1px 0 rgba(28,26,23,.03);
+ }
+ .wordmark{
+ font-family:var(--serif);
+ color:var(--ink); /* darkest ink — never surface */
+ font-size:40px;
+ line-height:1.02;
+ font-weight:600;
+ text-transform:uppercase;
+ letter-spacing:.18em;
+ white-space:normal;
+ }
+ .wordmark small{display:block;font-size:40px;letter-spacing:.16em}
+ .brandtag{
+ font-family:var(--sans);
+ font-size:12px;letter-spacing:.24em;text-transform:uppercase;
+ color:var(--muted);
+ display:flex;align-items:center;gap:10px;
+ }
+ .brandtag::before{content:"";width:26px;height:1px;background:var(--accent)}
+
+ /* ---------- STAGE ---------- */
+ main{
+ max-width:1040px;margin:0 auto;
+ padding:clamp(28px,5vw,56px) clamp(20px,5vw,48px) 80px;
+ }
+ .intro{text-align:center;margin-bottom:34px}
+ .kicker{
+ font-size:12px;letter-spacing:.28em;text-transform:uppercase;
+ color:var(--accent-deep);font-weight:600;margin-bottom:14px;
+ }
+ h1{
+ font-family:var(--serif);
+ font-weight:600;
+ font-size:clamp(38px,6.4vw,64px);
+ line-height:1.02;letter-spacing:.005em;
+ }
+ .sub{
+ color:var(--muted);font-size:15px;letter-spacing:.02em;
+ margin-top:12px;max-width:38ch;margin-inline:auto;
+ }
+
+ /* progress rail */
+ .rail{
+ display:flex;align-items:center;justify-content:center;
+ gap:10px;margin:30px auto 6px;flex-wrap:wrap;
+ }
+ .rail .step{
+ font-size:11px;letter-spacing:.22em;text-transform:uppercase;
+ color:var(--muted);font-weight:600;
+ padding:6px 2px;position:relative;transition:color .4s var(--ease);
+ }
+ .rail .step.active{color:var(--ink)}
+ .rail .step.done{color:var(--accent-deep)}
+ .rail .dot{width:5px;height:5px;border-radius:50%;background:var(--line)}
+ .matchcount{
+ text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
+ color:var(--muted);margin-bottom:26px;
+ }
+
+ /* matchup */
+ .arena{position:relative}
+ .matchup{
+ display:grid;
+ grid-template-columns:1fr auto 1fr;
+ align-items:center;gap:clamp(12px,3vw,34px);
+ }
+ .vs{
+ font-family:var(--serif);font-style:italic;
+ font-size:clamp(22px,4vw,34px);color:var(--accent);
+ text-align:center;user-select:none;
+ }
+
+ .tile{
+ background:var(--surface);
+ border:1px solid var(--line);
+ border-radius:14px;
+ padding:14px;
+ cursor:pointer;
+ box-shadow:var(--shadow);
+ transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
+ animation:fadeUp .7s var(--ease) both;
+ position:relative;
+ overflow:hidden;
+ }
+ .tile:nth-child(1){animation-delay:.05s}
+ .tile:last-child{animation-delay:.14s}
+ .tile:hover{
+ transform:translateY(-6px);
+ box-shadow:var(--shadow-hi);
+ border-color:var(--accent);
+ }
+ .tile:active{transform:translateY(-2px)}
+
+ .swatch{
+ width:100%;
+ aspect-ratio:4/5;
+ border-radius:8px;
+ border:1px solid rgba(28,26,23,.10);
+ background-repeat:repeat;
+ }
+ .tile .name{
+ font-family:var(--serif);font-size:clamp(24px,3.4vw,32px);
+ font-weight:600;margin-top:14px;line-height:1;
+ }
+ .tile .tag{
+ font-size:11px;letter-spacing:.2em;text-transform:uppercase;
+ color:var(--muted);margin-top:8px;
+ }
+
+ .tile.winner{
+ border-color:var(--accent);
+ box-shadow:var(--glow),var(--shadow-hi);
+ transform:translateY(-8px) scale(1.02);
+ z-index:3;
+ }
+ .tile.winner::after{
+ content:"✦ ADVANCES";
+ position:absolute;top:22px;left:50%;transform:translateX(-50%);
+ background:var(--accent);color:#fff;
+ font-size:11px;letter-spacing:.18em;font-weight:700;
+ padding:7px 14px;border-radius:40px;
+ animation:pop .5s var(--ease) both;
+ }
+ .tile.loser{
+ opacity:.32;filter:grayscale(.55) saturate(.7);
+ transform:scale(.97);
+ }
+ .matchup.resolving .tile{cursor:default;pointer-events:none}
+
+ /* ---------- RESULT OVERLAY ---------- */
+ .overlay{
+ position:fixed;inset:0;z-index:100;
+ background:rgba(28,26,23,.62);
+ backdrop-filter:blur(6px);
+ display:flex;align-items:center;justify-content:center;
+ padding:24px;
+ opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
+ }
+ .overlay.show{opacity:1;pointer-events:auto}
+ .card{
+ background:var(--surface);
+ border:1px solid var(--line);
+ border-radius:16px;
+ max-width:420px;width:100%;
+ padding:40px 34px 32px;
+ text-align:center;
+ box-shadow:var(--shadow-hi);
+ transform:translateY(24px) scale(.97);
+ transition:transform .6s var(--ease);
+ position:relative;
+ }
+ .overlay.show .card{transform:none}
+ .card .crown{
+ font-size:12px;letter-spacing:.26em;text-transform:uppercase;
+ color:var(--accent-deep);font-weight:600;
+ }
+ .card .champ-swatch{
+ width:150px;height:186px;margin:22px auto 20px;
+ border-radius:12px;border:1px solid rgba(28,26,23,.12);
+ background-repeat:repeat;box-shadow:var(--shadow);
+ animation:pop .6s var(--ease) both;
+ }
+ .card h2{
+ font-family:var(--serif);font-size:46px;font-weight:600;line-height:1;
+ }
+ .card .champ-tag{
+ font-size:12px;letter-spacing:.2em;text-transform:uppercase;
+ color:var(--muted);margin-top:12px;
+ }
+ .card .line{
+ height:1px;background:var(--line);margin:24px 0;
+ }
+ .card p.blurb{color:var(--muted);font-size:14px;line-height:1.6}
+ .actions{display:flex;gap:12px;margin-top:26px}
+ button{
+ font-family:var(--sans);
+ flex:1;
+ font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
+ padding:15px 16px;border-radius:40px;cursor:pointer;
+ border:1px solid var(--accent);
+ transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
+ }
+ button:hover{transform:translateY(-2px)}
+ .btn-share{background:var(--accent);color:#fff}
+ .btn-share:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
+ .btn-again{background:transparent;color:var(--ink)}
+ .btn-again:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)}
+
+ .toast{
+ position:fixed;left:50%;bottom:36px;transform:translate(-50%,20px);
+ background:var(--ink);color:var(--surface);
+ font-size:12px;letter-spacing:.14em;text-transform:uppercase;
+ padding:13px 22px;border-radius:40px;
+ opacity:0;pointer-events:none;transition:all .4s var(--ease);z-index:200;
+ }
+ .toast.show{opacity:1;transform:translate(-50%,0)}
+
+ @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
+ @keyframes pop{0%{opacity:0;transform:scale(.7)}60%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
+
+ /* ---------- SWATCH MOTIFS (all CSS/SVG, no network) ---------- */
+ .sw-damask{
+ background-color:#1f3d33;
+ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='120' viewBox='0 0 80 120'><g fill='none' stroke='%23b79a5e' stroke-width='2'><path d='M40 6C62 24 62 46 40 62 18 46 18 24 40 6Z'/><path d='M40 62C62 80 62 104 40 118 18 104 18 80 40 62Z'/></g><circle cx='40' cy='32' r='5' fill='%23b79a5e'/><circle cx='40' cy='90' r='5' fill='%23b79a5e'/><circle cx='40' cy='62' r='3' fill='%23d8c188'/></svg>");
+ background-size:80px 120px;
+ }
+ .sw-toile{
+ background-color:#f2ede1;
+ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><g fill='none' stroke='%233a4c6d' stroke-width='1.3' stroke-linecap='round'><path d='M30 118 C28 86 42 76 34 46'/><path d='M34 62 C52 54 56 40 46 28'/><path d='M34 78 C16 70 12 56 24 46'/><circle cx='46' cy='26' r='4'/><circle cx='24' cy='44' r='4'/><path d='M86 122 q16 -22 32 0'/><path d='M96 98 a12 12 0 1 1 0.1 0'/><path d='M104 34 l8 8 l-8 8 l-8 -8Z'/></g></svg>");
+ background-size:140px 140px;
+ }
+ .sw-ikat{
+ background-color:#efe6d6;
+ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><defs><filter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'><feGaussianBlur stdDeviation='2.4'/></filter></defs><g filter='url(%23b)'><path d='M60 12 L98 60 L60 108 L22 60Z' fill='none' stroke='%23b5502f' stroke-width='7'/><path d='M60 34 L80 60 L60 86 L40 60Z' fill='%23c9772f'/><path d='M60 58 L64 60 L60 64 L56 60Z' fill='%23efe6d6'/></g></svg>");
+ background-size:120px 120px;
+ }
+ .sw-chinoiserie{
+ background-color:#d7e2d8;
+ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><g fill='none' stroke='%235d7a68' stroke-width='1.6' stroke-linecap='round'><path d='M20 142 C42 112 30 82 62 60 C82 46 92 30 122 20'/><path d='M62 60 C72 50 86 52 94 44'/><path d='M46 94 C56 86 68 88 76 80'/><path d='M92 108 C104 100 110 88 108 78'/></g><g fill='%23cf869c'><circle cx='122' cy='20' r='6'/><circle cx='94' cy='44' r='5'/><circle cx='76' cy='80' r='5'/><circle cx='30' cy='120' r='5'/><circle cx='108' cy='78' r='4.5'/></g></svg>");
+ background-size:150px 150px;
+ }
+ .sw-artdeco{
+ background-color:#141414;
+ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g stroke='%23c9a441' fill='none' stroke-width='1.5'><path d='M60 60 L60 2'/><path d='M60 60 L96 8'/><path d='M60 60 L112 30'/><path d='M60 60 L118 60'/><path d='M60 60 L112 90'/><path d='M60 60 L96 112'/><path d='M60 60 L60 118'/><path d='M60 60 L24 112'/><path d='M60 60 L8 90'/><path d='M60 60 L2 60'/><path d='M60 60 L8 30'/><path d='M60 60 L24 8'/><circle cx='60' cy='60' r='24'/><circle cx='60' cy='60' r='40'/></g><circle cx='60' cy='60' r='6' fill='%23c9a441'/></svg>");
+ background-size:120px 120px;
+ }
+ .sw-boho{
+ background-color:#d8c3a5;
+ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='none' stroke='%238a4b2f' stroke-width='2' stroke-linejoin='round'><path d='M0 22 L20 42 L40 22 L60 42 L80 22 L100 42 L120 22'/><path d='M0 98 L20 78 L40 98 L60 78 L80 98 L100 78 L120 98'/><path d='M60 48 L76 64 L60 80 L44 64Z'/></g><g stroke='%238a4b2f' stroke-width='2'><path d='M10 60 h18'/><path d='M92 60 h18'/></g><g fill='%238a4b2f'><circle cx='60' cy='64' r='2.4'/></g></svg>");
+ background-size:120px 120px;
+ }
+ .sw-coastal{
+ background-color:#f8f6f0;
+ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><rect width='120' height='60' fill='%23f8f6f0'/><rect y='23' width='120' height='9' fill='%231f4e79'/><path d='M0 47 q15 -11 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%231f4e79' stroke-width='2'/><path d='M0 12 q15 -9 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%237ba7cf' stroke-width='1.6'/></svg>");
+ background-size:120px 60px;
+ }
+ .sw-grand{
+ background-color:#f2dde0;
+ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%234a6d4f' stroke-width='1.6'><path d='M0 40 L40 0 L80 40 L40 80Z'/><path d='M40 0 L40 80'/><path d='M0 40 L80 40'/></g><g fill='none' stroke='%23b5657a' stroke-width='1.5'><path d='M-4 74 a12 12 0 0 1 24 0 a12 12 0 0 1 24 0 a12 12 0 0 1 24 0 a12 12 0 0 1 24 0'/></g><circle cx='40' cy='40' r='3' fill='%23b5657a'/></svg>");
+ background-size:80px 80px;
+ }
+
+ @media(max-width:640px){
+ .matchup{grid-template-columns:1fr;gap:16px}
+ .vs{padding:2px 0}
+ .wordmark,.wordmark small{font-size:40px}
+ }
+</style>
+</head>
+<body>
+
+ <header class="brandbar">
+ <div class="wordmark">Designer<small>Wallcoverings</small></div>
+ <div class="brandtag">Style Showdown</div>
+ </header>
+
+ <main>
+ <section class="intro">
+ <div class="kicker">The Bracket</div>
+ <h1>Style Showdown</h1>
+ <p class="sub">Eight design traditions. One crown. Tap the pattern you'd hang on your wall and advance it to victory.</p>
+
+ <div class="rail" id="rail">
+ <span class="step" data-round="Quarterfinal">Quarters</span>
+ <span class="dot"></span>
+ <span class="step" data-round="Semifinal">Semis</span>
+ <span class="dot"></span>
+ <span class="step" data-round="Final">Final</span>
+ <span class="dot"></span>
+ <span class="step" data-round="Champion">Champion</span>
+ </div>
+ <div class="matchcount" id="matchcount">Match 1 of 7</div>
+ </section>
+
+ <section class="arena">
+ <div class="matchup" id="matchup"><!-- tiles injected --></div>
+ </section>
+ </main>
+
+ <!-- RESULT OVERLAY (in-page, token-styled) -->
+ <div class="overlay" id="overlay">
+ <div class="card">
+ <div class="crown">✦ Style Showdown Champion ✦</div>
+ <div class="champ-swatch" id="champSwatch"></div>
+ <h2 id="champName">—</h2>
+ <div class="champ-tag" id="champTag"></div>
+ <div class="line"></div>
+ <p class="blurb" id="champBlurb"></p>
+ <div class="actions">
+ <button class="btn-share" id="shareBtn">Share Result</button>
+ <button class="btn-again" id="againBtn">Play Again</button>
+ </div>
+ </div>
+ </div>
+
+ <div class="toast" id="toast">Copied to clipboard</div>
+
+<script>
+ const STYLES = [
+ {id:'damask', name:'Damask', tag:'Regal Symmetry', sw:'sw-damask', blurb:'Ornate, mirror-perfect motifs with old-world gravitas.'},
+ {id:'toile', name:'Toile', tag:'Pastoral Romance', sw:'sw-toile', blurb:'Storybook scenes rendered in a single quiet ink.'},
+ {id:'ikat', name:'Ikat', tag:'Woven Soul', sw:'sw-ikat', blurb:'Feathered, hand-dyed geometry with a nomadic pulse.'},
+ {id:'chinoiserie', name:'Chinoiserie', tag:'Painted Reverie', sw:'sw-chinoiserie', blurb:'Trailing branches and blossoms in serene celadon.'},
+ {id:'artdeco', name:'Art Deco', tag:'Gilded Geometry', sw:'sw-artdeco', blurb:'Jazz-age radiance in black lacquer and brass.'},
+ {id:'boho', name:'Boho', tag:'Free-Spirited', sw:'sw-boho', blurb:'Earthy mudcloth marks with easy, undone charm.'},
+ {id:'coastal', name:'Coastal', tag:'Breezy Calm', sw:'sw-coastal', blurb:'Cool navy stripes and gentle, salt-air waves.'},
+ {id:'grandmillennial',name:'Grandmillennial',tag:'Heirloom Charm', sw:'sw-grand', blurb:'Trellis and scallop — granny-chic, gloriously.'}
+ ];
+
+ const ROUND_NAME = {8:'Quarterfinal',4:'Semifinal',2:'Final'};
+ const TOTAL = 7;
+
+ let entrants, nextRound, pairIdx, matchNo, locked;
+
+ const $matchup = document.getElementById('matchup');
+ const $rail = document.getElementById('rail');
+ const $count = document.getElementById('matchcount');
+ const $overlay = document.getElementById('overlay');
+ const $toast = document.getElementById('toast');
+
+ function shuffle(a){
+ a=a.slice();
+ for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];}
+ return a;
+ }
+
+ function start(){
+ entrants = shuffle(STYLES);
+ nextRound=[]; pairIdx=0; matchNo=0; locked=false;
+ $overlay.classList.remove('show');
+ renderMatch();
+ }
+
+ function updateRail(){
+ const size = entrants.length;
+ const active = ROUND_NAME[size] || 'Champion';
+ const order = ['Quarterfinal','Semifinal','Final','Champion'];
+ const activeIdx = order.indexOf(active);
+ $rail.querySelectorAll('.step').forEach(s=>{
+ const r = s.dataset.round;
+ const i = order.indexOf(r);
+ s.classList.toggle('active', i===activeIdx);
+ s.classList.toggle('done', i<activeIdx);
+ });
+ }
+
+ function renderMatch(){
+ updateRail();
+ const a = entrants[pairIdx], b = entrants[pairIdx+1];
+ $count.textContent = `${ROUND_NAME[entrants.length]} · Match ${matchNo+1} of ${TOTAL}`;
+ $matchup.className = 'matchup';
+ $matchup.innerHTML =
+ tileHTML(a,0) +
+ `<div class="vs">vs</div>` +
+ tileHTML(b,1);
+ $matchup.querySelectorAll('.tile').forEach(t=>{
+ t.addEventListener('click',()=>pick(parseInt(t.dataset.side,10)));
+ });
+ }
+
+ function tileHTML(style, side){
+ return `<div class="tile" data-side="${side}">
+ <div class="swatch ${style.sw}" role="img" aria-label="${style.name} pattern swatch"></div>
+ <div class="name">${style.name}</div>
+ <div class="tag">${style.tag}</div>
+ </div>`;
+ }
+
+ function pick(side){
+ if(locked) return;
+ locked = true;
+ const tiles = $matchup.querySelectorAll('.tile');
+ $matchup.classList.add('resolving');
+ tiles[side].classList.add('winner');
+ tiles[side?0:1].classList.add('loser');
+
+ const winner = entrants[pairIdx + side];
+
+ setTimeout(()=>{
+ nextRound.push(winner);
+ pairIdx += 2;
+ matchNo += 1;
+
+ if(pairIdx >= entrants.length){
+ entrants = nextRound; nextRound = []; pairIdx = 0;
+ if(entrants.length === 1){ crown(entrants[0]); return; }
+ }
+ locked = false;
+ renderMatch();
+ }, 780);
+ }
+
+ function crown(style){
+ updateRail();
+ document.getElementById('champSwatch').className = 'champ-swatch ' + style.sw;
+ document.getElementById('champName').textContent = style.name;
+ document.getElementById('champTag').textContent = style.tag;
+ document.getElementById('champBlurb').textContent =
+ `${style.blurb} Crowned champion of all eight styles.`;
+ $overlay.dataset.style = style.name;
+ setTimeout(()=>$overlay.classList.add('show'), 260);
+ }
+
+ function showToast(msg){
+ $toast.textContent = msg;
+ $toast.classList.add('show');
+ setTimeout(()=>$toast.classList.remove('show'), 2200);
+ }
+
+ document.getElementById('shareBtn').addEventListener('click', async ()=>{
+ const name = $overlay.dataset.style || '';
+ const text = `🏆 ${name} is my Style Showdown champion! Which design style wins your wall? — Designer Wallcoverings`;
+ try{
+ if(navigator.share){
+ await navigator.share({title:'Style Showdown', text});
+ }else if(navigator.clipboard){
+ await navigator.clipboard.writeText(text);
+ showToast('Result copied');
+ }else{
+ showToast(name + ' wins!');
+ }
+ }catch(e){ /* share dismissed — no-op */ }
+ });
+
+ document.getElementById('againBtn').addEventListener('click', start);
+
+ start();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/2b11fe341ffd/claude-code.png b/data/artifacts/2b11fe341ffd/claude-code.png
new file mode 100644
index 0000000..ca8d05b
Binary files /dev/null and b/data/artifacts/2b11fe341ffd/claude-code.png differ
diff --git a/data/artifacts/2b11fe341ffd/gemma3-12b.html b/data/artifacts/2b11fe341ffd/gemma3-12b.html
new file mode 100644
index 0000000..ac6915c
--- /dev/null
+++ b/data/artifacts/2b11fe341ffd/gemma3-12b.html
@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Style Showdown</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #fff9f1;
+ --text: #3a2c22;
+ --muted: #a08c7a;
+ --accent: #c65f38;
+ --line: rgba(0, 0, 0, 0.1);
+ --shadow: rgba(0, 0, 0, 0.12);
+ --ease: cubic-bezier(.22, 1, .36, 1);
+ }
+
+ body {
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background-color: var(--bg);
+ color: var(--text);
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden; /* Prevent horizontal scroll */
+ }
+
+ header {
+ background-color: var(--surface);
+ padding: 32px;
+ text-align: left;
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 67px;
+ letter-spacing: .18em;
+ line-height: 1;
+ color: var(--text);
+ }
+
+ .container {
+ padding: 96px;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .matchup {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 24px;
+ margin-bottom: 64px;
+ }
+
+ .card {
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: 0 8px 24px var(--shadow);
+ padding: 32px;
+ transition: box-shadow .3s var(--ease), transform .3s var(--ease);
+ cursor: pointer;
+ }
+
+ .card:hover {
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
+ transform: translateY(-5px);
+ }
+
+ .style-swatch {
+ width: 100%;
+ height: 200px;
+ border: 1px solid var(--line);
+ margin-bottom: 16px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 24px; /* For fallback text if SVG fails */
+ }
+
+ .damask { background: repeating-linear-gradient(45deg, #f0e68c, #f0e68c 10px, #d7b39a 10px, #d7b39a 20px); }
+ .toile {background: repeating-radial-gradient(circle 45% at 50% 50%, #f0e68c 0%, #f0e68c 10%, #d7b39a 10%, #d7b39a 20%);}
+ .ikat { background: repeating-linear-gradient(45deg, transparent, rgba(175,142,99,0) 10px, rgba(175,142,99,0) 20px, transparent 20px);
+ background-size: 20px 20px; }
+ .chinoiserie { background: repeating-linear-gradient(45deg, rgba(238,236,217,0), rgba(238,236,217,0) 10px, rgba(227,199,173,0.1) 10px, rgba(227,199,173,0.1) 20px);
+ background-size: 20px 20px; }
+
+ .artdeco { background: repeating-linear-gradient(45deg, #e8e8ff, #e8e8ff 10px, #d3d3d3 10px, #d3d3d3 20px); }
+ .boho {background: linear-gradient(90deg, rgba(175,142,99,0) 0%,rgba(175,142,99,0) 5px, rgba(238,236,217,0.2) 5px, rgba(238,236,217,0.2) 10px);
+ background-size: 10px 10px;}
+
+ .coastal { background: linear-gradient(90deg, #e0f2f1 0%,#e0f2f1 5px, rgba(175,142,99,0) 5px,rgba(175,142,99,0) 10px);}
+ .grandmillennial {background: repeating-linear-gradient(45deg, #f0e68c, #f0e68c 10px, rgba(175,142,99,0.3) 10px, rgba(175,142,99,0.3) 20px);
+ background-size: 20px 20px;}
+
+
+
+ .style-name {
+ font-family: 'Didot', serif; /* Fallback */
+ font-size: 28px;
+ text-align: center;
+ margin-bottom: 8px;
+ text-transform: uppercase;
+ letter-spacing: .15em;
+ }
+
+ .scoreboard {
+ display: flex;
+ justify-content: space-between;
+ font-family: sans-serif;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: .15em;
+ color: var(--muted);
+ }
+
+
+ .result-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.9);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+ padding: 48px;
+ box-sizing: border-box;
+ }
+
+ .result-card {
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: 0 8px 24px var(--shadow);
+ padding: 32px;
+ text-align: center;
+ font-family: sans-serif;
+ }
+
+ .result-title {
+ font-size: 38px;
+ margin-bottom: 16px;
+ }
+
+
+ </style>
+</head>
+<body>
+
+ <header>DESIGNER WALLCOVERINGS</header>
+
+ <div class="container">
+
+ <h1>Style Showdown</h1>
+
+ <section class="matchup" id="matchup-1">
+ <div class="card" data-style="damask" data-next="#matchup-2">
+ <div class="style-swatch damask"></div>
+ <span class="style-name">Damask</span>
+ <div class="scoreboard">0 - 0</div>
+ </div>
+ <div class="card" data-style="toile" data-next="#matchup-2">
+ <div class="style-swatch toile"></div>
+ <span class="style-name">Toile</span>
+ <div class="scoreboard">0 - 0</div>
+ </div>
+ </section>
+
+ <section class="matchup" id="matchup-2">
+ <div class="card" data-style="ikat" data-next="#matchup-3">
+ <div class="style-swatch ikat"></div>
+ <span class="style-name">Ikat</span>
+ <div class="scoreboard">0 - 0</div>
+ </div>
+ <div class="card" data-style="chinoiserie" data-next="#matchup-3">
+ <div class="style-swatch chinoiserie"></div>
+ <span class="style-name">Chinoiserie</span>
+ <div class="scoreboard">0 - 0</div>
+ </div>
+ </section>
+
+ <section class="matchup" id="matchup-3">
+ <div class="card" data-style="artdeco" data-next="#final-match">
+ <div class="style-swatch artdeco"></div>
+ <span class="style-name">Art Deco</span>
+ <div class="scoreboard">0 - 0</div>
+ </div>
+ <div class="card" data-style="boho" data-next="#final-match">
+ <div class="style-swatch boho"></div>
+ <span class="style-name">Boho</span>
+ <div class="scoreboard">0 - 0</div>
+ </div>
+ </section>
+
+ <section class="matchup" id="final-match">
+ <div class="card" data-style="coastal" data-next="#grandmillennial-vs-coastal">
+ <div class="style-swatch coastal"></div>
+ <span class="style-name">Coastal</span>
+ <div class="scoreboard">0 - 0</div>
+ </div>
+ <div class="card" data-style="grandmillennial" data-next="#grandmillennial-vs-coastal">
+ <div class="style-swatch grandmillennial"></div>
+ <span class="style-name">Grandmillennial</span>
+ <div class="scoreboard">0 - 0</div>
+ </div>
+ </section>
+
+
+
+ </div>
+
+ <div id="result-overlay" class="result-overlay" style="display: none;">
+ <div class="result-card">
+ <h1 class="result-title">Champion: <span id="champion-style"></span></h1>
+ <p>Thank you for playing!</p>
+ <button onclick="document.getElementById('result-overlay').style.display = 'none';">Close</button>
+ </div>
+ </div>
+
+ <script>
+ const cards = document.querySelectorAll('.card');
+ let currentMatchup = 1;
+
+ function showMatchup(matchupNumber) {
+ const matchupSection = document.getElementById(`matchup-${matchupNumber}`);
+ if (matchupSection) {
+ matchupSection.style.display = 'block';
+ } else {
+ console.warn(`Matchup section ${matchupNumber} not found.`);
+ }
+
+ }
+
+ showMatchup(currentMatchup);
+
+
+ cards.forEach(card => {
+ card.addEventListener('click', () => {
+ const style = card.dataset.style;
+ const nextMatchupId = card.dataset.next;
+
+ // Simulate a short animation (replace with more elaborate CSS transitions)
+ card.classList.add('animate-win');
+ setTimeout(() => {
+ card.classList.remove('animate-win');
+ }, 300);
+
+
+ if (nextMatchupId) {
+ currentMatchup = parseInt(nextMatchupId.replace('#matchup-', ''),10);
+ showMatchup(currentMatchup);
+
+ } else {
+
+ // Show the result overlay
+ document.getElementById('champion-style').textContent = style;
+ document.getElementById('result-overlay').style.display = 'flex';
+ }
+ });
+ });
+
+
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/2b11fe341ffd/gemma3-12b.png b/data/artifacts/2b11fe341ffd/gemma3-12b.png
new file mode 100644
index 0000000..ade40cb
Binary files /dev/null and b/data/artifacts/2b11fe341ffd/gemma3-12b.png differ
diff --git a/data/artifacts/2b11fe341ffd/hermes3-8b.html b/data/artifacts/2b11fe341ffd/hermes3-8b.html
new file mode 100644
index 0000000..871c2cf
--- /dev/null
+++ b/data/artifacts/2b11fe341ffd/hermes3-8b.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design Style Showdown</title>
+<style>
+:root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent1: #c9a961;
+ --accent2: #7d6a45;
+ --line: 1px solid var(--text);
+ --shadow: 0 8px 24px rgba(0,0,0,.12);
+ --ease: cubic-bezier(.22,1,.36,1);
+}
+body {
+ background-color: var(--bg);
+ color: var(--text);
+ font-family: 'EB Garamond', Georgia, serif;
+ line-height: 1.6;
+}
+.muted {
+ color: var(--muted);
+ letter-spacing: .15em;
+}
+h2 {
+ font-family: 'Didot', 'Playfair Display', 'Bodoni MT', Didot, Garamond, serif;
+ font-size: 38px;
+ text-align: left;
+}
+h3 {
+ font-size: 28px;
+ font-weight: normal;
+ margin-top: 24px;
+}
+.card {
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: var(--shadow);
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 32px;
+ position: relative;
+ transition: all .7s var(--ease);
+}
+.card::after {
+ background: linear-gradient(45deg, var(--accent1) 50%, var(--accent2) 50%);
+ content: '';
+ height: 100%;
+ left: 0;
+ opacity: .5;
+ position: absolute;
+ top: 0;
+ width: 100%;
+}
+.card:hover {
+ box-shadow: 0 16px 48px rgba(0,0,0,.18);
+}
+button {
+ background-color: var(--text);
+ border: var(--line);
+ border-radius: 9999px;
+ color: var(--surface);
+ font-family: 'EB Garamond', sans-serif;
+ font-size: 14px;
+ letter-spacing: .15em;
+ padding: 12px;
+ position: relative;
+ transition: background-color .3s, top .3s, box-shadow .3s;
+}
+button::after {
+ content: '';
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ background-color: var(--accent1);
+ transition: all .5s;
+ opacity: .5;
+}
+button:hover::after {
+ opacity: 1;
+}
+header {
+ background-color: var(--surface);
+ color: var(--text);
+ font-family: 'EB Garamond', serif;
+ font-size: 40px;
+ font-weight: bold;
+ letter-spacing: .18em;
+ line-height: 1.2;
+ padding: 32px;
+}
+header h1 {
+ margin: 0;
+}
+section {
+ background-color: var(--surface);
+ color: var(--text);
+ padding: 96px;
+}
+section h3 {
+ margin-bottom: 24px;
+}
+@keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+}
+.fadeIn {
+ animation: fadeUp .7s var(--ease) both;
+ opacity: 0;
+}
+.staggerChild {
+ animation: fadeUp .7s var(--ease) forwards;
+ animation-delay: calc(.2s * var(--i));
+ animation-fill-mode: forwards;
+ opacity: 0;
+ position: absolute;
+ top: var(--y);
+ width: 100%;
+}
+</style>
+</head>
+<body>
+<header>
+ <h1>DESIGNER WALLCOVERINGS</h1>
+</header>
+<section class="quarter" id="q1">
+ <h3>QUARTER FINAL - TOP LEFT</h3>
+ <div class="card">
+ <img src="#" alt="Damask CSS swatch">
+ <button class="fadeIn staggerChild" style="--i:0; --y:32px">Toile</button>
+ <button class="fadeIn staggerChild" style="--i:1; --y:64px">Ikat</button>
+ </div>
+</section>
+<section class="quarter" id="q2">
+ <h3>QUARTER FINAL - TOP RIGHT</h3>
+ <div class="card">
+ <img src="#" alt="Chinoiserie CSS swatch">
+ <button class="fadeIn staggerChild" style="--i:0; --y:32px">Art Deco</button>
+ <button class="fadeIn staggerChild" style="--i:1; --y:64px">Boho</button>
+ </div>
+</section>
+<!-- additional sections for semi-finals, finals, and championship -->
+<script>
+document.addEventListener('DOMContentLoaded', function(){
+ // JavaScript to handle the tournament logic goes here
+});
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/2b11fe341ffd/hermes3-8b.png b/data/artifacts/2b11fe341ffd/hermes3-8b.png
new file mode 100644
index 0000000..5879e3e
Binary files /dev/null and b/data/artifacts/2b11fe341ffd/hermes3-8b.png differ
diff --git a/data/artifacts/2b11fe341ffd/hf-qwen-coder-32b.html b/data/artifacts/2b11fe341ffd/hf-qwen-coder-32b.html
new file mode 100644
index 0000000..31412ac
--- /dev/null
+++ b/data/artifacts/2b11fe341ffd/hf-qwen-coder-32b.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Style Showdown</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #1c1a17;
+ --muted: #9b948a;
+ --accent: #b0472e;
+ --line: 1px solid #e5e3df;
+ --shadow: 0 8px 24px rgba(0,0,0,.12);
+ --hover-shadow: 0 16px 48px rgba(0,0,0,.18);
+ --glow: 0 0 24px rgba(176,71,46,.35);
+ --ease: cubic-bezier(.22,1,.36,1);
+ }
+ body {
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background-color: var(--bg);
+ color: var(--text);
+ margin: 0;
+ padding: 96px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background-color: var(--bg);
+ padding: 24px;
+ box-shadow: var(--shadow);
+ z-index: 1000;
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 50px;
+ letter-spacing: .18em;
+ text-transform: uppercase;
+ }
+ header h1 {
+ margin: 0;
+ }
+ main {
+ width: 100%;
+ max-width: 960px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ .round {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 24px;
+ width: 100%;
+ margin-bottom: 96px;
+ }
+ .matchup {
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: var(--shadow);
+ transition: box-shadow .3s ease, transform .3s ease;
+ overflow: hidden;
+ position: relative;
+ }
+ .matchup:hover {
+ box-shadow: var(--hover-shadow);
+ transform: translateY(-8px);
+ }
+ .matchup .swatch {
+ width: 100%;
+ height: 260px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ }
+ .matchup .swatch svg {
+ width: 80%;
+ height: auto;
+ }
+ .matchup .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, .7);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 28px;
+ font-weight: bold;
+ color: var(--text);
+ transition: opacity .3s ease;
+ pointer-events: none;
+ opacity: 0;
+ }
+ .matchup.selected .overlay {
+ opacity: 1;
+ }
+ .result-card {
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: var(--hover-shadow);
+ padding: 32px;
+ text-align: center;
+ font-size: 38px;
+ margin-top: 96px;
+ display: none;
+ }
+ .result-card.active {
+ display: block;
+ }
+ .result-card h2 {
+ margin-bottom: 24px;
+ }
+ .result-card .swatch {
+ width: 100%;
+ height: 300px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ </style>
+</head>
+<body>
+<header><h1>DESIGNER WALLCOVERINGS</h1></header>
+<main>
+ <div class="round" id="quarterfinals">
+ <div class="matchup" data-style="Damask" onclick="advanceMatch(this)">
+ <div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
+ <div class="overlay">WINNER</div>
+ </div>
+ <div class="matchup" data-style="Toile" onclick="advanceMatch(this)">
+ <div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
+ <div class="overlay">WINNER</div>
+ </div>
+ <div class="matchup" data-style="Ikat" onclick="advanceMatch(this)">
+ <div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
+ <div class="overlay">WINNER</div>
+ </div>
+ <div class="matchup" data-style="Chinoiserie" onclick="advanceMatch(this)">
+ <div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
+ <div class="overlay">WINNER</div>
+ </div>
+ <div class="matchup" data-style="Art Deco" onclick="advanceMatch(this)">
+ <div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
+ <div class="overlay">WINNER</div>
+ </div>
+ <div class="matchup" data-style="Boho" onclick="advanceMatch(this)">
+ <div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
+ <div class="overlay">WINNER</div>
+ </div>
+ <div class="matchup" data-style="Coastal" onclick="advanceMatch(this)">
+ <div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
+ <div class="overlay">WINNER</div>
+ </div>
+ <div class="matchup" data-style="Grandmillennial" onclick="advanceMatch(this)">
+ <div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
+ <div class="overlay">WINNER</div>
+ </div>
+ </div>
+ <div class="round" id="semifinals" style="display: none;">
+ <!-- Matchups will be populated here -->
+ </div>
+ <div class="round" id="finals" style="display: none;">
+ <!-- Matchup will be populated here -->
+ </div>
+ <div class="result-card" id="resultCard">
+ <h2>CHAMPION</h2>
+ <div class="swatch"></div>
+ </div>
+</main>
+<script>
+ const matchups = document.querySelectorAll('#quarterfinals .matchup');
+ const semifinals = document.getElementById('semifinals');
+ const finals = document.getElementById('finals');
+ const resultCard = document.getElementById('resultCard');
+
+ function advanceMatch(matchup) {
+ matchup.classList.add('selected');
+ setTimeout(() => {
+ if (matchups.length > 2) {
+ const nextRound = semifinals;
+ const newMatchup = createMatchup([matchup]);
+ nextRound.appendChild(newMatchup);
+ nextRound.style.display = 'grid';
+ } else {
+ const nextRound = finals;
+ const newMatchup = createMatchup([matchup]);
+ nextRound.appendChild(newMatchup);
+ nextRound.style.display = 'grid';
+ }
+ }, 500);
+ }
+
+ function createMatchup(winners) {
+ const matchupDiv = document.createElement('div');
+ matchupDiv.className = 'matchup';
+ matchupDiv.addEventListener('click', () => {
+ resultCard.querySelector('.swatch').innerHTML = winners[0].querySelector('.swatch').innerHTML;
+ resultCard.style.display = 'block';
+ finals.style.display = 'none';
+ });
+
+ const swatchDiv = document.createElement('div');
+ swatchDiv.className = 'swatch';
+ swatchDiv.innerHTML = winners[0].querySelector('.swatch').innerHTML;
+
+ matchupDiv.appendChild(swatchDiv
\ No newline at end of file
diff --git a/data/artifacts/2b11fe341ffd/hf-qwen-coder-32b.png b/data/artifacts/2b11fe341ffd/hf-qwen-coder-32b.png
new file mode 100644
index 0000000..c8b6069
Binary files /dev/null and b/data/artifacts/2b11fe341ffd/hf-qwen-coder-32b.png differ
diff --git a/data/artifacts/5caa8f05b5a8/claude-code.html b/data/artifacts/5caa8f05b5a8/claude-code.html
new file mode 100644
index 0000000..ebe14d6
--- /dev/null
+++ b/data/artifacts/5caa8f05b5a8/claude-code.html
@@ -0,0 +1,609 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>What's Your Wallcovering Style? — Designer Wallcoverings</title>
+<style>
+ :root{
+ /* ===== DESIGN TOKENS ===== */
+ --bg:#12100d; /* deep warm near-black ground */
+ --bg-2:#1a1712; /* elevated surface */
+ --surface:#211d17; /* card surface */
+ --ink:#f4efe4; /* primary warm ivory text */
+ --ink-dim:#cbc2ae; /* secondary */
+ --muted:#8a8071; /* muted labels */
+ --text:#1c1a17; /* DARKEST ink — wordmark on light chips */
+ --accent:#c9a961; /* champagne gold */
+ --accent-deep:#9c7f42; /* deep gold */
+ --line:rgba(201,169,97,.28); /* hairline gold */
+ --line-soft:rgba(244,239,228,.10);
+ --shadow:0 18px 48px rgba(0,0,0,.55);
+ --shadow-soft:0 8px 24px rgba(0,0,0,.35);
+ --glow:0 0 30px rgba(201,169,97,.22);
+ --ease:cubic-bezier(.22,1,.36,1);
+ --serif:'Cormorant Garamond','Playfair Display','EB Garamond',Didot,'Bodoni MT',Georgia,serif;
+ --sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+ }
+
+ *{box-sizing:border-box;margin:0;padding:0}
+ html,body{height:100%}
+ body{
+ background:
+ radial-gradient(120% 90% at 50% -10%, #1c1812 0%, var(--bg) 55%, #0c0a08 100%);
+ color:var(--ink);
+ font-family:var(--sans);
+ -webkit-font-smoothing:antialiased;
+ min-height:100vh;
+ overflow-x:hidden;
+ }
+
+ /* ambient slow drift */
+ body::before{
+ content:"";
+ position:fixed;inset:-30%;
+ background:radial-gradient(40% 40% at 30% 30%, rgba(201,169,97,.06), transparent 70%),
+ radial-gradient(35% 35% at 75% 70%, rgba(156,127,66,.05), transparent 70%);
+ z-index:0;
+ animation:drift 22s ease-in-out infinite alternate;
+ pointer-events:none;
+ }
+ @keyframes drift{
+ from{transform:translate3d(-2%,-1%,0) scale(1)}
+ to{transform:translate3d(3%,2%,0) scale(1.06)}
+ }
+
+ /* ===== HEADER / WORDMARK ===== */
+ header.topbar{
+ position:fixed;top:0;left:0;right:0;
+ height:64px;
+ display:flex;align-items:center;
+ padding:0 clamp(18px,4vw,42px);
+ background:linear-gradient(180deg, rgba(14,12,9,.94), rgba(14,12,9,.72) 70%, transparent);
+ backdrop-filter:blur(8px);
+ z-index:50;
+ border-bottom:1px solid var(--line-soft);
+ }
+ .wordmark{
+ font-family:var(--serif);
+ color:var(--ink); /* near-ivory on dark bar — high contrast, NOT surface */
+ font-weight:600;
+ font-size:clamp(20px,2.4vw,26px);
+ line-height:1;
+ letter-spacing:.18em;
+ text-transform:uppercase;
+ white-space:nowrap;
+ display:flex;align-items:baseline;gap:.5em;
+ }
+ .wordmark .amp{color:var(--accent)}
+ .wordmark .dot{
+ width:5px;height:5px;border-radius:50%;
+ background:var(--accent);display:inline-block;
+ margin-left:.15em;box-shadow:var(--glow);
+ }
+
+ /* ===== APP SHELL ===== */
+ .stage{
+ position:relative;z-index:1;
+ min-height:100vh;
+ display:flex;flex-direction:column;align-items:center;justify-content:center;
+ padding:96px 20px 48px;
+ }
+ .panel{width:min(760px,100%);}
+
+ /* progress */
+ .progress{
+ display:flex;align-items:center;gap:14px;
+ margin:0 auto 34px;width:fit-content;
+ }
+ .progress .pips{display:flex;gap:9px}
+ .pip{
+ width:34px;height:2px;background:var(--line-soft);
+ position:relative;overflow:hidden;border-radius:2px;
+ transition:background .4s var(--ease);
+ }
+ .pip.done{background:var(--accent)}
+ .pip.active{background:linear-gradient(90deg,var(--accent),var(--accent-deep))}
+ .progress .lbl{
+ font-family:var(--sans);font-size:11px;letter-spacing:.22em;
+ text-transform:uppercase;color:var(--muted);
+ }
+
+ /* ===== INTRO ===== */
+ .intro{text-align:center;animation:fadeUp .8s var(--ease) both}
+ .kicker{
+ font-family:var(--sans);font-size:12px;letter-spacing:.3em;
+ text-transform:uppercase;color:var(--accent);margin-bottom:22px;
+ }
+ h1.display{
+ font-family:var(--serif);font-weight:500;
+ font-size:clamp(40px,7vw,72px);line-height:1.02;
+ letter-spacing:.01em;color:var(--ink);margin-bottom:22px;
+ }
+ h1.display em{font-style:italic;color:var(--accent)}
+ .lede{
+ font-family:var(--sans);font-size:clamp(15px,1.7vw,18px);
+ line-height:1.7;color:var(--ink-dim);max-width:46ch;margin:0 auto 40px;
+ }
+
+ .btn{
+ font-family:var(--sans);
+ text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:600;
+ color:var(--text);
+ background:linear-gradient(180deg,#e7ce8f,var(--accent) 60%,var(--accent-deep));
+ border:none;border-radius:2px;
+ padding:16px 40px;cursor:pointer;
+ box-shadow:var(--shadow-soft);
+ transition:transform .2s var(--ease),box-shadow .3s var(--ease),filter .2s var(--ease);
+ }
+ .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow),var(--glow);filter:brightness(1.05)}
+ .btn:active{transform:translateY(0)}
+ .btn.ghost{
+ background:transparent;color:var(--ink);
+ border:1px solid var(--line);box-shadow:none;
+ }
+ .btn.ghost:hover{border-color:var(--accent);box-shadow:none;filter:none;color:var(--accent)}
+
+ /* ===== QUESTION ===== */
+ .q{display:none;animation:fadeUp .7s var(--ease) both}
+ .q.show{display:block}
+ .q-num{
+ font-family:var(--sans);font-size:11px;letter-spacing:.28em;
+ text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:14px;
+ }
+ .q-title{
+ font-family:var(--serif);font-weight:500;
+ font-size:clamp(28px,4.4vw,44px);line-height:1.12;
+ text-align:center;color:var(--ink);margin-bottom:36px;
+ }
+ .tiles{
+ display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
+ }
+ @media(max-width:560px){.tiles{grid-template-columns:1fr}}
+
+ .tile{
+ position:relative;
+ background:var(--surface);
+ border:1px solid var(--line-soft);
+ border-radius:12px;overflow:hidden;
+ cursor:pointer;text-align:left;
+ padding:0;
+ box-shadow:var(--shadow-soft);
+ transition:transform .25s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
+ animation:fadeUp .6s var(--ease) both;
+ }
+ .tile:nth-child(2){animation-delay:.09s}
+ .tile:nth-child(3){animation-delay:.18s}
+ .tile:nth-child(4){animation-delay:.27s}
+ .tile:hover{
+ transform:translateY(-4px);
+ border-color:var(--line);
+ box-shadow:var(--shadow),var(--glow);
+ }
+ .tile .swatch{
+ height:150px;width:100%;position:relative;overflow:hidden;
+ border-bottom:1px solid var(--line-soft);
+ }
+ .tile .meta{
+ padding:16px 18px 18px;
+ display:flex;flex-direction:column;gap:4px;
+ }
+ .tile .meta .t-name{
+ font-family:var(--serif);font-size:21px;font-weight:500;color:var(--ink);
+ }
+ .tile .meta .t-sub{
+ font-family:var(--sans);font-size:11px;letter-spacing:.14em;
+ text-transform:uppercase;color:var(--muted);
+ }
+
+ .q-nav{display:flex;justify-content:center;margin-top:34px}
+
+ /* ===== RESULT ===== */
+ #resultView{display:none;animation:fadeUp .8s var(--ease) both;width:100%;}
+ #resultView.show{display:flex;flex-direction:column;align-items:center}
+
+ .card-wrap{
+ width:100%;max-width:540px;
+ }
+ .result-scale{
+ /* the shareable 1080x1080 card, scaled to fit */
+ width:1080px;height:1080px;
+ transform-origin:top center;
+ }
+ .card{
+ width:1080px;height:1080px;
+ background:linear-gradient(165deg,#1a1611 0%,#12100d 60%,#0d0b08 100%);
+ position:relative;overflow:hidden;
+ display:flex;flex-direction:column;
+ border:1px solid var(--line);
+ }
+ .card .frame{
+ position:absolute;inset:34px;border:1px solid var(--line);pointer-events:none;z-index:5;
+ }
+ .card .frame::before,.card .frame::after{
+ content:"";position:absolute;width:16px;height:16px;border:2px solid var(--accent);
+ }
+ .card .frame::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
+ .card .frame::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
+
+ .card-top{
+ padding:70px 70px 0;text-align:center;z-index:6;
+ }
+ .card-wm{
+ font-family:var(--serif);color:var(--ink);
+ font-size:34px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
+ }
+ .card-wm .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:.2em}
+ .card-rule{
+ width:70px;height:1px;background:var(--accent);margin:26px auto 0;
+ }
+ .card-kicker{
+ font-family:var(--sans);font-size:19px;letter-spacing:.34em;text-transform:uppercase;
+ color:var(--accent);margin-top:40px;
+ }
+ .card-title{
+ font-family:var(--serif);font-weight:500;font-style:italic;
+ font-size:76px;line-height:1.05;color:var(--ink);margin-top:18px;
+ }
+
+ .card-swatch{
+ margin:56px 70px 0;height:300px;border-radius:8px;position:relative;overflow:hidden;
+ border:1px solid var(--line);z-index:6;box-shadow:0 20px 50px rgba(0,0,0,.5);
+ }
+ .card-desc{
+ font-family:var(--sans);font-size:26px;line-height:1.6;color:var(--ink-dim);
+ text-align:center;margin:52px 120px 0;z-index:6;
+ }
+ .card-shop{
+ margin-top:auto;padding:0 70px 84px;text-align:center;z-index:6;
+ }
+ .card-shop .cta{
+ display:inline-block;
+ font-family:var(--sans);font-size:22px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
+ color:var(--text);
+ background:linear-gradient(180deg,#e7ce8f,var(--accent) 60%,var(--accent-deep));
+ padding:26px 66px;border-radius:3px;
+ }
+ .card-shop .handle{
+ display:block;margin-top:30px;
+ font-family:var(--sans);font-size:17px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
+ }
+
+ .result-actions{
+ display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:38px;
+ }
+
+ /* ===== PATTERN SWATCHES (CSS-illustrated, visually distinct) ===== */
+ /* Traditional Damask — ornate mirrored scrollwork */
+ .p-damask{
+ background:
+ radial-gradient(circle at 50% 22%, var(--sw-accent) 0 5%, transparent 6%),
+ radial-gradient(ellipse 22% 30% at 50% 45%, var(--sw-accent) 0 42%, transparent 44%),
+ radial-gradient(ellipse 40% 18% at 50% 62%, transparent 40%, var(--sw-accent) 42% 48%, transparent 50%),
+ radial-gradient(circle at 22% 78%, var(--sw-accent) 0 4%, transparent 5%),
+ radial-gradient(circle at 78% 78%, var(--sw-accent) 0 4%, transparent 5%),
+ var(--sw-bg);
+ background-size:120px 150px;
+ background-position:center;
+ }
+ /* Modern Minimalist — precise thin verticals + single band */
+ .p-minimal{
+ background:
+ linear-gradient(90deg, transparent 0 46%, var(--sw-accent) 46% 47%, transparent 47%),
+ linear-gradient(90deg, transparent 0 70%, rgba(255,255,255,.14) 70% 70.4%, transparent 71%),
+ linear-gradient(180deg, var(--sw-bg), var(--sw-bg2));
+ background-size:64px 100%,100% 100%,100% 100%;
+ }
+ /* Bohemian Maximalist — layered arches/paisley confetti */
+ .p-boho{
+ background:
+ radial-gradient(circle at 20% 30%, var(--sw-accent) 0 9%, transparent 10%),
+ radial-gradient(circle at 60% 65%, var(--sw-accent2) 0 12%, transparent 13%),
+ radial-gradient(circle at 85% 25%, rgba(255,255,255,.18) 0 6%, transparent 7%),
+ radial-gradient(circle at 38% 82%, var(--sw-accent2) 0 7%, transparent 8%),
+ conic-gradient(from 45deg at 78% 72%, var(--sw-accent) 0 25%, transparent 0 100%),
+ linear-gradient(135deg,var(--sw-bg),var(--sw-bg2));
+ background-size:90px 90px,110px 110px,70px 70px,80px 80px,60px 60px,100% 100%;
+ }
+ /* Art Deco Glam — fan / sunburst chevrons */
+ .p-deco{
+ background:
+ repeating-conic-gradient(from 90deg at 50% 100%, var(--sw-accent) 0 4deg, transparent 4deg 12deg),
+ repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,.05) 30px 31px),
+ linear-gradient(180deg,var(--sw-bg2),var(--sw-bg));
+ background-size:180px 180px,100% 100%,100% 100%;
+ background-position:center bottom;
+ }
+
+ /* tile swatch color themes */
+ .theme-damask{--sw-bg:#231d13;--sw-bg2:#1b160f;--sw-accent:rgba(201,169,97,.55)}
+ .theme-minimal{--sw-bg:#1e1c18;--sw-bg2:#15130f;--sw-accent:rgba(232,224,206,.6)}
+ .theme-boho{--sw-bg:#241a1a;--sw-bg2:#1a1214;--sw-accent:rgba(201,120,90,.6);--sw-accent2:rgba(120,140,110,.55)}
+ .theme-deco{--sw-bg:#1d1a22;--sw-bg2:#15121a;--sw-accent:rgba(201,169,97,.5)}
+ /* misc answer-tile themes for variety across questions */
+ .theme-a{--sw-bg:#221d15;--sw-bg2:#181410;--sw-accent:rgba(201,169,97,.5);--sw-accent2:rgba(180,150,90,.4)}
+ .theme-b{--sw-bg:#1c1c1a;--sw-bg2:#141412;--sw-accent:rgba(230,224,208,.5);--sw-accent2:rgba(200,196,180,.4)}
+ .theme-c{--sw-bg:#241919;--sw-bg2:#1a1113;--sw-accent:rgba(197,120,92,.55);--sw-accent2:rgba(120,138,108,.5)}
+ .theme-d{--sw-bg:#1c1a24;--sw-bg2:#14121c;--sw-accent:rgba(180,150,200,.5);--sw-accent2:rgba(201,169,97,.45)}
+
+ @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
+
+ .footnote{
+ margin-top:40px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;
+ text-transform:uppercase;color:var(--muted);text-align:center;opacity:.7;
+ }
+
+ /* overlay (shop confirm) */
+ .overlay{
+ position:fixed;inset:0;z-index:100;display:none;
+ align-items:center;justify-content:center;padding:24px;
+ background:rgba(8,7,5,.82);backdrop-filter:blur(6px);
+ animation:fadeUp .4s var(--ease) both;
+ }
+ .overlay.show{display:flex}
+ .modal{
+ width:min(460px,100%);background:var(--bg-2);
+ border:1px solid var(--line);border-radius:14px;
+ padding:48px 40px;text-align:center;box-shadow:var(--shadow);
+ }
+ .modal h3{font-family:var(--serif);font-weight:500;font-size:32px;color:var(--ink);margin-bottom:8px}
+ .modal .m-style{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:26px;margin-bottom:20px}
+ .modal p{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-dim);margin-bottom:30px}
+</style>
+</head>
+<body>
+
+ <header class="topbar">
+ <div class="wordmark">Designer Wallcoverings<span class="dot"></span></div>
+ </header>
+
+ <main class="stage">
+ <div class="panel">
+
+ <!-- PROGRESS -->
+ <div class="progress" id="progress" style="display:none">
+ <span class="lbl" id="progLbl">01 / 05</span>
+ <span class="pips" id="pips"></span>
+ </div>
+
+ <!-- INTRO -->
+ <section class="intro" id="intro">
+ <div class="kicker">The Atelier Quiz</div>
+ <h1 class="display">What's Your<br><em>Wallcovering</em> Style?</h1>
+ <p class="lede">Five considered questions. One signature aesthetic. Discover the wallcovering language that belongs in your rooms — then bring it home.</p>
+ <button class="btn" onclick="start()">Begin the Quiz</button>
+ </section>
+
+ <!-- QUESTIONS -->
+ <section class="q-area" id="qArea"></section>
+
+ <!-- RESULT -->
+ <section id="resultView">
+ <div class="card-wrap">
+ <div class="result-scale" id="resultScale">
+ <div class="card" id="card">
+ <div class="frame"></div>
+ <div class="card-top">
+ <div class="card-wm">Designer Wallcoverings<span class="dot"></span></div>
+ <div class="card-rule"></div>
+ <div class="card-kicker">Your Signature Style</div>
+ <div class="card-title" id="rTitle">—</div>
+ </div>
+ <div class="card-swatch" id="rSwatch"></div>
+ <div class="card-desc" id="rDesc">—</div>
+ <div class="card-shop">
+ <span class="cta">Shop This Style</span>
+ <span class="handle">designerwallcoverings.com</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="result-actions">
+ <button class="btn" id="shopBtn">Shop This Style</button>
+ <button class="btn ghost" onclick="restart()">Retake Quiz</button>
+ </div>
+ <div class="footnote">Screenshot & share your result</div>
+ </section>
+
+ </div>
+ </main>
+
+ <!-- SHOP OVERLAY -->
+ <div class="overlay" id="overlay" onclick="if(event.target===this)closeOverlay()">
+ <div class="modal">
+ <h3>Beautifully Chosen.</h3>
+ <div class="m-style" id="mStyle">—</div>
+ <p>Your curated collection is being prepared. Explore hand-selected patterns, colorways, and grasscloths in your signature aesthetic — crafted for rooms with intent.</p>
+ <button class="btn" onclick="closeOverlay()">Continue</button>
+ </div>
+ </div>
+
+<script>
+/* ============ DATA ============ */
+const STYLES = {
+ damask:{
+ name:'Traditional Damask',
+ swatch:'p-damask theme-damask',
+ desc:'Timeless scrollwork and heritage motifs. You favour rooms with gravitas — layered, symmetrical, and quietly grand.'
+ },
+ minimal:{
+ name:'Modern Minimalist',
+ swatch:'p-minimal theme-minimal',
+ desc:'Restraint as luxury. Clean lines, tonal calm, and impeccable proportion. Every surface earns its place.'
+ },
+ boho:{
+ name:'Bohemian Maximalist',
+ swatch:'p-boho theme-boho',
+ desc:'Colour, pattern, and collected soul. You mix eras and motifs fearlessly — a room should tell a story.'
+ },
+ deco:{
+ name:'Art Deco Glam',
+ swatch:'p-deco theme-deco',
+ desc:'Geometry, gilt, and glamour. Sunburst fans and lacquered depth — you dress a wall like a couture gown.'
+ }
+};
+
+/* 5 questions, 4 answers each, each answer scores a style */
+const QUESTIONS = [
+ {
+ q:'Which room would you rather walk into?',
+ a:[
+ {label:'The Grand Library',sub:'Panelled & layered',theme:'theme-a',pat:'p-damask',s:'damask'},
+ {label:'The Gallery Loft',sub:'Light & spare',theme:'theme-b',pat:'p-minimal',s:'minimal'},
+ {label:'The Collector\'s Salon',sub:'Rich & eclectic',theme:'theme-c',pat:'p-boho',s:'boho'},
+ {label:'The Supper Club',sub:'Lacquer & brass',theme:'theme-d',pat:'p-deco',s:'deco'}
+ ]
+ },
+ {
+ q:'Choose a palette that feels like home.',
+ a:[
+ {label:'Claret & Gold',sub:'Heritage warmth',theme:'theme-a',pat:'p-deco',s:'damask'},
+ {label:'Oatmeal & Alabaster',sub:'Quiet neutrals',theme:'theme-b',pat:'p-minimal',s:'minimal'},
+ {label:'Terracotta & Jade',sub:'Sun-drenched',theme:'theme-c',pat:'p-boho',s:'boho'},
+ {label:'Onyx & Champagne',sub:'High contrast',theme:'theme-d',pat:'p-damask',s:'deco'}
+ ]
+ },
+ {
+ q:'What draws your eye first?',
+ a:[
+ {label:'Ornate Detail',sub:'Scroll & filigree',theme:'theme-a',pat:'p-damask',s:'damask'},
+ {label:'Negative Space',sub:'Breathing room',theme:'theme-b',pat:'p-minimal',s:'minimal'},
+ {label:'Bold Pattern Mix',sub:'More is more',theme:'theme-c',pat:'p-boho',s:'boho'},
+ {label:'Strong Geometry',sub:'Fans & angles',theme:'theme-d',pat:'p-deco',s:'deco'}
+ ]
+ },
+ {
+ q:'Pick a finish for your walls.',
+ a:[
+ {label:'Embossed Damask',sub:'Tonal relief',theme:'theme-a',pat:'p-damask',s:'damask'},
+ {label:'Matte Grasscloth',sub:'Natural texture',theme:'theme-b',pat:'p-minimal',s:'minimal'},
+ {label:'Hand-Printed Bloom',sub:'Artisan ink',theme:'theme-c',pat:'p-boho',s:'boho'},
+ {label:'Metallic Sunburst',sub:'Gilded shimmer',theme:'theme-d',pat:'p-deco',s:'deco'}
+ ]
+ },
+ {
+ q:'Your dream evening at home is…',
+ a:[
+ {label:'Fireside & Velvet',sub:'Old-world calm',theme:'theme-a',pat:'p-damask',s:'damask'},
+ {label:'Slow Morning Light',sub:'Serene & still',theme:'theme-b',pat:'p-minimal',s:'minimal'},
+ {label:'A House Full of Friends',sub:'Colour & music',theme:'theme-c',pat:'p-boho',s:'boho'},
+ {label:'A Cocktail Soirée',sub:'Glamour & jazz',theme:'theme-d',pat:'p-deco',s:'deco'}
+ ]
+ }
+];
+
+/* ============ STATE ============ */
+let idx = 0;
+const scores = {damask:0,minimal:0,boho:0,deco:0};
+let finalStyle = null;
+
+const qArea = document.getElementById('qArea');
+const intro = document.getElementById('intro');
+const resultView = document.getElementById('resultView');
+const progress = document.getElementById('progress');
+const pips = document.getElementById('pips');
+const progLbl = document.getElementById('progLbl');
+
+/* build pips */
+QUESTIONS.forEach(()=>{const s=document.createElement('span');s.className='pip';pips.appendChild(s);});
+
+function start(){
+ intro.style.display='none';
+ progress.style.display='flex';
+ idx=0;
+ Object.keys(scores).forEach(k=>scores[k]=0);
+ renderQuestion();
+}
+
+function renderQuestion(){
+ const item = QUESTIONS[idx];
+ qArea.innerHTML='';
+ const q = document.createElement('div');
+ q.className='q show';
+ q.innerHTML = `
+ <div class="q-num">Question ${String(idx+1).padStart(2,'0')} of 05</div>
+ <div class="q-title">${item.q}</div>
+ <div class="tiles"></div>
+ `;
+ const tiles = q.querySelector('.tiles');
+ item.a.forEach(ans=>{
+ const t = document.createElement('button');
+ t.className='tile';
+ t.innerHTML = `
+ <div class="swatch ${ans.pat} ${ans.theme}"></div>
+ <div class="meta">
+ <span class="t-name">${ans.label}</span>
+ <span class="t-sub">${ans.sub}</span>
+ </div>`;
+ t.addEventListener('click',()=>choose(ans.s));
+ tiles.appendChild(t);
+ });
+ qArea.appendChild(q);
+ updateProgress();
+}
+
+function updateProgress(){
+ progLbl.textContent = String(idx+1).padStart(2,'0') + ' / 05';
+ Array.from(pips.children).forEach((p,i)=>{
+ p.className = 'pip' + (i<idx?' done':(i===idx?' active':''));
+ });
+}
+
+function choose(styleKey){
+ scores[styleKey]++;
+ idx++;
+ if(idx < QUESTIONS.length){
+ renderQuestion();
+ window.scrollTo({top:0,behavior:'smooth'});
+ }else{
+ showResult();
+ }
+}
+
+function showResult(){
+ // determine winner; tie-break by question order priority
+ const order = ['damask','minimal','boho','deco'];
+ let best = order[0];
+ order.forEach(k=>{ if(scores[k] > scores[best]) best = k; });
+ finalStyle = best;
+ const st = STYLES[best];
+
+ document.getElementById('rTitle').textContent = st.name;
+ document.getElementById('rDesc').textContent = st.desc;
+ document.getElementById('rSwatch').className = 'card-swatch ' + st.swatch;
+ document.getElementById('mStyle').textContent = st.name;
+
+ qArea.innerHTML='';
+ progress.style.display='none';
+ resultView.classList.add('show');
+ fitCard();
+ window.scrollTo({top:0,behavior:'smooth'});
+}
+
+/* scale the 1080x1080 card to fit its column */
+function fitCard(){
+ const wrap = document.querySelector('.card-wrap');
+ const scale = document.getElementById('resultScale');
+ if(!wrap) return;
+ const w = wrap.clientWidth;
+ const f = w/1080;
+ scale.style.transform = 'scale('+f+')';
+ scale.style.height = (1080*f)+'px';
+}
+window.addEventListener('resize',()=>{ if(resultView.classList.contains('show')) fitCard(); });
+
+document.getElementById('shopBtn').addEventListener('click',openOverlay);
+
+function openOverlay(){document.getElementById('overlay').classList.add('show');}
+function closeOverlay(){document.getElementById('overlay').classList.remove('show');}
+
+function restart(){
+ resultView.classList.remove('show');
+ intro.style.display='block';
+ progress.style.display='none';
+ closeOverlay();
+ window.scrollTo({top:0,behavior:'smooth'});
+}
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/5caa8f05b5a8/claude-code.png b/data/artifacts/5caa8f05b5a8/claude-code.png
new file mode 100644
index 0000000..41de977
Binary files /dev/null and b/data/artifacts/5caa8f05b5a8/claude-code.png differ
diff --git a/data/artifacts/5caa8f05b5a8/gemma3-12b.html b/data/artifacts/5caa8f05b5a8/gemma3-12b.html
new file mode 100644
index 0000000..1087318
--- /dev/null
+++ b/data/artifacts/5caa8f05b5a8/gemma3-12b.html
@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>What's Your Wallcovering Style?</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #3a2c22;
+ --muted: #9b948a;
+ --accent: #b0472e; /* Fallback if the second accent isn't supported */
+ --accent-secondary: #2f4c39;
+ --line: #1c1a17;
+ --shadow: rgba(0, 0, 0, 0.12);
+ --ease: cubic-bezier(.22,1,.36,1);
+ }
+
+ body {
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background-color: var(--bg);
+ color: var(--text);
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden; /* Prevent horizontal scroll */
+ }
+
+ header {
+ background-color: var(--surface);
+ padding: 32px;
+ text-align: left;
+ font-family: 'Didot', Georgia, serif; /* Fallback to Georgia if Didot isn't available */
+ font-size: 67px;
+ letter-spacing: .18em;
+ color: var(--line);
+ text-transform: uppercase;
+ width: 100%;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+ }
+
+ section {
+ padding: 96px;
+ }
+
+ h1 {
+ font-size: 50px;
+ margin-bottom: 32px;
+ text-align: center;
+ }
+
+ p {
+ font-size: 16px;
+ line-height: 1.75;
+ color: var(--muted);
+ margin-bottom: 32px;
+ }
+
+ .question-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .answer-tile {
+ width: 260px;
+ height: 260px;
+ margin-bottom: 24px;
+ border-radius: 14px;
+ box-shadow: 0 8px 24px var(--shadow);
+ cursor: pointer;
+ transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 16px;
+ color: var(--text);
+ }
+
+ .answer-tile:hover {
+ transform: scale(1.05);
+ box-shadow: 0 16px 48px var(--shadow);
+ }
+
+
+ /* Style tiles - different patterns */
+ .traditional {
+ background: linear-gradient(to bottom, #f8edea, #e9d7c2) fixed; /* Damask feel */
+ }
+
+ .modern {
+ background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 10px, transparent 10px);
+ }
+
+ .bohemian {
+ background: repeating-linear-gradient(45deg, #f7e6d3, #f7e6d3 10px, #e2c9a8 10px, #e2c9a8 20px); /* layered effect */
+ }
+
+ .artdeco {
+ background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 10px, transparent 10px); /* subtle pattern */
+ }
+
+ .result-card {
+ width: 80%;
+ max-width: 600px;
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: 0 8px 24px var(--shadow);
+ padding: 48px;
+ margin: 48px auto;
+ text-align: center;
+ }
+
+ .result-card h2 {
+ font-size: 38px;
+ margin-bottom: 16px;
+ }
+
+ .style-swatch {
+ width: 160px;
+ height: 160px;
+ border-radius: 50%;
+ margin: 0 auto 24px;
+ background-size: cover;
+ }
+
+ .traditional .style-swatch { background-image: url("data:image/svg+xml,%3Csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f8edea' stroke='%23e9d7c2' stroke-width='2'%3E%3Cpath d='M80 10L40 60H120 L80 10Z M40 140L120 140V60H40Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); }
+ .modern .style-swatch { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 10px, transparent 10px); }
+ .bohemian .style-swatch { background: repeating-linear-gradient(45deg, #f7e6d3, #f7e6d3 10px, #e2c9a8 10px, #e2c9a8 20px); }
+ .artdeco .style-swatch { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 10px, transparent 10px); }
+
+ .result-description {
+ margin-bottom: 32px;
+ }
+
+ .shop-button {
+ background-color: var(--accent);
+ color: var(--surface);
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: .15em;
+ border: none;
+ padding: 16px 32px;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: background-color 0.2s ease-in-out;
+ }
+
+ .shop-button:hover {
+ background-color: var(--accent-secondary);
+ }
+
+
+ /* Overlay for results */
+ .overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.7);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+ }
+
+ </style>
+</head>
+<body>
+
+ <header>
+ DESIGNER WALLCOVERINGS
+ </header>
+
+ <section id="quiz">
+ <h1>What's Your Wallcovering Style?</h1>
+ <p>Answer these quick questions to discover your perfect match.</p>
+
+ <div id="question1" class="question-container">
+ <h2>Question 1</h2>
+ <p>Which of these colors makes you feel most at peace?</p>
+ <div class="answer-tiles">
+ <div class="answer-tile traditional" data-style="traditional"></div>
+ <div class="answer-tile modern" data-style="modern"></div>
+ <div class="answer-tile bohemian" data-style="bohemian"></div>
+ <div class="answer-tile artdeco" data-style="artdeco"></div>
+ </div>
+ </div>
+
+ <div id="question2" class="question-container" style="display: none;">
+ <h2>Question 2</h2>
+ <p>What's your ideal weekend activity?</p>
+ <div class="answer-tiles">
+ <div class="answer-tile traditional" data-style="traditional"></div>
+ <div class="answer-tile modern" data-style="modern"></div>
+ <div class="answer-tile bohemian" data-style="bohemian"></div>
+ <div class="answer-tile artdeco" data-style="artdeco"></div>
+ </div>
+ </div>
+
+ <div id="question3" class="question-container" style="display: none;">
+ <h2>Question 3</h2>
+ <p>Describe your perfect living room.</p>
+ <div class="answer-tiles">
+ <div class="answer-tile traditional" data-style="traditional"></div>
+ <div class="answer-tile modern" data-style="modern"></div>
+ <div class="answer-tile bohemian" data-style="bohemian"></div>
+ <div class="answer-tile artdeco" data-style="artdeco"></div>
+ </div>
+ </div>
+
+ <div id="question4" class="question-container" style="display: none;">
+ <h2>Question 4</h2>
+ <p>What's your favorite accessory?</p>
+ <div class="answer-tiles">
+ <div class="answer-tile traditional" data-style="traditional"></div>
+ <div class="answer-tile modern" data-style="modern"></div>
+ <div class="answer-tile bohemian" data-style="bohemian"></div>
+ <div class="answer-tile artdeco" data-style="artdeco"></div>
+ </div>
+ </div>
+
+ <div id="question5" class="question-container" style="display: none;">
+ <h2>Question 5</h2>
+ <p>What's your go to vacation spot?</p>
+ <div class="answer-tiles">
+ <div class="answer-tile traditional" data-style="traditional"></div>
+ <div class="answer-tile modern" data-style="modern"></div>
+ <div class="answer-tile bohemian" data-style="bohemian"></div>
+ <div class="answer-tile artdeco" data-style="artdeco"></div>
+ </div>
+ </div>
+
+ </section>
+
+
+ <div id="overlay" class="overlay" style="display: none;">
+ <div class="result-card" id="resultCard">
+ <h2>Your Style</h2>
+ <div class="style-swatch" id="styleSwatch"></div>
+ <p class="result-description"></p>
+ <button class="shop-button">Shop this style</button>
+ </div>
+ </div>
+
+ <script>
+ const questions = document.querySelectorAll('.question-container');
+ const answerTiles = document.querySelectorAll('.answer-tile');
+ const overlay = document.getElementById('overlay');
+ const resultCard = document.getElementById('resultCard');
+ let score = 0;
+ let currentQuestion = 1;
+
+ function showNextQuestion() {
+ if (currentQuestion <= questions.length) {
+ questions[currentQuestion - 1].style.display = 'flex';
+ currentQuestion++;
+ } else {
+ calculateResult();
+ }
+ }
+
+ answerTiles.forEach(tile => {
+ tile.addEventListener('click', () => {
+ score += tile.dataset.style === resultStyleMap[currentQuestion - 1] ? 1 : 0;
+ showNextQuestion();
+ });
+ });
+
+
+ const resultStyleMap = ["traditional", "modern", "bohemian", "artdeco", "traditional"]; // Example mapping
+ function calculateResult() {
+ let dominantStyle = "";
+ if (score >= 3) {
+ dominantStyle = "Traditional Damask";
+ } else if (score > 1){
+ dominantStyle = "Modern Minimalist";
+ }else{
+ dominantStyle = "Bohemian Maximalist";
+ }
+
+ const styleClass = dominantStyle.toLowerCase().replace(/\s/g, '-'); // Create a CSS-friendly class name
+ resultCard.querySelector('.style-swatch').className = 'style-swatch ' + styleClass;
+ resultCard.querySelector('.result-description').textContent = `Embrace the timeless elegance of ${dominantStyle}.`;
+
+ overlay.style.display = 'flex';
+ }
+
+ // Initial display
+ showNextQuestion();
+
+
+ document.getElementById('overlay').addEventListener('click', function(event) {
+ if (event.target === this) { // Check if the click happened on the overlay itself
+ this.style.display = 'none';
+ }
+ });
+
+ </script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/5caa8f05b5a8/gemma3-12b.png b/data/artifacts/5caa8f05b5a8/gemma3-12b.png
new file mode 100644
index 0000000..0738794
Binary files /dev/null and b/data/artifacts/5caa8f05b5a8/gemma3-12b.png differ
diff --git a/data/artifacts/5caa8f05b5a8/hermes3-8b.html b/data/artifacts/5caa8f05b5a8/hermes3-8b.html
new file mode 100644
index 0000000..99bd715
--- /dev/null
+++ b/data/artifacts/5caa8f05b5a8/hermes3-8b.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Wallcovering Style Quiz</title>
+<style>
+:root {
+ --bg: #f7efe6;
+ --surface: #fff9f1;
+ --text: #3a2c22;
+ --muted: #a08c7a;
+ --accent: #e0a458;
+ --line: 1px solid #c65f38;
+ --shadow: 8px 16px 24px rgba(0,0,0,.12);
+ --ease: cubic-bezier(.22,1,.36,1);
+}
+body {
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ line-height: 1.6;
+ background-color: var(--bg);
+ color: var(--text);
+}
+h2 {
+ font-size: 38px;
+ letter-spacing: .15em;
+ margin-bottom: 24px;
+ text-transform: uppercase;
+}
+button {
+ font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background-color: transparent;
+ border: none;
+ color: var(--accent);
+ cursor: pointer;
+ display: inline-block;
+ font-size: 16px;
+ letter-spacing: .15em;
+ margin-top: 12px;
+ text-transform: uppercase;
+}
+button:hover {
+ text-decoration: underline;
+}
+.card {
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: var(--shadow);
+ padding: 32px;
+ position: relative;
+ transition: transform .7s var(--ease), opacity .7s var(--ease);
+}
+.card::before {
+ content: '';
+ position: absolute;
+ top: -28px;
+ left: 0;
+ width: 100%;
+ height: 28px;
+ background: linear-gradient(to bottom, transparent 50%, var(--surface) 50%);
+}
+.card:hover,
+.card:focus-within {
+ box-shadow: var(--shadow);
+ transform: translateY(-4px);
+ z-index: 1;
+ opacity: .9;
+}
+.grid {
+ display: grid;
+ gap: 24px;
+ padding: 96px;
+ place-items: center;
+}
+input[type="radio"] {
+ display: none;
+}
+label {
+ background-color: var(--muted);
+ border-radius: 50%;
+ height: 80px;
+ position: relative;
+ width: 80px;
+}
+input[type="radio"]:checked + label {
+ background-color: var(--accent);
+ box-shadow: 0 0 24px rgba(var(--accent),.35);
+}
+label::before {
+ content: '';
+ display: block;
+ height: 56px;
+ left: 12px;
+ position: absolute;
+ top: 12px;
+ width: 56px;
+ border-radius: 50%;
+ border: var(--line);
+}
+input[type="radio"]:checked + label::before {
+ background-color: #fff;
+ border: none;
+}
+@keyframes fadeUp {
+ from {opacity:0; transform:translateY(28px)}
+ to {opacity:1; transform:translateY(0)}
+}
+.fade-up {
+ animation: fadeUp .7s var(--ease) both;
+ opacity: 0;
+ position: relative;
+}
+.fade-up.fade-in {
+ opacity: 1;
+}
+</style>
+</head>
+<body>
+
+<header class="logo">
+ <h2>DESIGNER WALLCOVERINGS</h2>
+</header>
+
+<h2>What's Your Wallcovering Style?</h2>
+
+<section class="intro">
+ <p>Take this quick quiz to discover your perfect luxury wallcovering style match!</p>
+</section>
+
+<div class="grid fade-up fade-in">
+ <form>
+ <label for="q1">1. Which room would you like to adorn with new wallpaper?</label>
+ <input type="radio" id="q1" name="question1" value="traditional-damask" checked>
+ <div class="card traditional-damask-result">
+ <svg style="display:none;" viewBox="0 0 200 200"><!-- Inline SVG Traditional Damask Pattern --></svg>
+ <h3>Traditional Damask</h3>
+ <p>A timeless choice with symmetrical patterns and rich textures.</p>
+ <button>Shop this Style</button>
+ </div>
+
+ <label for="q2" class="modern-minimalist">2. Do you prefer a minimalist or more decorative aesthetic?</label>
+ <input type="radio" id="q2" name="question2" value="modern-minimalist">
+ <div class="card modern-minimalist-result"><!-- Styles and Content --></div>
+
+ <label for="q3" class="bohemian-maximalist">3. Are you drawn to boho-chic or mid-century modern styles?</label>
+ <input type="radio" id="q3" name="question3" value="bohemian-maximalist">
+ <div class="card bohemian-maximalist-result"><!-- Styles and Content --></div>
+
+ <label for="q4" class="art-deco-glam">4. Do you gravitate toward glamour and opulence?</label>
+ <input type="radio" id="q4" name="question4" value="art-deco-glam">
+ <div class="card art-deco-glam-result"><!-- Styles and Content --></div>
+
+ </form>
+</div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function(){
+ const cards = document.querySelectorAll('.card');
+ let i = 0;
+
+ setInterval(function hideCards() {
+ for(let card of cards) {
+ if(i >= cards.length) break;
+ if(!card.checked) card.style.display = 'none';
+ else {
+ card.querySelector('button').style.display = 'block';
+ setTimeout(function showButton() {
+ card.querySelector('button').style.opacity = '1';
+ }, 700);
+ }
+ i++;
+ }
+ }, 500); // Display one card every 0.5s
+
+});
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/5caa8f05b5a8/hermes3-8b.png b/data/artifacts/5caa8f05b5a8/hermes3-8b.png
new file mode 100644
index 0000000..3ada721
Binary files /dev/null and b/data/artifacts/5caa8f05b5a8/hermes3-8b.png differ
diff --git a/data/artifacts/5caa8f05b5a8/hf-qwen-coder-32b.html b/data/artifacts/5caa8f05b5a8/hf-qwen-coder-32b.html
new file mode 100644
index 0000000..6289295
--- /dev/null
+++ b/data/artifacts/5caa8f05b5a8/hf-qwen-coder-32b.html
@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>What's Your Wallcovering Style?</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #1c1a17;
+ --muted: #9b948a;
+ --accent: #b0472e;
+ --line: #e0dedd;
+ --shadow: rgba(0, 0, 0, .12);
+ --hover-shadow: rgba(0, 0, 0, .18);
+ --glow: rgba(176, 71, 46, .35);
+ --ease: cubic-bezier(.22, 1, .36, 1);
+ }
+
+ body {
+ margin: 0;
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background-color: var(--bg);
+ color: var(--text);
+ line-height: 1.5;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ height: 100vh;
+ overflow: hidden;
+ }
+
+ header {
+ width: 100%;
+ background-color: var(--bg);
+ padding: 24px 32px;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
+ z-index: 10;
+ }
+
+ header h1 {
+ margin: 0;
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 50px;
+ letter-spacing: .18em;
+ color: var(--text);
+ }
+
+ main {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 96px 32px;
+ }
+
+ section {
+ width: 100%;
+ max-width: 800px;
+ text-align: center;
+ }
+
+ h2 {
+ font-size: 38px;
+ margin-bottom: 48px;
+ }
+
+ .question-container {
+ display: flex;
+ justify-content: center;
+ gap: 24px;
+ flex-wrap: wrap;
+ margin-bottom: 96px;
+ }
+
+ .answer-tile {
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: 0 8px 24px var(--shadow);
+ padding: 32px;
+ flex: 1;
+ min-width: 260px;
+ transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
+ }
+
+ .answer-tile:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 16px 48px var(--hover-shadow);
+ }
+
+ .result-card {
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: 0 8px 24px var(--shadow);
+ padding: 32px;
+ width: 90%;
+ max-width: 600px;
+ text-align: center;
+ }
+
+ .result-card h3 {
+ font-size: 38px;
+ margin-bottom: 24px;
+ }
+
+ .pattern-swatch {
+ background-color: var(--accent);
+ width: 100%;
+ height: 128px;
+ border-radius: 8px;
+ margin-bottom: 24px;
+ }
+
+ .pattern-swatch.traditional-damask {
+ background-image: repeating-linear-gradient(45deg, #b0472e, #b0472e 5px, transparent 5px, transparent 10px);
+ }
+
+ .pattern-swatch.modern-minimalist {
+ background-image: linear-gradient(to right, #b0472e, #f7efe6);
+ }
+
+ .pattern-swatch.bohemian-maximalist {
+ background-image: radial-gradient(circle at center, #b0472e, #f7efe6 80%);
+ }
+
+ .pattern-swatch.art-deco-glam {
+ background-image: repeating-linear-gradient(to right, #b0472e, #b0472e 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #f7efe6, #b0472e);
+ }
+
+ .result-description {
+ font-size: 21px;
+ margin-bottom: 32px;
+ }
+
+ button {
+ background-color: var(--accent);
+ color: var(--surface);
+ border: none;
+ padding: 16px 32px;
+ font-size: 16px;
+ letter-spacing: .15em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: background-color .15s ease-in-out;
+ }
+
+ button:hover {
+ background-color: #9b4027;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>DESIGNER WALLCOVERINGS</h1>
+ </header>
+ <main>
+ <section id="quiz">
+ <h2>What's Your Wallcovering Style?</h2>
+ <div class="question-container" data-index="0">
+ <div class="answer-tile" style="background-image: repeating-linear-gradient(45deg, #b0472e, #b0472e 5px, transparent 5px, transparent 10px);">
+ <!-- Traditional Damask -->
+ </div>
+ <div class="answer-tile" style="background-image: linear-gradient(to right, #b0472e, #f7efe6);">
+ <!-- Modern Minimalist -->
+ </div>
+ </div>
+ <div class="question-container" data-index="1">
+ <div class="answer-tile" style="background-image: radial-gradient(circle at center, #b0472e, #f7efe6 80%);">
+ <!-- Bohemian Maximalist -->
+ </div>
+ <div class="answer-tile" style="background-image: repeating-linear-gradient(to right, #b0472e, #b0472e 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #f7efe6, #b0472e);">
+ <!-- Art Deco Glam -->
+ </div>
+ </div>
+ </section>
+ <section id="result" style="display: none;">
+ <div class="result-card">
+ <h3 id="style-title"></h3>
+ <div class="pattern-swatch" id="style-pattern"></div>
+ <p id="style-description" class="result-description"></p>
+ <button onclick="restartQuiz()">SHOP THIS STYLE</button>
+ </div>
+ </section>
+ </main>
+
+ <script>
+ const questions = [
+ { answers: ['Traditional Damask', 'Modern Minimalist'] },
+ { answers: ['Bohemian Maximalist', 'Art Deco Glam'] }
+ ];
+
+ const styles = {
+ 'Traditional Damask': {
+ description: "Elevate your space with intricate patterns and timeless elegance.",
+ patternClass: 'traditional-damask'
+ },
+ 'Modern Minimalist': {
+ description: "Clean lines and simplicity for a contemporary look.",
+ patternClass: 'modern-minimalist'
+ },
+ 'Bohemian Maximalist': {
+ description: "Bold colors and textures add a touch of flair to your room.",
+ patternClass: 'bohemian-maximalist'
+ },
+ 'Art Deco Glam': {
+ description: "Luxurious details and geometric designs for a glamorous feel.",
+ patternClass: 'art-deco-glam'
+ }
+ };
+
+ let currentQuestionIndex = 0;
+ let score = {};
+
+ document.querySelectorAll('.answer-tile').forEach(tile => tile.addEventListener('click', handleAnswer));
+
+ function handleAnswer(event) {
+ const answer = questions[currentQuestionIndex].answers[event.target.parentNode.getAttribute('data-index') === '1' ? 1 : 0];
+ if (!score[answer]) score[answer] = 0;
+ score[answer]++;
+
+ currentQuestionIndex++;
+ if (currentQuestionIndex < questions.length) {
+ document.querySelectorAll('.question-container').forEach((container, index) => container.style.display = index === currentQuestionIndex ? 'flex' : 'none');
+ } else {
+ showResult();
+ }
+ }
+
+ function showResult() {
+ const styleResults = Object.keys(score).map(style => ({
+ name: style,
+ points: score[style]
+ })).sort((a, b) => b.points - a.points);
+
+ const topStyle = styleResults[0].name;
+ document.getElementById('style-title').textContent = topStyle;
+ document.getElementById('style-pattern').className = `pattern-swatch ${styles[topStyle].patternClass}`;
+ document.getElementById('style-description').textContent = styles[topStyle].description;
+
+ document.getElementById('quiz').style.display = 'none';
+ document.getElementById('result').style.display = 'block';
+ }
+
+ function restartQuiz() {
+ currentQuestionIndex = 0;
+ score = {};
+ document.querySelectorAll('.question-container').forEach((container, index) => container.style.display = index === 0 ? 'flex' : 'none');
+ document.getElementById('quiz').style.display = 'block';
+ document.getElementById('result').style.display = 'none';
+ }
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/5caa8f05b5a8/hf-qwen-coder-32b.png b/data/artifacts/5caa8f05b5a8/hf-qwen-coder-32b.png
new file mode 100644
index 0000000..37532ec
Binary files /dev/null and b/data/artifacts/5caa8f05b5a8/hf-qwen-coder-32b.png differ
diff --git a/data/artifacts/5caa8f05b5a8/qwen3-14b.html b/data/artifacts/5caa8f05b5a8/qwen3-14b.html
new file mode 100644
index 0000000..eaa26ba
--- /dev/null
+++ b/data/artifacts/5caa8f05b5a8/qwen3-14b.html
@@ -0,0 +1,412 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>What's Your Wallcovering Style?</title>
+ <style>
+ :root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --line: #2a2721;
+ --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+ --hover-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
+ --glow: 0 0 24px var(--accent, #c9a961)35%;
+ --ease: cubic-bezier(0.22, 1, 0.36, 1);
+ --font-display: 'Playfair Display', 'Bodoni MT', 'Didot', Georgia, serif;
+ --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ --spacing-4: 4px;
+ --spacing-8: 8px;
+ --spacing-12: 12px;
+ --spacing-16: 16px;
+ --spacing-24: 24px;
+ --spacing-32: 32px;
+ --spacing-48: 48px;
+ --spacing-64: 64px;
+ --card-radius: 14px;
+ --card-gap: 24px;
+ --card-minmax: 260px;
+ --font-size-display: 67px;
+ --font-size-h1: 50px;
+ --font-size-h2: 38px;
+ --font-size-h3: 28px;
+ --font-size-lead: 21px;
+ --font-size-body: 16px;
+ --font-size-caption: 12px;
+ }
+
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ background-color: var(--bg);
+ color: var(--text);
+ font-family: var(--font-body);
+ min-height: 100vh;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+
+ header {
+ background-color: var(--surface);
+ color: var(--text);
+ font-family: var(--font-display);
+ font-size: 48px;
+ letter-spacing: 0.18em;
+ padding: var(--spacing-24) var(--spacing-32);
+ text-transform: uppercase;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ }
+
+ main {
+ padding-top: calc(60px + var(--spacing-48));
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ overflow-y: auto;
+ }
+
+ .quiz-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ max-width: 600px;
+ padding: var(--spacing-48);
+ box-shadow: var(--shadow);
+ background-color: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: var(--card-radius);
+ }
+
+ .question {
+ font-size: var(--font-size-h3);
+ margin-bottom: var(--spacing-24);
+ text-align: center;
+ }
+
+ .answer-tiles {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(var(--card-minmax), 1fr));
+ gap: var(--spacing-24);
+ width: 100%;
+ }
+
+ .tile {
+ background-color: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: var(--card-radius);
+ padding: var(--spacing-24);
+ cursor: pointer;
+ transition: box-shadow 0.2s ease, transform 0.2s ease;
+ box-shadow: var(--shadow);
+ }
+
+ .tile:hover {
+ box-shadow: var(--hover-shadow);
+ transform: translateY(-4px);
+ }
+
+ .tile svg {
+ width: 100%;
+ height: 100px;
+ margin-bottom: var(--spacing-16);
+ }
+
+ .tile h4 {
+ font-size: var(--font-size-body);
+ margin-bottom: var(--spacing-8);
+ }
+
+ .tile p {
+ font-size: var(--font-size-caption);
+ color: var(--muted);
+ }
+
+ .result-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: var(--surface);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
+ }
+
+ .result-overlay.show {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ .result-card {
+ background-color: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: var(--card-radius);
+ padding: var(--spacing-48);
+ text-align: center;
+ max-width: 800px;
+ width: 100%;
+ box-shadow: var(--shadow);
+ }
+
+ .result-card h2 {
+ font-size: var(--font-size-h2);
+ margin-bottom: var(--spacing-24);
+ }
+
+ .pattern-swatch {
+ width: 100%;
+ height: 200px;
+ margin-bottom: var(--spacing-32);
+ border-radius: var(--card-radius);
+ box-shadow: var(--glow);
+ }
+
+ .description {
+ font-size: var(--font-size-lead);
+ color: var(--muted);
+ margin-bottom: var(--spacing-32);
+ }
+
+ .shop-button {
+ background-color: var(--accent);
+ color: var(--text);
+ border: none;
+ padding: var(--spacing-16) var(--spacing-32);
+ border-radius: var(--card-radius);
+ font-size: var(--font-size-body);
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ font-family: var(--font-body);
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+ }
+
+ .shop-button:hover {
+ background-color: #d3b65c;
+ }
+
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: translateY(0); }
+ }
+
+ .fade-up {
+ animation: fadeUp 0.7s var(--ease) both;
+ }
+
+ .fade-up-delay-2 {
+ animation-delay: 0.2s;
+ }
+
+ .fade-up-delay-4 {
+ animation-delay: 0.4s;
+ }
+
+ .fade-up-delay-6 {
+ animation-delay: 0.6s;
+ }
+
+ .fade-up-delay-8 {
+ animation-delay: 0.8s;
+ }
+
+ .fade-up-delay-10 {
+ animation-delay: 1s;
+ }
+
+ @keyframes drift {
+ 0% { background-position: 0% 50%; }
+ 100% { background-position: 100% 50%; }
+ }
+
+ body::before {
+ content: "";
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(120deg, var(--accent), var(--muted), var(--accent));
+ background-size: 400% 400%;
+ animation: drift 18s ease-in-out infinite;
+ z-index: -1;
+ opacity: 0.05;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ DESIGNER WALLCOVERINGS
+ </header>
+ <main>
+ <div class="quiz-container">
+ <div class="question fade-up">What's Your Wallcovering Style?</div>
+ <div class="answer-tiles">
+ <div class="tile fade-up" data-style="Traditional Damask">
+ <svg viewBox="0 0 100 100">
+ <defs>
+ <pattern id="damask" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+ <path d="M 0 0 L 20 0 L 20 20 L 0 20 Z" fill="none" stroke="var(--accent)" stroke-width="2" />
+ <path d="M 10 10 L 10 20 L 20 20 L 20 10 Z" fill="var(--accent)" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#damask)" />
+ </svg>
+ <h4>Traditional Damask</h4>
+ <p>Elegant, intricate, timeless.</p>
+ </div>
+ <div class="tile fade-up" data-style="Modern Minimalist">
+ <svg viewBox="0 0 100 100">
+ <rect width="100%" height="100%" fill="var(--surface)" />
+ <rect x="20%" y="20%" width="60%" height="60%" fill="var(--accent)" />
+ </svg>
+ <h4>Modern Minimalist</h4>
+ <p>Clean lines, neutral tones, understated.</p>
+ </div>
+ <div class="tile fade-up" data-style="Bohemian Maximalist">
+ <svg viewBox="0 0 100 100">
+ <defs>
+ <pattern id="boho" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
+ <circle cx="5" cy="5" r="3" fill="var(--accent)" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#boho)" />
+ </svg>
+ <h4>Bohemian Maximalist</h4>
+ <p>Vibrant, layered, eclectic.</p>
+ </div>
+ <div class="tile fade-up" data-style="Art Deco Glam">
+ <svg viewBox="0 0 100 100">
+ <rect width="100%" height="100%" fill="var(--surface)" />
+ <rect x="40%" y="40%" width="20%" height="20%" fill="var(--accent)" />
+ <circle cx="80%" cy="30%" r="15%" fill="var(--accent)" />
+ </svg>
+ <h4>Art Deco Glam</h4>
+ <p>Geometric, bold, luxurious.</p>
+ </div>
+ </div>
+ </div>
+ <div class="result-overlay" id="result-overlay">
+ <div class="result-card">
+ <h2 id="result-title">Traditional Damask</h2>
+ <div class="pattern-swatch" id="pattern-swatch"></div>
+ <div class="description" id="result-description">
+ A timeless choice for elegance and refinement.
+ </div>
+ <button class="shop-button" id="shop-button">Shop this style</button>
+ </div>
+ </div>
+ </main>
+ <script>
+ const tiles = document.querySelectorAll('.tile');
+ const overlay = document.getElementById('result-overlay');
+ const resultTitle = document.getElementById('result-title');
+ const patternSwatch = document.getElementById('pattern-swatch');
+ const resultDescription = document.getElementById('result-description');
+ const shopButton = document.getElementById('shop-button');
+
+ let scores = {
+ 'Traditional Damask': 0,
+ 'Modern Minimalist': 0,
+ 'Bohemian Maximalist': 0,
+ 'Art Deco Glam': 0
+ };
+
+ tiles.forEach(tile => {
+ tile.addEventListener('click', () => {
+ const style = tile.getAttribute('data-style');
+ scores[style]++;
+ if (Object.values(scores).every(s => s === 0)) {
+ return;
+ }
+ const maxStyle = Object.entries(scores).reduce((a, b) => a[1] > b[1] ? a : b)[0];
+ const result = {
+ 'Traditional Damask': {
+ title: 'Traditional Damask',
+ pattern: `
+ <svg viewBox="0 0 100 100">
+ <defs>
+ <pattern id="damask" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+ <path d="M 0 0 L 20 0 L 20 20 L 0 20 Z" fill="none" stroke="var(--accent)" stroke-width="2" />
+ <path d="M 10 10 L 10 20 L 20 20 L 20 10 Z" fill="var(--accent)" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#damask)" />
+ </svg>
+ `,
+ description: 'Elegant, intricate, timeless. A timeless choice for elegance and refinement.'
+ },
+ 'Modern Minimalist': {
+ title: 'Modern Minimalist',
+ pattern: `
+ <svg viewBox="0 0 100 100">
+ <rect width="100%" height="100%" fill="var(--surface)" />
+ <rect x="20%" y="20%" width="60%" height="60%" fill="var(--accent)" />
+ </svg>
+ `,
+ description: 'Clean lines, neutral tones, understated. A modern approach to interior design.'
+ },
+ 'Bohemian Maximalist': {
+ title: 'Bohemian Maximalist',
+ pattern: `
+ <svg viewBox="0 0 100 100">
+ <defs>
+ <pattern id="boho" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
+ <circle cx="5" cy="5" r="3" fill="var(--accent)" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#boho)" />
+ </svg>
+ `,
+ description: 'Vibrant, layered, eclectic. A bold and colorful expression of personality.'
+ },
+ 'Art Deco Glam': {
+ title: 'Art Deco Glam',
+ pattern: `
+ <svg viewBox="0 0 100 100">
+ <rect width="100%" height="100%" fill="var(--surface)" />
+ <rect x="40%" y="40%" width="20%" height="20%" fill="var(--accent)" />
+ <circle cx="80%" cy="30%" r="15%" fill="var(--accent)" />
+ </svg>
+ `,
+ description: 'Geometric, bold, luxurious. A striking fusion of art and architecture.'
+ }
+ };
+
+ resultTitle.textContent = result[maxStyle].title;
+ patternSwatch.innerHTML = result[maxStyle].pattern;
+ resultDescription.textContent = result[maxStyle].description;
+ overlay.classList.add('show');
+ });
+ });
+
+ shopButton.addEventListener('click', () => {
+ window.open('https://www.designerwallcoverings.com', '_blank');
+ });
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/5caa8f05b5a8/qwen3-14b.png b/data/artifacts/5caa8f05b5a8/qwen3-14b.png
new file mode 100644
index 0000000..99cd972
Binary files /dev/null and b/data/artifacts/5caa8f05b5a8/qwen3-14b.png differ
diff --git a/data/challenges.json b/data/challenges.json
index c4c5015..2d31851 100644
--- a/data/challenges.json
+++ b/data/challenges.json
@@ -1616,7 +1616,14 @@
"started_at": "2026-07-23T13:35:52.636Z",
"finished_at": "2026-07-23T13:38:27.555Z",
"bytes": 13793,
- "thumb": true
+ "thumb": true,
+ "aiScore": 6,
+ "aiReason": "The visual quality is good but the grid animation and sun pulsing are not fully implemented.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 5
+ },
+ "aiSpread": 2
},
{
"model": "hermes3-8b",
@@ -1627,7 +1634,14 @@
"started_at": "2026-07-23T13:38:27.557Z",
"finished_at": "2026-07-23T13:40:08.826Z",
"bytes": 15342,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7,
+ "aiReason": "The visual quality is good but the grid animation could be smoother and more dynamic.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 7
+ },
+ "aiSpread": 0
},
{
"model": "qwen25-7b",
@@ -1638,12 +1652,20 @@
"started_at": "2026-07-23T13:31:40.409Z",
"finished_at": "2026-07-23T13:32:36.293Z",
"bytes": 4783,
- "thumb": true
+ "thumb": true,
+ "aiScore": 6.5,
+ "aiReason": "The visual quality is good but the grid animation could be smoother and more dynamic.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6
+ },
+ "aiSpread": 1
}
],
- "judging": true,
+ "judging": false,
"category": "Games",
- "judged_at": null
+ "judged_at": "2026-07-26T01:20:43.369Z",
+ "aiPick": "hermes3-8b"
},
{
"id": "e068f31235f8",
@@ -30386,27 +30408,52 @@
"finished_at": "2026-07-26T01:07:22.649Z",
"queued_at": "2026-07-26T01:05:49.465Z",
"bytes": 9732,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7.8,
+ "aiReason": "The HTML fulfills the challenge requirements and has an elegant visual quality.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 2.5
},
{
"model": "gemma3-12b",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
+ "seconds": 82,
+ "cost": 0,
"started_at": "2026-07-26T01:07:22.665Z",
- "finished_at": null,
- "queued_at": "2026-07-26T01:05:49.477Z"
+ "finished_at": "2026-07-26T01:08:44.829Z",
+ "queued_at": "2026-07-26T01:05:49.477Z",
+ "bytes": 7947,
+ "thumb": true,
+ "aiScore": 6.8,
+ "aiReason": "The HTML file fulfills the challenge requirements well but lacks some visual flair and animation.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
},
{
"model": "hermes3-8b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-26T01:05:49.484Z"
+ "seconds": 34,
+ "cost": 0,
+ "started_at": "2026-07-26T01:08:44.843Z",
+ "finished_at": "2026-07-26T01:09:18.585Z",
+ "queued_at": "2026-07-26T01:05:49.484Z",
+ "bytes": 3497,
+ "thumb": true,
+ "aiScore": 7.3,
+ "aiReason": "The HTML is well-structured and fulfills all the requirements for a luxury style showdown bracket. The design tokens are used consistently throughout, and the visual elements are distinct and elegant.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 5.5
+ },
+ "aiSpread": 3.5
},
{
"model": "qwen25-7b",
@@ -30418,29 +30465,57 @@
"finished_at": "2026-07-26T01:06:35.386Z",
"queued_at": "2026-07-26T01:05:49.489Z",
"bytes": 5507,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7.8,
+ "aiReason": "The HTML fulfills the challenge requirements well and presents an elegant, interactive design with clear visual distinctions between styles.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 2.5
},
{
"model": "hf-qwen-coder-32b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-26T01:05:49.493Z"
+ "seconds": 288,
+ "cost": 0,
+ "started_at": "2026-07-26T01:09:18.599Z",
+ "finished_at": "2026-07-26T01:14:06.596Z",
+ "queued_at": "2026-07-26T01:05:49.493Z",
+ "bytes": 12101,
+ "thumb": true,
+ "aiScore": 6.8,
+ "aiReason": "The design is visually appealing and fulfills most of the requirements, but it lacks some animation and interactivity.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
},
{
"model": "claude-code",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
+ "seconds": 246,
+ "cost": 0,
"started_at": "2026-07-26T01:05:49.508Z",
- "finished_at": null,
- "queued_at": "2026-07-26T01:05:49.497Z"
+ "finished_at": "2026-07-26T01:09:55.062Z",
+ "queued_at": "2026-07-26T01:05:49.497Z",
+ "bytes": 19584,
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The HTML file effectively fulfills the challenge requirements with elegant design and clear visual distinctions between styles.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 1.5
}
- ]
+ ],
+ "judging": false,
+ "aiPick": "claude-code",
+ "judged_at": "2026-07-26T01:21:21.021Z"
},
{
"id": "5caa8f05b5a8",
@@ -30453,33 +30528,60 @@
"runs": [
{
"model": "qwen3-14b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-26T01:05:49.709Z"
+ "seconds": 97,
+ "cost": 0,
+ "started_at": "2026-07-26T01:14:06.609Z",
+ "finished_at": "2026-07-26T01:15:43.985Z",
+ "queued_at": "2026-07-26T01:05:49.709Z",
+ "bytes": 12416,
+ "thumb": true,
+ "aiScore": 8,
+ "aiReason": "The HTML fulfills the challenge requirements well and presents an elegant luxury UI.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7
+ },
+ "aiSpread": 2
},
{
"model": "gemma3-12b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-26T01:05:49.713Z"
+ "seconds": 78,
+ "cost": 0,
+ "started_at": "2026-07-26T01:15:43.997Z",
+ "finished_at": "2026-07-26T01:17:01.965Z",
+ "queued_at": "2026-07-26T01:05:49.713Z",
+ "bytes": 9466,
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The HTML meets all the DW LUXURY UI requirements and presents a polished, on-brief result.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 1.5
},
{
"model": "hermes3-8b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-26T01:05:49.717Z"
+ "seconds": 21,
+ "cost": 0,
+ "started_at": "2026-07-26T01:17:01.978Z",
+ "finished_at": "2026-07-26T01:17:22.516Z",
+ "queued_at": "2026-07-26T01:05:49.717Z",
+ "bytes": 4597,
+ "thumb": true,
+ "aiScore": 7.8,
+ "aiReason": "The HTML fulfills the challenge requirements well and presents an elegant luxury UI.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 2.5
},
{
"model": "qwen25-7b",
@@ -30491,28 +30593,56 @@
"finished_at": "2026-07-26T01:07:24.072Z",
"queued_at": "2026-07-26T01:05:49.721Z",
"bytes": 6134,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7.8,
+ "aiReason": "The HTML file effectively fulfills the challenge requirements with elegant UI and a clear, polished design.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 2.5
},
{
"model": "hf-qwen-coder-32b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-26T01:05:49.725Z"
+ "seconds": 103,
+ "cost": 0,
+ "started_at": "2026-07-26T01:17:22.527Z",
+ "finished_at": "2026-07-26T01:19:05.504Z",
+ "queued_at": "2026-07-26T01:05:49.725Z",
+ "bytes": 8787,
+ "thumb": true,
+ "aiScore": 6.8,
+ "aiReason": "The HTML file fulfills the challenge requirements well but lacks some of the refined UI elements and motion easing expected in a luxury brand presentation.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
},
{
"model": "claude-code",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-26T01:05:49.729Z"
+ "seconds": 118,
+ "cost": 0,
+ "started_at": "2026-07-26T01:09:55.068Z",
+ "finished_at": "2026-07-26T01:11:52.996Z",
+ "queued_at": "2026-07-26T01:05:49.729Z",
+ "bytes": 23097,
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The HTML file meets all the DW LUXURY UI REQUIREMENTS and presents a polished, on-brief result.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 1.5
}
- ]
+ ],
+ "judging": false,
+ "aiPick": "gemma3-12b",
+ "judged_at": "2026-07-26T01:21:21.026Z"
}
]
\ No newline at end of file
← c205a47 auto-save: 2026-07-25T18:07:45 (3 files) — data/challenges.j
·
back to Model Arena
·
Add silent-failure alerting wrapper to daily-challenge launc 53e7842 →