Когда-то давным-давно один из хабражителей поделился своим прекрасным сервисом по созданию красивых изображений из кода. Но с тех пор много воды утекло и сайт канул в лету. У меня периодически возникала необходимость красиво показать кусочек кода и я находил другие подобные сервисы — но они были слишком ограниченные.
Некоторые из этих сервисов выглядят очень круто, имеются хорошие настройки. Некоторые имеют даже платные. Но ни один не имеет того, что я хотел. И бесплатно.
Недавно к одной из статей я попросил ChatGPT создать мне подобное изображение по следующему запросу:
Возьми код, который написан ниже, и создай изображение, где этот текст будет на тёмном фоне с подсветкой кода, наклонён под углом 40 градусов вверх слева направо. При этом правая часть должна исчезать в глубине, а левая быть так близко к пользователю, что должна быть слегка размазана. Угол глубины - 30 градусов. И наложи на изображение тёплый фильтр, как Рио в Инстаграме.
(ниже был код)
Визуально выглядит круто, хоть и не совсем точно соответствует описанию, но текст кода выглядит очень странно.
Мысли сделать подобный сервис закрались у меня уже очень давно, но тут я понял, что пора. Ранее за это я никак не брался, т.к. от сложного специфического JavaScript я далёк, а работа в JS с изображениями мне вряд ли когда-нибудь ещё понадобится. В общем, просто не хотелось тратить на это кучу времени. Глядя на результат, я теперь понимаю, почему некоторые сервисы берут плату за отдельные фичи
Но вот LLM-ки доросли до приемлемого уровня. Я сначала обратился к ChatGPT и после долгих разъяснений получил половинчатый результат, т.к. тот не захотел писать мне 1000 строк кода. Тот, что я получил, не работал, и визуально смотрелся так себе.
Тогда я пошёл за помощью к Claude и на тот же самый запрос он выдал прекрасный результат, который и выглядит хорошо, и сразу же работал. В обоих случаях использовал бесплатную версию.
Ещё пара уточняющих запросов — и сервис был почти готов к продакшену. Но по пути у меня появились новые хотелки, так что я разложил файл на три, открыл VS Code, и продолжил использовать Claude через Copilot. Так увлёкся, что даже в какое-то ограничение упёрся.
Сейчас он готов и я сначала покажу результат, наиболее близкий к предыдущему. Конечно, он не совсем такой. Нужно больше тем, больше фильтров, двойное размытие, добавить источник света, что звучит слишком много в придачу ко всем уже имеющимся настройкам.
Но то, что получилось, уже выглядит на мой взгляд довольно круто. С возможностями, которые я не видел нигде ранее. А если присмотритесь, то увидите ещё одно важное дополнение: выделенный текст тоже рендерится и для него можно задать цвет.
Попробовать можно тут: https://mansiper.github.io/CodeShot/
Код проекта: https://github.com/Mansiper/CodeShot
Всё работает прямо в браузере.
Какие возможности реализованы:
Поддерживается не только код, но и обычный текст со стандартными шрифтами
Для кода выбор темы
Для текста выбор цветов фона и шрифта, настройка выравнивания
Размер шрифта и высота строки
Настройки фона
Настройки отступов
Цвет и прозрачность выделенного текста
Приближение
Скруглённые углы
Стиль окна
Номера строк
Настройка тени
Прозрачность окна
Готовые фильтры (подобно фильтрам в Инсте) с заданием интенсивности
Поворот окна
Наклон окна в глубину по вертикали и горизонтали
Сужение каждой из сторон окна
Размытие с выбором направления и интенсивности
Все изменения сохраняются в local storage
Оставляйте ваши пожелания. По ходу дела буду добавлять новые фичи.
Это мой первый завайбкоженный проект. Без LLM я вряд ли бы за него взялся. Код в файлах не для чтения программистами, так что я его и не пытался форматировать.
И покажите в комментариях, что у вас получилось сделать в моём сервисе.
(тут могла быть реклама моего Телеграм-канала)
