Автоматична генерація зображень товарів для соцмереж

Автоматична генерація зображень товарів для соцмереж

Щодня маркетолог витрачає 20–30 хвилин на створення одного брендованого зображення для нового товару. Помножуємо на 100 позицій — отримуємо втрачений тиждень. Ми автоматизуємо цей процес: система бере дані з картки (фото, назва, ціна, бренд) і генерує готові банери під кожну соцмережу — Telegram, VK, Instagram, Stories. Результат — єдина графіка за секунди, а не години.

Як працює шаблонний генератор?

Використовуємо бібліотеку Pillow (Python) або Sharp (Node.js). На заздалегідь підготовлені макети накладаються поля товару. Шрифти, кольори, логотип — усе відповідає брендбуку. Генератор адаптує текст під розміри: якщо назва довга — зменшуємо кегль, якщо ціна зі знижкою — виділяємо жовтим.

Приклад: для інтернет-магазину одягу ми налаштували 5 шаблонів під різні категорії. При додаванні товару в CMS автоматично створюється 4 варіанти зображень — квадратний пост, портретний пост, сторіс та прев’ю для Telegram. Результат — 20 секунд замість 20 хвилин.

from PIL import Image, ImageDraw, ImageFont
import httpx
from io import BytesIO

class ProductBannerGenerator:
    TEMPLATES = {
        'feed':    (1080, 1080),   # Instagram/VK пост
        'story':   (1080, 1920),   # Instagram/VK Stories
        'telegram': (1280, 640),   # Telegram прев'ю
    }

    def generate(self, product: dict, format: str = 'feed') -> bytes:
        width, height = self.TEMPLATES[format]
        canvas = Image.new('RGB', (width, height), color='#FFFFFF')
        draw   = ImageDraw.Draw(canvas)
        if product.get('image_url'):
            product_img = self._load_image(product['image_url'])
            product_img = self._fit_image(product_img, (width, int(height * 0.65)))
            canvas.paste(product_img, (0, 0))
        gradient = self._create_gradient((width, int(height * 0.4)), '#000000', alpha_start=0, alpha_end=180)
        canvas.paste(gradient, (0, int(height * 0.6)), mask=gradient)
        font_title = ImageFont.truetype('fonts/Inter-Bold.ttf', size=52)
        font_price = ImageFont.truetype('fonts/Inter-ExtraBold.ttf', size=72)
        font_small = ImageFont.truetype('fonts/Inter-Regular.ttf', size=36)
        y_offset = int(height * 0.68)
        draw.text((60, y_offset), product['name'], font=font_title, fill='white')
        draw.text((60, y_offset + 70), f"{product['price']:,.0f} ₴", font=font_price, fill='#FFD700')
        logo = Image.open('assets/logo.png').resize((200, 60))
        canvas.paste(logo, (width - 220, 20), mask=logo)
        output = BytesIO()
        canvas.save(output, 'JPEG', quality=90)
        return output.getvalue()

    def _load_image(self, url: str) -> Image.Image:
        resp = httpx.get(url, timeout=15)
        return Image.open(BytesIO(resp.content)).convert('RGBA')

Чому шаблонна генерація вигідніша за AI для масового контенту?

Шаблонний підхід перевершує AI-генерацію у швидкості та передбачуваності: він у 10 разів швидший і не потребує витрат на GPU. Якщо потрібна унікальна графіка для кожного товару (наприклад, для преміум-бренду), ми підключаємо Stable Diffusion через Replicate API. Генерується фон під категорію товару, потім накладається текст. Це дорожче, але дає варіативність.

import replicate

def generate_ai_background(product_name: str, category: str) -> str:
    output = replicate.run(
        "stability-ai/stable-diffusion:db21e45d3f7023abc2a46ee38a23973f6dce16bb082a930b0c49861f96d1e5bf",
        input={
            "prompt": f"minimalist product photography background for {category}, clean white studio, soft shadows, high-end commercial photo",
            "negative_prompt": "text, watermark, ugly, blurry",
            "width": 1080,
            "height": 1080,
        }
    )
    return output[0]

Які формати та розміри підтримуються?

Заздалегідь налаштовуємо всі популярні формати. Система видає готові файли одним пакетом.

Порівняння підходів: шаблонний vs AI

Як уникнути типових помилок при автоматизації?

