Як генеративний ШІ змінив нашу розробку вебзастосунків

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

Привіт! Ми — Юра та Назарій, фулстек-девелопери в TechMagic. Ми активно використовуємо GenAI у своїй роботі й хочемо поділитися реальними кейсами, де ШІ допоміг пришвидшити розробку, покращити якість продукту та вирішити складні завдання. Незалежно від вашого досвіду з ШІ, наші інсайти можуть стати у пригоді для інтеграції GenAI у ваші проєкти.

Наш досвід з ШІ починався з певного скептицизму. Коли вийшла перша публічна версія чату GPT, дані були застарілі, і здавалося, що його складно застосувати для чогось серйозного. Це більше виглядало як розвага, щоб показати прогрес, але не як щось, що реально допоможе у роботі.

Наприкінці 2022 року, після активного використання GitHub Copilot та ChatGPT у роботі, ми зрозуміли, що генеративний ШІ — це не просто черговий модний тренд, а реальний інструмент, який може суттєво підвищити ефективність і продуктивність. Це стало поштовхом до активної інтеграції ШІ у наші проєкти, щоб не тільки залишатися на плаву, але й вивести роботу на новий рівень.

Впровадження генеративного ШІ для автоматизації створення контенту та економії витрат

Ми почали імплементацію генеративного ШІ у нашому проєкті зі створення банального AI-плагіну для текстового редактора CKEditor (WYSIWYG Editor), який комунікував із тоді ще ChatGPT 3.0. Принцип був простий — виділяємо текст у редакторі й прописуємо текстом, що ми хочемо із ним зробити — перефразувати, підсумувати, виправити помилки тощо. Також була реалізована можливість задання промпту прямо в едіторі. Загалом нічого особливого — звичайна інтеграція текстової моделі в продукт, який працює з контентом.

Наступним кроком було створення картинок на основі промптів та контенту. Спочатку була ідея спробувати DALL-E 3. Його основною перевагою була відносно велика швидкість, наявність API та входження в екосистему OpenAI, яку ми вже використовували для текстової генерації. Проте реалістичність цієї моделі залишала бажати кращого і ми продовжили пошуки, та врешті зупинились на варіанті Midjourney. Це рішення було вдале, тому що реалістичність картинок була на висоті.

Його великим недоліком на той момент була відсутність офіційної API. Вся взаємодія з цією моделлю відбувалась у Discord, тому доводилось це «обходити» через Discord API. Що після серйозного абузу привело нас до повного блокування.

В результаті довелось швидко шукати якусь альтернативу. Під наші задачі не було на той момент ідеального варіанту, і ми вирішили створити власну модель, яка б навчалась на основі Stable Diffusion. Це був не швидкий процес, але вже за декілька тижнів ми змогли покращити багато проблемних аспектів згенерованої картинки. Хоч форму людської руки нам ще деякий час не вдавалось довести до реалістичного рівня. Один з ранніх прикладів:

Були й інші проблеми, як-от шум, однакові обличчя у двох різних людей, зниження якості згенерованої картинки та багато іншого. Та в результаті достатнього реалізму картинки для наших завдань було досягнуто.

Наразі ці два напрями (текст та картинки) є основними, де ми використовуємо інструменти генеративного ШІ. Разом з тим нам вдалося поєднати їх й створити окремий продукт, який повністю автоматизовано створює новини на основі тих, які викладає у вільний доступ Google.

Суть цього продукту така: свіжа новина переписується у потрібній нам стилістиці (це можна задати через UI, спектр налаштувань досить широкий), після чого контент використовується для генерації картинки (featured image) і публікується у потрібних нам місцях (власний CMS-продукт чи WordPress). Таким чином бізнес заощадив від $20 до $100 на кожній новинній статті — раніше це робили копірайтери. Звісно, іноді виникають проблеми з якістю наповнення для деяких згенерованих постів, проте процес покращення output ШІ — це безперервна робота.

Покращення Image Model на прикладі однакового промпту

