Petdex แปะสัตว์เลี้ยงพิกเซลตัวเล็กๆ ไว้ที่มุมจอ โดยตัวการ์ตูนจะเปลี่ยนท่าทางทุกครั้งที่ coding agent เรียกเครื่องมือขึ้นมาใช้หนึ่งรอบ ส่วนคำว่า coding agent ในที่นี้หมายถึงผู้ช่วย AI ที่ลงมือเปิดไฟล์ แก้โค้ด และรันคำสั่งในเครื่องได้เอง ไม่ใช่แค่พิมพ์คำตอบกลับมาให้อ่าน

ปกติเวลา agent ทำงาน เราจะเห็นแค่ข้อความไหลผ่านเทอร์มินัลอย่างรวดเร็ว ถ้าอยากรู้ว่างานยังเดินอยู่ ค้าง หรือพังไปแล้ว ก็ต้องคอยหันไปจ้องเทอร์มินัลเอาเอง Petdex จึงย้ายสัญญาณบอกสถานะนั้นมาไว้บนตัวการ์ตูนแทน ทำให้เหลือบมองเพียงแวบเดียวก็ดูออกทันทีว่างานไปถึงไหนแล้ว

ทีม Crafter Station พัฒนาโปรเจกต์นี้ขึ้นมา พร้อมเปิดให้ทุกคนส่งสัตว์เลี้ยงของตัวเองเข้าแกลเลอรีกลางได้ ปัจจุบันหน้าแรกของ Petdex มีสัตว์เลี้ยงในแกลเลอรีรวม 4239 ตัว มีตั้งแต่นากจิบชานมไปจนถึงหุ่นยนต์ตัวเหลือง ส่วนโค้ดของโปรเจกต์เปิดเป็นโอเพนซอร์สใต้สัญญาอนุญาต MIT ที่อนุญาตให้ทุกคนนำไปใช้ต่อและแก้ไขได้ตามสะดวก

Petdex ไม่ใช่แอปเดียว แต่เป็น 3 ส่วนที่ทำงานต่อกัน

ทั้ง 3 ส่วนนี้ทำหน้าที่ต่างกัน หากไม่ทำความเข้าใจก่อนก็อาจสับสนได้ตั้งแต่ขั้นตอนการติดตั้ง

• แกลเลอรีบนเว็บ petdex.dev เป็นศูนย์กลางให้ชุมชนส่งสัตว์เลี้ยงเข้ามา ซึ่งเมื่อผ่านการตรวจแล้วจะแสดงให้คนอื่นเลือกนำไปใช้งาน
• เครื่องมือบรรทัดคำสั่ง (CLI) ทำหน้าที่จัดการแคตตาล็อก ใช้สำหรับเปิดดูรายการที่มีและดึงสัตว์เลี้ยงลงมาในเครื่อง
• แอปเดสก์ท็อป ทำหน้าที่แสดงผลสัตว์เลี้ยงบนหน้าจอจริง และใช้เชื่อมต่อ coding agent เข้ากับตัวการ์ตูน

เอกสารของโปรเจกต์สรุปความสัมพันธ์ 3 ส่วนนี้ไว้ในบรรทัดเดียว

สัตว์เลี้ยงในแกลเลอรีมีทั้งผลงานที่วาดขึ้นใหม่ และงานพิกเซลอาร์ตที่แปลงมาจากตัวละครชื่อดัง หน้าแรกมีการจัดคอลเลกชันเป็นหมวดหมู่ให้เลือกดูได้ง่าย เช่น Pokemon, League of Legends และ JoJo's Bizarre Adventure ส่วนตัวที่ยอดติดตั้งนำอยู่บนหน้าแรกคือ Boba นากตัวน้อยถือแก้วชานม ที่ยอดดาวน์โหลด 6.5 พันครั้ง

ใครที่ยังไม่เคยใช้งาน coding agent สามารถอ่าน โพสต์ที่ปูพื้น Claude Code ไว้ตั้งแต่ต้น ซึ่งสรุปวิธีคิด 3 ชั้นที่นำไปปรับใช้กับ CLI agent ตัวอื่นได้เช่นกัน

ติดตั้งตัวแรกด้วย npx petdex install

ขั้นตอนแรก เลือกดึงสัตว์เลี้ยงที่มีอยู่ในแกลเลอรีลงมาไว้ในเครื่อง โดยตัวอย่างในเอกสารใช้ตัวที่ชื่อ boba

