Создание изображений в едином стиле для статей блога

Deprecated: str_replace(): Passing null to parameter #1 ($search) of type array|string is deprecated in /var/www/jsd/data/www/jsd.ru/plugins/system/admintools/src/Feature/CustomAdminFolder.php on line 83
Создание изображений в едином стиле для статей блога https://www.jsd.ru/web/titov-center-yuri-titov-health-center/creating-images-in-a-consistent-style-for-blog-articles 2024-05-14T20:31:26+00:00 jsd.ru Joomla! - Open Source Content Management О чём этот фильм? Да ни о чём. 2024-03-19T17:54:50+00:00 2024-03-19T17:54:50+00:00 https://www.jsd.ru/web/titov-center-yuri-titov-health-center/creating-images-in-a-consistent-style-for-blog-articles/o-chjom-etot-film-da-ni-o-chjom -ist0rik-

**Немного лирики (вместо вступления).** Чтобы нейросеть могла сгенерировать нужное пользователю изображение, сначала нужно составить текстовое описание того, что мы хотим увидеть – промт (англ. Promt – подсказка), как это модно нынче называть. Чтобы создать описание изображения, подходящего для статьи блога, статью нужно сначала прочитать, затем осмыслить, после этого включить фантазию и представить себе визуальный ряд в соответствии с сутью статьи. Полученную в голове картинку можно смело записывать буквами. Процесс трудоёмкий и даже, в некоторой степени, ответственный. Кроме того: прочитать статью может каждый, некоторые даже осмыслить, а вот включить фантазию – это уж кому как по жизни повезло. В любом случае, наша основная задача – сделать процесс рутинным и относительно простым для исполнения почти любым, даже не очень квалифицированным исполнителем. Вдруг на Кворк работу сдавать придется, а там, как известно, исполнителей много, а квалифицированных мало. В общем, попробуем упростить процедуру передав основную часть мыслительных процессов той фиговине, которую для этого и делали те, кто вроде как это дело делать умеет. З.Ы.: Можно "работу мозга" проигнорировать и использовать в качестве промта заголовок статьи, но конкретно для этой задачи результат получается не подходящий.

