Как работают сервисы типа websvodka.ru?

Question

[Кир Марченко]

Прочитал про них статью на хабре:
habrahabr.ru/company/embc/blog/249075

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

и здесь:

Как такое может быть реализовано?

Comments

[Therapyx]

прочитал как web vodka... :D

[Кир Марченко]

Therapyx: нас много :)

[sitev_ru]

чай с лимоном, web s vodka ))

Answer 1

[Алексей Уколов]

Дизайн страницы зависит от css.
Css зависит от html.
Чтобы сохранить дизайн страницы нужно сохранить html.
Чтобы сохранить html нужно строить AST обеих версий и показывать изменения на максимально глубоком уровне.

Comments

[Кир Марченко]

Получается, для корректного сохранения страницы придется либо выкачивать все скрипты/изображения и css, либо преобразовывать относительные ссылки в абсолютные чтобы при открытии файла локально они брались с сервера, а изменения оборачивать в теги с измененным background-цветом?

[Алексей Уколов]

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

Answer 2

[nirvimel]

Как сделать простое текстовое сравнение понятно

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

Я хорошо знаю эту тему, потому что однажды писал подобное. Тема сложная, готовых решений нет, универсальных подходов тоже нет (мое описание упрощено на порядок), куча разных граничных случаев, мозг закипает от одной только декомпозиции задачи. В общем я так и не закончил решение в тот раз, спонсор потерял веру в проект, а без финансирования на голом энтузиазме такого масштаба проекты не заканчиваются в одиночку. До сих пор мечтаю продолжить, пусть на других технологиях, но с большим опытом в этой теме.

Comments

[Кир Марченко]

>А вот и совсем не понятно, потому что текстового сравнения HTML там нет.

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

[nirvimel]

Кир Марченко: Так вы что HTML как строку разбираете? Я вам говорю про при принципиально иное решение. Прочитайте еще раз мой ответ. Самый первый шаг - это парсинг HTML в DOM-дерево (на самом деле lxml-документ это аналог DOM в javascript) и дальше работа только с ним, никакого строкового месива из тегов.

[Кир Марченко]

nirvimel: я понял идею, спасибо, я говорю как сейчас сделан вариант который не устраивает. Python + lxml на вход принимают исходник страницы, на выход дают массив строк.

Пример со стэковерфлоу:
from lxml import html
from lxml.html.clean import clean_html

tree = html.parse('www.example.com')
tree = clean_html(tree)

text = tree.getroot().text_content()

и никакого месива из тегов.

[nirvimel]

Кир Марченко: tree.getroot().text_content()
Ну и как потом все это собирать обратно в документ?

[Кир Марченко]

nirvimel:
>я говорю как сейчас сделан вариант который не устраивает

Answer 3

[s0ci0pat]

С помощью HTML и CSS