Тизер за кілька хвилин: алгоритм налаштування Telegram-бота

Готовий тизер за кілька хвилин. Як отримати картинки від ШІ в Telegram — алгоритм налаштування бота від «Місцевих медіа»

Четвер, 4 Липня, 2024

Кейси й рішення, Продукт

Захарченко Віктор

Віктор Захарченко, співзасновник мережі гіперлокальних видань «Місцеві медіа», розповідає про досвід автоматизації рутинного процесу створення тизерів до публікацій. Про використання штучного інтелекту, пошук найкращого результату та що робити, коли «все пропало» — читайте в нашому матеріалі. Наприкінці — детальна інструкція про створення бота для власних потреб.

Ми віримо в те, що аудіовізуальний контент — надзвичайно важлива складова публікацій у час, коли над медіа домінує «економіка уваги». Видавець просто вимушений користуватися кожною можливістю потрапити у фокус до читача.

Тому кожен матеріал у «Місцевих медіа» ми супроводжуємо графічними ілюстраціями. Перевага надається оригінальним фото — нашим чи взятим із першоджерела. У випадку, коли таких немає, ми додаємо класичні тизери. У нашому розумінні це стандартизовані графічні ілюстрації з текстовим написом, що привертають увагу до новини. Саме для створення тизерів ми й розробили інструмент, про який зараз розповімо.

Спершу ми розберемо, як це все працює, а далі покажемо, як ви можете зібрати такого бота для своєї редакції.

Як це працювало раніше: караюсь, мучусь, але продовжую збирати тизери

Ще на початку року створення тизерів включало такі три кроки:

  1. Випусковий редактор (у нас немає окремого більд-редактора, але ми думаємо про це) підбирає зображення, що контекстно підходить під інформацію із новини.
  2. Далі він генерує (придумує) супроводжувальний текст, який має зберігати контекст, але не дублювати заголовок.
  3. Наприкінці — «збирає» це все в тизер.

Для третього кроку ми історично використовували безплатний сервіс від buffer під назвою pablo.

Тут простий, але місткісний функціонал. Можливо, вам вистачить і його в роботі без вигадування автоматизації. Але ми вважаємо себе «розумними й лінивими», тому створили бота, який економить час редактору.

Гайда, боти, до роботи. Бот для генерації готових тизерів від «Місцевих медіа»

Є кілька причин, чому ми зробили цього Telegram-бота

  1. Економія часу випусковим редакторам. Підтвердилася вже в перший день. Тизери випікаються як млинці. Хоча інколи випи (так ми називаємо випускових) надто захоплюються генеруванням зображення — такі вже гарні вони виходять. Але то побічний ефект.
  2. Єдина стилізація. У першій версії ми перенесли стилі з buffer (між текстом і зображенням є напівпрозорий шар), щоб наслідувати оформлення попередніх тизерів. Ми за мінімалізм, тому готуємо нову версію стилів.
  3. «Всеїдність» до розмірів зображень: не треба шукати зображення спеціальних розмірів чи щось обрізати.

Хочеться додати ще одну причину — «бо могли» 🙂

Як це працює зараз

Нагадаю, що тизер — це зображення + текст на ньому + напівпрозорий білий шар (такий от елемент стилізації). Типовий тизер виглядає так:

«Чи хочу я зробити тизер з готовим фото?» — це перше питання, з якого все починається. Такі тизери ми робимо, коли є фотографії, важливі для контексту. Водночас ми можемо перекривати його текстом. Наприклад, ось такий варіант:

Як його зробити в боті?

  1. Додаємо файл зображення (бот сам відцентрує й розтягне його, якщо треба).
  2. Додаємо фразу (тут і далі я так буду називати текст, написаний на тизері).
  3. Відправляємо.
2. Додаємо фразу.

Приблизно за 10 секунд бот повертає готовий тизер.

Формуємо запит до бота

Якщо «вип» не хоче робити тизер із готовим фото, то переходимо до наступного питання: «Я хочу взяти згенероване штучним інтелектом зображення чи реально фото?». Частіше обираємо першу опцію, друга — для випадків, коли в ШІ починаються галюцинації або він просто не працює.

