| """Task instructions, one per (surface, mode). Served in the reset observation. |
| |
| These are the environment's own statement of the task, so every harness (the |
| rollout script, a trainer, Claude over MCP) starts from the same wording, and a |
| result is only comparable within one `PROMPT_VERSION`. |
| """ |
|
|
| from __future__ import annotations |
|
|
| PROMPT_VERSION = "v5" |
|
|
| _GOAL = { |
| "reference": ( |
| "Recreate the target design as exactly as you can. The target image is shown " |
| "{where}. Match every element's position, size, stacking order, font, size and colour." |
| ), |
| "description": ( |
| "Build the design described below. There is no target image: read the brief, work out " |
| "a layout that fits it, and use every asset and every line of copy it mentions.\n\n" |
| "BRIEF\n{description}" |
| ), |
| } |
|
|
| _CANVAS = ( |
| "The canvas is {width}x{height} px. Coordinates are canvas pixels from the top-left corner; " |
| "x/y is an element's top-left, before rotation. Elements stack back to front in the order " |
| "they are added." |
| ) |
|
|
| _TEXT_RULES = ( |
| "Text is typed, never pasted as an image. Text boxes do not wrap: put line breaks in the " |
| "text as \\n. A text box's height follows its lines; its width sets the alignment box. " |
| "Only the fonts in list_fonts exist." |
| ) |
|
|
| _SURFACE = { |
| "tools": ( |
| "You edit the canvas with tool calls: add_image, add_text, add_shape, update_element, " |
| "reorder_element, align_elements, delete_element, duplicate_element, set_background, " |
| "undo and redo. view_assets shows every asset with its id; view_canvas shows your " |
| "current render; list_elements lists what is on the canvas. " + _TEXT_RULES |
| ), |
| "html": ( |
| "You write the design as one HTML page and submit it with write_html. The page:\n" |
| '<div id="canvas" style="width:{width}px;height:{height}px;background:#hex"> ... </div>\n' |
| "Every element inside the canvas is absolutely positioned (left/top, or right/bottom) in " |
| "px, %, em or rem; wrapper divs are fine and pass their offset on. A <style> block with " |
| "tag, class and id rules works, and inline styles win. <img src=\"asset://a3\"> places an " |
| "asset (width and height required). An element containing text is a text box: " |
| "font-family, font-size, color, text-align, line-height, letter-spacing, font-weight, " |
| "font-style, text-transform:uppercase; <span> styles part of it. Text never wraps: " |
| "break lines with <br> (or newlines under white-space:pre). An empty div with a " |
| "background (and optional border, border-radius; 50% for an ellipse) is a shape. " |
| "transform: rotate(), translate() and opacity work; z-index orders layers. Flexbox, " |
| "grid and other flow layout are not applied, and anything else unsupported is reported " |
| "back as a warning. read_html returns the current page, view_canvas renders it, " |
| "view_assets shows the assets. Only the fonts in list_fonts exist." |
| ), |
| "gui": ( |
| "You operate a real design editor through screenshots, with the mouse and keyboard. " |
| "{coords} The assets are image files on this computer: open them with the editor's own " |
| "command for adding an image (insert, place, import or upload; files already uploaded " |
| "are listed in the editor's uploads), choose the file in the file " |
| "window (each file is named after its asset id) and open it, or drag it from the window onto " |
| "the canvas. If the image then follows the pointer, click where it goes or drag out its box. " |
| "The file window can be moved by its title bar and resized from its edges. Text is added with the text tool, and " |
| "every element's exact position, size, font and colour can be typed into the property " |
| "panel. Double-click text to edit it; Escape finishes editing. Text never wraps inside its " |
| "box, whatever its width: press Enter while editing to start a new line. Ctrl+Z undoes. " |
| "Only the fonts in the editor's font list exist. The editor's layout may differ between " |
| "episodes; read the screen rather than assuming where controls are." |
| ), |
| } |
|
|
| |
| _SURFACE["gui_penpot"] = ( |
| "You operate Penpot, a real design app, through screenshots, with the mouse and keyboard. {coords} " |
| "Work inside the board named Design, which is the {width}x{height} canvas; anything outside it is not scored. " |
| "The task's images are already in this file's library: open the Assets tab in the left sidebar and drag an " |
| "image from Images onto the board (each is named after its asset id). Text is added with the text tool; " |
| "position, size, rotation, fill, font, size and colour can be typed into the Design panel on the right. " |
| "Double-click text to edit it; Escape finishes editing. Text wraps inside a fixed-width box. " |
| "Ctrl+Z undoes. Read the screen rather than assuming where controls are." |
| ) |
| _DESKTOP = ( |
| "You operate {app}, a real desktop app on Linux, through screenshots, with the mouse and keyboard. {{coords}} " |
| "{canvas} The task's images are files named after their asset ids (a1.png, a2.png, ...) in the Pictures folder " |
| "of your home directory: {insert} Text is added with the text tool. Ctrl+Z undoes. Read the screen rather " |
| "than assuming where controls are." |
| ) |
| _SURFACE["gui_impress"] = _DESKTOP.format( |
| app="LibreOffice Impress", |
| canvas="The slide is the {width}x{height} canvas; anything off the slide is not scored. Impress shows lengths " |
| "in inches: 1 px = 1/96 inch, so 96 px = 1\" (and 0.2646 mm).", |
| insert="add one with Insert > Image... and pick it in the file window, then move and size it; Format > " |
| "Position and Size (F4) takes exact values.") |
| _SURFACE["gui_inkscape-desktop"] = _DESKTOP.format( |
| app="Inkscape", |
| canvas="The page is the {width}x{height} canvas in px; anything off the page is not scored.", |
| insert="add one with File > Import... (Ctrl+I), pick it in the file window and accept the import dialog; the " |
| "X/Y/W/H fields of the toolbar take exact values.") |
| _SURFACE["gui_gimp"] = _DESKTOP.format( |
| app="GIMP", |
| canvas="The image is the {width}x{height} canvas; its base layer is the background colour.", |
| insert="add one as a layer with File > Open as Layers... (Ctrl+Alt+O) and pick it in the file window; layers " |
| "keep their file names. Move layers with the Move tool and size them with Layer > Scale Layer.") |
| _FINISH = { |
| "tools": "When the design is finished call submit. You have at most {max_steps} actions; looking " |
| "(view_canvas, view_reference, view_assets, list_elements, list_fonts) is free.", |
| "html": "When the design is finished call submit. You have at most {max_steps} actions; looking " |
| "(read_html, view_canvas, view_reference, view_assets, list_fonts) is free.", |
| "gui": "When the design is finished, export it with the editor's Export button; exporting hands it in " |
| "(the submit tool does the same). You have at most {max_steps} actions (clicks, drags, typing, " |
| "keys); screenshots are free.", |
| "gui_penpot": "When the design is finished call the submit tool; that hands in the Design board. You have at " |
| "most {max_steps} actions (clicks, drags, typing, keys); screenshots are free.", |
| **{f"gui_{app}": "When the design is finished call the submit tool; that hands in the current document. You have " |
| "at most {max_steps} actions (clicks, drags, typing, keys); screenshots are free." |
| for app in ("impress", "inkscape-desktop", "gimp")}, |
| } |
|
|
|
|
| _COORDS = { |
| "pixels": "Screen coordinates are pixels of the {vw}x{vh} screenshot.", |
| "normalized": "Screen coordinates are on a 0-1000 grid over the screenshot: [0, 0] is its top-left corner " |
| "and [1000, 1000] its bottom-right, whatever the image size.", |
| } |
|
|
|
|
| def _variant(surface: str, skin: str | None) -> str: |
| return f"{surface}_{skin}" if surface == "gui" and f"{surface}_{skin}" in _SURFACE else surface |
|
|
|
|
| def instructions(surface: str, mode: str, info: dict, viewport=(1280, 800), coordinates: str = "pixels", |
| skin: str | None = None) -> str: |
| canvas = info["canvas"] |
| where = { |
| "tools": "with the task and any time from view_reference", |
| "html": "with the task and any time from view_reference", |
| "gui": "with the task and any time from view_reference (it is not shown in the editor)", |
| }[surface] |
| parts = [ |
| f"You are a graphic designer. The task is a {info['format']} titled " |
| f"\"{info['title']}\".", |
| _GOAL[mode].format(where=where, description=info.get("description", "")), |
| _CANVAS.format(width=canvas["width"], height=canvas["height"]), |
| _SURFACE[_variant(surface, skin)].format(width=canvas["width"], height=canvas["height"], |
| coords=_COORDS[coordinates].format(vw=viewport[0], vh=viewport[1])), |
| ] |
| assets = ", ".join(f"{a['id']} ({a['kind']}, aspect {a['aspect_ratio']:.2f})" |
| for a in info["assets"]) |
| parts.append(f"Assets: {assets or 'none'}.") |
| parts.append(f"Fonts used by this design: {', '.join(info['fonts_used'])}.") |
| parts.append(_FINISH[_variant(surface, skin)].format(max_steps=info["max_steps"])) |
| return "\n\n".join(parts) |
|
|
