efin.financeefin.financeInfographic Guide

วิธีสั่งงาน

บอกข้อมูลให้ Assistant สร้างอินโฟกราฟิกได้ตรงกับที่ต้องการ

หลังเชื่อมต่อ MCP แล้ว ให้สั่งงานด้วยภาษาปกติ ไม่จำเป็นต้องจำชื่อเครื่องมือหรือเขียนข้อมูลเป็นโค้ด

ตัวอย่างคำสั่งพร้อมใช้

สรุปข่าวผลประกอบการไตรมาส 2 เป็นอินโฟกราฟิก efin.finance ธีม Light เน้นรายได้ กำไรสุทธิ และอัตรากำไร เปรียบเทียบกับปีก่อน ข้อมูล ณ วันที่ 1 สิงหาคม 2569

สิ่งที่บอกเพิ่มได้

  • อยากให้เด่นอะไร เช่น ตัวเลขสำคัญ ประเด็นบวก หรือความเสี่ยง
  • อยากได้รูปแบบไหน เช่น ตารางเปรียบเทียบ กราฟ หรือสรุปเป็นข้อ
  • ใช้ธีมอะไร เลือก Light หรือ Dark
  • มีรูปหรือไม่ แนบกราฟหรือภาพจริงที่ต้องการใช้

ถ้าข้อมูลยังไม่ครบ

Assistant จะถามเฉพาะข้อมูลที่จำเป็น เช่น ธีม วันที่ หรือรูปที่ต้องใช้ และจะยังไม่สร้างภาพจนกว่าจะได้รับข้อมูลครบ

เมื่อเสร็จแล้ว ผลลัพธ์หลักคือภาพ PNG ขนาด 1080 × 1350px พร้อมตัวเลือก JPG, WebP, SVG และ HTML

แก้ไขงานจากภาพที่ได้

กด แก้ไขงาน บนการ์ดผลลัพธ์เพื่อเปิด Review Canvas แบบ camera viewport ที่ไม่มี scrollbar ใช้ล้อเมาส์หรือ trackpad เพื่อ pan, กด Ctrl/Cmd พร้อม scroll หรือปุ่ม − / + เพื่อ zoom และกด Space ค้างแล้วลากเพื่อเลื่อนพื้นที่แบบ Figma ปุ่มเปอร์เซ็นต์จะจัดภาพให้พอดีหน้าจอ จากนั้นใช้ toolbar Material Icons พื้นขาวด้านล่าง: ปากกา/ยางลบรวมอยู่ในเมนูกลุ่มวาด, สี่เหลี่ยม/วงรีรวมอยู่ในกลุ่มรูปทรง และลูกศรตรง/โค้งรวมอยู่ในกลุ่มลูกศร ส่วนเลือก/ลาก ข้อความกำกับแบบตัวอักษรลอย และ Asset เป็นเครื่องมือหลัก เส้น รูปทรง ลูกศร ข้อความ และ Asset วางได้ทั้งบนภาพ 1080 × 1350 และพื้นที่รอบภาพ หากมีกราฟ โลโก้ หรือรูปใหม่ ให้กดไอคอน Asset รูปจะปรากฏบน Canvas ทันทีและสามารถลากหรือปรับขนาดจากมุมขวาล่างได้ ปุ่ม ลบทั้งหมด แสดงตรงบน toolbar และปุ่ม ส่งให้ AI แก้ อยู่ด้านขวาพร้อมขอบไล่สีแบบเคลื่อนไหว ทุกเครื่องมือมี tooltip และ shortcut บอกวิธีใช้

Shortcut ทุกตัวอ้างอิงตำแหน่งปุ่มจริง จึงยังทำงานเมื่อสลับภาษาคีย์บอร์ด: Ctrl/Cmd + Z ย้อนกลับ, Ctrl/Cmd + Shift + Z หรือ Ctrl/Cmd + Y ทำซ้ำ และปุ่มเครื่องมือ V/P/R/O/A/C/T/E, Zoom +/−/0, Delete, Backspace, Escape และ Space ไม่ขึ้นกับตัวอักษรที่ภาษาปัจจุบันพิมพ์ออกมา

เมื่อเปิดผ่าน Claude ระบบจะอ่าน hostContext.safeAreaInsets เพื่อยก toolbar, แถบ Asset และชุด Zoom ขึ้นเหนือช่องพิมพ์ พร้อมคำนวณ fit-to-screen จากพื้นที่ที่ยังมองเห็น หาก Host ไม่ส่ง inset มา Widget จะตรวจ host/referrer และใช้ fallback 156px โดยไม่กระทบ Host อื่น

เมื่อกด ส่งให้ AI แก้ Widget จะบันทึก revision ผ่าน MCP ก่อน แล้วอัปเดต ui/update-model-context และส่งคำสั่งต่อด้วย ui/message เมื่อ Host รองรับ หาก Claude อนุญาตเฉพาะ context update ระบบจะแสดงสถานะพร้อม revision_id บน Canvas และบอกให้ผู้ใช้ส่งข้อความสั้น ๆ ในแชตเพื่อเริ่ม turn ถัดไป แทนการกดแล้วเงียบ

ใน Codex/ChatGPT Widget จะใช้ window.openai.sendFollowUpMessage ก่อน ui/message เมื่อ Host มี API นี้ พร้อม timeout และข้อความ error ที่มองเห็นได้ Marked preview ถูกบีบอัดเป็น WebP โดยยังคงขนาด Canvas เดิม

เพื่อไม่ให้การแก้รอบสองหรือการเพิ่มรูปใหม่ชน 413 Request Entity Too Large ระบบจะไม่ส่ง marked preview และ Asset เป็น Base64 ใน MCP request อีกต่อไป Widget อัปโหลดไฟล์ตรงไปยัง MCP origin ทีละ 48 KB แล้วส่งเฉพาะ staged upload ID ผ่าน submit_infographic_revision ทำให้ tools/call มีขนาดเล็กคงที่ แม้ไฟล์ภาพจริงมีขนาดหลาย MB

MCP HTTP endpoint ยังรองรับ JSON body สูงสุด 32 MB โดยค่าเริ่มต้นสำหรับ client รุ่นเก่า ส่วน flow ปัจจุบันจะรวม chunk ฝั่ง Server ตรวจ MIME/ขนาด ลบ staging หลังบันทึก revision สำเร็จ และตอบกลับเฉพาะข้อมูลอ้างอิง revision ขนาดเล็ก ข้อมูล annotation, marked preview และ Asset ฉบับเต็มอ่านภายหลังผ่าน get_infographic_revision

เมื่อ Asset อยู่รอบนอกภาพและมีลูกศรชี้เข้า artboard ระบบจะสร้าง suggested_overlays จากตำแหน่งปลายลูกศร ผู้ช่วยต้องใช้รายการนี้เป็น document.overlays พร้อมส่ง Asset เดิมเป็น attachment เพื่อให้ renderer วางภาพตามพิกัดโดยตรง ไม่สร้างกล่อง graph-image หรือ card เพิ่มเอง

เมื่อกด ส่งให้ AI แก้ ระบบจะเก็บ revision ไว้แยกจากงานต้นฉบับ และส่งทั้งคำสั่ง ตำแหน่งที่ทำเครื่องหมาย และ asset ใหม่ให้ Assistant งานที่แก้แล้วจะถูก render เป็น job ใหม่ จึงย้อนกลับมาดาวน์โหลดหรือแก้เวอร์ชันก่อนหน้าได้เสมอ

On this page