← back to Model Arena
snapshot before restart: preserve in-flight work (auto-saved by /restart pre-reboot)
c05d7f333f80ba74a492023b6023469786a9ba3e · 2026-08-17 06:52:32 -0700 · Steve
Files touched
A data/artifacts/2175000d921d/qwen25-7b.htmlA data/artifacts/2175000d921d/qwen3-14b.htmlA data/artifacts/32afbeb737da/gemma3-12b.htmlA data/artifacts/32afbeb737da/hermes3-8b.htmlA data/artifacts/32afbeb737da/qwen25-7b.htmlA data/artifacts/32afbeb737da/qwen3-14b.htmlA data/artifacts/6b2c5f529510/qwen25-7b.htmlA data/artifacts/6b2c5f529510/qwen3-14b.htmlA data/artifacts/977f3b1cff04/gemma3-12b.htmlA data/artifacts/977f3b1cff04/hermes3-8b.htmlA data/artifacts/977f3b1cff04/qwen25-7b.htmlA data/artifacts/977f3b1cff04/qwen3-14b.htmlA data/artifacts/ced61865a6fa/qwen25-7b.htmlA data/artifacts/ced61865a6fa/qwen3-14b.htmlA data/artifacts/e360a7ce2017/gemma3-12b.htmlA data/artifacts/e360a7ce2017/hermes3-8b.htmlA data/artifacts/e360a7ce2017/qwen25-7b.htmlA data/artifacts/e360a7ce2017/qwen3-14b.htmlA data/artifacts/e597f64e5fa7/gemma3-12b.htmlA data/artifacts/e597f64e5fa7/hermes3-8b.htmlA data/artifacts/e597f64e5fa7/qwen25-7b.htmlA data/artifacts/e597f64e5fa7/qwen3-14b.htmlA data/artifacts/e5cfed9cc0d5/gemma3-12b.htmlA data/artifacts/e5cfed9cc0d5/hermes3-8b.htmlA data/artifacts/e5cfed9cc0d5/qwen25-7b.htmlA data/artifacts/e5cfed9cc0d5/qwen3-14b.htmlA data/artifacts/fae3d1590b5b/gemma3-12b.htmlA data/artifacts/fae3d1590b5b/hermes3-8b.htmlA data/artifacts/fae3d1590b5b/qwen25-7b.htmlA data/artifacts/fae3d1590b5b/qwen3-14b.html
Diff
commit c05d7f333f80ba74a492023b6023469786a9ba3e
Author: Steve <steve@designerwallcoverings.com>
Date: Mon Aug 17 06:52:32 2026 -0700
snapshot before restart: preserve in-flight work (auto-saved by /restart pre-reboot)
---
data/artifacts/2175000d921d/qwen25-7b.html | 91 +++++++++++
data/artifacts/2175000d921d/qwen3-14b.html | 119 +++++++++++++++
data/artifacts/32afbeb737da/gemma3-12b.html | 149 ++++++++++++++++++
data/artifacts/32afbeb737da/hermes3-8b.html | 143 ++++++++++++++++++
data/artifacts/32afbeb737da/qwen25-7b.html | 97 ++++++++++++
data/artifacts/32afbeb737da/qwen3-14b.html | 137 +++++++++++++++++
data/artifacts/6b2c5f529510/qwen25-7b.html | 131 ++++++++++++++++
data/artifacts/6b2c5f529510/qwen3-14b.html | 151 +++++++++++++++++++
data/artifacts/977f3b1cff04/gemma3-12b.html | 93 ++++++++++++
data/artifacts/977f3b1cff04/hermes3-8b.html | 94 ++++++++++++
data/artifacts/977f3b1cff04/qwen25-7b.html | 81 ++++++++++
data/artifacts/977f3b1cff04/qwen3-14b.html | 117 +++++++++++++++
data/artifacts/ced61865a6fa/qwen25-7b.html | 162 ++++++++++++++++++++
data/artifacts/ced61865a6fa/qwen3-14b.html | 224 ++++++++++++++++++++++++++++
data/artifacts/e360a7ce2017/gemma3-12b.html | 65 ++++++++
data/artifacts/e360a7ce2017/hermes3-8b.html | 81 ++++++++++
data/artifacts/e360a7ce2017/qwen25-7b.html | 93 ++++++++++++
data/artifacts/e360a7ce2017/qwen3-14b.html | 142 ++++++++++++++++++
data/artifacts/e597f64e5fa7/gemma3-12b.html | 126 ++++++++++++++++
data/artifacts/e597f64e5fa7/hermes3-8b.html | 115 ++++++++++++++
data/artifacts/e597f64e5fa7/qwen25-7b.html | 72 +++++++++
data/artifacts/e597f64e5fa7/qwen3-14b.html | 116 ++++++++++++++
data/artifacts/e5cfed9cc0d5/gemma3-12b.html | 130 ++++++++++++++++
data/artifacts/e5cfed9cc0d5/hermes3-8b.html | 209 ++++++++++++++++++++++++++
data/artifacts/e5cfed9cc0d5/qwen25-7b.html | 100 +++++++++++++
data/artifacts/e5cfed9cc0d5/qwen3-14b.html | 160 ++++++++++++++++++++
data/artifacts/fae3d1590b5b/gemma3-12b.html | 62 ++++++++
data/artifacts/fae3d1590b5b/hermes3-8b.html | 66 ++++++++
data/artifacts/fae3d1590b5b/qwen25-7b.html | 72 +++++++++
data/artifacts/fae3d1590b5b/qwen3-14b.html | 101 +++++++++++++
30 files changed, 3499 insertions(+)
diff --git a/data/artifacts/2175000d921d/qwen25-7b.html b/data/artifacts/2175000d921d/qwen25-7b.html
new file mode 100644
index 0000000..b2ac390
--- /dev/null
+++ b/data/artifacts/2175000d921d/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; }
+ canvas { display: block; }
+ </style>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+<script>
+const canvas = document.getElementById('canvas');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+const ctx = canvas.getContext('2d');
+
+class Ball {
+ constructor(x, y, radius) {
+ this.x = x;
+ this.y = y;
+ this.radius = radius;
+ this.gravity = 0.5;
+ this.velocityY = 0;
+ this.accelerationY = 0;
+ }
+
+ update() {
+ this.velocityY += this.accelerationY;
+ this.y += this.velocityY;
+ this.checkBounds();
+ }
+
+ checkBounds() {
+ if (this.y + this.radius > canvas.height) {
+ this.y = canvas.height - this.radius;
+ this.velocityY *= -0.7; // Bounce effect
+ }
+ }
+
+ draw(ctx) {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+ ctx.fillStyle = 'black';
+ ctx.fill();
+ ctx.closePath();
+ ctx.beginPath();
+ ctx.moveTo(this.x - this.radius / 4, this.y - this.radius / 4);
+ ctx.lineTo(this.x + this.radius / 4, this.y + this.radius / 4);
+ ctx.strokeStyle = 'white';
+ ctx.stroke();
+ }
+}
+
+const balls = [];
+for (let i = 0; i < 20; i++) {
+ const ball = new Ball(canvas.width / 2, canvas.height - 50, 10);
+ balls.push(ball);
+}
+
+function drawBalls() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ for (const ball of balls) {
+ ball.update();
+ ball.draw(ctx);
+ }
+}
+
+document.body.style.background = 'white';
+
+let gravitySlider = document.createElement('input');
+gravitySlider.type = 'range';
+gravitySlider.min = 0;
+gravitySlider.max = 2;
+gravitySlider.value = 1;
+gravitySlider.oninput = function() {
+ for (const ball of balls) {
+ ball.gravity = this.value;
+ }
+ drawBalls();
+};
+
+document.body.appendChild(gravitySlider);
+
+setInterval(drawBalls, 30);
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/2175000d921d/qwen3-14b.html b/data/artifacts/2175000d921d/qwen3-14b.html
new file mode 100644
index 0000000..5fc16bb
--- /dev/null
+++ b/data/artifacts/2175000d921d/qwen3-14b.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Bouncing Balls with Gravity</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: #111;
+ color: white;
+ 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;
+ }
+ #controls label {
+ display: block;
+ margin: 5px 0;
+ }
+ </style>
+</head>
+<body>
+ <div id="controls">
+ <label>Gravity: <span id="gravityValue">9.8</span></label>
+ <input type="range" id="gravitySlider" min="0.1" max="20" step="0.1" value="9.8">
+ </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');
+
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ let gravity = parseFloat(gravitySlider.value);
+ gravityValue.textContent = gravity.toFixed(1);
+
+ gravitySlider.addEventListener('input', (e) => {
+ gravity = parseFloat(e.target.value);
+ gravityValue.textContent = gravity.toFixed(1);
+ });
+
+ window.addEventListener('resize', () => {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ });
+
+ const balls = [];
+ const trails = [];
+
+ class Ball {
+ constructor() {
+ this.x = Math.random() * canvas.width;
+ this.y = Math.random() * canvas.height;
+ this.vx = (Math.random() - 0.5) * 10;
+ this.vy = (Math.random() - 0.5) * 10;
+ this.radius = Math.random() * 20 + 10;
+ this.color = `hsl(${Math.random() * 360}, 70%, 50%)`;
+ }
+
+ update() {
+ this.vy += gravity;
+ this.x += this.vx;
+ this.y += this.vy;
+
+ if (this.x - this.radius < 0 || this.x + this.radius > canvas.width) {
+ this.vx *= -1;
+ }
+ if (this.y - this.radius < 0) {
+ this.vy *= -0.8;
+ this.y = this.radius;
+ } else if (this.y + this.radius > canvas.height) {
+ this.vy *= -0.8;
+ this.y = canvas.height - this.radius;
+ }
+ }
+
+ draw(ctx) {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+ ctx.fillStyle = this.color;
+ ctx.fill();
+ ctx.strokeStyle = this.color;
+ ctx.stroke();
+ }
+ }
+
+ for (let i = 0; i < 20; i++) {
+ balls.push(new Ball());
+ }
+
+ function animate() {
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ for (let ball of balls) {
+ ball.update();
+ ball.draw(ctx);
+ }
+
+ requestAnimationFrame(animate);
+ }
+
+ animate();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/32afbeb737da/gemma3-12b.html b/data/artifacts/32afbeb737da/gemma3-12b.html
new file mode 100644
index 0000000..edcdc38
--- /dev/null
+++ b/data/artifacts/32afbeb737da/gemma3-12b.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Conway's Game of Life</title>
+ <style>
+ body { margin: 0; overflow: hidden; }
+ canvas { display: block; }
+ #controls { position: absolute; top: 10px; left: 10px; background-color: rgba(255, 255, 255, 0.7); padding: 10px; border-radius: 5px; }
+ </style>
+</head>
+<body>
+
+<div id="controls">
+ <button id="playPause">Play</button>
+ <button id="randomize">Randomize</button>
+ <input type="range" id="speedSlider" min="1" max="100" value="25"> <span id="speedValue">25</span>
+</div>
+
+<canvas id="gameCanvas"></canvas>
+
+
+<script>
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+const playPauseButton = document.getElementById('playPause');
+const randomizeButton = document.getElementById('randomize');
+const speedSlider = document.getElementById('speedSlider');
+const speedValueDisplay = document.getElementById('speedValue');
+
+let gridWidth = 50;
+let gridHeight = 30;
+let cellSize = 10;
+canvas.width = gridWidth * cellSize;
+canvas.height = gridHeight * cellSize;
+
+let cells = [];
+let running = false;
+let generation = 0;
+let speed = 25; // Initial speed value
+
+
+
+function initializeGrid() {
+ cells = [];
+ for (let row = 0; row < gridHeight; row++) {
+ cells[row] = [];
+ for (let col = 0; col < gridWidth; col++) {
+ cells[row][col] = Math.random() < 0.25 ? 1 : 0; // Randomly initialize cells with a probability of 0.25 being alive
+ }
+ }
+}
+
+
+function draw() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ for (let row = 0; row < gridHeight; row++) {
+ for (let col = 0; col < gridWidth; col++) {
+ if (cells[row][col] === 1) {
+ ctx.fillStyle = 'black';
+ } else {
+ ctx.fillStyle = 'white';
+ }
+ ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
+ }
+ }
+}
+
+
+function update() {
+ let nextCells = [];
+ for (let row = 0; row < gridHeight; row++) {
+ nextCells[row] = [];
+ for (let col = 0; col < gridWidth; col++) {
+ let neighbors = countNeighbors(row, col);
+
+ if (cells[row][col] === 1) { // Alive cell
+ if (neighbors < 2 || neighbors > 3) {
+ nextCells[row][col] = 0; // Dies due to underpopulation or overpopulation
+ } else {
+ nextCells[row][col] = 1; // Survives
+ }
+ } else { // Dead cell
+ if (neighbors === 3) {
+ nextCells[row][col] = 1; // Becomes alive due to reproduction
+ } else {
+ nextCells[row][col] = 0; // Remains dead
+ }
+ }
+ }
+ }
+
+ cells = nextCells;
+ generation++;
+}
+
+
+function countNeighbors(row, col) {
+ let count = 0;
+ for (let i = -1; i <= 1; i++) {
+ for (let j = -1; j <= 1; j++) {
+ if (i === 0 && j === 0) continue; // Skip the cell itself
+
+ let neighborRow = row + i;
+ let neighborCol = col + j;
+
+ if (neighborRow >= 0 && neighborRow < gridHeight && neighborCol >= 0 && neighborCol < gridWidth) {
+ count += cells[neighborRow][neighborCol];
+ }
+ }
+ }
+ return count;
+}
+
+
+function gameLoop() {
+ if (running) {
+ update();
+ draw();
+ }
+ requestAnimationFrame(gameLoop);
+}
+
+speedSlider.addEventListener('input', function() {
+ speed = parseInt(this.value);
+ speedValueDisplay.textContent = speed;
+});
+
+
+playPauseButton.addEventListener('click', () => {
+ running = !running;
+ playPauseButton.textContent = running ? 'Pause' : 'Play';
+});
+
+randomizeButton.addEventListener('click', () => {
+ initializeGrid();
+ running = false; // Stop the game if it was running
+ playPauseButton.textContent = 'Play';
+});
+
+
+speedValueDisplay.textContent = speed;
+
+initializeGrid();
+gameLoop();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/32afbeb737da/hermes3-8b.html b/data/artifacts/32afbeb737da/hermes3-8b.html
new file mode 100644
index 0000000..2160613
--- /dev/null
+++ b/data/artifacts/32afbeb737da/hermes3-8b.html
@@ -0,0 +1,143 @@
+<!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 {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ background-color: #f0f0f0;
+ }
+
+ canvas {
+ border: 1px solid #ccc;
+ background-color: #fff;
+ }
+ </style>
+</head>
+<body>
+ <canvas id="gameCanvas" width="300" height="200"></canvas>
+ <div>
+ <button id="playPauseBtn">Play</button>
+ <button id="randomizeBtn">Randomize</button>
+ <input type="range" id="speedSlider" min="1" max="100" value="10">
+ </div>
+
+ <script>
+ const canvas = document.getElementById('gameCanvas');
+ const ctx = canvas.getContext('2d');
+
+ let cells = [];
+ let isPlaying = false;
+ let speed = 10;
+
+ // Initialize cells with dead state
+ for (let i = 0; i < canvas.height; i++) {
+ cells[i] = [];
+ for (let j = 0; j < canvas.width; j++) {
+ cells[i][j] = false;
+ }
+ }
+
+ function randomizeCells() {
+ for (let i = 0; i < canvas.height; i++) {
+ for (let j = 0; j < canvas.width; j++) {
+ cells[i][j] = Math.random() > 0.5;
+ }
+ }
+ }
+
+ // Draw cell on canvas
+ function drawCell(x, y, isAlive) {
+ ctx.fillStyle = isAlive ? '#000' : '#fff';
+ ctx.fillRect(x, y, 1, 1);
+
+ if (isAlive) {
+ ctx.strokeRect(x, y, 1, 1);
+ }
+ }
+
+ // Count alive neighbors for a cell
+ function countNeighbors(x, y) {
+ let sum = -cells[y ? y - 1 : 0][x < 0 ? 0 : x - 1];
+
+ for (let i = y - 1; i <= y + 1; i++) {
+ for (let j = x - 1; j <= x + 1; j++) {
+ sum += cells[i % canvas.height][j % canvas.width];
+ }
+ }
+
+ sum -= cells[y < 0 || y >= canvas.height ? 0 : y - 1][x < 0 || x >= canvas.width ? 0 : x - 1];
+
+ return Math.max(0, sum);
+ }
+
+ // Update cells state based on Conway's rules
+ function updateCells() {
+ let newCells = [];
+
+ for (let i = 0; i < canvas.height; i++) {
+ newCells[i] = [];
+ for (let j = 0; j < canvas.width; j++) {
+ let neighbors = countNeighbors(j, i);
+
+ if (cells[i][j]) {
+ newCells[i][j] = (neighbors == 2 || neighbors == 3);
+ } else {
+ newCells[i][j] = (neighbors == 3);
+ }
+ }
+ }
+
+ cells = newCells;
+ }
+
+ // Draw game state
+ function drawGame() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ for (let i = 0; i < canvas.height; i++) {
+ for (let j = 0; j < canvas.width; j++) {
+ drawCell(j, i, cells[i][j]);
+ }
+ }
+ }
+
+ // Game loop
+ function gameLoop() {
+ if (!isPlaying) return;
+
+ updateCells();
+ drawGame();
+
+ setTimeout(() => { gameLoop(); }, speed * 1000);
+ }
+
+ document.getElementById('randomizeBtn').addEventListener('click', () => {
+ randomizeCells();
+ drawGame();
+ });
+
+ document.getElementById('playPauseBtn').addEventListener('click', () => {
+ isPlaying = !isPlaying;
+
+ if (isPlaying) {
+ gameLoop();
+ }
+ });
+
+ document.getElementById('speedSlider').addEventListener('input', (e) => {
+ speed = e.target.value;
+ });
+
+ // Initial random cells and draw
+ randomizeCells();
+ drawGame();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/32afbeb737da/qwen25-7b.html b/data/artifacts/32afbeb737da/qwen25-7b.html
new file mode 100644
index 0000000..9b603b0
--- /dev/null
+++ b/data/artifacts/32afbeb737da/qwen25-7b.html
@@ -0,0 +1,97 @@
+<!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 { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
+ canvas { border: 1px solid black; }
+ input[type=range] { width: 200px; }
+ button { margin: 5px; padding: 5px; cursor: pointer; }
+ </style>
+</head>
+<body>
+ <canvas id="gameCanvas" width="800" height="600"></canvas>
+ <br>
+ <button onclick="playPause()">Play/Pause</button>
+ <button onclick="randomize()">Randomize</button>
+ <input type="range" min="1" max="50" value="25" step="1" onchange="setSpeed(this.value)" id="speedSlider">
+ <script>
+ const canvas = document.getElementById('gameCanvas');
+ const ctx = canvas.getContext('2d');
+ let cells = [];
+ let isPlaying = false;
+ let intervalId;
+ const width = 800;
+ const height = 600;
+ const cellSize = 10;
+
+ function init() {
+ for (let y = 0; y < height / cellSize; y++) {
+ cells[y] = [];
+ for (let x = 0; x < width / cellSize; x++) {
+ cells[y][x] = Math.random() > 0.8 ? 1 : 0;
+ }
+ }
+ }
+
+ function draw() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ for (let y = 0; y < height / cellSize; y++) {
+ for (let x = 0; x < width / cellSize; x++) {
+ if (cells[y][x] === 1) {
+ ctx.fillRect(x * cellSize, y * cellSize, cellSize - 1, cellSize - 1);
+ }
+ }
+ }
+ }
+
+ function update() {
+ const next = [...cells];
+ for (let y = 0; y < height / cellSize; y++) {
+ for (let x = 0; x < width / cellSize; x++) {
+ let neighbors = 0;
+ for (let dy = -1; dy <= 1; dy++) {
+ for (let dx = -1; dx <= 1; dx++) {
+ if (!(dx === 0 && dy === 0)) {
+ const nx = x + dx;
+ const ny = y + dy;
+ if (nx >= 0 && nx < width / cellSize && ny >= 0 && ny < height / cellSize) {
+ neighbors += cells[ny][nx];
+ }
+ }
+ }
+ }
+ next[y][x] = cells[y][x] ? neighbors === 2 || neighbors === 3 : neighbors === 3;
+ }
+ }
+ cells = next;
+ }
+
+ function playPause() {
+ isPlaying = !isPlaying;
+ if (isPlaying) {
+ intervalId = setInterval(update, 1000 / document.getElementById('speedSlider').value);
+ } else {
+ clearInterval(intervalId);
+ }
+ }
+
+ function randomize() {
+ init();
+ draw();
+ }
+
+ function setSpeed(speed) {
+ isPlaying ? clearInterval(intervalId) : null;
+ intervalId = setInterval(update, 1000 / speed);
+ }
+
+ window.onload = () => {
+ init();
+ draw();
+ };
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/32afbeb737da/qwen3-14b.html b/data/artifacts/32afbeb737da/qwen3-14b.html
new file mode 100644
index 0000000..60dd819
--- /dev/null
+++ b/data/artifacts/32afbeb737da/qwen3-14b.html
@@ -0,0 +1,137 @@
+<!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: monospace;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ }
+ canvas {
+ background: #222;
+ border: 2px solid #444;
+ display: block;
+ }
+ #controls {
+ margin-top: 10px;
+ }
+ #controls button, #controls input {
+ margin: 5px;
+ padding: 6px 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 isPlaying = 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.1 ? 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 (!isPlaying) {
+ isPlaying = true;
+ document.getElementById('playPause').textContent = 'Pause';
+ interval = setInterval(() => {
+ updateGrid();
+ drawGrid();
+ }, 1000 / parseInt(document.getElementById('speed').value));
+ } else {
+ isPlaying = false;
+ document.getElementById('playPause').textContent = 'Play';
+ clearInterval(interval);
+ }
+ }
+
+ function randomizeGrid() {
+ grid = createGrid();
+ drawGrid();
+ }
+
+ document.getElementById('playPause').addEventListener('click', startGame);
+ document.getElementById('randomize').addEventListener('click', randomizeGrid);
+ document.getElementById('speed').addEventListener('input', () => {
+ if (isPlaying) {
+ 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/6b2c5f529510/qwen25-7b.html b/data/artifacts/6b2c5f529510/qwen25-7b.html
new file mode 100644
index 0000000..1a716b5
--- /dev/null
+++ b/data/artifacts/6b2c5f529510/qwen25-7b.html
@@ -0,0 +1,131 @@
+<!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: black;
+ }
+ canvas {
+ display: block;
+ }
+ </style>
+</head>
+<body>
+ <script>
+ const canvas = document.createElement('canvas');
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ document.body.appendChild(canvas);
+ const ctx = canvas.getContext('2d');
+
+ class Rocket {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ this.angle = Math.random() * 2 * Math.PI;
+ this.speed = 5 + Math.random() * 3;
+ this.trailLength = 0.1 + Math.random() * 0.5;
+ this.glow = 0.8 + Math.random() * 0.4;
+ }
+
+ update() {
+ this.x += this.speed * Math.cos(this.angle);
+ this.y += this.speed * Math.sin(this.angle);
+ this.trailLength -= 0.02 + Math.random() * 0.15;
+ this.glow = Math.max(0.3, this.glow - 0.04);
+ }
+
+ draw() {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, 6, 0, 2 * Math.PI);
+ ctx.fillStyle = `rgba(255, 255, 255, ${this.glow})`;
+ ctx.fill();
+
+ const length = this.trailLength;
+ for (let t = 0; t < 1; t += 0.03) {
+ const x = this.x + Math.cos(this.angle - t * length) * t * length;
+ const y = this.y + Math.sin(this.angle - t * length) * t * length;
+ ctx.fillRect(x, y, 2, 2);
+ }
+ }
+ }
+
+ class Particle {
+ constructor(x, y, angle, speed) {
+ this.x = x;
+ this.y = y;
+ this.angle = angle;
+ this.speed = speed;
+ this.life = 10 + Math.random() * 30;
+ }
+
+ update() {
+ this.x += this.speed * Math.cos(this.angle);
+ this.y += this.speed * Math.sin(this.angle);
+ this.life -= 0.25;
+ }
+
+ draw() {
+ const size = (this.life / 10) * 4 + 3;
+ ctx.fillRect(this.x, this.y, size, size);
+ }
+ }
+
+ function launchRocket(x, y) {
+ rockets.push(new Rocket(x, y));
+ }
+
+ document.addEventListener('click', (e) => {
+ const x = e.clientX - canvas.offsetLeft;
+ const y = e.clientY - canvas.offsetTop;
+ launchRocket(x, y);
+ });
+
+ let rockets = [];
+ function animate() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ rockets.forEach((rocket, index) => {
+ rocket.update();
+ if (rocket.trailLength <= 0 || rocket.glow < 0.3) {
+ rockets.splice(index, 1);
+ } else {
+ rocket.draw();
+ const particles = [];
+ for (let i = 0; i < 20 + Math.random() * 40; i++) {
+ const angle = -rocket.angle + (Math.random() * 2 - 1) * 0.3;
+ const speed = 5 + Math.random() * 15;
+ particles.push(new Particle(rocket.x, rocket.y, angle, speed));
+ }
+ particles.forEach(particle => {
+ particle.update();
+ if (particle.life > 0) {
+ particle.draw();
+ } else {
+ rockets.splice(index, 1);
+ }
+ });
+ }
+ });
+
+ requestAnimationFrame(animate);
+ }
+
+ animate();
+
+ function autoShow() {
+ setInterval(() => {
+ const x = Math.random() * canvas.width;
+ const y = Math.random() * canvas.height;
+ launchRocket(x, y);
+ }, 2000);
+ }
+
+ autoShow();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/6b2c5f529510/qwen3-14b.html b/data/artifacts/6b2c5f529510/qwen3-14b.html
new file mode 100644
index 0000000..b2ed7d0
--- /dev/null
+++ b/data/artifacts/6b2c5f529510/qwen3-14b.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Interactive Fireworks</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: black;
+ height: 100%;
+ width: 100%;
+ touch-action: none;
+ }
+ canvas {
+ display: block;
+ }
+ </style>
+</head>
+<body>
+<canvas></canvas>
+<script>
+ const canvas = document.querySelector('canvas');
+ const ctx = canvas.getContext('2d');
+ let width, height;
+
+ function resize() {
+ width = canvas.width = window.innerWidth;
+ height = canvas.height = window.innerHeight;
+ }
+ window.addEventListener('resize', resize);
+ resize();
+
+ const particles = [];
+ const rockets = [];
+
+ 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.exploded = false;
+ this.life = 100;
+ }
+
+ update() {
+ if (!this.exploded) {
+ this.x += Math.cos(this.angle) * this.speed;
+ this.y += Math.sin(this.angle) * this.speed;
+ this.life--;
+ if (this.life <= 0) {
+ this.explode();
+ }
+ }
+ }
+
+ explode() {
+ const count = 50 + Math.floor(Math.random() * 50);
+ for (let i = 0; i < count; i++) {
+ particles.push(new Particle(this.x, this.y, Math.random() * 2 * Math.PI, 2 + Math.random() * 3, 0.05 + Math.random() * 0.1, 0.5 + Math.random() * 0.5));
+ }
+ this.exploded = true;
+ }
+
+ draw(ctx) {
+ if (!this.exploded) {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, 4, 0, Math.PI * 2);
+ ctx.fillStyle = 'white';
+ ctx.fill();
+ }
+ }
+ }
+
+ class Particle {
+ constructor(x, y, angle, speed, friction, lifespan) {
+ this.x = x;
+ this.y = y;
+ this.angle = angle;
+ this.speed = speed;
+ this.friction = friction;
+ this.lifespan = lifespan;
+ this.life = lifespan;
+ this.color = `hsl(${Math.random() * 360}, 100%, 70%)`;
+ }
+
+ update() {
+ this.life--;
+ this.speed *= this.friction;
+ this.x += Math.cos(this.angle) * this.speed;
+ this.y += Math.sin(this.angle) * this.speed;
+ this.angle += (Math.random() - 0.5) * 0.1;
+ }
+
+ draw(ctx) {
+ const alpha = this.life / this.lifespan;
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, 2 + Math.random() * 2, 0, Math.PI * 2);
+ ctx.fillStyle = this.color + `, ${alpha}`;
+ ctx.fill();
+ }
+ }
+
+ let autoShow = true;
+ let autoShowInterval = null;
+
+ function launchRocket(x, y) {
+ rockets.push(new Rocket(x, y));
+ }
+
+ canvas.addEventListener('click', (e) => {
+ launchRocket(e.clientX, e.clientY);
+ });
+
+ function autoShowFireworks() {
+ if (autoShow) {
+ const x = Math.random() * width;
+ const y = Math.random() * height;
+ launchRocket(x, y);
+ }
+ }
+
+ autoShowInterval = setInterval(autoShowFireworks, 2000);
+
+ function animate() {
+ ctx.clearRect(0, 0, width, height);
+ for (let i = rockets.length - 1; i >= 0; i--) {
+ rockets[i].update();
+ rockets[i].draw(ctx);
+ if (rockets[i].life <= 0) {
+ rockets.splice(i, 1);
+ }
+ }
+
+ for (let i = particles.length - 1; i >= 0; i--) {
+ particles[i].update();
+ particles[i].draw(ctx);
+ if (particles[i].life <= 0) {
+ particles.splice(i, 1);
+ }
+ }
+
+ requestAnimationFrame(animate);
+ }
+
+ animate();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/977f3b1cff04/gemma3-12b.html b/data/artifacts/977f3b1cff04/gemma3-12b.html
new file mode 100644
index 0000000..769e214
--- /dev/null
+++ b/data/artifacts/977f3b1cff04/gemma3-12b.html
@@ -0,0 +1,93 @@
+<!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>
+ body { margin: 0; overflow: hidden; background-color: black; }
+ canvas { display: block; }
+ </style>
+</head>
+<body>
+ <canvas id="starCanvas"></canvas>
+
+ <script>
+ const canvas = document.getElementById('starCanvas');
+ const ctx = canvas.getContext('2d');
+ let width, height;
+
+ function init() {
+ width = canvas.width = window.innerWidth;
+ height = canvas.height = window.innerHeight;
+ stars = [];
+ for (let i = 0; i < 500; i++) {
+ stars.push({
+ x: Math.random() * width,
+ y: Math.random() * height,
+ z: Math.random() * 100, // Depth for perspective
+ speedX: (Math.random() - 0.5) * 0.5,
+ speedY: (Math.random() - 0.5) * 0.5
+ });
+ }
+ warpDirection = { x: 0, y: 0 }; // Initial warp direction
+ warpSpeed = 1; // Warp speed factor
+
+ }
+
+
+ let stars = [];
+ let warpDirection = { x: 0, y: 0 };
+ let warpSpeed = 1;
+
+
+
+ function draw() {
+ ctx.clearRect(0, 0, width, height);
+
+ for (const star of stars) {
+ // Apply warp effect based on mouse position and speed
+ let xOffset = warpDirection.x * warpSpeed * star.z / 100; // Scale by depth for perspective
+ let yOffset = warpDirection.y * warpSpeed * star.z / 100;
+
+ let adjustedX = star.x + xOffset;
+ let adjustedY = star.y + yOffset;
+
+ // Perspective: Make stars appear closer/farther based on depth (z)
+ const starSize = Math.max(1, 5 - star.z / 20); // Smaller size for farther stars
+
+
+ ctx.fillStyle = 'rgba(255, 255, 255, ' + (star.z/100) + ')';
+ ctx.fillRect(adjustedX, adjustedY, starSize, starSize);
+
+ }
+ }
+
+
+
+ function update() {
+ // Update warp direction based on mouse position
+ warpDirection.x = (mousePosition.x - width / 2) * 0.01; // Scale for sensitivity
+ warpDirection.y = (mousePosition.y - height / 2) * 0.01;
+
+
+ draw();
+ requestAnimationFrame(update);
+ }
+
+ let mousePosition = { x: 0, y: 0 };
+
+ canvas.addEventListener('mousemove', function(event) {
+ mousePosition.x = event.clientX;
+ mousePosition.y = event.clientY;
+ });
+
+
+ init();
+ update();
+
+
+
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/977f3b1cff04/hermes3-8b.html b/data/artifacts/977f3b1cff04/hermes3-8b.html
new file mode 100644
index 0000000..67c9dd5
--- /dev/null
+++ b/data/artifacts/977f3b1cff04/hermes3-8b.html
@@ -0,0 +1,94 @@
+<!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>
+ body {
+ margin: 0;
+ overflow: hidden;
+ }
+ canvas {
+ display: block;
+ }
+ #speedSlider {
+ position: absolute;
+ bottom: 10px;
+ left: 10px;
+ }
+ </style>
+</head>
+<body>
+<canvas id="myCanvas"></canvas>
+<input type="range" min="1" max="50" value="10" id="speedSlider">
+<script>
+ const canvas = document.getElementById('myCanvas');
+ const ctx = canvas.getContext('2d');
+
+ let width, height;
+ let speed = 10;
+
+ function init() {
+ width = canvas.width = window.innerWidth;
+ height = canvas.height = window.innerHeight;
+
+ setInterval(draw, 1000 / speed);
+ }
+
+ function draw() {
+ ctx.clearRect(0, 0, width, height);
+
+ for(let i = 0; i < width; i++) {
+ let starColor = 'white';
+
+ if(Math.random() > 0.95) {
+ starColor = 'yellow';
+ }
+
+ let starSize = Math.random() * 2;
+
+ ctx.fillStyle = starColor;
+ ctx.beginPath();
+ ctx.arc(width / 2, height - i, starSize, 0, 2 * Math.PI);
+ ctx.fill();
+
+ if(Math.random() > 0.95) {
+ ctx.drawImage(createWarp(), width / 4, height - i);
+ }
+ }
+ }
+
+ function createWarp() {
+ let warpCanvas = document.createElement('canvas');
+ let warpCtx = warpCanvas.getContext('2d');
+
+ let warpWidth = Math.random() * (width / 3) + width / 6;
+ let warpHeight = height - canvas.offsetTop;
+
+ warpCanvas.width = warpWidth;
+ warpCanvas.height = warpHeight;
+
+ warpCtx.fillStyle = 'rgba(255,255,255,0.5)';
+ warpCtx.fillRect(0, 0, warpWidth, warpHeight);
+
+ return warpCanvas;
+ }
+
+ function adjustSpeed(newValue) {
+ speed = newValue;
+ }
+
+ document.getElementById('speedSlider').addEventListener('input', function() {
+ adjustSpeed(this.value);
+ });
+
+ window.addEventListener('resize', function() {
+ canvas.width = width = window.innerWidth;
+ canvas.height = height = window.innerHeight;
+ });
+
+ init();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/977f3b1cff04/qwen25-7b.html b/data/artifacts/977f3b1cff04/qwen25-7b.html
new file mode 100644
index 0000000..409db5f
--- /dev/null
+++ b/data/artifacts/977f3b1cff04/qwen25-7b.html
@@ -0,0 +1,81 @@
+<!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, html {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background-color: #000;
+ }
+ canvas {
+ display: block;
+ }
+ </style>
+</head>
+<body>
+ <canvas id="starfield"></canvas>
+ <input type="range" min="1" max="20" value="5" step="1" oninput="setSpeed(this.value)" id="speedSlider">
+ <script>
+ const canvas = document.getElementById('starfield');
+ const ctx = canvas.getContext('2d');
+ const speedSlider = document.getElementById('speedSlider');
+
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ function createStar(x, y) {
+ return { x: x, y: y, velX: 0, velY: 0 };
+ }
+
+ let stars = [];
+ for (let i = 0; i < 1000; i++) {
+ const x = Math.random() * canvas.width;
+ const y = Math.random() * canvas.height;
+ stars.push(createStar(x, y));
+ }
+
+ function drawStars() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ for (const star of stars) {
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ ctx.beginPath();
+ ctx.arc(star.x, star.y, 1, 0, Math.PI * 2);
+ ctx.fill();
+ }
+ }
+
+ function updateStars() {
+ const mousePos = { x: canvas.width / 2, y: canvas.height / 2 };
+ speedSlider.oninput = (e) => {
+ mousePos.x = e.target.value;
+ };
+
+ for (const star of stars) {
+ star.velX += (canvas.width / 2 - mousePos.x) * 0.01;
+ star.velY += (canvas.height / 2 - mousePos.y) * 0.01;
+
+ star.x += star.velX;
+ star.y += star.velY;
+
+ if (star.x < 0 || star.x > canvas.width) {
+ star.x = Math.random() * canvas.width;
+ star.y = Math.random() * canvas.height;
+ }
+ if (star.y < 0 || star.y > canvas.height) {
+ star.x = Math.random() * canvas.width;
+ star.y = Math.random() * canvas.height;
+ }
+ }
+
+ requestAnimationFrame(updateStars);
+ }
+
+ updateStars();
+ drawStars();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/977f3b1cff04/qwen3-14b.html b/data/artifacts/977f3b1cff04/qwen3-14b.html
new file mode 100644
index 0000000..bc9499e
--- /dev/null
+++ b/data/artifacts/977f3b1cff04/qwen3-14b.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Animated Starfield Warp</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ background: black;
+ color: white;
+ font-family: sans-serif;
+ }
+ canvas {
+ display: block;
+ }
+ #controls {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ z-index: 10;
+ }
+ #speedSlider {
+ width: 200px;
+ }
+ </style>
+</head>
+<body>
+ <div id="controls">
+ <label for="speedSlider">Warp Speed:</label>
+ <input type="range" id="speedSlider" min="0.1" max="5" step="0.1" value="1">
+ </div>
+ <canvas id="starfield"></canvas>
+ <script>
+ const canvas = document.getElementById('starfield');
+ const ctx = canvas.getContext('2d');
+ let width, height;
+ let stars = [];
+ let speed = 1;
+ let mouseX = 0;
+ let mouseY = 0;
+
+ function resize() {
+ width = canvas.width = window.innerWidth;
+ height = canvas.height = window.innerHeight;
+ initStars();
+ }
+
+ function initStars() {
+ stars = [];
+ for (let i = 0; i < 200; i++) {
+ stars.push({
+ x: Math.random() * width,
+ y: Math.random() * height,
+ z: Math.random() * 100 + 50,
+ previousZ: Math.random() * 100 + 50
+ });
+ }
+ }
+
+ function updateStars() {
+ for (let star of stars) {
+ // Apply warp effect based on mouse position
+ const warpStrength = 0.1;
+ const offsetX = (mouseX - width / 2) * warpStrength;
+ const offsetY = (mouseY - height / 2) * warpStrength;
+ star.z += (offsetX + offsetY) * speed;
+
+ // Wrap around
+ if (star.z > 1000) {
+ star.z = 0;
+ }
+ }
+ }
+
+ function drawStars() {
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
+ ctx.fillRect(0, 0, width, height);
+
+ ctx.fillStyle = 'white';
+ for (let star of stars) {
+ const size = 1.5 - star.z / 100;
+ const x = (star.x - width / 2) * (100 / star.z) + width / 2;
+ const y = (star.y - height / 2) * (100 / star.z) + height / 2;
+ ctx.beginPath();
+ ctx.arc(x, y, size, 0, Math.PI * 2);
+ ctx.fill();
+ }
+ }
+
+ function animate() {
+ updateStars();
+ drawStars();
+ requestAnimationFrame(animate);
+ }
+
+ function handleMouseMove(e) {
+ mouseX = e.clientX;
+ mouseY = e.clientY;
+ }
+
+ function handleSpeedChange(e) {
+ speed = parseFloat(e.target.value);
+ }
+
+ resize();
+ animate();
+
+ window.addEventListener('resize', resize);
+ canvas.addEventListener('mousemove', handleMouseMove);
+ document.getElementById('speedSlider').addEventListener('input', handleSpeedChange);
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/ced61865a6fa/qwen25-7b.html b/data/artifacts/ced61865a6fa/qwen25-7b.html
new file mode 100644
index 0000000..dcd6770
--- /dev/null
+++ b/data/artifacts/ced61865a6fa/qwen25-7b.html
@@ -0,0 +1,162 @@
+<!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;
+ padding: 20px;
+ }
+ .card-grid {
+ display: grid;
+ gap: 20px;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ justify-content: center;
+ }
+ .card {
+ border: 1px solid #ddd;
+ padding: 20px;
+ background-color: white;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+ text-align: center;
+ transition: transform 0.3s ease;
+ }
+ .card:hover {
+ transform: scale(1.05);
+ }
+ .search-box {
+ margin-bottom: 20px;
+ }
+ input[type="text"] {
+ width: calc(100% - 22px);
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ font-size: 16px;
+ }
+ th {
+ cursor: pointer;
+ }
+ </style>
+</head>
+<body>
+ <div class="search-box">
+ <input type="text" id="searchInput" placeholder="Search by SKU, Pattern, or Colorway...">
+ </div>
+ <table class="card-grid" id="catalogTable">
+ <thead>
+ <tr>
+ <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>Stock</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="card">
+ <td>WCV001</td>
+ <td>Floral</td>
+ <td>Red</td>
+ <td>$59.99</td>
+ <td>In Stock</td>
+ </tr>
+ <tr class="card">
+ <td>WCV002</td>
+ <td>Gingham</td>
+ <td>White</td>
+ <td>$49.99</td>
+ <td>In Stock</td>
+ </tr>
+ <tr class="card">
+ <td>WCV003</td>
+ <td>Breton Stripes</td>
+ <td>Navy</td>
+ <td>$65.99</td>
+ <td>In Stock</td>
+ </tr>
+ <tr class="card">
+ <td>WCV004</td>
+ <td>Herringbone</td>
+ <td>Brown</td>
+ <td>$72.99</td>
+ <td>In Stock</td>
+ </tr>
+ <tr class="card">
+ <td>WCV005</td>
+ <td>Solid</td>
+ <td>Gray</td>
+ <td>$45.99</td>
+ <td>In Stock</td>
+ </tr>
+ <tr class="card">
+ <td>WCV006</td>
+ <td>Chevron</td>
+ <td>Pink</td>
+ <td>$57.99</td>
+ <td>In Stock</td>
+ </tr>
+ <tr class="card">
+ <td>WCV007</td>
+ <td>Gingham</td>
+ <td>Black</td>
+ <td>$49.99</td>
+ <td>In Stock</td>
+ </tr>
+ <tr class="card">
+ <td>WCV008</td>
+ <td>Houndstooth</td>
+ <td>Tan</td>
+ <td>$63.99</td>
+ <td>In Stock</td>
+ </tr>
+ </tbody>
+ </table>
+ <script>
+ const table = document.getElementById("catalogTable");
+ const searchInput = document.getElementById("searchInput");
+
+ function sortTable(columnIndex) {
+ let rows, switching, i, x, y, shouldSwitch;
+ 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;
+ }
+ }
+ }
+
+ searchInput.addEventListener("input", function() {
+ let filter, table, tr, td, i, txtValue;
+ filter = this.value.toLowerCase();
+ table = document.getElementById("catalogTable");
+ tr = table.getElementsByTagName("tr");
+ for (i = 1; 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/ced61865a6fa/qwen3-14b.html b/data/artifacts/ced61865a6fa/qwen3-14b.html
new file mode 100644
index 0000000..24e7878
--- /dev/null
+++ b/data/artifacts/ced61865a6fa/qwen3-14b.html
@@ -0,0 +1,224 @@
+<!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;
+ margin: 0;
+ padding: 0;
+ background: #f4f4f4;
+ }
+
+ header {
+ background: #333;
+ color: #fff;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .search-box {
+ display: flex;
+ justify-content: center;
+ margin: 1rem 0;
+ }
+
+ .search-box input {
+ padding: 0.5rem;
+ width: 80%;
+ max-width: 600px;
+ font-size: 1rem;
+ }
+
+ .card-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1rem;
+ padding: 1rem;
+ }
+
+ .card {
+ background: #fff;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ }
+
+ .card-header {
+ padding: 0.75rem;
+ background: #e0e0e0;
+ font-weight: bold;
+ }
+
+ .card-body {
+ padding: 0.75rem;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .card-footer {
+ padding: 0.5rem;
+ background: #f0f0f0;
+ font-size: 0.9rem;
+ text-align: right;
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 1rem;
+ }
+
+ th, td {
+ padding: 0.5rem;
+ text-align: left;
+ border-bottom: 1px solid #ccc;
+ }
+
+ th {
+ cursor: pointer;
+ background: #eee;
+ }
+
+ .sortable:hover {
+ background: #ddd;
+ }
+
+ @media (max-width: 600px) {
+ .search-box input {
+ width: 100%;
+ }
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>Wallcovering Catalog</h1>
+ </header>
+ <div class="search-box">
+ <input type="text" id="searchBox" placeholder="Search by SKU, Pattern, or Colorway..." />
+ </div>
+ <div class="card-grid" id="catalogContainer">
+ <!-- Cards will be inserted here by JavaScript -->
+ </div>
+ <table id="tableView" style="display: none;">
+ <thead>
+ <tr>
+ <th class="sortable" data-sort="sku">SKU</th>
+ <th class="sortable" data-sort="pattern">Pattern</th>
+ <th class="sortable" data-sort="colorway">Colorway</th>
+ <th class="sortable" data-sort="price">Price</th>
+ <th class="sortable" data-sort="stock">Stock</th>
+ </tr>
+ </thead>
+ <tbody id="tableBody">
+ <!-- Table rows will be inserted here by JavaScript -->
+ </tbody>
+ </table>
+
+ <script>
+ const data = [
+ { sku: "WAL-001", pattern: "Geometric Grid", colorway: "Charcoal & Cream", price: "$29.99", stock: "120" },
+ { sku: "WAL-002", pattern: "Floral Bloom", colorway: "Teal & Gold", price: "$34.99", stock: "85" },
+ { sku: "WAL-003", pattern: "Modern Chevron", colorway: "Navy & White", price: "$27.99", stock: "150" },
+ { sku: "WAL-004", pattern: "Abstract Splash", colorway: "Mauve & Beige", price: "$25.99", stock: "200" },
+ { sku: "WAL-005", pattern: "Textured Stripe", colorway: "Olive & Gray", price: "$31.99", stock: "90" },
+ { sku: "WAL-006", pattern: "Retro Tiles", colorway: "Red & Yellow", price: "$36.99", stock: "60" },
+ { sku: "WAL-007", pattern: "Scandinavian Dot", colorway: "Blue & White", price: "$28.99", stock: "130" },
+ { sku: "WAL-008", pattern: "Urban Texture", colorway: "Black & Copper", price: "$32.99", stock: "70" }
+ ];
+
+ function renderCards(filteredData) {
+ const container = document.getElementById("catalogContainer");
+ container.innerHTML = "";
+ filteredData.forEach(item => {
+ const card = document.createElement("div");
+ card.className = "card";
+ card.innerHTML = `
+ <div class="card-header">${item.sku}</div>
+ <div class="card-body">
+ <strong>Pattern:</strong> ${item.pattern}<br />
+ <strong>Colorway:</strong> ${item.colorway}
+ </div>
+ <div class="card-footer">
+ ${item.price} | Stock: ${item.stock}
+ </div>
+ `;
+ container.appendChild(card);
+ });
+ }
+
+ function renderTable(filteredData) {
+ const tableBody = document.getElementById("tableBody");
+ tableBody.innerHTML = "";
+ filteredData.forEach(item => {
+ const row = document.createElement("tr");
+ row.innerHTML = `
+ <td>${item.sku}</td>
+ <td>${item.pattern}</td>
+ <td>${item.colorway}</td>
+ <td>${item.price}</td>
+ <td>${item.stock}</td>
+ `;
+ tableBody.appendChild(row);
+ });
+ }
+
+ function filterData(query) {
+ const lowerQuery = query.toLowerCase();
+ return data.filter(item =>
+ item.sku.toLowerCase().includes(lowerQuery) ||
+ item.pattern.toLowerCase().includes(lowerQuery) ||
+ item.colorway.toLowerCase().includes(lowerQuery)
+ );
+ }
+
+ function sortData(data, sortKey, ascending) {
+ return [...data].sort((a, b) => {
+ const valA = a[sortKey];
+ const valB = b[sortKey];
+ if (valA < valB) return ascending ? -1 : 1;
+ if (valA > valB) return ascending ? 1 : -1;
+ return 0;
+ });
+ }
+
+ function updateView() {
+ const query = document.getElementById("searchBox").value.toLowerCase();
+ let filtered = filterData(query);
+ const viewMode = window.innerWidth < 768 ? "cards" : "table";
+ if (viewMode === "cards") {
+ renderCards(filtered);
+ document.getElementById("catalogContainer").style.display = "grid";
+ document.getElementById("tableView").style.display = "none";
+ } else {
+ renderTable(filtered);
+ document.getElementById("catalogContainer").style.display = "none";
+ document.getElementById("tableView").style.display = "table";
+ }
+ }
+
+ function sortTable(column) {
+ const sortKey = column.getAttribute("data-sort");
+ const currentSort = column.getAttribute("data-direction") === "asc" ? "desc" : "asc";
+ column.setAttribute("data-direction", currentSort);
+ const sorted = sortData(data, sortKey, currentSort === "asc");
+ renderTable(sorted);
+ }
+
+ document.getElementById("searchBox").addEventListener("input", updateView);
+
+ document.querySelectorAll(".sortable").forEach(th => {
+ th.addEventListener("click", () => sortTable(th));
+ });
+
+ window.addEventListener("resize", updateView);
+
+ // Initial render
+ updateView();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e360a7ce2017/gemma3-12b.html b/data/artifacts/e360a7ce2017/gemma3-12b.html
new file mode 100644
index 0000000..fa24f09
--- /dev/null
+++ b/data/artifacts/e360a7ce2017/gemma3-12b.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Luxe Wallpaper - "Serene Dusk"</title>
+</head>
+<body style="font-family: 'Lora', serif; margin: 0; padding: 0; background-color: #f8f8f8;">
+
+ <div style="background: linear-gradient(120deg, rgba(255,255,255,0.3) 40%, rgba(240,240,240,0.3) 60%); padding: 50px;">
+
+ <h1 style="font-size: 4em; font-weight: bold; color: #333; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;">Serene Dusk</h1>
+ <p style="font-size: 1.5em; color: #666; line-height: 1.6; max-width: 800px; margin-bottom: 40px;">Transform your space with the subtle beauty of "Serene Dusk," a luxurious wallpaper designed to evoke tranquility and sophistication.</p>
+
+ <div style="display: flex; align-items: center; gap: 20px;">
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEoCAYAAABqH8LPAAAACXBIWXMAAAsTAAALEwEAmp9FAAAGcElEQVR4nO2d+xCc53z/7zXQZpU6yKj8M0SQtgIURD1iBqRkYkQJqgUaTUCmE2b0A9W4CIIkUoiQQCAoAiQBCIAOASQAAwCDAgYAGQAiwDA+wAAAABJRU5ErkJggg==" style="width: 100px; height: auto;" alt="Wallpaper Detail">
+ <p style="font-size: 1.2em; color: #444;">Premium Textured Vinyl</p>
+ </div>
+
+ </div>
+
+ <div style="padding: 50px; background-color: white;">
+ <h2 style="font-size: 2.5em; font-weight: bold; color: #333; margin-bottom: 30px; border-bottom: 2px solid #eee;">Product Details</h2>
+
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
+ <p style="font-size: 2em; color: #c46a3d; font-weight: bold;">$295.00 / Roll</p>
+ <button style="background-color: #c46a3d; color: white; padding: 15px 30px; border: none; cursor: pointer; font-size: 1em; font-weight: bold; border-radius: 5px;">Add to Cart</button>
+ </div>
+
+ <table style="width: 100%; border-collapse: collapse; margin-bottom: 40px;">
+ <thead>
+ <tr>
+ <th style="padding: 15px; text-align: left; background-color: #f2f2f2; font-weight: bold;">Specification</th>
+ <th style="padding: 15px; text-align: left; background-color: #f2f2f2; font-weight: bold;">Value</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td style="padding: 10px;">Roll Width</td>
+ <td style="padding: 10px;">27 inches (68.6 cm)</td>
+ </tr>
+ <tr>
+ <td style="padding: 10px;">Roll Length</td>
+ <td style="padding: 10px;">33 feet (10.06 m)</td>
+ </tr>
+ <tr>
+ <td style="padding: 10px;">Pattern Repeat</td>
+ <td style="padding: 10px;">24 inches (61 cm) Vertical</td>
+ </tr>
+ <tr>
+ <td style="padding: 10px;">Material</td>
+ <td style="padding: 10px;">Premium Textured Vinyl</td>
+ </tr>
+ <tr>
+ <td style="padding: 10px;">Durability</td>
+ <td style="padding: 10px;">Washable, Scrubbable</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <p style="font-size: 1em; color: #666; line-height: 1.6;">"Serene Dusk" is meticulously crafted to elevate any interior space with its understated elegance and luxurious feel. Perfect for bedrooms, living rooms, or accent walls.</p>
+ </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e360a7ce2017/hermes3-8b.html b/data/artifacts/e360a7ce2017/hermes3-8b.html
new file mode 100644
index 0000000..e2b91e3
--- /dev/null
+++ b/data/artifacts/e360a7ce2017/hermes3-8b.html
@@ -0,0 +1,81 @@
+<!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: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
+ background-color: #f2f2f2;
+ margin: 0;
+ padding: 0;
+ }
+ .hero {
+ height: 400px;
+ background-image: linear-gradient(to bottom, #ffffff, #c5c5c5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #333;
+ font-size: 48px;
+ text-shadow: 2px 2px 0px #a9a9a9;
+ }
+ .container {
+ padding: 40px;
+ }
+ .price {
+ font-size: 32px;
+ color: #c00;
+ font-weight: bold;
+ }
+ .btn {
+ background-color: #c00;
+ border: none;
+ color: white;
+ padding: 10px 20px;
+ text-decoration: none;
+ display: inline-block;
+ margin-top: 20px;
+ }
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ }
+ th, td {
+ padding: 10px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ </style>
+</head>
+<body>
+ <div class="hero">
+ Luxury Wallpaper
+ </div>
+ <div class="container">
+ <h2>Exclusive Design Collection</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl eget aliquam ultricies, nunc nisl aliquam nisl, a feugiat velit.</p>
+ <p class="price">$199.99</p>
+ <a href="#" class="btn">Add to Cart</a>
+ <table>
+ <tr>
+ <th>Specification</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>Material</td>
+ <td>Premium PVC material for durability and quality.</td>
+ </tr>
+ <tr>
+ <td>Size</td>
+ <td>Available in 3x5 feet rolls.</td>
+ </tr>
+ <tr>
+ <td>Color Options</td>
+ <td>Choose from a variety of elegant color schemes.</td>
+ </tr>
+ </table>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e360a7ce2017/qwen25-7b.html b/data/artifacts/e360a7ce2017/qwen25-7b.html
new file mode 100644
index 0000000..c479131
--- /dev/null
+++ b/data/artifacts/e360a7ce2017/qwen25-7b.html
@@ -0,0 +1,93 @@
+<!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: ' serif', sans-serif;
+ background-color: #f5f5f5;
+ margin: 0;
+ padding: 0;
+ }
+ .hero {
+ width: 100%;
+ height: 400px;
+ background: linear-gradient(135deg, rgba(255,255,255,.8) 0%,rgba(255,255,255,.8) 60%,rgba(0,0,0,.8) 70%,rgba(0,0,0)), url('https://via.placeholder.com/1920x400');
+ background-size: cover;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .product-info {
+ width: 80%;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 30px;
+ }
+ h1, p, table, button {
+ text-align: center;
+ }
+ h1 {
+ font-size: 3rem;
+ color: white;
+ }
+ .price {
+ font-size: 2.5rem;
+ color: #ff4d4d;
+ }
+ .spec-table {
+ margin-top: 20px;
+ width: 100%;
+ border-collapse: collapse;
+ }
+ .spec-table th, .spec-table td {
+ padding: 8px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ button {
+ background-color: #ff4d4d;
+ color: white;
+ padding: 10px 20px;
+ border: none;
+ cursor: pointer;
+ font-size: 1.5rem;
+ }
+ button:hover {
+ background-color: #b73838;
+ }
+ </style>
+</head>
+<body>
+ <div class="hero"></div>
+ <div class="product-info">
+ <h1>Luxury Velvet Wallpaper</h1>
+ <p>Price: $499.00<span class="price"> /sqm</span></p>
+ <button>Add to Cart</button>
+ <table class="spec-table">
+ <tr>
+ <th>Material</th>
+ <td>Velvet</td>
+ </tr>
+ <tr>
+ <th>Width (cm)</th>
+ <td>120</td>
+ </tr>
+ <tr>
+ <th>Roll Length (m)</th>
+ <td>9.5</td>
+ </tr>
+ <tr>
+ <th>Tensile Strength (N)</th>
+ <td>300</td>
+ </tr>
+ <tr>
+ <th>Fire Rating</th>
+ <td>A</td>
+ </tr>
+ </table>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e360a7ce2017/qwen3-14b.html b/data/artifacts/e360a7ce2017/qwen3-14b.html
new file mode 100644
index 0000000..f40506b
--- /dev/null
+++ b/data/artifacts/e360a7ce2017/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>Luxury Wallpaper Collection</title>
+ <style>
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+ body {
+ font-family: 'Georgia', serif;
+ background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
+ color: #ffffff;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ padding: 40px;
+ background-attachment: fixed;
+ }
+ header {
+ text-align: center;
+ margin-bottom: 60px;
+ }
+ header h1 {
+ font-size: 3.5em;
+ margin-bottom: 10px;
+ }
+ header p {
+ font-size: 1.2em;
+ color: #d0e1e9;
+ }
+ .hero {
+ background: linear-gradient(135deg, #00c9ff, #92fe9d);
+ color: #0f2027;
+ padding: 60px 20px;
+ border-radius: 10px;
+ text-align: center;
+ max-width: 600px;
+ margin: 0 auto;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+ }
+ .hero h2 {
+ font-size: 2.5em;
+ margin-bottom: 10px;
+ }
+ .hero p {
+ font-size: 1em;
+ margin-bottom: 20px;
+ }
+ .price {
+ font-size: 2em;
+ color: #ff3b30;
+ margin-bottom: 20px;
+ }
+ .add-to-cart {
+ background-color: #ffffff;
+ color: #0f2027;
+ border: none;
+ padding: 15px 40px;
+ font-size: 1.2em;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+ .add-to-cart:hover {
+ background-color: #f0f0f0;
+ }
+ .spec-table {
+ margin-top: 60px;
+ }
+ .spec-table table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 20px;
+ }
+ .spec-table th,
+ .spec-table td {
+ padding: 15px;
+ border: 1px solid #333;
+ text-align: left;
+ font-size: 1em;
+ }
+ .spec-table th {
+ background-color: #0f2027;
+ color: #ffffff;
+ }
+ footer {
+ margin-top: 80px;
+ text-align: center;
+ font-size: 0.9em;
+ color: #999;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>Luxury Wallpaper Collection</h1>
+ <p>Elevate your space with timeless elegance and modern sophistication.</p>
+ </header>
+ <div class="hero">
+ <h2>Velvet Elegance</h2>
+ <p>Handcrafted, high-pile velvet wallpaper with a sophisticated, deep-rich hue.</p>
+ <div class="price">$199.00 per roll</div>
+ <button class="add-to-cart" onclick="alert('Added to cart!')">Add to Cart</button>
+ </div>
+ <div class="spec-table">
+ <h2>Specifications</h2>
+ <table>
+ <tr>
+ <th>Material</th>
+ <td>100% Natural Velvet</td>
+ </tr>
+ <tr>
+ <th>Dimensions</th>
+ <td>100 cm (width) x 10 m (length)</td>
+ </tr>
+ <tr>
+ <th>Pattern Repeat</th>
+ <td>15 cm</td>
+ </tr>
+ <tr>
+ <th>Water Resistant</th>
+ <td>Yes</td>
+ </tr>
+ <tr>
+ <th>Lightfastness</th>
+ <td>Excellent (Class 5)</td>
+ </tr>
+ <tr>
+ <th>Rolls Per Box</th>
+ <td>5</td>
+ </tr>
+ </table>
+ </div>
+ <footer>
+ © 2025 Luxury Interiors. All rights reserved.
+ </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e597f64e5fa7/gemma3-12b.html b/data/artifacts/e597f64e5fa7/gemma3-12b.html
new file mode 100644
index 0000000..2d919a1
--- /dev/null
+++ b/data/artifacts/e597f64e5fa7/gemma3-12b.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Bouncing Balls</title>
+ <style>
+ body { margin: 0; overflow: hidden; }
+ canvas { background-color: #f0f0f0; }
+ </style>
+</head>
+<body>
+ <canvas id="myCanvas"></canvas>
+
+ <script>
+ const canvas = document.getElementById("myCanvas");
+ const ctx = canvas.getContext("2d");
+
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ let balls = [];
+ let gravity = 0.5;
+ let trailsEnabled = true;
+
+ function init() {
+ for (let i = 0; i < 20; i++) {
+ balls.push({
+ x: Math.random() * canvas.width,
+ y: Math.random() * canvas.height,
+ radius: Math.random() * 10 + 5,
+ vx: (Math.random() - 0.5) * 4,
+ vy: (Math.random() - 0.5) * 4,
+ color: `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1)`
+ });
+ }
+ }
+
+ function drawBall(ball) {
+ ctx.beginPath();
+ ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+ ctx.fillStyle = ball.color;
+ ctx.fill();
+ ctx.closePath();
+ }
+
+ function drawTrail(ball) {
+ if (!trailsEnabled) return;
+ ctx.beginPath();
+ ctx.moveTo(ball.x, ball.y);
+ ctx.strokeStyle = ball.color;
+ ctx.lineWidth = ball.radius / 2;
+ ctx.lineTo(ball.prevX, ball.prevY);
+
+ ctx.stroke();
+
+
+ }
+
+
+ function update() {
+ balls.forEach(ball => {
+ ball.prevX = ball.x;
+ ball.prevY = ball.y;
+ ball.vy += gravity;
+ ball.x += ball.vx;
+ ball.y += ball.vy;
+
+ // Wall collisions
+ if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
+ ball.vx = -ball.vx;
+ }
+ if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
+ ball.vy = -ball.vy * 0.8; // Lose some energy on bounce
+ }
+
+
+ });
+
+ }
+
+ function draw() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ balls.forEach(ball => {
+ drawTrail(ball)
+ drawBall(ball);
+ });
+ }
+
+
+
+ // Gravity slider setup (inline for simplicity - could be external if needed)
+ const gravitySlider = document.createElement('input');
+ gravitySlider.type = 'range';
+ gravitySlider.min = 0;
+ gravitySlider.max = 5;
+ gravitySlider.value = gravity;
+ gravitySlider.id = 'gravitySlider';
+
+ document.body.appendChild(gravitySlider);
+ gravitySlider.addEventListener('input', function() {
+ gravity = parseFloat(this.value);
+ });
+
+
+ init();
+ let animationFrameId;
+
+ function animate() {
+ update();
+ draw();
+ animationFrameId = requestAnimationFrame(animate);
+ }
+
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ window.addEventListener('resize', () => {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ });
+
+
+ animate();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e597f64e5fa7/hermes3-8b.html b/data/artifacts/e597f64e5fa7/hermes3-8b.html
new file mode 100644
index 0000000..acca508
--- /dev/null
+++ b/data/artifacts/e597f64e5fa7/hermes3-8b.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.0">
+ <title>20 Bouncing Balls</title>
+ <style>
+ body {
+ margin: 0;
+ overflow: hidden;
+ }
+
+ canvas {
+ background-color: #f0f0f0;
+ }
+
+ #gravitySlider {
+ width: 200px;
+ }
+ </style>
+</head>
+<body>
+ <canvas id="gameCanvas"></canvas>
+ <input type="range" id="gravitySlider" min="1" max="10" value="5">
+ <script>
+ const canvas = document.getElementById('gameCanvas');
+ let ctx = canvas.getContext('2d');
+
+ canvas.width = window.innerWidth * 0.8;
+ canvas.height = window.innerHeight * 0.8;
+
+ class Ball {
+ constructor(x, y, radius, color) {
+ this.x = x;
+ this.y = y;
+ this.radius = radius;
+ this.color = color;
+ this.speedX = 0;
+ this.speedY = 0;
+ this.trailLength = 0;
+ }
+
+ draw() {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+ ctx.fillStyle = this.color;
+ ctx.fill();
+ ctx.closePath();
+
+ for (let i = 0; i < this.trailLength; i++) {
+ ctx.beginPath();
+ let trailX = this.x - (canvas.width / 2) + (Math.random() * 40) - 20;
+ let trailY = this.y - (canvas.height / 2) + (Math.random() * 40) - 20;
+ ctx.arc(trailX, trailY, i + 1, 0, Math.PI * 2);
+ ctx.fillStyle = `rgba(${this.color}, ${1 - (i / this.trailLength)})`;
+ ctx.fill();
+ ctx.closePath();
+ }
+ }
+
+ update(position) {
+ switch (position) {
+ case 'up':
+ this.speedY = -Math.random() * 3;
+ break;
+ case 'down':
+ this.speedY = Math.random() * 3;
+ break;
+ case 'left':
+ this.speedX = -Math.random() * 3;
+ break;
+ case 'right':
+ this.speedX = Math.random() * 3;
+ break;
+ }
+
+ this.x += this.speedX;
+ this.y += this.speedY;
+
+ if (this.y < 0 || this.y + this.radius > canvas.height) {
+ this.speedY *= -1;
+ }
+
+ if (this.x < 0 || this.x + this.radius > canvas.width) {
+ this.speedX *= -1;
+ }
+ }
+ }
+
+ let balls = [];
+ for (let i = 0; i < 20; i++) {
+ balls.push(new Ball(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 5 + 2, `hsl(${Math.floor(Math.random()*360)},100%,50%)`));
+ }
+
+ function animate(gravity) {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ balls.forEach(ball => {
+ ball.update('down');
+ ball.draw();
+ });
+
+ requestAnimationFrame(() => {
+ animate(gravity);
+ });
+ }
+
+ document.getElementById("gravitySlider").addEventListener("input", e => {
+ animate(e.target.value);
+ });
+
+ animate(5);
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e597f64e5fa7/qwen25-7b.html b/data/artifacts/e597f64e5fa7/qwen25-7b.html
new file mode 100644
index 0000000..82063f3
--- /dev/null
+++ b/data/artifacts/e597f64e5fa7/qwen25-7b.html
@@ -0,0 +1,72 @@
+<!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; }
+ canvas { display: block; background-color: #000; }
+ </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;
+
+const gravity = 0.5;
+let balls = [];
+for (let i = 0; i < 20; i++) {
+ const x = Math.random() * (canvas.width - 20) + 10;
+ const y = Math.random() * 10;
+ balls.push({x, y, dx: 3 + Math.random() * 5, dy: gravity, trail: []});
+}
+
+function drawBalls() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ for (const ball of balls) {
+ const [x, y] = ball;
+ ctx.beginPath();
+ ctx.arc(x, y, 10, 0, Math.PI * 2);
+ ctx.fillStyle = 'white';
+ ctx.fill();
+ ball.trail.push({x, y});
+ if (ball.trail.length > 15) ball.trail.shift();
+ }
+}
+
+function updateBalls() {
+ for (const ball of balls) {
+ const [x, y] = ball;
+ ball.dy += gravity;
+ x += ball.dx;
+ y += ball.dy;
+ if (y + 20 >= canvas.height) ball.dy *= -1 * Math.random();
+ if (x <= 0 || x >= canvas.width - 20) ball.dx *= -1;
+ for (const b of balls) {
+ const dx = x - b.x;
+ const dy = y - b.y;
+ const dist = Math.sqrt(dx * dx + dy * dy);
+ if (dist < 20 && x !== b.x && y !== b.y) {
+ ball.dx *= -1;
+ ball.dy *= -1;
+ }
+ }
+ ball.x = x;
+ ball.y = y;
+ }
+}
+
+function animate() {
+ updateBalls();
+ drawBalls();
+ requestAnimationFrame(animate);
+}
+animate();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e597f64e5fa7/qwen3-14b.html b/data/artifacts/e597f64e5fa7/qwen3-14b.html
new file mode 100644
index 0000000..24ecc9d
--- /dev/null
+++ b/data/artifacts/e597f64e5fa7/qwen3-14b.html
@@ -0,0 +1,116 @@
+<!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;
+ font-family: sans-serif;
+ }
+ canvas {
+ display: block;
+ }
+ #controls {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ color: white;
+ font-size: 14px;
+ }
+ </style>
+</head>
+<body>
+ <div id="controls">
+ Gravity: <input type="range" id="gravitySlider" min="0.1" max="5" step="0.1" value="1">
+ </div>
+ <canvas id="canvas"></canvas>
+ <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;
+
+ class Ball {
+ constructor() {
+ this.x = Math.random() * width;
+ this.y = Math.random() * height / 2;
+ this.vx = (Math.random() - 0.5) * 4;
+ this.vy = (Math.random() - 0.5) * 4;
+ this.radius = 12 + Math.random() * 8;
+ 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 > width) {
+ this.vx *= -0.9;
+ }
+ if (this.y - this.radius < 0) {
+ this.vy *= -0.9;
+ }
+ if (this.y + this.radius > height) {
+ this.vy *= -0.9;
+ }
+
+ this.trail.push({ x: this.x, y: this.y });
+ if (this.trail.length > 40) {
+ this.trail.shift();
+ }
+ }
+
+ draw() {
+ ctx.beginPath();
+ for (let i = 0; i < this.trail.length; i++) {
+ const t = this.trail[i];
+ const alpha = 1 - i / this.trail.length;
+ ctx.globalAlpha = alpha;
+ ctx.arc(t.x, t.y, this.radius * (1 - i / this.trail.length), 0, Math.PI * 2);
+ ctx.fillStyle = this.color;
+ ctx.fill();
+ }
+ ctx.globalAlpha = 1;
+ }
+ }
+
+ for (let i = 0; i < numBalls; i++) {
+ balls.push(new Ball());
+ }
+
+ function animate() {
+ ctx.clearRect(0, 0, width, height);
+ for (let ball of balls) {
+ ball.update();
+ ball.draw();
+ }
+ requestAnimationFrame(animate);
+ }
+
+ animate();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e5cfed9cc0d5/gemma3-12b.html b/data/artifacts/e5cfed9cc0d5/gemma3-12b.html
new file mode 100644
index 0000000..268a80a
--- /dev/null
+++ b/data/artifacts/e5cfed9cc0d5/gemma3-12b.html
@@ -0,0 +1,130 @@
+<!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: sans-serif; margin: 0; padding: 20px; }
+ #searchBox { width: 100%; max-width: 300px; margin-bottom: 20px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
+ .cardGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
+ .card { border: 1px solid #eee; padding: 16px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+ .card h3 { margin-top: 0; margin-bottom: 8px; font-size: 1.2em; }
+ .card p { margin: 4px 0; }
+ .sortableColumn { cursor: pointer; user-select: none; }
+ .sortIcon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; margin-left: 8px;}
+
+ </style>
+</head>
+<body>
+
+ <input type="text" id="searchBox" placeholder="Search by SKU, Pattern, or Colorway">
+
+ <h2>Wallcovering Catalog</h2>
+
+ <div class="cardGrid" id="catalog">
+ <!-- Cards will be dynamically inserted here -->
+ </div>
+
+ <script>
+ const catalogData = [
+ { sku: "WC001", pattern: "Geometric Stripe", colorway: "Navy & Gold", price: 45.99, stock: 25 },
+ { sku: "WC002", pattern: "Floral Bloom", colorway: "Blush Pink", price: 38.50, stock: 18 },
+ { sku: "WC003", pattern: "Abstract Texture", colorway: "Slate Grey", price: 52.75, stock: 32 },
+ { sku: "WC004", pattern: "Damask Elegance", colorway: "Emerald Green", price: 61.20, stock: 12 },
+ { sku: "WC005", pattern: "Tropical Leaves", colorway: "Forest Teal", price: 42.00, stock: 28 },
+ { sku: "WC006", pattern: "Modern Chevron", colorway: "Charcoal & Silver", price: 39.99, stock: 21 },
+ { sku: "WC007", pattern: "Paisley Dream", colorway: "Terracotta", price: 55.45, stock: 15 },
+ { sku: "WC008", pattern: "Rustic Woodgrain", colorway: "Natural Brown", price: 48.88, stock: 35 }
+ ];
+
+ const searchBox = document.getElementById("searchBox");
+ const catalogDiv = document.getElementById("catalog");
+
+ let sortColumn = null; // Track which column is being sorted and direction (1 for ascending, -1 for descending)
+
+ function renderCatalog(data) {
+ catalogDiv.innerHTML = "";
+ data.forEach(item => {
+ const card = document.createElement("div");
+ card.classList.add("card");
+
+ card.innerHTML = `
+ <h3>${item.sku}</h3>
+ <p><strong>Pattern:</strong> ${item.pattern}</p>
+ <p><strong>Colorway:</strong> ${item.colorway}</p>
+ <p><strong>Price:</strong> $${item.price.toFixed(2)}</p>
+ <p><strong>Stock:</strong> ${item.stock}</p>
+ `;
+
+ catalogDiv.appendChild(card);
+ });
+ }
+
+ function filterData(data, searchTerm) {
+ searchTerm = searchTerm.toLowerCase();
+ return data.filter(item => {
+ return (
+ item.sku.toLowerCase().includes(searchTerm) ||
+ item.pattern.toLowerCase().includes(searchTerm) ||
+ item.colorway.toLowerCase().includes(searchTerm)
+ );
+ });
+ }
+
+ function sortData(data, column, direction = 1) {
+ data.sort((a, b) => {
+ let valueA = a[column];
+ let valueB = b[column];
+
+ if (typeof valueA === 'string') {
+ valueA = valueA.toLowerCase();
+ valueB = valueB.toLowerCase();
+ }
+
+ if (valueA < valueB) return -direction;
+ if (valueA > valueB) return direction;
+ return 0;
+ });
+ return data;
+ }
+
+
+
+ searchBox.addEventListener("input", () => {
+ const searchTerm = searchBox.value.trim();
+ const filteredData = filterData(catalogData, searchTerm);
+ renderCatalog(filteredData);
+ });
+
+
+ // Add click handlers to column headers for sorting
+ document.querySelectorAll('.cardGrid div:first-child').forEach(header => { // Select first child of each card (h3)
+ header.addEventListener('click', () => {
+ const columnName = header.textContent.toLowerCase(); // Assumes h3 contains the sortable column name
+
+ if (columnName === sortColumn) {
+ sortColumn = null; // Toggle direction if clicking same column again
+ } else {
+ sortColumn = columnName;
+ }
+
+ let sortedData = [...catalogData]; // Create a copy to avoid mutating original data.
+
+ if(sortColumn){
+ sortedData = sortData(sortedData, sortColumn);
+ }
+
+
+ renderCatalog(sortedData);
+ });
+ });
+
+
+
+
+ // Initial render
+ renderCatalog(catalogData);
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e5cfed9cc0d5/hermes3-8b.html b/data/artifacts/e5cfed9cc0d5/hermes3-8b.html
new file mode 100644
index 0000000..d957850
--- /dev/null
+++ b/data/artifacts/e5cfed9cc0d5/hermes3-8b.html
@@ -0,0 +1,209 @@
+<!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>
+ * {
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 20px;
+ }
+
+ .catalog-container {
+ max-width: 100%;
+ margin: auto;
+ }
+
+ h1 {
+ text-align: center;
+ }
+
+ .search-box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ }
+
+ input[type="text"] {
+ padding: 8px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ width: 100%;
+ }
+
+ .grid-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 20px;
+ }
+
+ .wallcovering-card {
+ background-color: #f8f9fa;
+ padding: 20px;
+ border-radius: 5px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+
+ .sku {
+ font-weight: bold;
+ margin-bottom: 10px;
+ }
+
+ .pattern, .colorway {
+ margin-bottom: 10px;
+ }
+
+ .price {
+ font-weight: bold;
+ margin-bottom: 10px;
+ }
+
+ .stock {
+ font-style: italic;
+ color: #555;
+ }
+
+ .sort-columns {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ }
+
+ .column-label, .arrow-icon {
+ cursor: pointer;
+ }
+
+ .arrow-icon {
+ transform: rotate(90deg);
+ width: 15px;
+ height: 15px;
+ }
+ </style>
+</head>
+<body>
+
+<div class="catalog-container">
+ <h1>Wallcovering Catalog</h1>
+
+ <div class="search-box">
+ <input type="text" id="liveSearch" placeholder="Search by SKU, pattern or colorway...">
+ </div>
+
+ <div class="sort-columns">
+ <span class="column-label">Price: <span class="arrow-icon"></span></span>
+ <span class="column-label">Stock: <span class="arrow-icon"></span></span>
+ </div>
+
+ <div class="grid-container">
+ <div class="wallcovering-card">
+ <div class="sku">SKU-001</div>
+ <div class="pattern">Floral Garden</div>
+ <div class="colorway">Pastel Green</div>
+ <div class="price">$49.99</div>
+ <div class="stock">In Stock</div>
+ </div>
+
+ <div class="wallcovering-card">
+ <div class="sku">SKU-002</div>
+ <div class="pattern">Geometric Maze</div>
+ <div class="colorway">Deep Blue</div>
+ <div class="price">$69.99</div>
+ <div class="stock">In Stock</div>
+ </div>
+
+ <div class="wallcovering-card">
+ <div class="sku">SKU-003</div>
+ <div class="pattern">Wildlife Safari</div>
+ <div class="colorway">Earth Tones</div>
+ <div class="price">$89.99</div>
+ <div class="stock">In Stock</div>
+ </div>
+
+ <div class="wallcovering-card">
+ <div class="sku">SKU-004</div>
+ <div class="pattern">Modern Stripes</div>
+ <div class="colorway">Monochrome Black & White</div>
+ <div class="price">$59.99</div>
+ <div class="stock">In Stock</div>
+ </div>
+
+ <div class="wallcovering-card">
+ <div class="sku">SKU-005</div>
+ <div class="pattern">Vintage Roses</div>
+ <div class="colorway">Soft Pink & White</div>
+ <div class="price">$74.99</div>
+ <div class="stock">In Stock</div>
+ </div>
+
+ <div class="wallcovering-card">
+ <div class="sku">SKU-006</div>
+ <div class="pattern">Oriental Harmony</div>
+ <div class="colorway">Rich Red & Gold</div>
+ <div class="price">$99.99</div>
+ <div class="stock">In Stock</div>
+ </div>
+
+ <div class="wallcovering-card">
+ <div class="sku">SKU-007</div>
+ <div class="pattern">Urban Graffiti</div>
+ <div class="colorway">Vivid Colors</div>
+ <div class="price">$79.99</div>
+ <div class="stock">In Stock</div>
+ </div>
+
+ <div class="wallcovering-card">
+ <div class="sku">SKU-008</div>
+ <div class="pattern">Polka Dot Delight</div>
+ <div class="colorway">Bright Red & White</div>
+ <div class="price">$64.99</div>
+ <div class="stock">In Stock</div>
+ </div>
+ </div>
+</div>
+
+<script>
+ const wallcoveringCards = document.querySelectorAll('.wallcovering-card');
+ let isPriceSorted = true;
+ let isStockSorted = false;
+
+ function sortCards(column) {
+ const cards = [...wallcoveringCards];
+ const sortedCards = column === 'price' ? cards.sort((a, b) => parseInt(a.querySelector('.price').textContent.replace('$', '')) - parseInt(b.querySelector('.price').textContent.replace('$', '')))
+ : cards.sort((a, b) => b.querySelector(`.stock`).textContent.toLowerCase().includes('in stock') ? 0 : 1 - ((a.querySelector('.stock').textContent.toLowerCase().includes('in stock')) ? 0 : 1));
+
+ wallcoveringCards.forEach(card => document.querySelector('.grid-container').removeChild(card));
+
+ sortedCards.forEach(card => document.querySelector('.grid-container').appendChild(card));
+ }
+
+ document.querySelector('.column-label:nth-child(1)').addEventListener('click', () => sortCards('price'));
+ document.querySelector('.column-label:nth-child(2)').addEventListener('click', () => sortCards('stock'));
+
+ const searchBox = document.getElementById('liveSearch');
+
+ searchBox.addEventListener('input', () => {
+ const value = searchBox.value.toLowerCase();
+
+ wallcoveringCards.forEach(card => {
+ const sku = card.querySelector('.sku').textContent;
+ const pattern = card.querySelector('.pattern').textContent.toLowerCase();
+ const colorway = card.querySelector('.colorway').textContent.toLowerCase();
+
+ if(sku.includes(value) || pattern.includes(value) || colorway.includes(value)) {
+ card.style.display = 'block';
+ } else {
+ card.style.display = 'none';
+ }
+ });
+ });
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e5cfed9cc0d5/qwen25-7b.html b/data/artifacts/e5cfed9cc0d5/qwen25-7b.html
new file mode 100644
index 0000000..253aa1c
--- /dev/null
+++ b/data/artifacts/e5cfed9cc0d5/qwen25-7b.html
@@ -0,0 +1,100 @@
+<!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; }
+ .card-grid { display: grid; gap: 20px; padding: 20px; }
+ .card { border: 1px solid #ddd; padding: 20px; background-color: white; width: calc(33.33% - 40px); box-sizing: border-box; }
+ input[type="text"] { width: 100%; padding: 10px; margin-bottom: 20px; }
+ th { cursor: pointer; }
+ </style>
+</head>
+<body>
+
+<input type="text" id="searchInput" placeholder="Search for patterns or colors..." />
+
+<table id="catalog" class="card-grid">
+ <thead>
+ <tr>
+ <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>Stock</th>
+ </tr>
+ </thead>
+ <tbody id="catalogBody">
+ <tr class="card" data-sku="W01"><td>W01</td><td>Floral</td><td>Blue</td><td>25.99</td><td>In Stock</td></tr>
+ <tr class="card" data-sku="W02"><td>W02</td><td>Geometric</td><td>Red</td><td>34.99</td><td>Out of Stock</td></tr>
+ <tr class="card" data-sku="W03"><td>W03</td><td>Solid</td><td>Yellow</td><td>18.99</td><td>In Stock</td></tr>
+ <tr class="card" data-sku="W04"><td>W04</td><td>Banana Leaves</td><td>Purple</td><td>29.99</td><td>In Stock</td></tr>
+ <tr class="card" data-sku="W05"><td>W05</td><td>Abstract</td><td>Green</td><td>37.99</td><td>Out of Stock</td></tr>
+ <tr class="card" data-sku="W06"><td>W06</td><td>Silk Screen</td><td>Brown</td><td>45.99</td><td>In Stock</td></tr>
+ <tr class="card" data-sku="W07"><td>W07</td><td>Gingham</td><td>White</td><td>21.99</td><td>In Stock</td></tr>
+ <tr class="card" data-sku="W08"><td>W08</td><td>Digital</td><td>Vivid Red</td><td>32.99</td><td>Out of Stock</td></tr>
+ </tbody>
+</table>
+
+<script>
+function sortTable(n) {
+ let table, rows, switching, i, x, y, shouldSwitch, dir, switchCount = 0;
+ table = document.getElementById("catalog");
+ switching = true;
+ dir = "asc";
+ while (switching) {
+ switching = false;
+ rows = table.rows;
+ for (i = 1; i < (rows.length - 1); i++) {
+ shouldSwitch = false;
+ x = rows[i].getElementsByTagName("TD")[n];
+ y = rows[i + 1].getElementsByTagName("TD")[n];
+ if (dir === "asc") {
+ if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+ shouldSwitch = true;
+ break;
+ }
+ } else if (dir === "desc") {
+ if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+ shouldSwitch = true;
+ break;
+ }
+ }
+ }
+ if (shouldSwitch) {
+ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+ switching = true;
+ switchCount++;
+ } else {
+ if (switchCount === 0 && dir === "asc") {
+ dir = "desc";
+ switching = true;
+ }
+ }
+ }
+}
+
+document.getElementById("searchInput").addEventListener("keyup", function(event) {
+ let input, filter, table, tr, td, i, txtValue;
+ input = document.getElementById("searchInput");
+ filter = input.value.toLowerCase();
+ table = document.getElementById("catalogBody");
+ tr = table.getElementsByTagName("tr");
+ for (i = 0; i < tr.length; i++) {
+ td = tr[i].getElementsByTagName("td")[1];
+ 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/e5cfed9cc0d5/qwen3-14b.html b/data/artifacts/e5cfed9cc0d5/qwen3-14b.html
new file mode 100644
index 0000000..84e0468
--- /dev/null
+++ b/data/artifacts/e5cfed9cc0d5/qwen3-14b.html
@@ -0,0 +1,160 @@
+<!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>
+ * {
+ box-sizing: border-box;
+ }
+ body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background: #f4f4f4;
+ }
+ header {
+ background: #333;
+ color: #fff;
+ padding: 1rem;
+ text-align: center;
+ }
+ .search-box {
+ display: flex;
+ justify-content: center;
+ margin: 1rem 0;
+ }
+ input[type="text"] {
+ padding: 0.5rem;
+ width: 80%;
+ max-width: 600px;
+ font-size: 1rem;
+ }
+ .card-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1rem;
+ padding: 1rem;
+ }
+ .card {
+ background: #fff;
+ border: 1px solid #ddd;
+ border-radius: 6px;
+ padding: 1rem;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ }
+ .card h3 {
+ margin: 0 0 0.5rem 0;
+ font-size: 1.2rem;
+ }
+ .card p {
+ margin: 0.25rem 0;
+ font-size: 0.95rem;
+ }
+ .card .price {
+ color: #28a745;
+ }
+ .card .stock {
+ color: #6c757d;
+ }
+ .sortable {
+ cursor: pointer;
+ user-select: none;
+ }
+ .sortable:hover {
+ text-decoration: underline;
+ }
+ @media (max-width: 600px) {
+ .search-box input {
+ width: 100%;
+ }
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>Wallcovering Catalog</h1>
+ </header>
+ <div class="search-box">
+ <input type="text" id="searchBox" placeholder="Search by SKU, pattern, or colorway..." />
+ </div>
+ <div class="card-grid" id="cardGrid">
+ <!-- Cards will be inserted here by JS -->
+ </div>
+
+ <script>
+ const data = [
+ { sku: "SKU001", pattern: "Geometric Tiles", colorway: "Midnight Blue", price: "$39.99", stock: "100 in stock" },
+ { sku: "SKU002", pattern: "Floral Embellishments", colorway: "Rose Gold", price: "$49.99", stock: "50 in stock" },
+ { sku: "SKU003", pattern: "Abstract Brushstrokes", colorway: "Slate Gray", price: "$29.99", stock: "150 in stock" },
+ { sku: "SKU004", pattern: "Wood Grain", colorway: "Oak Brown", price: "$34.99", stock: "75 in stock" },
+ { sku: "SKU005", pattern: "Modern Chevron", colorway: "Charcoal Black", price: "$44.99", stock: "30 in stock" },
+ { sku: "SKU006", pattern: "Vintage Damask", colorway: "Crimson Red", price: "$54.99", stock: "20 in stock" },
+ { sku: "SKU007", pattern: "Striped Elegance", colorway: "Navy Blue", price: "$32.99", stock: "120 in stock" },
+ { sku: "SKU008", pattern: "Textured Concrete", colorway: "Gray Concrete", price: "$37.99", stock: "90 in stock" }
+ ];
+
+ const tableHeadings = ["SKU", "Pattern", "Colorway", "Price", "Stock"];
+ const sortableKeys = ["sku", "pattern", "colorway", "price", "stock"];
+ const cardGrid = document.getElementById("cardGrid");
+ const searchBox = document.getElementById("searchBox");
+
+ function renderCards(filteredData) {
+ cardGrid.innerHTML = "";
+ filteredData.forEach(item => {
+ const card = document.createElement("div");
+ card.className = "card";
+ card.innerHTML = `
+ <h3 class="sortable" data-key="sku">${item.sku}</h3>
+ <p class="sortable" data-key="pattern">${item.pattern}</p>
+ <p class="sortable" data-key="colorway">${item.colorway}</p>
+ <p class="sortable" data-key="price">${item.price}</p>
+ <p class="sortable" data-key="stock">${item.stock}</p>
+ `;
+ cardGrid.appendChild(card);
+ });
+ }
+
+ function sortData(key) {
+ const sortedData = [...data].sort((a, b) => {
+ const valA = a[key];
+ const valB = b[key];
+ return valA > valB ? 1 : -1;
+ });
+ renderCards(sortedData);
+ }
+
+ function filterData(query) {
+ const lowerQuery = query.toLowerCase();
+ const filtered = data.filter(item =>
+ Object.values(item).some(val =>
+ val.toString().toLowerCase().includes(lowerQuery)
+ )
+ );
+ renderCards(filtered);
+ }
+
+ function initSorting() {
+ const cards = document.querySelectorAll(".card");
+ cards.forEach(card => {
+ const headers = card.querySelectorAll(".sortable");
+ headers.forEach(header => {
+ header.addEventListener("click", () => {
+ const key = header.getAttribute("data-key");
+ sortData(key);
+ });
+ });
+ });
+ }
+
+ searchBox.addEventListener("input", () => {
+ const query = searchBox.value.trim();
+ filterData(query);
+ });
+
+ renderCards(data);
+ initSorting();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/fae3d1590b5b/gemma3-12b.html b/data/artifacts/fae3d1590b5b/gemma3-12b.html
new file mode 100644
index 0000000..c47494e
--- /dev/null
+++ b/data/artifacts/fae3d1590b5b/gemma3-12b.html
@@ -0,0 +1,62 @@
+<!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>
+</head>
+<body style="margin: 0; padding: 0; background-color: #f4f4f4; font-family: Arial, sans-serif;">
+
+ <table width="100%" cellpadding="0" cellspacing="0" border="0">
+ <tr>
+ <td>
+ <table style="width: 100%; max-width: 600px; margin: 0 auto; background-color: #ffffff; padding: 20px;" cellpadding="0" cellspacing="0" border="0">
+ <tr>
+ <td style="padding-bottom: 30px;">
+ <h1 style="font-size: 28px; color: #333333; text-align: center; margin: 0;">Wallpaper Sample Sale!</h1>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px;">
+ <div style="position: relative; height: 200px; background: linear-gradient(rgb(248,235,227),rgba(248,235,227,0.4));">
+ <a href="#" style="display: block; width: 100%; height: 100%; text-decoration: none;">
+ <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #666666;">Pattern 1</div>
+ </a>
+ </div>
+
+ <div style="position: relative; height: 200px; background: linear-gradient(rgb(239,247,239),rgba(239,247,239,0.4));">
+ <a href="#" style="display: block; width: 100%; height: 100%; text-decoration: none;">
+ <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #666666;">Pattern 2</div>
+ </a>
+ </div>
+
+ <div style="position: relative; height: 200px; background: linear-gradient(rgb(255,243,229),rgba(255,243,229,0.4));">
+ <a href="#" style="display: block; width: 100%; height: 100%; text-decoration: none;">
+ <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #666666;">Pattern 3</div>
+ </a>
+ </div>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td style="padding-top: 30px; text-align: center;">
+ <a href="#" style="display: inline-block; background-color: #4CAF50; color: white; padding: 12px 20px; border-radius: 5px; text-decoration: none; font-weight: bold;">Shop the Sale</a>
+ </td>
+ </tr>
+
+ <tr>
+ <td style="padding-top: 30px; text-align: center; font-size: 12px; color: #777777;">
+ <p>Copyright © 2024 Your Company. All rights reserved.</p>
+ <p><a href="#" style="color: #777777; text-decoration: underline;">Unsubscribe</a> | <a href="#" style="color: #777777; text-decoration: underline;">View in Browser</a></p>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/fae3d1590b5b/hermes3-8b.html b/data/artifacts/fae3d1590b5b/hermes3-8b.html
new file mode 100644
index 0000000..57656b2
--- /dev/null
+++ b/data/artifacts/fae3d1590b5b/hermes3-8b.html
@@ -0,0 +1,66 @@
+<!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: 0;
+ background-color: #f4f4f4;
+ }
+ .container {
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 20px;
+ }
+ h1 {
+ color: #333;
+ }
+ .pattern-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px;
+ margin-top: 20px;
+ }
+ .pattern {
+ background-color: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
+ min-height: 200px;
+ }
+ .cta-button {
+ display: block;
+ width: 100%;
+ padding: 10px;
+ background-color: #28a745;
+ color: white;
+ text-align: center;
+ font-size: 18px;
+ cursor: pointer;
+ }
+ footer {
+ background-color: #333;
+ color: white;
+ text-align: center;
+ margin-top: 20px;
+ padding: 10px 0;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h1>Don't Miss Out on Our Wallpaper Sample Sale!</h1>
+ <p>Get up to 50% off on our featured patterns during this limited time offer.</p>
+ <div class="pattern-grid">
+ <div class="pattern"></div>
+ <div class="pattern"></div>
+ <div class="pattern"></div>
+ </div>
+ <a href="#" class="cta-button">Shop Now</a>
+ </div>
+ <footer>
+ © 2023 Wallpaper Company. All rights reserved.
+ </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/fae3d1590b5b/qwen25-7b.html b/data/artifacts/fae3d1590b5b/qwen25-7b.html
new file mode 100644
index 0000000..1ac2eb9
--- /dev/null
+++ b/data/artifacts/fae3d1590b5b/qwen25-7b.html
@@ -0,0 +1,72 @@
+<!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: 0;
+ background-color: #f4f4f4;
+ }
+ .container {
+ max-width: 600px;
+ margin: auto;
+ overflow: hidden;
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ }
+ .grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 16px;
+ }
+ .pattern {
+ background: linear-gradient(to right, #ff7e5f, #feb47b);
+ height: 300px;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ }
+ .pattern:hover {
+ transform: scale(1.05);
+ transition: all 0.3s ease-in-out;
+ }
+ .cta-button {
+ display: block;
+ margin-top: 24px;
+ padding: 16px 24px;
+ background-color: #ff6f69;
+ color: white;
+ border: none;
+ font-size: 18px;
+ cursor: pointer;
+ }
+ .cta-button:hover {
+ background-color: #fe3e37;
+ }
+ @media (max-width: 500px) {
+ .grid {
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ }
+ .pattern {
+ height: 250px;
+ }
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h1>Discover Our Stunning Wallpaper Samples</h1>
+ <div class="grid">
+ <div class="pattern" style="background-image: linear-gradient(to right, #ff7e5f, #feb47b);"></div>
+ <div class="pattern" style="background-image: linear-gradient(to left, #58d68d, #2ab0bf);"></div>
+ <div class="pattern" style="background-image: linear-gradient(to bottom, #ff9a9e, #fad0c4);"></div>
+ </div>
+ <button class="cta-button">Shop Now</button>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/fae3d1590b5b/qwen3-14b.html b/data/artifacts/fae3d1590b5b/qwen3-14b.html
new file mode 100644
index 0000000..25796f0
--- /dev/null
+++ b/data/artifacts/fae3d1590b5b/qwen3-14b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Exclusive Wallpaper Sample Sale</title>
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: Arial, sans-serif;
+ background-color: #f9f9f9;
+ color: #333;
+ }
+ .container {
+ max-width: 600px;
+ margin: 0 auto;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ }
+ header {
+ padding: 20px;
+ background-color: #007bff;
+ color: #fff;
+ text-align: center;
+ }
+ .grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+ gap: 10px;
+ padding: 15px;
+ }
+ .pattern {
+ height: 150px;
+ background-size: cover;
+ background-position: center;
+ border: 1px solid #ccc;
+ }
+ .pattern:nth-child(1) {
+ background: linear-gradient(135deg, #ff6b6b 0%, #f093ff 100%);
+ }
+ .pattern:nth-child(2) {
+ background: linear-gradient(135deg, #4ecdc4 0%, #556278 100%);
+ }
+ .pattern:nth-child(3) {
+ background: linear-gradient(135deg, #45b7d1 0%, #ffffff 100%);
+ }
+ .cta {
+ text-align: center;
+ padding: 20px;
+ }
+ .cta button {
+ background-color: #28a745;
+ color: #fff;
+ border: none;
+ padding: 12px 25px;
+ font-size: 16px;
+ border-radius: 4px;
+ cursor: pointer;
+ text-decoration: none;
+ }
+ .cta button:hover {
+ background-color: #218838;
+ }
+ footer {
+ background-color: #f1f1f1;
+ padding: 15px;
+ text-align: center;
+ font-size: 12px;
+ color: #666;
+ }
+ footer a {
+ color: #007bff;
+ text-decoration: none;
+ }
+ footer a:hover {
+ text-decoration: underline;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <header>
+ <h1>Exclusive Wallpaper Sample Sale</h1>
+ <p>Get your hands on our most popular designs at unbeatable prices!</p>
+ </header>
+ <div class="grid">
+ <div class="pattern"></div>
+ <div class="pattern"></div>
+ <div class="pattern"></div>
+ </div>
+ <div class="cta">
+ <button onclick="alert('Thank you for your interest!')">Shop Now →</button>
+ </div>
+ <footer>
+ <p>© 2025 DesignCo. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Unsubscribe</a></p>
+ </footer>
+ </div>
+</body>
+</html>
\ No newline at end of file
← 3eb5e99 auto-data-snapshot: 2026-08-15T07:41:54 (4 data files) — dat
·
back to Model Arena
·
auto-data-snapshot: 2026-08-17T07:32:48 (3 data files) — dat db8c014 →