Вступление
Привет! Меня зовут Воронин Николай, я занимаюсь автоматизацией систем отчётности и анализа в ПГК Диджитал.
В этой статье я хочу поделиться опытом ведения личного творческого проекта, где многие функции переложены на нейросети. Расскажу об обнаруженных мной особенностях, плюсах и недостатках.
Мой проект – это цифровой мультимедийный комикс. Для его реализации требуется создание программного обеспечения, иллюстрации, музыка и звуки, работа с сюжетом и персонажами. Соответственно четыре AI, которые несут кольцо к финалу проекта это:
Deepseek – LLM для кодинга.
Deepseek – LLM для отладки и выверки текстов и проработки сюжетной целостности.
StableDiffusion – иллюстрации.
Suno AI – музыкальное сопровождение.
Почему нейросети – хоббиты, и зачем им нужен Гэндальф?
В основном это касается больших языковых моделей (Deepseek, CharGPT, Grok, Gemini, Gigachat и т.п.). Важно понимать, что Искусственный Интеллект – это модное, но неправильное название для нейросети и большой языковой модели – никакого интеллекта там нет. Это очень большой массив хитро размеченной информации с хитрым алгоритмом статистического поиска сначала распознавания вопроса и затем наиболее вероятного ответа. Мыслительного процесса, понимания вопроса и логического построения ответа нет. Нейросети не умеют даже считать, в них просто загружено очень много математических задач с ответами и, получая запрос, нейросеть ищет наиболее вероятный ответ.
Соответственно, чем задача специфичнее – тем больше шанс, что в обучающих материалах по ней было мало информации, нейросеть будет пытаться интерпретировать её через другие задачи, которые по логике разметки кажутся похожими (с точки здравого смысла это может быть не так), и решения будут становится всё более и более странными.
Ещё один важный момент – ответ на запрос – это усреднённый ответ из похожих вопросов так или иначе скомбинированных нейросетью. Это значит, что, если большая часть обучающих материалов по теме обладала какой-то спецификой, эта специфика наверняка будет проявляться и в ответах. Например, это может быть некрасивый неструктурированный код для задач определённого типа. Или топорность и нарочитая стереотипность персонажей определённого жанра. Так что, что-то новое делать очень сложно.
Чтобы понимать: на что хоббиты способны, а где сломаются, чтобы направить их в нужную, а не в очевидную сторону, чтобы напомнить про то, что важно сейчас и отвлечь от того, что мешает, нужен Гэндальф.
Важным нюансом считаю подчеркнуть, что моя цель – не добиться идеального исполнения всех поставленных целей с помощью нейросети, а минимизировать свои трудозатраты, сократить время реализации, повысить качество там, где моих навыков не достаточно, до приемлемого уровня. То есть речь о поиске некоторого компромиссного варианта, обеспечивающего баланс качества, трудозатрат и личной удовлетворённости результатом.
Описываемый проект – моё хобби. Я не ограничен сроками и требованиями, кроме тех, что сам себе выставил: если за три часа попыток ИИ не выдаёт ничего адекватного, больше на это время не тратить, либо вернуться позже и сделать вручную, либо вернуться, когда в голову придёт новый подход.
Хоббит №1 – джун программист
Может ли нейросеть сгенерировать код, который будет выполнять поставленную задачу? Иногда может, иногда не может.
В чём нюансы? Нейросеть работает, формируя свой ответ на основе суперстатистики. Чем стандартнее задача, тем надёжнее ответ. Если задача специфическая, качество результата будет падать, и, в какой-то момент, результат станет неработоспособным.
Для каких задач нейросеть может выдавать результат практически автономно? Под «автономно» я подразумеваю, возможность пользователю-не программисту достигнуть своей цели с помощью ответа нейросети. Это достижимо для точечных ситуативных решений, не предполагающих развития и доработки.
Пример
Задача
В ходе исследования были получены статистические данные, описывающие взаимосвязь ряда критериев. По результатам исследования пишется статья, для которой нужны иллюстрации с визуализацией этих связей. Критериев достаточно много и ручная отрисовка займет прилично времени. Массивов несколько, потребуется несколько иллюстраций с разными данными, но в едином стиле.
Постановка для нейросети: описать структуру массива данных, описать желаемый вид диаграммы, уточнить, что данные нужно использовать из файла.
Скорее всего даже в таком виде нейросеть предложит рабочие варианты, которые позволят автоматизировать эту задачу.
Проблемы
У нейросети нет понимания, что в задаче есть некоторая специфика. Ответ будет примерно такой: можете попробовать экселевские графики, можете попробовать варианты из сети для более специализированных диаграмм, можете запрограммировать на питоне. Мы действительно можем добиться нужного вида, используя готовые инструменты, но по итогу потратить очень много времени на подгонку своих данных, настройку связей и скорее всего воспользуемся некрасивыми костылями. Вариант с питоном – хорошее решение, но, если мы не программируем, у нас скорее всего не установлен питон, библиотеки, не настроена среда, к тому же, в конкретной задаче не так много данных.
Как Гэндальф может сориентировать хоббита
Чтобы минимизировать телодвижения, можно сделать отрисовку в браузере, собрав простой редактор диаграмм точно под наш тип – это почти как рекомендованный вариант с питоном, но не требующий установки и настройки дополнительного ПО. Дополняем изначальный запрос указаниями, что должна быть не только отрисовка, но и минимальная настройка: подвигать ноды, поменять размер шрифта и т.п. Почти наверняка мы получим то, что надо. Дальше, не заморачиваясь, полученные диаграммы можно не конвертировать в графический файл, а просто делать снимок экрана.
Перехожу к личному опыту. В своём проекте мне нужно было решить несколько задач. Все они не очень сложные и можно было бы написать весь код самостоятельно, но так как это хобби, которым я занимаюсь в своё свободное время, хотелось минимизировать интеллектуальную нагрузку и расфокусировать внимания, т.к. программирования хватает и в рабочее время. В первую очередь нужно было создать читалку, которая будет интерпретировать документ с комиксом в виде страничек. Так как процесс создания комикса итеративный, нужна была возможность подправлять содержание, поэтому хотелось дополнительных функций и гибкости, и вариант сделать страницы в виде картинок мне не подходил. Каждая глава хранится в json-файле с массивом страниц, где указаны фоновые изображения, размеры и форматы текстовых рамок, звуковые эффекты, ссылки на статьи, которые открываются во всплывающих окнах, а также возможность добавлять различные элементы.
В итоге получился следующий формат:
{
"PG_TYPE": "COMMON", -- заложено на будущее для формирования оглавлений, пока что отдельные главы напрямую доступны с хаба и не собраны в одну книгу
"PG_BG": "/books//book4_img/B1C4P090.png", --страница комикса с фреймами, далее чуть подробнее про то, как она собирается.
"PG_AUDIO": [ --блок аудиофона ввиде массива, что бы можно было одновременно запускать несколько звуковых дорожек, не тратя время на сведение в одну, а так же для кросс-страничного воспроизведения.
{
"SRC": "/books//audio_lib/Backsound rock 07.mp3", --сам аудио файл
"MODE": "LOOP", --режим однократно/закольцовано
"GAIN": 5, --Нарастание или затухание, указывается в секундах, когда звук должен набрать полную громкость, или наоборот исчезнуть.
"DELAY": 3, –задержка перед началом воспроизведения
"VOLUME": 0.5, --громкость
"LIGHTMUSIC": "ON", --светомузыка – работает как эмбилайт на телевизорах – фон за страницей комикса будет динамично подсвечиваться в такт музыки или звуку.
"LIGHTMUSICPROFILE": "grd1;crc;50-10;rgb(200,0,50)-10" –строка в которой кодируется визуализация светомузыки, интерпретатор дописывается по мере необходимости, сейчас из вариантов линейный и круговой градиент с параметрами.
},
{
"SRC": "/books//audio_lib/crowd_scream2.mp3",
"MODE": "NONE",
"DELAY": 6,
"VOLUME": 0.5
}
],
"PG_TEXT": [ --блок рамок с текстом. Я ушёл от классического варианта с облачком и стрелочкой. Возможно в итоге доработаю и этот функционал, но пока что это прямоугольники с красивой ломаной рамкой цвета, соответствующего персонажу.
{
"STYLE": "right: 5%; top: 7%; width: 45%; height: 8%; ", -- буквально css стиль, в котором задаётся расположение и размер рамки с текстом, а также могут быть дописаны дополнительные визуальные нюансы, например, выравнивание.
"CLASS": "txt_frame", -- набор дефолтных стилей, чтобы не заполнять каждый раз цвет, наклон и т.п.
"CONTENT": "Даже по моим меркам, этот бар - стрёмная дыра..." – сам текст, который будет отображаться.
},
{
"STYLE": "left: 5%; top: 52%; width: 45%; height: 8%; ",
"CLASS": "txt_frame",
"CONTENT": "Музыка орёт так, что своих мыслей не слышу..."
}
]
}
На основе файла с такой структурой нужно было отрисовать страничку и запустить всё, что нужно. И здесь задача стала сложнее из-за всплывающих по ходу мелких деталей. Полное описание всех необходимых функций стало достаточно большим, что сделало задачу уникальной, а подбор статистического решения не надёжным. Поэтому нейросети пришлось экспериментировать и фантазировать. Попытки сгенерировать полный рабочий код и дальше итеративно его исправлять имели все риски превысить по трудозатратам прямую разработку вручную.
Полная постановка (примерная, т.к. оригинал не сохранился)
Необходимо реализовать страницу для чтения цифрового комикса. Использовать html, php, js, css.
Данные читаются из файла – описание структуры файла и пример с фрагментом файла.
Для отдельных книг будут отдельные файлы – название конкретной книги и страницы должно быть в адресной строке.
Формат страницы должен быть оптимизирован под вертикальные мобильные экраны, при этом это должен быть один код, который также будет нормально отображать страницу и на горизонтальном экране.
Далее описывается как интерпретировать элементы из файла, как отрисовывать рамки с текстом, как работать со звуком и светомузыкой.
Для рамок с текстом нужна дополнительная обработка, которая подгоняет размер шрифта так, чтобы текст полностью умещался в рамку. Точный размер вручную задавать невозможно т.к. он по-разному воспринимается мобильными браузерами и на компьютере.
Для звука нужен дополнительный нюанс: если одна и та же композиция присутствует на нескольких страницах подряд, надо фиксировать таймкод и передавать на следующую страницу, чтобы композиция продолжала играть, а не начиналась сначала. Должна присутствовать кнопка включения/отключения звука.
Для светомузыки необходимо анализировать громкость, высчитывать среднее по наиболее динамичным частотам и, сравнивая с текущим пикам, визуализировать пульсацию.
Также нужно переходить к следующей и предыдущей странице, открывать список страниц, в том числе жестами на экране телефонов.
Если дополнить это ещё и описанием структуры кода, чтобы он был красивым, удобочитаемым, организованным для доработки и расширения, почти гарантировано выпадение части условий при реализации.
Более-менее адекватный подход, который я выработал, нельзя назвать каким-то откровением – это просто последовательная реализация функций. Делим постановку на блоки: чтение файла, картинка, текст, звук, управление. Блоки делим на функции. В процессе следим, чтобы не дублировались уже имеющиеся функции и стараемся следить за унификацией, например, понимая, что для действия можно использовать уже готовую функцию, прописываем это. Нейросеть любит на каждый чих создавать новую функцию.
Ещё один момент, который хоббит самостоятельно не отслеживает
На определенном этапе мы сталкиваемся с переполнением контекстного окна. Про это я изначально не знал. Суть в следующем, нейросеть читает чат и набирает в зависимости от модели 32 / 64 / 128 тысяч токенов, в пределах которых может делать что-то осмысленное. Один токен – это минимальная смысловая единица. Это может быть буква, слог, знак препинания, короткое слово. Продвинутые модели могут заполнять своё окно контекста не последовательно, а выделяя ключевые фрагменты из всего чата. Например, ориентируясь на фразу в вашем запросе: «Запомни, это ВАЖНО:…». Некоторые просто берут самые последние. Когда размер чата становится больше лимита этого контекстного окна, что-то начинает выпадать, и нейросеть ориентируется только на то, что осталось. Так что, дав полное описание задачи и начав прорабатывать её по частям, закончив одну часть, вы можете обнаружить, что, при переходе к следующей части, нейросеть откровенно путается, потому что подробное написание в начале чата выпало из контекста. Надёжнее всего хранить большое подробное описание, и начинать каждый кусок в новом чате, загружая в него описание, реализованную часть кода и постановку для текущего этапа.
По итогам первой реализации требовалась отладка. Выяснилось, что на некоторых устройствах часть элементов управления вылезает за экран и становится недоступной. Потребовала переработки подгонка размера шрифта. Предложенный нейросетью вариант оставлял место «некрасивостям», когда нижняя строка текста и крайние справа буквы наползали на рамку и не читались. Также из эстетических соображений я вручную подгонял функцию отрисовки ломанной рамки в несколько слоёв с оттенками, но это больше вопрос вкуса, чем технологии.
В итоге результат получился удовлетворительный, хотя код вышел довольно некрасивый, т.к. из-за отсутствия на тот момент опыта я не озаботился контролем оформления.
Вторым важным элементом проекта стала энциклопедия. Так как хотелось сделать мир побогаче, но при этом не перегружать основное повествование описаниями политики, экономики и особенностями технологий, было решено вынести всю эту информацию в энциклопедию, а в комиксе добавить ссылки на соответствующие статьи, если события или упоминания вызовут желание изучить что-то более детально.
В плане реализации она была довольно простой, но возник концептуальный вопрос каталогизации. В целом реализованный механизм меня удовлетворял, но его наполнение, на мой взгляд, требовал переделки. Так как я не видел в задаче сложных архитектурных решений, я попробовал дать нейросети больше воли.
Полные ответы я приводить не буду, так как получилось очень много текста.
Вариант 1
Запрос: У меня есть набор статей о мире комиксов, описывающих экономику, геополитику, технологии, историю, отдельных личностей и социальные явления. Я хочу создать веб-энциклопедию проекта.
Ответ: Нейросеть начала рассказывать, какие мне нужно написать статьи и как их оформить, оставила рекомендации по выбору платформы и определению целевой аудитории, а также, что надо рассказать про героев и антагонистов. В целом – совсем не то, что мне было нужно.
Вариант 2
Запрос: У меня есть набор статей о мире комиксов, описывающих экономику, геополитику, технологии, историю, отдельных личностей и социальные явления. Я хочу создать на моей странице веб-энциклопедию проекта с прямыми ссылками на конкретные статьи и интеграцией с остальной инфраструктурой.
Ответ: Нейросеть не распылялась на пространные рассуждения, сфокусировалась на концептуальной архитектуре и стала предлагать набор фич и элементов управления для реализации энциклопедии.
Вариант 3
Запрос: У меня есть набор статей о мире комиксов, описывающих экономику, геополитику, технологии, историю, отдельных личностей и социальные явления. Я хочу создать на моей странице веб-энциклопедию проекта с прямыми ссылками на конкретные статьи и интеграцией с остальной инфраструктурой. У меня уже лежат в одной папке около 20 статей в формате примитивного html (только простые тэги), которые нужно сгруппировать, не вычитывая все тексты. Необходимо создать универсальный каталог, который легко и удобно позволит в пару кликов оставлять только статьи по теме, либо быстрый поиск по названию.
Ответ: Нейросеть начала предлагать конкретные реализации, а также комментарии, какой вариант проще, а какой даст дополнительные возможности.
В целом у всех эти запросов есть общий недостаток – в них не сформулировано, что конкретно мы хотим сделать. Как минимум разделить взаимодействие с ИИ на два этапа: обсуждение архитектуры с явным указанием "мы планируем архитектуру. мы не пишем код", и непосредственно написание кода. В любом из них надо было просить описать рекомендуемую архитектуру или сразу написать код на нужных мне языках, а в приведённых мной примерах для ИИ запрос довольно абстрактный. В итоге я обозначил архитектуру. Был выбран вариант с каталогом, где каждой статье присваиваются несколько категорий и подкатегорий, представленных в виде дерева. Кликнув по категориям, можно отфильтровать статьи, а также найти текст по названию. В результате финальное описание позволило собрать код почти с первого раза.
Я также попытался автоматизировать заполнение каталога с помощью нейросети, но столкнулся с проблемами: она начала создавать ненужные категории и непродуманно структурировала информацию. Функционал работает, но его еще предстоит привести в порядок. На текущий момент, так же с помощью нейросети, я уже создал простенький инструмент для более удобного редактирования каталога вручную. Так же получилось с первого раза.
Пример запроса + прикладывался файл каталога (так же в json)
напиши простой html редактор для этого файла. пусть это будет php страница. Надо что бы она читала этот файл. он всегда так называется и всегда будет лежать в одной папке с редактором. json из файла надо записать в глобальную переменную. Далее надо что бы читался список всех html файлов в этой папке, они соответствуют статьям - art_id+".html". если есть файл, которого нет - надо добавить в начало массива в глобальной переменной, art_id и art_name = название файла без ".html" в конце, art_cat пустой массив. далее надо создать ещё одну переменную: двумерный массив, где в array[i][0] уникальными значениями art_cat.cat_name, а в array[i][j] ( j > 0) уникальные значения этой категории. далее нужно отрисовать список статей в виде плашек. на плашке должно быть art_id, текстовое поле с art_name, окошко с плашками категорий, под списком категорий кнопка - добавить значок категорию "+". на плашке категорий - список значений выбранных для этой категории и значок добавить значение "+". так же на плашке категорий кнопка "удалить" - значок "X". такие же на каждом значении категории. при нажатии добавить категории мы получаем всплывающее окно содержащее список существующих категорий. Внизу списка поле для ввода. кнопка "ок" и "отмена". если нажать на категорию из списка - она добавится к статье, если введена новая и нажать "ок" - она добавится к статье и в массив категорий. Аналогично со значениями категорий. Вверху страницы должна быть кнопка "сохранить каталог" которая перезапишет файл, обновив все категории, их значения и названия статей.
Ещё несколько инструментов потребовали объёмной итеративной работы: музыкальная библиотека, которая раскладывает музыку по исполнителям и альбомам, отображает тексты песен и позволяет создавать плейлисты; простой редактор страниц для комиксов, который позволяет обрезать и масштабировать картинки; редактор книг с множеством элементов, таких как панели для создания страниц и настройки звуковых эффектов.
Общий итог
ИИ для программирования интересен с позиции экономии времени и разгрузки головы от решения технических задач. Но подходит он только для самых простых атомарных решений, для более сложного придется самостоятельно продумывать архитектуру, пошагово генерировать код для единичных функций и самостоятельно всё это собирать, параллельно отслеживая качество исполнения.
ИИ может знать хорошие решения: новый синтаксис, который вы не отследили, протоколы взаимодействия, библиотеки, что-то, что может упростить задачи. Но во всех этих случаях всё равно придётся самостоятельно вникать.
Не коснулось моего проекта, но тоже важно. ИИ может писать приличный код, когда речь идёт о программировании именно кодом. Если мы работаем в графическом интерфейсе (например, ETL инструменты для настройки потоков данных), где надо соединять объекты стрелочками, проставлять галочки и т.п. ИИ практически бесполезен. Это тяжело формализуемый вид работы. Чтобы обучить ИИ давать ответы по запросам для работы с графическим интерфейсом, потребовалось бы кому-то живому сидеть и писать множество текстов с описаниями этого процесса, результатов, зависимостей и нюансов. А примеров с кодом очень много, и их просто можно было сразу скормить в обучение.
Конкретно в веб-разработке ИИ очень любит смешивать интерфейс с логикой, хранить данные в формах, вместо ведения переменных, генерировать избыточные стили, не любит делать универсальные настраиваемые функции. Отчасти это вкусовщина, но мне нравится более организованная и упорядоченная разработка.
Сейчас почти у всех ИИ работает функция «исправить свой запрос». Если очевидно, что ответ пошёл совсем не в ту сторону, лучше его удалить, переформулировать с учётом акцентов на тех местах, которые ИИ неправильно понял и запросить заново, чтобы не засорять контекст неправильной информацией, ведь в дальнейших ответах ИИ может начать на неё ориентироваться.
В целом важно для запросов по любым темам связанным с генеративными ИИ (в т.ч. LLM) – они очень чувствительны к орфографии. Если упрощать, ИИ всегда уверен в том, что вы написали ему именно то, что имели ввиду, и слово с опечаткой может воспринять как новый термин, которым активно начнёт оперировать, или проассоциирует его с чем-то совсем другим. С пунктуацией такой проблемы, как ни странно, практически нет.
Во второй статье своего цикла я расскажу об опыте использования нейросети как помощника для написания художественных текстов.