Почему создание простенького превью по ссылкам в Википедии заняло четыре года

https://blog.wikimedia.org/2018/04/20/why-it-took-a-long-time-to-build-that-tiny-link-preview-on-wikipedia/
  • Перевод
История превью страниц.


Когда вы наводите курсор на ссылку, появляются карточки предварительного просмотра (и да, у меня на десктопе мобильный скин Википедии). Текст из статей Википедии об айсбергах и воде, CC BY-SA 3.0. Изображения слева направо, сверху вниз: #1 Ким Хансен, CC BY-SA 3.0; #2 Андреас Вайт, CC BY-SA 4.0; #3 Национальная библиотека Новой Зеландии, CC0

Несколько дней назад моя команда запустила функцию «предварительного просмотра страниц» (превью) в сотнях языковых версий Википедии. Наш API ежеминутно обрабатывает до полумиллиона вызовов для выдачи карточек превью, которые отображаются при наведении курсора на любую ссылку.

На первый взгляд всё очень просто. Такое есть на многих сайтах. На карточке размещается изображение и немного текста — и она отображается при наведении курсора на ссылку. Ничего инновационного… по крайней мере, так может показаться на первый взгляд.

Оригинальная идея этой функции появилась четыре года назад на основе идеи, которую один доброволец/редактор предложил за много лет до этого.

Таким образом, нам потребовалось несколько лет, чтобы выкатить фичу до всех. Это может показаться странным, но как и в айсберге, следует оценить подводную часть.

Нужно было выбрать миниатюру


У нас несколько миллионов страниц — все хранятся в виде необработанного вики-текста. Нельзя было ожидать, что каждую статью отредактируют для выбранной миниатюры.

Ещё в 2012 году Макс Семеник, инженер-программист нашей группы Community Tech, разработал расширение, которое алгоритмически выдаёт наиболее подходящее изображение для статьи.

Как и во всех алгоритмах, он работал не идеально. И поскольку изначально не был предназначен для использования в превью, потребовал специальной настройки.

Пришлось произвести некоторые изменения, чтобы ограничить изображение первым разделом статьи. Работать с алгоритмами сложно, но в данном случае необходимо.

Нужно было сгенерировать резюме


У нас несколько миллионов страниц в вики-тексте. Как сгенерировать резюме для каждой из них, не нагружая этой кропотливой работой наших редакторов?

Макс Семеник, который помог нам с миниатюрами, также является автором расширения для генерации выдержек из статей. Первоначально оно работало преимущественно с текстовым форматом. Мы использовали его в первых версиях превью, но вскоре поняли, что это не лучший вариант.

Тогда мы прекратили им пользоваться.

Мы поняли важность HTML. Например, в статьях по химии встречаются подстрочные знаки, что требует поддержки HTML.



HTML необходим для создания резюме контента, в котором важно наличие подстрочных символов. Текст из англоязычной статьи Википедии о воде, CC BY-SA 3.0; изображение Ким Хансена, CC BY-SA 3.0

Многие из наших статей начинаются с координат и информации о произношении слова. Значительная часть такого контента не входила в резюме, а для остального было не совсем ясно: что сюда включать, а что нет. После изучения множества вариантов дизайна мы определили, какой именно контент не должен отображаться в превью. Затем составили спецификацию, которая закрепляет требуемое поведение.


Координаты места указаны в начале многих статей, но их оказалось проблематично включить в резюме…


…как и информацию о произношении

В конце концов, мы решили работать поверх API, изначально разработанного для нативных приложений Википедии под Android и iOS. Специально для этого мы создали новый API.

Теперь резюме генерируется на основе целой HTML-страницы. Она разбирается как в браузере и согласно спецификации определяется первый «не пустой» параграф каждой статьи.

Одной из главных проблем стало избавиться от текста в скобках. Поскольку мы поддерживаем более 300 языков, то пришлось создавать локализованные решения (не все используют один и тот же набор символов!).

Конечно, некоторые скобки крайне важны… повсюду пограничные случаи. Пришлось продумать все варианты потенциального использования скобок и как лучше всего с ними поступить.


