This is just the first step in revolutionizing automated banner creation - our foundation for an intelligent design system that continuously learns and improves.
An intelligent banner generation platform that leverages AI agents and retrieval-augmented generation (RAG) to create professional, editable HTML banners. The system learns from past successful designs to continuously improve output quality.
- 🤖 Multi-Agent AI Workflow: Intelligent banner generation using LangGraph agents
- 🧠 RAG-Powered Learning: Learns from successful designs using pgvector embeddings
- 🎨 Visual Editor: Full WYSIWYG editing powered by GrapeJS - an open-source, multi-purpose web page builder that provides the foundation for our advanced banner editing capabilities
- 📱 Responsive Design: Preview and optimize for desktop, tablet, and mobile
- 🔄 Multiple Export Formats: HTML, PNG, PDF, SVG with high-quality rendering
- ⚡ Real-time Generation: <10 second banner generation with validation
- 📊 Analytics & Feedback: Continuous improvement through user ratings and usage tracking
- Modern React 18 with TypeScript
- GrapeJS visual editor integration - Built upon the powerful open-source GrapeJS framework for seamless web-based editing
- Responsive design with TailwindCSS
- Real-time banner preview and editing
- Export functionality with format selection
- RESTful API with async support
- LangGraph multi-agent orchestration
- pgvector similarity search
- Playwright-based export service
- Comprehensive validation pipeline
- Vector embeddings for semantic search
- Template storage with metadata
- User feedback and analytics
- Block-based component library
Our system uses a sophisticated multi-agent architecture that transforms simple user inputs into professional banners through intelligent workflow orchestration:
User Input → Analyzer → Retrieval → Designer → Validator
↓
[Pass] → Finalizer → Response
↓
[Fail] → Optimizer → Designer (retry)
1. Analyzer Agent
- Parses user input and extracts design requirements
- Identifies key themes, emotions, target audience
- Determines layout complexity (simple, moderate, complex)
- Output: Structured design brief
2. Retrieval Agent
- Generates query embedding from design brief
- Searches similar banners with pgvector filters
- Ranks and selects best examples based on similarity
- Output: Top 3-5 contextual examples
3. Designer Agent
- Generates HTML using blocks + retrieved context
- Ensures responsive design and accessibility
- Applies brand guidelines if provided
- Output: Initial HTML draft
4. Validator Agent
- Checks HTML validity and GrapeJS compatibility
- Verifies responsive behavior (3 breakpoints)
- Ensures no text overlap or layout breaks
- Checks accessibility (WCAG 2.1 AA)
- Output: Validation report + fixes
5. Optimizer Agent
- Records remediation notes and retries designer
- Optimizes file size and performance
- Suggests alternative layouts if validation fails
- Output: Improved final HTML
- Intelligent Context-Awareness: Each agent has specialized knowledge and tools
- Robust Error Handling: Automatic retry mechanisms with learning
- Continuous Improvement: Agents learn from validation failures and user feedback
- Scalable Architecture: Easy to add new agents or modify existing ones
1. Editability & Flexibility
- Fully editable in any HTML editor
- Easy to modify text, colors, and layout
- No proprietary format lock-in
- Component-based architecture for reusability
2. SEO Benefits
- Text content is indexable by search engines
- Semantic HTML improves accessibility
- Fast loading times compared to image-heavy alternatives
- Responsive design adapts to all devices
3. Performance & Scale
- Smaller file sizes than raster images
- Infinite scaling without quality loss
- Easy to A/B test different variations
- Can be dynamically updated with real-time data
4. Integration & Automation
- Easy integration with CMS and marketing platforms
- Can be generated programmatically at scale
- Supports dynamic content and personalization
- API-friendly for automated workflows
| Feature | Canva | AI Banner Generator |
|---|---|---|
| Learning System | No learning from designs | ✅ RAG-powered continuous learning |
| Automation | Manual design process | ✅ Fully automated generation |
| Batch Creation | One-by-one design | ✅ Generate hundreds in minutes |
| Brand Consistency | Requires manual templates | ✅ Automatic brand guideline application |
| SEO Optimization | Limited (image-based) | ✅ Full HTML with semantic markup |
| API Integration | Limited API access | ✅ Complete REST API for automation |
| Responsive Design | Manual resizing | ✅ Automatic responsive generation |
| A/B Testing | Manual version creation | ✅ Programmatic variation generation |
| Cost at Scale | Per-seat licensing | ✅ Usage-based pricing |
| Customization | Template-based | ✅ AI-generated unique designs |
- Next.js 15 - React framework with App Router
- TypeScript - Type-safe development
- TailwindCSS - Utility-first CSS framework
- GrapeJS - Visual HTML editor
- Axios - HTTP client for API calls
- Radix UI - Accessible component library
- FastAPI - Modern async web framework
- LangChain - AI agent orchestration
- LangGraph - Multi-agent workflow management
- sentence-transformers - Text embeddings (all-MiniLM-L6-v2)
- pgvector - Vector similarity search
- Playwright - High-quality export rendering
- Pydantic - Data validation and settings
- PostgreSQL 15+ - Primary database
- pgvector - Vector embeddings extension
- Saffier ORM - Modern Python ORM
- Python 3.11+
- Node.js 18+
- PostgreSQL 15+ with pgvector extension
- Redis (optional, for caching)
# Clone the repository
git clone <repository-url>cd Banner-Generator/backend
# Create virtual environment
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate# Install dependencies
pip install -r requirement.txt
# Configure environment variables
cp .env.example .env
# Edit .env with your settings# Run database migrations
python -m alembic upgrade head
# Start the server
uvicorn app.main:app --reload# Navigate to frontend directorycd ../frontend
# Install dependencies
npm install
# Configure environment variables
cp .env.example .env
# Edit .env with your backend URL# Start development server
npm run dev# Build and start all services
docker-compose up --build
# Or run in background
docker-compose up -dBackend (.env)
# DatabaseDATABASE_URL=postgresql://user:password@localhost/dbname# AI/LLM ConfigurationLLM_API_KEY=your_api_keyLLM_BASE_URL=https://api.deepseek.com# Redis (optional)REDIS_URL=redis://localhost:6379# SecuritySECRET_KEY=your_secret_keyFrontend (.env)
NEXT_PUBLIC_API_URL=http://localhost:8000curl -X POST "http://localhost:8000/v1/banner/generate" \
-H "Content-Type: application/json" \
-d '{ "title": "Summer Sale", "subtitle": "Up to 50% Off", "description": "Limited time offer on all items", "designPreference": "Modern, vibrant colors", "background": "color", "backgroundValue": "#FF6B6B", "bannerType": "promotional", "category": "E-commerce", "width": 728, "height": 90 }'curl -X POST "http://localhost:8000/v1/banner/{bannerId}/export" \
-H "Content-Type: application/json" \
-d '{ "format": "png", "quality": "high" }'curl -X POST "http://localhost:8000/v1/templates/search" \
-H "Content-Type: application/json" \
-d '{ "query": "summer sale banner", "category": "E-commerce", "limit": 5 }'- Rapid campaign banner creation
- A/B testing multiple variations
- Maintaining brand consistency across campaigns
- Scaling banner production for multiple channels
- Dynamic product promotion banners
- Seasonal sale announcements
- Category-specific promotional materials
- Real-time price update integration
- Quick client draft generation
- Template library management
- Automated resizing for different platforms
- Client collaboration and feedback integration
- Programmatic banner generation
- Integration with CMS platforms
- Automated marketing workflows
- Custom branding solutions
- Generation Time: <10 seconds (P95)
- Similarity Search: <500ms (P95)
- Editor Load Time: <3 seconds
- Export Generation: <5 seconds
- API Response Time: <200ms (excluding LLM calls)
- Concurrent Users: 1000+ supported
- Template Storage: 100K+ efficient storage
This project represents a fundamental shift in design tools - combining the visual editing power of Figma with the intelligence of LLMs through natural language prompts.
While currently focused on banner creation, this architecture has the potential to evolve into a complete Figma alternative powered by AI agents:
Current: Banner Generation → Future: Full Website Design
Single Component → Multi-Page Layouts
Static HTML → Dynamic React/Vue Components
Manual Editing → AI-Prompt Driven Design
What's Possible with Agent Enhancements:
- 🎨 Multi-page website generation from simple prompts
- 📱 Responsive design systems automatically created
- ⚛️ Component library generation (React, Vue, Svelte)
- 🔌 API exposure for integration with any client
- 🛠️ MCP (Model Context Protocol) support for tool integration
- 🎯 Design system creation from brand guidelines
Instead of manually dragging and dropping elements like in traditional design tools, users could simply say:
"Create a modern e-commerce homepage with a hero section, product grid, and testimonials. Use a blue color scheme and make it fully responsive."
The AI agents would:
- Analyze the requirements
- Retrieve relevant design patterns
- Generate complete page layouts
- Validate responsive behavior
- Export production-ready code
The core infrastructure is already in place:
- ✅ Multi-agent workflow (analyzer, retrieval, designer, validator)
- ✅ RAG-powered learning from successful designs
- ✅ HTML generation with GrapeJS compatibility
- ✅ Export capabilities (HTML, PNG, PDF, SVG)
- ✅ Vector embeddings for design pattern recognition
What needs enhancement:
- 🔄 Agent expansion for page-level design logic
- 🔄 Component library expansion beyond banner blocks
- 🔄 Layout algorithms for multi-element arrangements
- 🔄 Navigation generation for multi-page flows
With API and MCP exposure, this could connect to:
- Development workflows (VS Code, IntelliJ)
- CMS platforms (WordPress, Contentful)
- Design systems (Storybook, Design Tokens)
- Deployment pipelines (Vercel, Netlify)
- No-code platforms (Webflow, Bubble)
- Finish GrapeJS editor integration with full component library
- Enhance validation service for complex layouts
- Improve agent coordination and error handling
- Add comprehensive testing for all agent workflows
- Multi-modal embeddings (text + visual)
- Advanced filtering and faceted search
- Template versioning and history
- Collaborative template libraries
- Brand guideline automatic extraction
- GPT-4V/Claude-3 vision integration
- Real-time design suggestions
- Automated color palette generation
- Typography and layout optimization
- Cross-cultural design adaptation
- Multi-page website generation from natural language prompts
- React/Vue component export with full interactivity
- Design system generation from brand guidelines
- API and MCP exposure for third-party integrations
- VS Code extension for seamless developer workflow
- Real-time collaboration features (like Figma)
- Advanced layout algorithms for complex page structures
- Component intelligence with auto-suggestion systems
- Multi-tenant architecture
- Advanced analytics dashboard
- Team collaboration tools
- Approval workflows
- Integration with popular marketing platforms
- AI-assisted editing suggestions
- Advanced animation support
- Interactive banner elements
- Video banner generation
- GraphQL API for better frontend integration
- WebSocket support for real-time updates
- Advanced caching strategies
- Microservices architecture
- Edge deployment support
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
- 📧 Email:- shanthubolt@gmail.com
- Core agentic workflow implementation
- RAG-powered template retrieval
- Multi-format export functionality
- Beta testing with select users
- Advanced analytics dashboard
- Multi-language support
- Enhanced template library
- Mobile app development
- Enterprise features launch
- Advanced AI model integration
- Real-time collaboration
- Global deployment
Built with ❤️ by the Banner Generator Team
Transforming ideas into beautiful, effective banners through the power of AI
We want to extend our special thanks to the GrapeJS team and open-source community. GrapeJS provides the powerful, flexible foundation that makes our visual editor possible. Without their excellent web page builder framework, creating an intuitive WYSIWYG banner editing experience would be significantly more challenging.
- GrapeJS - The open-source, multi-purpose web page builder
- GrapeJS GitHub - For the amazing community and continuous improvements
This project stands on the shoulders of open-source giants, and we're grateful for the tools that enable us to focus on innovation in AI-powered design generation.