Composition Remixer Studio Guide
A guide to the studio for deconstructing designs and creating new layouts using forensic vector blueprints.
Philosophy and High-Level Goal
The Composition Remixer Studio introduces a powerful, data-driven approach to tattoo design. Its core philosophy is that a complex visual composition can be broken down into a "blueprint" of its constituent parts—a set of vector data describing each element's position, size, and role. By separating the *what* (the motifs) from the *where* (the layout), we can create a system for infinite creative recombination.
The ultimate goal of this studio is to allow a user to upload a source image, have an AI deconstruct it into its core geometric blueprint, and then apply that blueprint to a completely different set of subjects. For example, a user could take the subjects from a chaotic flash sheet and instantly rearrange them into the tight, symmetrical structure of an analyzed centerpiece design.
Current AI-Powered Implementation (V1)
In its current form, the Composition Remixer studio (src/app/composition-remixer/page.tsx) is a functional, AI-powered analysis tool. It allows a user to upload any image and instantly generate a detailed "forensic vector blueprint" of its composition.
1. AI Analysis Workflow
When a user uploads an image to the "Input Design" card, a useEffect hook automatically triggers the handleAnalyze function. This function calls the callAnalyzeTattooComposition server action, which executes the powerful extractMotifGeometry Genkit flow.
This flow (src/ai/flows/extract-motif-geometry.ts) uses a sophisticated prompt to instruct a vision-language model to act as a "forensic composition extractor." The model analyzes the image and returns a rich JSON object containing pixel-perfect geometric data: element centroids, bounding boxes, directional paths, and more.
The returned JSON data is then added to the page's state, becoming a new, dynamically generated "blueprint" that is immediately available in the Forensic Transfer Panel.
2. The Forensic Transfer Panel
This panel is the heart of the feature. It allows a user to select a compositional blueprint from a dropdown menu, which now includes both pre-defined examples and any blueprints generated by the AI in the current session. When a blueprint is selected, the UI dynamically updates to display:
- Visualization Grid: A grid that renders a visual representation of the blueprint. Each motif from the blueprint's `elements` array is drawn as an emoji, accurately sized and positioned according to the blueprint's data, providing an immediate, intuitive understanding of the layout.
- Metrics & Rules: Key-value cards display high-level metrics (like
dominant_axis_deg) and QA validation results from the analysis. - Vector Data Table: A comprehensive table lists every single motif from the
elementsinventory, showing its precise centroid coordinates, role, area, and shape hint. - Data Export: Users can copy the full JSON data for the selected blueprint or a concise text summary to their clipboard, allowing them to use this structured data in other applications or prompts.
Future-State AI Workflow (Remixing)
While the current page is a powerful analysis tool, the ultimate vision for this studio involves a sophisticated "remixing" pipeline:
- Deconstruction & Blueprint Generation: A user uploads a source image. The existing AI pipeline runs, generating its forensic vector blueprint.
- Subject Extraction: A second AI flow would analyze the same image to identify and list the primary subjects (e.g., "a wolf," "a rose," "a dagger").
- Blueprint Selection: The user selects a *different* compositional blueprint to apply (either another AI-generated one or a pre-defined one).
- Reconstruction & Control Application: The system would use the
applyCompositionControlsflow to warp the target blueprint if needed. It would then programmatically build a new prompt instructing the AI to render the *extracted subjects* using the vector positions and layout rules from the *selected blueprint*. - Generation: The final image is generated, showing the original motifs rearranged into the new compositional structure, effectively "remixing" the design.