ShotLock

Deterministic creative control for AI-generated visuals

Comment

Inspiration

As a creative professional working with AI-generated visuals, I've always struggled with maintaining consistency across multiple variations. Traditional AI image generation tools produce wildly different results even with similar prompts, making it nearly impossible to create cohesive visual campaigns or iterate on specific elements like lighting and mood while keeping the core composition intact.

The inspiration for ShotLock came from real-world creative workflows where teams need to:

  • Lock down camera angles and composition once they're perfect
  • Iterate on lighting, color temperature, and mood without losing the base structure
  • Compare variations side-by-side to make informed creative decisions
  • Maintain visual consistency across an entire project

ShotLock solves this by introducing the concept of "locked fields" - allowing creatives to freeze what works and experiment with what doesn't, bringing deterministic control to an otherwise unpredictable process.

What it does

ShotLock is a professional visual generation platform that gives creative teams deterministic control over AI-generated images. Here's what makes it powerful:

Core Features:

  1. Base Shot Generation - Create an initial image with full control over camera settings, composition, style, and aspect ratio. This becomes your locked foundation.

  2. Field Locking System - Once you have a base shot you love, lock critical elements like camera angle, composition, and geometry. These locked fields remain constant across all variations.

  3. Controlled Variations - Generate multiple variations by tweaking only unlocked parameters like:

    • Lighting (time of day, direction, intensity, shadows)
    • Color palette (temperature)
    • Mood and atmosphere
    • Depth of field and focus
    • Style and medium

  4. Visual Comparison - View all variations in a proof grid for easy side-by-side comparison, helping teams make faster creative decisions.

  5. Professional Workflow - Built for real creative teams who need consistency, version control, and the ability to iterate without starting from scratch.

The platform ensures that every variation maintains the same camera angle and composition while allowing creative exploration of other visual elements - perfect for product photography, marketing campaigns, or any scenario where visual consistency matters.

How we built it

ShotLock is built as a modern full-stack web application with a focus on performance, user experience, and scalability.

Frontend:

  • Next.js 16 with App Router for server-side rendering and optimal performance
  • React 19 with TypeScript for type-safe, component-based UI
  • Radix UI for accessible, unstyled components
  • Tailwind CSS for modern, responsive styling
  • Custom UI components built on top of Radix for a cohesive design system

Backend:

  • Next.js API Routes for serverless API endpoints
  • Prisma ORM with MongoDB for flexible, scalable data modeling
  • JWT authentication for secure user sessions
  • Bcrypt for password hashing

AI Integration:

  • Bria FIBO API for image generation and editing
  • Custom abstraction layer (lib/fibo.ts) that handles:
    • Image generation with comprehensive parameter control
    • Variation generation with locked field enforcement
    • Async job polling and status management
    • Multiple image editing operations (background removal, enhancement, etc.)

Architecture Highlights:

  1. Async Processing - Image generation happens asynchronously. The API returns immediately with a request ID and status URL, allowing the frontend to poll for completion without blocking.

  2. Smart Prompt Building - The system intelligently constructs prompts by combining user input with locked and unlocked parameters, ensuring variations respect the constraints.

  3. Optimized Image Loading - Strategic use of Next.js Image priority prop for above-the-fold content and lazy loading for dynamic images, ensuring fast page loads.

  4. Preload Strategy - Dynamic images from the API are preloaded using HTML link tags, improving perceived performance.

  5. Type Safety - Full TypeScript coverage ensures type safety across the entire stack, reducing bugs and improving developer experience.

The codebase is organized with clear separation of concerns: API routes handle business logic, React components manage UI state, and utility libraries abstract complex operations like API communication and authentication.

Challenges we ran into

Building ShotLock presented several interesting technical and design challenges:

1. Async Image Generation Complexity The Bria FIBO API uses async processing, which meant we needed to implement a robust polling system. Initially, we tried to poll too frequently, which caused rate limiting issues. We solved this by implementing exponential backoff and smarter status checking that only polls when necessary.

2. Maintaining Consistency Across Variations One of the biggest challenges was ensuring that variations truly maintained locked fields while allowing changes to unlocked ones. The API doesn't have a native "lock" concept, so we had to carefully construct prompts and parameters to achieve this. We built a sophisticated prompt-building system that respects locked fields while intelligently incorporating unlocked parameters.

3. Image Loading Performance With potentially dozens of images on a single page (base shot + variations), we needed to optimize loading without sacrificing user experience. We implemented a hybrid approach: priority loading for critical images, lazy loading for thumbnails, and preloading for images we know will be needed soon.

4. State Management for Long-Running Operations Image generation can take 30-60 seconds. Managing UI state during this time - showing loading states, handling errors, updating when complete - required careful state management. We used React's useEffect hooks with cleanup functions to prevent memory leaks and ensure proper state updates.

5. Type Safety with Dynamic JSON The ShotJSON structure is complex and nested. Ensuring type safety while working with Prisma's JSON fields required careful TypeScript typing and runtime validation. We created comprehensive type definitions and validation layers.

