Star-Office-UI: ออฟฟิศพิกเซลที่ทำให้สถานะการทำงานของ AI เป็นภาพ

Star-Office-UI เป็นกระดานสถานะแบบเปิดเผยโค้ด (โอเพนซอร์ส) สำหรับการแสดงภาพสถานะการทำงานของทีม AI โดยแปลงสถานะการทำงานของ AI Agent ที่ทำงานอยู่เบื้องหลัง ซึ่งเป็นเรื่องนามธรรม ให้กลายเป็นตัวละครที่มีกิจกรรมในออฟฟิศสไตล์พิกเซลย้อนยุค ทำให้สามารถติดตามสถานะการทำงานแบบเรียลไทม์ได้ในรูปแบบเกม

ภาพรวมโครงการ

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

โครงการนี้สร้างขึ้นโดยนักพัฒนาในประเทศ @Simon_阿文 และ @海辛 ในตอนแรกออกแบบมาเป็นสกินสำหรับ OpenClaw (กุ้งมังกรตัวน้อย) แต่แนวคิดหลักสามารถปรับใช้กับเครื่องมือ Agent ประเภทต่างๆ ได้ ค่าหลักของโครงการนี้คือการเปลี่ยน AI จากกระบวนการเบื้องหลังที่มองไม่เห็น (“กล่องดำ”) ให้กลายเป็น “เพื่อนร่วมงาน” ที่มองเห็นได้ในออฟฟิศเสมือนจริง ทำให้ประสบการณ์การตรวจสอบเปลี่ยนจากการดูบันทึก (log) ที่น่าเบื่อเป็นการสังเกตพฤติกรรมของตัวละคร

ฟังก์ชันหลัก

1. การแสดงภาพสถานะ
   นี่คือฟังก์ชันไฮไลท์ของโครงการ โดยการฟังรหัสสถานะจากแบ็กเอนด์ จะขับเคลื่อนให้ตัวละครในออฟฟิศค้นหาเส้นทางและแสดงท่าทางที่สอดคล้องกัน ทำให้สถานะปรากฏเป็นภาพ:
   • กำลังคิด/กำลังดำเนินการ: ตัวละครจะเดินไปที่คอมพิวเตอร์ในพื้นที่ทำงาน และแสดงแอนิเมชัน “พิมพ์คีย์บอร์ดอย่างบ้าคลั่ง”
   • ว่าง/พร้อมทำงาน: ตัวละครจะเดินไปที่พื้นที่พักผ่อน และทำกิจกรรมเช่น “ดื่มกาแฟ” หรือ “แอบเล่น”
   • โค้ดมีข้อผิดพลาด/ดำเนินการล้มเหลว: ตัวละครจะเดินไปที่พื้นที่ Bug เฉพาะ และ “ยืนหันหน้าเข้าผนังเพื่อสำนึกผิด”

1. บันทึกการทำงานแบบให้ความรู้สึกเหมือนมนุษย์
   มุมซ้ายล่างของอินเทอร์เฟซจะสร้างและแสดงบันทึกการทำงานของ AI แบบไดนามิก โดยจะสรุปงานที่ทำเสร็จล่าสุดด้วยน้ำเสียงบุคลิกที่หนึ่ง ซึ่งช่วยเพิ่มความรู้สึกเหมือนมนุษย์และปฏิสัมพันธ์ได้อย่างมาก

1. ปฏิสัมพันธ์ระหว่างเอเจนต์หลายตัว
   รองรับการเชิญตัวละครที่แทนโมเดล AI ต่างๆ มาเป็นผู้เยี่ยมชมในออฟฟิศ การออกแบบนี้เป็นพื้นฐานสำหรับการแสดงภาพฉากการทำงานร่วมกันของเอเจนต์หลายตัวในอนาคต

1. รองรับอุปกรณ์มือถือ
   โครงการนี้รองรับหน้าจอมือถืออย่างสมบูรณ์ ผู้ใช้สามารถ “คุมงาน” ผู้ช่วย AI ของตนได้อย่างสะดวกบนอุปกรณ์เคลื่อนที่

หลักการทำงาน
หลักการของโครงการค่อนข้างชัดเจน: ใช้บริการสถานะ HTTP ที่เรียบง่ายทำงานร่วมกับฉากพิกเซลด้านหน้า เพื่อ “แปล” ไฟล์สถานะของ AI Agent แบบเรียลไทม์ให้เป็นเส้นทางการเคลื่อนที่และการแสดงแอนิเมชันของตัวละครภายในออฟฟิศ

ทดลองใช้อย่างรวดเร็ว
หากต้องการทดลองใช้ในเครื่องท้องถิ่น สามารถทำตามขั้นตอนต่อไปนี้:

bash

1. โคลนที่เก็บโครงการ

git clone https://github.com/ringhyacinth/Star-Office-UI.git
cd Star-Office-UI

2. ติดตั้ง dependency ของแบ็กเอนด์

python3 -m pip install -r backend/requirements.txt

3. เตรียมไฟล์การกำหนดค่าสถานะ (รันครั้งแรก)

cp state.sample.json state.json

4. เริ่มต้นบริการแบ็กเอนด์

cd backend
python3 app.py

หลังจากเริ่มต้นเสร็จแล้ว ให้เข้าถึง http://127.0.0.1:18791 ในเบราว์เซอร์เพื่อเข้าสู่อินเทอร์เฟซออฟฟิศพิกเซล

⚠️ หมายเหตุ: เนื้อหาได้รับการแปลโดย AI และตรวจสอบโดยมนุษย์ หากมีข้อผิดพลาดโปรดแจ้ง