search
User

model_training AI Training Data

ตัวอย่างที่ Active จะถูก inject เข้า AI Pipeline อัตโนมัติ

insights Coverage Dashboard add เพิ่ม Training Example
psychology

19

Few-Shot

block

12

Negative

tune

4

Refinement

widgets

6

Module

check_circle

41

Active ✅

dataset

41

ทั้งหมด

hub

Training Data → AI Pipeline (อัตโนมัติ)

psychology

Few-Shot

inject เข้า ai_generate + ai_director

✨ 🎬

block

Negative

inject เข้า ai_review เพื่อบอก "อย่าทำแบบนี้"

🔍

tune

Refinement

inject เข้า ai_refine เพื่อปรับแต่ง

✏️

widgets

Module Usage

ตัวอย่างวิธีใช้โมดูลเฉพาะ

🧩

api API Endpoints — Training Data Flow Node.js อ่านทุก 5 นาที
GET https://admin.bigzwebcenter.live/api/v1/ai-engine/active-config

Node.js configEngine เรียก endpoint นี้ทุก 5 นาที — ดึง few_shot_examples, negative_examples, refinement_examples จาก Training ทั้งหมดพร้อมกัน → inject เข้าทุก pipeline steps อัตโนมัติ

GET Few-Shot Examples
/api/v1/ai-engine/examples?category=few_shot&limit=3
inject as: few_shot_examples
used by: ✨ ai_generate · 🎬 ai_director
GET Negative Examples
/api/v1/ai-engine/examples?category=negative&limit=3
inject as: negative_examples
used by: 🔍 ai_review
GET Refinement Examples
/api/v1/ai-engine/examples?category=refinement&limit=3
inject as: refinement_examples
used by: ✏️ ai_refine
Training data ถูกใช้จริงใน AI Pipeline — active: 41 examples · few_shot: 19 · negative: 12 · refinement: 4
dataset ทั้งหมด psychology Few-Shot block Negative tune Refinement widgets Module
ทุกสถานะ ✅ Active ⭕ Inactive
Module bolt Live — inject → 🧩 Module Steps

[Super] StatsCounter ใน Hero — Data-Driven Brand

แสดง credibility ด้วยตัวเลขทันทีใน hero section สำหรับ brand ที่มี strong data

Creative pattern: StatsCounter 4 ตัวใน hero section — เหมาะกับ brand ที่มี strong data และ credibility-first approach เช่น SaaS, Healthcare, FinTech

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#0f172a","paddingTop":0,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["hero"],"linkedNodes":{},"parent":null},"hero":{"type":{"resolvedName":"FlexContainer"},"isCanvas":true,"props":{"flexDirection":"column","alignItems":"center","paddingTop":100,"paddingBottom":80,"paddingLeft":24,"paddingRight":24,"gap":32,"minHeight":"85vh","justifyContent":"center"},"displayName":"FlexContainer","custom":{},"hidden":false,"nodes":["h1","sub","stats-row","cta"],"linkedNodes":{},"parent":"ROOT"},"h1":{"type":{"resolvedName":"Text"},"isCanvas":false,"props":{"text":"ตัวเลขที่พิสูจน์
ว่าเราเชื่อถือได้","fontSize":52,"fontWeight":"800","color":"#ffffff","textAlign":"center","lineHeight":1....

…[truncated]
edit
Module bolt Live — inject → 🧩 Module Steps

วิธีใช้ NavMenu component

สร้าง Navigation Menu (Header) สำหรับเว็บไซต์

NavMenu เป็น component พิเศษ: 1) ใช้เป็น ROOT โดยตรง (ไม่ต้องมี Section ครอบ). 2) menuItems ใช้รูปแบบ "ชื่อ|#anchor" คั่นด้วย newline ( ). 3) bgColor = สีพื้นหลัง navbar. 4) accentColor = สีปุ่ม CTA หรือ active item. 5) ห้ามใส่ nodes ใดๆ ใน NavMenu (nodes: []). 6) isCanvas: false เสมอ

{
  "ROOT": {
    "type": {"resolvedName": "NavMenu"},
    "isCanvas": false,
    "props": {
      "brandText": "BigZ Studio",
      "bgColor": "#0f172a",
      "textColor": "#f1f5f9",
      "accentColor": "#dc2626",
      "menuItems": "หน้าแรก|#home
บริการ|#services
ผลงาน|#portfolio
เกี่ยวกับ|#about
ติดต่อ|#contact"
    },
    "nodes": [],
    "custom": {},
    "hidden": false,
    "displayName": "NavMenu",
    "linkedNodes": {},
    "parent": null
  }
}
edit
Module bolt Live — inject → 🧩 Module Steps

[Super] GalleryGrid เป็น Hero Opening — Visual-Driven Brand

แสดง gallery ภาพเป็นสิ่งแรกที่เห็นก่อน text ใดๆ เหมาะกับ brand ที่ product/atmosphere พูดแทนตัวเองได้

