Не тільки текст: як я змусив LLM верстати слайди у власному ШІ-генераторі презентацій

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Привіт! Мене звати Данило, я соло-розробник. Сьогодні хочу розповісти про свій пет-проєкт Kovza AI (kovza.lovable.app) — інструмент, який за допомогою штучного інтелекту не просто пише текст, а генерує повноцінні презентації, які можна редагувати прямо в браузері та експортувати.

У статті розповім, як я розробляв складний WYSIWYG-редактор слайдів на React та як навчив LLM віддавати структуровані дані для рендеру візуальних елементів замість звичайного простирадла тексту.

Ідея: Чому ChatGPT недостатньо?

Коли нам потрібно швидко накидати презентацію, ми часто йдемо до ШІ. Але звичайний ChatGPT віддає просто маркдаун-текст. Тобі все одно доводиться відкривати PowerPoint чи Google Slides, копіювати туди текст, шукати картинки, вирівнювати блоки та налаштовувати анімації. Це забирає купу часу.

Я вирішив створити платформу, якій достатньо дати тему, а вона натомість видасть готовий набір слайдів із картинками, структурою та базовим дизайном. А головне — з можливістю одразу все це відредагувати та завантажити.

Фронтенд: Створення редактора (майже свій PowerPoint)

Найбільшим викликом була не інтеграція ШІ, а саме створення зручного UI для редагування слайдів. Фронтенд я побудував на React, Vite, Tailwind CSS та компонентах shadcn/ui.

Для того, щоб користувач міг взаємодіяти зі слайдами, я розробив систему кастомних компонентів:

• SlideRenderer: Відповідає за відображення слайда в робочій області.
• DraggableObject: Обгортка, що дозволяє вільно перетягувати елементи (текст, зображення) по полотну слайда.
• PropertiesPanel: Бічна панель для тонкого налаштування властивостей виділеного об’єкта (шрифти, кольори, розміри).
• AnimationsPanel: Окремий модуль для додавання та налаштування анімацій на елементах.

Вся структура слайдів, текстових блоків та медіа жорстко типізована через інтерфейси (наприклад, у types/slide.ts). Це дозволяє легко серіалізувати презентацію для збереження в базу або експорту.

Бекенд та ШІ: Edge Functions у Supabase

Щоб не піднімати окремий Node.js сервер, усю бекенд-логіку та роботу з API нейромереж я виніс у Supabase Edge Functions.

Процес генерації розділений на дві незалежні функції:

1. generate-presentation: Отримує промпт від користувача і звертається до LLM. Головна магія тут — у системному промпті, який змушує нейромережу повертати не просто текст, а суворий JSON, що повністю відповідає моїм TypeScript-інтерфейсам слайдів.
2. generate-image: Окрема функція, яка відповідає за генерацію візуального контенту для слайдів. Якщо ШІ вирішує, що на слайді потрібна картинка, він формує для неї промпт, а ця функція (через інтеграцію з API для генерації зображень) повертає готовий малюнок. Обробка зображень на стороні клієнта налаштована через утиліту lib/slideImage.ts.

Експорт у PDF та режим презентації

Після того як користувач закінчив редагування, він може запустити показ слайдів на весь екран через окремий компонент Present.tsx.

Крім того, я додав фічу — експорт готової презентації у PDF. Логіку для цього я виніс у файл lib/exportPdf.ts. Це дозволяє користувачам не лише створювати слайди, але й забирати їх із собою для офлайн-показів або друку, що робить Kovza AI повноцінним інструментом, а не просто іграшкою.

Що далі

Проєкт Kovza AI (лінк на додаток — kovza.lovable.app) виявився чудовим майданчиком для прокачування навичок роботи зі складним станом у React та D&D (Drag and Drop) інтерфейсами.

У майбутньому планую розширити набір доступних шаблонів і додати ще більше складних анімацій (базова логіка для яких вже працює в lib/animations.ts).

Буду радий фідбеку від спільноти! Цікаво дізнатися, чи стикалися ви зі створенням WYSIWYG-редакторів у вебі та які підходи для експорту складних React-компонентів у PDF використовували ви?