Привет, Хабр! Я Антон Гришин, руководитель отдела обработки контента книжного сервиса Строки. Сегодня расскажу о новинке сервиса Строки — анимации книжных обложек и иллюстраций с помощью нейросети. Для пользователей это новый опыт чтения «живой» книги, а для Строк — первый шаг к мультимедийному формату EPUB 3, потенциал которого в России пока никто не использует в полной мере. Это и анимированные детские книги, и функции для создания интерактивных учебников или нон-фикшн-историй — в общем, океан возможностей.
Под катом — описание проекта, много разных анимаций и других возможностей EPUB.
Начнем!
Что такое Строки?
Если коротко, Строки — это сервис электронных книг и одноименное издательство, а еще команда книжных энтузиастов, которые очень любят свое дело. Сервис подходит всем читающим людям, даже если они открывают одну книгу в год.
Началось все в 2015 году с МТС Библиотеки: мы предлагали со своей витрины книги Литреса. Но нам очень хотелось развивать свой продукт, проектировать разные пользовательские сценарии и опыт.
В начале 2021 года разработали стратегию кардинального перезапуска интернет-библиотеки. У нас была четкая цель — сделать не «еще одну читалку», а уникальный экосистемный сервис со своей системой подписок, рекомендаций и, конечно, отличным авторским контентом. Считаем, что все удалось.
В феврале 2024 года мы обновили читалку Строк в приложениях для iOS и Android — теперь она поддерживает оформление книг, заложенное в EPUB.
Во время подготовки книг многие наши издатели творят красоту: речь не только о цвете текста и элементах оформления, но и о начертании шрифтов, буквиц, отображении таблиц и формул. Теперь все это доступно нашим читателям. Кроме издательских стилей, новая читалка Строк поддерживает анимацию — о ней и пойдет речь дальше.
Анимация в книгах: зачем добавили и что из этого вышло
Нам хотелось выжать из EPUB-формата максимум — и дать пользователям новый цифровой опыт.
Все началось с предложения нашей CPO Евгении Рыкаловой. Она увидела в соцсетях, как корейская художница в своей анимации «оживила» рисунок слона. И мы подумали: а почему бы не реализовать что-то подобное в Строках?
Так мы решили сделать Строки привлекательнее для современного читателя через более глубокое и объёмное взаимодействие — анимацию. Здесь стоит выделить два направления работы: анимация внутри книг и живые обложки.
Анимация внутри книг
Начали с книг собственного производства (издательства «Строки») — на них пометка Originals. Сейчас в каталоге более полусотни «живых» книг разных жанров — и это только начало.
Вот примеры:
«Библиотека счастливых», Кали Кейс.
«Новые чудеса из старого сундука», Ирина Лейк.
«Канал имени Москвы», Роман Канушкин.
«Внеклассные сыщики. Загадочное похищение в пансионате», Энрике Карлос Мартин.
Для читателей на Хабре мы сделали небольшой подарок. По промокоду IDKFA можно бесплатно оформить подписку «Чуть-чуть» на 90 дней. Успейте активировать до 30 сентября 2024.
Анимация иллюстраций внутри книг задумывалась такой, чтобы не отвлекать пользователя, а украшать издание, дополнять сюжет при помощи визуального ряда. Для детских книг это настоящее волшебство.
Еще мы можем добавлять «живые» декоративные элементы в заголовки — и это тоже выглядит интересно.
Пример
Критики от читателей пока не было — наоборот, мы получаем только положительные отзывы.
Примеры отзывов
Живые обложки
Обложка — первое, что видит читатель при знакомстве с книгой. Анимированные иллюстрации улучшают пользовательский опыт и привлекают больше внимания, выделяют книги среди сотен тысяч других в сервисе.
Как мы учили нейросеть анимации
Над проектами по анимации трудились несколько команд: iOS- и Android-разработчики, бэкендеры и фронтендеры. Довести проект до прода удалось менее чем за полгода, сама разработка заняла 2–3 месяца.
Чтобы «оживить» обложки, использовали возможности ИИ. Главная сложность была в обучении нейросети, ведь на выходе мы хотели получить приятную для глаза анимацию. Здесь помогли коллеги из Департамента управления технологиями МТС, особенно руководитель направления системной архитектуры Александр Петрухин. Наш СТО Максим Никитин налаживал-отстраивал, учил нейросеть создавать хорошие обложки с полным соответствием содержимому книги.
Конечно, были и неудачные попытки. Некоторые картинки больше подходили для ужастиков, чем для детских книг и романов. Вот несколько примеров:
На самом деле нейросеть часто давала то, что требуется, уже с третьего-четвертого раза. Но иногда приходилось пробовать снова и снова — вплоть до 20 или даже больше дублей.
Конечно, мы тестировали новую фичу. Пока у нас только предварительные результаты, основные будут через пару-тройку месяцев. Но мы уже видим интерес читателей к книгам с анимацией.
EPUB — не только анимация. А что еще?
EPUB — это формат электронных книг на базе XML. Анимация — только одна из его фич. Но пока далеко не все издатели и книжные сервисы используют все возможности EPUB.
Обычно все заканчивается форматированием: выделить заголовок, отметить что-то курсивом или полужирным, поставить сноски. Но EPUB предоставляет гораздо больше вариантов оформления книги.
C помощью стилей CSS в EPUB можно задать цвет текста и подложки, капительное начертание шрифта или, например, вставить буквицу. А еще красиво оформить диалоги из мессенджеров — такой художественный прием часто используют в современных книгах.
Для книг в формате EPUB можно использовать язык векторной графики SVG. Основное его преимущество — масштабируемость без потери качества. SVG подходит для создания схем, формул, карт и иллюстраций — и при этом не утяжеляет файл, как растровые изображения.
SVG поддерживает интерактивность и стили CSS, а это делает его суперпомощником в создании классных EPUB:
Векторный формат SVG подходит для верстки расчетов. В растрированном виде формулы и диаграммы поглотят пиксели, а вес файла при обилии графики будет внушительным — это скажется на скорости загрузки.
Читалка Строк поддерживает и SVG, и стили CSS. Это дает издателям (и нам) больше свободы для творчества, а пользователям — более качественный опыт взаимодействия с электронными книгами.
Ближайшие планы Строк
Глобальная цель — изменить стандарты индустрии. Мы хотим, чтобы электронная книга приобрела свою ценность, а не воспринималась как побочный продукт бумажной. И чтобы читать ее было интереснее — в том числе за счет оформления.
Наша команда планирует и дальше развивать читалку в плане анимации, крутой верстки, медиаконтента — аудио и видео. Но даже в текущей версии есть множество технических возможностей, которые мы только начинаем осваивать — в том числе CSS-анимации. Это когда текст или вся картинка анимированы с помощью простого кода. Например, текст меняет цвет, а картинка двигается — причем именно вся.
А на что вы обращаете внимание при чтении электронных книг? Видели уже где-то анимацию? Делитесь опытом в комментариях.