В примере будем использовать [браузерную версию GigaChat](https://developers.sber.ru/gigachat/login). Иллюстрацию будем создавать для статьи [Программа "Подготовка к Школе": готовим первоклассников к успешному старту](https://www.titov.center/blog/school-preparation-program). Чтобы получить желанный промт для иллюстрации статьи блога, пишем в чате: ***Создай короткое текстовое описание иллюстрации к статье, текс которой приведен ниже:*** После этой фразы нужно вставить полный текст статьи. Для перевода строки, но не отправки сообщения, нажимаем **Shift + Enter**.

Полученный результат выглядит вполне адекватно, хоть и смахивает на описание зарисовки класса дошколят. Ну, собственно, из статьи трудно вытянуть что-то другое. Если результат устраивает не полностью, то можно самостоятельно внести коррективы в промт. Оценить нужны ли какие-то коррективы в промте лучше всего по результатам генерации изображения, а не сейчас. В нашем примере будем пробовать использовать промт "как есть". *Иллюстрация к статье представляет собой изображение группы детей, которые занимаются подготовкой к школе. Дети сидят за партами и внимательно слушают учителя, который объясняет им материал. На заднем плане можно увидеть школьные принадлежности и учебники. Иллюстрация передает атмосферу обучения и подготовки к школе, а также подчеркивает важность этого этапа в жизни каждого ребенка.*

Для генерации изображения будем использовать [браузерную версию нейросети Kandinsky](https://fusionbrain.ai/). Помещаем промт целиком, но без каких-либо дополнений в специально созданный для него отсек. Выбор стиля 2024-03-19T19:53:17+00:00 2024-03-19T19:53:17+00:00 https://www.jsd.ru/web/titov-center-yuri-titov-health-center/creating-images-in-a-consistent-style-for-blog-articles/vybor-stilya -ist0rik-

Теперь нужно перейти на вкладку "**Стиль**" и выбрать "**Рисунок карандашом**" из богатого списка доступных стилей. Вообще, стиль не обязательно выбирать в принципе, - достаточно прописать его в произвольной форме в промте, но конкретно в нашем примере вся суть кроется именно в выборе стиля из пресетов. Теперь можно нажимать на желто-зелёную кнопку с какой-то мигающей фигнёй для запуска генерации.

Первый результат оказался вполне приличным, по крайней мере, соответствующий описанию. Но нам он не подходит, т.к. получилась школа, где детей уму учат, а нам нужно что-то ближе к центру здоровья, где люди на детях деньги зарабатывают. А то если родители увидят советсткую школу на картинке, где детишек полон класс, то деньги в такое место не понесут, а захотят бесплатно. Чтобы убедиться в стабильность выдачи нужно повторить генерацию три-пять раз. Лучше сохранять (скачивать) каждый результат, т.к. этот фарш невозможно будет провернуть назад. В нашем случае выход был вполне стабильный и постоянно выдавал типичную школу в несколько отличных интерпритациях. Вывод очевидный - нужно корректировать промт.

После изменения промта и нескольких попыток генерации удалось добиться вполне качественного результата, на нём и остановимся. Особое внимание при выборе окончательного варианта картинки, если в кадре есть люди (а они у нас точно есть), стоит обратить на конечности, особенно на руки, особенно на пальцы. Да, "ржать" частенько предстоит в голос, но выкладывать на публику такую смехоту точно не стоит. Добивайтесь годного результата. Измененный промт выглядит так: *Иллюстрация к статье представляет собой изображение трёх детей, которые занимаются подготовкой к школе. Дети сидят за столами и внимательно слушают педагога, который объясняет им материал. Иллюстрация передает атмосферу обучения и подготовки к школе, а также подчеркивает важность этого этапа в жизни каждого ребенка.* Основные изменения: - уменьшено количество детей (в штуках); - парты заменены на столы (чтобы меньше на школу смахивало); - учитель заменен на педагога (но на изображении ни первым ни вторым даже не пахнет); - удалено предложение, в котором описывались декорации заднего плана как в школе. Ну и не забывайте: Кандинскому порой глубоко вдоль относительно нюансов и деталей, что Вы пишите в своём промте.

Оригинальный png файл сгенерированного изображения перемещен в папку постоянного хранения изображений для данного сайта на локальном компьютере. Имя файла изменено на алиас статьи: `school-preparation-program.png` В результате генерации порой возникают по краям незаполненные прозрачные области, которые при конвертации в JPEG превращаются в цветные (белые) полосы, от такого сюрприза лучше избавиться заблаговременно, поэтому воспользуемся Фотошопоп или любой другой софтиной, которая может отрезать прозрачные участки по краям. Хотя, можно кропнуть и вручную, но это грустно. PhotoShop -> Изображение -> Тримминг... В появившемся окне выбрать опцию "Прозрачных пикселов", В секции "Обрезка" все флаги должны быть активны. После применения изменений достаточно просто сохранить полученный результат без применения дополнительных опций.

Теперь нужно оптимизировать изображение для сайта. В принципе, можно и оригинальную PNGшку загрузить, но у неё слишком большой объём и излишне большое разрешение для наших целей, поэтому так делать не хорошо. Для штучной оптимизации отлично подойдёт всё тот же Фотошоп. PhotoShop -> Файл -> Экспортировать -> Сохранить для Web В окне оптимизации важно следующее (такие настройки важны только для данной инструкции): - Формат оптимизированного файла - JPEG - Качество сжатия - Среднее (30) - Размер изображения 480 x 480 пикс. Сохранить файл, задав ему имя в соответствии с [нашим внутренним стандартом](/web/standardization-issues-when-creating-a-website/standardization-of-image-file-sizes-and-names): `school-preparation-program_sq_m_q30.jpg`

Осталось загрузить оптимизированное JPEG изображение на сайт, в папку с другими изображениями для блога, и привязать его к статье. Теперь можно наслаждаться результатом и смело идти генерировать картинки и для других статей блога: они все будут выполнены в технике карандашного рисунка, что вполне коррелирует с тематикой сайта и вносит приятное единообразие в оформление. В оформлении статьи изображение "позеленело", так настроен шаблон вывода статьи блога на сайте: иллюстрация выводится в качестве фона пустой ячейки конструктора, под фон подложен один из основных цветов сайта (#5FAAA5), а к самому фону применён режим наложения "жесткий свет". Такие возможности даёт [визуальный конструктор YOOtheme Pro](https://yootheme.com/page-builder), работающий внутри Joomla или WordPress