search
User
arrow_back

AI Log #39

14 Mar 2026 14:35:56 · builder · auto

Type

generate_page

Source

builder

Provider / Model

auto

สถานะ

✅ สำเร็จ

Duration

36.03s

Input Tokens

0

Output Tokens

0

IP Address

127.0.0.1

Prompt (ต้นฉบับ)

[โซน: BODY — สร้างเนื้อหาหลัก เช่น Hero, Features, About, Testimonials, CTA, Contact. ห้าม include NavMenu หรือ Footer]
[รูปภาพ: ต้องใส่ Image component ใน Hero section เสมอ และส่วนอื่นที่เหมาะสม. Backend pipeline จะ inject URL รูปภาพที่ถูกต้องให้อัตโนมัติ — ห้าม generate URL รูปภาพเอง ห้ามใช้ source.unsplash.com ทุกกรณี. Image props: width: "100%", height: 350-550, objectFit: "cover"]
สร้าง hero section มีรูปหมาเป็นพื้นหลัง และทำให้ h1 เขียนว่า หมาสวัสดีครับ subtext บอกว่า สวัสดีจ้า

AI Response

{
    "ROOT": {
        "type": {
            "resolvedName": "Hero"
        },
        "isCanvas": true,
        "props": {
            "backgroundImage": "https:\/\/loremflickr.com\/1920\/1080\/dog,puppy",
            "backgroundSize": "cover",
            "backgroundPosition": "center",
            "paddingTop": 120,
            "paddingBottom": 120,
            "minHeight": "100vh",
            "overlay": true,
            "overlayColor": "rgba(0, 0, 0, 0.5)"
        },
        "displayName": "Hero",
        "custom": [],
        "hidden": false,
        "nodes": [
            "hero_container"
        ],
        "linkedNodes": [],
        "parent": null
    },
    "hero_container": {
        "type": {
            "resolvedName": "Container"
        },
        "isCanvas": true,
        "props": {
            "maxWidth": "1200px",
            "margin": "0 auto",
            "padding": "0 20px"
        },
        "displayName": "Container",
        "custom": [],
        "hidden": false,
        "nodes": [
            "flex_wrapper"
        ],
        "linkedNodes": [],
        "parent": "ROOT"
    },
    "flex_wrapper": {
        "type": {
            "resolvedName": "FlexContainer"
        },
        "isCanvas": true,
        "props": {
            "flexDirection": "column",
            "alignItems": "center",
            "justifyContent": "center",
            "gap": 24,
            "minHeight": "80vh"
        },
        "displayName": "FlexContainer",
        "custom": [],
        "hidden": false,
        "nodes": [
            "heading",
            "subtext",
            "spacer",
            "cta_button"
        ],
        "linkedNodes": [],
        "parent": "hero_container"
    },
    "heading": {
        "type": {
            "resolvedName": "Text"
        },
        "isCanvas": false,
        "props": {
            "text": "เพื่อนที่ดีที่สุดของคุณรออยู่",
            "fontSize": 72,
            "fontWeight": "900",
            "color": "#ffffff",
            "textAlign": "center",
            "lineHeight": 1.1,
            "textShadow": "0 4px 20px rgba(0,0,0,0.5)"
        },
        "displayName": "Text",
        "custom": [],
        "hidden": false,
        "nodes": [],
        "linkedNodes": [],
        "parent": "flex_wrapper"
    },
    "subtext": {
        "type": {
            "resolvedName": "Text"
        },
        "isCanvas": false,
        "props": {
            "text": "ค้นพบน้องหมาแสนน่ารักที่พร้อมเป็นส่วนหนึ่งในครอบครัวของคุณ",
            "fontSize": 24,
            "fontWeight": "400",
            "color": "#f1f5f9",
            "textAlign": "center",
            "lineHeight": 1.5,
            "textShadow": "0 2px 10px rgba(0,0,0,0.4)"
        },
        "displayName": "Text",
        "custom": [],
        "hidden": false,
        "nodes": [],
        "linkedNodes": [],
        "parent": "flex_wrapper"
    },
    "spacer": {
        "type": {
            "resolvedName": "Spacer"
        },
        "isCanvas": false,
        "props": {
            "height": 24
        },
        "displayName": "Spacer",
        "custom": [],
        "hidden": false,
        "nodes": [],
        "linkedNodes": [],
        "parent": "flex_wrapper"
    },
    "cta_button": {
        "type": {
            "resolvedName": "Button"
        },
        "isCanvas": false,
        "props": {
            "text": "รับน้องหมามาเลี้ยง",
            "backgroundColor": "#e44162",
            "textColor": "#ffffff",
            "fontSize": 18,
            "fontWeight": "600",
            "paddingTop": 16,
            "paddingBottom": 16,
            "paddingLeft": 48,
            "paddingRight": 48,
            "borderRadius": 9999,
            "boxShadow": "0 10px 30px rgba(228, 65, 98, 0.4)",
            "hoverBackgroundColor": "#d1294b"
        },
        "displayName": "Button",
        "custom": [],
        "hidden": false,
        "nodes": [],
        "linkedNodes": [],
        "parent": "flex_wrapper"
    }
}
-

