Bounding Boxes
ภาพรวม
Bounding box เป็นรูปแบบการโต้ตอบหลักของ Reverse Engineering หลังจากอัปโหลดรูปภาพ คุณวาดกรอบสี่เหลี่ยมรอบองค์ประกอบ UI แต่ละรายการเพื่อแยก แต่ละ bounding box จะกลายเป็นพื้นที่ที่เลือกได้ซึ่งสามารถกำหนดพฤติกรรม แปลงเป็นโค้ด หรือส่งออกเป็นคอมโพเนนต์ไวร์เฟรม
หน้าจอ Flow และกลุ่ม
แคนวาสโฟลว์หน้าจอช่วยให้คุณจัดระเบียบงานวิศวกรรมย้อนกลับเป็นกลุ่ม แต่ละกลุ่มสามารถมีภาพหน้าจอหลายภาพและสามารถกำหนดประเภทเป็น หน้าจอ (หน้าหลัก ส่วน หรือมุมมอง) หรือ โมดัล (โอเวอร์เลย์ ไดอะล็อก ป๊อปอัป ลิ้นชัก) ดับเบิลคลิกที่กลุ่มเพื่อเปิดและทำงานกับภาพ
การกำหนดกรอบด้วยตนเอง
เลือกเครื่องมือ Box
เลือกเครื่องมือวาด bounding box จากแถบเครื่องมือเหนือแคนวาสรูปภาพ
วาดกรอบ
คลิกและลากบนรูปภาพเพื่อวาดกรอบสี่เหลี่ยมรอบองค์ประกอบ UI — ปุ่ม การ์ด แถบนำทาง ส่วน hero หรือคอมโพเนนต์ใดก็ได้
ปรับขนาดและปรับ
ลากขอบหรือมุมของกรอบเพื่อปรับตำแหน่งและขนาดอย่างละเอียด ให้แน่ใจว่าครอบคลุมองค์ประกอบเป้าหมายอย่างแน่น
กำหนดพฤติกรรม
เลือกกรอบและกำหนดว่าองค์ประกอบควรทำอะไร — ตัวอย่างเช่น "เปิด modal," "นำทางไปยัง /about" หรือ "สลับ dropdown menu"
AI Auto-Boxing
แทนที่จะวาดทุกกรอบด้วยตนเอง ใช้ AI auto-boxing เพื่อให้ Kaiju Hub AI ตรวจจับและกำหนดกรอบองค์ประกอบ UI ในรูปภาพอัตโนมัติ AI วิเคราะห์เลย์เอาต์ภาพและสร้าง bounding box รอบคอมโพเนนต์ที่ตรวจพบ เช่น ส่วนหัว ปุ่ม การ์ด อินพุต รูปภาพ และรายการนำทาง
การตรวจจับคลิกเดียว
คลิกปุ่ม auto-box แล้ว AI จะสแกนรูปภาพทั้งหมด สร้าง bounding box รอบทุกองค์ประกอบ UI ที่ตรวจพบ
แก้ไขหลังตรวจจับ
กรอบที่ตรวจจับอัตโนมัติสามารถแก้ไขได้ทั้งหมด ย้าย ปรับขนาด ลบ หรือเพิ่มกรอบใหม่เพื่อปรับปรุงผลลัพธ์
การตรวจจับซ้ำแบบเลือก
รันการตรวจจับอัตโนมัติบนพื้นที่เฉพาะของรูปภาพหากคุณต้องการกรอบเฉพาะส่วนของเลย์เอาต์
การกำหนดพฤติกรรม
พลังของ bounding box อยู่ที่การกำหนดว่าแต่ละองค์ประกอบทำอะไร หลังจากกำหนดกรอบองค์ประกอบ คุณสามารถกำหนดพฤติกรรมแบบโต้ตอบที่จะสะท้อนในโค้ดหรือไวร์เฟรมที่สร้าง:
เปิด Modal
การคลิกองค์ประกอบจะเปิด modal/กล่องโต้ตอบ ระบุว่า modal ควรแสดงเนื้อหาอะไร
นำทางไปยังส่วน
องค์ประกอบทำหน้าที่เป็นลิงก์หรือปุ่มที่นำทางไปยังหน้าหรือส่วนอื่นของแอป
สลับเนื้อหา
องค์ประกอบแสดงหรือซ่อนเนื้อหาที่เกี่ยวข้อง — dropdown, accordion, แผงที่ขยายได้
การส่งฟอร์ม
องค์ประกอบทริกเกอร์การตรวจสอบและส่งฟอร์ม
การดำเนินการกำหนดเอง
กำหนดคำอธิบายพฤติกรรมกำหนดเองใดก็ได้แล้ว AI จะสร้าง event handler และลอจิกที่เหมาะสม