File size: 7,152 Bytes
67ebcef | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | """Visual benchmark: 32 tasks in 4 categories (SVG drawings, HTML/CSS pages, canvas animations, three.js 3D scenes).
Every answer is one self-contained file that is rendered in headless Chrome (scripts/render.py)."""
import json
import os
SVG_TAIL = ("\n\nAnswer with one complete SVG document (with xmlns and a viewBox) in a single ```svg code block. "
"Do not use external images or fonts.")
HTML_TAIL = ("\n\nAnswer with one complete, self-contained HTML file in a single ```html code block. Put CSS and "
"JavaScript inline. Do not use external images. {lib}")
LIB_NONE = "Do not use external libraries."
LIB_THREE = ("Use three.js through this import map: <script type=\"importmap\">{\"imports\": {\"three\": "
"\"https://unpkg.com/three@0.160.0/build/three.module.js\", \"three/addons/\": "
"\"https://unpkg.com/three@0.160.0/examples/jsm/\"}}</script> and a <script type=\"module\">.")
T = [
("svg", "v01", "Draw a side view of a classic red bicycle: two wheels with spokes, frame, saddle, handlebar, pedals and chain ring, on a light background.", False),
("svg", "v02", "Design a modern app icon: a rounded square with a vertical blue-to-purple gradient, a white stylized mountain range and a yellow sun.", False),
("svg", "v03", "Draw a friendly cartoon cat face: ears, eyes with highlights, nose, mouth and whiskers; orange fur with darker stripes.", False),
("svg", "v04", "Draw a small house with a red roof, a door and two windows, a tree beside it, green grass and a blue sky with two clouds.", False),
("svg", "v05", "Design a logo for a coffee shop called 'Nova Coffee': a coffee cup whose steam forms a star, with the name in a clean font under it.", False),
("svg", "v06", "Draw an analog clock face showing exactly 10:10: 12 hour marks, the numbers 12, 3, 6 and 9, hour and minute hands, and a red second hand pointing at 30 seconds.", False),
("svg", "v07", "Draw a pie chart of browser market share: Chrome 65%, Safari 19%, Edge 5%, Firefox 3%, Other 8%, with distinct colors, a legend with labels and percentages, and a title.", False),
("svg", "v08", "Draw a flowchart of a login process: Start -> Enter credentials -> Valid? (a diamond) -> yes: Dashboard; no: Show error -> back to Enter credentials. Use rounded boxes and arrows with arrowheads.", False),
("html", "h01", "Build a landing page for a bakery called 'Golden Crust': a navigation bar, a hero section with a headline and a call-to-action button, three product cards with prices, and a footer. Use a warm color palette.", False),
("html", "h02", "Build a pricing section with three plans (Basic $9/month, Pro $29/month highlighted as most popular, Enterprise $99/month), each with a feature list with check marks and a button.", False),
("html", "h03", "Build a centered login card on a gradient background: app title, email and password inputs with labels, a 'Remember me' checkbox, a primary sign-in button and a 'Forgot password?' link.", False),
("html", "h04", "Build an admin dashboard layout: a left sidebar with 5 menu items (one active), a top bar with a search field and an avatar, four KPI cards (Revenue, Users, Orders, Conversion) and a table of 5 recent orders.", False),
("html", "h05", "Build a responsive photo gallery grid of 12 tiles (use CSS gradients as placeholder images) with captions that appear on hover.", False),
("html", "h06", "Build a blog article page with good typography: title, author and date, a lead paragraph, two subheadings, a blockquote, a code snippet block and an image placeholder with a caption.", False),
("html", "h07", "Build a CSS-only animated loading indicator centered on the page: three bouncing dots and a circular spinner below them.", True),
("html", "h08", "Build a restaurant menu page with three sections (Starters, Mains, Desserts), each with 3-4 dishes with short descriptions and right-aligned prices joined by dotted leaders.", False),
("canvas", "c01", "Make a canvas animation of 20 colorful balls bouncing off the walls with gravity and slight energy loss.", True),
("canvas", "c02", "Make a live analog clock drawn on a canvas that shows the current time with smoothly moving hands.", True),
("canvas", "c03", "Make a particle fountain on a canvas: particles emitted from the bottom center rise and fall with gravity, fade out, and glow (additive blending).", True),
("canvas", "c04", "Make Conway's Game of Life on a 60x40 grid on a canvas: random start, several updates per second, and a generation counter.", True),
("canvas", "c05", "Draw an animated bar chart on a canvas of monthly sales (Jan 120, Feb 150, Mar 90, Apr 180, May 210, Jun 160) with axes, labels and values; the bars grow from zero when the page loads.", False),
("canvas", "c06", "Draw a recursive fractal tree on a canvas, with branches getting thinner and greener towards the tips.", False),
("canvas", "c07", "Make a playable Snake game on a canvas (arrow keys) with food, a score display and a game-over message; the snake moves automatically.", True),
("canvas", "c08", "Make a 3D starfield animation on a canvas: flying through space, stars move out from the center and grow.", True),
("three", "t01", "Make a three.js scene: a rotating cube with a standard material, lit by a directional light and an ambient light, casting a soft shadow on a ground plane.", True),
("three", "t02", "Make a three.js solar system: a glowing sun and three planets of different sizes and colors orbiting at different speeds, one of them with a moon.", True),
("three", "t03", "Make a three.js low-poly terrain landscape: hills from sine functions or noise, flat shading, colors by height (water, grass, rock, snow) and a sky background color.", False),
("three", "t04", "Make a three.js scene with a spinning torus knot with a shiny metallic material and two colored point lights orbiting it.", True),
("three", "t05", "Make a three.js 3D room seen from a corner: a floor, two walls, a table with four legs, a chair and a lamp.", False),
("three", "t06", "Make a three.js spiral galaxy made of thousands of points, colored from a warm center to blue arms, slowly rotating.", True),
("three", "t07", "Make a three.js snowman: three snow spheres, a carrot nose, coal eyes and buttons, stick arms and a hat, standing on snowy ground.", False),
("three", "t08", "Make a three.js 3D bar chart of the values 3, 7, 5, 9, 4 as colored boxes on a grid, with the camera slowly orbiting around it.", True),
]
os.makedirs("data/visual", exist_ok=True)
with open("data/visual/tasks.jsonl", "w", encoding="utf-8") as f:
for cat, tid, text, animated in T:
if cat == "svg":
prompt = text + SVG_TAIL
else:
prompt = text + HTML_TAIL.format(lib=LIB_THREE if cat == "three" else LIB_NONE)
f.write(json.dumps({"id": f"visual/{tid}", "task": "visual", "cat": cat, "kind": "svg" if cat == "svg" else "html",
"animated": animated, "prompt": prompt}, ensure_ascii=False) + "\n")
print(len(T), "tasks")
|