Quote Finder, 2023–2024: цитата с подсветкой в статье-источнике, скриншоты и видео

С лета 2023 года до весны 2024 года я работал над Quote Finder для консалтинговой компании в Лондоне. Инструмент брал статью по ссылке, находил в ней нужную цитату и делал скриншоты и видео именно этого места: цитата подсвечена жёлтым и стоит в центре экрана. Это один из проектов, о которых я рассказываю на странице Разработка для консалтинговой компании в Лондоне, 2023–2024.

Задача

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

Работали мы непосредственно по ссылкам на статьи.

Что получалось на выходе

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

На выходе получались скриншоты и видео этого места статьи. На них видны издание, оформление страницы и текст вокруг цитаты, так что источник можно проверить сразу. Готовые файлы сохранялись в Google Drive.

Как это было устроено

Всё работало на сервере Google. Страницу открывал headless Chrome, то есть браузер без окна, поэтому статья отображалась почти так же, как у обычного читателя. Управлял им Puppeteer: загрузить статью по ссылке, найти нужный фрагмент, подсветить его, прокрутить страницу так, чтобы цитата оказалась посередине, и записать скриншот или видео.

Похожая задача

Если нужно автоматически снимать, проверять или сохранять веб-страницы и их фрагменты, такие задачи я решаю в рамках автоматизации рабочих процессов и API-интеграций. В том же сотрудничестве я делал Scraper Hub, сервис сбора новостей с множества сайтов. Остальные проекты описаны на странице Разработка для консалтинговой компании в Лондоне, 2023–2024.

Опишите, какие страницы и что на них нужно фиксировать. Обсудить задачу