बाउंडिंग बॉक्स
अवलोकन
Bounding boxes are the core interaction model of Reverse Engineering. After uploading an image, you draw rectangular boxes around individual UI elements to isolate them. Each bounding box becomes a selectable region that can be assigned behaviors, converted to code, or exported as a wireframe component.
स्क्रीन फ्लो और समूह
स्क्रीन फ़्लो कैनवास आपको अपने रिवर्स इंजीनियरिंग कार्य को समूहों में व्यवस्थित करने की अनुमति देता है। प्रत्येक समूह में कई स्क्रीन चित्र हो सकते हैं और इसे स्क्रीन (मुख्य पृष्ठ, अनुभाग, या दृश्य) या मोडल (ओवरले, डायलॉग, पॉपअप, ड्रॉअर) के रूप में टाइप किया जा सकता है। किसी समूह को खोलने और उसके चित्रों के साथ काम करने के लिए उस पर डबल-क्लिक करें।
मैन्युअल बॉक्सिंग
बॉक्स टूल चुनें
Choose the bounding box drawing tool from the toolbar above the image canvas.
एक बॉक्स बनाएँ
Click and drag on the image to draw a rectangular box around a UI element — a button, a card, a navigation bar, a hero section, or any component.
आकार बदलें और समायोजित करें
Drag the edges or corners of any box to fine-tune its position and size. Make sure it tightly wraps the target element.
व्यवहार असाइन करें
Select a box and define what the element should do — for example, "opens a modal," "navigates to /about," or "toggles a dropdown menu."
AI स्वतः-बॉक्सिंग
Instead of drawing every box manually, use AI auto-boxing to have Kaiju Hub AI automatically detect and outline UI elements in your image. The AI analyzes the visual layout and creates bounding boxes around detected components like headers, buttons, cards, inputs, images, and navigation items.
एक-क्लिक डिटेक्शन
Click the auto-box button and AI scans the entire image, creating bounding boxes around every detected UI element.
डिटेक्शन के बाद संपादन
Auto-detected boxes are fully editable. Move, resize, delete, or add new boxes to refine the results.
चयनात्मक पुनः-डिटेक्शन
Run auto-detection on a specific region of the image if you only need boxes for part of the layout.
व्यवहार निर्देशित करना
The power of bounding boxes is in directing what each element does. After boxing an element, you can assign it interactive behaviors that will be reflected in the generated code or wireframe:
मॉडल खोलता है
Clicking the element opens a modal/dialog. Specify what content the modal should display.
अनुभाग में नेविगेट करता है
The element acts as a link or button that navigates to another page or section of the app.
सामग्री टॉगल करता है
The element shows or hides related content — dropdowns, accordions, expandable panels.
फ़ॉर्म सबमिशन
The element triggers form validation and submission logic.
कस्टम कार्रवाई
Define any custom behavior description and AI will generate the appropriate event handlers and logic.