คุยกับ AI โหมด Basic

หน้าโครงการในโหมด Basic แบ่งเป็น 2 พื้นที่:

• ซ้าย — พรีวิวเว็บสด (live preview)
• ขวา — แชทกับ AI

URL: https://app.hostinglotus.cloud/projects/<slug>

คุยกับ AI

ช่องแชทอยู่ด้านล่างขวา — พิมพ์คำสั่งภาษาไทยปกติได้เลย

ตัวอย่างคำสั่ง

• "เปลี่ยนสีหัวเป็นน้ำตาลเข้ม"
• "เพิ่มแกลเลอรีรูปด้านล่าง hero"
• "ใส่ฟอร์มติดต่อ มี ชื่อ, อีเมล, ข้อความ"
• "ทำให้ปุ่ม Call-to-Action เด่นขึ้น"
• "เปลี่ยน font เป็น IBM Plex Sans Thai"
• "ลบส่วน Pricing ออก"

ปุ่มลัดใช้บ่อย

แนบรูปภาพ

ใช้เมื่ออยากให้ AI เห็น ดีไซน์ที่อ้างอิง:

1. คลิก ** ** หรือ ลากวาง รูปลงในช่องแชท
2. รองรับสูงสุด 5 MB ต่อรูป (PNG, JPG, WEBP, GIF)
3. แนบได้พร้อมกัน 6 รูป

ตัวอย่าง:

แนบรูป competitor → "อยากให้ hero เหมือนตัวอย่างนี้ แต่ใช้สีเขียว"

อ่านการทำงานของ AI

ระหว่าง AI ทำงาน คุณจะเห็น:

• BrandLoader หมุน + ข้อความ "กำลังคิด…", "กำลังเขียน…", "กำลังตรวจผล…"
• ตัวนับรอบ — 1/30 แสดงรอบที่กำลังทำ (max 30 รอบต่อครั้ง)
• Tool events — รายการไฟล์ที่ AI อ่าน/เขียน (collapse ได้)

พรีวิวสด

พรีวิวเว็บอยู่ด้านซ้าย — อัปเดต ทันทีที่ AI เขียนไฟล์เสร็จ ผ่าน Vite HMR

เครื่องมือพรีวิว

ระยะเวลาบูตพรีวิว

ครั้งแรกที่เปิดโครงการ ระบบต้องบูต sandbox container + รัน vite:

• 5-15 วินาที สำหรับเว็บใหม่
• 30-60 วินาที สำหรับเว็บที่มี dependencies เยอะ (Next.js, big React)

ระหว่างบูต พรีวิวจะแสดง Skeleton loading เพื่อบอกว่ากำลังโหลด

แถบ Next Steps

ใต้ช่องแชทมี pill strip แสดง action ที่ควรทำต่อ — เปลี่ยนตามสถานะโครงการ:

• พรีวิวเต็มจอ — เปิดเว็บในแท็บใหม่
• ตั้งชื่อเว็บ (ถ้ายังไม่ตั้ง subdomain)
• Publish (ถ้าตั้ง subdomain แล้ว แต่ยังไม่ publish)
• ซื้อโดเมน .com (ถ้า publish แล้ว)

ปุ่มด้านบนของหน้า

• ← Dashboard — กลับสู่แดชบอร์ด
• [ชื่อโครงการ + สถานะ]
• [ Basic | </> IDE] — สลับโหมด (Basic IDE)
• ** Settings** — เข้าหน้าตั้งค่าโครงการ (ตั้งค่าโดเมน)
• [Credit chip] — เครดิตคงเหลือของ workspace
• ** Publish** — เผยแพร่เว็บ (ดูบท Publish)

ลบบทสนทนา

มุมขวาบนของช่องแชท → คลิก ล้างบทสนทนา เพื่อล้างประวัติ (ไม่ลบไฟล์ที่ AI สร้างไว้แล้ว)