Компания
505,20
рейтинг
25 октября 2013 в 10:59

Разработка → Яндекс научился распознавать и объединять серии изображений

Яндекс.Картинки сегодня сделали важный шаг в своём развитии и в развитии поиска по картинкам. Результаты поиска теперь не будут просто набором картинок по заданным вами словами. Теперь в результатах некоторые изображения могут быть объединены вместе. Мы называем это «сериями».

image

«Серии» — это изображения, которые встречаются в интернете вместе и визуально похожи. За подбор картинок отвечает алгоритм иерархической кластеризации. Он берёт все изображения с той или иной страницы и выделяет группу похожих — тех, которые обладают общим цветом, формой, деталями и так далее. Если на странице есть хотя бы четыре похожих (но не одинаковых) картинки, то они образуют Серию.

Читайте под катом, почему у нас возникла идея делать Серии, как мы придумывали их дизайн и реализовывали алгоритм.

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

Для чего это нужно? Например, чтобы научиться складывать оригами дракончика, вам наверняка захочется посмотреть картинку с каждым шагом. Нужно несколько изображений и в том случае, если вы хотите рассмотреть автомобиль с разных сторон. И, наверное, будет отлично, если это картинки из одного обзора.

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

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

Благодаря количественным опросам, мы знаем, что 70% пользователей периодически нужно найти инструкцию, у которой должны быть иллюстрации, а у 20% такая потребность возникает каждую неделю. Эта статистика подтверждается и запросами — 9% всех запросов к поиску по изображениям Яндекса связаны с поиском инструкций. И они бывают на абсолютно разные темы.

image
В процессе обсуждения этой проблемы у нас родился проект «Серии». Мы стали думать, как отбирать изображения, чтобы получить не только релевантный, но и красивый ответ, который бы дополнил выдачу картинок.

Благодаря интервью с приглашёнными пользователями, UX-тестированию, множеству обсуждений внутри команды и данных беты во внутренней сети Яндекса, мы выстроили у себя более стройное понимание такой возможности и сформулировали некоторые требования.

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

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

Как Серии устроены технически


Сгруппируем картинки в серии похожих в рамках страниц, на которых они встречаются вместе. То есть, если на странице www.example.com встретились картинки
www.example.com/1.jpg,
www.example.com/2.jpg,
www.example.com/3.jpg,
www.example.com/4.jpg,
попробуем объединить их в серию. Серия — это группа картинок, которые попарно визуально похожи друг на друга.

Мы хотим кластеризовать эти картинки по визульной схожести. То есть найти подгруппу картинок, которые достаточно похожи между собой. Кластеризовать будем с помощью жадного алгоритма иерархической кластеризации. По-английски этот алгоритм называется complete linkage clustering using nn-chain algorithm. Чтобы прийти к успеху, нам понадобится метрика похожести картинок, кластеризация с помощью которой давала бы кластера-группы с нужными нам свойствами.

Что это за свойства?
  1. Одни и те же предметы или сцены, снятые с разных ракурсов, должны быть в одном кластере;
  2. Одни и те же предметы или сцены, выполненные в разных цветах на изображении, должны быть в одном кластере;
  3. Фотографии из одной фотосессии, в которых достаточно общих цветов и деталей, должны быть в одном кластере.
  4. В кластере должны быть картинки примерно одного размера и т.д.

Для того чтобы что-то похожее получилось, мы выбрали три вида дескрипторов:

Описания можно найти, например, в стандарте mpeg-7. У нас свои быстрые и эффективные реализации.

На основе этих дескрипторов вычисляется визуальная похожесть, как максимум по визуальной похожести по отдельным дескрипторам. Это позволяет удовлетворить первые три хотелки. Чтобы учесть размеры, мы вычитаем из визуальной похожести отношение площадей картинок (max/min). На основе этой метрики мы и осуществляем кластеризацию.

Дизайн


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

С момента начала работы над проектом мы перепробовали около десятка разных вариантов дизайна. Три из них прошли тестирование как на внешних пользователях, так и на наших коллегах.

