Vector Composition Blueprint Guide
A deep-dive into the forensic data panel that visualizes the precise vector metrics of tattoo compositions.
The Concept of Forensic Data
The Vector Composition Transfer Blueprint panel is a powerful data visualization and analysis tool at the core of the Composition Remixer studio. Its purpose is to deconstruct a complex visual composition into a structured, machine-readable format. We call this "forensic data" because it's a detailed, analytical breakdown of an existing artwork's structure.
Instead of describing a layout with ambiguous terms like "a nice flow," a vector blueprint uses a precise quantitative language. Each element (or "motif") in a composition is defined by its exact coordinates on a grid, its size relative to other elements, its orientation angle, and its role. This structured data allows an AI to replicate a *layout* with mathematical precision, completely separate from the subjects being drawn.
Data Structure Deep-Dive
The entire system is powered by a Genkit flow, extractMotifGeometry, which returns a JSON object conforming to the MotifGeometryOutput schema. This schema, defined in src/lib/types.ts, is the blueprint for the entire analysis.
canvas: Contains the overall dimensions and aspect ratio of the analyzed image.motifs: The core of the blueprint. This is an array where each object represents a single visual element. Each motif object has precise vector data:motif_id: A unique identifier for the element.label: The identified name of the element (e.g., "rose", "leaf").bbox_normalized: The bounding box coordinates, normalized from 0 to 1.centroid_normalized: The center point of the motif.area_pct: The percentage of the canvas the motif's bounding box occupies.role: The element's compositional function (e.g., "anchor", "support", "filler").
relations: An object containing a `pairwise` array that describes the relationship between every pair of motifs, including their distance and relative angle (bearing).flow_spines: An array describing the primary visual flow lines (curves and lines) that the eye follows through the composition.summary: High-level metrics, including the dominant anchor element and an estimate of visual density.
Interactive Visualization
The panel provides an interactive experience for exploring this complex data. The UI, managed by the ForensicTransferPanel component, consists of several key parts:
- Blueprint Selector: A dropdown menu allows the user to switch between available blueprints, including both pre-defined examples and any blueprints generated by the AI in the current session.
- Dynamic Grid: The central feature is a visual grid that represents the selected blueprint. The
renderMotifsfunction iterates through themotifsarray and draws a colored circle for each element. The circle's position and size are directly mapped from the blueprint's vector data, providing an immediate and intuitive preview of the layout's structure. - Data Display: High-level metrics and summary information are displayed in clear, readable cards. A detailed HTML table presents the raw vector data for every single motif, allowing for precise inspection of the numbers behind the visualization.
- Data Export: Two buttons, "Copy Vector Data" and "Copy Summary," allow the user to export the blueprint's information. The 'Vector Data' button copies the complete, formatted JSON object for the selected blueprint, making it portable for use in other tools or for AI prompt injection. The 'Summary' button copies a concise, human-readable summary.