thumbnail-tinder/README.md

Thumbnail Tinder

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

Вы загружаете CSV из расширения и листаете видео как в Tinder: превью, название, просмотры, подписчики и outlier score. Свайп вправо — нравится, влево — нет. В конце приложение отдаёт новый CSV в том же формате, но только с понравившимися видео. Отдельная страница показывает отобранное сеткой, как главная YouTube.

• Сайт: https://outliers.viaproger.ru/
• Расширение для браузера, которое создаёт CSV: outlier-saver-extension

Приложение статическое: три файла, без сервера, базы данных и сборки. Файл CSV читается прямо в браузере и никуда не отправляется.

Как пользоваться

1. Отбор: index.html

1. Перетащите CSV на страницу или нажмите «Выбрать файл».

2. Оценивайте видео:

   Действие	Мышь / тач	Клавиатура
   Нравится	свайп вправо или кнопка «Нравится»	→ или D
   Не нравится	свайп влево или кнопка «Не нравится»	← или A
   Пропустить (отложить)	кнопка «Пропустить» вверху или свайп вверх	↑ или S
   Отменить последнее решение	«Отменить»	Z или Backspace
   Открыть видео на YouTube	«Открыть на YouTube» или клик по названию	Enter

3. Нажмите «Скачать CSV». Получится файл <имя исходного файла>-liked.csv. Скачать можно в любой момент, не обязательно оценивать всё.

Формат результата. Понравившиеся строки копируются из исходного файла без изменений: те же колонки, кавычки, BOM и переводы строк (CRLF), исходный порядок. Если выгрузить все строки, получится файл, идентичный исходному.

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

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

На карточке под числом outlier score есть шкала от 1× до 1000× (логарифмическая), на ней отмечено, где находится видео.

2. Галерея: liked.html

Откройте её кнопкой «Галерея» и загрузите скачанный …-liked.csv. Подойдёт и любой CSV из расширения.

• Сетка: 2 колонки на узком экране, 3 на среднем, 4 на широком.
• На карточке: превью, название, канал, просмотры, подписчики, outlier score.
• Сортировка: как в файле, по outlier score, по просмотрам, по подписчикам, по дате добавления.
• Клик по превью или названию открывает видео, клик по каналу открывает канал.

Формат входного CSV

Обязательные колонки: videoId, title, thumbnailUrl. Остальные показываются, если есть:

videoId,title,url,thumbnailUrl,channelTitle,channelUrl,subscribers,views,outlierScore,isShort,foundOn,firstSeenAt,updatedAt

Файл создаёт расширение Outlier Saver. Короткий пример на 6 видео лежит в репозитории: example.csv.

Локальный запуск

Откройте index.html в браузере двойным кликом. Ничего устанавливать не нужно.

Файлы index.html, liked.html и style.css должны лежать в одной папке. Шрифты (Google Fonts) и превью (i.ytimg.com) подгружаются из интернета. Без сети интерфейс работает, но превью не покажутся.

Если нужен локальный сервер:

python3 -m http.server 8080
# http://localhost:8080

Развёртывание на сервере (nginx)

Сайт развёрнут на https://outliers.viaproger.ru/. Для своего сервера нужен Linux (ниже команды для Debian/Ubuntu) и домен, у которого A/AAAA-запись указывает на сервер. Ниже вместо ВАШ.ДОМЕН подставьте outliers.viaproger.ru или свой домен. Порты 80 и 443 должны быть открыты.

Конфиг: deploy/nginx.conf.

1. Установите nginx

sudo apt update
sudo apt install nginx

2. Выложите файлы приложения

Нужны только три файла. CSV и остальное на сервер класть не надо.

git clone <адрес-репозитория> ~/thumbnail-tinder
cd ~/thumbnail-tinder

sudo mkdir -p /var/www/thumbnail-tinder
sudo install -m 644 index.html liked.html style.css /var/www/thumbnail-tinder/

3. Подключите конфиг

sudo cp deploy/nginx.conf /etc/nginx/sites-available/thumbnail-tinder
sudo sed -i 's/outliers.viaproger.ru/ВАШ.ДОМЕН/' /etc/nginx/sites-available/thumbnail-tinder
sudo ln -s /etc/nginx/sites-available/thumbnail-tinder /etc/nginx/sites-enabled/

sudo nginx -t && sudo systemctl reload nginx

Если nginx -t ругается на конфликт server_name или на порт, проверьте, не включён ли стандартный сайт default: sudo rm /etc/nginx/sites-enabled/default.

Проверьте: http://ВАШ.ДОМЕН должен открыть приложение.

4. Включите HTTPS

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d ВАШ.ДОМЕН

Certbot сам добавит блок listen 443 ssl, редирект с HTTP и настроит автопродление сертификата. Проверить продление: sudo certbot renew --dry-run.

После этого по желанию включите HSTS: добавьте в блок server с listen 443 строку
add_header Strict-Transport-Security "max-age=31536000" always;
Делайте это только когда уверены, что HTTPS работает стабильно.

5. Обновление

Статика раздаётся без сборки, перезапускать nginx не нужно:

cd ~/thumbnail-tinder
git pull
sudo install -m 644 index.html liked.html style.css /var/www/thumbnail-tinder/

HTML отдаётся с Cache-Control: no-cache, а style.css кэшируется на 1 час, поэтому изменения стилей могут появиться у пользователей с задержкой до часа.

Что делает конфиг

• Белый список путей. Отдаются только /, /index.html, /liked.html и /style.css. Всё остальное (CSV, .git, README) отвечает 404, даже если файл случайно окажется в папке.
• Только GET и HEAD. Остальные методы получают 405.
• Content-Security-Policy. Разрешены только ресурсы самого сайта, шрифты с fonts.googleapis.com и fonts.gstatic.com и превью с i.ytimg.com. Запросы из скриптов запрещены (connect-src 'none'): приложение ничего не отправляет по сети, CSV остаётся в браузере. Встроенные скрипты и стили разрешены через 'unsafe-inline', потому что они лежат прямо в HTML.
• Прочие заголовки: X-Content-Type-Options, X-Frame-Options: DENY, Referrer-Policy: no-referrer, Permissions-Policy.
• Сжатие gzip, кодировка UTF-8, отдельные логи thumbnail-tinder.*.log.

Если вы добавите новую внешнюю зависимость (другой шрифт, CDN-скрипт), обновите CSP в конфиге, иначе браузер её заблокирует.

Проверка конфига без сервера

Конфиг можно проверить в Docker:

docker run --rm -p 8080:80 \
  -v "$PWD/deploy/nginx.conf":/etc/nginx/conf.d/default.conf:ro \
  -v "$PWD":/var/www/thumbnail-tinder:ro \
  nginx:alpine
# http://localhost:8080

Доступ только для себя

Приложение не хранит данных на сервере, но если не хотите, чтобы им пользовались посторонние, добавьте в блок server базовую авторизацию:

auth_basic "Thumbnail Tinder";
auth_basic_user_file /etc/nginx/.htpasswd;

sudo apt install apache2-utils
sudo htpasswd -c /etc/nginx/.htpasswd ИМЯ

Структура

index.html        отбор: свайпы и экспорт CSV
liked.html        галерея понравившихся
style.css         общие стили и цвета
deploy/nginx.conf конфиг nginx
example.csv       пример входного файла (6 видео)

Ограничения

• Прогресс хранится в localStorage браузера: он не переносится между браузерами и устройствами, и очистка данных сайта его удалит. Результат лучше скачать до этого.
• Для превью берётся maxresdefault.jpg, а если его нет, ссылка из CSV. Видео, удалённые с YouTube, покажутся без картинки.