← back to Model Arena
snapshot before DTD roster improvements
7e06a400aac59cd87e9c40cf1544f43f2174747b · 2026-08-31 10:22:08 -0700 · Steve Abrams
Files touched
A data/artifacts/042186bcb1d4/qwen25-7b.htmlA data/artifacts/042186bcb1d4/qwen3-14b.htmlA data/artifacts/086d9b64d97d/claude-code.htmlA data/artifacts/086d9b64d97d/qwen25-7b.htmlA data/artifacts/086d9b64d97d/qwen3-14b.htmlA data/artifacts/0a87ff5cf1df/qwen25-7b.htmlA data/artifacts/0a87ff5cf1df/qwen3-14b.htmlA data/artifacts/0b74c289cca4/qwen25-7b.htmlA data/artifacts/0b74c289cca4/qwen3-14b.htmlA data/artifacts/10d3501bd633/qwen25-7b.htmlA data/artifacts/10d3501bd633/qwen3-14b.htmlA data/artifacts/24584cb7e631/qwen25-7b.htmlA data/artifacts/24584cb7e631/qwen3-14b.htmlA data/artifacts/30046bdad881/qwen25-7b.htmlA data/artifacts/30046bdad881/qwen3-14b.htmlA data/artifacts/34f7125fa421/claude-code.htmlA data/artifacts/34f7125fa421/qwen25-7b.htmlA data/artifacts/34f7125fa421/qwen3-14b.htmlA data/artifacts/3de3332d5d26/qwen25-7b.htmlA data/artifacts/3de3332d5d26/qwen3-14b.htmlA data/artifacts/421f1da96a97/qwen25-7b.htmlA data/artifacts/421f1da96a97/qwen3-14b.htmlA data/artifacts/4a268e78cf14/qwen25-7b.htmlA data/artifacts/4a268e78cf14/qwen3-14b.htmlA data/artifacts/7c30b48bff56/qwen25-7b.htmlA data/artifacts/7c30b48bff56/qwen3-14b.htmlA data/artifacts/8149a54eaade/qwen25-7b.htmlA data/artifacts/8149a54eaade/qwen3-14b.htmlA data/artifacts/8a1c89d63041/qwen25-7b.htmlA data/artifacts/8a1c89d63041/qwen3-14b.htmlA data/artifacts/9000631deff3/qwen25-7b.htmlA data/artifacts/9000631deff3/qwen3-14b.htmlA data/artifacts/c323008e27c0/qwen25-7b.htmlA data/artifacts/c323008e27c0/qwen3-14b.htmlA data/artifacts/e44d5e8aafe3/qwen25-7b.htmlA data/artifacts/e44d5e8aafe3/qwen3-14b.htmlA data/landings/086d9b64d97d-qwen3-14b.htmlA data/landings/8149a54eaade-qwen25-7b.html
Diff
commit 7e06a400aac59cd87e9c40cf1544f43f2174747b
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Aug 31 10:22:08 2026 -0700
snapshot before DTD roster improvements
---
data/artifacts/042186bcb1d4/qwen25-7b.html | 70 +++++
data/artifacts/042186bcb1d4/qwen3-14b.html | 51 ++++
data/artifacts/086d9b64d97d/claude-code.html | 326 ++++++++++++++++++++++
data/artifacts/086d9b64d97d/qwen25-7b.html | 69 +++++
data/artifacts/086d9b64d97d/qwen3-14b.html | 106 ++++++++
data/artifacts/0a87ff5cf1df/qwen25-7b.html | 68 +++++
data/artifacts/0a87ff5cf1df/qwen3-14b.html | 96 +++++++
data/artifacts/0b74c289cca4/qwen25-7b.html | 117 ++++++++
data/artifacts/0b74c289cca4/qwen3-14b.html | 236 ++++++++++++++++
data/artifacts/10d3501bd633/qwen25-7b.html | 104 +++++++
data/artifacts/10d3501bd633/qwen3-14b.html | 163 +++++++++++
data/artifacts/24584cb7e631/qwen25-7b.html | 82 ++++++
data/artifacts/24584cb7e631/qwen3-14b.html | 114 ++++++++
data/artifacts/30046bdad881/qwen25-7b.html | 91 +++++++
data/artifacts/30046bdad881/qwen3-14b.html | 141 ++++++++++
data/artifacts/34f7125fa421/claude-code.html | 393 +++++++++++++++++++++++++++
data/artifacts/34f7125fa421/qwen25-7b.html | 119 ++++++++
data/artifacts/34f7125fa421/qwen3-14b.html | 218 +++++++++++++++
data/artifacts/3de3332d5d26/qwen25-7b.html | 80 ++++++
data/artifacts/3de3332d5d26/qwen3-14b.html | 170 ++++++++++++
data/artifacts/421f1da96a97/qwen25-7b.html | 116 ++++++++
data/artifacts/421f1da96a97/qwen3-14b.html | 142 ++++++++++
data/artifacts/4a268e78cf14/qwen25-7b.html | 111 ++++++++
data/artifacts/4a268e78cf14/qwen3-14b.html | 174 ++++++++++++
data/artifacts/7c30b48bff56/qwen25-7b.html | 73 +++++
data/artifacts/7c30b48bff56/qwen3-14b.html | 99 +++++++
data/artifacts/8149a54eaade/qwen25-7b.html | 132 +++++++++
data/artifacts/8149a54eaade/qwen3-14b.html | 278 +++++++++++++++++++
data/artifacts/8a1c89d63041/qwen25-7b.html | 77 ++++++
data/artifacts/8a1c89d63041/qwen3-14b.html | 153 +++++++++++
data/artifacts/9000631deff3/qwen25-7b.html | 87 ++++++
data/artifacts/9000631deff3/qwen3-14b.html | 114 ++++++++
data/artifacts/c323008e27c0/qwen25-7b.html | 95 +++++++
data/artifacts/c323008e27c0/qwen3-14b.html | 144 ++++++++++
data/artifacts/e44d5e8aafe3/qwen25-7b.html | 201 ++++++++++++++
data/artifacts/e44d5e8aafe3/qwen3-14b.html | 214 +++++++++++++++
data/landings/086d9b64d97d-qwen3-14b.html | 115 ++++++++
data/landings/8149a54eaade-qwen25-7b.html | 141 ++++++++++
38 files changed, 5280 insertions(+)
diff --git a/data/artifacts/042186bcb1d4/qwen25-7b.html b/data/artifacts/042186bcb1d4/qwen25-7b.html
new file mode 100644
index 0000000..ac79fbd
--- /dev/null
+++ b/data/artifacts/042186bcb1d4/qwen25-7b.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Wallpaper Sample Sale</title>
+ <style>
+ body, table, td { margin: 0; padding: 0; }
+ .container {
+ max-width: 600px;
+ width: 100%;
+ margin: 0 auto;
+ background-color: #f9f9f9;
+ padding: 20px;
+ }
+ h1 { color: #333; text-align: center; font-size: 24px; margin-bottom: 20px; }
+ .grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 20px;
+ justify-content: center;
+ padding-top: 20px;
+ }
+ .pattern {
+ width: 150px;
+ height: 150px;
+ background-size: cover;
+ border-radius: 8px;
+ }
+ .gradient-1 { background-image: linear-gradient(to right, #ff9a9e, #fad0c4); }
+ .gradient-2 { background-image: linear-gradient(to bottom, #f47b63, #fe964a); }
+ .gradient-3 { background-image: linear-gradient(to top left, #512d48, #d65d0e); }
+ .cta-button {
+ display: block;
+ width: 150px;
+ margin: 20px auto 0;
+ padding: 10px 0;
+ text-align: center;
+ background-color: #ff6f69;
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+ border-radius: 4px;
+ }
+ .footer {
+ display: flex;
+ justify-content: space-between;
+ padding-top: 20px;
+ border-top: 1px solid #ddd;
+ }
+ .footer p, a { color: #333; text-decoration: none; font-size: 14px; }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h1>Discover Our Wallpaper Samples!</h1>
+ <div class="grid">
+ <div class="pattern gradient-1"></div>
+ <div class="pattern gradient-2"></div>
+ <div class="pattern gradient-3"></div>
+ </div>
+ <a href="#" class="cta-button">Get Your Sample Today!</a>
+ </div>
+ <footer class="footer">
+ <p>© 2023 Wallpaper Samples. All rights reserved.</p>
+ <a href="#">Privacy Policy</a>
+ <a href="#">Terms of Service</a>
+ </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/042186bcb1d4/qwen3-14b.html b/data/artifacts/042186bcb1d4/qwen3-14b.html
new file mode 100644
index 0000000..79a1f1f
--- /dev/null
+++ b/data/artifacts/042186bcb1d4/qwen3-14b.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Exclusive Wallpaper Sample Sale</title>
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; font-family: Arial, sans-serif; background: #f4f4f4; color: #333; }
+ body { display: flex; flex-direction: column; min-height: 100vh; }
+ header { background: #007BFF; color: #fff; padding: 20px; text-align: center; }
+ main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 20px; }
+ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; width: 100%; max-width: 900px; }
+ .pattern { background: #ccc; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
+ .pattern img { width: 100%; height: 200px; object-fit: cover; }
+ .pattern h3 { padding: 10px; margin: 0; font-size: 16px; }
+ .cta { margin-top: 30px; text-align: center; }
+ .cta a { display: inline-block; padding: 12px 24px; background: #007BFF; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; }
+ footer { background: #333; color: #fff; text-align: center; padding: 15px; font-size: 12px; }
+ footer a { color: #007BFF; text-decoration: underline; }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>Exclusive Wallpaper Sample Sale</h1>
+ <p>Get 20% off all samples when you order within the next 48 hours!</p>
+ </header>
+ <main>
+ <div class="grid">
+ <div class="pattern">
+ <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100'><defs><linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='red'/><stop offset='100%' stop-color='blue'/></linearGradient></defs><rect width='100%' height='100%' fill='url(#grad1)'/></svg>" alt="Pattern 1">
+ <h3>Modern Gradient 1</h3>
+ </div>
+ <div class="pattern">
+ <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100'><defs><linearGradient id='grad2' x1='0%' y1='100%' x2='100%' y2='0%'><stop offset='0%' stop-color='green'/><stop offset='100%' stop-color='yellow'/></linearGradient></defs><rect width='100%' height='100%' fill='url(#grad2)'/></svg>" alt="Pattern 2">
+ <h3>Elegant Gradient 2</h3>
+ </div>
+ <div class="pattern">
+ <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100'><defs><linearGradient id='grad3' x1='0%' y1='0%' x2='0%' y2='100%'><stop offset='0%' stop-color='purple'/><stop offset='100%' stop-color='pink'/></linearGradient></defs><rect width='100%' height='100%' fill='url(#grad3)'/></svg>" alt="Pattern 3">
+ <h3>Artistic Gradient 3</h3>
+ </div>
+ </div>
+ <div class="cta">
+ <a href="#">Shop Now and Save 20%</a>
+ </div>
+ </main>
+ <footer>
+ <p>© 2025 Wallpaper Co. | <a href="#">Unsubscribe</a> | <a href="#">Privacy Policy</a></p>
+ </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/086d9b64d97d/claude-code.html b/data/artifacts/086d9b64d97d/claude-code.html
new file mode 100644
index 0000000..db5d2d1
--- /dev/null
+++ b/data/artifacts/086d9b64d97d/claude-code.html
@@ -0,0 +1,326 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Aqua Vitae — The Fountain</title>
+<style>
+ :root{
+ --bg:#0d0d0f; --surface:#17171c; --text:#f5f2ea; --muted:#8a8578;
+ --accent:#c9a961; --accent-deep:#7d6a45;
+ }
+ *{margin:0;padding:0;box-sizing:border-box}
+ html,body{height:100%;overflow:hidden;background:var(--bg)}
+ body{
+ font-family:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+ color:var(--text);
+ }
+ #stage{position:fixed;inset:0;display:block;cursor:grab}
+ #stage:active{cursor:grabbing}
+
+ /* Ambient drifting glow behind everything */
+ .ambient{
+ position:fixed;inset:-20%;z-index:0;pointer-events:none;
+ background:radial-gradient(60% 55% at 50% 62%, rgba(201,169,97,.10), transparent 60%),
+ radial-gradient(50% 50% at 50% 40%, rgba(120,150,190,.08), transparent 65%);
+ animation:drift 18s ease-in-out infinite alternate;
+ }
+ @keyframes drift{from{transform:translateY(-1.5%) scale(1)}to{transform:translateY(1.5%) scale(1.05)}}
+
+ .overlay{position:fixed;inset:0;z-index:3;pointer-events:none}
+
+ .titlecard{
+ position:absolute;top:clamp(24px,6vh,64px);left:clamp(24px,5vw,64px);
+ max-width:min(88vw,520px);
+ animation:fadeUp .9s cubic-bezier(.22,1,.36,1) both;
+ }
+ .label{
+ font-size:12px;letter-spacing:.15em;text-transform:uppercase;
+ color:var(--muted);margin-bottom:16px;
+ animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .09s both;
+ }
+ .label .dot{color:var(--accent)}
+ h1{
+ font-family:'Didot','Bodoni MT','Playfair Display',Georgia,serif;
+ font-weight:500;font-size:clamp(40px,7.4vw,67px);line-height:1.02;
+ letter-spacing:.01em;
+ animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .18s both;
+ }
+ h1 em{font-style:italic;color:var(--accent)}
+ .tagline{
+ margin-top:20px;font-size:clamp(15px,2.2vw,21px);line-height:1.5;
+ color:rgba(245,242,234,.72);max-width:42ch;font-weight:300;
+ animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .27s both;
+ }
+ .hint{
+ position:absolute;bottom:clamp(20px,4vh,40px);left:50%;transform:translateX(-50%);
+ font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
+ animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .5s both;white-space:nowrap;
+ }
+ .hint b{color:var(--accent);font-weight:600}
+
+ /* soft edge vignette */
+ .vignette{
+ position:fixed;inset:0;z-index:2;pointer-events:none;
+ background:radial-gradient(120% 100% at 50% 46%, transparent 55%, rgba(0,0,0,.55) 100%);
+ }
+ @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
+ @media (max-width:640px){ .tagline{display:none} }
+</style>
+</head>
+<body>
+ <div class="ambient"></div>
+ <canvas id="stage"></canvas>
+ <div class="vignette"></div>
+ <div class="overlay">
+ <div class="titlecard">
+ <div class="label"><span class="dot">◆</span> Interactive · Real-Time Water</div>
+ <h1>Aqua <em>Vitae</em></h1>
+ <p class="tagline">A tiered marble fountain rendered from a thousand droplets in motion — light, gravity, and stillness in a single breath.</p>
+ </div>
+ <div class="hint">Drag to orbit · Scroll to zoom · <b>Water never rests</b></div>
+ </div>
+
+<script>
+(function(){
+ "use strict";
+ const canvas = document.getElementById('stage');
+ const ctx = canvas.getContext('2d');
+ let W=0,H=0,DPR=1,cx=0,cy=0;
+
+ function resize(){
+ DPR = Math.min(window.devicePixelRatio||1, 2);
+ W = window.innerWidth; H = window.innerHeight;
+ canvas.width = W*DPR; canvas.height = H*DPR;
+ canvas.style.width = W+'px'; canvas.style.height = H+'px';
+ ctx.setTransform(DPR,0,0,DPR,0,0);
+ cx = W/2; cy = H*0.52;
+ }
+ window.addEventListener('resize', resize); resize();
+
+ // ---------- Camera ----------
+ let yaw = 0.6, pitch = -0.42, camDist = 940, focal = 820;
+ let autoYaw = true, dragging=false, lastX=0, lastY=0;
+
+ canvas.addEventListener('mousedown', e=>{dragging=true;autoYaw=false;lastX=e.clientX;lastY=e.clientY;});
+ window.addEventListener('mouseup', ()=>dragging=false);
+ window.addEventListener('mousemove', e=>{
+ if(!dragging) return;
+ yaw += (e.clientX-lastX)*0.006;
+ pitch = Math.max(-1.15, Math.min(-0.05, pitch + (e.clientY-lastY)*0.004));
+ lastX=e.clientX; lastY=e.clientY;
+ });
+ canvas.addEventListener('touchstart', e=>{dragging=true;autoYaw=false;const t=e.touches[0];lastX=t.clientX;lastY=t.clientY;},{passive:true});
+ window.addEventListener('touchend', ()=>dragging=false);
+ window.addEventListener('touchmove', e=>{
+ if(!dragging)return; const t=e.touches[0];
+ yaw += (t.clientX-lastX)*0.006;
+ pitch = Math.max(-1.15, Math.min(-0.05, pitch + (t.clientY-lastY)*0.004));
+ lastX=t.clientX; lastY=t.clientY;
+ },{passive:true});
+ canvas.addEventListener('wheel', e=>{
+ e.preventDefault();
+ camDist = Math.max(520, Math.min(1500, camDist + e.deltaY*0.7));
+ },{passive:false});
+
+ // ---------- Projection ----------
+ function project(x,y,z){
+ const cY=Math.cos(yaw), sY=Math.sin(yaw);
+ let rx = x*cY - z*sY;
+ let rz = x*sY + z*cY;
+ const cP=Math.cos(pitch), sP=Math.sin(pitch);
+ let ry = y*cP - rz*sP;
+ let rz2 = y*sP + rz*cP;
+ const depth = rz2 + camDist;
+ const s = focal/depth;
+ return {x: cx + rx*s, y: cy - ry*s, s, depth};
+ }
+
+ function circlePts(radius,y,n){
+ const pts=[];
+ for(let i=0;i<n;i++){const a=i/n*Math.PI*2; pts.push(project(Math.cos(a)*radius, y, Math.sin(a)*radius));}
+ return pts;
+ }
+ function tracePath(pts){
+ ctx.beginPath();
+ for(let i=0;i<pts.length;i++){ const p=pts[i]; i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y); }
+ ctx.closePath();
+ }
+
+ // ---------- Fountain geometry ----------
+ const POOL_R = 230;
+ const ringCount = 12;
+ const emitters = []; // 0 = center, 1..ring
+ emitters.push({type:'center'});
+ for(let i=0;i<ringCount;i++) emitters.push({type:'ring', a:i/ringCount*Math.PI*2});
+
+ const rand=(a,b)=>a+Math.random()*(b-a);
+ const g = -560;
+
+ // ---------- Particles ----------
+ const N = 1400;
+ const P = [];
+ function emit(p){
+ if(p.em===0){ // central column
+ p.x=rand(-4,4); p.z=rand(-4,4); p.y=176+rand(0,6);
+ const ang=Math.random()*Math.PI*2, spread=rand(0,24);
+ p.vx=Math.cos(ang)*spread; p.vz=Math.sin(ang)*spread;
+ p.vy=rand(330,395);
+ p.size=rand(2.4,4.8); p.core=Math.random()<0.35;
+ } else { // arcing ring jets
+ const a=emitters[p.em].a, rr=72;
+ p.x=Math.cos(a)*rr; p.z=Math.sin(a)*rr; p.y=176;
+ const out=rand(80,102), tang=rand(-22,22), up=rand(268,318);
+ p.vx=Math.cos(a)*out - Math.sin(a)*tang;
+ p.vz=Math.sin(a)*out + Math.cos(a)*tang;
+ p.vy=up;
+ p.size=rand(2,3.4); p.core=Math.random()<0.2;
+ }
+ p.life=0; p.maxLife=rand(2.2,3.6);
+ }
+ for(let i=0;i<N;i++){
+ const p={em: Math.random()<0.42 ? 0 : (1+((i)%ringCount))};
+ emit(p);
+ p.life=Math.random()*p.maxLife; // stagger
+ p.y = 176 + Math.random()*120; p.vy = rand(-40,300);
+ P.push(p);
+ }
+
+ // ---------- Ripples ----------
+ const ripples=[];
+ function addRipple(x,z){
+ if(ripples.length>60) return;
+ ripples.push({x,z,r:rand(4,10),maxR:rand(38,80),a:0.55});
+ }
+
+ // ---------- Update ----------
+ function update(dt){
+ for(let i=0;i<P.length;i++){
+ const p=P[i];
+ p.vy += g*dt;
+ p.x += p.vx*dt; p.y += p.vy*dt; p.z += p.vz*dt; p.life += dt;
+ if(p.y<=0 && p.vy<0){
+ if(Math.random()<0.04){ const rr=Math.hypot(p.x,p.z); if(rr<POOL_R) addRipple(p.x,p.z); }
+ emit(p);
+ } else if(p.life>p.maxLife){
+ emit(p);
+ }
+ }
+ for(let i=ripples.length-1;i>=0;i--){
+ const r=ripples[i];
+ r.r += 34*dt; r.a -= 0.55*dt;
+ if(r.a<=0 || r.r>r.maxR) ripples.splice(i,1);
+ }
+ }
+
+ // ---------- Render helpers ----------
+ function drawStructure(){
+ const mainScale = focal/(camDist);
+ // POOL (water surface at y=0)
+ let pts = circlePts(POOL_R,0,64);
+ let ax=0,ay=0; pts.forEach(p=>{ax+=p.x;ay+=p.y;}); ax/=pts.length; ay/=pts.length;
+ let rgrad = ctx.createRadialGradient(ax,ay-8,12, ax,ay, POOL_R*mainScale*1.15);
+ rgrad.addColorStop(0,'rgba(38,58,74,0.95)');
+ rgrad.addColorStop(0.55,'rgba(20,32,44,0.95)');
+ rgrad.addColorStop(1,'rgba(10,14,20,0.98)');
+ tracePath(pts); ctx.fillStyle=rgrad; ctx.fill();
+ // rim
+ ctx.lineWidth=Math.max(1.5, 5*mainScale);
+ ctx.strokeStyle='rgba(201,169,97,0.55)'; ctx.stroke();
+ ctx.lineWidth=Math.max(1,2*mainScale);
+ ctx.strokeStyle='rgba(245,242,234,0.10)';
+ tracePath(circlePts(POOL_R-8,0,64)); ctx.stroke();
+
+ // ripples on pool
+ ctx.lineWidth=Math.max(0.8,1.6*mainScale);
+ for(const r of ripples){
+ const rp=[];
+ for(let i=0;i<28;i++){const a=i/28*Math.PI*2; rp.push(project(r.x+Math.cos(a)*r.r, 0, r.z+Math.sin(a)*r.r));}
+ tracePath(rp);
+ ctx.strokeStyle='rgba(190,220,240,'+Math.max(0,r.a).toFixed(3)+')';
+ ctx.stroke();
+ }
+
+ // Pedestal base
+ fillTier(58, 0, 20, 'rgba(30,30,34,0.95)','rgba(201,169,97,0.35)', mainScale);
+ fillTier(46, 20, 96,'rgba(24,24,28,0.95)','rgba(201,169,97,0.30)', mainScale);
+ // Upper bowl (catches the arcs)
+ let bowl = circlePts(104,150,48);
+ let bx=0,by=0; bowl.forEach(p=>{bx+=p.x;by+=p.y;}); bx/=bowl.length; by/=bowl.length;
+ let bg=ctx.createRadialGradient(bx,by-6,8,bx,by,104*mainScale*1.2);
+ bg.addColorStop(0,'rgba(46,62,76,0.95)');
+ bg.addColorStop(1,'rgba(16,22,30,0.96)');
+ tracePath(bowl); ctx.fillStyle=bg; ctx.fill();
+ ctx.lineWidth=Math.max(1.4,4*mainScale); ctx.strokeStyle='rgba(201,169,97,0.55)'; ctx.stroke();
+ // stem to nozzle
+ fillTier(16,150,176,'rgba(30,30,34,0.95)','rgba(201,169,97,0.30)', mainScale);
+ }
+
+ function fillTier(radius,y0,y1,fill,stroke,ms){
+ const top=circlePts(radius,y1,40), bot=circlePts(radius,y0,40);
+ // side wall as ribbon
+ ctx.beginPath();
+ for(let i=0;i<=top.length;i++){const p=top[i%top.length]; i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y);}
+ for(let i=top.length;i>=0;i--){const p=bot[i%bot.length]; ctx.lineTo(p.x,p.y);}
+ ctx.closePath(); ctx.fillStyle=fill; ctx.fill();
+ tracePath(top); ctx.fillStyle=fill; ctx.fill();
+ ctx.lineWidth=Math.max(1,3*ms); ctx.strokeStyle=stroke; ctx.stroke();
+ }
+
+ function drawParticles(){
+ ctx.globalCompositeOperation='lighter';
+ for(let i=0;i<P.length;i++){
+ const p=P[i];
+ const pr=project(p.x,p.y,p.z);
+ if(pr.depth<=1) continue;
+ const t=Math.max(0,Math.min(1,p.y/300));
+ let a = 0.45;
+ // fade near end of life
+ const lifeLeft=(p.maxLife-p.life);
+ if(lifeLeft<0.4) a*= lifeLeft/0.4;
+ a *= Math.min(1, pr.s*1.2);
+ if(a<=0.01) continue;
+ const size=Math.max(0.6, p.size*pr.s);
+ const rr = Math.round(140+ t*95);
+ const gg = Math.round(185+ t*60);
+ const bb = Math.round(220+ t*35);
+ const grd=ctx.createRadialGradient(pr.x,pr.y,0,pr.x,pr.y,size*2.6);
+ grd.addColorStop(0,'rgba('+rr+','+gg+','+bb+','+(a).toFixed(3)+')');
+ grd.addColorStop(1,'rgba('+rr+','+gg+','+bb+',0)');
+ ctx.fillStyle=grd;
+ ctx.beginPath(); ctx.arc(pr.x,pr.y,size*2.6,0,Math.PI*2); ctx.fill();
+ if(p.core){
+ ctx.fillStyle='rgba(255,255,255,'+(a*0.9).toFixed(3)+')';
+ ctx.beginPath(); ctx.arc(pr.x,pr.y,size*0.6,0,Math.PI*2); ctx.fill();
+ }
+ }
+ ctx.globalCompositeOperation='source-over';
+ }
+
+ function drawBackground(){
+ const bg=ctx.createLinearGradient(0,0,0,H);
+ bg.addColorStop(0,'#101015');
+ bg.addColorStop(0.5,'#0d0d0f');
+ bg.addColorStop(1,'#070708');
+ ctx.fillStyle=bg; ctx.fillRect(0,0,W,H);
+ }
+
+ // ---------- Loop ----------
+ let last=performance.now();
+ function frame(now){
+ let dt=(now-last)/1000; last=now;
+ if(dt>0.05) dt=0.05;
+ if(autoYaw) yaw += dt*0.12;
+ // step physics a couple substeps for stability
+ update(dt*0.5); update(dt*0.5);
+
+ drawBackground();
+ drawStructure();
+ drawParticles();
+ requestAnimationFrame(frame);
+ }
+ requestAnimationFrame(frame);
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/086d9b64d97d/qwen25-7b.html b/data/artifacts/086d9b64d97d/qwen25-7b.html
new file mode 100644
index 0000000..4bb4240
--- /dev/null
+++ b/data/artifacts/086d9b64d97d/qwen25-7b.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>3D Water Fountain</title>
+ <style>
+ body {
+ margin: 0;
+ overflow: hidden;
+ background-color: #f7efe6;
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ }
+ .container {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ perspective: 1000px;
+ }
+ .fountain {
+ position: relative;
+ transform-style: preserve-3d;
+ animation: ambient 18s linear infinite, glow 60s ease-in-out infinite;
+ }
+ @keyframes ambient {
+ from { background-position-x: -50%; }
+ to { background-position-x: 50%; }
+ }
+ @keyframes glow {
+ 0% { box-shadow: 0 0 24px rgba(198, 95, 56, .35); }
+ 75% { box-shadow: none; }
+ 100% { box-shadow: 0 0 24px rgba(198, 95, 56, .35); }
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div id="fountain" class="fountain"></div>
+ </div>
+
+ <script>
+ function createWater() {
+ const fountain = document.getElementById('fountain');
+ const waterMesh = new THREE.Mesh(
+ new THREE.PlaneGeometry(20, 15),
+ new THREE.MeshBasicMaterial({ color: 0x7d6a45 })
+ );
+ waterMesh.rotation.x = -Math.PI / 2;
+ fountain.appendChild(waterMesh);
+ }
+
+ function animate() {
+ requestAnimationFrame(animate);
+ if (fountain) createWater();
+ }
+
+ const scene = new THREE.Scene();
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+ const renderer = new THREE.WebGLRenderer({ antialias: true });
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ document.body.appendChild(renderer.domElement);
+
+ scene.add(new THREE.AmbientLight(0x404040));
+ camera.position.z = 5;
+
+ animate();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/086d9b64d97d/qwen3-14b.html b/data/artifacts/086d9b64d97d/qwen3-14b.html
new file mode 100644
index 0000000..917aacb
--- /dev/null
+++ b/data/artifacts/086d9b64d97d/qwen3-14b.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Water Fountain</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ background: #12002b;
+ color: #f3e9ff;
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ overflow: hidden;
+ }
+ canvas {
+ display: block;
+ }
+ .label {
+ position: absolute;
+ top: 24px;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ color: #8d7bb0;
+ font-family: sans-serif;
+ }
+ </style>
+</head>
+<body>
+ <div class="label">3D Water Fountain</div>
+ <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/build/three.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/examples/js/controls/OrbitControls.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/examples/js/objects/Water.js"></script>
+ <script>
+ let scene, camera, renderer, controls;
+ let water;
+
+ init();
+ animate();
+
+ function init() {
+ scene = new THREE.Scene();
+ scene.background = new THREE.Color(0x12002b);
+
+ camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
+ camera.position.set(0, 5, 10);
+
+ renderer = new THREE.WebGLRenderer({ antialias: true });
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ document.body.appendChild(renderer.domElement);
+
+ controls = new THREE.OrbitControls(camera, renderer.domElement);
+ controls.target.set(0, 2, 0);
+ controls.update();
+
+ // Ground
+ const groundGeometry = new THREE.PlaneGeometry(100, 100);
+ const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x222222 });
+ const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+ ground.rotation.x = -Math.PI / 2;
+ scene.add(ground);
+
+ // Water
+ water = new THREE.Water(
+ new THREE.PlaneGeometry(20, 20),
+ {
+ textureWidth: 512,
+ textureHeight: 512,
+ waterColor: 0x006699,
+ distortionScale: 3.7,
+ fog: scene.fog !== undefined
+ }
+ );
+ water.rotation.x = -Math.PI / 2;
+ scene.add(water);
+
+ // Light
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+ scene.add(ambientLight);
+
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+ directionalLight.position.set(10, 20, 10);
+ scene.add(directionalLight);
+
+ window.addEventListener('resize', onWindowResize, false);
+ }
+
+ function onWindowResize() {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ }
+
+ function animate() {
+ requestAnimationFrame(animate);
+ water.material.uniforms.time.value += 1.0 / 60.0;
+ controls.update();
+ renderer.render(scene, camera);
+ }
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0a87ff5cf1df/qwen25-7b.html b/data/artifacts/0a87ff5cf1df/qwen25-7b.html
new file mode 100644
index 0000000..ecf19fc
--- /dev/null
+++ b/data/artifacts/0a87ff5cf1df/qwen25-7b.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Wallpaper Sample Sale</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 20px;
+ background-color: #f4f4f4;
+ }
+ .container {
+ max-width: 600px;
+ margin: auto;
+ background-color: white;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 0 15px rgba(0,0,0,0.1);
+ }
+ .header {
+ text-align: center;
+ color: #333;
+ }
+ .grid-item {
+ background: linear-gradient(to right, #ff7e5f, #feb47b);
+ margin-bottom: 20px;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
+ }
+ .grid-item:nth-child(2) {
+ background: linear-gradient(to right, #6dd5ed, #1fab89);
+ }
+ .grid-item:nth-child(3) {
+ background: linear-gradient(to right, #ff9f7f, #fad0c4);
+ }
+ .cta-button {
+ display: inline-block;
+ padding: 10px 20px;
+ background-color: #5cb85c;
+ color: white;
+ text-decoration: none;
+ border-radius: 5px;
+ margin-top: 20px;
+ }
+ .footer {
+ text-align: center;
+ font-size: 14px;
+ color: #999;
+ padding-top: 20px;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="header">Discover Our Stunning Wallpaper Samples</div>
+ <div class="grid-item">Pattern 1</div>
+ <div class="grid-item">Pattern 2</div>
+ <div class="grid-item">Pattern 3</div>
+ <a href="#" class="cta-button">Order Now</a>
+ </div>
+ <footer class="footer">
+ © 2023 Wallpaper Samples Co. All rights reserved.
+ </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0a87ff5cf1df/qwen3-14b.html b/data/artifacts/0a87ff5cf1df/qwen3-14b.html
new file mode 100644
index 0000000..f15ea17
--- /dev/null
+++ b/data/artifacts/0a87ff5cf1df/qwen3-14b.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Wallpaper Sample Sale</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-family: Arial, sans-serif;
+ background-color: #f9f9f9;
+ color: #333;
+ }
+ body {
+ line-height: 1.6;
+ }
+ .container {
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 20px;
+ }
+ header {
+ text-align: center;
+ padding: 20px 0;
+ }
+ header h1 {
+ font-size: 24px;
+ margin: 0;
+ }
+ .grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 15px;
+ margin: 20px 0;
+ }
+ .pattern {
+ background-color: #ccc;
+ padding: 10px;
+ border-radius: 8px;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ font-weight: bold;
+ text-transform: uppercase;
+ }
+ .pattern:nth-child(1) { background: linear-gradient(45deg, #ff9a9e, #fad0c4); }
+ .pattern:nth-child(2) { background: linear-gradient(45deg, #a1c4fd, #c2e9fb); }
+ .pattern:nth-child(3) { background: linear-gradient(45deg, #f9a8d4, #fce4ec); }
+ .cta {
+ text-align: center;
+ margin: 30px 0;
+ }
+ .cta button {
+ background-color: #007bff;
+ color: #fff;
+ border: none;
+ padding: 12px 24px;
+ font-size: 16px;
+ border-radius: 4px;
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-block;
+ }
+ .cta button:hover {
+ background-color: #0069d9;
+ }
+ footer {
+ text-align: center;
+ padding: 20px 0;
+ font-size: 12px;
+ color: #777;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <header>
+ <h1>Exclusive Wallpaper Sample Sale</h1>
+ </header>
+ <div class="grid">
+ <div class="pattern">Pattern 1</div>
+ <div class="pattern">Pattern 2</div>
+ <div class="pattern">Pattern 3</div>
+ </div>
+ <div class="cta">
+ <button>Shop Now</button>
+ </div>
+ <footer>
+ © 2025 Wallpaper Co. | 123 Design Lane | No unsubscribe required | This message complies with CAN-SPAM Act.
+ </footer>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0b74c289cca4/qwen25-7b.html b/data/artifacts/0b74c289cca4/qwen25-7b.html
new file mode 100644
index 0000000..f78fe87
--- /dev/null
+++ b/data/artifacts/0b74c289cca4/qwen25-7b.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Wallcovering Catalog</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ }
+ .container {
+ display: grid;
+ gap: 20px;
+ max-width: 80%;
+ width: 600px;
+ }
+ .card {
+ background-color: #f9f9f9;
+ border-radius: 8px;
+ padding: 15px;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+ }
+ .card:hover {
+ transform: scale(1.02);
+ }
+ .search-box {
+ margin-bottom: 20px;
+ width: calc(100% - 40px);
+ max-width: 560px;
+ }
+ .header-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 10px;
+ }
+ th, td {
+ text-align: left;
+ padding: 8px;
+ }
+ </style>
+</head>
+<body>
+ <input type="text" id="searchBox" class="search-box" placeholder="Search by SKU or Pattern...">
+ <table class="container">
+ <thead>
+ <tr class="header-row">
+ <th onclick="sortTable(0)">SKU</th>
+ <th onclick="sortTable(1)">Pattern</th>
+ <th onclick="sortTable(2)">Colorway</th>
+ <th onclick="sortTable(3)">Price ($)</th>
+ <th onclick="sortTable(4)">Stock</th>
+ </tr>
+ </thead>
+ <tbody id="wallcoveringCatalog">
+ <tr class="card" data-sku="W123" data-pattern="Floral" data-colorway="White" data-price="59.99" data-stock="100">SKU: W123, Pattern: Floral, Colorway: White, Price: $59.99, Stock: 100</tr>
+ <tr class="card" data-sku="W456" data-pattern="Geometric" data-colorway="Black and Gold" data-price="79.99" data-stock="80">SKU: W456, Pattern: Geometric, Colorway: Black and Gold, Price: $79.99, Stock: 80</tr>
+ <tr class="card" data-sku="W789" data-pattern="Stripes" data-colorway="Red and White" data-price="49.99" data-stock="150">SKU: W789, Pattern: Stripes, Colorway: Red and White, Price: $49.99, Stock: 150</tr>
+ <tr class="card" data-sku="W234" data-pattern="Herringbone" data-colorway="Beige" data-price="65.99" data-stock="70">SKU: W234, Pattern: Herringbone, Colorway: Beige, Price: $65.99, Stock: 70</tr>
+ <tr class="card" data-sku="W567" data-pattern="Polka Dots" data-colorway="Blue and White" data-price="54.99" data-stock="120">SKU: W567, Pattern: Polka Dots, Colorway: Blue and White, Price: $54.99, Stock: 120</tr>
+ <tr class="card" data-sku="W890" data-pattern="Checkerboard" data-colorway="Black and Grey" data-price="69.99" data-stock="90">SKU: W890, Pattern: Checkerboard, Colorway: Black and Grey, Price: $69.99, Stock: 90</tr>
+ <tr class="card" data-sku="W135" data-pattern="Floral" data-colorway="Yellow" data-price="57.99" data-stock="110">SKU: W135, Pattern: Floral, Colorway: Yellow, Price: $57.99, Stock: 110</tr>
+ <tr class="card" data-sku="W678" data-pattern="Tie-Dye" data-colorway="Multi-Color" data-price="45.99" data-stock="200">SKU: W678, Pattern: Tie-Dye, Colorway: Multi-Color, Price: $45.99, Stock: 200</tr>
+ </tbody>
+ </table>
+ <script>
+ function sortTable(columnIndex) {
+ let table, rows, switching, i, x, y, shouldSwitch;
+ table = document.getElementById("wallcoveringCatalog");
+ switching = true;
+ while (switching) {
+ switching = false;
+ rows = table.rows;
+ for (i = 1; i < (rows.length - 1); i++) {
+ shouldSwitch = false;
+ x = rows[i].getElementsByTagName("TD")[columnIndex];
+ y = rows[i + 1].getElementsByTagName("TD")[columnIndex];
+ if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+ shouldSwitch = true;
+ break;
+ }
+ }
+ if (shouldSwitch) {
+ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+ switching = true;
+ }
+ }
+ }
+
+ document.getElementById('searchBox').addEventListener('input', function() {
+ let input, filter, table, tr, td, i, txtValue;
+ input = document.getElementById("searchBox");
+ filter = input.value.toLowerCase();
+ table = document.getElementById("wallcoveringCatalog");
+ tr = table.getElementsByTagName("tr");
+ for (i = 0; i < tr.length; i++) {
+ td = tr[i].getElementsByTagName("TD")[0];
+ if (td) {
+ txtValue = td.textContent || td.innerText;
+ if (txtValue.toLowerCase().indexOf(filter) > -1) {
+ tr[i].style.display = "";
+ } else {
+ tr[i].style.display = "none";
+ }
+ }
+ }
+ });
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0b74c289cca4/qwen3-14b.html b/data/artifacts/0b74c289cca4/qwen3-14b.html
new file mode 100644
index 0000000..c557354
--- /dev/null
+++ b/data/artifacts/0b74c289cca4/qwen3-14b.html
@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Wallcovering Catalog</title>
+ <style>
+ * {
+ box-sizing: border-box;
+ }
+ body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background: #f9f9f9;
+ }
+ header {
+ background: #333;
+ color: white;
+ padding: 1em;
+ text-align: center;
+ }
+ .search-container {
+ padding: 1em;
+ text-align: center;
+ }
+ input[type="text"] {
+ width: 100%;
+ max-width: 400px;
+ padding: 0.5em;
+ font-size: 1em;
+ }
+ .grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 1em;
+ padding: 1em;
+ }
+ .card {
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ overflow: hidden;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ }
+ .card-header {
+ padding: 0.5em;
+ background: #eee;
+ font-weight: bold;
+ text-align: center;
+ }
+ .card-body {
+ padding: 0.5em;
+ }
+ .card-body p {
+ margin: 0.2em 0;
+ }
+ .sortable {
+ cursor: pointer;
+ color: #007bff;
+ }
+ .sortable:hover {
+ text-decoration: underline;
+ }
+ @media (max-width: 600px) {
+ .search-container input[type="text"] {
+ font-size: 0.9em;
+ }
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>Wallcovering Catalog</h1>
+ </header>
+ <div class="search-container">
+ <input type="text" id="searchBox" placeholder="Search by pattern, colorway, or SKU">
+ </div>
+ <div class="grid" id="catalogGrid">
+ <div class="card">
+ <div class="card-header">SKU: W001</div>
+ <div class="card-body">
+ <p><strong>Pattern:</strong> Linear Marble</p>
+ <p><strong>Colorway:</strong> Concrete & Beige</p>
+ <p><strong>Price:</strong> $18.99/sqft</p>
+ <p><strong>Stock:</strong> 125</p>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-header">SKU: W002</div>
+ <div class="card-body">
+ <p><strong>Pattern:</strong> Modern Chevron</p>
+ <p><strong>Colorway:</strong> Charcoal & Gold</p>
+ <p><strong>Price:</strong> $22.50/sqft</p>
+ <p><strong>Stock:</strong> 85</p>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-header">SKU: W003</div>
+ <div class="card-body">
+ <p><strong>Pattern:</strong> Abstract Floral</p>
+ <p><strong>Colorway:</strong> Emerald & Ivory</p>
+ <p><strong>Price:</strong> $20.00/sqft</p>
+ <p><strong>Stock:</strong> 60</p>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-header">SKU: W004</div>
+ <div class="card-body">
+ <p><strong>Pattern:</strong> Geometric Triangles</p>
+ <p><strong>Colorway:</strong> Navy & Teal</p>
+ <p><strong>Price:</strong> $19.75/sqft</p>
+ <p><strong>Stock:</strong> 90</p>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-header">SKU: W005</div>
+ <div class="card-body">
+ <p><strong>Pattern:</strong> Rustic Wood</p>
+ <p><strong>Colorway:</strong> Oak & Walnut</p>
+ <p><strong>Price:</strong> $17.50/sqft</p>
+ <p><strong>Stock:</strong> 150</p>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-header">SKU: W006</div>
+ <div class="card-body">
+ <p><strong>Pattern:</strong> Persian Rug</p>
+ <p><strong>Colorway:</strong> Turquoise & Beige</p>
+ <p><strong>Price:</strong> $24.00/sqft</p>
+ <p><strong>Stock:</strong> 55</p>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-header">SKU: W007</div>
+ <div class="card-body">
+ <p><strong>Pattern:</strong> Modern Stripe</p>
+ <p><strong>Colorway:</strong> Black & Silver</p>
+ <p><strong>Price:</strong> $21.25/sqft</p>
+ <p><strong>Stock:</strong> 70</p>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-header">SKU: W008</div>
+ <div class="card-body">
+ <p><strong>Pattern:</strong> Moroccan Tile</p>
+ <p><strong>Colorway:</strong> Blue & White</p>
+ <p><strong>Price:</strong> $23.75/sqft</p>
+ <p><strong>Stock:</strong> 40</p>
+ </div>
+ </div>
+ </div>
+ <script>
+ const catalogGrid = document.getElementById('catalogGrid');
+ const searchBox = document.getElementById('searchBox');
+
+ let cards = [];
+
+ function createCard(data) {
+ const card = document.createElement('div');
+ card.className = 'card';
+ card.innerHTML = `
+ <div class="card-header">SKU: ${data.sku}</div>
+ <div class="card-body">
+ <p><strong>Pattern:</strong> ${data.pattern}</p>
+ <p><strong>Colorway:</strong> ${data.colorway}</p>
+ <p><strong>Price:</strong> $${data.price}/sqft</p>
+ <p><strong>Stock:</strong> ${data.stock}</p>
+ </div>
+ `;
+ return card;
+ }
+
+ function renderCards(filteredCards) {
+ catalogGrid.innerHTML = '';
+ cards = filteredCards.map(data => createCard(data));
+ catalogGrid.append(...cards);
+ }
+
+ function filterCards(searchTerm) {
+ return cards.filter(card => {
+ const text = card.textContent.toLowerCase();
+ return text.includes(searchTerm.toLowerCase());
+ });
+ }
+
+ function sortCards(field, order = 1) {
+ const sorted = cards.sort((a, b) => {
+ const aVal = a.querySelector(`p:contains('${field}')`).textContent.split(': ')[1];
+ const bVal = b.querySelector(`p:contains('${field}')`).textContent.split(': ')[1];
+ return order * aVal.localeCompare(bVal);
+ });
+ renderCards(sorted);
+ }
+
+ function setupSortingHeaders() {
+ const headers = ['SKU', 'Pattern', 'Colorway', 'Price', 'Stock'];
+ const headerContainer = document.createElement('div');
+ headerContainer.style.textAlign = 'center';
+ headerContainer.style.margin = '1em';
+ headers.forEach(header => {
+ const span = document.createElement('span');
+ span.className = 'sortable';
+ span.textContent = header;
+ span.addEventListener('click', () => {
+ sortCards(header, 1);
+ });
+ headerContainer.appendChild(span);
+ });
+ document.body.insertBefore(headerContainer, catalogGrid);
+ }
+
+ const initialData = [
+ { sku: 'W001', pattern: 'Linear Marble', colorway: 'Concrete & Beige', price: '18.99', stock: '125' },
+ { sku: 'W002', pattern: 'Modern Chevron', colorway: 'Charcoal & Gold', price: '22.50', stock: '85' },
+ { sku: 'W003', pattern: 'Abstract Floral', colorway: 'Emerald & Ivory', price: '20.00', stock: '60' },
+ { sku: 'W004', pattern: 'Geometric Triangles', colorway: 'Navy & Teal', price: '19.75', stock: '90' },
+ { sku: 'W005', pattern: 'Rustic Wood', colorway: 'Oak & Walnut', price: '17.50', stock: '150' },
+ { sku: 'W006', pattern: 'Persian Rug', colorway: 'Turquoise & Beige', price: '24.00', stock: '55' },
+ { sku: 'W007', pattern: 'Modern Stripe', colorway: 'Black & Silver', price: '21.25', stock: '70' },
+ { sku: 'W008', pattern: 'Moroccan Tile', colorway: 'Blue & White', price: '23.75', stock: '40' },
+ ];
+
+ function init() {
+ const cards = initialData.map(data => createCard(data));
+ renderCards(cards);
+ setupSortingHeaders();
+ searchBox.addEventListener('input', () => {
+ const filtered = filterCards(searchBox.value);
+ renderCards(filtered);
+ });
+ }
+
+ init();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/10d3501bd633/qwen25-7b.html b/data/artifacts/10d3501bd633/qwen25-7b.html
new file mode 100644
index 0000000..fbbf2c3
--- /dev/null
+++ b/data/artifacts/10d3501bd633/qwen25-7b.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Interactive Fireworks</title>
+ <style>
+ body { margin: 0; overflow: hidden; }
+ canvas { display: block; width: 100%; height: 100%;}
+ </style>
+</head>
+<body>
+<canvas id="fireworkCanvas"></canvas>
+<script>
+const canvas = document.getElementById('fireworkCanvas');
+const ctx = canvas.getContext('2d');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+class Particle {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ this.size = Math.random() * 4 + 1;
+ this.speedX = (Math.random() - 0.5) * 6;
+ this.speedY = -(Math.random() * 2 + 3);
+ this.lifeSpan = 90;
+ }
+
+ update() {
+ if (++this.lifeSpan < 0) return false;
+ this.x += this.speedX;
+ this.y += this.speedY;
+ this.size -= 0.1;
+ return true;
+ }
+
+ draw() {
+ ctx.fillStyle = `rgba(255, ${Math.random() * 140 + 100}, 0, ${this.lifeSpan / 90})`;
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+ ctx.fill();
+ }
+}
+
+class Rocket {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ this.particles = [];
+ for (let i = 0; i < 5; i++) {
+ const particle = new Particle(this.x + Math.random() * 16 - 8, this.y);
+ this.particles.push(particle);
+ }
+ }
+
+ launch() {
+ this.particles.forEach(p => p.update());
+ this.particles = this.particles.filter(p => p.update());
+ if (this.particles.length === 0) return false;
+ requestAnimationFrame(() => this.launch());
+ }
+
+ draw() {
+ ctx.fillStyle = 'rgba(255, 214, 0, 0.8)';
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, 6, 0, Math.PI * 2);
+ ctx.fill();
+ }
+}
+
+let rockets = [];
+function launchRocket() {
+ const rocket = new Rocket(canvas.width / 2, canvas.height - 10);
+ rockets.push(rocket);
+ rocket.launch();
+}
+
+document.addEventListener('click', () => {
+ if (rockets.length < 3) {
+ launchRocket();
+ }
+});
+
+let autoShowTimer;
+function startAutoShow() {
+ autoShowTimer = setInterval(() => {
+ if (rockets.length < 3) launchRocket();
+ }, 2000);
+}
+
+startAutoShow();
+
+requestAnimationFrame(() => {
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ rockets.forEach(r => r.draw());
+ rockets = rockets.filter(r => r.particles.length > 0);
+});
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/10d3501bd633/qwen3-14b.html b/data/artifacts/10d3501bd633/qwen3-14b.html
new file mode 100644
index 0000000..ea27cef
--- /dev/null
+++ b/data/artifacts/10d3501bd633/qwen3-14b.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Interactive Fireworks</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: black;
+ height: 100%;
+ width: 100%;
+ cursor: pointer;
+ }
+ canvas {
+ display: block;
+ }
+ </style>
+</head>
+<body>
+<canvas></canvas>
+<script>
+ const canvas = document.querySelector("canvas");
+ const ctx = canvas.getContext("2d");
+ let width = canvas.width = window.innerWidth;
+ let height = canvas.height = window.innerHeight;
+ window.addEventListener("resize", () => {
+ width = canvas.width = window.innerWidth;
+ height = canvas.height = window.innerHeight;
+ });
+
+ class Particle {
+ constructor(x, y, color, angle, speed, lifespan) {
+ this.x = x;
+ this.y = y;
+ this.color = color;
+ this.angle = angle;
+ this.speed = speed;
+ this.lifespan = lifespan;
+ this.radius = Math.random() * 2 + 1;
+ this.gravity = 0.1;
+ this.alpha = 1;
+ }
+
+ update() {
+ this.x += Math.cos(this.angle) * this.speed;
+ this.y += Math.sin(this.angle) * this.speed + this.gravity;
+ this.speed *= 0.98;
+ this.lifespan -= 1;
+ this.alpha = Math.max(0, this.lifespan / 100);
+ }
+
+ draw(ctx) {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+ ctx.fillStyle = `rgba(${this.color}, ${this.alpha})`;
+ ctx.fill();
+ }
+ }
+
+ class Rocket {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ this.color = `hsl(${Math.random() * 360}, 100%, 60%)`;
+ this.particles = [];
+ this.angle = Math.random() * Math.PI * 2;
+ this.speed = 5 + Math.random() * 5;
+ this.lifespan = 100;
+ this.exploded = false;
+ }
+
+ update() {
+ if (!this.exploded) {
+ this.x += Math.cos(this.angle) * this.speed;
+ this.y += Math.sin(this.angle) * this.speed;
+ this.lifespan -= 1;
+ if (this.lifespan <= 0) {
+ this.explode();
+ }
+ } else {
+ for (let p of this.particles) {
+ p.update();
+ }
+ this.particles = this.particles.filter(p => p.lifespan > 0);
+ }
+ }
+
+ explode() {
+ this.exploded = true;
+ const numParticles = 50;
+ for (let i = 0; i < numParticles; i++) {
+ const angle = Math.random() * Math.PI * 2;
+ const speed = 3 + Math.random() * 4;
+ const lifespan = 100 + Math.random() * 100;
+ this.particles.push(new Particle(this.x, this.y, this.color, angle, speed, lifespan));
+ }
+ }
+
+ draw(ctx) {
+ if (!this.exploded) {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, 4, 0, Math.PI * 2);
+ ctx.fillStyle = this.color;
+ ctx.fill();
+ } else {
+ for (let p of this.particles) {
+ p.draw(ctx);
+ }
+ }
+ }
+ }
+
+ const rockets = [];
+ let autoShow = false;
+ let autoShowInterval = null;
+ let autoShowCount = 0;
+
+ function launchRocket(x, y) {
+ rockets.push(new Rocket(x, y));
+ }
+
+ function animate() {
+ ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
+ ctx.fillRect(0, 0, width, height);
+ for (let rocket of rockets) {
+ rocket.update();
+ rocket.draw(ctx);
+ }
+ requestAnimationFrame(animate);
+ }
+
+ canvas.addEventListener("click", e => {
+ launchRocket(e.clientX, e.clientY);
+ });
+
+ function autoShowFireworks() {
+ autoShowCount++;
+ launchRocket(Math.random() * width, 0);
+ if (autoShowCount < 100) {
+ autoShowInterval = setTimeout(autoShowFireworks, 100);
+ } else {
+ clearTimeout(autoShowInterval);
+ autoShow = false;
+ }
+ }
+
+ document.addEventListener("keydown", e => {
+ if (e.code === "KeyA") {
+ if (!autoShow) {
+ autoShow = true;
+ autoShowCount = 0;
+ autoShowFireworks();
+ }
+ }
+ });
+
+ animate();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/24584cb7e631/qwen25-7b.html b/data/artifacts/24584cb7e631/qwen25-7b.html
new file mode 100644
index 0000000..93b9c9b
--- /dev/null
+++ b/data/artifacts/24584cb7e631/qwen25-7b.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Starfield Warp Effect</title>
+ <style>
+ body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; }
+ canvas { width: 100%; height: 100%; background-color: black; }
+ </style>
+</head>
+<body>
+ <canvas id="starfield"></canvas>
+ <input type="range" id="speedSlider" min="1" max="50" value="20">
+ <script>
+ const canvas = document.getElementById('starfield');
+ const ctx = canvas.getContext('2d');
+ const speedSlider = document.getElementById('speedSlider');
+
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ let stars = [];
+ for (let i = 0; i < 1000; i++) {
+ stars.push({
+ x: Math.random() * canvas.width,
+ y: Math.random() * canvas.height,
+ dx: (Math.random() - 0.5) * 4,
+ dy: (Math.random() - 0.5) * 4
+ });
+ }
+
+ function drawStars() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ for (let i = 0; i < stars.length; i++) {
+ const star = stars[i];
+ ctx.fillStyle = 'white';
+ ctx.beginPath();
+ ctx.arc(star.x, star.y, 1, 0, Math.PI * 2);
+ ctx.fill();
+ }
+ }
+
+ function updateStars() {
+ for (let i = 0; i < stars.length; i++) {
+ const star = stars[i];
+ if (star.x > canvas.width || star.x < 0) {
+ star.dx = -star.dx;
+ }
+ if (star.y > canvas.height || star.y < 0) {
+ star.dy = -star.dy;
+ }
+ star.x += star.dx * speedSlider.value / 10;
+ star.y += star.dy * speedSlider.value / 10;
+ }
+ }
+
+ function animate() {
+ const mouseX = (canvas.width / window.innerWidth) * event.clientX;
+ for (let i = 0; i < stars.length; i++) {
+ stars[i].dx += (mouseX - stars[i].x) * 0.05;
+ }
+ drawStars();
+ updateStars();
+ requestAnimationFrame(animate);
+ }
+
+ canvas.addEventListener('mousemove', animate);
+
+ speedSlider.oninput = function() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ for (let i = 0; i < stars.length; i++) {
+ const star = stars[i];
+ star.dx *= this.value / 20;
+ star.dy *= this.value / 20;
+ }
+ };
+
+ animate();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/24584cb7e631/qwen3-14b.html b/data/artifacts/24584cb7e631/qwen3-14b.html
new file mode 100644
index 0000000..d18dac2
--- /dev/null
+++ b/data/artifacts/24584cb7e631/qwen3-14b.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Starfield Warp</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: black;
+ height: 100%;
+ width: 100%;
+ }
+ canvas {
+ display: block;
+ }
+ #controls {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ color: white;
+ font-family: sans-serif;
+ z-index: 10;
+ }
+ input[type="range"] {
+ width: 200px;
+ }
+ </style>
+</head>
+<body>
+ <div id="controls">
+ <label for="speed">Warp Speed:</label>
+ <input type="range" id="speed" min="1" max="10" value="5" />
+ </div>
+ <canvas id="canvas"></canvas>
+ <script>
+ const canvas = document.getElementById('canvas');
+ const ctx = canvas.getContext('2d');
+ const speedSlider = document.getElementById('speed');
+
+ let width, height;
+ let stars = [];
+ let warpDirection = { x: 0, y: 0 };
+ let warpSpeed = 5;
+
+ function resize() {
+ width = canvas.width = window.innerWidth;
+ height = canvas.height = window.innerHeight;
+ }
+
+ window.addEventListener('resize', resize);
+ resize();
+
+ window.addEventListener('mousemove', (e) => {
+ const x = e.clientX / width;
+ const y = e.clientY / height;
+ warpDirection.x = x - 0.5;
+ warpDirection.y = y - 0.5;
+ });
+
+ speedSlider.addEventListener('input', (e) => {
+ warpSpeed = parseInt(e.target.value);
+ });
+
+ class Star {
+ constructor() {
+ this.x = Math.random() * width;
+ this.y = Math.random() * height;
+ this.z = Math.random() * 100 + 50;
+ this.size = 1.5;
+ }
+
+ update() {
+ this.z -= warpSpeed * warpDirection.x;
+ this.z -= warpSpeed * warpDirection.y;
+ if (this.z < 0) {
+ this.z += 100;
+ this.x = Math.random() * width;
+ this.y = Math.random() * height;
+ }
+ }
+
+ draw(ctx) {
+ const scale = 100 / this.z;
+ const x = width / 2 + (this.x - width / 2) * scale;
+ const y = height / 2 + (this.y - height / 2) * scale;
+ const size = this.size * scale;
+ ctx.fillStyle = 'white';
+ ctx.beginPath();
+ ctx.arc(x, y, size, 0, Math.PI * 2);
+ ctx.fill();
+ }
+ }
+
+ for (let i = 0; i < 200; i++) {
+ stars.push(new Star());
+ }
+
+ function animate() {
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
+ ctx.fillRect(0, 0, width, height);
+ stars.forEach(star => {
+ star.update();
+ star.draw(ctx);
+ });
+ requestAnimationFrame(animate);
+ }
+
+ animate();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/30046bdad881/qwen25-7b.html b/data/artifacts/30046bdad881/qwen25-7b.html
new file mode 100644
index 0000000..1eae8c1
--- /dev/null
+++ b/data/artifacts/30046bdad881/qwen25-7b.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Bouncing Balls</title>
+ <style>
+ body { margin: 0; overflow: hidden; background-color: #f0f0f0; }
+ canvas { display: block; width: 100%; height: 100vh; }
+ </style>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+<script>
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+let balls = [];
+let gravity = 0.5;
+let isDragging = false;
+
+class Ball {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ this.r = Math.random() * 10 + 3;
+ this.color = `hsl(${Math.random() * 360}, 80%, 50%)`;
+ this.vx = (Math.random() - 0.5) * 2;
+ this.vy = -4;
+ }
+
+ update() {
+ this.x += this.vx;
+ this.y += this.vy;
+
+ if (this.y + this.r > canvas.height) {
+ this.vy *= -1;
+ } else {
+ this.vy += gravity;
+ }
+
+ for (let ball of balls) {
+ if (ball !== this && Math.hypot(ball.x - this.x, ball.y - this.y) < this.r + ball.r) {
+ const dx = ball.x - this.x;
+ const dy = ball.y - this.y;
+ const angle = Math.atan2(dy, dx);
+ const dist = this.r + ball.r - Math.hypot(dx, dy);
+
+ this.vx += (dist * Math.cos(angle)) / 10;
+ this.vy += (dist * Math.sin(angle)) / 10;
+
+ ball.vx -= (dist * Math.cos(angle)) / 10;
+ ball.vy -= (dist * Math.sin(angle)) / 10;
+ }
+ }
+ }
+
+ draw() {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
+ ctx.fillStyle = this.color;
+ ctx.fill();
+ ctx.closePath();
+ }
+}
+
+function initBalls(n) {
+ for (let i = 0; i < n; i++) {
+ balls.push(new Ball(Math.random() * canvas.width, -10 + Math.random() * 5));
+ }
+}
+
+initBalls(20);
+
+canvas.addEventListener('mousedown', () => isDragging = true);
+canvas.addEventListener('mouseup', () => isDragging = false);
+canvas.addEventListener('mousemove', (e) => {
+ if (isDragging) gravity = e.clientY / canvas.height - 0.5;
+});
+
+setInterval(() => {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ for (let ball of balls) {
+ ball.update();
+ ball.draw();
+ }
+}, 30);
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/30046bdad881/qwen3-14b.html b/data/artifacts/30046bdad881/qwen3-14b.html
new file mode 100644
index 0000000..273d4a4
--- /dev/null
+++ b/data/artifacts/30046bdad881/qwen3-14b.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Bouncing Balls with Gravity</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ background: #000;
+ color: #fff;
+ font-family: sans-serif;
+ }
+ canvas {
+ display: block;
+ }
+ #controls {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ background: rgba(0, 0, 0, 0.5);
+ padding: 10px;
+ border-radius: 5px;
+ }
+ label {
+ display: block;
+ margin: 5px 0;
+ }
+ input[type="range"] {
+ width: 200px;
+ }
+ </style>
+</head>
+<body>
+ <div id="controls">
+ <label>Gravity: <span id="gravityValue">0.5</span></label>
+ <input type="range" id="gravitySlider" min="0.1" max="2" step="0.01" value="0.5">
+ </div>
+ <canvas id="canvas"></canvas>
+ <script>
+ const canvas = document.getElementById('canvas');
+ const ctx = canvas.getContext('2d');
+ const gravitySlider = document.getElementById('gravitySlider');
+ const gravityValue = document.getElementById('gravityValue');
+
+ let gravity = parseFloat(gravitySlider.value);
+ gravityValue.textContent = gravity.toFixed(2);
+
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ const balls = [];
+
+ class Ball {
+ constructor() {
+ this.x = Math.random() * canvas.width;
+ this.y = Math.random() * canvas.height;
+ this.radius = Math.random() * 15 + 5;
+ this.vx = (Math.random() - 0.5) * 4;
+ this.vy = (Math.random() - 0.5) * 4;
+ this.color = `hsl(${Math.random() * 360}, 70%, 60%)`;
+ this.trail = [];
+ }
+
+ update() {
+ this.vy += gravity;
+ this.x += this.vx;
+ this.y += this.vy;
+
+ // Bounce off walls
+ if (this.x - this.radius < 0 || this.x + this.radius > canvas.width) {
+ this.vx *= -1;
+ }
+ if (this.y - this.radius < 0) {
+ this.vy *= -1;
+ this.y = this.radius;
+ }
+ if (this.y + this.radius > canvas.height) {
+ this.vy *= -1;
+ this.y = canvas.height - this.radius;
+ }
+
+ // Add trail point
+ this.trail.push({ x: this.x, y: this.y });
+ if (this.trail.length > 30) this.trail.shift();
+ }
+
+ draw(ctx) {
+ // Draw trail
+ ctx.beginPath();
+ for (let i = 0; i < this.trail.length; i++) {
+ const point = this.trail[i];
+ ctx.lineTo(point.x, point.y);
+ }
+ ctx.strokeStyle = this.color + '44';
+ ctx.lineWidth = 2;
+ ctx.stroke();
+
+ // Draw ball
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+ ctx.fillStyle = this.color;
+ ctx.fill();
+ ctx.strokeStyle = '#000';
+ ctx.stroke();
+ }
+ }
+
+ for (let i = 0; i < 20; i++) {
+ balls.push(new Ball());
+ }
+
+ function animate() {
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ balls.forEach(ball => {
+ ball.update();
+ ball.draw(ctx);
+ });
+
+ requestAnimationFrame(animate);
+ }
+
+ gravitySlider.addEventListener('input', () => {
+ gravity = parseFloat(gravitySlider.value);
+ gravityValue.textContent = gravity.toFixed(2);
+ });
+
+ animate();
+
+ window.addEventListener('resize', () => {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ });
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/34f7125fa421/claude-code.html b/data/artifacts/34f7125fa421/claude-code.html
new file mode 100644
index 0000000..c68af27
--- /dev/null
+++ b/data/artifacts/34f7125fa421/claude-code.html
@@ -0,0 +1,393 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Dragon Realm</title>
+<style>
+ html,body{margin:0;height:100%;overflow:hidden;background:#0a0e1a;font-family:'Segoe UI',system-ui,sans-serif;}
+ #scene{display:block;width:100vw;height:100vh;cursor:crosshair;}
+ #hud{
+ position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
+ color:#e8ecff;background:rgba(12,16,32,.42);backdrop-filter:blur(8px);
+ border:1px solid rgba(160,190,255,.25);border-radius:40px;
+ padding:11px 22px;font-size:14px;letter-spacing:.4px;pointer-events:none;
+ box-shadow:0 6px 30px rgba(0,0,0,.4);user-select:none;
+ transition:opacity .8s;text-shadow:0 1px 4px rgba(0,0,0,.6);
+ }
+ #hud b{color:#ffb15c;font-weight:600;}
+ #title{
+ position:fixed;top:24px;left:50%;transform:translateX(-50%);
+ color:#dfe6ff;font-size:24px;font-weight:300;letter-spacing:6px;
+ text-transform:uppercase;pointer-events:none;user-select:none;
+ text-shadow:0 2px 20px rgba(120,150,255,.5);opacity:.85;
+ }
+</style>
+</head>
+<body>
+<canvas id="scene"></canvas>
+<div id="title">Dragon Realm</div>
+<div id="hud">Click anywhere to make the dragon <b>breathe fire</b> 🔥</div>
+<script>
+(()=>{
+const cv=document.getElementById('scene'),ctx=cv.getContext('2d'),hud=document.getElementById('hud');
+let W,H,DPR;
+function resize(){
+ DPR=Math.min(window.devicePixelRatio||1,2);
+ W=cv.width=innerWidth*DPR; H=cv.height=innerHeight*DPR;
+ cv.style.width=innerWidth+'px'; cv.style.height=innerHeight+'px';
+ ctx.setTransform(DPR,0,0,DPR,0,0);
+ vw=innerWidth; vh=innerHeight;
+ buildMountains(); buildStars();
+}
+let vw,vh;
+
+/* ---------- world state ---------- */
+let t=0; // time
+let firePower=0; // 0..1 breath intensity
+const fireParts=[], embers=[], snow=[];
+
+/* ---------- palettes (dynamic lighting: dusk->night cycle) ---------- */
+function lerp(a,b,p){return a+(b-a)*p;}
+function mix(c1,c2,p){return [lerp(c1[0],c2[0],p),lerp(c1[1],c2[1],p),lerp(c1[2],c2[2],p)];}
+function rgb(c,a){return 'rgba('+(c[0]|0)+','+(c[1]|0)+','+(c[2]|0)+','+(a==null?1:a)+')';}
+// sky keyframes top & bottom
+const skyTop=[[36,54,120],[20,26,66],[8,10,34],[26,20,60]];
+const skyBot=[[210,120,120],[110,70,120],[24,28,70],[150,90,120]];
+
+/* ---------- stars ---------- */
+let stars=[];
+function buildStars(){
+ stars=[];
+ for(let i=0;i<180;i++) stars.push({x:Math.random()*vw,y:Math.random()*vh*.7,r:Math.random()*1.3+.2,tw:Math.random()*6.28});
+}
+
+/* ---------- mountains (parallax layers) ---------- */
+let layers=[];
+function ridge(seed,base,amp,step){
+ const pts=[]; let x=-40,y=base;
+ let r=seed;
+ const rnd=()=>{r=(r*9301+49297)%233280;return r/233280;};
+ while(x<vw+60){ pts.push([x,y]); x+=step; y=base+(rnd()-.5)*amp; y=Math.max(base-amp,Math.min(base+amp*.4,y)); }
+ return pts;
+}
+function buildMountains(){
+ layers=[
+ {pts:ridge(11,vh*.62,70,60), col:[60,72,120], snow:.30},
+ {pts:ridge(37,vh*.72,95,80), col:[40,50,92], snow:.42},
+ {pts:ridge(91,vh*.84,120,110),col:[24,30,60], snow:.55},
+ ];
+}
+
+/* ---------- dragon ---------- */
+const dragon={x:0,y:0,dir:1,ang:0,px:0,py:0};
+function dragonPath(tt){
+ // figure-flight across the sky
+ const cx=vw*.5, cy=vh*.34;
+ const x=cx+Math.sin(tt*.35)*vw*.42;
+ const y=cy+Math.sin(tt*.7)*vh*.13+Math.cos(tt*.3)*vh*.05;
+ return {x,y};
+}
+
+/* ---------- input ---------- */
+let mouth={x:0,y:0};
+function breathe(){ firePower=1; if(hud){hud.style.opacity=.35;} }
+cv.addEventListener('pointerdown',breathe);
+window.addEventListener('resize',resize);
+
+/* ---------- snow ---------- */
+function spawnSnow(){
+ while(snow.length<220){
+ snow.push({x:Math.random()*vw,y:Math.random()*vh,r:Math.random()*2.6+.6,
+ sp:Math.random()*.5+.2,sw:Math.random()*.8+.2,ph:Math.random()*6.28});
+ }
+}
+
+/* ---------- fire ---------- */
+function emitFire(mx,my,dir,ang){
+ const n=Math.round(firePower*7);
+ for(let i=0;i<n;i++){
+ const spread=(Math.random()-.5)*.5;
+ const a=ang+spread;
+ const sp=(Math.random()*3.5+3.5)*(1+firePower);
+ fireParts.push({
+ x:mx,y:my,
+ vx:Math.cos(a)*sp*dir, vy:Math.sin(a)*sp,
+ life:1, decay:Math.random()*.02+.018,
+ r:Math.random()*7+5
+ });
+ }
+ if(Math.random()<firePower*.6){
+ embers.push({x:mx,y:my,vx:(Math.random()-.5)*2+dir*2,vy:-Math.random()*1.5-.5,life:1,r:Math.random()*1.8+.6});
+ }
+}
+
+/* ---------- draw dragon ---------- */
+function drawDragon(){
+ const p0=dragonPath(t), p1=dragonPath(t+0.02);
+ const dir=(p1.x-p0.x)>=0?1:-1;
+ const ang=Math.atan2(p1.y-p0.y,(p1.x-p0.x)||.001);
+ dragon.x=p0.x;dragon.y=p0.y;dragon.dir=dir;dragon.ang=ang;
+
+ ctx.save();
+ ctx.translate(p0.x,p0.y);
+ ctx.rotate(ang*.5);
+ ctx.scale(dir,1);
+ const s=Math.min(vw,vh)/720; // scale
+ ctx.scale(s,s);
+
+ const flap=Math.sin(t*7);
+ const bodyGrad=ctx.createLinearGradient(-90,-20,60,30);
+ bodyGrad.addColorStop(0,'#2a1840');
+ bodyGrad.addColorStop(.5,'#5b2a63');
+ bodyGrad.addColorStop(1,'#8a3b5a');
+
+ // ---- tail ----
+ ctx.beginPath();
+ ctx.moveTo(-30,4);
+ const tw=Math.sin(t*4)*18;
+ ctx.quadraticCurveTo(-90,10+tw*.4,-140,-6+tw);
+ ctx.quadraticCurveTo(-100,16,-30,16);
+ ctx.closePath();
+ ctx.fillStyle=bodyGrad; ctx.fill();
+ // tail fin
+ ctx.beginPath();
+ ctx.moveTo(-140,-6+tw);
+ ctx.lineTo(-165,-22+tw); ctx.lineTo(-150,2+tw); ctx.lineTo(-168,10+tw);
+ ctx.closePath(); ctx.fillStyle='#c0507a'; ctx.fill();
+
+ // ---- far wing ----
+ drawWing(flap*-1,0.55,'#3a2150');
+ // ---- body ----
+ ctx.beginPath();
+ ctx.moveTo(-34,-6);
+ ctx.quadraticCurveTo(0,-30,44,-14);
+ ctx.quadraticCurveTo(66,-6,60,10);
+ ctx.quadraticCurveTo(20,26,-30,18);
+ ctx.closePath();
+ ctx.fillStyle=bodyGrad; ctx.fill();
+ // belly ridge
+ ctx.beginPath();
+ ctx.moveTo(-28,14); ctx.quadraticCurveTo(15,24,52,10);
+ ctx.strokeStyle='rgba(255,190,150,.35)';ctx.lineWidth=3;ctx.stroke();
+ // spine spikes
+ ctx.fillStyle='#d1618c';
+ for(let i=0;i<6;i++){const sx=-30+i*15;const sy=-8-Math.sin(t*5+i)* .5-i*.2;
+ ctx.beginPath();ctx.moveTo(sx,sy-6);ctx.lineTo(sx+6,sy-16);ctx.lineTo(sx+12,sy-6);ctx.closePath();ctx.fill();}
+
+ // ---- neck & head ----
+ ctx.beginPath();
+ ctx.moveTo(44,-12);
+ ctx.quadraticCurveTo(74,-24,92,-30);
+ ctx.quadraticCurveTo(104,-32,110,-24);
+ ctx.quadraticCurveTo(96,-14,80,-10);
+ ctx.quadraticCurveTo(62,-4,50,4);
+ ctx.closePath();
+ ctx.fillStyle=bodyGrad;ctx.fill();
+ // head
+ ctx.beginPath();
+ ctx.moveTo(98,-30);
+ ctx.quadraticCurveTo(126,-34,132,-22); // snout top
+ ctx.lineTo(126,-14); // jaw
+ ctx.quadraticCurveTo(112,-12,100,-18);
+ ctx.closePath();
+ ctx.fillStyle='#6d3168';ctx.fill();
+ // horns
+ ctx.strokeStyle='#e5c7a0';ctx.lineWidth=3;ctx.lineCap='round';
+ ctx.beginPath();ctx.moveTo(104,-30);ctx.quadraticCurveTo(108,-46,120,-48);ctx.stroke();
+ ctx.beginPath();ctx.moveTo(110,-30);ctx.quadraticCurveTo(116,-42,128,-42);ctx.stroke();
+ // eye
+ ctx.fillStyle=firePower>.05?'#fff2b0':'#ffd24a';
+ ctx.beginPath();ctx.arc(114,-24,2.6,0,6.28);ctx.fill();
+ ctx.fillStyle='#241021';ctx.beginPath();ctx.arc(114.6,-24,1.1,0,6.28);ctx.fill();
+
+ // mouth position (world coords) for fire
+ const mlx=132,mly=-19;
+ const m=applyTransform(mlx,mly);
+ mouth.x=m.x;mouth.y=m.y;
+
+ // ---- near wing ----
+ drawWing(flap,1,'#5a2c66');
+
+ ctx.restore();
+
+ // glow from dragon during fire
+ if(firePower>.05){
+ const g=ctx.createRadialGradient(mouth.x,mouth.y,0,mouth.x,mouth.y,180*firePower);
+ g.addColorStop(0,rgb([255,180,90],.22*firePower));
+ g.addColorStop(1,rgb([255,120,40],0));
+ ctx.fillStyle=g;ctx.fillRect(mouth.x-200,mouth.y-200,400,400);
+ }
+}
+function drawWing(flap,front,col){
+ const lift=flap*40, curl=flap*22;
+ ctx.save();
+ ctx.translate(-6,-8);
+ const g=ctx.createLinearGradient(0,0,-30,-60-lift);
+ g.addColorStop(0,col);
+ g.addColorStop(1,front>.8?'#8f4a7a':'#3a2150');
+ ctx.beginPath();
+ ctx.moveTo(0,0);
+ ctx.quadraticCurveTo(-40,-30-lift,-70,-60-lift-curl); // leading edge
+ ctx.quadraticCurveTo(-40,-40-lift*.5,-20,-30); // finger 1
+ ctx.quadraticCurveTo(-45,-24-lift*.4,-58,-18-lift*.3);
+ ctx.quadraticCurveTo(-30,-14-lift*.2,-16,-14);
+ ctx.quadraticCurveTo(-40,-6-lift*.15,-46,2-lift*.1);
+ ctx.quadraticCurveTo(-24,0,0,6);
+ ctx.closePath();
+ ctx.fillStyle=g;ctx.globalAlpha=front>.8?1:.7;ctx.fill();
+ ctx.globalAlpha=1;
+ // membrane ribs
+ ctx.strokeStyle='rgba(0,0,0,.18)';ctx.lineWidth=1.5;
+ [[-20,-30],[-58,-18],[-46,2]].forEach(p=>{
+ ctx.beginPath();ctx.moveTo(0,0);
+ ctx.quadraticCurveTo(-30,-20-lift*.5,p[0],p[1]);ctx.stroke();
+ });
+ ctx.restore();
+}
+// map local dragon coords to world (accounts for current transform)
+function applyTransform(lx,ly){
+ const s=Math.min(vw,vh)/720;
+ // reverse-order of transforms applied in drawDragon
+ let x=lx*dragon.dir*s, y=ly*s; // scale + flip
+ const a=dragon.ang*.5, ca=Math.cos(a),sa=Math.sin(a);
+ const rx=x*ca-y*sa, ry=x*sa+y*ca;
+ return {x:dragon.x+rx,y:dragon.y+ry};
+}
+
+/* ---------- main render ---------- */
+function frame(){
+ t+=1/60;
+ const cyc=(Math.sin(t*.05)+1)/2*3; // 0..3 across keyframes
+ const i=Math.floor(cyc)%4, np=(i+1)%4, fp=cyc-Math.floor(cyc);
+ const top=mix(skyTop[i],skyTop[np],fp);
+ const bot=mix(skyBot[i],skyBot[np],fp);
+ const night=(top[0]<20)?1:Math.max(0,1-(top[0]-10)/30);
+
+ // sky
+ const sg=ctx.createLinearGradient(0,0,0,vh);
+ sg.addColorStop(0,rgb(top)); sg.addColorStop(1,rgb(bot));
+ ctx.fillStyle=sg;ctx.fillRect(0,0,vw,vh);
+
+ // stars
+ ctx.save();
+ for(const s of stars){
+ const a=(.4+.6*Math.abs(Math.sin(t*2+s.tw)))*night;
+ if(a<=0)continue;
+ ctx.fillStyle=rgb([255,255,240],a*.9);
+ ctx.beginPath();ctx.arc(s.x,s.y,s.r,0,6.28);ctx.fill();
+ }
+ ctx.restore();
+
+ // moon / sun
+ const moonY=vh*.22+Math.sin(t*.05)*vh*.1;
+ const moonX=vw*.72;
+ const isMoon=night>.4;
+ const mc=isMoon?[235,240,255]:[255,214,150];
+ const gm=ctx.createRadialGradient(moonX,moonY,4,moonX,moonY,90);
+ gm.addColorStop(0,rgb(mc,.6));gm.addColorStop(1,rgb(mc,0));
+ ctx.fillStyle=gm;ctx.beginPath();ctx.arc(moonX,moonY,90,0,6.28);ctx.fill();
+ ctx.fillStyle=rgb(mc,.95);ctx.beginPath();ctx.arc(moonX,moonY,26,0,6.28);ctx.fill();
+ if(isMoon){ctx.fillStyle=rgb(mix(mc,top,.5),.5);
+ ctx.beginPath();ctx.arc(moonX+8,moonY-6,6,0,6.28);ctx.arc(moonX-6,moonY+8,4,0,6.28);ctx.fill();}
+
+ // aurora at night
+ if(night>.35){
+ ctx.save();ctx.globalCompositeOperation='screen';
+ for(let k=0;k<3;k++){
+ const ag=ctx.createLinearGradient(0,vh*.1,0,vh*.5);
+ const col=[[80,255,180],[120,140,255],[200,120,255]][k];
+ ag.addColorStop(0,rgb(col,0));
+ ag.addColorStop(.5,rgb(col,.12*night));
+ ag.addColorStop(1,rgb(col,0));
+ ctx.fillStyle=ag;
+ ctx.beginPath();ctx.moveTo(0,vh);
+ for(let x=0;x<=vw;x+=20){
+ const y=vh*.16+Math.sin(x*.006+t*.4+k)*40+Math.sin(x*.013+t*.2)*24+k*22;
+ ctx.lineTo(x,y);
+ }
+ ctx.lineTo(vw,vh*.5);ctx.lineTo(0,vh*.5);ctx.closePath();ctx.fill();
+ }
+ ctx.restore();
+ }
+
+ // mountains parallax
+ for(let li=0;li<layers.length;li++){
+ const L=layers[li];
+ const shade=lerp(.45,1,li/(layers.length-1));
+ const c=mix(L.col,[10,12,28],night*.4);
+ ctx.beginPath();
+ const off=Math.sin(t*.02)*(6-li*2);
+ ctx.moveTo(-40,vh);
+ for(const p of L.pts) ctx.lineTo(p[0]+off,p[1]);
+ ctx.lineTo(vw+60,vh);ctx.closePath();
+ ctx.fillStyle=rgb(c);ctx.fill();
+ // snow caps
+ ctx.save();ctx.clip();
+ for(let j=0;j<L.pts.length-1;j++){
+ const a=L.pts[j],b=L.pts[j+1];
+ ctx.beginPath();ctx.moveTo(a[0]+off,a[1]);ctx.lineTo(b[0]+off,b[1]);
+ ctx.lineTo(b[0]+off,b[1]+18*L.snow);ctx.lineTo(a[0]+off,a[1]+18*L.snow);ctx.closePath();
+ ctx.fillStyle=rgb(mix([240,246,255],[150,170,210],night*.3),.55*shade);ctx.fill();
+ }
+ ctx.restore();
+ }
+
+ // ---- fire (behind dragon body slightly, draw before for depth then dragon after? draw dragon first, fire from mouth on top) ----
+ drawDragon();
+
+ // update + emit fire
+ if(firePower>0){
+ emitFire(mouth.x,mouth.y,dragon.dir,dragon.ang*.5);
+ firePower=Math.max(0,firePower-.012);
+ }
+ ctx.save();ctx.globalCompositeOperation='lighter';
+ for(let i=fireParts.length-1;i>=0;i--){
+ const p=fireParts[i];
+ p.x+=p.vx;p.y+=p.vy;p.vy-=.06;p.vx*=.99;p.life-=p.decay;p.r*=.99;
+ if(p.life<=0){fireParts.splice(i,1);continue;}
+ const l=p.life;
+ const col=l>.6?[255,240,180]:l>.3?[255,150,50]:[200,60,30];
+ const g=ctx.createRadialGradient(p.x,p.y,0,p.x,p.y,p.r);
+ g.addColorStop(0,rgb(col,l*.9));
+ g.addColorStop(1,rgb(col,0));
+ ctx.fillStyle=g;ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,6.28);ctx.fill();
+ }
+ for(let i=embers.length-1;i>=0;i--){
+ const e=embers[i];e.x+=e.vx;e.y+=e.vy;e.vy+=.03;e.life-=.015;
+ if(e.life<=0){embers.splice(i,1);continue;}
+ ctx.fillStyle=rgb([255,180,80],e.life);
+ ctx.beginPath();ctx.arc(e.x,e.y,e.r,0,6.28);ctx.fill();
+ }
+ ctx.restore();
+
+ // fire flash lighting on whole scene
+ if(fireParts.length>0){
+ ctx.fillStyle=rgb([255,120,40],Math.min(.10,fireParts.length*.0016));
+ ctx.fillRect(0,0,vw,vh);
+ }
+
+ // snow foreground
+ spawnSnow();
+ ctx.fillStyle='rgba(255,255,255,.85)';
+ for(const s of snow){
+ s.y+=s.sp+ .3; s.x+=Math.sin(t*s.sw+s.ph)*.5;
+ if(s.y>vh){s.y=-4;s.x=Math.random()*vw;}
+ ctx.globalAlpha=.5+ s.r/4;
+ ctx.beginPath();ctx.arc(s.x,s.y,s.r,0,6.28);ctx.fill();
+ }
+ ctx.globalAlpha=1;
+
+ // vignette
+ const vg=ctx.createRadialGradient(vw/2,vh/2,vh*.35,vw/2,vh/2,vh*.85);
+ vg.addColorStop(0,'rgba(0,0,0,0)');vg.addColorStop(1,'rgba(0,0,0,.45)');
+ ctx.fillStyle=vg;ctx.fillRect(0,0,vw,vh);
+
+ requestAnimationFrame(frame);
+}
+resize();
+requestAnimationFrame(frame);
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/34f7125fa421/qwen25-7b.html b/data/artifacts/34f7125fa421/qwen25-7b.html
new file mode 100644
index 0000000..d0b062f
--- /dev/null
+++ b/data/artifacts/34f7125fa421/qwen25-7b.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Dragon Realm</title>
+ <style>
+ body { margin: 0; overflow: hidden; }
+ canvas { display: block; background: #000; }
+ .interactive { position: absolute; z-index: 2; cursor: pointer; }
+ </style>
+</head>
+<body>
+<canvas id="dragonCanvas"></canvas>
+<div class="interactive" onclick="breathFire()">Click to make the dragon breathe fire</div>
+
+<script>
+const canvas = document.getElementById('dragonCanvas');
+const ctx = canvas.getContext('2d');
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+const dragon = {
+ x: 100,
+ y: 300,
+ size: 50,
+ angle: 0,
+ speed: 1
+};
+
+const mountains = [
+ {x: -50, y: canvas.height * 0.6},
+ {x: 200, y: canvas.height * 0.4}
+];
+
+function drawDragon() {
+ ctx.save();
+ ctx.translate(dragon.x + dragon.size / 2, dragon.y);
+ ctx.rotate(dragon.angle);
+
+ const head = dragon.size * 1.5;
+ const bodyLength = dragon.size * 3;
+
+ ctx.beginPath();
+ ctx.moveTo(0, 0);
+ ctx.lineTo(-head, -dragon.size / 2);
+ ctx.lineTo(bodyLength, -dragon.size / 2);
+ ctx.lineTo(head, -dragon.size / 4);
+ ctx.closePath();
+ ctx.fillStyle = 'orange';
+ ctx.fill();
+
+ ctx.restore();
+}
+
+function drawMountains() {
+ for (const mountain of mountains) {
+ ctx.beginPath();
+ ctx.moveTo(mountain.x, canvas.height - mountain.y);
+ ctx.lineTo(mountain.x + 100, canvas.height - mountain.y * 0.5);
+ ctx.lineTo(mountain.x + 200, canvas.height - mountain.y);
+ ctx.closePath();
+ ctx.fillStyle = 'grey';
+ ctx.fill();
+ }
+}
+
+function drawSnow() {
+ for (let x = 0; x < canvas.width; x += 10) {
+ const y = Math.random() * canvas.height;
+ ctx.beginPath();
+ ctx.arc(x, y, 3, 0, Math.PI * 2);
+ ctx.fillStyle = 'white';
+ ctx.fill();
+ }
+}
+
+function breathFire() {
+ for (let i = 0; i < 10; i++) {
+ const x = dragon.x + dragon.size;
+ const y = dragon.y - dragon.size / 4;
+ let fire = {x, y};
+ animateFire(fire);
+ }
+}
+
+function animateFire(fire) {
+ requestAnimationFrame(() => {
+ ctx.beginPath();
+ ctx.arc(fire.x, fire.y, Math.random() * 10 + 5, 0, Math.PI * 2);
+ ctx.fillStyle = 'red';
+ ctx.fill();
+ fire.x += Math.random() * 3 - 1;
+ if (fire.x > canvas.width) {
+ animateFire({x: dragon.x + dragon.size, y: dragon.y - dragon.size / 4});
+ }
+ });
+}
+
+function updateAndDraw() {
+ drawDragon();
+ drawMountains();
+ drawSnow();
+
+ dragon.angle += dragon.speed * Math.PI / 180;
+ dragon.x += dragon.speed;
+
+ if (dragon.x > canvas.width) {
+ dragon.x = -canvas.width;
+ }
+
+ requestAnimationFrame(updateAndDraw);
+}
+
+updateAndDraw();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/34f7125fa421/qwen3-14b.html b/data/artifacts/34f7125fa421/qwen3-14b.html
new file mode 100644
index 0000000..eb14761
--- /dev/null
+++ b/data/artifacts/34f7125fa421/qwen3-14b.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Dragon Realm</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: #000;
+ height: 100%;
+ width: 100%;
+ }
+ canvas {
+ display: block;
+ }
+ </style>
+</head>
+<body>
+<canvas id="scene"></canvas>
+<script>
+ const canvas = document.getElementById('scene');
+ const ctx = canvas.getContext('2d');
+ let width = canvas.width = window.innerWidth;
+ let height = canvas.height = window.innerHeight;
+
+ window.addEventListener('resize', () => {
+ width = canvas.width = window.innerWidth;
+ height = canvas.height = window.innerHeight;
+ });
+
+ const mountains = [];
+ const snowflakes = [];
+ const dragon = {
+ x: 200,
+ y: 300,
+ width: 150,
+ height: 100,
+ angle: 0,
+ speed: 0.01,
+ flame: false,
+ flameX: 0,
+ flameY: 0,
+ flameLength: 0,
+ flameAngle: Math.PI,
+ };
+
+ class Snowflake {
+ constructor() {
+ this.x = Math.random() * width;
+ this.y = Math.random() * height;
+ this.size = Math.random() * 2 + 1;
+ this.speed = Math.random() * 1 + 0.5;
+ this.angle = Math.random() * Math.PI * 2;
+ }
+ update() {
+ this.y += this.speed;
+ this.x += Math.cos(this.angle) * 0.5;
+ this.angle += Math.random() * 0.1 - 0.05;
+ if (this.y > height) {
+ this.y = -this.size;
+ this.x = Math.random() * width;
+ }
+ }
+ draw(ctx) {
+ ctx.fillStyle = 'white';
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+ ctx.fill();
+ }
+ }
+
+ class Mountain {
+ constructor(x, y, width, height, color) {
+ this.x = x;
+ this.y = y;
+ this.width = width;
+ this.height = height;
+ this.color = color;
+ this.shadowX = x + width / 2;
+ this.shadowY = y + height;
+ this.shadowRadius = 10 + Math.random() * 20;
+ }
+ draw(ctx) {
+ ctx.save();
+ ctx.beginPath();
+ ctx.moveTo(this.x, this.y);
+ ctx.lineTo(this.x + this.width, this.y);
+ ctx.lineTo(this.x + this.width / 2, this.y - this.height);
+ ctx.closePath();
+ ctx.fillStyle = this.color;
+ ctx.fill();
+ ctx.restore();
+ }
+ }
+
+ for (let i = 0; i < 200; i++) {
+ snowflakes.push(new Snowflake());
+ }
+
+ for (let i = 0; i < 5; i++) {
+ const x = Math.random() * (width - 200) + 100;
+ const y = height - 100;
+ const width = Math.random() * 150 + 100;
+ const height = Math.random() * 150 + 100;
+ const color = `rgba(100, 100, 255, ${Math.random() * 0.5 + 0.3})`;
+ mountains.push(new Mountain(x, y, width, height, color));
+ }
+
+ function drawDragon(x, y, angle, width, height) {
+ ctx.save();
+ ctx.translate(x, y);
+ ctx.rotate(angle);
+ ctx.fillStyle = 'goldenrod';
+ ctx.beginPath();
+ ctx.moveTo(0, -height / 2);
+ ctx.lineTo(-width / 2, height / 2);
+ ctx.lineTo(width / 2, height / 2);
+ ctx.closePath();
+ ctx.fill();
+ ctx.fillStyle = 'brown';
+ ctx.beginPath();
+ ctx.moveTo(-width / 4, -height / 2);
+ ctx.lineTo(-width / 2, height / 2);
+ ctx.lineTo(-width / 2, height / 2 + 20);
+ ctx.lineTo(-width / 4, height / 2 + 20);
+ ctx.lineTo(-width / 4, -height / 2);
+ ctx.closePath();
+ ctx.fill();
+ ctx.fillStyle = 'black';
+ ctx.beginPath();
+ ctx.arc(-width / 4, -height / 2 + 10, 5, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.beginPath();
+ ctx.arc(width / 4, -height / 2 + 10, 5, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.restore();
+ }
+
+ function drawFlame(x, y, length, angle) {
+ ctx.save();
+ ctx.translate(x, y);
+ ctx.rotate(angle);
+ ctx.strokeStyle = 'red';
+ ctx.lineWidth = 3;
+ ctx.beginPath();
+ ctx.moveTo(0, 0);
+ ctx.lineTo(0, length);
+ ctx.stroke();
+ ctx.restore();
+ }
+
+ function animate() {
+ ctx.clearRect(0, 0, width, height);
+
+ // Draw background
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+ ctx.fillRect(0, 0, width, height);
+
+ // Draw snowflakes
+ for (let flake of snowflakes) {
+ flake.update();
+ flake.draw(ctx);
+ }
+
+ // Draw mountains
+ for (let mountain of mountains) {
+ mountain.draw(ctx);
+ }
+
+ // Draw dragon
+ drawDragon(dragon.x, dragon.y, dragon.angle, dragon.width, dragon.height);
+
+ // Draw flame if active
+ if (dragon.flame) {
+ drawFlame(dragon.x + dragon.width / 2, dragon.y - dragon.height / 2, dragon.flameLength, dragon.flameAngle);
+ }
+
+ // Animation loop
+ dragon.angle += dragon.speed;
+ dragon.x += Math.cos(dragon.angle) * 2;
+ dragon.y += Math.sin(dragon.angle) * 2;
+
+ if (dragon.x > width + 100) {
+ dragon.x = -100;
+ dragon.y = height / 2;
+ }
+
+ requestAnimationFrame(animate);
+ }
+
+ canvas.addEventListener('click', (e) => {
+ const rect = canvas.getBoundingClientRect();
+ const mouseX = e.clientX - rect.left;
+ const mouseY = e.clientY - rect.top;
+
+ const dx = mouseX - (dragon.x + dragon.width / 2);
+ const dy = mouseY - (dragon.y - dragon.height / 2);
+ const dist = Math.sqrt(dx * dx + dy * dy);
+
+ if (dist < 50) {
+ dragon.flame = true;
+ dragon.flameX = mouseX;
+ dragon.flameY = mouseY;
+ dragon.flameLength = 0;
+ dragon.flameAngle = Math.atan2(mouseY - dragon.y, mouseX - dragon.x);
+ setTimeout(() => {
+ dragon.flame = false;
+ }, 500);
+ }
+ });
+
+ animate();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/3de3332d5d26/qwen25-7b.html b/data/artifacts/3de3332d5d26/qwen25-7b.html
new file mode 100644
index 0000000..cc38d57
--- /dev/null
+++ b/data/artifacts/3de3332d5d26/qwen25-7b.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Luxury Wallpaper</title>
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Times New Roman', serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background: linear-gradient(45deg, #f9a; #ff7);
+ }
+ .container {
+ text-align: center;
+ max-width: 800px;
+ width: 100%;
+ }
+ h1 {
+ font-size: 3rem;
+ color: white;
+ }
+ p.price {
+ font-size: 2.5rem;
+ color: #ffcc66;
+ }
+ button.add-to-cart {
+ background-color: #d94c38;
+ border: none;
+ color: white;
+ padding: 10px 20px;
+ font-size: 1.2rem;
+ margin-top: 20px;
+ }
+ table.specs {
+ width: 100%;
+ margin-top: 20px;
+ border-collapse: collapse;
+ }
+ table.specs th, table.specs td {
+ padding: 8px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h1>Luxury Velvet Wallpaper</h1>
+ <p class="price">$499.00 per roll</p>
+ <button class="add-to-cart">Add to Cart</button>
+ <table class="specs">
+ <tr>
+ <th>Color:</th>
+ <td>Silver Iris</td>
+ </tr>
+ <tr>
+ <th>Material:</th>
+ <td>Velvet Texture</td>
+ </tr>
+ <tr>
+ <th>Breathable:</th>
+ <td>Yes</td>
+ </tr>
+ <tr>
+ <th>Width:</th>
+ <td>53 inches (135 cm)</td>
+ </tr>
+ <tr>
+ <th>Roll Length:</th>
+ <td>20.5 feet (6.25 m)</td>
+ </tr>
+ </table>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/3de3332d5d26/qwen3-14b.html b/data/artifacts/3de3332d5d26/qwen3-14b.html
new file mode 100644
index 0000000..0f86c55
--- /dev/null
+++ b/data/artifacts/3de3332d5d26/qwen3-14b.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Luxury Wallpaper Collection</title>
+ <style>
+ :root {
+ --primary-color: #2c1e2b;
+ --secondary-color: #4a3f4e;
+ --accent-color: #e9d8b1;
+ --text-color: #ffffff;
+ --gradient-start: #1e111d;
+ --gradient-end: #3c2a3a;
+ --font-serif: 'Georgia', 'Times New Roman', serif;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: var(--font-serif);
+ background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+ color: var(--text-color);
+ line-height: 1.6;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ }
+
+ header {
+ padding: 40px 20px;
+ text-align: center;
+ background: rgba(0, 0, 0, 0.2);
+ }
+
+ header h1 {
+ font-size: 3rem;
+ font-weight: 400;
+ letter-spacing: 1px;
+ }
+
+ .hero {
+ background: linear-gradient(135deg, #4a3f4e, #2c1e2b);
+ color: #fff;
+ padding: 80px 20px;
+ text-align: center;
+ position: relative;
+ z-index: 1;
+ }
+
+ .hero h2 {
+ font-size: 2.5rem;
+ margin-bottom: 20px;
+ }
+
+ .hero p {
+ font-size: 1.2rem;
+ margin-bottom: 40px;
+ }
+
+ .price {
+ font-size: 2rem;
+ color: var(--accent-color);
+ margin-bottom: 20px;
+ }
+
+ .add-to-cart {
+ display: inline-block;
+ padding: 15px 30px;
+ background-color: var(--accent-color);
+ color: var(--primary-color);
+ font-weight: bold;
+ text-decoration: none;
+ border-radius: 5px;
+ transition: background-color 0.3s ease;
+ }
+
+ .add-to-cart:hover {
+ background-color: #d8cfc1;
+ }
+
+ .spec-table {
+ max-width: 800px;
+ margin: 40px auto;
+ border-collapse: collapse;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ color: #fff;
+ }
+
+ .spec-table th,
+ .spec-table td {
+ padding: 15px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .spec-table th {
+ background-color: var(--secondary-color);
+ text-align: left;
+ }
+
+ .spec-table td {
+ text-align: left;
+ }
+
+ footer {
+ padding: 20px;
+ text-align: center;
+ background: rgba(0, 0, 0, 0.2);
+ font-size: 0.9rem;
+ color: #aaa;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>Luxury Wallpaper Collection</h1>
+ </header>
+
+ <div class="hero">
+ <h2>Elegant Textured Silk</h2>
+ <p>Handcrafted from the finest materials, this wallpaper brings a touch of sophistication to any interior space.</p>
+ <div class="price">$299.00 per roll</div>
+ <a href="#" class="add-to-cart">Add to Cart</a>
+ </div>
+
+ <table class="spec-table">
+ <thead>
+ <tr>
+ <th>Specification</th>
+ <th>Details</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Material</td>
+ <td>100% natural silk with a matte finish</td>
+ </tr>
+ <tr>
+ <td>Width</td>
+ <td>108 cm (42.5 inches)</td>
+ </tr>
+ <tr>
+ <td>Height</td>
+ <td>15 meters (49.2 feet) per roll</td>
+ </tr>
+ <tr>
+ <td>Pattern Repeat</td>
+ <td>Continuous</td>
+ </tr>
+ <tr>
+ <td>Recommended Use</td>
+ <td>Living rooms, bedrooms, and high-end interiors</td>
+ </tr>
+ <tr>
+ <td>Care Instructions</td>
+ <td>Wipe clean with a soft, damp cloth</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <footer>
+ © 2025 Luxury Interior Designs. All rights reserved.
+ </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/421f1da96a97/qwen25-7b.html b/data/artifacts/421f1da96a97/qwen25-7b.html
new file mode 100644
index 0000000..1211446
--- /dev/null
+++ b/data/artifacts/421f1da96a97/qwen25-7b.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Interactive Fireworks</title>
+ <style>
+ body {
+ margin: 0;
+ overflow: hidden;
+ background-color: #000;
+ }
+ canvas {
+ display: block;
+ }
+ </style>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+<script>
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+class Rocket {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ this.angle = Math.random() * 2 * Math.PI;
+ this.speed = (Math.random() + 0.5) * 10;
+ this.trailLength = 30;
+ this.trail = [];
+ }
+
+ drawRockettrail() {
+ ctx.save();
+ ctx.strokeStyle = `hsl(${(this.angle * 60 / Math.PI) % 360}, 100%, 50%)`;
+ ctx.lineWidth = 2;
+
+ for (let i = this.trail.length - 1; i >= 0; --i) {
+ const [x, y] = this.trail[i];
+ ctx.beginPath();
+ ctx.moveTo(x, y);
+ if (i > 0)
+ ctx.lineTo(...this.trail[i - 1]);
+ ctx.stroke();
+ }
+ ctx.restore();
+ }
+
+ launchRocket() {
+ let { x, y } = this;
+ for (let i = 0; i < this.trailLength; ++i) {
+ const dx = Math.cos(this.angle);
+ const dy = Math.sin(this.angle);
+ x += dx * this.speed;
+ y += dy * this.speed - 15;
+ if (Math.random() > 0.98)
+ this.trail.push([x, y]);
+ }
+ }
+
+ updateRocket() {
+ ctx.fillStyle = `hsl(${(this.angle * 60 / Math.PI) % 360}, 100%, 50%)`;
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, 2, 0, 2 * Math.PI);
+ ctx.fill();
+
+ if (this.trail.length > 0) {
+ this.drawRockettrail();
+ for (let i = 0; i < this.trail.length - 1; ++i)
+ this.trail[i][1] += 5;
+ if (this.trail[this.trail.length - 1][1] >= canvas.height * 2)
+ this.trail.pop();
+ }
+ }
+}
+
+const rockets = [];
+let autoShowMode = false;
+
+function launchRocket() {
+ const rocket = new Rocket(canvas.width / 2, canvas.height);
+ rockets.push(rocket);
+ rocket.launchRocket();
+}
+
+function updateFrame() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ for (const r of rockets) {
+ r.updateRocket();
+ }
+ if (!autoShowMode && Math.random() < 0.1)
+ launchRocket();
+
+ requestAnimationFrame(updateFrame);
+}
+
+document.addEventListener('click', () => {
+ autoShowMode = false;
+ launchRocket();
+});
+
+document.addEventListener('keydown', (e) => {
+ if (e.key === 'a' || e.key === 'A') {
+ autoShowMode = !autoShowMode;
+ console.log(`Auto Show Mode: ${autoShowMode}`);
+ }
+});
+
+updateFrame();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/421f1da96a97/qwen3-14b.html b/data/artifacts/421f1da96a97/qwen3-14b.html
new file mode 100644
index 0000000..308ef25
--- /dev/null
+++ b/data/artifacts/421f1da96a97/qwen3-14b.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Interactive Fireworks</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: #000;
+ height: 100%;
+ width: 100%;
+ }
+ canvas {
+ display: block;
+ }
+ </style>
+</head>
+<body>
+<canvas id="fireworks"></canvas>
+<script>
+ const canvas = document.getElementById("fireworks");
+ const ctx = canvas.getContext("2d");
+ let width = canvas.width = window.innerWidth;
+ let height = canvas.height = window.innerHeight;
+
+ window.addEventListener("resize", () => {
+ width = canvas.width = window.innerWidth;
+ height = canvas.height = window.innerHeight;
+ });
+
+ const rockets = [];
+ const particles = [];
+
+ class Rocket {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ this.angle = Math.random() * Math.PI * 2;
+ this.speed = 5 + Math.random() * 5;
+ this.life = 100;
+ }
+
+ update() {
+ this.x += Math.cos(this.angle) * this.speed;
+ this.y += Math.sin(this.angle) * this.speed;
+ this.life--;
+ }
+
+ draw() {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, 4, 0, Math.PI * 2);
+ ctx.fillStyle = "white";
+ ctx.fill();
+ }
+ }
+
+ class Particle {
+ constructor(x, y, color) {
+ this.x = x;
+ this.y = y;
+ this.vx = (Math.random() - 0.5) * 5;
+ this.vy = (Math.random() - 0.5) * 5 - 5;
+ this.radius = 2 + Math.random() * 3;
+ this.life = 100;
+ this.color = color;
+ this.alpha = 1;
+ }
+
+ update() {
+ this.vy += 0.1; // gravity
+ this.x += this.vx;
+ this.y += this.vy;
+ this.life--;
+ this.alpha = this.life / 100;
+ }
+
+ draw() {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+ ctx.fillStyle = this.color;
+ ctx.globalAlpha = this.alpha;
+ ctx.fill();
+ ctx.globalAlpha = 1;
+ }
+ }
+
+ function createRockets(x, y) {
+ for (let i = 0; i < 5; i++) {
+ rockets.push(new Rocket(x, y));
+ }
+ }
+
+ function createParticles(x, y) {
+ const color = `hsl(${Math.random() * 360}, 100%, 60%)`;
+ for (let i = 0; i < 20; i++) {
+ particles.push(new Particle(x, y, color));
+ }
+ }
+
+ function animate() {
+ ctx.clearRect(0, 0, width, height);
+
+ // Draw and update rockets
+ for (let i = rockets.length - 1; i >= 0; i--) {
+ rockets[i].update();
+ rockets[i].draw();
+ if (rockets[i].life <= 0) {
+ rockets.splice(i, 1);
+ createParticles(rockets[i].x, rockets[i].y);
+ }
+ }
+
+ // Draw and update particles
+ for (let i = particles.length - 1; i >= 0; i--) {
+ particles[i].update();
+ particles[i].draw();
+ if (particles[i].life <= 0) {
+ particles.splice(i, 1);
+ }
+ }
+
+ requestAnimationFrame(animate);
+ }
+
+ canvas.addEventListener("click", (e) => {
+ createRockets(e.clientX, e.clientY);
+ });
+
+ // Auto-show mode
+ let autoShowInterval = setInterval(() => {
+ const x = Math.random() * width;
+ const y = Math.random() * height;
+ createRockets(x, y);
+ }, 1000);
+
+ animate();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/4a268e78cf14/qwen25-7b.html b/data/artifacts/4a268e78cf14/qwen25-7b.html
new file mode 100644
index 0000000..5ce4b01
--- /dev/null
+++ b/data/artifacts/4a268e78cf14/qwen25-7b.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Luxury Wallpaper</title>
+ <style>
+ body {
+ font-family: 'Times New Roman', Times, serif;
+ background-color: #f5f5f5;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ }
+ .container {
+ background: linear-gradient(135deg, #ffffff, #f5f5f5);
+ border-radius: 20px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ width: 80%;
+ max-width: 900px;
+ }
+ .hero {
+ background-image: url('https://via.placeholder.com/1500x400');
+ height: 400px;
+ background-size: cover;
+ position: relative;
+ }
+ .content {
+ padding: 30px;
+ }
+ h1, p, span {
+ color: #333;
+ }
+ h1 {
+ font-size: 2.5em;
+ margin-bottom: 20px;
+ }
+ p {
+ font-size: 1.2em;
+ line-height: 1.6;
+ margin-bottom: 20px;
+ }
+ .price {
+ font-size: 1.8em;
+ color: #e53935;
+ display: inline-block;
+ padding: 10px 20px;
+ border-radius: 10px;
+ background-color: #ffffff;
+ margin-bottom: 20px;
+ }
+ .add-to-cart {
+ font-size: 1em;
+ color: #333;
+ display: inline-block;
+ padding: 10px 20px;
+ border-radius: 10px;
+ background-color: #e53935;
+ text-decoration: none;
+ margin-bottom: 20px;
+ }
+ .spec-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 40px;
+ }
+ .spec-table th, .spec-table td {
+ padding: 15px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ .spec-table th {
+ background-color: #e53935;
+ color: white;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="hero"></div>
+ <div class="content">
+ <h1>Luxury Velvet Wallpaper</h1>
+ <p>A premium luxury wallpaper for high-end interior design, featuring velvet texture and rich colors.</p>
+ <span class="price">$250.00</span>
+ <a href="#" class="add-to-cart">Add to Cart</a>
+ <table class="spec-table">
+ <tr>
+ <th>Material</th>
+ <td>Vinyl with Velvet Texture</td>
+ </tr>
+ <tr>
+ <th>Width</th>
+ <td>10m Roll</td>
+ </tr>
+ <tr>
+ <th>Color Options</th>
+ <td>Velvet Black, Velvet Red, Velvet Gold</td>
+ </tr>
+ <tr>
+ <th>Application</th>
+ <td>Living Room, Dining Area, Bedroom</td>
+ </tr>
+ </table>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/4a268e78cf14/qwen3-14b.html b/data/artifacts/4a268e78cf14/qwen3-14b.html
new file mode 100644
index 0000000..6fde935
--- /dev/null
+++ b/data/artifacts/4a268e78cf14/qwen3-14b.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Luxury Wallpaper Collection</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Georgia', serif;
+ background: linear-gradient(135deg, #1e1e2f 0%, #2a0c72 100%);
+ color: #ffffff;
+ height: 100%;
+ scroll-behavior: smooth;
+ }
+
+ header {
+ background: linear-gradient(135deg, #2a0c72 0%, #1e1e2f 100%);
+ padding: 60px 20px;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ }
+
+ header::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, transparent 70%);
+ z-index: 0;
+ }
+
+ header h1 {
+ font-size: 4em;
+ margin: 0;
+ z-index: 1;
+ position: relative;
+ }
+
+ header p {
+ font-size: 1.2em;
+ margin-top: 10px;
+ z-index: 1;
+ position: relative;
+ }
+
+ .container {
+ max-width: 1000px;
+ margin: 0 auto;
+ padding: 40px 20px;
+ }
+
+ .price {
+ font-size: 2em;
+ color: #ffd600;
+ margin: 20px 0;
+ }
+
+ .add-to-cart {
+ display: inline-block;
+ padding: 15px 30px;
+ font-size: 1.1em;
+ background: #ffffff;
+ color: #2a0c72;
+ text-decoration: none;
+ border-radius: 8px;
+ transition: background 0.3s ease;
+ }
+
+ .add-to-cart:hover {
+ background: #f2f2f2;
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 40px;
+ }
+
+ th, td {
+ padding: 15px;
+ border: 1px solid #333;
+ text-align: left;
+ font-size: 1em;
+ }
+
+ th {
+ background: #2a0c72;
+ color: #ffffff;
+ }
+
+ footer {
+ text-align: center;
+ padding: 20px;
+ font-size: 0.9em;
+ color: #ccc;
+ }
+
+ @media (max-width: 600px) {
+ header h1 {
+ font-size: 2.5em;
+ }
+
+ .price {
+ font-size: 1.5em;
+ }
+
+ table {
+ font-size: 0.9em;
+ }
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>Luxury Wallpaper Collection</h1>
+ <p>Elevate your interiors with our handcrafted, high-end wall coverings.</p>
+ </header>
+ <div class="container">
+ <div class="product-details">
+ <div class="price">€399.00 per roll</div>
+ <a href="#" class="add-to-cart">Add to Cart</a>
+ </div>
+ <table>
+ <thead>
+ <tr>
+ <th>Specification</th>
+ <th>Details</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Material</td>
+ <td>100% premium natural fibers</td>
+ </tr>
+ <tr>
+ <td>Dimensions</td>
+ <td>100 cm x 25 m</td>
+ </tr>
+ <tr>
+ <td>Pattern</td>
+ <td>Hand-embroidered floral design</td>
+ </tr>
+ <tr>
+ <td>Finish</td>
+ <td>Matte, non-reflective</td>
+ </tr>
+ <tr>
+ <td>Installation</td>
+ <td>Professional installation recommended</td>
+ </tr>
+ <tr>
+ <td>Warranty</td>
+ <td>5 years against manufacturing defects</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <footer>
+ © 2025 Luxury Interiors. All rights reserved.
+ </footer>
+ <script>
+ // Sample script for future interactivity
+ document.querySelector('.add-to-cart').addEventListener('click', function(e) {
+ e.preventDefault();
+ alert('Added to cart!');
+ });
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/7c30b48bff56/qwen25-7b.html b/data/artifacts/7c30b48bff56/qwen25-7b.html
new file mode 100644
index 0000000..9dc71b5
--- /dev/null
+++ b/data/artifacts/7c30b48bff56/qwen25-7b.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Starfield Warp Effect</title>
+ <style>
+ body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; }
+ canvas { position: absolute; width: 100%; height: 100%; }
+ </style>
+</head>
+<body>
+ <canvas id="starfield"></canvas>
+ <script>
+ const canvas = document.getElementById('starfield');
+ const ctx = canvas.getContext('2d');
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ let speedSlider = document.createElement('input');
+ speedSlider.type = 'range';
+ speedSlider.min = 1;
+ speedSlider.max = 50;
+ speedSlider.value = 10;
+ document.body.appendChild(speedSlider);
+
+ function drawStarfield() {
+ ctx.fillStyle = '#0d1b2a';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ let starCount = canvas.width * canvas.height / 5000;
+ for (let i = 0; i < starCount; i++) {
+ let x = Math.random() * canvas.width;
+ let y = Math.random() * canvas.height;
+ ctx.fillStyle = 'rgba(255,255,255,0.1)';
+ ctx.beginPath();
+ ctx.arc(x, y, 3, 0, Math.PI * 2);
+ ctx.fill();
+ }
+ }
+
+ function updateWarp() {
+ let mousePos = { x: canvas.width / 2, y: canvas.height / 2 };
+ if (event) {
+ const rect = canvas.getBoundingClientRect();
+ mousePos.x = event.clientX - rect.left;
+ mousePos.y = event.clientY - rect.top;
+ }
+ ctx.save();
+ ctx.translate(canvas.width / 2, canvas.height / 2);
+ ctx.rotate(Math.atan2(mousePos.y, mousePos.x) + (Math.PI * speedSlider.value / 10));
+ ctx.scale(1, -1);
+ drawStarfield();
+ ctx.restore();
+ }
+
+ function animate() {
+ updateWarp();
+ requestAnimationFrame(animate);
+ }
+ document.body.addEventListener('mousemove', updateWarp);
+ document.body.addEventListener('mousedown', updateWarp);
+ document.body.addEventListener('mouseup', updateWarp);
+
+ speedSlider.oninput = function() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ animate();
+ };
+
+ drawStarfield();
+ animate();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/7c30b48bff56/qwen3-14b.html b/data/artifacts/7c30b48bff56/qwen3-14b.html
new file mode 100644
index 0000000..6ab8d36
--- /dev/null
+++ b/data/artifacts/7c30b48bff56/qwen3-14b.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Starfield Warp</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: black;
+ height: 100%;
+ width: 100%;
+ cursor: none;
+ }
+ canvas {
+ display: block;
+ }
+ #slider {
+ position: absolute;
+ top: 10px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 300px;
+ }
+ </style>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+<input type="range" id="slider" min="1" max="10" value="5">
+<script>
+ const canvas = document.getElementById('canvas');
+ const ctx = canvas.getContext('2d');
+ const slider = document.getElementById('slider');
+
+ let width, height;
+ let mouse = { x: 0, y: 0 };
+ let speed = 5;
+
+ function resize() {
+ width = canvas.width = window.innerWidth;
+ height = canvas.height = window.innerHeight;
+ }
+
+ window.addEventListener('resize', resize);
+ resize();
+
+ window.addEventListener('mousemove', (e) => {
+ mouse.x = e.clientX;
+ mouse.y = e.clientY;
+ });
+
+ slider.addEventListener('input', (e) => {
+ speed = parseInt(e.target.value);
+ });
+
+ const stars = [];
+ for (let i = 0; i < 1000; i++) {
+ stars.push({
+ x: Math.random() * width,
+ y: Math.random() * height,
+ z: Math.random() * 100 + 50
+ });
+ }
+
+ function draw() {
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
+ ctx.fillRect(0, 0, width, height);
+
+ ctx.save();
+ ctx.translate(width / 2, height / 2);
+ const angle = Math.atan2(mouse.y - height / 2, mouse.x - width / 2);
+ ctx.rotate(angle);
+ ctx.translate(-width / 2, -height / 2);
+
+ for (let star of stars) {
+ let x = star.x;
+ let y = star.y;
+ let z = star.z;
+
+ const scale = 100 / z;
+ const sx = (x - width / 2) * scale + width / 2;
+ const sy = (y - height / 2) * scale + height / 2;
+
+ ctx.fillStyle = 'white';
+ ctx.beginPath();
+ ctx.arc(sx, sy, scale, 0, Math.PI * 2);
+ ctx.fill();
+ }
+
+ ctx.restore();
+
+ requestAnimationFrame(draw);
+ }
+
+ draw();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/8149a54eaade/qwen25-7b.html b/data/artifacts/8149a54eaade/qwen25-7b.html
new file mode 100644
index 0000000..90f29c8
--- /dev/null
+++ b/data/artifacts/8149a54eaade/qwen25-7b.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>MODEL WARS</title>
+<style>
+body {
+ background: #0d0d0f;
+ color: #f5f2ea;
+ margin: 0;
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+}
+
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ padding: 48px;
+}
+
+.card {
+ background-color: #17171c;
+ color: #f5f2ea;
+ border-radius: 14px;
+ box-shadow: 0 8px 24px rgba(0,0,0,.12);
+ overflow: hidden;
+}
+
+.card:hover {
+ box-shadow: 0 16px 48px rgba(0,0,0,.18);
+}
+
+.title {
+ font-size: 38px;
+ letter-spacing: .15em;
+ text-transform: uppercase;
+ padding: 24px;
+}
+
+.content {
+ padding: 24px;
+ display: flex;
+ gap: 24px;
+ flex-direction: column;
+}
+
+.button {
+ background-color: #c9a961;
+ color: #0d0d0f;
+ border: none;
+ border-radius: 8px;
+ padding: 12px 24px;
+ font-size: 16px;
+ cursor: pointer;
+ transition: background-color .3s;
+}
+
+.button:hover {
+ background-color: #7d6a45;
+}
+
+.response {
+ white-space: pre-wrap;
+ margin-top: 24px;
+}
+</style>
+</head>
+<body>
+<div class="container">
+ <div class="card">
+ <h1 class="title">MODEL WARS</h1>
+ <div class="content">
+ <p>Select two models to battle:</p>
+ <button id="openAIButton" class="button">OpenAI / GPT - The Emerald Knight</button>
+ <button id="claudeButton" class="button">Claude - The Golden Scholar</button>
+ <button id="geminiButton" class="button">Gemini - The Celestial Mage</button>
+ <button id="grokButton" class="button">Grok - The Black Knight</button>
+ <button id="deepSeekButton" class="button">DeepSeek - The Eastern Strategist</button>
+ <button id="llamaButton" class="button">Llama - The Crimson Ranger</button>
+
+ <div id="battleResult" style="margin-top: 24px; display: none;">
+ <h2>Battle Result:</h2>
+ <p class="response"></p>
+ <p>Time to first token: 500ms</p>
+ <p>Total generation time: 1.3s</p>
+ <p>Token usage: 64 tokens</p>
+ <p>API cost: $0.02</p>
+ <p>Judge score: 92/100</p>
+ <button id="viewEvidence" class="button">VIEW THE EVIDENCE</button>
+ </div>
+ </div>
+ </div>
+</div>
+
+<script>
+document.getElementById('openAIButton').addEventListener('click', function() {
+ document.getElementById('battleResult').style.display = 'block';
+ document.querySelector('.response').textContent = "OpenAI / GPT - The Emerald Knight wins the joust! Their reasoning was precise and their responses flowed with grace.";
+});
+
+document.getElementById('claudeButton').addEventListener('click', function() {
+ document.getElementById('battleResult').style.display = 'block';
+ document.querySelector('.response').textContent = "Claude - The Golden Scholar outshines in accuracy, but OpenAI / GPT's strategy wins the day.";
+});
+
+document.getElementById('geminiButton').addEventListener('click', function() {
+ document.getElementById('battleResult').style.display = 'block';
+ document.querySelector('.response').textContent = "Gemini - The Celestial Mage displays a keen intellect, but Grok's strategic mind prevails.";
+});
+
+document.getElementById('grokButton').addEventListener('click', function() {
+ document.getElementById('battleResult').style.display = 'block';
+ document.querySelector('.response').textContent = "Grok - The Black Knight stands strong in battle. Claude - The Golden Scholar's precision cannot overpower Grok's resolve.";
+});
+
+document.getElementById('deepSeekButton').addEventListener('click', function() {
+ document.getElementById('battleResult').style.display = 'block';
+ document.querySelector('.response').textContent = "DeepSeek - The Eastern Strategist's tactics are formidable, but Llama - The Crimson Ranger's agility wins the duel.";
+});
+
+document.getElementById('llamaButton').addEventListener('click', function() {
+ document.getElementById('battleResult').style.display = 'block';
+ document.querySelector('.response').textContent = "Llama - The Crimson Ranger outmaneuvers all with speed and precision, leaving the others in awe of their combat prowess.";
+});
+
+document.getElementById('viewEvidence').addEventListener('click', function() {
+ alert("This is where you would view detailed evidence, but due to constraints, this feature cannot be implemented here.");
+});
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/8149a54eaade/qwen3-14b.html b/data/artifacts/8149a54eaade/qwen3-14b.html
new file mode 100644
index 0000000..0d1aa7b
--- /dev/null
+++ b/data/artifacts/8149a54eaade/qwen3-14b.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>MODEL WARS 2026</title>
+ <style>
+ :root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --accent2: #7d6a45;
+ --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 rgba(201, 169, 97, 0.35);
+ --card-radius: 14px;
+ --spacing: 16px;
+ --font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ }
+
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ background: linear-gradient(135deg, #0f0f15, #1a1a22);
+ color: var(--text);
+ font-family: var(--font-body);
+ line-height: 1.6;
+ overflow-x: hidden;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 96px 0;
+ }
+
+ h1 {
+ font-family: var(--font-display);
+ font-size: 50px;
+ margin-bottom: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ color: var(--accent);
+ text-shadow: 0 0 8px var(--accent);
+ }
+
+ h2 {
+ font-family: var(--font-display);
+ font-size: 38px;
+ margin-bottom: 16px;
+ color: var(--text);
+ }
+
+ .container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ max-width: 1200px;
+ padding: 0 24px;
+ }
+
+ .hero {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ margin-bottom: 64px;
+ }
+
+ .hero img {
+ width: 100px;
+ height: 100px;
+ margin-bottom: 16px;
+ }
+
+ .hero p {
+ font-size: 18px;
+ color: var(--muted);
+ }
+
+ .arena {
+ background: var(--surface);
+ border-radius: var(--card-radius);
+ box-shadow: var(--shadow);
+ padding: 48px;
+ margin-bottom: 48px;
+ width: 100%;
+ max-width: 1000px;
+ position: relative;
+ }
+
+ .arena::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 0%, transparent 70%);
+ z-index: 0;
+ }
+
+ .arena h3 {
+ margin-bottom: 24px;
+ color: var(--accent);
+ }
+
+ .battle-select {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 24px;
+ margin-bottom: 32px;
+ }
+
+ .battle-select select {
+ background: var(--surface);
+ border: 1px solid var(--muted);
+ border-radius: var(--card-radius);
+ padding: 12px;
+ font-size: 16px;
+ color: var(--text);
+ width: 100%;
+ box-shadow: var(--shadow);
+ transition: 0.2s;
+ }
+
+ .battle-select select:hover {
+ box-shadow: var(--hover-shadow);
+ }
+
+ .button {
+ background: var(--accent);
+ color: var(--text);
+ border: none;
+ padding: 14px 24px;
+ border-radius: var(--card-radius);
+ font-size: 16px;
+ cursor: pointer;
+ box-shadow: var(--glow);
+ transition: 0.2s;
+ }
+
+ .button:hover {
+ background: var(--accent2);
+ box-shadow: var(--glow), var(--hover-shadow);
+ }
+
+ .battle-container {
+ margin-top: 32px;
+ }
+
+ .battle-output {
+ background: var(--surface);
+ border-radius: var(--card-radius);
+ box-shadow: var(--shadow);
+ padding: 24px;
+ margin-top: 24px;
+ }
+
+ .battle-output pre {
+ background: #1e1e25;
+ border-radius: var(--card-radius);
+ padding: 16px;
+ font-size: 14px;
+ line-height: 1.5;
+ color: var(--text);
+ overflow-x: auto;
+ margin-top: 12px;
+ }
+
+ .battle-output .score {
+ margin-top: 16px;
+ font-size: 18px;
+ font-weight: bold;
+ color: var(--accent);
+ }
+
+ .battle-output .evidence {
+ margin-top: 24px;
+ }
+
+ .battle-output .evidence button {
+ background: var(--accent);
+ color: var(--text);
+ border: none;
+ padding: 8px 16px;
+ border-radius: var(--card-radius);
+ font-size: 14px;
+ cursor: pointer;
+ box-shadow: var(--glow);
+ transition: 0.2s;
+ margin-top: 12px;
+ }
+
+ .battle-output .evidence button:hover {
+ background: var(--accent2);
+ box-shadow: var(--glow), var(--hover-shadow);
+ }
+
+ .leaderboard {
+ background: var(--surface);
+ border-radius: var(--card-radius);
+ box-shadow: var(--shadow);
+ padding: 24px;
+ margin-top: 64px;
+ width: 100%;
+ max-width: 1000px;
+ overflow-x: auto;
+ }
+
+ .leaderboard table {
+ width: 100%;
+ border-collapse: collapse;
+ }
+
+ .leaderboard thead th {
+ background: #2a2a35;
+ color: var(--text);
+ padding: 12px;
+ font-size: 14px;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
+
+ .leaderboard tbody tr {
+ border-bottom: 1px solid #2a2a35;
+ }
+
+ .leaderboard tbody td {
+ padding: 12px;
+ font-size: 14px;
+ color: var(--text);
+ }
+
+ .leaderboard .crown {
+ position: relative;
+ display: inline-block;
+ }
+
+ .leaderboard .crown::after {
+ content: '👑';
+ position: absolute;
+ top: -14px;
+ left: 0;
+ color: var(--accent);
+ font-size: 24px;
+ animation: crownSpin 4s linear infinite;
+ }
+
+ @keyframes crownSpin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+
+ .footer {
+ margin-top: 64px;
+ font-size: 12px;
+ color: var(--muted);
+ text-align: center;
+ }
+
+ @media (max-width: 768px) {
+ .battle-select {
+ grid-template-columns: 1fr;
+ }
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="hero">
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAIAQMAAABmvDolAAAAA1BMVEW10NBj4+O4AAAAE0lEQVR4nO3BAQ0AAADCoPdPbQ43oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
\ No newline at end of file
diff --git a/data/artifacts/8a1c89d63041/qwen25-7b.html b/data/artifacts/8a1c89d63041/qwen25-7b.html
new file mode 100644
index 0000000..9a7e8f6
--- /dev/null
+++ b/data/artifacts/8a1c89d63041/qwen25-7b.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Conway's Game of Life</title>
+ <style>
+ body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; }
+ canvas { border: 2px solid black; }
+ .controls { margin-top: 15px; display: flex; gap: 10px; }
+ </style>
+</head>
+<body>
+ <canvas id="life" width="400" height="400"></canvas>
+ <div class="controls">
+ <button onclick="playPause()">Play/Pause</button>
+ <button onclick="randomize()">Randomize</button>
+ <input type="range" min="1" max="50" value="20" step="1" oninput="speed = this.value; update()" id="speedSlider">
+ </div>
+
+ <script>
+ const canvas = document.getElementById('life');
+ const ctx = canvas.getContext('2d');
+ let grid = Array.from({ length: 40 }, () => Array(40).fill(false));
+ let speed = 10;
+ let running = false;
+
+ function update() {
+ if (!running) return;
+ for (let y = 0; y < 40; y++) {
+ for (let x = 0; x < 40; x++) {
+ const neighbors = [
+ grid[y + 1]?.[x - 1] || false,
+ grid[y + 1]?.[x] || false,
+ grid[y + 1]?.[x + 1] || false,
+ grid[y - 1]?.[x - 1] || false,
+ grid[y - 1]?.[x] || false,
+ grid[y - 1]?.[x + 1] || false,
+ grid[y]?.[x - 1] || false,
+ grid[y]?.[x + 1] || false
+ ].filter(Boolean).length;
+ if (grid[y][x]) {
+ if (neighbors < 2 || neighbors > 3) grid[y][x] = false;
+ } else if (neighbors === 3) grid[y][x] = true;
+ }
+ }
+
+ draw();
+ }
+
+ function draw() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ for (let y = 0; y < 40; y++) {
+ for (let x = 0; x < 40; x++) {
+ if (grid[y][x]) ctx.fillRect(x * 10, y * 10, 10, 10);
+ }
+ }
+ }
+
+ function playPause() {
+ running = !running;
+ update();
+ }
+
+ function randomize() {
+ grid = Array.from({ length: 40 }, () => Array(40).fill(false));
+ for (let y = 0; y < 40; y++) {
+ for (let x = 0; x < 40; x++) {
+ if (Math.random() > 0.5) grid[y][x] = true;
+ }
+ }
+ draw();
+ }
+
+ window.setInterval(update, 1000 / speed);
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/8a1c89d63041/qwen3-14b.html b/data/artifacts/8a1c89d63041/qwen3-14b.html
new file mode 100644
index 0000000..0543ce9
--- /dev/null
+++ b/data/artifacts/8a1c89d63041/qwen3-14b.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Conway's Game of Life</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ background: #111;
+ color: #fff;
+ font-family: Arial, sans-serif;
+ overflow: hidden;
+ }
+ canvas {
+ display: block;
+ margin: 0 auto;
+ background: #222;
+ border: 2px solid #444;
+ }
+ #controls {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ background: rgba(0,0,0,0.5);
+ padding: 10px;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ #controls button, #controls input {
+ margin: 5px 0;
+ padding: 8px 12px;
+ font-size: 14px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ #controls input[type="range"] {
+ width: 150px;
+ }
+ </style>
+</head>
+<body>
+ <div id="controls">
+ <button id="playPause">Play</button>
+ <button id="randomize">Randomize</button>
+ <label for="speed">Speed: <input type="range" id="speed" min="1" max="100" value="10" /></label>
+ </div>
+ <canvas id="gameCanvas" width="800" height="600"></canvas>
+
+ <script>
+ const canvas = document.getElementById('gameCanvas');
+ const ctx = canvas.getContext('2d');
+ const playPauseBtn = document.getElementById('playPause');
+ const randomizeBtn = document.getElementById('randomize');
+ const speedSlider = document.getElementById('speed');
+
+ const width = canvas.width;
+ const height = canvas.height;
+ const cellSize = 10;
+ const cols = width / cellSize;
+ const rows = height / cellSize;
+
+ let grid = new Array(rows).fill(null).map(() => new Array(cols).fill(0));
+ let running = false;
+ let intervalId = null;
+ let speed = 10;
+
+ function drawGrid() {
+ ctx.clearRect(0, 0, width, height);
+ for (let row = 0; row < rows; row++) {
+ for (let col = 0; col < cols; col++) {
+ if (grid[row][col]) {
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
+ }
+ }
+ }
+ }
+
+ function updateGrid() {
+ const newGrid = grid.map(row => [...row]);
+ for (let row = 0; row < rows; row++) {
+ for (let col = 0; col < cols; col++) {
+ let neighbors = 0;
+ for (let i = -1; i <= 1; i++) {
+ for (let j = -1; j <= 1; j++) {
+ if (i === 0 && j === 0) continue;
+ const r = row + i;
+ const c = col + j;
+ if (r >= 0 && r < rows && c >= 0 && c < cols) {
+ neighbors += grid[r][c];
+ }
+ }
+ }
+ if (grid[row][col] === 1) {
+ newGrid[row][col] = (neighbors === 2 || neighbors === 3) ? 1 : 0;
+ } else {
+ newGrid[row][col] = (neighbors === 3) ? 1 : 0;
+ }
+ }
+ }
+ grid = newGrid;
+ }
+
+ function startGame() {
+ if (!running) {
+ running = true;
+ playPauseBtn.textContent = 'Pause';
+ intervalId = setInterval(() => {
+ updateGrid();
+ drawGrid();
+ }, 1000 / speed);
+ }
+ }
+
+ function stopGame() {
+ if (running) {
+ running = false;
+ playPauseBtn.textContent = 'Play';
+ clearInterval(intervalId);
+ intervalId = null;
+ }
+ }
+
+ function randomizeGrid() {
+ for (let row = 0; row < rows; row++) {
+ for (let col = 0; col < cols; col++) {
+ grid[row][col] = Math.random() > 0.7 ? 1 : 0;
+ }
+ }
+ drawGrid();
+ }
+
+ function init() {
+ drawGrid();
+ playPauseBtn.addEventListener('click', () => {
+ if (running) stopGame();
+ else startGame();
+ });
+ randomizeBtn.addEventListener('click', randomizeGrid);
+ speedSlider.addEventListener('input', (e) => {
+ speed = parseInt(e.target.value);
+ });
+ }
+
+ init();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/9000631deff3/qwen25-7b.html b/data/artifacts/9000631deff3/qwen25-7b.html
new file mode 100644
index 0000000..867171c
--- /dev/null
+++ b/data/artifacts/9000631deff3/qwen25-7b.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Bouncing Balls</title>
+ <style>
+ body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #282c34; }
+ canvas { background-color: #1e1e1e; border: 1px solid black; }
+ </style>
+</head>
+<body>
+ <input type="range" id="gravitySlider" min="0.1" max="5" value="1" step="0.1">
+ <canvas id="gameCanvas"></canvas>
+ <script>
+ const canvas = document.getElementById('gameCanvas');
+ const ctx = canvas.getContext('2d');
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ let balls = [];
+ for (let i = 0; i < 20; i++) {
+ balls.push({
+ x: Math.random() * canvas.width,
+ y: Math.random() * canvas.height,
+ dx: (Math.random() - 0.5) * 3,
+ dy: 0,
+ radius: 10 + Math.random() * 10
+ });
+ }
+
+ const gravity = document.getElementById('gravitySlider').value;
+
+ function drawBalls() {
+ balls.forEach(ball => {
+ ctx.beginPath();
+ ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+ ctx.fillStyle = 'white';
+ ctx.fill();
+ ctx.closePath();
+ });
+ }
+
+ function updateBalls() {
+ balls.forEach((ball, index) => {
+ if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
+ ball.dy *= -1;
+ }
+ if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
+ ball.dx *= -1;
+ }
+
+ for (let other of balls) {
+ if (other === ball) continue;
+ const dx = ball.x - other.x;
+ const dy = ball.y - other.y;
+ const distance = Math.sqrt(dx * dx + dy * dy);
+ if (distance < ball.radius + other.radius && !colliding) {
+ colliding = true;
+ const angle = Math.atan2(dy, dx);
+ const force = 0.1 / distance**2;
+ ball.dx -= Math.cos(angle) * force;
+ ball.dy -= Math.sin(angle) * force;
+ other.dx += Math.cos(angle) * force;
+ other.dy += Math.sin(angle) * force;
+ }
+ }
+
+ ball.x += ball.dx;
+ ball.y += ball.dy + gravity;
+ ball.dy += 0.5;
+ });
+ }
+
+ function render() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ drawBalls();
+ updateBalls();
+ requestAnimationFrame(render);
+ }
+
+ document.getElementById('gravitySlider').addEventListener('input', e => gravity = e.target.value);
+
+ render();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/9000631deff3/qwen3-14b.html b/data/artifacts/9000631deff3/qwen3-14b.html
new file mode 100644
index 0000000..c38a0a0
--- /dev/null
+++ b/data/artifacts/9000631deff3/qwen3-14b.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Bouncing Balls with Gravity</title>
+ <style>
+ body {
+ margin: 0;
+ background: #000;
+ overflow: hidden;
+ }
+ canvas {
+ display: block;
+ }
+ #gravitySlider {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ width: 200px;
+ }
+ </style>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+<input type="range" id="gravitySlider" min="0.01" max="0.5" step="0.01" value="0.1">
+<script>
+ const canvas = document.getElementById('canvas');
+ const ctx = canvas.getContext('2d');
+ let width = canvas.width = window.innerWidth;
+ let height = canvas.height = window.innerHeight;
+ window.addEventListener('resize', () => {
+ width = canvas.width = window.innerWidth;
+ height = canvas.height = window.innerHeight;
+ });
+
+ const gravitySlider = document.getElementById('gravitySlider');
+ let gravity = parseFloat(gravitySlider.value);
+ gravitySlider.addEventListener('input', () => {
+ gravity = parseFloat(gravitySlider.value);
+ });
+
+ const balls = [];
+ const numBalls = 20;
+ const trailLength = 50;
+ const ballRadius = 10;
+
+ class Ball {
+ constructor() {
+ this.x = Math.random() * width;
+ this.y = Math.random() * height;
+ this.vx = (Math.random() - 0.5) * 4;
+ this.vy = (Math.random() - 0.5) * 4;
+ this.trail = [];
+ }
+
+ update() {
+ this.vy += gravity;
+ this.x += this.vx;
+ this.y += this.vy;
+
+ if (this.x < ballRadius || this.x > width - ballRadius) {
+ this.vx *= -1;
+ }
+ if (this.y < ballRadius || this.y > height - ballRadius) {
+ this.vy *= -1;
+ }
+
+ this.trail.push({ x: this.x, y: this.y });
+ if (this.trail.length > trailLength) {
+ this.trail.shift();
+ }
+ }
+
+ draw() {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, ballRadius, 0, Math.PI * 2);
+ ctx.fillStyle = 'white';
+ ctx.fill();
+ ctx.strokeStyle = 'white';
+ ctx.stroke();
+
+ ctx.globalAlpha = 0.3;
+ for (let i = 0; i < this.trail.length; i++) {
+ const alpha = 1 - i / this.trail.length;
+ ctx.globalAlpha = alpha;
+ ctx.beginPath();
+ ctx.arc(this.trail[i].x, this.trail[i].y, ballRadius * (1 - alpha), 0, Math.PI * 2);
+ ctx.fillStyle = 'white';
+ ctx.fill();
+ }
+ ctx.globalAlpha = 1;
+ }
+ }
+
+ for (let i = 0; i < numBalls; i++) {
+ balls.push(new Ball());
+ }
+
+ function animate() {
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
+ ctx.fillRect(0, 0, width, height);
+
+ for (const ball of balls) {
+ ball.update();
+ ball.draw();
+ }
+
+ requestAnimationFrame(animate);
+ }
+
+ animate();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/c323008e27c0/qwen25-7b.html b/data/artifacts/c323008e27c0/qwen25-7b.html
new file mode 100644
index 0000000..1a3d5c0
--- /dev/null
+++ b/data/artifacts/c323008e27c0/qwen25-7b.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Conway's Game of Life</title>
+ <style>
+ body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
+ canvas { border: 1px solid #000; }
+ .controls { margin-top: 20px; display: flex; gap: 10px; }
+ </style>
+</head>
+<body>
+ <canvas id="life" width="800" height="600"></canvas>
+ <div class="controls">
+ <button onclick="togglePlay()">Play/Pause</button>
+ <button onclick="randomizeGrid()">Randomize</button>
+ <label for="speed">Speed:</label>
+ <input type="range" id="speed" min="1" max="50" value="25" oninput="setInterval()" onchange="setInterval()">
+ </div>
+ <script>
+ const canvas = document.getElementById('life');
+ const ctx = canvas.getContext('2d');
+ const width = canvas.width;
+ const height = canvas.height;
+ let grid = Array.from({length: 30}, () => Array(40).fill(false));
+ let running = false;
+ let interval;
+
+ function setCanvasSize() {
+ canvas.width = width * 2;
+ canvas.height = height * 2;
+ ctx.scale(2, 2);
+ }
+
+ function drawGrid() {
+ for (let y = 0; y < grid.length; y++) {
+ for (let x = 0; x < grid[y].length; x++) {
+ if (grid[y][x]) {
+ ctx.fillRect(x, y, 1, 1);
+ }
+ }
+ }
+ }
+
+ function updateGrid() {
+ const next = Array.from({length: 30}, () => Array(40).fill(false));
+ for (let y = 0; y < grid.length; y++) {
+ for (let x = 0; x < grid[y].length; x++) {
+ let liveNeighbors = 0;
+ for (let dy = -1; dy <= 1; dy++) {
+ for (let dx = -1; dx <= 1; dx++) {
+ if (dx === 0 && dy === 0) continue;
+ const nx = x + dx, ny = y + dy;
+ liveNeighbors += grid[ny < 0 ? 29 : ny > 29 ? 0 : ny][nx < 0 ? 39 : nx > 39 ? 0 : nx] ? 1 : 0;
+ }
+ }
+ if (grid[y][x]) {
+ next[y][x] = liveNeighbors === 2 || liveNeighbors === 3;
+ } else {
+ next[y][x] = liveNeighbors === 3;
+ }
+ }
+ }
+ grid = next;
+ }
+
+ function togglePlay() {
+ running = !running;
+ if (running) start();
+ else clearInterval(interval);
+ }
+
+ function randomizeGrid() {
+ for (let y = 0; y < grid.length; y++) {
+ for (let x = 0; x < grid[y].length; x++) {
+ grid[y][x] = Math.random() > 0.7;
+ }
+ }
+ drawGrid();
+ }
+
+ function start() {
+ interval = setInterval(() => {
+ updateGrid();
+ drawGrid();
+ }, (50 - parseInt(document.getElementById('speed').value)) * 16);
+ }
+
+ setCanvasSize();
+ randomizeGrid();
+ document.addEventListener('DOMContentLoaded', () => running ? start() : null);
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/c323008e27c0/qwen3-14b.html b/data/artifacts/c323008e27c0/qwen3-14b.html
new file mode 100644
index 0000000..3de9254
--- /dev/null
+++ b/data/artifacts/c323008e27c0/qwen3-14b.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Conway's Game of Life</title>
+ <style>
+ body {
+ margin: 0;
+ background: #111;
+ color: #fff;
+ font-family: sans-serif;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ }
+ canvas {
+ border: 1px solid #444;
+ background: #222;
+ }
+ #controls {
+ margin-top: 10px;
+ }
+ #controls button, #controls input {
+ margin: 5px;
+ padding: 5px 10px;
+ font-size: 14px;
+ }
+ </style>
+</head>
+<body>
+ <canvas id="gameCanvas" width="600" height="400"></canvas>
+ <div id="controls">
+ <button id="playPause">Play</button>
+ <button id="randomize">Randomize</button>
+ <label for="speed">Speed:</label>
+ <input type="range" id="speed" min="1" max="100" value="10">
+ </div>
+ <script>
+ const canvas = document.getElementById('gameCanvas');
+ const ctx = canvas.getContext('2d');
+ const width = canvas.width;
+ const height = canvas.height;
+ const cellSize = 10;
+ const cols = width / cellSize;
+ const rows = height / cellSize;
+
+ let grid = createGrid();
+ let running = false;
+ let interval;
+
+ function createGrid() {
+ const grid = [];
+ for (let y = 0; y < rows; y++) {
+ grid[y] = [];
+ for (let x = 0; x < cols; x++) {
+ grid[y][x] = Math.random() < 0.2 ? 1 : 0;
+ }
+ }
+ return grid;
+ }
+
+ function drawGrid() {
+ ctx.clearRect(0, 0, width, height);
+ for (let y = 0; y < rows; y++) {
+ for (let x = 0; x < cols; x++) {
+ if (grid[y][x]) {
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(x * cellSize, y * cellSize, cellSize - 1, cellSize - 1);
+ }
+ }
+ }
+ }
+
+ function updateGrid() {
+ const newGrid = grid.map(row => [...row]);
+ for (let y = 0; y < rows; y++) {
+ for (let x = 0; x < cols; x++) {
+ let neighbors = 0;
+ for (let dy = -1; dy <= 1; dy++) {
+ for (let dx = -1; dx <= 1; dx++) {
+ if (dx === 0 && dy === 0) continue;
+ const nx = (x + dx + cols) % cols;
+ const ny = (y + dy + rows) % rows;
+ neighbors += grid[ny][nx];
+ }
+ }
+ if (grid[y][x]) {
+ if (neighbors < 2 || neighbors > 3) newGrid[y][x] = 0;
+ } else {
+ if (neighbors === 3) newGrid[y][x] = 1;
+ }
+ }
+ }
+ grid = newGrid;
+ }
+
+ function startGame() {
+ if (running) return;
+ running = true;
+ interval = setInterval(() => {
+ updateGrid();
+ drawGrid();
+ }, 1000 / parseInt(document.getElementById('speed').value));
+ }
+
+ function stopGame() {
+ running = false;
+ clearInterval(interval);
+ }
+
+ function togglePlayPause() {
+ if (running) {
+ stopGame();
+ document.getElementById('playPause').textContent = 'Play';
+ } else {
+ startGame();
+ document.getElementById('playPause').textContent = 'Pause';
+ }
+ }
+
+ function randomize() {
+ stopGame();
+ grid = createGrid();
+ drawGrid();
+ }
+
+ document.getElementById('playPause').addEventListener('click', togglePlayPause);
+ document.getElementById('randomize').addEventListener('click', randomize);
+ document.getElementById('speed').addEventListener('input', () => {
+ if (running) {
+ clearInterval(interval);
+ interval = setInterval(() => {
+ updateGrid();
+ drawGrid();
+ }, 1000 / parseInt(document.getElementById('speed').value));
+ }
+ });
+
+ drawGrid();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e44d5e8aafe3/qwen25-7b.html b/data/artifacts/e44d5e8aafe3/qwen25-7b.html
new file mode 100644
index 0000000..36da34d
--- /dev/null
+++ b/data/artifacts/e44d5e8aafe3/qwen25-7b.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Wallcovering Catalog</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ background-color: #f5f5f5;
+ }
+ .container {
+ width: 80%;
+ max-width: 1200px;
+ display: grid;
+ gap: 20px;
+ padding: 20px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ }
+ .card {
+ background-color: white;
+ border-radius: 8px;
+ overflow: hidden;
+ transition: transform 0.3s ease;
+ }
+ .card:hover {
+ transform: scale(1.05);
+ }
+ .card-header {
+ padding: 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #f9f9f9;
+ }
+ .card-body {
+ padding: 15px;
+ }
+ input[type="text"] {
+ width: calc(100% - 42px);
+ margin-right: 8px;
+ font-size: 16px;
+ padding: 10px;
+ border-radius: 4px;
+ border: 1px solid #ccc;
+ }
+ .sort-btn {
+ cursor: pointer;
+ font-size: 16px;
+ color: #333;
+ background-color: transparent;
+ border: none;
+ }
+ </style>
+</head>
+<body>
+
+<div class="container" id="catalog">
+ <input type="text" id="searchInput" placeholder="Search...">
+ <div class="cards">
+ <div class="card" data-sku="SKU01" data-pattern="Floral" data-colorway="Green">
+ <div class="card-header">
+ <span>Floral</span>
+ <button class="sort-btn">Sort by Pattern</button>
+ </div>
+ <div class="card-body">
+ <p><strong>Sku:</strong> SKU01</p>
+ <p><strong>Colorway:</strong> Green</p>
+ <p><strong>Price: $45.99</strong></p>
+ <p><strong>In Stock: 23</strong></p>
+ </div>
+ </div>
+ <div class="card" data-sku="SKU02" data-pattern="Geometric" data-colorway="Blue">
+ <div class="card-header">
+ <span>Geometric</span>
+ <button class="sort-btn">Sort by Pattern</button>
+ </div>
+ <div class="card-body">
+ <p><strong>Sku:</strong> SKU02</p>
+ <p><strong>Colorway:</strong> Blue</p>
+ <p><strong>Price: $59.99</strong></p>
+ <p><strong>In Stock: 18</strong></p>
+ </div>
+ </div>
+ <div class="card" data-sku="SKU03" data-pattern="Checkerboard" data-colorway="Red">
+ <div class="card-header">
+ <span>Checkerboard</span>
+ <button class="sort-btn">Sort by Pattern</button>
+ </div>
+ <div class="card-body">
+ <p><strong>Sku:</strong> SKU03</p>
+ <p><strong>Colorway:</strong> Red</p>
+ <p><strong>Price: $79.99</strong></p>
+ <p><strong>In Stock: 12</strong></p>
+ </div>
+ </div>
+ <div class="card" data-sku="SKU04" data-pattern="Leaves" data-colorway="Yellow">
+ <div class="card-header">
+ <span>Leaves</span>
+ <button class="sort-btn">Sort by Pattern</button>
+ </div>
+ <div class="card-body">
+ <p><strong>Sku:</strong> SKU04</p>
+ <p><strong>Colorway:</strong> Yellow</p>
+ <p><strong>Price: $69.99</strong></p>
+ <p><strong>In Stock: 15</strong></p>
+ </div>
+ </div>
+ <div class="card" data-sku="SKU05" data-pattern="Stars" data-colorway="Purple">
+ <div class="card-header">
+ <span>Stars</span>
+ <button class="sort-btn">Sort by Pattern</button>
+ </div>
+ <div class="card-body">
+ <p><strong>Sku:</strong> SKU05</p>
+ <p><strong>Colorway:</strong> Purple</p>
+ <p><strong>Price: $89.99</strong></p>
+ <p><strong>In Stock: 13</strong></p>
+ </div>
+ </div>
+ <div class="card" data-sku="SKU06" data-pattern="Stripes" data-colorway="Orange">
+ <div class="card-header">
+ <span>Stripes</span>
+ <button class="sort-btn">Sort by Pattern</button>
+ </div>
+ <div class="card-body">
+ <p><strong>Sku:</strong> SKU06</p>
+ <p><strong>Colorway:</strong> Orange</p>
+ <p><strong>Price: $54.99</strong></p>
+ <p><strong>In Stock: 21</strong></p>
+ </div>
+ </div>
+ <div class="card" data-sku="SKU07" data-pattern="Polka Dots" data-colorway="White">
+ <div class="card-header">
+ <span>Polka Dots</span>
+ <button class="sort-btn">Sort by Pattern</button>
+ </div>
+ <div class="card-body">
+ <p><strong>Sku:</strong> SKU07</p>
+ <p><strong>Colorway:</strong> White</p>
+ <p><strong>Price: $62.99</strong></p>
+ <p><strong>In Stock: 14</strong></p>
+ </div>
+ </div>
+ <div class="card" data-sku="SKU08" data-pattern="Plaid" data-colorway="Brown">
+ <div class="card-header">
+ <span>Plaid</span>
+ <button class="sort-btn">Sort by Pattern</button>
+ </div>
+ <div class="card-body">
+ <p><strong>Sku:</strong> SKU08</p>
+ <p><strong>Colorway:</strong> Brown</p>
+ <p><strong>Price: $59.99</strong></p>
+ <p><strong>In Stock: 17</strong></p>
+ </div>
+ </div>
+ </div>
+</div>
+
+<script>
+ const catalog = document.getElementById('catalog');
+ const searchInput = document.getElementById('searchInput');
+
+ searchInput.addEventListener('input', function(e) {
+ const value = e.target.value.toLowerCase();
+ const cards = catalog.getElementsByClassName('card');
+
+ for (let card of cards) {
+ if (card.getAttribute('data-sku').includes(value) ||
+ card.getAttribute('data-pattern').toLowerCase().includes(value) ||
+ card.getAttribute('data-colorway').toLowerCase().includes(value)) {
+ card.style.display = '';
+ } else {
+ card.style.display = 'none';
+ }
+ }
+ });
+
+ const sortBtns = catalog.getElementsByClassName('sort-btn');
+
+ for (let btn of sortBtns) {
+ btn.addEventListener('click', function() {
+ let currentSort = this.textContent;
+ if (currentSort === 'Sort by Pattern') {
+ Array.from(catalog.children).sort((a, b) => a.getAttribute('data-pattern').localeCompare(b.getAttribute('data-pattern'))).forEach(card => catalog.appendChild(card));
+ this.textContent = 'Reset Sort';
+ } else {
+ for (let btn of sortBtns) { btn.textContent = 'Sort by Pattern'; }
+ catalog.innerHTML = '<div class="cards">' + Array.from(catalog.children).map(card => card.outerHTML).join('') + '</div>';
+ }
+ });
+ }
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e44d5e8aafe3/qwen3-14b.html b/data/artifacts/e44d5e8aafe3/qwen3-14b.html
new file mode 100644
index 0000000..5387c83
--- /dev/null
+++ b/data/artifacts/e44d5e8aafe3/qwen3-14b.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Wallcovering Catalog</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background: #f4f4f4;
+ }
+
+ header {
+ background: #333;
+ color: #fff;
+ padding: 15px 20px;
+ text-align: center;
+ font-size: 24px;
+ }
+
+ .search-box {
+ margin: 20px auto;
+ max-width: 600px;
+ padding: 10px;
+ width: 90%;
+ }
+
+ .search-box input {
+ width: 100%;
+ padding: 10px;
+ font-size: 16px;
+ }
+
+ .catalog {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 20px;
+ padding: 20px;
+ }
+
+ .card {
+ background: #fff;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ padding: 15px;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ display: flex;
+ flex-direction: column;
+ transition: transform 0.2s;
+ }
+
+ .card:hover {
+ transform: scale(1.02);
+ }
+
+ .card h3 {
+ margin: 0 0 10px;
+ font-size: 18px;
+ color: #333;
+ }
+
+ .card p {
+ margin: 0 0 5px;
+ font-size: 14px;
+ color: #555;
+ }
+
+ .card .price {
+ font-weight: bold;
+ color: #28a745;
+ }
+
+ .card .stock {
+ font-weight: bold;
+ color: #dc3545;
+ }
+
+ .table {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ border: 1px solid #ccc;
+ background: #fff;
+ padding: 10px;
+ font-weight: bold;
+ text-align: center;
+ cursor: pointer;
+ user-select: none;
+ }
+
+ .table:hover {
+ background: #f0f0f0;
+ }
+
+ @media (max-width: 600px) {
+ .table {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+ </style>
+</head>
+<body>
+ <header>Wallcovering Catalog</header>
+ <div class="search-box">
+ <input type="text" id="search" placeholder="Search by SKU, Pattern, or Colorway..." oninput="filterCatalog()">
+ </div>
+ <div class="table" onclick="sortCatalog(event)">
+ <div>SKU</div>
+ <div>Pattern</div>
+ <div>Colorway</div>
+ <div>Price</div>
+ <div>Stock</div>
+ </div>
+ <div class="catalog" id="catalog">
+ <div class="card" data-sku="SKU001" data-pattern="Floral Dreams" data-colorway="Bloom Blue" data-price="$12.99" data-stock="150">
+ <h3>Floral Dreams</h3>
+ <p><strong>SKU:</strong> SKU001</p>
+ <p><strong>Colorway:</strong> Bloom Blue</p>
+ <p class="price"><strong>Price:</strong> $12.99</p>
+ <p class="stock"><strong>Stock:</strong> 150</p>
+ </div>
+ <div class="card" data-sku="SKU002" data-pattern="Geometric Visions" data-colorway="Coral Orange" data-price="$14.99" data-stock="75">
+ <h3>Geometric Visions</h3>
+ <p><strong>SKU:</strong> SKU002</p>
+ <p><strong>Colorway:</strong> Coral Orange</p>
+ <p class="price"><strong>Price:</strong> $14.99</p>
+ <p class="stock"><strong>Stock:</strong> 75</p>
+ </div>
+ <div class="card" data-sku="SKU003" data-pattern="Mossy Path" data-colorway="Forest Green" data-price="$11.99" data-stock="200">
+ <h3>Mossy Path</h3>
+ <p><strong>SKU:</strong> SKU003</p>
+ <p><strong>Colorway:</strong> Forest Green</p>
+ <p class="price"><strong>Price:</strong> $11.99</p>
+ <p class="stock"><strong>Stock:</strong> 200</p>
+ </div>
+ <div class="card" data-sku="SKU004" data-pattern="Rustic Weave" data-colorway="Earthy Brown" data-price="$13.99" data-stock="120">
+ <h3>Rustic Weave</h3>
+ <p><strong>SKU:</strong> SKU004</p>
+ <p><strong>Colorway:</strong> Earthy Brown</p>
+ <p class="price"><strong>Price:</strong> $13.99</p>
+ <p class="stock"><strong>Stock:</strong> 120</p>
+ </div>
+ <div class="card" data-sku="SKU005" data-pattern="Urban Pulse" data-colorway="Nebula Purple" data-price="$15.99" data-stock="80">
+ <h3>Urban Pulse</h3>
+ <p><strong>SKU:</strong> SKU005</p>
+ <p><strong>Colorway:</strong> Nebula Purple</p>
+ <p class="price"><strong>Price:</strong> $15.99</p>
+ <p class="stock"><strong>Stock:</strong> 80</p>
+ </div>
+ <div class="card" data-sku="SKU006" data-pattern="Ocean Breeze" data-colorway="Azure Blue" data-price="$12.99" data-stock="180">
+ <h3>Ocean Breeze</h3>
+ <p><strong>SKU:</strong> SKU006</p>
+ <p><strong>Colorway:</strong> Azure Blue</p>
+ <p class="price"><strong>Price:</strong> $12.99</p>
+ <p class="stock"><strong>Stock:</strong> 180</p>
+ </div>
+ <div class="card" data-sku="SKU007" data-pattern="Midnight Canvas" data-colorway="Onyx Black" data-price="$14.99" data-stock="100">
+ <h3>Midnight Canvas</h3>
+ <p><strong>SKU:</strong> SKU007</p>
+ <p><strong>Colorway:</strong> Onyx Black</p>
+ <p class="price"><strong>Price:</strong> $14.99</p>
+ <p class="stock"><strong>Stock:</strong> 100</p>
+ </div>
+ <div class="card" data-sku="SKU008" data-pattern="Sunset Ridge" data-colorway="Amber Gold" data-price="$13.99" data-stock="130">
+ <h3>Sunset Ridge</h3>
+ <p><strong>SKU:</strong> SKU008</p>
+ <p><strong>Colorway:</strong> Amber Gold</p>
+ <p class="price"><strong>Price:</strong> $13.99</p>
+ <p class="stock"><strong>Stock:</strong> 130</p>
+ </div>
+ </div>
+
+ <script>
+ const catalog = document.getElementById('catalog');
+ const cards = Array.from(catalog.children);
+
+ function filterCatalog() {
+ const searchTerm = document.getElementById('search').value.toLowerCase();
+ cards.forEach(card => {
+ const sku = card.getAttribute('data-sku').toLowerCase();
+ const pattern = card.getAttribute('data-pattern').toLowerCase();
+ const colorway = card.getAttribute('data-colorway').toLowerCase();
+ const match = sku.includes(searchTerm) || pattern.includes(searchTerm) || colorway.includes(searchTerm);
+ card.style.display = match ? 'block' : 'none';
+ });
+ }
+
+ function sortCatalog(event) {
+ const headers = Array.from(event.currentTarget.children);
+ const index = headers.indexOf(event.target);
+ const keyMap = ['sku', 'pattern', 'colorway', 'price', 'stock'];
+ const key = keyMap[index];
+ const isAscending = !event.currentTarget.getAttribute('data-sort') || event.currentTarget.getAttribute('data-sort') === 'asc';
+ const direction = isAscending ? 1 : -1;
+ event.currentTarget.setAttribute('data-sort', isAscending ? 'desc' : 'asc');
+
+ cards.sort((a, b) => {
+ const aVal = a.getAttribute(`data-${key}`);
+ const bVal = b.getAttribute(`data-${key}`);
+ if (key === 'price' || key === 'stock') {
+ return direction * (parseInt(aVal) - parseInt(bVal));
+ }
+ return direction * aVal.localeCompare(bVal);
+ });
+
+ catalog.innerHTML = '';
+ cards.forEach(card => catalog.appendChild(card));
+ }
+
+ // Initial sort by SKU
+ sortCatalog({ target: document.querySelector('.table div') });
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/landings/086d9b64d97d-qwen3-14b.html b/data/landings/086d9b64d97d-qwen3-14b.html
new file mode 100644
index 0000000..56edd1c
--- /dev/null
+++ b/data/landings/086d9b64d97d-qwen3-14b.html
@@ -0,0 +1,115 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Go — built by Qwen3 14B · Model Arena</title>
+<style>*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b0d10;color:#e6ecf2;font:14px/1.5 ui-monospace,Menlo,monospace}
+header{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid #1c2430;background:#0e1116}
+header .k{color:#7cf;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:12px;white-space:nowrap}
+header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-size:12px;margin-left:auto;white-space:nowrap}
+.wrap{height:calc(100% - 51px)}iframe{width:100%;height:100%;border:0;background:#000;display:block}</style></head><body>
+<header><span class="k">⚔ Model Arena</span><h1>Go</h1><span class="by">built by <b>Qwen3 14B</b></span></header>
+<div class="wrap"><iframe sandbox="allow-scripts allow-pointer-lock" srcdoc="<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Water Fountain</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ background: #12002b;
+ color: #f3e9ff;
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ overflow: hidden;
+ }
+ canvas {
+ display: block;
+ }
+ .label {
+ position: absolute;
+ top: 24px;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ color: #8d7bb0;
+ font-family: sans-serif;
+ }
+ </style>
+</head>
+<body>
+ <div class="label">3D Water Fountain</div>
+ <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/build/three.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/examples/js/controls/OrbitControls.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/examples/js/objects/Water.js"></script>
+ <script>
+ let scene, camera, renderer, controls;
+ let water;
+
+ init();
+ animate();
+
+ function init() {
+ scene = new THREE.Scene();
+ scene.background = new THREE.Color(0x12002b);
+
+ camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
+ camera.position.set(0, 5, 10);
+
+ renderer = new THREE.WebGLRenderer({ antialias: true });
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ document.body.appendChild(renderer.domElement);
+
+ controls = new THREE.OrbitControls(camera, renderer.domElement);
+ controls.target.set(0, 2, 0);
+ controls.update();
+
+ // Ground
+ const groundGeometry = new THREE.PlaneGeometry(100, 100);
+ const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x222222 });
+ const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+ ground.rotation.x = -Math.PI / 2;
+ scene.add(ground);
+
+ // Water
+ water = new THREE.Water(
+ new THREE.PlaneGeometry(20, 20),
+ {
+ textureWidth: 512,
+ textureHeight: 512,
+ waterColor: 0x006699,
+ distortionScale: 3.7,
+ fog: scene.fog !== undefined
+ }
+ );
+ water.rotation.x = -Math.PI / 2;
+ scene.add(water);
+
+ // Light
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+ scene.add(ambientLight);
+
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+ directionalLight.position.set(10, 20, 10);
+ scene.add(directionalLight);
+
+ window.addEventListener('resize', onWindowResize, false);
+ }
+
+ function onWindowResize() {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ }
+
+ function animate() {
+ requestAnimationFrame(animate);
+ water.material.uniforms.time.value += 1.0 / 60.0;
+ controls.update();
+ renderer.render(scene, camera);
+ }
+ </script>
+</body>
+</html>" title="Go"></iframe></div>
+</body></html>
\ No newline at end of file
diff --git a/data/landings/8149a54eaade-qwen25-7b.html b/data/landings/8149a54eaade-qwen25-7b.html
new file mode 100644
index 0000000..a7f4df6
--- /dev/null
+++ b/data/landings/8149a54eaade-qwen25-7b.html
@@ -0,0 +1,141 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Ultimate battle — built by Qwen2.5 (local) · Model Arena</title>
+<style>*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b0d10;color:#e6ecf2;font:14px/1.5 ui-monospace,Menlo,monospace}
+header{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid #1c2430;background:#0e1116}
+header .k{color:#7cf;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:12px;white-space:nowrap}
+header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-size:12px;margin-left:auto;white-space:nowrap}
+.wrap{height:calc(100% - 51px)}iframe{width:100%;height:100%;border:0;background:#000;display:block}</style></head><body>
+<header><span class="k">⚔ Model Arena</span><h1>Ultimate battle</h1><span class="by">built by <b>Qwen2.5 (local)</b></span></header>
+<div class="wrap"><iframe sandbox="allow-scripts allow-pointer-lock" srcdoc="<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>MODEL WARS</title>
+<style>
+body {
+ background: #0d0d0f;
+ color: #f5f2ea;
+ margin: 0;
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+}
+
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ padding: 48px;
+}
+
+.card {
+ background-color: #17171c;
+ color: #f5f2ea;
+ border-radius: 14px;
+ box-shadow: 0 8px 24px rgba(0,0,0,.12);
+ overflow: hidden;
+}
+
+.card:hover {
+ box-shadow: 0 16px 48px rgba(0,0,0,.18);
+}
+
+.title {
+ font-size: 38px;
+ letter-spacing: .15em;
+ text-transform: uppercase;
+ padding: 24px;
+}
+
+.content {
+ padding: 24px;
+ display: flex;
+ gap: 24px;
+ flex-direction: column;
+}
+
+.button {
+ background-color: #c9a961;
+ color: #0d0d0f;
+ border: none;
+ border-radius: 8px;
+ padding: 12px 24px;
+ font-size: 16px;
+ cursor: pointer;
+ transition: background-color .3s;
+}
+
+.button:hover {
+ background-color: #7d6a45;
+}
+
+.response {
+ white-space: pre-wrap;
+ margin-top: 24px;
+}
+</style>
+</head>
+<body>
+<div class="container">
+ <div class="card">
+ <h1 class="title">MODEL WARS</h1>
+ <div class="content">
+ <p>Select two models to battle:</p>
+ <button id="openAIButton" class="button">OpenAI / GPT - The Emerald Knight</button>
+ <button id="claudeButton" class="button">Claude - The Golden Scholar</button>
+ <button id="geminiButton" class="button">Gemini - The Celestial Mage</button>
+ <button id="grokButton" class="button">Grok - The Black Knight</button>
+ <button id="deepSeekButton" class="button">DeepSeek - The Eastern Strategist</button>
+ <button id="llamaButton" class="button">Llama - The Crimson Ranger</button>
+
+ <div id="battleResult" style="margin-top: 24px; display: none;">
+ <h2>Battle Result:</h2>
+ <p class="response"></p>
+ <p>Time to first token: 500ms</p>
+ <p>Total generation time: 1.3s</p>
+ <p>Token usage: 64 tokens</p>
+ <p>API cost: $0.02</p>
+ <p>Judge score: 92/100</p>
+ <button id="viewEvidence" class="button">VIEW THE EVIDENCE</button>
+ </div>
+ </div>
+ </div>
+</div>
+
+<script>
+document.getElementById('openAIButton').addEventListener('click', function() {
+ document.getElementById('battleResult').style.display = 'block';
+ document.querySelector('.response').textContent = "OpenAI / GPT - The Emerald Knight wins the joust! Their reasoning was precise and their responses flowed with grace.";
+});
+
+document.getElementById('claudeButton').addEventListener('click', function() {
+ document.getElementById('battleResult').style.display = 'block';
+ document.querySelector('.response').textContent = "Claude - The Golden Scholar outshines in accuracy, but OpenAI / GPT's strategy wins the day.";
+});
+
+document.getElementById('geminiButton').addEventListener('click', function() {
+ document.getElementById('battleResult').style.display = 'block';
+ document.querySelector('.response').textContent = "Gemini - The Celestial Mage displays a keen intellect, but Grok's strategic mind prevails.";
+});
+
+document.getElementById('grokButton').addEventListener('click', function() {
+ document.getElementById('battleResult').style.display = 'block';
+ document.querySelector('.response').textContent = "Grok - The Black Knight stands strong in battle. Claude - The Golden Scholar's precision cannot overpower Grok's resolve.";
+});
+
+document.getElementById('deepSeekButton').addEventListener('click', function() {
+ document.getElementById('battleResult').style.display = 'block';
+ document.querySelector('.response').textContent = "DeepSeek - The Eastern Strategist's tactics are formidable, but Llama - The Crimson Ranger's agility wins the duel.";
+});
+
+document.getElementById('llamaButton').addEventListener('click', function() {
+ document.getElementById('battleResult').style.display = 'block';
+ document.querySelector('.response').textContent = "Llama - The Crimson Ranger outmaneuvers all with speed and precision, leaving the others in awe of their combat prowess.";
+});
+
+document.getElementById('viewEvidence').addEventListener('click', function() {
+ alert("This is where you would view detailed evidence, but due to constraints, this feature cannot be implemented here.");
+});
+</script>
+</body>
+</html>" title="Ultimate battle"></iframe></div>
+</body></html>
\ No newline at end of file
← 5cf8d32 auto-data-snapshot: 2026-08-31T07:38:15 (4 data files) — dat
·
back to Model Arena
·
add DTD roster and fresh daily challenges 328547e →