Smart Scene Composer

Turn text prompts into fully controllable, production-ready AI-generated scenes with live preview and real-time parameter tweaks.

Comment

Inspiration

Creating visual content for production workflows can be slow and unpredictable, especially when relying on manual design or prompt engineering in AI tools. With Bria FIBO, we saw the opportunity to give creators deterministic control over scene generation—every camera angle, FOV, lighting, and color palette could be finely tuned. Our goal was to make this power accessible through a fast, interactive web interface.

What it does

Smart Scene Composer is a frontend-only React.js app that lets users:

  • Type a scene description (e.g., "futuristic cyberpunk city at sunset").
  • Convert the text prompt into structured JSON using FIBO’s LLM.
  • Preview live images generated by FIBO.
  • Adjust professional parameters through sliders and toggles:
    • Camera angle (0–360°)
    • FOV (20–120)
    • Lighting intensity (0–100)
    • Color palette (multi-select)
    • HDR toggle
  • Export both the generated JSON prompt and the image for production use.

It’s a simple but powerful tool for creators who want full visual control without backend complexity.

How we built it

  • Frontend: React.js + Tailwind CSS for modular styling
  • API integration: Direct call to Bria FIBO API using an LLM-to-JSON workflow
  • State management: React hooks for live preview and parameter binding
  • Components:
    • Input form for scene descriptions
    • Sliders and toggles panel for professional parameters
    • Live preview panel
    • Export button for JSON + image
  • Deployment: Configured to run on Vercel for fast demonstration

Challenges we ran into

  • Integrating live updates with FIBO API while keeping frontend-only architecture smooth.
  • Handling JSON output in a structured way that maps cleanly to sliders/toggles.
  • Ensuring the UI remains responsive and intuitive with minimal CSS.

Accomplishments that we're proud of

  • Fully frontend MVP that works without backend.
  • Real-time scene adjustments with sliders directly affecting FIBO output.
  • Clean modular code ready for hackathon demo.
  • Exportable JSON + image workflow for real production use.

What we learned

  • How to leverage JSON-native AI pipelines for precise controllability.
  • The importance of modular React components for rapid prototyping.
  • Techniques to bind UI controls directly to API parameters for live updates.

What's next for Smart Scene Composer

  • Add multi-scene batch generation for larger projects.
  • Enable preset templates for common production workflows.
  • Explore WebGL/Three.js integration for live 3D previews.
  • Integrate FIBO agentic workflows to automate parameter adjustments intelligently.

Built With

Share this project:

Updates