Найпопулярніший сценарій — швидка генерація готового тизера із зображенням, що створив ШІ. Як його зробити в боті? Відправляємо текстову команду:

!ф ((лицар верхи на коні)) Ой чий то кінь?

У ній важливі всі три складові:

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

Якщо не сподобався результат, є кнопка «Згенерувати знову». ШІ створить нове зображення й накладе ту ж фразу. Чим краще «вип» описав зображення у примусовій команді, тим кращий буде результат.


Поради з нашої інструкції для «випів»:

Приклади:

Інколи бот видає помилку і не повертає тизер. Імовірність цього зростає, коли «вип» генеруєте тизер на чутливі теми: злочинність, убивство, війна, смерть тощо. Штучний інтелект просто «відмовляється» генерувати такі зображення з першого разу. Є два способи розв’язання проблеми.

Спосіб 1

Згенерувати зображення й тільки потім перетворити його на тизер. Відправляємо текстову команду:

!і ((лицар верхи на коні)) Ой чий то кінь?

Усе те ж саме, що й у випадку зі швидкою генерацією, тільки команда змінилася з «!ф» на «!і» (і — ілюстрація).

Після того, як зображення згенероване, у вас є дві опції:

  1. Згенерувати знову. Обираємо тоді, коли зображення не сподобалось
  2. Згенерувати тизер. Коли зображення сподобалось і його можна загортати в тизер із фразою (а «вип» її вже задав вище в самій команді).

Обираємо «Згенерувати тизер».

Ми розклали процес на два етапи. Це довше, але боту легше з таким упоратись.

Спосіб 2

Знайти тематичне фото та зробити на його основі тизер. Відправляємо текстову команду:

!ш ((лицар, кінь)) Ой чий то кінь?

Бот іде на безплатний фотосток Unsplash і шукає там за ключовими словами потрібне зображення.

Якщо не задавати ключові слова чи описи — бот буде під час пошуку або створення інтерпретувати фразу самостійно. Зростає ймовірність помилок.

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


Більше корисних інструкцій і кейсів від медіамейкерів двічі на тиждень надсилаємо підписникам нашої розсилки. Приєднуйтеся!


Що робити, якщо бот зламався?

Не повірите, але таке теж буває. Бо автоматизація звучить сучасно, але часом щось десь відвалюється. Про технологічний стек (спосіб збереження даних у програмуванні, — ред.) розповідаємо далі.

Ми спеціально зібрали бота із готових компонентів, з якими можна працювати у звичному режимі.

Що в бота «під капотом»

У цей момент до мене долучається Олександр Маслаков — мій співавтор і людина, що забезпечує технічну складову роботи бота.

Аби зробити бот функціональним, ми використовуємо такі сервіси:

Як це все зібрати в бота

Далі буде нудний текст про те, як же собі отримати такого бота.

  1. Зареєструватися в Zapier.
  2. Створити бота в Telegram.
  3. Створити Flow.
  4. Додати тригер «Повідомлення в Telegram».
  5. Додати дію «Код», наповнити кодом «основний додаток».
  6. Опублікувати Flow.
  7. Перевірити використання.

Реєструємо акаунт у Zapier за покликанням. Він знадобиться нам надалі. Це найкращий інструмент побудови автоматизацій за співвідношенням функціональність-доступність. На жаль, ціни трохи ростуть.

Створюємо бот у Telegram через спеціального бота. Там необхідно ввести команди, які наведено у скриншоті нижче. Звідси нам потрібен API-ключ до Telegram-бота. Він знадобиться нам у наступних кроках.

Далі створюємо акаунт на Placid.app і новий проєкт із вибором інтеграції «API». Після цього створюємо новий темплейт і вибираємо Custom.

У редакторі темплейту створюємо шар, на якому розташуємо зображення, потім шар-затемнення білого кольору із прозорістю 50 %. Останнім шаром зверху буде текстовий напис — оберіть підхожий розмір тексту та шрифт. Нагадуємо, це ми описали наш тизер, тож у вас стилістика може бути іншою. Зібрати «шаблон» доволі просто. Після цього ви отримаєте темплейт, як на другому зображенні.

Після натискання INTEGRATE вам стане доступними API-ключ для ID темплейту:

