Case Study: สร้าง Custom Skill เจนภาพและแปลงสไตล์ AI Asset ลงเครื่องจริงด้วย MaxPlus Gateway

ผลลัพธ์ (Executive Summary)#

พัฒนาและติดตั้ง Custom Agent Skill (maxplus-image-gen) ให้กับ Hermes Agent เพื่อเปลี่ยน AI Coding Agent ให้สามารถสร้างรูปภาพ Mockup, Hero Banner, Icon และแปลงสไตล์ภาพ (Image-to-Image / Restyle) ลงในโฟลเดอร์โปรเจกต์จริงได้ทันทีผ่าน MaxPlus AI Gateway พร้อมแก้ปัญหาการสร้างภาพตัวอักษรภาษาไทยที่มักบิดเบี้ยวหรือสระลอย ด้วยการประสานงานกับโมเดล gpt-image-2.5-sunburst จนสามารถเรนเดอร์ภาพ Infographic ภาษาไทยคมชัด ถูกต้องตามหลักไวยากรณ์ 100%

ปัญหาและที่มา (The Problem)#

ในการพัฒนา Web Application หรือสร้าง Content สื่อการสอนด้วย AI Coding Agent นักพัฒนามักพบข้อจำกัดสำคัญ:

เวิร์กโฟลว์ขาดตอน (Context Switching): เวลาต้องการรูปภาพ Mockup หรือ Banner ประกอบหน้าเว็บ ต้องสลับไปเปิด Midjourney/ChatGPT แล้วดาวน์โหลดไฟล์มาเปลี่ยนชื่อและวางลงในโฟลเดอร์โปรเจกต์ด้วยมือ
ต้นทุน Official Image API สูง: การเรียกใช้ DALL-E หรือ API ทางการโดยตรงมีค่าใช้จ่ายสูงและขาดความยืดหยุ่นในการสลับโมเดลหรือปรับอัตราส่วน
ปัญหาตัวอักษรภาษาไทยใน AI Image Generation: โมเดลเจนภาพส่วนใหญ่ไม่รองรับภาษาไทย ตัวอักษรมักกลายเป็นภาษาต่างดาว สระลอย หรือวรรณยุกต์ขาดหาย

ภาพผลงานจริง (Visual Evidence)#

3D Thai Infographic Guide Card

ภาพด้านบน: Infographic คู่มือภาษาไทย 3D Glassmorphic เรนเดอร์ด้วยโมเดล gpt-image-2.5-sunburst ตัวอักษรและสระภาษาไทยคมชัด 100%

สถาปัตยกรรมระบบ (Architecture & Pipeline)#

สถาปัตยกรรมของ Skill ถูกออกแบบให้อยู่ในรูปแบบ Declarative Skill Specification ร่วมกับ Python CLI Tool ในไดเรกทอรี %LOCALAPPDATA%\hermes\skills\creative\maxplus-image-gen\:

1
maxplus-image-gen/
2
├── SKILL.md                 # Agent Instruction & Trigger Rules
3
└── scripts/
4
    └── generate.py          # Python CLI Generator (Requests + Base64 decode)

1
┌─────────────────┐       ┌──────────────────────┐       ┌────────────────────────┐
2
│  Hermes Agent   │ ───>  │  scripts/generate.py │ ───>  │  MaxPlus AI Gateway    │
3
│  (Chat / Plan)  │       │  (CLI & Argparse)    │       │  (OpenAI Images API)   │
4
└─────────────────┘       └──────────────────────┘       └────────────────────────┘
5
         │                           │                                │
6
         │                           ▼                                ▼
7
   MEDIA Preview  <──────  Save Binary PNG File  <──────  Base64 Payload Return

ฟีเจอร์ที่พัฒนาขึ้นจริง (What Was Built)#

1. การรองรับทั้ง Text-to-Image และ Image-to-Image (Style Transfer)#

สคริปต์รองรับการแปลงรูปภาพต้นฉบับด้วย Reference Images สูงสุด 5 รูป สำหรับงานรีสไตล์ เช่น แปลงภาพแมวธรรมดาเป็นแมวไซเบอร์พังก์:

