🎨 Interactive Image Editor with FLUX.1 Fill Tool for Inpainting

Description

> Like this template? Connect with Eduard via LinkedIn.

This workflow is a prototype of an AI-powered image editing interface, similar to Photoshop's Generative Fill feature, but running entirely in the browser. It provides a web-based editor that allows users to:

Select areas in images using an adjustable brush tool
Input text prompts to guide the AI generation
Compare original and generated images side by side
Iterate on edits with different prompts and settings
Save or reuse generated images

> 🎨 Perfect for product catalog management, seasonal content updates, and creative image editing tasks!

📋 Requirements
FLUX API Access: You'll need API credentials from FLUX to use this workflow.
Configure the HTTP Header Auth credential in n8n with your FLUX API key


🔧 Key Components
FLUX Fill API for AI-powered image generation
Konva.js for canvas manipulation
img-comparison-slider for result visualization
Custom CSS/JS for editor functionality


Simple Editor Interface
HTML page with an editor is served on the Webhook call
Adjustable brush selection tool
Provides several mock examples and allows uploading custom images
Basic prompt and FLUX model parameter controls

Image Processing Pipeline
Handles image and mask separately
Processes FLUX Fill API requests
Delivers results back to the editor

Result Viewer
Split-screen comparison of original and generated images
Interactive slider for before/after comparison
Options to save or continue editing
Support for multiple iteration cycles

🎯 Use Cases
This prototype is particularly useful for:

Testing AI-powered image editing concepts
Quick product visualization experiments
Exploring creative image variations
Demonstrating inpainting capabilities

> 💡 Pro Tip: Save masks for frequently edited areas to quickly generate variations with different prompts!

The workflow can be extended to integrate with various data sources and can be customized for specific business needs.