| """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") |
|
|