ภาพต้นฉบับ (`test_cat.png`)	แปลงสไตล์เป็น Cyberpunk (`cat_cyberpunk.png`)

2. Multi-Aspect Ratio & Pool Routing#

รองรับการระบุขนาดภาพและอัตราส่วนหลากหลาย พร้อมแมปโมเดลเข้ากับ Pool Gateway อัตโนมัติ:

1:1 (Square): 1024x1024, 2048x2048
16:9 (Landscape / Banner): 1024x576, 2048x1152
9:16 (Story / Mobile): 576x1024, 1152x2048
21:9 (Ultrawide): 1008x432
Model Pools: gpt-image (gpt-image-2, gpt-image-2.5-sunburst), gpt-image-lite (qwen-image-2.0), grok-image (grok-imagine-image-2.0)

3. Local Binary Pipeline & Direct Preview#

ส่งคำขอด้วย response_format: "b64_json" แทนการรับ URL ชั่วคราว
ทำการถอดรหัส Base64 และบันทึกเป็นไฟล์ .png ลงเครื่องทันที
ส่งคืน stdout เป็น JSON พร้อมแท็ก MEDIA:<path> ทำให้ Hermes Desktop แสดงภาพพรีวิวในหน้าแชทได้ทันที

ปัญหาทางเทคนิคและการแก้ไข (Technical Challenges)#

1. การแก้ปัญหาตัวอักษรภาษาไทยในงาน Infographic#

ความท้าทาย: AI Image Generation ทั่วไปมักมีปัญหากับสระบน/ล่างและวรรณยุกต์ภาษาไทย (เช่น คู่มือ, ติดตั้ง, ใช้, ได้)
การแก้ไข:
1. เลือกใช้โมเดล gpt-image-2.5-sunburst ผ่าน MaxPlus Gateway
2. ออกแบบ Prompt ระบุโครงสร้างชัดเจน: ใช้คำว่า “clean Thai typography”, ระบุข้อความภาษาไทยในเครื่องหมายคำพูดแยกตาม Step การทำงาน
3. ผลการตรวจสอบผ่าน vision_analyze ยืนยันว่า สระและวรรณยุกต์วางตำแหน่งถูกต้อง 100% ไม่มีตัวอักษรเบี้ยวหรือหลุดตำแหน่ง

2. การจัดการความปลอดภัยและ API Key Isolation#

ความท้าทาย: การส่งคำสั่งผ่าน Agent เสี่ยงต่อการมี API Key หลุดเข้าไปในบทสนทนาหรือบันทึกประวัติการรัน
การแก้ไข: สคริปต์ generate.py ถูกเขียนให้ดึงค่า MAXPLUS_IMAGE_API_KEY จาก Environment Variable หรือไฟล์ %LOCALAPPDATA%\hermes\.env ภายในเครื่องโดยตรง โดยไม่ต้องส่ง Key ผ่าน Command-Line Arguments

สิ่งที่ได้เรียนรู้ (Key Learnings)#

Skill + Script คือสะพานเชื่อม Agent สู่ OS: การแยกตรรกะการเรียก API ออกมาเป็น CLI Script ทำให้ Agent รันงานได้แม่นยำ ไม่ต้องสร้างโค้ดชั่วคราวซ้ำๆ
Generative AI ยุคใหม่รองรับภาษาไทยได้จริงเมื่อใช้โมเดลที่ถูก: การเลือกโมเดลเฉพาะทางอย่าง Sunburst ร่วมกับ Prompting แบบจัดวาง Layout ช่วยให้สร้างกราฟิกสำหรับคนไทยได้โดยไม่ต้องพึ่งพา Photoshop ในการแปะข้อความ
Local-First Asset Management: การให้ Agent บันทึกรูปภาพลง Path ปลายทางของโปรเจกต์โดยตรงช่วยลดระยะเวลาการพัฒนา Frontend และสร้างสื่อการสอนได้อย่างมหาศาล

Tech Stack#

1
Hermes Agent Skills, Python 3.11, Requests, Pillow (PIL),
2
MaxPlus AI Gateway, gpt-image-2.5-sunburst, Base64 Stream Decoding, Windows 11