search
User
arrow_back

AI Log #36

14 Mar 2026 14:00:23 · builder · auto

Type

generate_page

Source

builder

Provider / Model

auto

สถานะ

✅ สำเร็จ

Duration

39.82s

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\/bangsaen,beach,thailand",
            "backgroundSize": "cover",
            "backgroundPosition": "center",
            "minHeight": "100vh",
            "overlay": true,
            "overlayColor": "rgba(0, 0, 0, 0.5)",
            "paddingTop": 120,
            "paddingBottom": 120
        },
        "displayName": "Hero",
        "custom": [],
        "hidden": false,
        "nodes": [
            "hero_container"
        ],
        "linkedNodes": [],
        "parent": null
    },
    "hero_container": {
        "type": {
            "resolvedName": "Container"
        },
        "isCanvas": true,
        "props": {
            "maxWidth": 1200,
            "paddingLeft": 24,
            "paddingRight": 24
        },
        "displayName": "Container",
        "custom": [],
        "hidden": false,
        "nodes": [
            "hero_content"
        ],
        "linkedNodes": [],
        "parent": "ROOT"
    },
    "hero_content": {
        "type": {
            "resolvedName": "FlexContainer"
        },
        "isCanvas": true,
        "props": {
            "flexDirection": "column",
            "alignItems": "center",
            "justifyContent": "center",
            "gap": 32,
            "minHeight": "60vh"
        },
        "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 12px rgba(0, 0, 0, 0.5)"
        },
        "displayName": "Text",
        "custom": [],
        "hidden": false,
        "nodes": [],
        "linkedNodes": [],
        "parent": "hero_content"
    },
    "subtext": {
        "type": {
            "resolvedName": "Text"
        },
        "isCanvas": false,
        "props": {
            "text": "หาดทราย สายลม แสงแดด และเสียงคลื่น",
            "fontSize": 32,
            "fontWeight": "500",
            "color": "#fde68a",
            "textAlign": "center",
            "lineHeight": 1.4,
            "textShadow": "0 2px 8px rgba(0, 0, 0, 0.4)"
        },
        "displayName": "Text",
        "custom": [],
        "hidden": false,
        "nodes": [],
        "linkedNodes": [],
        "parent": "hero_content"
    },
    "spacer": {
        "type": {
            "resolvedName": "Spacer"
        },
        "isCanvas": false,
        "props": {
            "height": 24
        },
        "displayName": "Spacer",
        "custom": [],
        "hidden": false,
        "nodes": [],
        "linkedNodes": [],
        "parent": "hero_content"
    },
    "cta_button": {
        "type": {
            "resolvedName": "Button"
        },
        "isCanvas": false,
        "props": {
            "text": "ไปพักผ่อนกัน!",
            "backgroundColor": "#38bdf8",
            "textColor": "#ffffff",
            "borderRadius": 9999,
            "paddingTop": 18,
            "paddingBottom": 18,
            "paddingLeft": 48,
            "paddingRight": 48,
            "fontSize": 20,
            "fontWeight": "700",
            "boxShadow": "0 10px 30px rgba(56, 189, 248, 0.4)",
            "hoverBackgroundColor": "#0ea5e9"
        },
        "displayName": "Button",
        "custom": [],
        "hidden": false,
        "nodes": [],
        "linkedNodes": [],
        "parent": "hero_content"
    }
}
-

หมายเหตุ Admin

account_tree Pipeline Steps Trace 6 steps

timer 39.6s ✓ 6

show_chart Execution Time (Seconds)

linear_scale Pipeline Timeline

output Output Preview