Иногда контент в скобках очень важен, как показывает этот пример. Трудно определить, когда именно он важен. Текст из англоязычной статьи Википедии о периодической таблице элементов, CC BY-SA 3.0; изображение Offnfopt, общественное достояние.

Очистка от скобок пользовательских HTML также оказалась довольно сложной. В текстовом формате нужно лишь простое регулярное выражение, но совсем другое дело разбирать вложенные уровни HTML.

Важно было убедиться, что после удаления контента в скобках содержание по-прежнему имеет смысл — и что мы не добавили никаких уязвимостей безопасности.

Спасибо нашей инфруструктурной группе за помощь в создании этого API.

Мы работаем с сообществом


Для сообщества очень важен результат. Вот почему они пишут для вас статьи в своё свободное время без денежного вознаграждения.

Мы пользовались их помощью на каждом этапе и неустанно работали с ними, разбирая каждый пограничный случай (будь то некорректные резюме или неподходящие изображения). Мы старались убедить их, что работа идёт правильным курсом, объясняли, зачем и почему продолжаем это делать.

Наша первоначальная версия оказалась недостаточно хороша. Сообщество попросило не выпускать её. Мы выслушали мнения и постарались улучшить превью.

Спасибо сообществу и тем пользователям, которые помогли наладить эту коммуникацию!

Дизайн, дизайн, дизайн


На него потратили немало времени. Наш дизайнер Нирзар написал отличную статью, так что я не буду здесь слишком углубляться в эту тему. Но работа над дизайном продолжалась на каждом этапе, будь то первоначальные прототипы (спасибо, Пратек Саксена!), обсуждение фич с группой по производительности, совершенствование эскизов и резюме или обсуждение с сообществом.

Спасибо вам, дизайн-команда!

Надо было провести измерения


Превью по ссылкам — значительное изменение в том, как люди взаимодействуют с контентом. Мы в Викимедиа очень заботимся о конфиденциальности. Вероятно, мы один из немногих крупных сайтов (единственный?!), который не устанавливает сторонние скрипты для отслеживания пользователей.

Наша политика конфиденциальности запрещает выдавать данные о посетителях.

Мы не приглашаем сторонние компании для проведения A/B-тестов или анализа поведения пользователей.

Несмотря на всё это, мы не срезаем углы и не хотим делать глупые рискованные изменения.

Каждый раз, когда мы разрабатываем что-то важное, то приходится создавать строить инфраструктуру для проведения измерений. Мы строим гипотезы и тесты для поверки этих гипотез. Разрабатываем. Тестируем. Изучаем данные. Адаптируем продукт. Снова тестируем.

Это означает, что мы совмещаем в себе обязанности групп разработки и аналитики. Наша команда разработчиков работает в нескольких ипостасях. Учитывая масштаб, встречаются баги. Иногда мы находим крупные баги в браузерах.

Последний A/B-тест Тилмана Байера ответил на многие вопросы. Это занимательное чтиво!

Учитывая результаты этого A/B-теста, мы решили добавить дополнительную метрику для просмотров страниц — просмотры через превью. Эта метрика генерирует 1000 событий в секунду, и наш отдел аналитики трудится в поте лица, пытаясь совладать с таким масштабом.

Спасибо аналитикам, спасибо аналитическому отделу!

Надо был масштабировать API, чтобы поддержать вас


Наш API обрабатывает 0,5 миллиона обращений в минуту.

Наш API обрабатывает 0,5 миллиона обращений в минуту.

Я написал дважды, потому что это реально большой трафик.

Наши традиционные API изначально создавались для ботов, которые подчищают ваши правки. Они не предназначались для читателей.

Сервисная группа Викимедиа оказалась жизненно важна для успеха этого проекта. Она предоставила инфраструктуру, обеспечила большой объём кэширования (мы в значительной степени полагаемся на Varnish) и обеспечила гарантии, что при редактировании контента генерируются новые резюме. Хорошо известно, что инвалидация кэша — одной из самых сложных проблем в информатике.