Мы увидели, что внешне пользователям нравится больше один дизайн.

image

Но понятнее им другое представление, и с ним они больше взаимодействуют.

image

В итогом варианте мы учли лучшее из обоих вариантов.

image

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

Где серии вам помогут


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

С ними легче искать похожие по стилю изображения — картины одного художника или подборки фотографий из одной фотосессии. Ещё они помогут рассмотреть с разных сторон автомобиль, товар или достопримечательность.
Автор: @asayko
Яндекс
рейтинг 505,20

Комментарии (47)

  • –6
    Но сам поиск отстой. Испортился 1-2 года назад. Например ворованные картинки, выдаются вперед оригиналов (сейчас я так понимаю вы это сделали еще лучше). По некоторым тематикам найти нужное невозможно (при этом Гугл хорошо находит). Лет 5-6 назад я проводил сравнение, для начальства, поисков по картинкам, Яндекс был на уровне.
    • +9
      А вы не могли бы показать примеров того, о чём говорите?
    • 0
      А я вот наоборот картинки ищу только на яндексе, в то время как основным поиском пользуюсь гугловским. Яндекс.Картинки гораздо удобнее на мой взгляд
  • +4
    Со стороны пользователя несколько не понятна ситуация, когда в серию выделяются разные изображения, часть которых просто-напросто скрывается. Я бы предпочёл видеть все картинки с конечного сайта на поисковой странице.



    ps. можете сюда якорь повесить?
    • +2
      Поисковая выдача формируется из множества картинок с учетом их релевантности. При этом изображения с одной страницы могут иметь разные значения релевантности и, как результат, картинки с одной веб-страницы будут разбросаны по выдаче. Серии объединяют такие картинки в единый блок. Что касается про количество картинок в серии. В ходе UX-исследований мы выяснили, чтобы составить понимание переходить на сайт или нет нужно не более 10-12 картинок. А чтобы просто заинтересоваться страницей — 3-х достаточно. Серии помогают выбрать нужный пользователю сайт, где есть не только хорошие картинки, но и описание к ним.
      • 0
        Тогда хотя бы при раскрытии серии показывайте весь набор изображений. Сейчас получается, что я не перейду на сайт потому что вообще не вижу потенциально интересных изображений
  • +30
    В догонку — обнаружил, что сайт начал умничать



    Не хватает кнопочки-ссылочки «спасибо, я сам разберусь когда включать фильтр» (ну или как-то так)
    • +1
      Да, в Атоме обещали кнопочку отключения, но похоже эта кнопочка будет также автоматически включаться через 2 часа. Круто. И не наврали, и сделали что хотели.
    • +6
      Если говорить техническим языком, то при применении фильтра «без ограничений» мы снимаем все пороги фильтрации порно, и кажется неправильным надолго оставлять поиск в таком «раскрепощённом» виде.

      Например, пошёл папа / мама / оба вместе вечером смотреть чего-нибудь пикантное, фильтр сняли, насладились и выключили компьютер.

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

      Вообще, эту автоматическую настройку можно изменить в настройках портала в разделе «Фильтрация страниц» yandex.ru/search/customize. Если поставить «без ограничений» по умолчанию, то он никуда переключаться не будет.



      За идею со ссылочкой — спасибо, подумаем над этим.
      • +6
        Вот опять очередной высосанный из пальца пример. Я даже не буду говорить о нелепости и невозможности у нормальных родителей ситуации «посмотрели через Яндекс порнуху, а сын с утра решил найти фотку мокрой кошки» (а если такое и случилось – сами дураки, Яндекс им не поможет), я хочу просто риторически поинтересоваться: вы действительно делаете так ради заботы за гипотетическими детьми, следить за которыми – не ваша в общем-то забота? Вот никак не могу поверить, честно говоря. Вот если скажете, что вас достают какие-то общественные организации, прижимают цензоры, вечером звонит Путин и просит выключать неограниченный поиск через два часа, мне и того как-то будет в это легче поверить.
        • 0
          Хоть вопрос и риторический, но отвечу на него: да, действительно делаем так, как удобнее большинству пользователей. Любая фича перед внедрением проходит серьёзное тестирование. И даже два часа не просто так :)

          К сожалению, не могу облегчить вам жизнь и наврать, что нас прижимают цензоры и разнообразные общественные организации…
      • +3
        Надо отдать должное, «семейный поиск» по запросу «мокрая киска» показывает мокрых кошек. Браво
      • +1
        Спасибо, что подобное «заботливое» поведение (пока что?) ещё хоть отключаемое…
      • 0
        Вам не кажется что по умолчанию фильтра быть не должно? Или то что в шапке сайта красненьким должно быть написано что вы применяете какой-то там фильтр?
        • 0
          Сейчас имхо всё хорошо, кроме отсутствия отключалки насовсем в баббле.
  • +4
    Попробовал, отчитываюсь.

    Ищу в поиске картинок: «Создание печатной платы методом лазерного утюга».
    Хочу найти: easyelectronics.ru/sozdanie-pechatnoj-platy-metodom-lazernogo-utyuga.html
    Получаю: набор несвязанных картинок, хотя на искомой странице пошаговая инструкция в картинках, которые логично было бы объединить в серию.

    На 2-й странице есть похожий результат с другого сайта, и те картинки объединились в серию. А на первой странице почему не объединились-то?
    • +4
      Спасибо за пример! Разберемся, почему серия не поклеилась для вашей страницы.
      • +6
        Аналогичный пример по запросу «Фото урок: укрепление ногтей биогелем» (моя девушка ведет блог) — в выдаче соответствующая страница www.nanogtyah.ru/urok/2011/10/04/foto-urok-ukreplenie-nogtey-biogelem.html стоит первой (статье около двух лет с уникальным контентом, и судя по статистике переходов, полезная для определенной категории пользователей) однако в выдаче картинок все разбросано, и включает аналогичные скопированные фото на других доменах. Движок на котором работает сайт дает картинкам имена типа 09de4e.jpg Может для корректного распознавания серий надо менять имена файлов на последовательные? Или в alt тега img писать типа «этап 1», «шаг 2»?
      • 0
        «рецепт пирога по шагам» тоже все разбросано
  • 0
    Тут сначала были фотки какой-то дамбы (или плотины) с разных ракурсов. Как вы определяете что это одно и то же? Это примерно как сфоткать человека со спины и с лица. И сказать — да это же один парень. Или Вы просто смотрите, что эти картинки с одной страницы (ну или хотя бы с одного сайта)?
    • 0
      В статье описаны принципы
  • –2
    Серии — это важный шаг, но когда будет поиск по изображению?
    • +6
      • +1
        Да, оказывается есть.

        За поиск по картинкам разработчикам отдельное спасибо. Но… Мне понадобилось 4 минуты, что бы понять, как его использовать. Без обид, но ни хрена не понятно, что поиск по картинке включается маленькой иконкой справа.
        • 0
          А где вы ожидали увидеть этот поиск? По какой кнопке или по какому действию он должен активироваться с вашей точки зрения?
          • 0
            Для тех, кто уже знает — можно как сейчас, а для тех, кто не в курсе — надо как-то написать, привлечь внимание что ли… Ну никак незнающему человеку не догадаться, что надо нажать мааааленькую сеееренькую кнопочку в уголку.
            • 0
              Спасибо.
          • 0
            В догонку сделайте примерно как написал shara выше
          • 0
            Чтобы не было путаницы рассмотрим два момента:

            — Момент первый — Вы знаете про кнопку. Тут отчасти всё удобно. Нажал на кнопку — появился loading-page — закинул картинку — получил результат.
            Хотя лучше сделать loading-page не скрытой (чтобы кнопку не нажимать) и ещё отдельной страницей. У google, например, loading-page весь заголовок.

            — Момент второй — Вы не знаете про кнопку. То тут догадаться, что кнопка — это поиск по картинкам, практически не возможно, т.к. нет подписи действия этой кнопки, например, как в меню слева.
            • 0
              Ок, принято, спасибо.
          • 0
            В гугле, например, можно картинку перетащить мышой на поле поиска, не нажимая предварительно кнопочек :)
          • +2
            Если в Гугле ввести в поле запроса URL картинки, то он предлагает: «For matching images, try search by image».

            Пример: https://www.google.com/search?q=http://example.com/1.jpg

            Хотелось бы по запросу http://yandex.ru/yandsearch?text=http://example.com/1.jpg иметь аналогичное поведение.
  • 0
  • +1
    Идея очень крута!
  • –3
    Я за что-то похожее на хабр попал в своё время.
  • +10
    image
    • +3
      Зашел в пост, чтобы увидеть эту картинку :)
  • +3
    Сделайте писк по времени. Например когда ищешь первоисточник или автора важно найти где было первое упоминание материала. Самая старая страничка в базе.
  • 0
    Сделайте пожалуйста что бы клик по превью картинки на черном фоне — открывал оригинальное изображение, а не листал, как сейчас, на следующую картинку!!!!1!!1
    Или хотя бы сделайте чтобы это можно было опционально включить.
    • 0
      Расскажите, чем неудобна большая кнопка для открытия картинки?
      • +1
        интуитивно чтобы открыть картинку, хочется нажать именно на неё, а не искать справа кнопку «Открыть nnn x nnn». Для листания картинок есть же стрелки справа и слева, а также есть выбор ниже в табнейлах.
        Алгоритм, нажми на превью картинки — откроешь большую картинку, используется повсеместно. На яндекс картинках, каждый раз обламываться, действует на нервы.
        • 0
          По проведенным UI-тестированиям такой способ листания показался удобнее пользователям. Они привыкли к такому взаимодействию по опыту использования галерей в соц. сетях. Для открытия большого размера картинки есть большая кнопка с разрешением изображения.
          • 0
            Такое поведение характерно для яндекс-фоток, где важно пролистать все изображения, а в поиске картинок я хочу (возможно большинство полльзователей будет пользоваться иначе и вцелом яндексу выгоднее делать интерфейс под них) посмотреть картинку в полном размере.
            +иногда напрягает когда превьюшка одна, а открывается картинка с рамочкой (демотиваторы) или наоборот.

            p.s. в соцсетях страшно тыкать на картинку, т.к. можно случайно лайкнуть, поэтому выработал привычку листать стрелочками.
  • +2
    Вот если бы ещё дубликаты и аналоги с разных сайтов в выдаче сразу группировались бы, а не засоряли её повторами… Раз уж у вас такая крутая сравнивалка картинок есть, думаю это реализуемо.
  • 0
    Мы над этим работаем
  • 0
    Идея хорошая, спасибо!
    Попробовал ради интереса добиться в выдаче группы картинок. В итоге оказалось, что (1) если фраза односложная, то группы картинок не появятся, (2) если поисковая фраза очень популярна, то группы картинок также не появятся. Чтобы добиться в поисковой выдаче группу картинок надо запрашивать (3) не избитую или узкоспециализированную тему, (4) или что-то, что уже, быть может, скомпоновано с помощью человеческого интеллекта или персонального труда.
    На мой взгляд надо стремиться обобщить и сгруппировать результат (1) и (2). А наличие групп в (3) и (4) объясняется вот этой фразой, которая положена в основу нового алгоритма:
    … Например, изображения должны быть с одной страницы...

    Такой подход действительно упрощает алгоритм, однако могут обескуражить те случаи, когда группировка была бы возможна, но её нет. А всё потому, что односложные (1) и популярные (2) ответы как правило находятся на разных страницах. В этом случае надо бы добавить новые критерии группировки. Напрашивающийся пример: Если картинки с разных страниц, то группировать их по критерию визуальной похожести. Иначе такие простые запросы, как «набережная», «петербург», «дворцовый мост», «платье», не будут сгруппированы, однако будет сгруппирован более конкретный запрос «платье dolce gabbana».

    Привожу пример, который в выдаче напрашивается на группировку:
  • +1
    Не все кошки детектед.

    i.imgur.com/qSLw1FM.png

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

Самое читаемое Разработка