needs_serper:false | img:"beach ocean sea" | 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/bangsaen,beach,thailand",
      "backgroundSize": "cover",
      "backgroundPosition": "center",
      "minHeight": "100vh",
      "overlay": true,
      "overlayColor": "rgba(0, 0, 0, 0.4)",
      "paddingTop": 120,
      "paddingBottom": 120
    },
    "nodes": ["hero_container"],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "Hero",
    "linkedNodes": {},
    "parent": null
  },
  "hero_container": {
    "type": {
      "resolvedName": "Container"
    },
    "props": {
      "maxWidth": 1200,
      "paddingLeft": 24,
      "paddingRight": 24
    },
    "nodes": ["hero_content"],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "Container",
    "linkedNodes": {},
    "parent": "ROOT"
  },
  "hero_content": {
    "type": {
      "resolvedName": "FlexContainer"
    },
    "props": {
      "flexDirection": "column",
      "alignItems": "center",
      "justifyContent": "center",
      "gap": 32,
      "minHeight": "60vh"
    },
    "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/bangsaen,beach,thailand",
      "backgroundSize": "cover",
      "backgroundPosition": "center",
      "minHeight": "100vh",
      "overlay": true,
      "overlayColor": "rgba(0, 0, 0, 0.4)",
      "paddingTop": 120,
      "paddingBottom": 120
    },
    "nodes": [
      "hero_container"
    ],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "Hero",
    "linkedNodes": {},
    "parent": null
  },
  "hero_container": {
    "type": {
      "resolvedName": "Container"
    },
    "props": {
      "maxWidth": 1200,
      "paddingLeft": 24,
      "paddingRight": 24
    },
    "nodes": [
      "hero_content"
    ],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "Container",
    "linkedNodes": {},
    "parent": "ROOT"
  },
  "hero_content": {
    "type": {
      "resolvedName": "FlexContainer"
    },
    "props": {
      "flexDirection": "column",
      "alignItems": "center",
      "justifyContent": "center",
      "gap": 32,
      "minHeight": "60vh"
    },
    "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/bangsaen,beach,thailand",
      "backgroundSize": "cover",
      "backgroundPosition": "center",
      "minHeight": "100vh",
      "overlay": true,
      "overlayColor": "rgba(0, 0, 0, 0.5)",
      "paddingTop": 120,
      "paddingBottom": 120
    },
    "nodes": [
      "hero_container"
    ],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "Hero",
    "linkedNodes": {},
    "parent": null
  },
  "hero_container": {
    "type": {
      "resolvedName": "Container"
    },
    "props": {
      "maxWidth": 1200,
      "paddingLeft": 24,
      "paddingRight": 24
    },
    "nodes": [
      "hero_content"
    ],
    "custom": {},
    "hidden": false,
    "isCanvas": true,
    "displayName": "Container",
    "linkedNodes": {},
    "parent": "ROOT"
  },
  "hero_content": {
    "type": {
      "resolvedName": "FlexContainer"
    },
    "props": {
      "flexDirection": "column",
      "alignItems": "center",
      "justifyContent": "center",
      "gap": 32,
      "minHeight": "60vh"
    },
    "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": 1506,
            "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:\"beach ocean sea\" | 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": 13792,
            "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\/bangsaen,beach,thailand\",\n      \"backgroundSize\": \"cover\",\n      \"backgroundPosition\": \"center\",\n      \"minHeight\": \"100vh\",\n      \"overlay\": true,\n      \"overlayColor\": \"rgba(0, 0, 0, 0.4)\",\n      \"paddingTop\": 120,\n      \"paddingBottom\": 120\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\": 1200,\n      \"paddingLeft\": 24,\n      \"paddingRight\": 24\n    },\n    \"nodes\": [\"hero_content\"],\n    \"custom\": {},\n    \"hidden\": false,\n    \"isCanvas\": true,\n    \"displayName\": \"Container\",\n    \"linkedNodes\": {},\n    \"parent\": \"ROOT\"\n  },\n  \"hero_content\": {\n    \"type\": {\n      \"resolvedName\": \"FlexContainer\"\n    },\n    \"props\": {\n      \"flexDirection\": \"column\",\n      \"alignItems\": \"center\",\n      \"justifyContent\": \"center\",\n      \"gap\": 32,\n      \"minHeight\": \"60vh\"\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": 16399,
            "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\/bangsaen,beach,thailand\",\n      \"backgroundSize\": \"cover\",\n      \"backgroundPosition\": \"center\",\n      \"minHeight\": \"100vh\",\n      \"overlay\": true,\n      \"overlayColor\": \"rgba(0, 0, 0, 0.4)\",\n      \"paddingTop\": 120,\n      \"paddingBottom\": 120\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\": 1200,\n      \"paddingLeft\": 24,\n      \"paddingRight\": 24\n    },\n    \"nodes\": [\n      \"hero_content\"\n    ],\n    \"custom\": {},\n    \"hidden\": false,\n    \"isCanvas\": true,\n    \"displayName\": \"Container\",\n    \"linkedNodes\": {},\n    \"parent\": \"ROOT\"\n  },\n  \"hero_content\": {\n    \"type\": {\n      \"resolvedName\": \"FlexContainer\"\n    },\n    \"props\": {\n      \"flexDirection\": \"column\",\n      \"alignItems\": \"center\",\n      \"justifyContent\": \"center\",\n      \"gap\": 32,\n      \"minHeight\": \"60vh\"\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": 7925,
            "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\/bangsaen,beach,thailand\",\n      \"backgroundSize\": \"cover\",\n      \"backgroundPosition\": \"center\",\n      \"minHeight\": \"100vh\",\n      \"overlay\": true,\n      \"overlayColor\": \"rgba(0, 0, 0, 0.5)\",\n      \"paddingTop\": 120,\n      \"paddingBottom\": 120\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\": 1200,\n      \"paddingLeft\": 24,\n      \"paddingRight\": 24\n    },\n    \"nodes\": [\n      \"hero_content\"\n    ],\n    \"custom\": {},\n    \"hidden\": false,\n    \"isCanvas\": true,\n    \"displayName\": \"Container\",\n    \"linkedNodes\": {},\n    \"parent\": \"ROOT\"\n  },\n  \"hero_content\": {\n    \"type\": {\n      \"resolvedName\": \"FlexContainer\"\n    },\n    \"props\": {\n      \"flexDirection\": \"column\",\n      \"alignItems\": \"center\",\n      \"justifyContent\": \"center\",\n      \"gap\": 32,\n      \"minHeight\": \"60vh\"\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\""
        }
    ]
}