Здоровий глузд

Про дизайн, міста та дизайн у містах, кодінг та автоматизацію

Автоматизація дизайну з ChatGPT. Частина 2: скрипти для InDesign, Figma, Google Docs, Automator

Продовжую експерименти написання простих скриптів з допомогою ChatGPT. Тут перша частина зі скриптами для Adobe Illustrator.

1. Заміна шрифтів у InDesign

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

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

Але для його використання для різних накреслень і шрифтів не вистачало масиву значень на початку та циклу його виконання. Тому я скопіював код і попросив ChatGPT додати мені ці модулі. І за кілька уточнень вийшло робоче рішення.

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

Створення скрипту заміни шрифту в InDesign

Завантажити скрипти:

  • Версія, яка заміняє усі шрифти у всіх фреймах;
  • Версія, яка заміняє шрифт лише у виділеному тексті;
  • Версія, заміняє шрифт або у виділених фреймах, або в усіх;
  • Версія з двома вікнами введення назви старого і нового шрифтів;
  • Версія з одним вікном, в якому можна ввести кілька шрифтів.

1.2. Заміна стилів у InDesign

Окрім зміни шрифтів, попросив придумати скрипт, для заміни одних стилів на інші та ще попросив додати вікно, в якому ці назви можна ввести. Отримав такий скрипт.

Скрипт для InDesign, який заміняє один стиль на інший

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

2. Збереження Google Docs у тій самій теці на Драйві

У мене є потреба періодично зберігати поруч з Гугл Документом також і PDF, який я потім можу відправити. При збереженні через меню документів сам документ у мене завантажується у Downloads, як і решта файлів. Але потім мені потрібно знову завантажувати PDF у ту саму теку на драйв. Не складно, але це витрата часу.

Шукав приклади скриптів, які б могли зберігати PDF у ту саму теку, але робочих не знайшов. І от попросив ChatGPT запропонувати мені такий скрипт. І з першого разу отримав робочий варіант:

function onOpen() {
  var ui = DocumentApp.getUi();
  ui.createAddonMenu()
      .addItem('Convert to PDF', 'convertDocToPDF')
      .addToUi();
}

function convertDocToPDF() {
  var docFile = DocumentApp.getActiveDocument().getId();
  var doc = DriveApp.getFileById(docFile);
  var pdfFile = DriveApp.createFile(doc.getAs('application/pdf')).setName(doc.getName() + ".pdf");
  var parentFolder = doc.getParents().next();
  pdfFile.makeCopy(parentFolder);
  pdfFile.setTrashed(true);
}

Також ChatGPT описав інструкцію, як цей скрипт опублікувати, щоб він працював не тільки у конкретному документі, але це виявилось не так просто, як зробити скрипт 😅.

_automation-2-1.png

_automation-2-2.png

3. Транслітерація тексту в Figma

Колись для транслітерації назв зробили разом з програмістами простий сайт з простим JS, якій заміняв літери на інші за певними правилами. Потім з цього створили скрипти для AI та ID. А потім я стикнувся з такою з задачею у Фігмі, але робочих рішень не знайшов. Щось покрутив, але кинув, бо моїх знань було недостатньо.

І от спробував згодувати цю задачу ChatGPT. Взяв увесь наявний скрипт, як приклад, і попросив придумати, як з цього скрипту зробити скрипт для Фігми. Спочатку запропонований код транслітерував всі тексти на сторінці. Через уточнення він це робив для виділеного тексту, а якщо не виділений, то вже для всього.

І у першому варіанті цей код навіть працює, транслітерує, лишилось тільки допиляти для виключень і різних випадків. Далі вже можна туди додати якийсь інтерфейс за потреби. Тест вважаю вдалим.

_automation-3-1.png

_automation-3-2.png

_automation-3-3.png

Код транслітерації для Фігми від ChatGPT

4. Створення регулярних виразів для GREP / RegEx

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

І от тепер з ChatGPT цей поріг можна вважати зниженим, бо він дуже гарно конструює навіть складні вирази.

Наприклад, давайте в Індизайні після всіх прийменників додамо нерозривні пробіли у всьому тексті через GREP-стилі. Для цього потрібно знайти у тексті всі прийменники. Тож створюємо стиль для символів без перенесень (no break) та питаємо у ChatGPT список всіх прийменників у вигляді регулярного виразу.

Він розуміє українську і віддає згенерований вираз вже у потрібній формі. Єдине що цей regex не зовсім підійде у Індизайн, тому уточнюємо що це має бути саме GREP для Індизайну і отримуємо робочий запит.

