Привет, Хабр! Я Антон Гришин, руководитель отдела обработки контента книжного сервиса Строки. Сегодня расскажу о новинке сервиса Строки — анимации книжных обложек и иллюстраций с помощью нейросети. Для пользователей это новый опыт чтения «живой» книги, а для Строк — первый шаг к мультимедийному формату EPUB 3, потенциал которого в России пока никто не использует в полной мере. Это и анимированные детские книги, и функции для создания интерактивных учебников или нон-фикшн-историй — в общем, океан возможностей.
Под катом — описание проекта, много разных анимаций и других возможностей EPUB.
Начнем!
![](https://habrastorage.org/getpro/habr/upload_files/828/4a3/2bb/8284a32bb196db143adff635a8168cc0.png)
Что такое Строки?
Если коротко, Строки — это сервис электронных книг и одноименное издательство, а еще команда книжных энтузиастов, которые очень любят свое дело. Сервис подходит всем читающим людям, даже если они открывают одну книгу в год.
Началось все в 2015 году с МТС Библиотеки: мы предлагали со своей витрины книги Литреса. Но нам очень хотелось развивать свой продукт, проектировать разные пользовательские сценарии и опыт.
В начале 2021 года разработали стратегию кардинального перезапуска интернет-библиотеки. У нас была четкая цель — сделать не «еще одну читалку», а уникальный экосистемный сервис со своей системой подписок, рекомендаций и, конечно, отличным авторским контентом. Считаем, что все удалось.
В феврале 2024 года мы обновили читалку Строк в приложениях для iOS и Android — теперь она поддерживает оформление книг, заложенное в EPUB.
Во время подготовки книг многие наши издатели творят красоту: речь не только о цвете текста и элементах оформления, но и о начертании шрифтов, буквиц, отображении таблиц и формул. Теперь все это доступно нашим читателям. Кроме издательских стилей, новая читалка Строк поддерживает анимацию — о ней и пойдет речь дальше.
Анимация в книгах: зачем добавили и что из этого вышло
Нам хотелось выжать из EPUB-формата максимум — и дать пользователям новый цифровой опыт.
Все началось с предложения нашей CPO Евгении Рыкаловой. Она увидела в соцсетях, как корейская художница в своей анимации «оживила» рисунок слона. И мы подумали: а почему бы не реализовать что-то подобное в Строках?
Так мы решили сделать Строки привлекательнее для современного читателя через более глубокое и объёмное взаимодействие — анимацию. Здесь стоит выделить два направления работы: анимация внутри книг и живые обложки.
Анимация внутри книг
Начали с книг собственного производства (издательства «Строки») — на них пометка Originals. Сейчас в каталоге более полусотни «живых» книг разных жанров — и это только начало.
Вот примеры:
«Библиотека счастливых», Кали Кейс.
«Новые чудеса из старого сундука», Ирина Лейк.
«Канал имени Москвы», Роман Канушкин.
«Внеклассные сыщики. Загадочное похищение в пансионате», Энрике Карлос Мартин.
Для читателей на Хабре мы сделали небольшой подарок. По промокоду IDKFA можно бесплатно оформить подписку «Чуть-чуть» на 90 дней. Успейте активировать до 30 сентября 2024.
Анимация иллюстраций внутри книг задумывалась такой, чтобы не отвлекать пользователя, а украшать издание, дополнять сюжет при помощи визуального ряда. Для детских книг это настоящее волшебство.
Еще мы можем добавлять «живые» декоративные элементы в заголовки — и это тоже выглядит интересно.
Пример
![](https://habrastorage.org/getpro/habr/upload_files/89b/50a/256/89b50a256684be88b1be5f373371d335.gif)
Критики от читателей пока не было — наоборот, мы получаем только положительные отзывы.
Примеры отзыво
![](https://habrastorage.org/getpro/habr/upload_files/9f2/00f/0d4/9f200f0d4f182823dcf4129c3001a9c4.jpg)
Живые обложки
Обложка — первое, что видит читатель при знакомстве с книгой. Анимированные иллюстрации улучшают пользовательский опыт и привлекают больше внимания, выделяют книги среди сотен тысяч других в сервисе.
![](https://habrastorage.org/getpro/habr/upload_files/e7f/735/0b2/e7f7350b23d19e34e73e2749d96784dd.gif)
![](https://habrastorage.org/getpro/habr/upload_files/cb5/c41/b04/cb5c41b0484e5da3417ad88edcc95daa.gif)
Как мы учили нейросеть анимации
Над проектами по анимации трудились несколько команд: iOS- и Android-разработчики, бэкендеры и фронтендеры. Довести проект до прода удалось менее чем за полгода, сама разработка заняла 2–3 месяца.
Чтобы «оживить» обложки, использовали возможности ИИ. Главная сложность была в обучении нейросети, ведь на выходе мы хотели получить приятную для глаза анимацию. Здесь помогли коллеги из Департамента управления технологиями МТС, особенно руководитель направления системной архитектуры Александр Петрухин. Наш СТО Максим Никитин налаживал-отстраивал, учил нейросеть создавать хорошие обложки с полным соответствием содержимому книги.
Конечно, были и неудачные попытки. Некоторые картинки больше подходили для ужастиков, чем для детских книг и романов. Вот несколько примеров:
![](https://habrastorage.org/getpro/habr/upload_files/29e/b24/383/29eb24383b0e4cb2c4b8da4bd8db8131.gif)
![](https://habrastorage.org/getpro/habr/upload_files/1c1/246/2da/1c12462da2f2defe1170c976ddd5c5a9.gif)
![](https://habrastorage.org/getpro/habr/upload_files/8b8/8ef/924/8b88ef924405ae6e14d9c4bec8421e94.gif)
На самом деле нейросеть часто давала то, что требуется, уже с третьего-четвертого раза. Но иногда приходилось пробовать снова и снова — вплоть до 20 или даже больше дублей.
Конечно, мы тестировали новую фичу. Пока у нас только предварительные результаты, основные будут через пару-тройку месяцев. Но мы уже видим интерес читателей к книгам с анимацией.
EPUB — не только анимация. А что еще?
EPUB — это формат электронных книг на базе XML. Анимация — только одна из его фич. Но пока далеко не все издатели и книжные сервисы используют все возможности EPUB.
Обычно все заканчивается форматированием: выделить заголовок, отметить что-то курсивом или полужирным, поставить сноски. Но EPUB предоставляет гораздо больше вариантов оформления книги.
![](https://habrastorage.org/getpro/habr/upload_files/264/38e/7f1/26438e7f1b5fbdcdb48e1d7ddbeb060c.jpg)
C помощью стилей CSS в EPUB можно задать цвет текста и подложки, капительное начертание шрифта или, например, вставить буквицу. А еще красиво оформить диалоги из мессенджеров — такой художественный прием часто используют в современных книгах.
![](https://habrastorage.org/getpro/habr/upload_files/34e/9b8/f5b/34e9b8f5b1464d14f369278300001363.jpg)
Для книг в формате EPUB можно использовать язык векторной графики SVG. Основное его преимущество — масштабируемость без потери качества. SVG подходит для создания схем, формул, карт и иллюстраций — и при этом не утяжеляет файл, как растровые изображения.
SVG поддерживает интерактивность и стили CSS, а это делает его суперпомощником в создании классных EPUB:
![](https://habrastorage.org/getpro/habr/upload_files/8b1/2be/8b5/8b12be8b55e0abf669d39def1ef76d40.png)
Векторный формат SVG подходит для верстки расчетов. В растрированном виде формулы и диаграммы поглотят пиксели, а вес файла при обилии графики будет внушительным — это скажется на скорости загрузки.
Читалка Строк поддерживает и SVG, и стили CSS. Это дает издателям (и нам) больше свободы для творчества, а пользователям — более качественный опыт взаимодействия с электронными книгами.
Ближайшие планы Строк
Глобальная цель — изменить стандарты индустрии. Мы хотим, чтобы электронная книга приобрела свою ценность, а не воспринималась как побочный продукт бумажной. И чтобы читать ее было интереснее — в том числе за счет оформления.
Наша команда планирует и дальше развивать читалку в плане анимации, крутой верстки, медиаконтента — аудио и видео. Но даже в текущей версии есть множество технических возможностей, которые мы только начинаем осваивать — в том числе CSS-анимации. Это когда текст или вся картинка анимированы с помощью простого кода. Например, текст меняет цвет, а картинка двигается — причем именно вся.
А на что вы обращаете внимание при чтении электронных книг? Видели уже где-то анимацию? Делитесь опытом в комментариях.
Комментарии (8)
Gremlinquisitor
02.09.2024 12:34Наверное, я - не ваша целевая аудитория. Мне кажется подобное красивым, но нецелесообразным.
Я читаю много всякого художественного. Избранное имеется в бумажном варианте дома, остальное - электронки. Читаю в FB2 - меньше оформления и прочего. Реально минимум: текст, картинки. Шрифт стандартный, красивости - максимум ПНГшка в заголовке. Книга (особенно без картинок) весит мало.
Почему не EPUB? Потому что слишком много красивостей, шрифты всякое и такое вот. Электронная книга - она для чтения на ходу, немного в спешке. Мне кажется, увеличивать её вес за счёт всяких красивостей - такое себе. Живые обложки хороши как замануха, но не более. Обложки - красивое дополнение, но если в бумажных вариантах они реально привлекают внимание раньше описания, то в электронных - едва ли, ведь книга не стоит на полке, её не разглядывают.
greshin Автор
02.09.2024 12:34Уважаю ваш читательский опыт, но для таких целей вы можете просто отключить в настройках читалки Строк оформление, и оно пропадёт. А в целом электронная книга намного шире, чем чтение едва форматированных текстов жанровой литературы. Там и гипертекст бывает, и таблицы, и формулы, и мультимедиа, и ещё много чего.
shornikov
12 лет назад во времена первого-второго айпада делали книжку с интерактивной анимацией на canvas. Из проблем - только ibook и pageLayout (кажется так называлось). + всякие неожиданные глюки JS в интерпретации Apple. Да, и приходилось каждый раз делать уникальные uuid, иначе кешировалось всё.
Я не очень слежу, но создается впечатление, что ни винда ни андроид за это время не подтянули свои epub3 движки. Думается, если за 12 лет не взлетело - то и фиг с ним. Возни было изрядно с кодингом, нарезкой спрайтов и отладкой: не будут за такие деньги покупать
greshin Автор
12 лет назад это были книжки в отдельных приложениях, совсем другие технологии и рынок другой. Сейчас речь про технологии, которые работают уже сейчас, не стоят как самолёт и доступны всем издателям. А когда поддержим EPUB3 с JS, такие книги будут не где-то отдельно в магазине, а среди других книг сервиса с доступом по тем же правилам.
shornikov
Я 12 лет назад сделал *.еpub: c аудиодорожкой с подсветкой читаемого слога, анимацией и поддержкой тачей.
В iBooks все это было, но не пропагандировалось, просто поддерживалось движком сафари "искоропки". Если у вас свое приложение - то вы изобретаете существующий велосипед. Оправдаться можно только тем, что для андроида ничего подобного так и не вышло. Я не говорю что своя апликуха это плохо.
Но намекаю, что если (на самом деле я не в курсе современных реалий, но думаю был бы инфоповод за эти годы) на Apple это не взлетело за 10+лет, то это повод призадуматься.
Под самолетными технологиями вы подразумеваете электронные журналы из Индизайна в app?
greshin Автор
Да на самом деле это всё поддерживается теперь внутри самих книжных приложений, Books для iOS, Kindle для всех платформ. На Android это в том числе гугловское приложение, вот они недавно сделали анонс интерактивных детских книг https://www.electrobooks.media/post/besplatnye-interaktivnye-detskie-knigi-ot-google
Ваш опыт 12-летней давности показал, что как отдельные приложения такие книги не очень жизнеспособны. Но сейчас можно их делать быстрее, дешевле и (в мире) можно публиковать в книжных сервисах с огромной аудиторией.