npx petdex install boba

เมื่อติดตั้งเสร็จ จะได้โฟลเดอร์ ~/.petdex/pets/boba/ ซึ่งข้างในมีไฟล์ 2 ไฟล์ ได้แก่ pet.json และไฟล์สไปรต์ชีต

ขั้นตอนที่สอง เข้าไปที่ petdex.dev/download แล้วดาวน์โหลดแอปเดสก์ท็อปมาติดตั้ง รองรับทั้ง macOS, Linux และ Windows

ขั้นตอนที่สาม เปิดแอปขึ้นมา กด Cmd+, ที่ตัวสัตว์เลี้ยงเพื่อเรียกหน้า Settings ขึ้นมา แล้วเลือกตัวที่ต้องการในหมวด Pets จากนั้นไปที่หมวด Agents คลิกเชื่อม coding agent ทีละตัว ตัวละคลิกเดียวจบ ทั้งขั้นตอนนี้ไม่ต้องพิมพ์คำสั่งในเทอร์มินัลสักบรรทัด

หน้าโปรเจกต์ระบุ coding agent ที่รองรับไว้ 4 ตัว ได้แก่ Codex, Claude Code, OpenCode และ Gemini CLI เท่าที่เขียนไว้มีเท่านี้ ไม่ได้แปลว่าต่อได้กับ agent ทุกตัวในตลาด

หนึ่งตัวคือสองไฟล์ กับตาราง 72 เฟรม

สิ่งที่ทำให้ Petdex ไม่ได้หยุดอยู่แค่ของเล่น คือการออกแบบฟอร์แมตที่เปิดให้ใครก็ปั้นสัตว์เลี้ยงตัวใหม่ขึ้นมาเองได้ แถมยังมีสเปกสั้นกระชับชนิดที่จำได้ในรอบเดียว

สัตว์เลี้ยงหนึ่งตัวประกอบด้วยไฟล์เพียง 2 ไฟล์ ไฟล์แรกคือ pet.json ใช้เก็บข้อมูลชื่อ ชื่อเรียกในคำสั่ง แท็ก บุคลิก ชนิด ขนาดเฟรม และรายการสถานะแอนิเมชัน ส่วนไฟล์ที่สองคือสไปรต์ชีตในนามสกุล .webp หรือ .png

สไปรต์ชีตคือภาพเดียวที่รวมทุกเฟรมของแอนิเมชันมาวางเรียงต่อกันเป็นตาราง สำหรับ Petdex จะใช้ตารางขนาด 9 แถว 8 คอลัมน์ รวม 72 เฟรม แต่ละเฟรมมีขนาด 192×208 พิกเซล โดยแต่ละแถวจะแทน 1 สถานะ มีทั้งหมด 8 สถานะ ได้แก่ idle, wave, run, failed, review, jump, extra1 และ extra2

ตัวที่จับคู่สถานะเหล่านี้เข้ากับจังหวะกิจกรรมของ agent คือ Codex หนึ่งใน coding agent ที่รองรับ ส่วนค่าเริ่มต้นของการเล่นวนรอบอยู่ที่ 1100 มิลลิวินาที ที่ 6 เฟรมต่อหนึ่งสถานะ

เบื้องหลังกลไกที่ทำให้ท่าทางบนจอวิ่งตามงานจริง ตัวแอปเดสก์ท็อปพัฒนาด้วยภาษา Zig และพ่วงโปรแกรมผู้ช่วยตัวเล็กที่เขียนด้วย Node.js ไว้คอยรับสัญญาณกิจกรรมจาก agent ระหว่างทำงาน เมื่อได้รับสัญญาณ ตัวแอปจะสลับไปแสดงผลแถวที่ตรงกับสถานะนั้นในสไปรต์ชีตทันที

ในชุดมาตรฐานยังมีท่าสำหรับตอนงานพังและตอนกำลังตรวจงาน อย่าง failed และ review ซึ่งสองท่านี้ไม่ได้ใส่มาแค่ให้ดูน่ารัก แต่มีไว้รับสถานการณ์จริงตอน agent ทำงาน ตัวการ์ตูนจึงไม่ได้ขยับท่าทางแบบสุ่ม แต่เปลี่ยนท่าตามสถานะของงานที่เปลี่ยนไป

วาดตัวของตัวเองแล้วส่งเข้าแกลเลอรี