• Некоректне обрізання тексту: якщо назва товару довша за 200 символів, текст може вилізти за межі. Рішення — налаштувати автоматичний перенос і зменшення кеглю.
• Ігнорування форматів: для кожної соцмережі потрібні свої пропорції. Універсальний розмір 1080×1080 підходить не всім — для Telegram прев'ю потрібно 1280×640.
• Відсутність fallback-зображень: якщо у товару немає фото, генератор повинен використовувати заглушку з брендованим фоном, інакше банер буде порожнім.

Що входить у роботу

Генератор зображень під ключ: вихідний код, інструкція з налаштування шаблонів, доступ до репозиторію, 1 місяць підтримки. Додатково передаємо набір готових шаблонів під типові категорії товарів та інструкцію з їхнього розширення. Pillow documentation recommends using ImageFont.truetype for consistent text rendering across platforms. Інтеграція з будь-якою CMS (WordPress, Laravel, Django). Оцінимо проект за 1 день.

Як інтегрувати генератор із сайтом?

1. Аналітика — вивчаємо вашу CMS, типи товарів, поточну графіку.
2. Дизайн шаблонів — створюємо макети під брендбук (3–5 варіантів).
3. Розробка генератора — пишемо код із використанням Pillow, налаштовуємо API.
4. Інтеграція — підключаємо до вашого сайту або адмінки.
5. Тестування — перевіряємо на 50+ товарах, коригуємо.
6. Деплой та документація — передаємо доступ, інструкцію з додавання шаблонів.

Строки

Базовий генератор на шаблонах із 3 форматами — від 4 до 6 робочих днів. З AI-генерацією фону — від 7 до 9 днів. За наявності готового брендбуку та набору шрифтів строки скорочуються на 1–2 дні. Якщо брендбуку немає — розробимо шаблони на основі вашого сайту або заданої кольорової схеми. Точну оцінку дамо після аналізу ваших товарів та вимог до форматів.

Економія часу при автоматизації становить до 20 годин на тиждень, що при середній ставці дизайнера дає економію бюджету до 120 000 грн на місяць. Вкладення окупаються за 2–3 місяці. Гарантуємо: досвід розробки понад 10 років, понад 50 успішних проектів з автоматизації контенту. Зв'яжіться з нами для консультації та прикладів генерації для вашої ніші. Замовте автоматизацію контенту — скоротите час на публікацію в 10 разів.

Інтеграція AI у веб-додатки: чат-боти, RAG, семантичний пошук

У 8 з 10 проектів «AI-чат-бот» виявляється дорогою обгорткою над GPT-4o з системним промптом. Без доступу до реальних даних компанії. Користувач питає «скільки коштує тариф Преміум» — бот галюцинує ціну з повітря. Питає «коли прийде замовлення» — отримує ввічливе «напишіть у підтримку». Це не інтеграція AI у веб-додатки — це імітація. Ми за 5 років впровадили RAG-рішення в 30+ проектах: від інтернет-магазинів до медичних порталів. Гарантуємо: корисна AI-допомога починається там, де модель читає ваші документи, а не загальні відповіді. Закажіть консультацію, щоб отримати план інтеграції для вашого проекту.

Побудова RAG-систем: чанкінг, ембедінги, векторна БД

Retrieval-Augmented Generation — стандартна архітектура: запит → пошук релевантних фрагментів у векторній БД → вставка знайденого в контекст → відповідь моделі. Але диявол у деталях реалізації.

Чанкінг. Різати документ на шматки по 500 токенів без огляду на структуру — гарантія втрати сенсу. Якщо розріз припав на середину абзацу, контекст розривається. Рішення — рекурсивний RecursiveCharacterTextSplitter з overlap 10–15% для документації. Для контрактів та інструкцій використовуємо семантичний спліттер: виділяємо заголовки, списки, блоки коду — кожен розділ стає незалежним чанком. Результат: на медичному проекті precision зріс з 0.55 до 0.84 лише завдяки правильному нарізанню, скорочення витрат на підтримку на 40% заощадило 80 000 грн на місяць.

Модель ембедингів. Для україномовних текстів intfloat/multilingual-e5-large дає помітний приріст точності проти застарілої text-embedding-ada-002. Наші виміри: NDCG@10 на 12% вищий. text-embedding-3-large хороший для англомовного контенту, але для української рекомендуємо BAAI/bge-m3.

