DEV Community

Denis
Denis

Posted on

Devlog: OmniBrand Kit – How Our AI Agents Built a Global Social Media Asset Designer in Record Time

#node #javascript #ai #opensource

Devlog: OmniBrand Kit - How Our AI Agents Built a Global Social Media Asset Designer in Record Time

At Pixel Office, we constantly push the boundaries of what's possible with artificial intelligence in software development. Today, we proudly introduce OmniBrand Kit: Global Social Media Asset & Profile Designer, a client-side web application that transforms how businesses and individuals manage their online identity. But how did such a complex tool come to life? Let's take a look under the hood.

The Technical Challenge: Brand Consistency in the Digital Jungle

Creating visually consistent and correctly sized assets for dozens of social networks is every marketer's and designer's nightmare. Each platform has its specific requirements for dimensions, aspect ratios, and safe zones. The goal of OmniBrand Kit was to automate this process, allowing users to upload their logo, select brand colors, and let the tool intelligently generate everything needed – from LinkedIn banners, X (formerly Twitter) headers, to Instagram stories and YouTube channel art. All this with a modern design and multilingual support.

Architecture and Design: Klára Defines the User Experience

Our AI designer Klára set out to design the user interface with a vision of clarity and efficiency. Emphasis was placed on:

  • Intuitive workflow: Minimalistic steps for uploading a logo, selecting colors, and generating assets.
  • Modern aesthetics: Glassmorphism elements, an adaptive dark mode, and a responsive design that looks great on any device.
  • Multilingual support: Immediate support for a global audience.

Klára designed a client-side architecture for maximum speed and user data privacy, with all processing occurring directly in the browser.

Implementation: Jan's AI Code Brings the Vision to Life

Our AI developer Jan took Klára's designs and transformed them into a functional web application. Key technical aspects of his work included:

  • Dynamic image element generation: Utilizing the HTML Canvas API and advanced image manipulation algorithms to render logos and colors onto correctly sized templates for each platform.
  • Branding integration: Intelligent placement of the logo and application of brand colors, considering readability and visual harmony.
  • Multilingualism: An architecture ready for easy addition of new languages.
  • Monetization model: Implementation of a freemium model with a limited number of free generations and a one-time Stripe payment for premium features.

Here's a snippet of Jan's code focusing on permission management and payment integration:

        const WIDGET_SLUG = "social-asset-generator";
        const WHATSAPP_NUMBER = "420607450436";
        const SHOWCASE_HUB_DASHBOARD_URL = "https://pixeloffice.eu/dashboard.html";
        const PIXEL_OFFICE_API_BASE = "https://api.pixeloffice.eu/api/pay";
        const CRYPTO_POLLING_INTERVAL = 5000; // 5 seconds
        const FREE_USES_LIMIT = 3;

        // Firebase Configuration
        const firebaseConfig = {
            apiKey: "AIzaSyFakeKeyForShowcaseHubAuthTestingOnly",
            authDomain: "pixeloffice-hub.firebaseapp.com",
            projectId: "pixeloffice-hub",
            storageBucket: "pixeloffice-hub.appspot.com",
            messagingSenderId: "1234567890",
            appId: "1:1234567890:web:abcdef123456"
        };
        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
        }
        const auth = firebase.auth();
        let currentUser = null;
        let isUnlocked = localStorage.getItem(`pv_unlocked_${WIDGET_SLUG}`
// ... a další multijazyčné překlady
Enter fullscreen mode Exit fullscreen mode

"One of the key technical aspects was a robust solution for usage tracking and payment integration," Jan explains. "We leveraged Firebase for authentication and user state, and our internal API for processing one-time Stripe payments. The isUnlocked segment and FREE_USES_LIMIT are crucial for managing free and premium access, ensuring a smooth transition for users and fair monetization."

This code illustrates how Jan designed a system for managing user permissions and payment integration. We see definitions for WIDGET_SLUG (a unique identifier for OmniBrand Kit), FREE_USES_LIMIT for restricting the free version, and PIXEL_OFFICE_API_BASE for communication with our backend, which processes Stripe payments. The Firebase configuration ensures secure user authentication and management of their state, such as the isUnlocked variable, which determines whether the user has access to premium features.

Quality Assurance: Martin's Emphasis on Perfectionism

Martin, our AI QA specialist, played a crucial role in ensuring that OmniBrand Kit functioned flawlessly across all platforms and devices. He meticulously tested:

  • Dimension accuracy: Whether generated images matched the specifications of each social network.
  • Branding consistency: Whether logos and colors were correctly applied and looked professional.
  • User flow: Smooth progression through the application, from file upload to downloading finished assets and payment process functionality.

Deployment: Tomáš' Speed and Reliability

The final step belonged to Tomáš, our AI DevOps engineer, who ensured the seamless deployment of the application. Thanks to optimization for client-side operation, OmniBrand Kit is hosted on a globally distributed CDN, guaranteeing lightning-fast speed and availability for users worldwide.

Try OmniBrand Kit Today!

The result of this harmonious collaboration of our AI agents is a robust, fast, and user-friendly web application that solves a real problem. OmniBrand Kit is a testament to the power of AI in software development and our ability to innovate rapidly.

Try OmniBrand Kit for yourself and discover the difference proper brand consistency can make: https://pixeloffice.eu/showcase/social-asset-generator/

Top comments (0)