แกลเลอรีนี้ไม่ได้เปิดให้ดาวน์โหลดอย่างเดียว แต่เปิดให้ส่งผลงานเข้าไปด้วย โดยมี 2 ทางให้เลือก

ทางแรกคือสั่งให้ agent ช่วยวาดให้ ด้วยสกิลชื่อ hatch-pet ที่เรียกใช้ภายใน Codex โดยคำว่าสกิลในที่นี้หมายถึงชุดความสามารถเฉพาะทางที่ติดตั้งเพิ่มให้ agent ได้ เหมือนกับ Hallmark สกิลออกแบบที่ตรวจงาน 57 ข้อ

ทางที่สองคือเข้าไปใช้เครื่องมือปั้นสัตว์เลี้ยงบนหน้าเว็บ petdex.dev/create ซึ่งไม่ต้องติดตั้งโปรแกรมอะไรเพิ่มในเครื่องเลย

เมื่อได้โฟลเดอร์ของตัวเองเรียบร้อยแล้ว สามารถส่งเข้าแกลเลอรีด้วยคำสั่ง npx petdex submit ./my-pet/ หรือลากไฟล์ขึ้นหน้าส่งของเว็บก็ได้เช่นกัน จากนั้นเพียงรอทีมงานตรวจสอบก่อนขึ้นแสดงผล

2 จุดยึดที่โปรเจกต์บอกว่านิ่งพอให้สร้างต่อ

ใครที่ต้องการนำ Petdex ไปพัฒนาต่อยอด ไม่ต้องนั่งเดาว่าจะยึดโครงสร้างส่วนไหนได้บ้าง เพราะโปรเจกต์ระบุไว้อย่างชัดเจนว่ามี 2 ส่วนที่จะไม่เปลี่ยนแปลงไปมา

อย่างแรกคือช่องทางดึงข้อมูลผ่าน HTTP API ที่อยู่บน petdex.dev/api/manifest มันจะส่งรายชื่อสัตว์เลี้ยงทุกตัวที่ทีมงานตรวจผ่านแล้วออกมาให้โปรแกรมอื่นเรียกไปใช้ได้ ทั้งชื่อเรียกในคำสั่ง ลิงก์ไฟล์สไปรต์ รายชื่อสถานะแอนิเมชัน และข้อมูลกำกับ ส่วนอย่างที่สองคือโครงไฟล์ของตัวสัตว์เลี้ยงเอง นั่นคือไฟล์ 2 ไฟล์ตามที่อธิบายไปข้างต้น

ปัจจุบันมีโปรเจกต์โอเพนซอร์สและโปรเจกต์ที่เปิดให้อ่านโค้ดรวม 21 โปรเจกต์ที่พัฒนาต่อยอดจากสองส่วนนี้แล้ว โดยรวบรวมไว้ที่ petdex.dev/built-with

แฟนอาร์ตกับลิขสิทธิ์ ที่ต้องเช็กก่อนเอาไปใช้

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

จังหวะของ agent ที่มองเห็นได้ด้วยตาเปล่า

สำหรับมือใหม่ที่เพิ่งเริ่มต้นใช้งาน coding agent นี่คือจุดเริ่มต้นที่เข้าใจง่ายอย่างมาก โดยไม่ต้องอ่านเอกสารสถาปัตยกรรมแม้แต่บรรทัดเดียว แค่เห็นตัวการ์ตูนสลับท่าทางไปมา ก็จับจังหวะได้ทันทีว่า งานหนึ่งชิ้นของ agent เกิดจากการเรียกใช้เครื่องมือหลายรอบต่อกัน

ส่วนคนที่ใช้งานอยู่แล้ว ตัวการ์ตูนนี้ทำหน้าที่เสมือนไฟแสดงสถานะที่เห็นได้ตลอดเวลา ไม่ต้องเปิดอีกหน้าต่างไปเช็ก และสำหรับครีเอเตอร์ มันคือภาพเคลื่อนไหวที่ช่วยดึงดูดสายตาเวลาถ่ายคลิปวิดีโอ

เดิมทีสถานะของ agent มีแค่คนที่นั่งอยู่หน้าจอเท่านั้นที่อ่านออก พอมันย้ายไปอยู่บนท่าทางของตัวการ์ตูน คนที่เดินผ่านโต๊ะก็อ่านออกไปด้วย

ที่มา:

• โปรเจกต์ crafter-station/petdex บน GitHub
• เอกสารทางการของ Petdex