Запамʼятаємо API-ключ Placid.app та ID-темплейту. Вони знадобляться нам у наступних кроках. Далі нам потрібно зареєструватися в Unsplash за покликанням. Переходимо до списку застосунків розробника та створюємо новий застосунок натисканням кнопки New Application. Після створення додатка Unsplash отримуємо API-ключ і запам’ятаємо його — він знадобиться нам у наступних кроках.

Реєструємося та отримуємо ключ до OpenAI за покликанням. Після цього переходимо в розділ, де є API-ключі, та створюємо новий API-ключ натисканням кнопки Create new secret key:

У вікні вказуємо назву ключа й залишаємо налаштування за замовчуванням. Після цього отримуємо й десь записуємо OpenAI API-ключ — він знадобиться далі.

Зазначу, що для генерації зображень нам потрібно мати якісь кошти на рахунку в OpenAI.

Після того, як ми розібралися зі всіма потрібними сервісами, повертаємося до Zapier і створюємо новий Zap:

Як тригер або дію, що запускає наш Zap, обираємо Webhook by Zapier. Як Event обираємо Catch Raw Hook. Далі потрібно перейти в табу Test й отримати URL вебхука (вебхук — це код, який налаштовує зв’язок між двома сайтами чи сервісами й дає змогу передавати між ними інформацію про оновлення в режимі реального часу, — ред.).

Тепер треба звʼязати вебхук із Telegram, щоб він почав отримувати дані від бота. Для цього потрібно створити спеціальний URL:

<https://api.telegram.org/bot{TELEGRAM_API_KEY}/setWebhook?url={WEBHOOK_URL}>

Перед тим як вставити цей URL у браузер, потрібно замінити {TELEGRAM_API_KEY} на API-ключ до Telegram-бота, а {WEBHOOK_URL} замінити на URL вебхука, який вказано на попередньому зображенні.Далі треба вставити цей URL у браузер і натиснути Enter. Якщо все добре, у відповідь ви отримаєте такий текст:

Коли ми встановили хук, то можемо перейти в Telegram-бота, розпочати роботу й відправити кілька текстових повідомлень.

Повертаємося в Zap до вкладки Test і натискаємо на кнопку Test. Мають прийти повідомлення, які раніше відправляли в бота. Після цього переходимо до Action. Як дію обираємо Code by Zapier, а як Event — Run Javascript.

Переходимо до вкладки Action, де вводитимемо змінні й код:

Далі повністю видаляємо код із поля Code й замінюємо на код, доступний за покликанням. Ми спеціально кладемо код у відкритий доступ, щоб ви могли ним скористатися. Якщо сумніваєтесь у питаннях безпеки — попросіть подивитися на код спеціаліста. Запевняємо, що ми не закладали туди жодного доступу до ваших ключів для себе.

Після цього нам стануть у пригоді API-ключі від сервісів, які ми вже зареєстрували. Створюємо змінні:

Вам треба мати наступні дані у змінних дії Input Data:

Натискаємо кнопку Publish, що переведе Zap у стан виконання:

На підтвердження публікації першої версії ви отримаєте таке повідомлення:

Тепер перевіримо, що отримали, й подивимося на працездатність бота. Відправляємо повідомлення !h і бачимо, що потрібно дати дозвіл на роботу з цим чатом.

Для цього повертаємося в Zap, обираємо крок Code by Zapier, переходимо до Action і додаємо змінну ALLOWED_CHAT_IDS — сюди додаємо ідентифікатори чатів, з якими має працювати бот, щоб він був закритий від сторонніх користувачів. Ідентифікатор беремо з попереднього повідомлення. Якщо треба додати кілька чатів, то додаємо кілька ID підряд, відділивши комою ID1,ID2. У нас має вийти такий набір змінних в Input Data:

Ще раз публікуємо Zap і відправляємо повідомлення !h у бот й отримуємо довідкове повідомлення зі списком команд. Це означає, що бот працює.

Читайте також: Сам собі технічний спеціаліст: як мережа гіперлокальних медіа автоматизувала пошук новин на пошті, сайтах і в соцмережах громад

Telegram | автоматизація | бот | Місцеві медіа | тизер