ArtVisionX AI
Revolutionizing Promotional Content Creation with GenAI
Created on 2nd October 2024
•
ArtVisionX AI
Revolutionizing Promotional Content Creation with GenAI
Describe your project
ArtVisionX AI: AI-Powered Banner Generation for E-Commerce
ArtVisionX AI simplifies the creation of dynamic promotional banners by leveraging Generative AI (GenAI). It combines product images, promotional text, and branding to generate high-quality banners in real-time, streamlining marketing workflows.
1. In-Scope:
- AI Banner Creation: Automatic generation of banners based on user inputs using Fabric.js and AI-driven design.
- Customizable Templates: Users can adjust layouts, text, and images in pre-built templates.
- Background Generation: Custom background images are created using open source Flux-schnell model.
2. Out of Scope:
- Advanced Video Editing: No complex video editing or animation features yet.
- High-End Design Tools: It doesn’t replace professional design software like Photoshop.
- E-Commerce Integration: Currently, no direct integration with platforms like Shopify.
3. Future Opportunities:
- Video Banner Generation: Expand into creating animated banners in mp4 format.
- Real-Time Collaboration: Introduce tools for collaborative banner editing.
- Platform Integration: Add support for direct integration with e-commerce platforms.
- AI Design Suggestions: Use AI to offer design and trend-based recommendations.
Challenges we ran into
Overcoming Challenges with Fabric.js in ArtVisionX AI
One of the significant hurdles we faced while building ArtVisionX AI was learning to work with Fabric.js for the first time. Since Fabric.js is the core library powering the banner creation and canvas rendering in the project, it was crucial to master its intricacies, especially when it came to positioning objects (images and text) on the canvas accurately.
Ensuring that elements like product images and promotional text were displayed in the right positions and sizes across various screen sizes and banner formats was particularly challenging.
How we Got Over It:
-
Deep Dive into Documentation: started by thoroughly reading the Fabric.js documentation and experimenting with small test projects to get a solid grasp of the basic API.
-
Template Strategy: adopted a strategy of working with relative percentages instead of absolute pixel values. This allowed me to create templates that were responsive and adaptable across different banner dimensions. We utilized Gemini API for generating fabric.js templates for banner generation by using few shot structure prompting.
-
Trial and Error: Through trial and error, eventually found ways to define object positions dynamically, based on user inputs like product images and promotional details. This helped in creating flexible templates that could adjust on the fly, ensuring every banner generated had proper layouts without any manual tweaks.
Tracks Applied (1)
9. Problem statement shared by BigBasket
Technologies used