Спасибо, сервисная команда!

Спасибо, спасибо, спасибо


Любое законченное дело даёт чувство удовлетворения. Надеюсь, что вам понравятся эти «простые» превьюшки, разработанные моей командой при помощи многих других команд со всего Фонда Викимедиа.

В это дело были вовлечены многие — и мы гордимся результатом.

Мы ещё не закончили. Программное обеспечение никогда не бывает законченным.

Нужно ещё почистить кое-какой код и проверить новые идеи, что может вырасти из этой маленькой фичи.

Кто-то может сказать, что сейчас перед нами только верхушка айсберга.

Автор оригинала: Jon Robson; этот перевод распространяется на условиях лицензии CC BY 3.0
Поделиться публикацией
Комментарии 35
    0
    А теперь бы кто сказал, как эту штуку отключить. Только на уровне отключения скриптов в браузере или где-нибудь на сайте настройка есть?
      0

      Нажать внизу страницы "мобильная версия"

        +2
        А мобильная версия меня еще больше раздражает. :)
        Я наоборот, всегда в стандартную переключаюсь.
        +4
        Нужно войти в учётную запись, перейти в настройки и отключить настройку «Всплывающие навигационные окошки, появляющиеся при наведении на вики-ссылку»
          +8
          Кроме того, можно нажать на «шестерёнку» в правом нижнем углу этого всплывающего окна и выбрать отключение гаджета. Ваш выбор сохранится в куках. Создавать для этого учётную запись не требуется. Разумеется, при очистке кук сервер «забудет» выбор и предпросмотр заработает снова.
            +5
            О, это лучше. Просто при любви авторов википедии ставить ссылку на каждое слово, статьи бывает затруднительно читать, сдвинешь мышь не туда и получишь простынку, которая читаемый текст перекрывает. Такое мне нравится меньше, чем необходимость открытия новых окон с уточнением терминов из статьи.
        +9
        Уважаемый переводчик, вы старательно перевели все лицензионные тонкости, связанные с изображениеми (это здорово), но забыли сделать то же самое, относительно материала. Между тем, лицензия CC BY 3.0, под которой распространяется оригинал, требует, кроме ссылки на источник и описания внесённых изменений (это уже сделано: обозначен источник и тот факт, что это перевод), указать имя автора текста (Jon Robson) и лицензию вместе со ссылкой на её текст (CC BY 3.0).

        Проще говоря, требуется в конце текста дописать, что-то вроде «Автор оригинала: Jon Robson; этот перевод распространяется на условиях лицензиии CC BY 3.0».
          –17
          Очень интересная и забавная информация про особенности лицензирования текста, что крайне напоминает самую обычную копирастию.
            +13
            Вы путаете свободу распространения информации с указанием авторства с запретом проигрывать купленную в iTunes музыку из магнитолы в толпе.
              –3
              В данном случае уже есть ссылка на первоисточник, отметка, что это перевод, а там уже можно посмотреть автора. Размещение дополнительного блока с указанием авторства, лицензии и т.д. уже лишняя сущность.
                +9
                Нет, это не лишняя сущность. Это требование лицензии.
                Лицензия требует, чтобы был явно указан автор, дана ссылка на оригинал, дана ссылка на лицензию.
                Это наделяет процесс создания контента и его автора какими-то юридическими правами на творение, которое можно будет доказать в суде, если автора не указали или его творение изменили, но оставили под его именем.

                Рассматривайте это не как «эксцесс копирастии», а как защиту творца, желающего отдать свою работу и остаться её автором, от собственно самого Интернета, который в 99 % «обрезает вотермарки от комиксов».

                  +3

                  Так это скорее косяк Хабра. Раньше кажется автор показыался всегда, а теперь только в подсказке по наведению.



                  Напишите в поддержку хабра лучше.

                    +2
                    Написал, со ссылкой на этот пост и комментарии. Попросил рассмотреть возможность добавления отдельного поля для указания автора и лицензии. Раз Хабр теперь выходит в «международные воды», то надо отходить от принятой в Рунете практики «ссылку указал на оригинал и можно брать».
                      +1
                      Редакторам Хабра 101 раз говорили как правильно сделать оформление переводной статьи. — Им что горохом об…
              0
              По такой логике и лицензия типа GNU GPL, под которой распространяется ПО, тоже «копирастия», ведь она требует явно и интерактивно указать авторов оригинального ПО, а не отделаться ссылкой. То есть, выделить где-нибудь в About место и перечислить там авторов.

              a) добавление информации об изменении в модифицированных файлах;
              b) лицензирование модифицированных версий на условиях GNU GPL;
              c) условное требование интерактивного вывода информации об авторских правах и отсутствии гарантии.


              Есть более пермиссивные лицензии, типа WTFPL, которые не налагают никаких ограничений. Но ведь автор сам волен решать, на каких условиях ему распространять своё творение.
                0
                Она этого не требует, читайте внимательней. В GPL об этом подумали, в CC — нет.
                0
                Нет, это не «копирастия». Это помогает контенту оставаться свободным.

                Я про это уже писал здесь. Там по ссылке отличный пример, как текст, переведённый из одного языкового раздела Википедии не получается перенести в другой языковой раздел из-за того, что по небрежности переводчика контент перестал быть свободным и для его «освобождения» остаётся разве что судиться.
                0
                У вас неправильная придирка, строго говоря. Во-первых, автор перевода не обязан распространять его под той же лицензией CC BY 3.0, а во-вторых, вы, как и автор перевода, не указали лицензию оригинальной работы. Правильно было бы примерно так: «Автор оригинала: Jon Robson; оригинал распространяется на условиях лицензиии CC BY 3.0, а перевод — на условиях <какая-нибудь ещё лицензия>».

                Не то чтоб я считал это особо важным, но забавно, что вы попрекаете переводчика, хотя сами запутались в требовании лицензии.
                  0
                  У меня в голове почему-то было -SA (которое как раз налагает обязанность сохранения лицензии).
                  Вы правы, да.
                0

                Яндекс в мобильной версии поиска давно уже делает выдержку из Википедии, имхо вполне адекватную. Получается разработчики Яндекса сделали свой велосипед, не дожидаясь нативного API?

                  0
                  API в Википедии есть давно. Более того, есть также замечательный проект Wikidata — огромнейшая база данных мировых знаний.
                  0
                  На мой вкус не хватает кеша на клиенте. Кажое наведение на одну и туже ссылку отправляет запрос. Причем запрос уходит даже при быстром проходе курсора над ссылкой которую ты и не собирался смотреть. Можно было бы сэкономить трафика раза в 4.
                  Возможно, я отстал от жизни: )
                    +2

                    Ну а что вы хотели за 4 года… К 2022 доделают.

                      0
                      Есть кеш на клиенте. Если посмотрите внимательно на ответ при наведении на ссылку второй раз, вы получите 304 Not Modified
                        0
                        Я забыл что у меня кеш в devTools отключен.: )
                        Но случайное касание ссылки остается.
                      0
                      Я один эти превью в википедии видел ещё год-два назад, если не больше? Или тут исключительно про мобильную версию (не знаю как там)?
                        0
                        Их тестировали в англовики какое-то время, вероятно, вы там их и видели.
                        Сейчас их включат для всех языковых разделов.
                      0
                      Раз все настолько сложно, то тогда почему у WikiWand все это, и даже больше, было уже несколько лет назад?
                        0

                        Вероятно потому что расширения доступны в публичном доступе и для небольших вики их не так сложно оптимизировать и подкрутить под свои нужды.

                          0

                          UPD: Хотя вы про отдельное приложение вообще… Как там это выглядит?

                        0
                        А мне интересно как сделан уголок, чтобы в нем была картинка фоном. Просто уголок обычно делают рамкой и тогда там будет заливка одним цветом. А тут, наверное, какой-нибудь SVG подключается?
                          0

                          А что мешает


                          посмотреть в инспекторе

                          image


                          ?

                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                        Самое читаемое