Back to generator
Supabase-driven configuration

How the shoe generation pipeline works

Shoe-specific source images, masks, and instructions now come from Supabase. Adding another shoe type is a data-entry and asset-upload task; the generation code does not need another hardcoded branch.

Runtime flow

From database rows to four final images

STEP 1

Load the selected shoe configuration

The server loads shoe images, masks, and prompts from Supabase. Rows are matched by shoe_type_internal_tool.id = shoeTypeId. A shoe is only returned when both linked configuration rows exist.

  • app/page.tsx receives the combined shoe list on the server.
  • PageContent receives each shoe with images, masks, and instructions attached.
  • Changing the selected shoe changes the entire configuration passed to GetAppCore.

STEP 2

Collect runtime customization

The user selects five standard colors, including the tongue color behind the uploaded logo, and can enable the topline option to reveal a sixth color selector.

  • The five standard placeholders, plus the optional topline placeholder, are replaced immediately before an edit request.
  • Tongue-label mask instructions must use ${tongueColorId}; ${AMLogoColorId} remains reserved for separate AM-logo regions.
  • When topline is off, only each standard prompt and standard mask are used.
  • With topline on, images 1–3 replace their standard mask and append a prompt; image 4 switches its first mask and extends pass 2.

STEP 3

Generate the first four views

Image 1, image 2, image 3, and the image 4 pipeline start together. Image 4 itself contains two sequential masked edits.

  • Image 1 uses no example; images 2–3 use the uploaded tongue logo as their only example image.
  • Image 4 pass 1 edits sidewall and traction regions.
  • Image 4 pass 2 uses pass 1 output, then edits laces and the exposed insert.

STEP 4

Upload sole artwork and finish image 4

The user downloads image 4, prepares/uploads sole artwork, and starts the completion stage.

  • Image 4 artwork transfer uses the uploaded sole artwork.

STEP 5

Save and review the completed design

The final images, uploaded artwork, and current color choices are stored together for later review.

  • The saved-designs table and individual design page show every stored color whose value is not null or undefined.
  • Tongue Color is persisted as tongueColorId alongside the other color choices.
  • Older saved designs remain readable even when they do not contain the newer tongueColorId field.

Database model

Three rows make one complete shoe type

shoe_type_internal_tool

One row containing id, typeName, and base image1–image4 URLs.

shoe_type_masks_internal_tool

One row containing every standard/topline mask URL and the matching shoeTypeId.

shoeType_prompts_internal_tool

One row containing every standard/topline prompt and the matching shoeTypeId.

The relationship is essential: both configuration rows must use the exact UUID from shoe_type_internal_tool.id in their shoeTypeId column. Missing linked data prevents the shoe list from loading.

Field reference

Which mask and prompt powers each request

Mask columns

StageStandardTopline enabled
Image 1image1Maskimage1MaskTopline
Image 2image2Maskimage2MaskTopline
Image 3image3Maskimage3MaskTopline
Image 4, pass 1image4Mask1.1 + image4Mask1.2image4Mask1.1Topline + image4Mask1.2
Image 4, pass 2image4Mask2.1 + image4Mask2.2Standard masks + image4MaskTopline2

Prompt columns

StageAlways usedAppended with topline
Image 1image1image1Topline
Image 2image2image2Topline
Image 3image3image3Topline
Image 4, pass 1image4.1—
Image 4, pass 2image4.2image4Topline
Image 4, artworkimage4.3—

Images 1–3 fall back to their standard mask when a topline value is not a usable URL/path. Both image 4 topline masks must be valid before topline generation is enabled. Empty topline prompt fragments and the temporary value `` are not appended for images 1–4.

API payloads

What each image-edit request receives

RequestBase/input imageMasksExample image
Image 1Supabase image1Selected image 1 maskNone
Image 2Supabase image2Selected image 2 maskUploaded tongue logo
Image 3Supabase image3Selected image 3 maskUploaded tongue logo
Image 4, pass 1Supabase image4Two pass-1 masksNone
Image 4, pass 2Image 4 pass-1 resultTwo standard masks; topline adds a thirdNone
Image 4, artworkImage 4 pass-2 resultNoneUploaded sole image
No bundled local example images are used anymore. Shoe base images and masks come from Supabase. The only example images are the tongue and sole files uploaded by the user at runtime.

Prompt contract

Use only canonical color placeholders

Prompts remain reusable because GetAppCore replaces these variables with the current color selections immediately before calling the image-edit API.

${foamInsideColorId}

Internal foam / midsole color

${AMLogoColorId}

AM logo color outside the tongue-label mask

${tongueColorId}

Tongue-label base color behind the uploaded logo

${soleColorId}

Outsole / gripper color

${laceColorId}

Lace color

${toplineColorId}

Optional topline-band color

Use the exact spelling and capitalization. Do not add new parenthesized aliases such as (OutsoleColour). A preceding # is optional, but omitting it is clearer because selected values already include it.

Adding a shoe type

Deployment checklist

  1. 1

    Create the base row

    Insert one shoe_type_internal_tool row. Set a unique typeName and public, reachable URLs for image1 through image4. Copy its generated id.

  2. 2

    Upload and verify masks

    Upload every required mask to Supabase Storage. Confirm dimensions/alignment match its base image and that every URL opens without authentication. No local example asset is required.

  3. 3

    Create the mask row

    Insert one shoe_type_masks_internal_tool row with shoeTypeId set to the copied UUID. Fill all standard mask columns. Add topline variants when ready.

  4. 4

    Write reusable prompts

    Use the six canonical placeholders wherever selected colors are referenced. Tongue-label masks must use ${tongueColorId}, while separate AM-logo regions use ${AMLogoColorId}. Keep mask assignments consistent with the uploaded mask pixels.

  5. 5

    Create the prompt row

    Insert one shoeType_prompts_internal_tool row with the same shoeTypeId. Fill every standard prompt used by the pipeline and add topline prompt fragments where applicable.

  6. 6

    Test both modes

    Generate once with topline disabled and once enabled. Choose visibly different AM-logo and tongue colors, then verify all four angles, uploaded logos, mask boundaries, all placeholder substitutions, and every non-null color in saved designs.