В последнее время работа над очередной версией OutWiker у меня в основном заключается в том, что я перерисовываю растровые картинки, которые используются в качестве изображений на кнопках и в качестве значков в дереве заметок. Картинки для кнопок я уже все перевел в векторный формат, а вот значков для заметок такое количество, что в обозримом будущем векторизовать их все вряд ли удастся. В комментариях спрашивали, почему бы не попробовать применить какой-нибудь софт для векторизации, на самом деле я пробовал, но проблема заключается в том, что исходные картинки имеют размер всего 16×16 пикселей, и векторизаторы создают месиво из каких-то размытых пятен. Честно говоря, тут их винить не стоит — если увеличить исходную картинку каким-нибудь примитивным алгоритмом масштабирования, то результат будет примерно такой же. Это уже наш мозг, глядя на набор из 256 точек (16×16) допридумывает то, что там изобразил художник. Когда я рисовал векторные значки, которые должны были бы выглядеть в маленьком размере так же, как исходная картинка, приходилось напрягать воображение и дорисовывать то, что на исходной картинке не имело четких контуров.

Тогда родилась идея использовать нейронные сети, чтобы увеличить картинку до большего размера, чтобы векторизатор мог качественно сделать свою работу. В этом посте покажу, что из этого получилось.

Для экспериментов я взял такую картинку: .

Изначально все растровые картинки для OutWiker я брал из трех наборов значков: famfamfam (авторский сайт уже умер), yusukekamiyamane и fatcow (сайт этого набора тоже уже не существует), Кажется, этот значок был из набора fatcow.

Если не использовать никакие алгоритмы сглаживания, то увеличенное «пиксельное» изображение выглядит так:

Именно с такой картинкой приходилось работать векторизатору.

Если это же изображение растянуть до размера 256×256 пикселей с помощью GIMP, получится такая размытая картинка:

Ее можно немного улучшить с помощью нерезкой маски:

Обратите внимание, что окружность превратилась в восьмигранник, контур местами пропал.

Если такую увеличенную картинку попытаться векторизовать с помощью vtracer, то результат получится, мягко говоря, так себе:

При этом полученный векторный файл в формате SVG имеет размер 220 кБ. Для сравнения, когда я эту картинку нарисовал вручную, у меня получился файл размером 6 кБ, а после сжатия ее с помощью программы svgo — 2.4 кБ. Результат ручного рисования будет в конце поста.

После этого я решил увеличить картинку с помощью различных инструментов, которые используют нейронные сети.

Сначала попробовал использовать онлайн-сервис https://www.upscale.media. Сайт у них какой-то жутко глючный, отправлял файл на сервер несколько раз, примерно раза с пятого получил результат (надо сказать, достаточно неплохой):

После этого установил две программы, которые работают в оффлайне: Upscayl и waifu2x. Попробовал увеличить изображение в 16 раз ими.

Начнем с Upscayl. Эта программа дает на выбор несколько обученных моделей. Вот три результата, полученных с помощью разных моделей:

Затем попробовал то же самое проделать с помощью waifu2x. Особенность модели этой программы состоит в том, что ее обучали на рисунках в стиле аниме, что для исходной картинки должно подойти. В отличие от Upscayl, у waifu2x изначально есть только консольная версия, хотя мне попадалось упоминание сторонней графической оболочки над ней, но я ее не смотрел.

Результат получился следующий:

Мне он понравился больше всех. Однако для автоматической векторизации не годится ни одна из полученных картинок — векторизовать такое смысла нет.

А еще я решил попробовать не специализированные модели, предназначенные для обработки изображений, а общие. Китайские искусственные интеллекты DeepSeek и Qwen частно признались, что они для обработки изображений не предназначены, но кинули несколько полезных ссылок, а вот Copilot взялся за задачу и внезапно удивил. Вот, что у него получилось:

Он не стал заморачиваться с улучшением качества исходной картинки, а просто «понял», что на ней изображено и нарисовал ее самостоятельно. Глаза, конечно, отличаются от оригинальной картинки, но его подход мне понравился. Правда, с этой картинкой случилась другая проблема. Такую картинку уже можно векторизовать, но только если установить такие параметры, при которых не происходит заметных искажений, получается файл размером 2 МБ. Вот как выглядит картинка после векторизации:

После этого я попросил Copilot сделать такую же картинку, но в более простом стиле. Он нарисовал ее вот так:

Векторизовалась такая картинка практически один в один:

Более того, файл с такой векторной картинкой весит всего 6.1 кБ. Просто замечательный результат.

И вот тут я задумался, как мне действовать дальше. То, что сделал Copilot впечатляет, но мне все-таки больше нравится исходный, более объемный, вариант с обводкой окружности. Наверное, можно было бы попытаться от Copilot добиться желаемого внешнего вида, но в данном случае я все-таки решил пойти по пути рисования значка вручную. Вставил в векторный редактор Inkscape две картинки: растянутую с помощью GIMP и после обработки с помощью waifu2x. Нарисовал окружность с обводкой и градиентной подсветкой примерно как в исходной картинке, а содержимое морды лица (глаза, брови и рот) обвел по увеличенной с помощью нейронной сети картинке, сверяясь с размытым оригиналом. В результате у меня получилось что-то такое:

Как я уже говорил, размер такого векторного файла получился равным 6 кБ.

Если векторную картинку экспортировать в формат 16×16 пикселей, то результат не сильно отличается от оригинала: . Для сравнения оригинал — , и то, что создал Copilot в упрощенном стиле — .

После этого я сделал еще несколько похожих картинок из этого же набора по такой же технологии. Результат меня устраивает, хотя от ручного рисования я не ушел. Но по поводу использования Copilot я задумался, наверное буду еще экспериментировать. Например, можно попытаться в упрощенной версии картинки от Copylot заменить контур колобка на тот, который я уже нарисовал.

PS. Удобно, что консольную программу waifu2x можно натравить сразу на всю директорию с исходными картинками, и она увеличит их все, да еще рекурсивно и во вложенных директориях. Команда для увеличения одной картинки с помощью waifu2x выглядит так:

waifu2x-converter-cpp --scale-ratio 16 -m scale -i исходный_файл.png -o выходной_файл.png

Здесь параметр —scale-ratio указывает масштаб, а параметр -m указывает, что нужно только увеличить картинку (еще есть возможность убрать шумы).

Для обработки всех файлов в директориях и поддиректориях я использовал следующую команду:

waifu2x-converter-cpp --scale-ratio 16 -m scale -i src -o results -f png -r 1 -g 1

В этом случае параметр -i указывает директорию с исходными картинками, параметр -o — директорию, куда надо сохранить результат, параметр -f позволяет выбрать формат создаваемых картинок, параметр -r говорит о том, что надо обходить поддиректории рекурсивно, а параметр -g, что нужно в результирующей директории создавать ту же структуру директорий, как в исходной директории.

PS. Вы можете подписаться на новости сайта через RSS, Группу Вконтакте или Канал в Telegram.