Cognotik | WriteHtmlTask

ExecutionConfig.json JSON

{
  "files": ["dashboard.html"],
  "task_description": "A dark-themed analytics dashboard.",
  "generate_images": true,
  "image_count": 2,
  "task_dependencies": []
}

→

SessionTask UI Rendered

✔ Generation Complete

• File: dashboard.html
• Images: 2 generated (hero.png, chart-bg.png)
• Components: HTML5, CSS3, JS (ES6+)

Live Results Showcase

Explore actual artifacts generated by WriteHtmlTask in the test workspace.

Configuration Parameters

Field	Type	Description
`files` *	`List<String>`	The HTML file to be created. Must end with `.html`.
`task_description` *	`String`	Detailed requirements including layout, styling, and functionality.
`related_files`	`List<String>`	Context files (templates, existing code) to guide generation.
`generate_images`	`Boolean`	If true, triggers the AI image generation sub-process.
`image_count`	`Int`	Number of images to generate (Range: 0-10).
`task_dependencies`	`List<String>`	IDs of tasks that must complete before this one.

The Multi-Stage Pipeline

WriteHtmlTask uses a sequential refinement process to ensure high-quality code separation.

01 Structure Generation

Generates semantic HTML5 markup with descriptive class names, excluding styles and scripts.

1.5 Visual Asset Creation

If enabled, identifies image placeholders and generates PNG assets using ImageProcessingAgent.

02 Logic & Interactivity

Generates modern ES6+ JavaScript based on the specific DOM structure created in Step 1.

03 Styling & Layout

Generates responsive CSS (Flexbox/Grid) targeting the generated class names.

3.5 Image Insertion

Re-processes the HTML structure to insert <img> tags for all generated assets with appropriate alt text.

04 Assembly

Merges all components into a single self-contained file, inserting image references and base64 fallbacks.

Embedded Execution (Headless)

Invoke WriteHtmlTask directly from your Kotlin code using the UnifiedHarness.

import com.simiacryptus.cognotik.plan.tools.file.WriteHtmlTask
import com.simiacryptus.cognotik.plan.tools.file.WriteHtmlTask.Companion.WriteHtml

// 1. Define the Job
val executionConfig = WriteHtmlTask.WriteHtmlTaskExecutionConfigData(
    files = listOf("index.html"),
    task_description = "A modern landing page for a SaaS product with a pricing table.",
    generate_images = true,
    image_count = 3
)

// 2. Run via Harness
harness.runTask(
    taskType = WriteHtml,
    typeConfig = TaskTypeConfig(), // Default settings
    executionConfig = executionConfig,
    workspace = File("./my-web-project"),
    autoFix = true
)

Prompt Segment

The following logic is injected into the LLM context when this task is active:

WriteHtml - Create a complete HTML file with embedded CSS and JavaScript
** Specify the HTML file path in the files array (must end with .html)
** Provide a detailed description of the page requirements
** The generated HTML will be a complete, self-contained document
** Generated images (if enabled) embedded as base64 or saved as separate files