| """Mentor curriculum: 120 visual training tasks (30 per category), written to teach the skills the benchmark needs |
| (polar coordinates and arcs, composing objects from primitives, chart axes, layout, the animation loop, three.js |
| camera / lights / scene setup) on subjects that differ from the 32 benchmark tasks, which stay held out. |
| Same answer format and checks as scripts/make_visual_tasks.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\">.") |
|
|
| SVG = [ |
| "Draw a compass rose: an eight-pointed star whose four main points are longer than the four diagonal ones, the letters N, E, S and W just outside the main points (N at the top), and 16 evenly spaced tick marks on a circle around it.", |
| "Draw a donut chart of time spent on a project: Design 40%, Development 35%, Testing 15%, Meetings 10%, in distinct colours, with the text '100 h' in the centre and a legend with labels and percentages.", |
| "Draw a vertical bar chart of rainfall per season (Winter 120 mm, Spring 80 mm, Summer 40 mm, Autumn 100 mm) with a y axis with a tick every 20 mm, season labels under the bars, the value above each bar and a title.", |
| "Draw a line chart of a stock price over seven days (Mon 12, Tue 15, Wed 11, Thu 18, Fri 21, Sat 19, Sun 24) with x and y axes, horizontal grid lines, a dot on each data point, day labels and a title.", |
| "Draw a side view of a red sports car on a grey road: a low body, a windshield and a side window, two black wheels with silver hubcaps, a headlight at the front and a tail light at the back.", |
| "Draw a sailing boat on blue waves: a brown hull, a mast, two white triangular sails, a small red flag on top of the mast and a yellow sun in a light blue sky.", |
| "Draw a cartoon owl sitting on a branch: a round brown body, two big round eyes with black pupils and white highlights, an orange beak, a wing on each side and orange feet gripping the branch.", |
| "Draw a cartoon rocket flying upward: a white body with a red nose cone, a round blue window, two red fins at the bottom, an orange and yellow flame under it, and a few stars on a dark blue background.", |
| "Draw a traffic light on a grey pole: a dark rounded housing with three round lamps stacked vertically, the top red lamp lit (bright, with a glow) and the yellow and green lamps dimmed.", |
| "Draw a smiling sun: a yellow circle with two eyes and a smile, surrounded by 12 evenly spaced orange triangular rays, on a light blue background.", |
| "Draw a snowflake with six-fold symmetry: six identical arms at 60 degree intervals, each arm with two pairs of short side branches, in light blue on a dark blue background.", |
| "Draw a chessboard: an 8x8 grid of alternating light and dark squares (the bottom-right square is light), with the letters a to h under the columns and the numbers 1 to 8 left of the rows (1 at the bottom).", |
| "Draw a row of four weather icons with a label under each: Sunny (a sun), Cloudy (a cloud), Rain (a cloud with falling drops) and Storm (a dark cloud with a yellow lightning bolt).", |
| "Draw a horizontal battery icon showing 70% charge: a rounded outline with a small terminal on the right, a green fill covering 70% of the inside and the text '70%' centred on it.", |
| "Draw a circular progress indicator at 65%: a light grey ring, a blue arc covering 65% of the ring that starts at the top and goes clockwise with rounded ends, and the text '65%' in the centre.", |
| "Draw an organisation chart: a 'CEO' box at the top, three boxes below it ('CTO', 'CFO', 'COO') and two boxes ('Dev Team', 'QA Team') under 'CTO', connected by lines with right-angle bends.", |
| "Draw a Venn diagram of three overlapping circles labelled A, B and C in semi-transparent red, green and blue, arranged in a triangle so that every pair overlaps and all three share a central region, with a title.", |
| "Draw a thermometer: a vertical glass tube with a round bulb at the bottom, red liquid up to 25 °C, and a scale from -10 to 40 °C with a labelled tick every 10 degrees.", |
| "Draw a large oak tree in a meadow: a brown trunk with two branches, a big leafy crown made of overlapping circles in two shades of green, grass at the bottom and a wooden fence in the background.", |
| "Draw a lighthouse on dark rocks at night: a tower with red and white horizontal stripes, a lantern room at the top with a yellow light, two light beams spreading sideways, a dark sea and a few stars.", |
| "Draw a butterfly seen from above with mirror-symmetric wings: two large upper wings and two smaller lower wings with matching spots, a dark body in the middle and two curled antennae.", |
| "Draw a pizza seen from above: a round golden crust, red sauce and yellow cheese, cut into 8 equal slices by straight lines through the centre, with 10 pepperoni slices spread evenly.", |
| "Draw a car speedometer: a semicircular dial from 0 to 200 km/h, a numbered tick every 20 km/h with smaller ticks in between, a red needle pointing at 120 and the text 'km/h' below the centre.", |
| "Draw a calendar page: the header 'March 2025', a row of weekday names Mon to Sun, and the days 1 to 31 in a 7-column grid where 1 March falls on a Saturday; highlight the 14th with a circle.", |
| "Draw a city skyline at sunset: a sky gradient from orange at the bottom to purple at the top, a setting sun, and seven dark buildings of different heights and widths with small lit yellow windows.", |
| "Draw an acoustic guitar standing upright: a figure-eight shaped wooden body, a dark round sound hole, a long neck with frets, a headstock with tuning pegs, and six strings from the bridge to the headstock.", |
| "Draw an aquarium: a rectangular glass tank with blue water, sand at the bottom, two green seaweed plants, two colourful fish facing different directions and a column of air bubbles.", |
| "Draw a gold medal: two ribbon strips in blue and red forming a V at the top, a round gold medal with a darker gold rim, a star in the middle and the text '1st' under the star.", |
| "Draw a Gantt chart of four tasks over six weeks: Research weeks 1-2, Design weeks 2-4, Build weeks 3-6, Test weeks 5-6; with week labels on top, task names on the left, coloured bars and vertical grid lines.", |
| "Draw a diagram of a water molecule: a large red oxygen atom labelled 'O' and two smaller white hydrogen atoms labelled 'H' joined to it by bonds at an angle of 104.5 degrees, with the angle marked by an arc and labelled.", |
| ] |
| PAGES = [ |
| "Build a portfolio page for a photographer called 'Mira Lens': a header with the name and navigation, an about section with a round avatar (a CSS gradient) and a short bio, a row of skill tags, and a contact button.", |
| "Build a product page for wireless headphones: a large product image placeholder (CSS gradient), the product name, the price $149, a 4.5 star rating, three colour swatches, a quantity selector and an 'Add to cart' button.", |
| "Build a FAQ section with six questions that expand and collapse when clicked (an accordion), with a plus/minus indicator and clean styling.", |
| "Build a sign-up form with name, email, password, confirm password, a country select and a terms checkbox; show inline error messages under the fields when the form is submitted with invalid values.", |
| "Build a weather widget card: the city name, the current temperature in large type, the condition with a simple icon made with CSS or an emoji, and a row of five daily forecasts with highs and lows.", |
| "Build a kanban board with three columns (To do, In progress, Done), each with three or four task cards showing a title, a coloured tag and an assignee avatar with initials.", |
| "Build a company history timeline: a vertical line in the centre with six milestones (year, title, short text) alternating on the left and right side.", |
| "Build a team page: a grid of six member cards with a round avatar showing initials, the name, the role and two small social links, with a hover effect on the cards.", |
| "Build a table of ten employees (name, department, age, salary) with zebra striping, a sticky header and columns that sort when their header is clicked.", |
| "Build a newsletter sign-up banner: a headline, a short text, an email input and a subscribe button side by side; after a valid email is submitted, the form is replaced by a thank-you message.", |
| "Build a playful 404 error page: a large '404', a short message, a simple illustration made only with CSS shapes, and a button back to the home page.", |
| "Build a chat app layout: a sidebar with five contacts (avatars with initials, names, last message) and a conversation pane with incoming and outgoing message bubbles and a message input bar at the bottom.", |
| "Build a music player card: an album cover placeholder, the song title and artist, a progress bar with elapsed and total time, previous / play / next buttons and a volume slider.", |
| "Build a recipe page for pancakes: a title, an image placeholder, badges for prep time and servings, an ingredients list with checkboxes and numbered preparation steps.", |
| "Build a testimonials section with three customer quote cards, each with a star rating, the quote, the customer's name and role, and a round avatar with initials.", |
| "Build a comparison table of three laptop models across six features, using check marks and crosses, with the middle model's column highlighted as 'Best value'.", |
| "Build a travel site hero section: a full-width gradient background, a large headline, a subtitle and a search form with destination, dates and number of guests fields and a search button.", |
| "Build a settings page with three sections (Account, Notifications, Privacy) using toggle switches styled with CSS, a radio group, a range slider that shows its value, and a save button.", |
| "Build a checkout order summary: a list of three items with thumbnails, names, quantities and prices, then subtotal, shipping, tax and total, a promo code input and a 'Pay now' button.", |
| "Build a conference schedule with two day tabs; clicking a tab shows that day's talks as a list of time slots with title, speaker and room.", |
| "Build a toast notification demo: three buttons (Success, Warning, Error) that each show a coloured toast in the top-right corner which slides in and disappears after three seconds.", |
| "Build a working calculator: a display and a grid of buttons for digits, + - × ÷, a decimal point, equals and clear, styled like a modern phone calculator.", |
| "Build a statistics page: four large numbers with labels (for example 12k users, 98% uptime) in cards, each with a small progress bar, and a short headline above them.", |
| "Build a job board page: a filter sidebar with checkboxes (job type, location) and five job cards with title, company, location, salary range and skill tags.", |
| "Build a modal dialog demo: a button opens a centred modal over a dimmed background with a title, text and Cancel / Confirm buttons; it closes with a close button, the Cancel button or the Escape key.", |
| "Build a landing page for an online course 'Python from Zero': a hero with a call to action, a curriculum list of five modules, an instructor section and a final enrol button.", |
| "Build a real-estate listings grid of six house cards: an image placeholder, the price, the address and small icons with the number of bedrooms and bathrooms.", |
| "Build a four-step sign-up wizard: a step indicator at the top with the current step highlighted, the content of one step at a time and Back / Next buttons that switch between steps.", |
| "Build a five-star rating widget: hovering previews the rating, clicking sets it, and a line of text below shows 'You rated 4 out of 5' (with the chosen number).", |
| "Build a corporate home page: a navigation bar, a hero section, three service blocks with simple CSS icons, a strip with three statistics and a footer with four link columns.", |
| ] |
| CANVAS = [ |
| ("Make a Pong game on a canvas: the left paddle follows the W and S keys, the right paddle is controlled by a simple AI, a ball bounces between them and starts moving on its own, and the score is shown at the top.", True), |
| ("Make a Breakout game on a canvas: a paddle moved with the mouse or the arrow keys, a ball that starts moving on its own, five rows of coloured bricks that disappear when hit, and a lives counter.", True), |
| ("Make a flocking simulation (boids) on a canvas: 100 small triangles pointing in their direction of travel that follow separation, alignment and cohesion rules and wrap around the edges.", True), |
| ("Make a rain animation on a canvas: hundreds of thin falling raindrops at slightly different speeds that make small splashes when they reach the bottom.", True), |
| ("Make a pendulum simulation on a canvas: a bob on a rod swinging from a fixed pivot with realistic motion and slight damping, leaving a fading trace of the bob's path.", True), |
| ("Make a double pendulum simulation on a canvas that leaves a colourful fading trail behind the lower bob.", True), |
| ("Make a spirograph animation on a canvas: a hypotrochoid curve drawn gradually over time, changing colour as it is drawn.", True), |
| ("Make a fireworks animation on a canvas: rockets rise from the bottom and explode into colourful particles that spread out, fall with gravity and fade.", True), |
| ("Make a wave animation on a canvas: three sine waves with different colours, amplitudes and frequencies that scroll continuously, drawn semi-transparent over each other.", True), |
| ("Make a 'digital rain' animation on a canvas: columns of green characters falling down the screen at different speeds, with a brighter character at the front of each column.", True), |
| ("Make a bouncing logo screensaver on a canvas: a rounded rectangle with the text 'LFM' moves diagonally and changes colour every time it hits an edge.", True), |
| ("Make a maze generator on a canvas: carve a 25x25 maze step by step with the recursive backtracker algorithm (showing the current cell), then show the finished maze.", True), |
| ("Make a mouse trail effect on a canvas: colourful particles are emitted at the mouse position, drift outwards, shrink and fade; while the mouse has not moved yet, particles are emitted from the centre.", True), |
| ("Make a simple paint app with a canvas: draw with the mouse, a palette of six colour buttons, a brush size slider and a clear button.", False), |
| ("Make a radar screen on a canvas: concentric green circles and cross lines, a sweep line rotating around the centre with a fading glow behind it, and blips that light up when the sweep passes them.", True), |
| ("Make a rotating 3D wireframe cube on a 2D canvas without libraries: project the 8 vertices with perspective and draw the 12 edges while the cube rotates around two axes.", True), |
| ("Make a flow field animation on a canvas: hundreds of particles move along a smoothly varying angle field (built from sine and cosine of the position) and leave thin fading trails.", True), |
| ("Make a stopwatch on a canvas: a large digital time in mm:ss.cs that starts running when the page loads, with Stop/Start and Reset buttons below the canvas.", True), |
| ("Make Langton's ant on a canvas: a grid of small cells and an ant that follows the rule (turn right on a white cell, left on a black cell, flip the cell, move forward), many steps per frame, with a step counter.", True), |
| ("Make a sorting visualiser on a canvas: 50 bars of random heights sorted by bubble sort step by step, with the two bars being compared highlighted in red.", True), |
| ("Make an Asteroids-style game on a canvas: a triangular ship that rotates with the arrow keys, thrusts forward and shoots with space, several drifting asteroids, and screen wrapping.", True), |
| ("Make a water surface simulation on a canvas: a horizontal water line made of springs along which waves travel; clicking makes a splash, and a gentle automatic wave runs from the start.", True), |
| ("Make a pulsing heart on a canvas: a red heart drawn from the parametric heart curve, scaling up and down like a heartbeat, with a soft glow.", True), |
| ("Make a Flappy Bird style game on a canvas: a bird that falls with gravity and flaps with the space key, pipes with gaps scrolling in from the right, a score and a game-over message.", True), |
| ("Make a circular progress animation on a canvas: an arc that fills from 0 to 100% with the percentage in the centre, then restarts, with smooth easing.", True), |
| ("Make a Lissajous curve animation on a canvas: the curve x = sin(3t + phase), y = sin(2t) drawn in full, with the phase changing slowly so that the shape morphs.", True), |
| ("Make a snowfall animation on a canvas: snowflakes of different sizes falling at different speeds and swaying sideways in the wind, over a dark blue night sky with white ground at the bottom.", True), |
| ("Make a Mandelbrot set render on a canvas: compute it for the whole window with a smooth colour palette, showing the real axis from -2.5 to 1.", False), |
| ("Make a particle text effect on a canvas: hundreds of particles fly from random positions to form the word 'HELLO' in the centre, with a little jitter once they arrive.", True), |
| ("Make a memory game on a canvas: a 4x4 grid of face-down cards; clicking flips a card, matching pairs stay open, and a move counter is shown.", False), |
| ] |
| THREE = [ |
| ("Make a three.js scene of a DNA double helix: two spiral strands of small spheres connected by thin cylinders between paired spheres, slowly rotating around the vertical axis.", True), |
| ("Make a three.js forest: 100 simple trees (a brown cylinder trunk and a green cone crown) placed at random on a green ground plane, with fog and the camera slowly circling the forest.", True), |
| ("Make a three.js globe: a blue sphere with a wireframe grid of latitude and longitude lines on it, slowly rotating, with a soft glowing halo around it, on a black background with stars.", True), |
| ("Make a three.js toy car built from primitives (a box body, a smaller box cabin, four cylinder wheels) that drives around a circular road on green ground, seen from above at an angle.", True), |
| ("Make a three.js tower of ten colourful boxes stacked with slight random rotations, slowly rotating as a whole, standing on a ground plane that receives their shadows.", True), |
| ("Make a three.js lighthouse at night: a cylinder tower with red and white stripes, a glowing lamp at the top with a rotating cone-shaped light beam, standing on a rock, with stars in the sky.", True), |
| ("Make three.js ocean waves: a large plane whose vertices move up and down with combined sine waves every frame, a blue shiny material lit by a directional light, and a light sky background.", True), |
| ("Make a three.js fireflies scene: 200 small glowing points drifting slowly in a dark garden above a ground plane, with a few bushes made of green spheres.", True), |
| ("Make a three.js rotating icosahedron with flat shading and a wireframe overlay, lit by two coloured lights on opposite sides.", True), |
| ("Make a three.js chess scene: an 8x8 board of light and dark tiles and a few pieces made of simple shapes (cylinders, spheres, cones), seen from an angle, with soft shadows.", False), |
| ("Make a three.js windmill on a grassy hill: a tapered tower, a small roof, and four blades on a hub that rotate continuously.", True), |
| ("Make a three.js tunnel: the camera flies forward through a long tunnel of glowing torus rings whose colours shift along the tunnel.", True), |
| ("Make a three.js Rubik's cube: 27 small cubes with gaps between them and coloured faces (white, yellow, red, orange, blue, green), slowly rotating as a whole.", True), |
| ("Make a three.js desk scene: a laptop (a thin base and an open screen with a glowing emissive surface), a coffee mug (a cylinder with a torus handle) and a stack of two books on a wooden desk top.", False), |
| ("Make a three.js floating islands scene: three rocky islands (dodecahedrons with flat grassy green tops) at different heights, gently bobbing up and down, with clouds made of white spheres.", True), |
| ("Make a three.js Christmas tree: three stacked green cones, a yellow star on top, colourful ornament spheres on the cones and two gift boxes underneath, slowly rotating.", True), |
| ("Make three.js bouncing balls: eight coloured balls bouncing inside a transparent glass box with simple gravity and wall collisions.", True), |
| ("Make a three.js billiards scene: a green table with brown borders, fifteen coloured balls arranged in a triangle and a white cue ball, lit from above with shadows.", False), |
| ("Make a three.js spinning gold coin: a flat cylinder with a shiny metallic gold material and a raised ring on each face, spinning around its vertical axis.", True), |
| ("Make a three.js night city block: twenty buildings (boxes of random heights) on a dark street grid, with small emissive yellow windows, and the camera slowly circling.", True), |
| ("Make a three.js 3D scatter plot: 200 points with random coordinates coloured by their height, with axes, a grid on the floor and the camera orbiting around the data.", True), |
| ("Make a three.js winter cabin: a small cabin (a box with a pyramid roof and a chimney) on white ground, with snowflakes (points) falling and starting again at the top.", True), |
| ("Make a three.js desert scene: three pyramids (four-sided cones) of different sizes on sand-coloured ground under a bright low sun, casting long shadows.", False), |
| ("Make a three.js robot built from boxes and cylinders: a head with two glowing eyes, a body, arms that swing back and forth and two legs, standing on a floor.", True), |
| ("Make two interlocking gears in three.js: each built from a cylinder with box teeth around it, rotating in opposite directions so that their teeth mesh.", True), |
| ("Make a three.js hot-air balloon: a striped sphere-shaped envelope, ropes and a small basket, gently rising and sinking above green hills.", True), |
| ("Make a three.js sailing boat on water: a blue water plane, a boat with a box-shaped hull and a triangular sail, rocking gently on the waves.", True), |
| ("Make a three.js spiral staircase: twenty steps (thin boxes) arranged around a central column, each step rotated and raised, with the camera slowly orbiting.", True), |
| ("Make a three.js pinwheel of 12 coloured cubes arranged in a circle, each spinning on its own axis while the whole circle rotates.", True), |
| ("Make a three.js campfire scene: logs (cylinders) crossed on the ground, flickering flames made of orange and yellow cones that change scale, and a point light whose intensity flickers.", True), |
| ] |
|
|
| tasks = [] |
| for i, p in enumerate(SVG, 1): |
| tasks.append({"id": f"mentor/s{i:02d}", "cat": "svg", "kind": "svg", "animated": False, "prompt": p + SVG_TAIL}) |
| for i, p in enumerate(PAGES, 1): |
| tasks.append({"id": f"mentor/p{i:02d}", "cat": "html", "kind": "html", "animated": False, |
| "prompt": p + HTML_TAIL.format(lib=LIB_NONE)}) |
| for i, (p, anim) in enumerate(CANVAS, 1): |
| tasks.append({"id": f"mentor/a{i:02d}", "cat": "canvas", "kind": "html", "animated": anim, |
| "prompt": p + HTML_TAIL.format(lib=LIB_NONE)}) |
| for i, (p, anim) in enumerate(THREE, 1): |
| tasks.append({"id": f"mentor/d{i:02d}", "cat": "three", "kind": "html", "animated": anim, |
| "prompt": p + HTML_TAIL.format(lib=LIB_THREE)}) |
| os.makedirs("data/visual", exist_ok=True) |
| with open("data/visual/mentor_tasks.jsonl", "w", encoding="utf-8") as f: |
| for t in tasks: |
| f.write(json.dumps({"id": t["id"], "task": "visual", **{k: v for k, v in t.items() if k != "id"}}, |
| ensure_ascii=False) + "\n") |
| print(len(tasks), "tasks -> data/visual/mentor_tasks.jsonl") |
|
|
