Продолжая изучать тему вайбкодинга для пет проектов на личном опыте и все еще находясь под впечатлением от предыдущей быстрой разработки, когда благодаря нейросетям без особых навыков программирования за пару вечеров удалось сделать консольную CMD утилиту для переконвертации семейного фото и видео архива за 15 лет, добившись сокращение его объема на жестком диске более чем в 3 раза!
В предыдущей серии..
Напомню что тот скрипт автоматически скачивал через winget пакеты ffmpeg и image magic и с их помощью рекурсивно пережимал и перекодировал через современные кодеки и форматы разношерстный медиа архив, как со старых цифровых зеркалок так и современных смартфонов, снимающих с огромным ненужным количеством мегапикселов, в результате за ночь автономной работы ПК работа была сделана, а довольный автор продолжил дальше вовлекаться в вайбкодинг.
Будучи воодушевлён комментариями к предыдущему посту, где люди обсуждали, что легко поддерживают свои проекты более 100 000 строк кода, в то время как у меня уже после 10 итераций начинались уже галлюцинации даже на 1000 строк, я решил продолжить дальнейшие изыскания и сделать что-то более сложное, консольные скрипт, поэтому взял его логику за основу и решил сделать полноценную софтину, настоящий бинарник .EXE без зависимостей, но с полноценным графическим интерфейсом, о чем поделюсь своим опытом ниже в статье, работу разобьем на этапы, для людей которые не являются профессиональными разработчиками но хотели бы иметь возможность создавать собственные полезные приложения.
Этап 0. Рисерч и поиск аналогов.
Еще на этапе поиска аналогов для CMD скрипта из предыдущей статьи мне удалось найти схожую но устаревшую утилиту, но она не поддерживала видео и современные форматы фото со смартфонов и зеркалок, вроде того же HEIC / HEIF.
Положа руку на сердце, поиск аналогов я делал по-старинке через гугл и не слишком долго, поэтому многих существующих решений не нашел. Сейчас я рекомендую использовать Perplexity для этого этапа. Это как если бы гугл сразу выдавал ответ на вопрос вместо рекламы и кучи ссылок, так что настоятельно рекомендую погуглить нормально воспользоваться нейросетями еще до начала постановок задач и написания кода.
Зачем все это?
Перед разработкой любой софтины логично было бы задаться вопросом зачем? В моем случае семейный медиа архив был уже обработан, но теперь появился новый вызов – работа с графикой в нейросетях порождает много итераций, как правило это минимум 5-10 вариантов правок для каждого кадра, часть из которых впоследствии приходится по кускам склеивать в фотошопе для достижения наилучшего результата. Это означает хранить много исходников, которые могут потребоваться когда-нибудь потом, при этом изначально они скачиваются в несжатом формате по 7-10 МБ на изображение (после обработки ужимается до 2 МБ без визуальной потери качества). К тому же иногда они скачиваются во всяких современных WEBM форматах, с которыми не каждая софтина умеет работать… Значит Media Converter снова в деле! Напоминаю что он умеет пакетно обрабатывать целые папки и подпапки и рекурсивно пережимать через GPU и ffmpeg фото и видео файлы в JPEG и MPEG4 AVC или HEVC.
Этап 1. Постановка задачи и поиск решений
Не стесняйтесь использовать нейросеть для помощи в выборе инструментов, языков программирования и среды разработки если потребуется. Т.е. подробно опишите задачу (можно и голосом надиктовать) и попросите нейронку не писать сразу код а задать вам уточняющие вопросы и сформулировать итоговое ТЗ по которому вы с ней будете работать.
Так я объяснил что хочу минималистичное GUI приложение для Windows 7 – 11 с минимальным количеством зависимостей чтобы работало по логике моего CMD скрипта т.е. рекурсивно обходило бы заданные папки и при помощи консольных версий ffmpeg и image magic пережимало бы медиа файлы с заданными параметрами. Чтобы не заморачиваться со сложностями вроде C++ и фреймворками .NET. И она мне предложила использовать среду AutoHotkey v2. Слышали про такое? Вот и я нет. А оно есть и работает, всего кода с механикой GUI получилось менее чем на 1500 строк и оно в итоге скомпилировалось в 500 КБ софтину. При этом я лично ни строчки кода не написал, хотя примерно понимал где и что делается, особенно если просить нейронку почаще оставлять комментарии вначале каждого блока кода.
Пара слов о выборе инструментов разработки, если у вас есть возможность и желание оплачивать по 100-200$ с зарубежных карт ежемесячно на подписки для разработчиков то отличным выбором будет использовать Claude Code или MS Visual Studio + Copilot. Там есть всякие плюшки когда IDE среда разработки интегрирована с нейронкой и сама будет создавать нужные файлы в проекте, править их кусками, поддерживать систему банков памяти и т.д.
Но если ваши задачи не велики и скорее это хобби проект, то без особого бюджета можно генерировать код в браузере и вставлять его куда-нибудь в Notepad++, как было в случае автора. Тогда достаточно бесплатных нейросетей вроде китайского Qwen, Google Gemini или Chat GPT. Последние два потребуют использовать средства обхода блокировок со стороны американских компаний, но аккаунты для них продаются например на GGSEL.
Этап 2. Написание кода и создание MVP
Когда ТЗ из предыдущего этапа готово лучше всего открыть новый диалог с нейронкой и вставить в него результат по которому вы будете работать, где перечислены языки и технологии чтобы она не путалась и не прокручивала каждый раз результаты вашего рисерча. Ведь каждый раз когда вы что-то пишете в чат диалога в нейросеть летит вся история переписки со всеми ее ответами и рассуждениями и вашим последним комментарием. Так что кучей мелких правок можно довольно быстро забить контекст, в результате чего нейронка начнет галлюцинировать и качество работы упадет. Так что не ленитесь писать четко и сразу по 3-5 небольших задач за раз, вместо кучи небольших вроде “передвинь кнопку чуть вправо”.
По моему опыту с кодом объемом около 1000 строк можно сделать 10-15 вдумчивых итераций прежде чем качество работы упадет, после чего придется создавать новый диалог, заново писать в него ТЗ и актуальную версию кода. Кстати я сделал себе такой системный промт (персональный контекст) для каждого диалога, который помогает лучше контролировать версии и не путаться:
Промт для написания кода в чате
Когда я пишу код, всегда выводи его в блок кода, а не обычным текстом в чат. При каждой новой правке перед блоком кода пиши номер итерации и краткое описание выполняемых правок, например: "Итерация 28. Исправление работы пункта меню.". В самом коде, если исправлено более одной строчки, в комментариях в шапке программы или скрипта повышай версию на 0.1, например "Скрипт обработки изображений v2.2". При этом весь код скрипта присылай полностью переписанным, если исправлено более одной строки. Если исправление маленькое, менее одной строки, присылай ее отдельно в виде полной строки в пояснении перед блоком кода "Исправление в строке 238:" и сам код этой строки полностью.
Когда пишем код, текст, статьи, посты и письма, не выделяй жирным шрифтом или курсивом ничего, если я явно не даю на это разрешение в контексте текущего диалога или промта. Не используй эмодзи.
Таким образом вы постепенно создаете программу, сначала работающий прототип т.н. минимально жизнеспособный продукт – MVP. На это у меня ушел первый вечер.
Далее когда заработала основная логика можно переходить к украшательстам и улучшению удобства графического интерфейса.
Этап 3. Пользовательский интерфейс GUI и украшательства
В общих чертах что должно содержаться в GUI должно быть понятно уже на стадии постановки ТЗ из этапа 1. Далее рекомендую создать примерный вид будущей программы в графической нейронке, например Nano Banana от Google Gemini, Sora от Chat GPT, если совсем творческое и экозотическое то можно попробовать Midjourney. Qwen у меня справлялся так себе, так что самый универсальный вариант лично для меня это Google Gemini. Просто кидаете в новый диалог чата ТЗ и желательно картинки референсов по стилю с того же Dribbble или Freepik.
Нейронка сразу предупреждала меня что выбранный инструмент разработки со средой AutoHotkey v2 будет отвечать моим требованиями поддержки старых систем и без лишних зависимостей, но будет скучным как программы из 1990-2000х. Я же, припоминая студенческие годы и Visual Basic 6 знал что даже из системных элементов Windows можно выжать максимум без сторонних библиотек, но с некоторыми ухищрениями, например вместо использования системной кнопки которую трудно “покрасить” в нестандартный цвет использовать цветную область внутри модального окна отслеживая нажатия в ней, сделать нестандартный слайдер на основе этой же технологии и т.д., т.е. попросил нейронку использовать трюки для создания красивового интерфейса. Такой вайб ностальгии и юной молодости.. )
Кстати буду признателен за комментарии на тему создания концепций удобных и красивых Windows GUI через промты и материалы на эту тему, я не придумал ничего лучше чем спрашивать “на основе приложенного ТЗ сделай мне крутой gui как у nero burning rom и alcohol 120% как в программах 2000х”, ну и отдельно иконки приложения и пакет графики подложек и стрелочек (не пригодился т.к. не хватило терпения в реализации на это).
В результате не все вещи удалось реализовать а также мелкие правки вроде “передвинь симметрично меню кнопку” и т.д. бывает быстрее поправить в графическом редакторе чем десятком итераций объяснять в чате, процесс выглядит примерно так:
Потом уже с этими референсами изображений и рабочим кодом MVP создаем новый диалог и доводим GUI до приемлемого состояния. Это заняло второй вечер.
Этап 4. Отладка, тестирование, оптимизация
Большую часть времени в вайбкодинге вы выступаете в роли тестировщика и архитектора матрицы в одном лице. По сути придумывая разные новые функции и давая обратную связь как ожидаемо работает или не работает ваша программа в нейросеть.
В этом и есть вайб процесса разработки с нейросетями. Где-то тут должно было быть про автотесты каждой функции и всевозможные комбинированные сценарии работы тех или иных опций, но я плохо представляю как эффективно реализовать подобное через окно с чатом методом копи-паста кода, ушло бы еще в 3-5 раз больше времени на тестирование чем на создание самой программы и это была бы скучная и не сильно творческая работа, а такой вайб нам не нужен!) Так что имейте ввиду, когда вы не будучи опытеым программистом в выбранном направлении в одно лицо создаете программное обеспечение, оно точно получится с теми или иными ошибками и непредсказуемыми сценариями работы которые вы не предусмотрели. Особенно это будет заметно у всяких веб-сервисов с базами данных, пользователями и разграничениями прав доступа. У кого есть соображения на этот счет поделитесь в комментариях! А автор выделил третий вечер на проверки разного сочетания галочек в программе и доработке нескольких неочевидных фич.
Заключение
В итоге надо понимать что создание ПО такими методами это скорее развлекательный процесс и способ познакомиться с новыми технологиями, погрузиться в ламповую атмосферу компьютерной магии как на заре цифровой эпохи. Также я был рад познакомиться с AutoHotkey v2, в качестве аналогов нейронка также предлагала AutoIt и PureBasic. Но честно говоря не порадовало отсутствие графического редактора пользовательского интерфейса чтобы легко в графическом режиме передвигать элементы в окне меню перед компиляцией программы, вся верстка в коде :( Поэтому буду рад вашему мнению в комментариях какие еще легковесные но более современные инструменты подойдут для таких задач? Вроде бы есть еще вариант использовать Rust с native-windows-gui..?
Язык и среда разработки все же должны быть относительно современными или по-крайней мере популярными чтобы нейронки были хорошо обучены и корректно генерировали на них код, в случае с CMD из предыдущей статьи часто сталкивался с большим количеством ошибок в обработке длинных строк, callback функций от внешних утилит, таймерах и т.д. предположительно именно по той причине что инструмент был не совсем подходящий и на нем мало решались подобные задачи.
Программа с исходниками доступна на GitHub
Автор: Micha1l
