### The Problem: AI Image Generation is Fragmented For designers, creators, and developers, generating images using AI often feels like an exercise in frustration. The standard chat-based interfaces present several core pain points: - **Reference Loss**: You lose track of the reference images used for generation. - **Context Drift**: In chat flows, the AI model loses track of context after a few prompts, requiring you to repeat guidelines. - **Workflow Silos**: Connecting prompt templates, seeds, webcam pictures, and generation engines is manual and repetitive. **Floral** was built to solve these exact frustrations. Created over a **3-day sprint** (followed by intensive feedback loops and UI refinement with colleagues), Floral transforms image generation into a structured, visual node graph editor. ## Workspace Overview Here is a look at the Floral workspace where you can visually organize and execute your AI workflows. ![Floral Visual Node Editor Workspace](/assets/project/floral/image.png) ## How Floral Works: The Visual Node System Instead of typing in a single prompt box, Floral lets you drag and connect modular blocks. Here is the detailed breakdown of the available node types:

Node Type	Allowed Inputs & Methods	Primary Workflow Purpose	Key Features & Details
Image Node	Local upload, webcam capture, AI generation output	Serves as a visual reference / seed anchor for Image-to-Image models.	Supports drag-and-drop uploads, real-time snapshot using laptop webcam, and links directly as context for generations.
Video Node	Connects output pipelines of text nodes and image nodes	Orchestrates multi-frame generation to produce sequential AI animations.	Automatically compiles connected visual assets and timing rules to build smooth video files.
Text Node	Keyboard text, AI prompt builder rewrite templates	Provides the base textual prompts and pre-prompts for context mapping.	Features pre-prompt injections to guide outputs without chat drift, and supports inline template rewrites.
Seed Node	Numeric values, count sliders, iteration parameters	Standardizes and controls random vectors for generation consistency.	Allows locking seed values for identical outputs, or incrementing seeds for a batch array.

### Visual Interface Highlights Below is a breakdown of how these nodes are configured within the flow editor interface: - **Image Node Capture & Configuration**: ![Image Node Interface](/assets/project/floral/image%20copy.png) - **Text Prompt & Pre-Prompt Editor**: ![Text Node Interface](/assets/project/floral/image%20copy%202.png) - **Seed Locking & Iteration Controls**: ![Seed Node Interface](/assets/project/floral/image%20copy%203.png) --- ## Key Features - **Google AI Studio Integration**: Directly communicates with the Gemini and Google AI APIs for fast, high-quality responses. - **Workflow Sharing**: Export your complete visual layout as a JSON file and import it anytime to pick up exactly where you left off. - **Theme/Mode Selector**: Adapt your workspace to match your style or ambient lighting. - **Interactive Gallery**: Keep track of all generated variants in a clean, visual grid without leaving the project. - **Webcam Integration**: Snap reference shots on the fly to use as instant generation seeds. ![Floral Advanced Features](/assets/project/floral/image%20copy%204.png) --- ## Outcome and Team Feedback Initially created to solve a personal workflow bottleneck, Floral was quickly shared with colleagues and team members. Using their hands-on feedback, we: 1. Streamlined the node connector wires. 2. Improved the layout spacing and reactivity of the workspace. 3. Enhanced the webcam-to-node loading speed. Now, instead of navigating endless chat logs, the team uses Floral to save hours of generation time every day by mapping out their visual pipelines visually.

Components

Button Carousel

Mesh Text Hover

Button Component

Command Palette

Components

Button Carousel

Mesh Text Hover

Button Component