StyleSync

Programmable product photography. StyleSync uses Bria FIBO's JSON protocol for deterministic, studio-quality assets with precise control.

Comment

Inspiration

Generative AI has a "chaos problem." As a developer and creator, I noticed that while tools like Midjourney or DALL-E are creative, they are fundamentally random. If a brand needs a product shot of a "luxury perfume bottle," they need that specific bottle to look consistent across different lighting and backgrounds. Standard text-to-image models act like slot machines: you pull the lever and hope for the best.

When I discovered Bria FIBO's JSON-native architecture, I realized the solution wasn't better prompting, but better programming. I wanted to build a tool that treats photography not as a creative gamble, but as a deterministic, version-controllable engineering process. StyleSync was born from the idea that modern product photography should be as editable and reliable as code.

What it does

StyleSync is a "deterministic creative suite" that gives users granular, programmatic control over AI image generation. It moves beyond simple text prompts into structured data.

Key Features:

  1. Text-to-Structure Translation: Users describe a product in plain English, and StyleSync converts it into a complex, structured JSON schematic using Bria's API.
  2. Visual JSON Editor: A bridge between code and canvas. Users can tweak specific parameters (like "Camera Angle: 45-front-left" or "Lighting: Dramatic") using UI sliders, which update the underlying JSON in real-time.
  3. The Style Explorer: This is our flagship feature. With one click, StyleSync programmatically "forks" the base prompt into four distinct business aesthetics: Commercial, Professional, Luxury, and Minimal. It keeps the product consistent while swapping out lighting, composition, and mood data instantly.

How we built it

StyleSync is a JSON-First application. We built the frontend with React, Vite, and TypeScript to ensure a snappy, type-safe experience.

  • State Management: We used Zustand to hold the structured_prompt as the single source of truth. Every UI interaction deeply merges updates into this central JSON object.
  • Backend Orchestration: We deployed Vercel Serverless Functions to handle the API interactions. This was critical for the "Style Explorer" feature. Instead of making the frontend heavy, the backend receives one request, clones the JSON four times, modifies the specific style parameters for each variant, and manages the parallel generation requests to Bria's engine.
  • UI Adapters: We wrote custom adapter layers (cameraControls.ts, lightingControls.ts) that map human-readable UI options to the deep, nested paths required by the FIBO schema.

Challenges we ran into

  • The "Chaos" of State: Managing a deeply nested JSON object that changes in real-time was tricky. We had to ensure that when a user applied a "Preset" (like Studio White), it didn't overwrite their specific product description. We solved this by implementing a smart deep-merge strategy using lodash.merge.
  • Rate Limiting & Polling: Generating four high-fidelity images simultaneously puts a load on the API. Our initial implementation hit rate limits. We refactored the backend to handle polling more gracefully, implementing retry logic and sequential checks to ensure the UI never hangs, even if one generation takes longer than others.

Accomplishments that we're proud of

  • The Style Explorer: Watching the app successfully generate four completely different "vibes" for the exact same product without hallucinating different objects was a huge win. It proves the power of the JSON-native approach.
  • The Developer Experience: The code is clean, modular, and extensible. We built it not just as a hackathon project, but as a solid foundation for a real product.
  • Bridging the Gap: We successfully built a UI that makes complex JSON schemas accessible to non-technical designers without dumbing down the capabilities.

What we learned

We learned that Structure > Text. Traditional prompting is vague; structured JSON is precise. Working with Bria FIBO taught us that if you treat media generation as a data problem, you unlock capabilities (like version control and programmatic scaling) that are impossible with standard generative tools. We also deepened our knowledge of React Query for handling complex asynchronous states.

What's next for StyleSync

  • Database Integration: Saving structured prompts to a database (like Supabase) so teams can build a library of approved brand assets.
  • Batch Processing: allowing e-commerce managers to upload a CSV of 100 products and generate "Studio White" shots for all of them automatically.
  • Figma Plugin: Bringing the Visual JSON Editor directly into design tools.

Built With

Share this project:

Updates