6. User Experience for Async Operations Users need to see progress, but we can't block the UI. We implemented real-time status updates, clear loading indicators, and automatic page refresh when generation completes. The challenge was making this feel seamless and not jarring.

7. API Error Handling The Bria API can fail in various ways - rate limits, invalid parameters, network issues. We needed robust error handling that provides clear feedback to users while gracefully degrading functionality.

Accomplishments that we're proud of

We're particularly proud of several aspects of ShotLock:

1. Clean, Professional UI The interface is clean, intuitive, and feels like a professional tool rather than a hackathon project. The design prioritizes the creative workflow, making it easy to generate, compare, and iterate on visuals.

2. Robust Architecture The codebase is well-organized, type-safe, and maintainable. We built a solid foundation that can scale and evolve. The abstraction layer for the Bria API makes it easy to swap providers or add features.

3. Performance Optimizations We went beyond basic functionality to optimize image loading, implement smart preloading strategies, and ensure fast page loads. The app feels snappy even with multiple images and variations.

4. Complete Feature Set ShotLock isn't just a demo - it's a fully functional application with authentication, data persistence, error handling, and a complete user workflow. Users can sign up, create shots, generate variations, compare them, and manage their work.

5. Developer Experience The code is clean, well-typed, and follows best practices. Future developers (or ourselves) can easily understand and extend the codebase. We've included proper error handling, type definitions, and clear code organization.

6. Real-World Applicability ShotLock solves a real problem that creative professionals face daily. It's not just a cool tech demo - it's a tool that could genuinely improve creative workflows in production environments.

7. Comprehensive API Integration We built a complete wrapper around the Bria FIBO API that handles not just generation, but also editing operations, status polling, and error recovery. This abstraction makes the codebase more maintainable and testable.

What we learned

Building ShotLock taught us valuable lessons:

Technical Learnings:

  1. Async Operations in Web Apps - We learned a lot about managing long-running async operations in React. The key is proper state management, cleanup, and user feedback.

  2. Image Optimization - We gained deep understanding of Next.js Image optimization, when to use priority vs lazy loading, and how preloading can improve perceived performance.

  3. API Design Patterns - Building a clean abstraction layer over a third-party API taught us about separation of concerns and how to make code more maintainable.

  4. TypeScript Best Practices - Working with complex nested types and JSON fields reinforced the importance of proper typing and runtime validation.

  5. Performance Optimization - We learned that performance isn't just about code - it's about loading strategies, resource prioritization, and user perception.

Product Learnings:

  1. User Experience Matters - Small UX details - like showing loading states, clear error messages, and smooth transitions - make a huge difference in how users perceive the application.

  2. Workflow Design - Understanding the actual creative workflow helped us design features that fit naturally into how people work, rather than forcing users to adapt to our tool.

  3. Consistency is Key - For creative professionals, maintaining visual consistency is often more important than having the "best" individual image. This insight shaped our entire approach.

  4. Progressive Enhancement - Building features that work well even when things go wrong (network issues, API failures) creates a more robust product.

Process Learnings:

  1. Planning Pays Off - Taking time to design the architecture and data models upfront saved us from major refactoring later.

  2. Iterative Development - Building core features first, then optimizing, then polishing, created a better end result than trying to do everything at once.

  3. Code Quality - Writing clean, well-typed code from the start made debugging and feature additions much easier.

What's next for ShotLock

ShotLock has a clear roadmap for growth and improvement:

Short-term Enhancements:

  1. Batch Operations - Allow users to generate multiple variations at once with different parameter sets, speeding up the iteration process.

  2. Export Functionality - Add the ability to export variations in different formats, sizes, and with metadata for use in other tools.

  3. Collaboration Features - Enable teams to share shots, add comments, and collaborate on creative decisions.

  4. Advanced Editing - Integrate more Bria FIBO editing capabilities like background replacement, object removal, and style transfer directly in the UI.

  5. Templates and Presets - Create reusable templates for common workflows (product photography, lifestyle shots, etc.) to speed up creation.

Medium-term Goals:

  1. Version History - Track changes over time, allowing users to revert to previous variations or compare across time.

  2. Smart Suggestions - Use AI to suggest parameter combinations that might work well based on the base shot.

  3. Integration Ecosystem - Build integrations with design tools like Figma, Adobe Creative Suite, and project management tools.

  4. Advanced Analytics - Provide insights into which variations perform best, parameter trends, and usage patterns.

  5. Mobile App - Create a mobile companion app for reviewing and approving variations on the go.

Long-term Vision:

  1. Enterprise Features - Add team management, role-based permissions, usage analytics, and enterprise-grade security.

  2. API Access - Provide a public API so other tools can integrate ShotLock's capabilities into their workflows.

  3. Marketplace - Create a marketplace where users can share templates, presets, and best practices.

  4. AI-Powered Workflows - Use machine learning to learn from user patterns and automatically suggest optimal parameter combinations.

  5. Multi-Model Support - Expand beyond Bria FIBO to support multiple AI image generation models, giving users more options.

ShotLock is just getting started. We're excited to continue building features that make creative professionals more productive and help them create better visual content faster.

Built With

Share this project:

Updates