Промпт: A dramatic, close-up image of Antoine Griezmann, prominent French football forward, engaging in an aggressive play during a match, donning the Atletico Madrid jersey. Showcasing his focus and skill at the game. The celebrating, blurred crowd at a vast, flood-lit stadium serves as the background, adding an atmospheric layer while ensuring the emphasis remains on Griezmann. The image exhibits a photographic, detail-oriented style capturing Griezmann’s grit and versatility, symbolic of his significant contribution to football amidst the controversy. —no text:: logos —relax —aspect 7:4

Результат «до»

Казуальність та сумнівна реалістичність, як у прикладі з ногами:

Результат «після»

Краща реалістичність, хоч і є ще над чим працювати:

Оптимізація процесу заповнення покрокової форми за допомогою ШІ

На одному із підпроєктів ми інтегрували ШІ-інструмент для маркетингових досліджень, який допомагає визначити оптимальну ціну на певний продукт чи сервіс через короткі опитування потенційних покупців. Один з ключових його компонентів — багатокрокова форма для створення опитувальника, де користувачі надають інформацію про свій продукт і формують питання та варіанти відповіді.

З часом форма збільшилась до 15 кроків. Користувачі все частіше просили допомоги через їх велику кількість, адже це завдання стало займати 15-20 хвилин.

Першою ідеєю швидкого фіксу було задати дефолтні значення у варіантах відповідей, але це не розв’язувало проблему повністю, бо дефолтні значення могли не підходити під всі кейси. Тому вирішили спробувати ШІ, який з потрібним контекстом розуміє, що від нього хочуть. Для нашого завдання ми обрали GPT-3.5 Turbo — оптимальну модель за ціною та продуктивністю.

Під час інтеграції постало питання — як парсити відповідь моделі, оскільки при дефолтних налаштуваннях вона повертає звичайний текст (за принципом звичайного чату GPT). Проте формат відповіді можна змінити на JSON (response_format: { type: ‘json_object’ }), що значно спрощує обробку.

Та об’єкт був рандомним, і важко було передбачити, як саме отримати доступ до необхідних даних. Стабільності у будові респонсу можна досягти за допомогою чітких вказівок у промпті. Наприклад, об’єкт, який передається під час запиту, має таку форму: { question1: { title: «Текст запитання», options: []} }. Масив options є порожнім, саме в нього ми будемо просити пушити варіанти відповідей. Це дає прогнозований формат відповіді, який не вимагає обробки та готовий до подальшої передачі на клієнта для заповнення форми.

Також можна вказати певні обмеження при генерації відповіді, наприклад — згенерувати від двох до чотирьох опцій, створити список слів, які не можна використовувати тощо. В цьому кейсі інтеграція з ШІ дозволила не тільки автоматизовано отримувати кастомні варіанти відповідей для опитувальника, а й скоротити мінімальну кількість даних, які вводить юзер.

Отже, це дало змогу скоротити кількість кроків у формі з 15 до шести й вплинуло на час, який юзер приділяє заповненню форми — він скоротився у чотири рази! З 15-20 до п’яти хвилин.

А ще GPT вдало генерує варіанти відповідей, які можна легко змінити, якщо вони не підходять. Клієнти та користувачі були дуже задоволені.

Автоматизований скрейпінг сайтів з використанням ШІ

Коли в нас вже був досвід використання ШІ, зʼявився запит на нову фічу — аналіз цін конкурентів за допомогою скрейпінгу їх сайтів. Процес скрейпінгу досить простий — треба отримати HTML-документ і витягнути текст з елементів за допомогою CSS-селекторів. Але щоб це працювало на майже будь-якому сайті, потрібно зрозуміти, який саме елемент сторінки містить ціну, і створити потрібний селектор.

Тут на допомогу прийшов наш друг — GPT. Секрет успіху інтеграції ШІ — правильно згенерований промпт. При генерації промпту потрібно поставити завдання знайти елемент з ціною в наданому HTML-документі й збудувати повний CSS-селектор. Цей селектор можна зберегти для подальшого регулярного скрейпінгу сайтів.