Векторна БД. Якщо вже стоїть PostgreSQL — pgvector заощаджує ресурси. Ставимо розширення CREATE EXTENSION vector, додаємо колонку vector(1024), створюємо HNSW-індекс. На проекті з 80 000 статей p95 пошуку — 12 мс. Для каталогів з мільйонами одиниць — Qdrant або Weaviate: нативний гібридний пошук і шардування «з коробки».

Кроки реалізації RAG:

1. Збір та структурування даних (очищення, метадані).
2. Вибір моделі ембедингів (multilingual-e5-large або bge-m3).
3. Створення чанків (семантичний спліт із 10–15% overlap).
4. Індексація в pgvector (або Qdrant).
5. Інтеграція пошуку (гібрид BM25 + векторний через RRF) та реранкінг.

Що дає гібридний пошук?

Лише векторний пошук сліпий до точних збігів: артикули «ABC-123», власні назви, абревіатури губляться. Лише повнотекстовий не вловлює синоніми та перефразування. Комбінація через RRF (Reciprocal Rank Fusion) дає краще з двох світів: BM25 + векторний пошук, результати змішуються. На практиці recall@20 зростає з 0.65 до 0.92 — на 30% вищий за чисто векторний. Реранкінг через cross-encoder cross-encoder/ms-marco-MiniLM-L-6-v2 додає 50–100 мс до відповіді, але relevance піднімає ще на 5–10%.

Як реалізувати семантичний пошук у веб-додатку?

Пошук «зручні шкіряні крісла» має знаходити товари з описом «м'які стільці з натуральної шкіри» — звичайний LIKE-пошук не здатний. Архітектура: при додаванні товару/посту автоматично генеруємо ембединг через multilingual-e5-large, зберігаємо в pgvector. На запиті — ембедимо його тією ж моделлю, шукаємо найближчих сусідів через cosine distance з HNSW-індексом. Середній час пошуку — 20 мс.

Рекомендаційні системи: коли потрібна гібридна модель?

Колаборативна фільтрація («користувачі, схожі на вас, купували X») вимагає історії — мінімум 2–3 місяці даних із 1000+ активних користувачів. Для стартапів або малих проектів використовуємо content-based: ембединг поточного товару → пошук найближчих сусідів. Коли накопичується статистика (15–20 взаємодій на користувача), переключаємося на LightFM. Вона об'єднує поведінку та ознаки товарів. У e-commerce проекті з 50 000 SKU гібридна модель підвищила конверсію в рекомендаційний блок на 18% (A/B‑тест 2 тижні, що додатково принесло 250 000 грн прибутку за місяць).

Стрімінг відповідей через SSE

Користувач не зобов'язаний чекати, поки модель згенерує весь текст — це вбиває UX. Server-Sent Events (SSE) — протокол для стрімінгу токенів. OpenAI SDK підтримує stream: true, повертаючи AsyncIterator. На фронтенді — Vercel AI SDK (useChat) або самописний EventSource. Типова помилка: використовувати WebSocket для односпрямованого стріму — SSE простіше (менше коду, вбудований реконнект). Стек: Node.js + SSE + React.

Оркестрація агентів

Простий чат-бот відповідає. Агент — виконує дії: створює тікет у Jira, перевіряє статус замовлення в CRM, бронює слот у календарі. Для оркестрації використовуємо LangGraph: граф станів, кожен вузол — виклик моделі або інструменту. Vercel AI SDK дозволяє додати інтеграцію в 10 рядків коду. Головна складність — надійність: модель іноді викликає не той інструмент або передає криві параметри. Захист — Zod-схеми на кожен інструмент і structured outputs для гарантії JSON.

Процес роботи

Додатково: передаємо вихідний код векторизатора, дашборди моніторингу (Langfuse), доступ до адмінки для оновлення бази знань. Постпродакшн-підтримка — 1 місяць безкоштовно.

Терміни

Вартість розраховується індивідуально після знайомства з проектом. Оцінимо ваш проект за 1 день. Зв'яжіться з нами — розкажемо, як перетворити AI з іграшки на інструмент, що приносить прибуток. Закажіть консультацію, щоб дізнатись, як інтегрувати AI у ваш веб-додаток.