Creative pattern: GalleryGrid 6 images เป็น opening element ก่อน brand identity — เหมาะกับ restaurant, fashion, interior design, photography, art gallery

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#0a0a0a","paddingTop":60,"paddingBottom":0},"displayName":"Section","custom":{},"hidden":false,"nodes":["gallery-first","brand-id"],"linkedNodes":{},"parent":null},"gallery-first":{"type":{"resolvedName":"GalleryGrid"},"isCanvas":false,"props":{"images":["https://loremflickr.com/700/500/product,premium","https://loremflickr.com/700/500/luxury,design","https://loremflickr.com/700/500/craft,artisan","https://loremflickr.com/700/500/interior,beautiful","https://loremflickr.com/700/500/detail,close","https://loremflickr.com/700/500/atmosphere,mood"],"columns":3,"gap":6,"borderRadius":0},"displayName":"GalleryGrid","custom":{},"hidden":false,"nodes":[],"linkedNodes":{},"parent":"ROOT"},"brand-id":{"type":{"re...

…[truncated]
edit
Module bolt Live — inject → 🧩 Module Steps

วิธีใช้ Section + FlexContainer + Container (layout หลัก)

สร้าง layout พื้นฐาน Section > Container (maxWidth) > FlexContainer > content

Pattern: Section (full-width bg) > Container (maxWidth centered) > FlexContainer (row/column layout) > content nodes. ใช้เป็น template หลักสำหรับทุก section. Container ใช้ maxWidth + margin:0 auto เพื่อ center content. FlexContainer ใช้ flexWrap สำหรับ responsive

{
  "ROOT": {
    "type": {"resolvedName": "Section"},
    "isCanvas": true,
    "props": {"backgroundColor": "#ffffff","paddingTop": 80,"paddingBottom": 80},
    "displayName": "Section",
    "custom": {},
    "hidden": false,
    "nodes": ["wrapper"],
    "linkedNodes": {},
    "parent": null
  },
  "wrapper": {
    "type": {"resolvedName": "Container"},
    "isCanvas": true,
    "props": {"maxWidth": "1100px","margin": "0 auto","width": "100%","paddingLeft": 24,"paddingRight": 24},
    "displayName": "Container",
    "custom": {},
    "hidden": false,
    "nodes": ["row"],
    "linkedNodes": {},
    "parent": "ROOT"
  },
  "row": {
    "type": {"resolvedName": "FlexContainer"},
    "isCanvas": true,
    "props": {"flexDirection": "row","alignItems": "center","j...

…[truncated]
edit
Module bolt Live — inject → 🧩 Module Steps

วิธีสร้าง Pricing Cards 3 แพ็กเกจ

Pricing section 3 แพ็กเกจ มี highlight package กลาง

Pricing 3 card: Basic (white) | Pro (brand red + scale up = highlight) | Enterprise (white). ใช้ transform:scale(1.05) ให้ card กลางโดดเด่น. ปุ่ม Pro ใช้ white text บน red bg

{
  "ROOT": {
    "type": {"resolvedName": "Section"},
    "isCanvas": true,
    "props": {"backgroundColor": "#f8fafc","paddingTop": 80,"paddingBottom": 80,"paddingLeft": 24,"paddingRight": 24},
    "displayName": "Section",
    "custom": {},
    "hidden": false,
    "nodes": ["price-wrap"],
    "linkedNodes": {},
    "parent": null
  },
  "price-wrap": {
    "type": {"resolvedName": "FlexContainer"},
    "isCanvas": true,
    "props": {"flexDirection": "column","alignItems": "center","gap": 40},
    "displayName": "FlexContainer",
    "custom": {},
    "hidden": false,
    "nodes": ["price-title","price-cards"],
    "linkedNodes": {},
    "parent": "ROOT"
  },
  "price-title": {
    "type": {"resolvedName": "Text"},
    "isCanvas": false,
    "props": {"text": "...

…[truncated]
edit
Module bolt Live — inject → 🧩 Module Steps

วิธีใช้ ImageSlide component

สร้าง Image Slideshow section ที่ responsive

ImageSlide: 1) ใช้ heightMode="ratio" เป็น default เพื่อ responsive. 2) slides เป็น array ของ {image, link, alt}. 3) image ใน slides ใช้ placeholder "[IMG_N]" pipeline จะ inject รูปจริงให้. 4) วางใน Container (maxWidth) เสมอ. 5) isCanvas: false เสมอ

{"ROOT":{"type":{"resolvedName":"Section"},"isCanvas":true,"props":{"backgroundColor":"#ffffff","paddingTop":60,"paddingBottom":60,"paddingLeft":24,"paddingRight":24},"displayName":"Section","custom":{},"hidden":false,"nodes":["slide-wrap"],"linkedNodes":{},"parent":null},"slide-wrap":{"type":{"resolvedName":"Container"},"isCanvas":true,"props":{"maxWidth":"1100px","margin":"0 auto","width":"100%"},"displayName":"Container","custom":{},"hidden":false,"nodes":["slide-title","img-slide"],"linkedNodes":{},"parent":"ROOT"},"slide-title":{"type":{"resolvedName":"Text"},"isCanvas":false,"props":{"text":"แกลลอรี่ภาพ","fontSize":28,"fontWeight":"700","color":"#0f172a","textAlign":"center","marginBottom":32},"displayName":"Text","custom":{},"hidden":false,"nodes":[],"linkedNodes":{},"parent":"slide...

…[truncated]
edit