หมายเหตุ Admin

account_tree Pipeline Steps Trace 6 steps

timer 35.9s ✓ 6

show_chart Execution Time (Seconds)

linear_scale Pipeline Timeline

output Output Preview

needs_serper:false | img:"cute dog puppy" | biz:"null"

output Output Preview

(skipped by Gate — prompt does not need trend research)

input Input Preview

# COMPONENT REGISTRY (ใช้ได้เฉพาะ resolvedName ในรายการนี้)

> ⛔ ห้ามใช้ component ที่ไม่อยู่ในรายการนี้โดยเด็ดขาด

## LAYOUT
- **Container** [CANVAS] — กล่องทั่วไป กำหนดความกว้างได้
- **Section** [CANVAS] — Section กว้างเต็มหน้า
- **FlexContainer** [CANVAS] — Flexbox layout ยืดหยุ่น
- **GridContainer** [CANVAS] — CSS Grid layout
- **GridRow** [CANVAS] — แถวใน Grid
- **GridCol** [CANVAS] — คอลัมน์ใน Grid
- **Spacer** [CONTENT] — ช่องว่างระหว่าง element
- **FreeCanvas** [CANVAS] — วาง element ได้อิสระ

## CONTENT
- **Text** [CONTENT] — ข้อความ พร้อม rich text editor
- **Button** [CONTENT] — ปุ่ม CTA กำหนดสีและรูปแบบได้
- **Image** [CONTENT] — แสดงรูปภาพ รองรับ URL และ upload
- **Video** [CONTENT] — Embed วิดีโอ YouTube/Vimeo
- **Divider** [CONTENT] — เส้นแบ่ง section
- **CustomBlock** [CONT

output Output Preview

```json
{
  "ROOT": {
    "type": {
      "resolvedName": "Hero"
    },
    "props": {
      "backgroundImage": "https://loremflickr.com/1920/1080/dog,puppy",
      "backgroundSize": "cover",
      "backgroundPosition": "center",
      "paddingTop": 120,
      "paddingBottom": 120,
      "minHeight": "100vh",
      "overlay": true,
      "overlayColor": "rgba(0, 0, 0, 0.4)"
    },
    "nodes": ["hero_container"],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "Hero",
    "linkedNodes": {},
    "parent": null
  },
  "hero_container": {
    "type": {
      "resolvedName": "Container"
    },
    "props": {
      "maxWidth": "1200px",
      "margin": "0 auto",
      "padding": "0 20px"
    },
    "nodes": ["flex_wrapper"],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "Container",
    "linkedNodes": {},
    "parent": "ROOT"
  },
  "flex_wrapper": {
    "type": {
      "resolvedName": "FlexContainer"
    },
    "props": {
      "flexDirection": "column",
      "alignItems": "center",
      "justifyContent": "center",
      "gap": 24,
      "minHeight": "80vh"
    },
    "nodes": ["heading", "subtext", "spacer", "cta_button"],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "FlexContainer",
    "linkedNodes": {},
    "parent": "hero_container"
  },
  "heading": {
    "type": {
      "resolvedName": "Text"
    },
    "props": {
      "text": "หมาสวัสดีครับ",
      "fontSize": 72,

input Input Preview

# COMPONENT REGISTRY (ใช้ได้เฉพาะ resolvedName ในรายการนี้)

> ⛔ ห้ามใช้ component ที่ไม่อยู่ในรายการนี้โดยเด็ดขาด

## LAYOUT
- **Container** [CANVAS] — กล่องทั่วไป กำหนดความกว้างได้
- **Section** [CANVAS] — Section กว้างเต็มหน้า
- **FlexContainer** [CANVAS] — Flexbox layout ยืดหยุ่น
- **GridContainer** [CANVAS] — CSS Grid layout
- **GridRow** [CANVAS] — แถวใน Grid
- **GridCol** [CANVAS] — คอลัมน์ใน Grid
- **Spacer** [CONTENT] — ช่องว่างระหว่าง element
- **FreeCanvas** [CANVAS] — วาง element ได้อิสระ

## CONTENT
- **Text** [CONTENT] — ข้อความ พร้อม rich text editor
- **Button** [CONTENT] — ปุ่ม CTA กำหนดสีและรูปแบบได้
- **Image** [CONTENT] — แสดงรูปภาพ รองรับ URL และ upload
- **Video** [CONTENT] — Embed วิดีโอ YouTube/Vimeo
- **Divider** [CONTENT] — เส้นแบ่ง section
- **CustomBlock** [CONT

output Output Preview

```json
{
  "ROOT": {
    "type": {
      "resolvedName": "Hero"
    },
    "props": {
      "backgroundImage": "https://loremflickr.com/1920/1080/dog,puppy",
      "backgroundSize": "cover",
      "backgroundPosition": "center",
      "paddingTop": 120,
      "paddingBottom": 120,
      "minHeight": "100vh",
      "overlay": true,
      "overlayColor": "rgba(0, 0, 0, 0.4)"
    },
    "nodes": [
      "hero_container"
    ],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "Hero",
    "linkedNodes": {},
    "parent": null
  },
  "hero_container": {
    "type": {
      "resolvedName": "Container"
    },
    "props": {
      "maxWidth": "1200px",
      "margin": "0 auto",
      "padding": "0 20px"
    },
    "nodes": [
      "flex_wrapper"
    ],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "Container",
    "linkedNodes": {},
    "parent": "ROOT"
  },
  "flex_wrapper": {
    "type": {
      "resolvedName": "FlexContainer"
    },
    "props": {
      "flexDirection": "column",
      "alignItems": "center",
      "justifyContent": "center",
      "gap": 24,
      "minHeight": "80vh"
    },
    "nodes": [
      "heading",
      "subtext",
      "spacer",
      "cta_button"
    ],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "FlexContainer",
    "linkedNodes": {},
    "parent": "hero_container"
  },
  "heading": {
    "type": {
      "resolvedName": "Text"
    },
    "props": {

output Output Preview

ผ่าน (flat)

input Input Preview

# COMPONENT REGISTRY (ใช้ได้เฉพาะ resolvedName ในรายการนี้)

> ⛔ ห้ามใช้ component ที่ไม่อยู่ในรายการนี้โดยเด็ดขาด

## LAYOUT
- **Container** [CANVAS] — กล่องทั่วไป กำหนดความกว้างได้
- **Section** [CANVAS] — Section กว้างเต็มหน้า
- **FlexContainer** [CANVAS] — Flexbox layout ยืดหยุ่น
- **GridContainer** [CANVAS] — CSS Grid layout
- **GridRow** [CANVAS] — แถวใน Grid
- **GridCol** [CANVAS] — คอลัมน์ใน Grid
- **Spacer** [CONTENT] — ช่องว่างระหว่าง element
- **FreeCanvas** [CANVAS] — วาง element ได้อิสระ

## CONTENT
- **Text** [CONTENT] — ข้อความ พร้อม rich text editor
- **Button** [CONTENT] — ปุ่ม CTA กำหนดสีและรูปแบบได้
- **Image** [CONTENT] — แสดงรูปภาพ รองรับ URL และ upload
- **Video** [CONTENT] — Embed วิดีโอ YouTube/Vimeo
- **Divider** [CONTENT] — เส้นแบ่ง section
- **CustomBlock** [CONT

output Output Preview

```json
{
  "ROOT": {
    "type": {
      "resolvedName": "Hero"
    },
    "props": {
      "backgroundImage": "https://loremflickr.com/1920/1080/dog,puppy",
      "backgroundSize": "cover",
      "backgroundPosition": "center",
      "paddingTop": 120,
      "paddingBottom": 120,
      "minHeight": "100vh",
      "overlay": true,
      "overlayColor": "rgba(0, 0, 0, 0.5)"
    },
    "nodes": [
      "hero_container"
    ],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "Hero",
    "linkedNodes": {},
    "parent": null
  },
  "hero_container": {
    "type": {
      "resolvedName": "Container"
    },
    "props": {
      "maxWidth": "1200px",
      "margin": "0 auto",
      "padding": "0 20px"
    },
    "nodes": [
      "flex_wrapper"
    ],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "Container",
    "linkedNodes": {},
    "parent": "ROOT"
  },
  "flex_wrapper": {
    "type": {
      "resolvedName": "FlexContainer"
    },
    "props": {
      "flexDirection": "column",
      "alignItems": "center",
      "justifyContent": "center",
      "gap": 24,
      "minHeight": "80vh"
    },
    "nodes": [
      "heading",
      "subtext",
      "spacer",
      "cta_button"
    ],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "FlexContainer",
    "linkedNodes": {},
    "parent": "hero_container"
  },
  "heading": {
    "type": {
      "resolvedName": "Text"
    },
    "props": {
{
    "pipeline_run": true,
    "pipeline_steps_count": 6,
    "pipeline_success_count": 6,
    "pipeline_failed_count": 0,
    "pipeline_fallback_count": 0,
    "pipeline_providers_used": [
        "gemini",
        "serper",
        "claude",
        "openai",
        "validator"
    ],
    "pipeline_total_tokens_in": 0,
    "pipeline_total_tokens_out": 0,
    "pipeline_steps": [
        {
            "step": "AI Gate",
            "type": "ai_gate",
            "provider": "gemini",
            "model": "gemini-2.0-flash",
            "duration_ms": 1341,
            "success": true,
            "fallback_used": false,
            "attempts": 1,
            "tried_providers": null,
            "tokens_in": null,
            "tokens_out": null,
            "input_preview": null,
            "output_preview": "needs_serper:false | img:\"cute dog puppy\" | biz:\"null\""
        },
        {
            "step": "Deep Researcher",
            "type": "serper_search",
            "provider": "serper",
            "model": null,
            "duration_ms": 0,
            "success": true,
            "fallback_used": false,
            "attempts": 1,
            "tried_providers": null,
            "tokens_in": null,
            "tokens_out": null,
            "input_preview": null,
            "output_preview": "(skipped by Gate — prompt does not need trend research)"
        },
        {
            "step": "Claude Creative Director",
            "type": "ai_generate",
            "provider": "claude",
            "model": "claude-sonnet-4-5-20250929",
            "duration_ms": 12952,
            "success": true,
            "fallback_used": false,
            "attempts": 1,
            "tried_providers": null,
            "tokens_in": null,
            "tokens_out": null,
            "input_preview": "# COMPONENT REGISTRY (ใช้ได้เฉพาะ resolvedName ในรายการนี้)\n\n> ⛔ ห้ามใช้ component ที่ไม่อยู่ในรายการนี้โดยเด็ดขาด\n\n## LAYOUT\n- **Container** [CANVAS] — กล่องทั่วไป กำหนดความกว้างได้\n- **Section** [CANVAS] — Section กว้างเต็มหน้า\n- **FlexContainer** [CANVAS] — Flexbox layout ยืดหยุ่น\n- **GridContainer** [CANVAS] — CSS Grid layout\n- **GridRow** [CANVAS] — แถวใน Grid\n- **GridCol** [CANVAS] — คอลัมน์ใน Grid\n- **Spacer** [CONTENT] — ช่องว่างระหว่าง element\n- **FreeCanvas** [CANVAS] — วาง element ได้อิสระ\n\n## CONTENT\n- **Text** [CONTENT] — ข้อความ พร้อม rich text editor\n- **Button** [CONTENT] — ปุ่ม CTA กำหนดสีและรูปแบบได้\n- **Image** [CONTENT] — แสดงรูปภาพ รองรับ URL และ upload\n- **Video** [CONTENT] — Embed วิดีโอ YouTube\/Vimeo\n- **Divider** [CONTENT] — เส้นแบ่ง section\n- **CustomBlock** [CONT",
            "output_preview": "```json\n{\n  \"ROOT\": {\n    \"type\": {\n      \"resolvedName\": \"Hero\"\n    },\n    \"props\": {\n      \"backgroundImage\": \"https:\/\/loremflickr.com\/1920\/1080\/dog,puppy\",\n      \"backgroundSize\": \"cover\",\n      \"backgroundPosition\": \"center\",\n      \"paddingTop\": 120,\n      \"paddingBottom\": 120,\n      \"minHeight\": \"100vh\",\n      \"overlay\": true,\n      \"overlayColor\": \"rgba(0, 0, 0, 0.4)\"\n    },\n    \"nodes\": [\"hero_container\"],\n    \"custom\": {},\n    \"hidden\": false,\n    \"isCanvas\": true,\n    \"displayName\": \"Hero\",\n    \"linkedNodes\": {},\n    \"parent\": null\n  },\n  \"hero_container\": {\n    \"type\": {\n      \"resolvedName\": \"Container\"\n    },\n    \"props\": {\n      \"maxWidth\": \"1200px\",\n      \"margin\": \"0 auto\",\n      \"padding\": \"0 20px\"\n    },\n    \"nodes\": [\"flex_wrapper\"],\n    \"custom\": {},\n    \"hidden\": false,\n    \"isCanvas\": true,\n    \"displayName\": \"Container\",\n    \"linkedNodes\": {},\n    \"parent\": \"ROOT\"\n  },\n  \"flex_wrapper\": {\n    \"type\": {\n      \"resolvedName\": \"FlexContainer\"\n    },\n    \"props\": {\n      \"flexDirection\": \"column\",\n      \"alignItems\": \"center\",\n      \"justifyContent\": \"center\",\n      \"gap\": 24,\n      \"minHeight\": \"80vh\"\n    },\n    \"nodes\": [\"heading\", \"subtext\", \"spacer\", \"cta_button\"],\n    \"custom\": {},\n    \"hidden\": false,\n    \"isCanvas\": true,\n    \"displayName\": \"FlexContainer\",\n    \"linkedNodes\": {},\n    \"parent\": \"hero_container\"\n  },\n  \"heading\": {\n    \"type\": {\n      \"resolvedName\": \"Text\"\n    },\n    \"props\": {\n      \"text\": \"หมาสวัสดีครับ\",\n      \"fontSize\": 72,"
        },
        {
            "step": "GPT-4o QA Engineer",
            "type": "ai_review",
            "provider": "openai",
            "model": "gpt-4o",
            "duration_ms": 15181,
            "success": true,
            "fallback_used": false,
            "attempts": 1,
            "tried_providers": null,
            "tokens_in": null,
            "tokens_out": null,
            "input_preview": "# COMPONENT REGISTRY (ใช้ได้เฉพาะ resolvedName ในรายการนี้)\n\n> ⛔ ห้ามใช้ component ที่ไม่อยู่ในรายการนี้โดยเด็ดขาด\n\n## LAYOUT\n- **Container** [CANVAS] — กล่องทั่วไป กำหนดความกว้างได้\n- **Section** [CANVAS] — Section กว้างเต็มหน้า\n- **FlexContainer** [CANVAS] — Flexbox layout ยืดหยุ่น\n- **GridContainer** [CANVAS] — CSS Grid layout\n- **GridRow** [CANVAS] — แถวใน Grid\n- **GridCol** [CANVAS] — คอลัมน์ใน Grid\n- **Spacer** [CONTENT] — ช่องว่างระหว่าง element\n- **FreeCanvas** [CANVAS] — วาง element ได้อิสระ\n\n## CONTENT\n- **Text** [CONTENT] — ข้อความ พร้อม rich text editor\n- **Button** [CONTENT] — ปุ่ม CTA กำหนดสีและรูปแบบได้\n- **Image** [CONTENT] — แสดงรูปภาพ รองรับ URL และ upload\n- **Video** [CONTENT] — Embed วิดีโอ YouTube\/Vimeo\n- **Divider** [CONTENT] — เส้นแบ่ง section\n- **CustomBlock** [CONT",
            "output_preview": "```json\n{\n  \"ROOT\": {\n    \"type\": {\n      \"resolvedName\": \"Hero\"\n    },\n    \"props\": {\n      \"backgroundImage\": \"https:\/\/loremflickr.com\/1920\/1080\/dog,puppy\",\n      \"backgroundSize\": \"cover\",\n      \"backgroundPosition\": \"center\",\n      \"paddingTop\": 120,\n      \"paddingBottom\": 120,\n      \"minHeight\": \"100vh\",\n      \"overlay\": true,\n      \"overlayColor\": \"rgba(0, 0, 0, 0.4)\"\n    },\n    \"nodes\": [\n      \"hero_container\"\n    ],\n    \"custom\": {},\n    \"hidden\": false,\n    \"isCanvas\": true,\n    \"displayName\": \"Hero\",\n    \"linkedNodes\": {},\n    \"parent\": null\n  },\n  \"hero_container\": {\n    \"type\": {\n      \"resolvedName\": \"Container\"\n    },\n    \"props\": {\n      \"maxWidth\": \"1200px\",\n      \"margin\": \"0 auto\",\n      \"padding\": \"0 20px\"\n    },\n    \"nodes\": [\n      \"flex_wrapper\"\n    ],\n    \"custom\": {},\n    \"hidden\": false,\n    \"isCanvas\": true,\n    \"displayName\": \"Container\",\n    \"linkedNodes\": {},\n    \"parent\": \"ROOT\"\n  },\n  \"flex_wrapper\": {\n    \"type\": {\n      \"resolvedName\": \"FlexContainer\"\n    },\n    \"props\": {\n      \"flexDirection\": \"column\",\n      \"alignItems\": \"center\",\n      \"justifyContent\": \"center\",\n      \"gap\": 24,\n      \"minHeight\": \"80vh\"\n    },\n    \"nodes\": [\n      \"heading\",\n      \"subtext\",\n      \"spacer\",\n      \"cta_button\"\n    ],\n    \"custom\": {},\n    \"hidden\": false,\n    \"isCanvas\": true,\n    \"displayName\": \"FlexContainer\",\n    \"linkedNodes\": {},\n    \"parent\": \"hero_container\"\n  },\n  \"heading\": {\n    \"type\": {\n      \"resolvedName\": \"Text\"\n    },\n    \"props\": {"
        },
        {
            "step": "Validator",
            "type": "validator",
            "provider": "validator",
            "model": null,
            "duration_ms": 0,
            "success": true,
            "fallback_used": false,
            "attempts": 1,
            "tried_providers": null,
            "tokens_in": null,
            "tokens_out": null,
            "input_preview": null,
            "output_preview": "ผ่าน (flat)"
        },
        {
            "step": "Gemini Final Polish",
            "type": "ai_refine",
            "provider": "gemini",
            "model": "gemini-2.0-flash",
            "duration_ms": 6437,
            "success": true,
            "fallback_used": false,
            "attempts": 1,
            "tried_providers": null,
            "tokens_in": null,
            "tokens_out": null,
            "input_preview": "# COMPONENT REGISTRY (ใช้ได้เฉพาะ resolvedName ในรายการนี้)\n\n> ⛔ ห้ามใช้ component ที่ไม่อยู่ในรายการนี้โดยเด็ดขาด\n\n## LAYOUT\n- **Container** [CANVAS] — กล่องทั่วไป กำหนดความกว้างได้\n- **Section** [CANVAS] — Section กว้างเต็มหน้า\n- **FlexContainer** [CANVAS] — Flexbox layout ยืดหยุ่น\n- **GridContainer** [CANVAS] — CSS Grid layout\n- **GridRow** [CANVAS] — แถวใน Grid\n- **GridCol** [CANVAS] — คอลัมน์ใน Grid\n- **Spacer** [CONTENT] — ช่องว่างระหว่าง element\n- **FreeCanvas** [CANVAS] — วาง element ได้อิสระ\n\n## CONTENT\n- **Text** [CONTENT] — ข้อความ พร้อม rich text editor\n- **Button** [CONTENT] — ปุ่ม CTA กำหนดสีและรูปแบบได้\n- **Image** [CONTENT] — แสดงรูปภาพ รองรับ URL และ upload\n- **Video** [CONTENT] — Embed วิดีโอ YouTube\/Vimeo\n- **Divider** [CONTENT] — เส้นแบ่ง section\n- **CustomBlock** [CONT",
            "output_preview": "```json\n{\n  \"ROOT\": {\n    \"type\": {\n      \"resolvedName\": \"Hero\"\n    },\n    \"props\": {\n      \"backgroundImage\": \"https:\/\/loremflickr.com\/1920\/1080\/dog,puppy\",\n      \"backgroundSize\": \"cover\",\n      \"backgroundPosition\": \"center\",\n      \"paddingTop\": 120,\n      \"paddingBottom\": 120,\n      \"minHeight\": \"100vh\",\n      \"overlay\": true,\n      \"overlayColor\": \"rgba(0, 0, 0, 0.5)\"\n    },\n    \"nodes\": [\n      \"hero_container\"\n    ],\n    \"custom\": {},\n    \"hidden\": false,\n    \"isCanvas\": true,\n    \"displayName\": \"Hero\",\n    \"linkedNodes\": {},\n    \"parent\": null\n  },\n  \"hero_container\": {\n    \"type\": {\n      \"resolvedName\": \"Container\"\n    },\n    \"props\": {\n      \"maxWidth\": \"1200px\",\n      \"margin\": \"0 auto\",\n      \"padding\": \"0 20px\"\n    },\n    \"nodes\": [\n      \"flex_wrapper\"\n    ],\n    \"custom\": {},\n    \"hidden\": false,\n    \"isCanvas\": true,\n    \"displayName\": \"Container\",\n    \"linkedNodes\": {},\n    \"parent\": \"ROOT\"\n  },\n  \"flex_wrapper\": {\n    \"type\": {\n      \"resolvedName\": \"FlexContainer\"\n    },\n    \"props\": {\n      \"flexDirection\": \"column\",\n      \"alignItems\": \"center\",\n      \"justifyContent\": \"center\",\n      \"gap\": 24,\n      \"minHeight\": \"80vh\"\n    },\n    \"nodes\": [\n      \"heading\",\n      \"subtext\",\n      \"spacer\",\n      \"cta_button\"\n    ],\n    \"custom\": {},\n    \"hidden\": false,\n    \"isCanvas\": true,\n    \"displayName\": \"FlexContainer\",\n    \"linkedNodes\": {},\n    \"parent\": \"hero_container\"\n  },\n  \"heading\": {\n    \"type\": {\n      \"resolvedName\": \"Text\"\n    },\n    \"props\": {"
        }
    ]
}