AI-генерація alt-текстів для товарних зображень

AI-генерація alt-текстів для товарних зображень

Alt-текст у зображення виконує дві функції: допомагає пошуковику зрозуміти вміст сторінки та робить сайт доступним для незрячих користувачів. У більшості інтернет-магазинів alt-теги або порожні, або містять лише назву файлу на кшталт IMG_4821.jpg. Це втрачений SEO-сигнал і порушення доступності. Згідно з WCAG 2.1, порожній alt-атрибут робить зображення декоративним, а інформативні зображення зобов'язані мати опис. Для каталогу з 10 000 товарів ручне заповнення alt — близько 200 годин роботи копірайтера, що обходиться бізнесу у значну суму.

За наявності тисяч товарних зображень задача вирішується автоматично — або на основі даних про товар, або через мультимодальний аналіз самого зображення. Ми реалізували подібні рішення для 30+ інтернет-магазинів за 5 років, гарантуючи приріст органічного трафіку на 10–25%. Економія бюджету на ручній праці для такого каталогу сягає суттєвих значень. Зв'яжіться з нами для оцінки вашого проєкту.

Які проблеми вирішує генерація alt?

• Ручна праця. Писати alt для 10 000 SKU вручну — тижні роботи. Автоматизація скорочує це до годин, а вартість обробки 1000 зображень через AI мінімальна.
• Однотипні alt. Багато хто генерує alt шаблонно: «Зображення товару» — користі для SEO нуль. Потрібні осмислені, унікальні описи, які підвищують релевантність сторінки.
• Порушення WCAG. Порожній alt робить сайт недоступним для незрячих — це юридичні ризики та втрата аудиторії. Правильний alt-текст для товарів — це не просто опис, а SEO-інструмент.
• Динамічні зображення. Часто alt відсутній у картинок, що підвантажуються через JavaScript (наприклад, вибір кольору товару). Це ще один втрачений SEO-сигнал.

Порівняння підходів

Мультимодальний підхід кращий за метадані в сценаріях, де важливі візуальні деталі: він бачить форму, колір, позу, оточення. При цьому витрати на 50 000 зображень складуть копійки — набагато менше, ніж ручна робота.

Як працює генерація alt?

Підхід 1: за метаданими

function buildAltFromMetadata(
  product: Product,
  imageIndex: number,
  imageType: "main" | "detail" | "lifestyle"
): string {
  const base = `${product.brand} ${product.name}`;

  if (imageType === "main") {
    return `${base} — фото ${imageIndex + 1}`;
  }

  if (imageType === "detail") {
    const feature = product.attributes.detailFeatures?.[imageIndex] ?? "деталь";
    return `${base}: ${feature}`;
  }

  return `${base} в использовании`;
}

Простий, детермінований варіант. Не потребує API-викликів, працює миттєво при імпорті товарів.

Підхід 2: мультимодальний (GPT-4o Vision)

import { openai } from "../lib/openai";

async function generateAltFromImage(
  imageUrl: string,
  product: Product
): Promise<string> {
  const response = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [
      {
        role: "user",
        content: [
          {
            type: "image_url",
            image_url: { url: imageUrl, detail: "low" }, // low — дешевше, достатньо для alt
          },
          {
            type: "text",
            text: `Write a concise alt text for this product image in Ukrainian.
Product: ${product.name}, brand: ${product.brand}, category: ${product.category}.
Rules:
- 60–120 characters
- Describe what is visible in the image, not the product in general
- Start with product name only if it's clearly identifiable in the photo
- No "фото", "зображення", "картинка" at the start
- No markdown, just plain text`,
          },
        ],
      },
    ],
    max_tokens: 80,
    temperature: 0.3,
  });

  return response.choices[0].message.content?.trim() ?? "";
}

detail: "low" знижує вартість з ~значної до ~мізерної за зображення — достатньо для генерації alt, не потрібен високий дозвіл.

Пакетна обробка зображень

import { Queue, Worker } from "bullmq";

const altQueue = new Queue("alt-generation");

export async function queueImagesForAltGeneration(
  productIds: string[]
) {
  const products = await db.products.findMany({
    where: { id: { in: productIds } },
    include: { images: true },
  });

  const jobs = products.flatMap((product) =>
    product.images
      .filter((img) => !img.altText || img.altText === "")
      .map((img) => ({
        name: "generate-alt",
        data: { imageId: img.id, productId: product.id, imageUrl: img.url },
      }))
  );

  await altQueue.addBulk(jobs);
}

const altWorker = new Worker(
  "alt-generation",
  async (job) => {
    const { imageId, productId, imageUrl } = job.data;
    const product = await db.products.findById(productId);

    // Визначаємо, чи потрібен мультимодальний аналіз
    const useVision = product.imageType === "lifestyle" || product.useVisionForAlt;

    let altText: string;

    if (useVision) {
      altText = await generateAltFromImage(imageUrl, product);
    } else {
      const imageIndex = product.images.findIndex((i: any) => i.id === imageId);
      altText = buildAltFromMetadata(product, imageIndex, "main");
    }

    await db.productImages.update({
      where: { id: imageId },
      data: { altText, altGeneratedAt: new Date() },
    });
  },
  { connection: redisConnection, concurrency: 20 }
);

Як автоматизувати генерацію alt для всього каталогу?

1. Аудит поточного стану — виконайте SQL-запит (див. нижче) та визначте кількість зображень без alt.
2. Оберіть стратегію: метадані для простих фото, мультимодальний аналіз для складних.
3. Розгорніть мікросервіс з чергами BullMQ та інтеграцією з вашою CMS.
4. Налаштуйте моніторинг — відстежуйте кількість оброблених зображень та помилки через Sentry.

Типові помилки alt-текстів

Вбудовування в CMS

Після генерації alt-текст зберігається в таблиці зображень і рендериться в шаблоні. Якщо alt порожній — фолбек на назву товару, але не порожній рядок.

<img
  src="{{ image.url }}"
  alt="{{ image.altText }}"
  loading="lazy"
  width="{{ image.width }}"
  height="{{ image.height }}"
/>

Аудит існуючого каталогу

Перед запуском генерації корисно зрозуміти масштаб проблеми. Виконайте SQL:

SELECT
  COUNT(*) FILTER (WHERE alt_text IS NULL OR alt_text = '') AS missing_alt,
  COUNT(*) FILTER (WHERE alt_text = file_name) AS filename_as_alt,
  COUNT(*) total
FROM product_images;

Це покаже, скільки зображень потребують обробки і дозволить спланувати навантаження на API.

Склад робіт

• Аудит поточного каталогу зображень (SQL-скрипт, дашборд)
• Вибір оптимальної стратегії: метадані, мультимодал або комбінація
• Розробка мікросервісу генерації alt (Node.js, BullMQ)
• Інтеграція з вашою CMS (кастомна доробка або middleware)
• Налаштування черг та моніторингу (Redis, Sentry)
• Документація процесу та навчання команди
• Підтримка протягом місяця після впровадження

Терміни реалізації — під ключ від 3 до 10 днів залежно від кількості зображень та складності інтеграції. Вартість розраховується індивідуально під ваш проєкт. Отримайте консультацію — зв'яжіться з нами.

Висновок

Автоматична генерація alt — це не про економію, а про SEO-потенціал та доступність. Ми реалізували такі рішення для 30+ інтернет-магазинів за 5 років. Зв'яжіться з нами для оцінки вашого проєкту — підберемо підхід та розрахуємо навантаження.

Інтеграція 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 у ваш веб-додаток.