คุยกับ AI
หน้าโปรเจกต์ แบ่งเป็น 2 พื้นที่:
- ซ้าย — พรีวิวเว็บสด (live preview)
- ขวา — แชทกับ AI
URL: https://app.hostinglotus.cloud/projects/<slug>
คุยกับ AI
ช่องแชทอยู่ด้านล่างขวา — พิมพ์คำสั่งภาษาไทยปกติได้เลย
ตัวอย่างคำสั่ง
- "เปลี่ยนสีหัวเป็นน้ำตาลเข้ม"
- "เพิ่มแกลเลอรีรูปด้านล่าง hero"
- "ใส่ฟอร์มติดต่อ มี ชื่อ, อีเมล, ข้อความ"
- "ทำให้ปุ่ม Call-to-Action เด่นขึ้น"
- "เปลี่ยน font เป็น IBM Plex Sans Thai"
- "ลบส่วน Pricing ออก"
ปุ่มลัดใช้บ่อย
| ปุ่ม | ทำงาน |
|---|---|
| Enter | ส่งข้อความ |
| Shift + Enter | ขึ้นบรรทัดใหม่ |
| ** (Paperclip)** | แนบรูปภาพ |
| ** Stop** | หยุด AI กลางคัน |
| ** Copy** | คัดลอกข้อความ (เลื่อนเมาส์ที่ bubble) |
แนบรูปภาพ
ใช้เมื่ออยากให้ AI เห็น ดีไซน์ที่อ้างอิง:
- คลิก **** หรือ ลากวาง รูปลงในช่องแชท
- รองรับสูงสุด 5 MB ต่อรูป (PNG, JPG, WEBP, GIF)
- แนบได้พร้อมกัน 6 รูป
ตัวอย่าง:
แนบรูป competitor → "อยากให้ hero เหมือนตัวอย่างนี้ แต่ใช้สีเขียว"
อ่านการทำงานของ AI
ระหว่าง AI ทำงาน คุณจะเห็น:
- BrandLoader หมุน + ข้อความ "กำลังคิด…", "กำลังเขียน…", "กำลังตรวจผล…"
- ตัวนับรอบ — เช่น
1/35แสดงรอบที่กำลังทำ จำนวนรอบสูงสุดขึ้นกับระดับคุณภาพที่เลือก - Tool events — รายการไฟล์ที่ AI อ่าน/เขียน (collapse ได้)
ระดับคุณภาพ — ตัวคุมค่าใช้จ่ายที่สำคัญที่สุด
เหนือช่องแชทมีตัวเลือกระดับคุณภาพ เลือกได้ว่าจะให้ AI ทำละเอียดแค่ไหน ยิ่งละเอียดยิ่งใช้เครดิตมาก
| ระดับ | เหมาะกับ | รอบสูงสุด |
|---|---|---|
| คุณภาพสูงสุด | งานใหญ่ ต้องการให้ตรวจงานให้ครบ | 50 |
| ปกติ (แนะนำ) | งานทั่วไป สมดุลคุณภาพกับราคา | 35 |
| ประหยัด | แก้จุดเดียว งานเล็ก ตรงไปตรงมา | 12 |
แก้แค่จุดเดียว เช่น เปลี่ยนสีปุ่ม ใช้ ประหยัด ก็พอ — ไม่ต้องใช้คุณภาพสูงสุดกับทุกงาน
พรีวิวสด
พรีวิวเว็บอยู่ด้านซ้าย — อัปเดต ทันทีที่ AI เขียนไฟล์เสร็จ ผ่าน Vite HMR
เครื่องมือพรีวิว
| ปุ่ม | ทำงาน |
|---|---|
| Fit | เต็มพื้นที่ panel (default) |
| Desktop (1440px) | จำลองจอเดสก์ท็อป |
| Tablet (820px) | จำลอง iPad |
| Mobile (390px) | จำลอง iPhone |
| ** Rotate** | หมุนแนวนอน/ตั้ง (เฉพาะ tablet/mobile) |
| ⟳ รีเฟรช | โหลดใหม่ทั้งหน้า (กรณี 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)
- ตั้งค่า — ชื่อโปรเจกต์ การมองเห็น และเก็บถาวร (ตั้งค่าโดเมน อยู่ที่เมนู โดเมน)
- [Credit chip] — เครดิตคงเหลือของ workspace
- ** Publish** — เผยแพร่เว็บ (ดูบท Publish)
ลบบทสนทนา
มุมขวาบนของช่องแชท → คลิก ล้างบทสนทนา เพื่อล้างประวัติ (ไม่ลบไฟล์ที่ AI สร้างไว้แล้ว)
ประวัติแชทบันทึกในเครื่องคุณ — ใช้ localStorage. ถ้าเปลี่ยนเครื่องหรือล้าง browser data จะหายไป (ไฟล์เว็บไม่หาย — บันทึกบน server)