Однією з метрик, за якою GPT трекає використання моделей, є кількість токенів у промпті (1 prompt token ~= 4 букви англійською мовою). Оскільки сорс-код сторінки сайту зазвичай великий, для оптимізації витрат треба зменшити його розмір.

Це можна зробити двома способами: видаленням зайвих тегів (iframe, img, video, header, footer, input, script тощо — список можна розширювати за потреби) та зайвих атрибутів елементів (усіх, крім важливих для побудови CSS-селектора — id, class).

Це дозволило скоротити розмір HTML-коду в десятки разів — з 400-500 тисяч до 15-20 тисяч символів, що є чудовим результатом. Тестувалось це на прикладі одного з найпопулярніших українських маркетплейсів.

Генерація діаграм та розв’язання проблеми довгої відповіді від ШІ

У одній із частин проєкту при імплементації ШІ ми стикнулись з проблемою довгого очікування відповіді від ChatGPT. Це була тулза для побудови process diagram, в якій нам було потрібно автоматизувати створення шаблонів для користувачів, що дозволило б суттєво розвантажити один із найскладніших етапів роботи.

Часто юзерам буває складно розпочати роботу з діаграмами, бо вони не завжди знають, з чого почати і які дані вводити першими. Ми вирішили, що ШІ може з цим допомогти. Користувач вводить назву процесу, короткий опис і своє бачення, а ШІ формує шаблон, який підходить під його потреби. Це значно спрощує старт і дозволяє зосередитися на деталях, вносити корективи та вдосконалювати шаблон.

Щоб зробити процес менш помітним для користувача, ми продумали UX: розбили запити на частини, виконували процеси у фоновому режимі й додали просту візуалізацію, яка крок за кроком показувала побудову шаблону. Це зробило очікування майже непомітним і суттєво покращило взаємодію з нашим продуктом.

Наступні кроки

Фічі, які наразів нас реалізуються і стосуються ШІ — шукач посилань на внутрішні ресурси у згенерованому тексті та генерація summary-type відеороликів. Також на фінальному етапі заміна Google Translate на ChatGPT-4о функціонал, що за прогнозами має зменшити витрати для транслейшинів мінімум у декілька разів.

Були ідеї створення власного асистента з інтеграцією із Zapier для пришвидшення роботи менеджмент-департаменту. Проте поки що ми не впевнені, чи таке покращення може нести в собі відчутну цінність.

Є також ідея спробувати перейти в майбутньому на fine-tuning модель для покриття більшої кількості едж-кейсів, оскільки це потребує більше даних для навчання моделі.

Також невдовзі початок роботи на новому підпроєкті з використанням генеративних React-компонентів. Маємо надію, що цей інструмент відчутно пришвидшить написання фронтенду.

Висновок

Досвід інтеграції генеративного ШІ в наші проєкти показав, що ця технологія значно підвищує ефективність і зручність роботи. Вона допомогла автоматизувати рутинні завдання, скоротити час розробки та зменшити витрати. У наших проєктах ШІ став ключовим інструментом для оптимізації процесів і покращення взаємодії з продуктом.

Насправді інтеграція з ШІ не така страшна, як здавалося на початку — це ще один API, який легко під’єднати. Потрібен лише API-ключ і трохи часу на ознайомлення з документацією. Головне — визначитись, яке саме завдання делегувати ШІ, вибрати оптимальну модель для поставленого завдання та правильно сформулювати промпт, щоб модель зрозуміла, що їй треба робити.

Проте інтеграція та комбінування ШІ-інструментів вимагає креативності для вирішення нових викликів, як-то час респонсу чи калібрування промпту. Виявилося, що ШІ може не лише допомогти з дебагом коду, але й робити щось корисне — автоматизовувати етапи в роботі аплікухи, які раніше вимагали втручання людини.

P.S. Не забудьте подякувати GPT за виконану роботу :)