Привет, Хабр! Я Антон Гришин, руководитель отдела обработки контента книжного сервиса Строки. Сегодня расскажу о новинке сервиса Строки — анимации книжных обложек и иллюстраций с помощью нейросети. Для пользователей это новый опыт чтения «живой» книги, а для Строк — первый шаг к мультимедийному формату 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-анимации. Это когда текст или вся картинка анимированы с помощью простого кода. Например, текст меняет цвет, а картинка двигается — причем именно вся.
А на что вы обращаете внимание при чтении электронных книг? Видели уже где-то анимацию? Делитесь опытом в комментариях.
Комментарии (39)
kablag
02.09.2024 12:34это в читалках на электронных чернилах тоже заработает? Есть бесплатные примеры куска книги с анимацией?
greshin Автор
02.09.2024 12:34Да, на читалках на Android работает, можете поставить туда Строки и проверить. В бесплатных фрагментах есть анимации, можете полюбопытствовать.
olku
02.09.2024 12:34Жаль на Kindle все эти фишки epub недоступны. Такой рынок интерактивных книг зажали своими проприетарным стандартом. Epub это мини сайт в зипе, частично поддерживает JS, всякого интересного можно сделать.
greshin Автор
02.09.2024 12:34+1Да, именно это (большая доля читалок с электронными чернилами и не очень сильным железом) сдерживает развитие формата интерактивных книг в мире. Но ничего, говорят, в 2025 следующая линейка Киндлов будет уже с цветными экранами Gallery 3, а это совсем другое дело.
kablag
02.09.2024 12:34да, вот про это и был вопрос. Понятно - не заработает
greshin Автор
02.09.2024 12:34Вопрос был про читалки на электронных чернилах :) Они разные, Киндлы - отдельная история, а среди других есть немало читалок на Android, на которые можно ставить любые книжные приложения, включая Строки.
Gremlinquisitor
02.09.2024 12:34+4Наверное, я - не ваша целевая аудитория. Мне кажется подобное красивым, но нецелесообразным.
Я читаю много всякого художественного. Избранное имеется в бумажном варианте дома, остальное - электронки. Читаю в FB2 - меньше оформления и прочего. Реально минимум: текст, картинки. Шрифт стандартный, красивости - максимум ПНГшка в заголовке. Книга (особенно без картинок) весит мало.
Почему не EPUB? Потому что слишком много красивостей, шрифты всякое и такое вот. Электронная книга - она для чтения на ходу, немного в спешке. Мне кажется, увеличивать её вес за счёт всяких красивостей - такое себе. Живые обложки хороши как замануха, но не более. Обложки - красивое дополнение, но если в бумажных вариантах они реально привлекают внимание раньше описания, то в электронных - едва ли, ведь книга не стоит на полке, её не разглядывают.
greshin Автор
02.09.2024 12:34Уважаю ваш читательский опыт, но для таких целей вы можете просто отключить в настройках читалки Строк оформление, и оно пропадёт. А в целом электронная книга намного шире, чем чтение едва форматированных текстов жанровой литературы. Там и гипертекст бывает, и таблицы, и формулы, и мультимедиа, и ещё много чего.
dimaaannn
02.09.2024 12:34+1Но зачем это всё?
То есть я понимаю потенциал инструментов, но будем честны - ещё очень много лет никто не будет писать техническую литературу с форматированными таблицами и гипертекстом. В первую очередь потому что рынок заточен под бумажные книги, а во вторую - из за слишком жадных издателей электронных книг. Техническая литература, что в электронном, что в бумажном виде стоит неадекватно дорого.
greshin Автор
02.09.2024 12:34Да вот у нас лет 10 всё в таком состоянии находилось: читалки не умели, издатели не хотели. В этом году хотя бы читалка одного из сервисов начала уметь))
legos27
02.09.2024 12:34Сама по себе электронная книга, где с должным вниманием подошли к разметке и вёрстке, уже радует душу и глаз. Эппл в айбуксе здорово поработали с разными настройками и деталями: полка с книгами, загрузка обложек, перелистывание страницы в виде микроанимации, статистика, напоминание о чтении, всё это помогает — книгу хочется читать, сервисом хочется пользоваться. В целом, книжные сервисы так и просят оживления: прочитал книгу: анимации поздравления. Добавил книгу к себе в библиотеку: по экрану начали падать блоки в виде тегов и эмоций людей кто ее прочитал, или соответствующие жанру. На каждом этапе взаимодействия с книгой добавить деталей и это как игра начнет сильнее затягивать.
Вы пошли дальше, анимации классная деталь, здорово получилось. Как раз такие детали, как по мне, сильнее на уровне ощущений дадут погрузиться в книгу. Интересно было бы в динамике читать аниме, наверняка видели, как на ютубе энтузиасты занимаются подобным. Конечно, это кропотливый труд, но вполне можно попробовать автоматизировать.
А скажите еще — по звукам, не хотели добавить каких-то шумов? Например, шум моря или стрекота сверчков когда это соответствует ситуации или, скажем, начало какой-то главы или книги. Чтобы создать нечто среднее между полноценной аудиокнигой и обычной, но с еще большим погружением в атмосферу?
greshin Автор
02.09.2024 12:34Спасибо! Да, аудио в книгах скоро будет у нас. Тут вопрос к издателям тоже: как быстро они сориентируются и поймут, что такие книги, с анимацией, мультимедиа, да просто с хорошей вёрсткой делать уже можно. Надеюсь, следующая статья на Хабре будет уже про мультимедиа в книгах :)
freeznah
02.09.2024 12:34А там еще немножко добавить, подкрутить и бац--зумеры изобрели мультипликацию
shornikov
02.09.2024 12:34+1Разметка и верстка в электронных книгах от лукавого.
Либо она есть и тогда у вас просто hi-res картинка с возможностью поиска, либо вы меняете под себя кегль, интервал и прочее - но основной задачей читалки становится разместиться на странице абы как. Висячие строки, коридоры, половинки картинок или почти пустые страницы будут вашим постоянным спутником.greshin Автор
02.09.2024 12:34Кажется, вижу невероятное обобщение. Есть пара десятков книжных жанров/направлений, вёрстка которых выглядит на бумаге совершенно узнаваемо и книги из этих жанров не похожи друг на друга. У лучших издателей, занимающихся электронными книгами, эти особенности сохраняются с помощью грамотной вёрстки в EPUB с использованием CSS. Вы как-то умудряетесь всё это многообразие упростить до каких-то "электронных книг" и также выставляете требования из мира полиграфии (висячие строки, коридоры), которым электронные книги вообще не обязаны соответствовать, потому что живут по правилам веб-публикаций (хотя на типографику забивать не стоит, конечно).
shornikov
02.09.2024 12:34+1Приведите пожалуйста пример жанро-верстки. Я вас не понимаю.
Как по мне - книга на электронном устройстве в первую очередь колбаса развлекательно-позновательного текста.
Если там есть картинки, формулы, графики то рассматривать ее на 6 дюймах или, не дай бог, телефоне можно только от безысходности. Добавть туда возможность менять кегль ни один css не спасет. А производить электро-книжки, отобрав возможность у пользователя изменить стилевое оформление - вообще за гранью.Возможно мы по разному трактуем "верстку". Для меня это умение получить равномерно распределенный текст максимального объема на странице, при этом страница начинается и кончается логично, а читать комфортно. Как можно сделать её разной, но при этом имеющей характерные признаки к узнаванию на два десятка вариантов - ума не приложу. Да, можно узнать стихи, пьесы, художественные тексты и протоколы допроса - но вы явно не это имели в виду.
greshin Автор
02.09.2024 12:34Под вёрсткой я имею в виду оформление всех элементов книги. Вот примеры электронных книг разных жанров одного издательства (Альпина). Могли бы сделать по одному шаблону, но постарались и теперь их книги не похожи друг на друга, как и печатные варианты.
Сто лет недосказанности (научпоп) https://stroki.mts.ru/book/sto-let-nedoskazannosti-kvantovaya-mekhanika-dlya-vsekh-v-25-esse-267374
Если ты, то я (YA-проза) https://stroki.mts.ru/book/yesli-ty-to-ya-261018
Пиши, сокращай 2025 (по сути учебник) https://stroki.mts.ru/book/pishi-sokraschay-2025-kak-sozdavat-silniy-tekst-242551
Дальний лог (проза) https://stroki.mts.ru/book/dalniy-log-uralskiye-rasskazy-266916
Пятно (еще проза) https://stroki.mts.ru/book/pyatno-260828
Переиграть Уолл-стрит (бизнес) https://stroki.mts.ru/book/pereigrat-uoll-strit-85368
Как смотреть кино (нон-фикшн для детей) https://stroki.mts.ru/book/kak-smotret-kino-2878
Приключения кота Альфреда (проза для детей) https://stroki.mts.ru/book/priklyucheniya-kota-alfreda-85236
achekalin
02.09.2024 12:34Скажите, почему в Строках нет простого функционала чтения через синтез речи телефона? Начитанные диктором книги - это отлично, но вот когда книгу никто не начитал, а хочется послушать её, напр, в метро - как быть?
Т.е. я вопрос решил отказом от Строк, в пользу другой читалки. Которая умеет взять fb2 и просто читать в наушники.
maxlilt
02.09.2024 12:34В книге нужно на основании полного текста сформировать образы персонажей и окружения, а затем делать краткий пересказ главы с участием конкретизированных образов и обозначив общий стиль отправлять... хотя бы в Runway.
AquariusStar
02.09.2024 12:34Интерактивные книги — это уже интересно. Особенно хорошо подойдут для учебных пособий. Так как там, бывает, нужна анимация. На Хабре статьи тоже бывают с анимацией. Поэтому логично, если интерактивная книга тоже будет поддерживать анимацию. И не только.
При покупке электронной версии книги предпочитаю брать именно ePub, если есть. Так как такой формат адекватно переваривает любой экран. Остальные форматы беру только в качестве запасного.
greshin Автор
02.09.2024 12:34Да, всё так! Векторная SVG-анимация ещё и места в памяти почти не занимает, тоже работает над тем, чтобы полноценно её поддержать в Строках.
jodana
02.09.2024 12:34Я внимательно изучил книги, приведенные в качестве примера. На мой взгляд их отличие от обычной простыни с текстом совершенно несущественно. А качество дизайнерских решений весьма спорно. Буквица - повод для отдельного разговора.
jodana
02.09.2024 12:34
Вы сказали: "которым электронные книги вообще не обязаны соответствовать, потому что живут по правилам веб-публикаций (хотя на типографику забивать не стоит, конечно). "
Правила хорошего тона не из воздуха появляются.greshin Автор
02.09.2024 12:34Трудно комментировать рандомные скриншоты из каких-то книг. Висячие строки - да, нам стоит доработать в читалке. Оторванные одно-двухбуквенные слова - проблема конкретного EPUB, если это считать проблемой. Я считаю, что ни то, ни другое не является критичным для веб-публикаций. К электронным книгам с плавающим макетом нельзя применять все требования типографики для печатных книг, где макет зафиксирован навечно. Эти 2 вещи можно доработать. Но если вам не нравится формат EPUB сам по себе, то можно не мучаться и читать PDF :)
jodana
02.09.2024 12:34В смысле рандомных? Это из списка, приведенного в комментарии выше.
greshin Автор
02.09.2024 12:34Виноват, не узнал их по этим фрагментам :) По критичности этих моментов написал выше, больше похоже на придирки (на мой взгляд). А вот что стоит отметить, так это то, что у этих книг есть хорошее стилевое оформление всех элементов книги и для каждого жанра, а иногда и для каждой конкретной электронной книги, оно своё. Например, всё сложное оформление книги Ильяхова, с этими подчёркиваниями, таблицами и прочим, полностью адекватно содержанию книги и помогает ей выполнить свою задачу. Это большой плюс в книгах Альпины. И в читалке Строк это прекрасно видно, потому что она отображает все заложенные стили.
jodana
02.09.2024 12:34
Антон, при всем уважении к нелегкому труду - нет в этой книге идеала, как и в читалке.
jodana
02.09.2024 12:34Для человека читающего висячие строки = бесячие строки, потому что они видны на протяжении всего времени погружения в процесс чтения. Оторванные слова - практически тоже самое; не хотелось бы бросаться в тщательное сравнение, потому что не явлюсь поклонником какого-то другого формата, но, смею заметить, одна из конкурирующих площадок победила эту проблему, несмотря на декларируемое вами всюду мнение о том самом формате. (Да, я специально прочитал статьи на вашем сайте и посмотрел электрокниги). Ваше утверждение о "проблеме конкретного EPUB" весьма спорно.
И вы в статье предлагаете читателю анимацию обложки, видимость которой в процессе чтения составляет менее 0,1%?
Если ваша статья за EPUB сам по себе, то предлагать мне читать pdf несколько странно.
Если ваша статья за анимацию, то она не окупает всех недоработок вашей читалки.
Если ваша статья за svg, то у меня еще вопрос: А как увеличить это svg-изображение, если оно мелкое? К своему стыду, я не смог найти и способа увеличить обычную картинку в читалке Строк, даблтапом не получается. Научите.
Вы привели в качестве примера несколько книг. Книг, сделанных не вами, сделанных не очень красиво, сверстанных довольно шаблонно и показанных в читалке не очень умело.Я за электронные книги в целом, читаю в эпловской читалке, если не нахожу епаб - читаю в fb2.Ничего не имею против epub, приветствую каждую новую книгу в электронном виде.
Вам выше привели данные о том, что вы не застрельщики, вы всего лишь подражатели, но с амбициями. Амбиции это прекрасно, когда они подтверждаются делами, фактами, цифрами.
По сути, ваша статья всего лишь громкий возглас: мы научились посылать запросы в ИИ, иногда получаем адекватную картинку и научили свой порт браузера кое-как понимать css! Не весь и не всегда корректно.Читателя вы уже ничем не увлекли.
Сквозящий сквозь статью и комментарии призыв "Налетай, издатель" вообще ничем не подкреплен.
Вы можете привести какие-то цифры, которые подтвердят рентабельность дополнительных операций при создании субъективного epub?Вы можете назвать стоимость этих дополнительных работ?
Вы можете привести цифры, которые потвердят сравнительную востребованность красивых анимированных книг?
Мне кажется, что вы зашли не в ту дверь. (с)
P.S. Что такое web-публикация и с чем ее едят?
Я читаю книги в достаточно четко описанном формате, на экране с четко определенными границами.
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-летней давности показал, что как отдельные приложения такие книги не очень жизнеспособны. Но сейчас можно их делать быстрее, дешевле и (в мире) можно публиковать в книжных сервисах с огромной аудиторией.
shornikov
Вы почему-то пропихиваете мысль, что раньше нельзя а вот теперь - пожалуйста.
EPUB версии 3 появился черт знает когда, и с тех пор не изменился, кмк.
Это ваша читалка ТЕПЕРЬ поддерживает его возможности.
greshin Автор
Он потихоньку меняется, актуальная спецификация EPUB 3.3. А почему акцентирую внимание - да потому что до этого уровня развития читалки российских книжных сервисов еще не добирались. Мировые - сколько угодно, но это отдельные экосистемы, которыми очень непросто пользоваться из России, особенно сейчас.