Так само можна конструювати грепи, які знаходять прізвища та ініціали, одиниці вимірювання, дати та місяці, номери телефонів у різних видах тощо. Далі потім знайдені дані (одразу всі, в усьому тексті) можна або переформатовувати або задавати їм потрібний стиль.

_automation-4-1.png

_automation-4-2.png

_automation-4-3.png

_automation-4-4.png

_automation-4-5.png

_automation-4-6.png

_automation-4-7.png

_automation-4-8.png

_automation-4-9.png

Приклади різних регулярних виразів

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

GREP заміни кириличних лапок латинськими

5.1 Зібрати відео зі скріншотів (з використанням ffmpeg)

Також в лекції згадував, що також у автоматизації дуже допомагають різні консольні команди (cli, command line interface), які заточені на певні дії. З ними така сама ситуація — щоб ними користуватись, потрібно розбиратись в прикладах та документації, що теж техно-орієнтованість.

Тому тут можна теж ChatGPT використовувати, як посередника для пошуку потрібної команди з потрібними параметрами. Наприклад, маємо купу скріншотів зроблених автоматично з різницею у 4-5 секунд, з яких хочемо зробити скрінкаст.

Для роботи з відео є потужна програма ffmpeg, яка працює з командного рядка. Тож попросив ChatGPT запропонувати команду для ffmpeg, яка б об’єднала картинки у відео. З першого разу отримуємо варіант, який на 100% працює та робить відео з заданою кількістю кадрів, які можна скоригувати.

ffmpeg -framerate 30 -pattern_type glob -i '/path/to/folder/*.jpg' -c:v libx264 -pix_fmt yuv420p /path/to/output.mp4

Таким чином не потрібні ніякі додаткові програми, для створення відео з картинок: за допомогою Автоматора робимо скріншоти, а через ffmpeg отримуємо відео.

Збір відео з окремих картинок

5.2 Компресія відео (з використанням ffmpeg)

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

Раніше я шукав налаштування команд на Stackoverflow, а зараз швидше спитати у ChatGPT. Приклади запитів.

_automation-5-2-1-compress-video.png

_automation-5-2-2-compress-video.png

Компресія відео з ffmpeg

6. Зміна в наявному скрипті для Автоматора (Apple Script)

До попереднього пункту: для створення скрінкасту у мене був скрипт, який робив скріншот екрану і клав у потрібну теку в Дропбоксі, а потім зі скріншотів збиралося відео.

Зараз Дропбокс змінив і виходить старий скрипт некоректно працює. Йти шукати у документації до AppleScript як змінити шлях було б довго. Тому скопіював наявний скрипт і попросив замінити шлях збереження скріншотів у теку /Desktop.

7. Збереження в TIFF у Adobe Illustrator

Ще попросив зробити скрипт для швидкого збереження артборду у TIFF з заданим DPI. Отримав отакий варіант, який видавав помилку. Знайшов у спільноті Адоба відповідь зі схожою частиною, та побачив що один з параметрів замість IBM має називатись IBMPC, замінив, запрацювало. Тобто весь скрипт робочий, але помилка була в одному з параметрів. Завантажити скрипт.

automation-7-1-w2400.png

Збереження артбоду в TIFF 300dpi

8. OSM Overpass Query

Деякі системи хоч і доступні всім, але поріг входу в них занадто високий. Але ChatGPT і тут зможе допомогти його подолати.

У OpenStreetMap (карта/база даних, які відкриті для всіх) зберігається величезна база геоданих, доступ до яких не суперпростий. І в OSM є мова запитів Overpass, яка дозволяє вивантажувати / запитувати якусь певну частину тих даних. Так от Overpass супер-неінтуітивна мова, і тут Chat GPT допомагає перекласти запит з людської на машинну.

P.S.

І це я скористався лише безкоштовною версією ChatGPT (модель GPT 3.5), і вже відчув, що стаю продуктивнішим ніби маю ще один механізований маніпулятор на додачу до рук, який розуміє що я хочу зробити та робить це швидше,

Тепер спробую модель Codex (Github Copilot), яка створювалась як раз для написання коду, а також GPT4. Напишу потім, що з цього вийшло.

Також хотів проілюструвати цю думку згенерувавши картинку людини з ще оною механізованою рукою, накшталт, технодесандників з Вархаммеру, але з 20 спроб у Midjourney v4 мого задуму не вийшло ¯_(ツ)_/¯


Якщо у вас є питання або приклад дизайну, які потрібно подивитись та прокоментувати, напишіть на пошту або у телеграм.

?

Якщо вам було цікаво та корисно, можете пригостити мене кавою ☕️: на монобанку чи по номеру картки банки 4874100025139125.