IgorVolochayandClaude Sonnet 5.5
1263aade8b
Replace the 822-row sample with a 6-row example.csv. Link the Outlier Saver extension from the README and both empty screens. Set nginx server_name to outliers.viaproger.ru. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
183 lines
11 KiB
Markdown
183 lines
11 KiB
Markdown
# Thumbnail Tinder
|
||
|
||
Приложение для итогового отбора превью. Оно работает с файлами браузерного расширения Outlier Saver, которое сохраняет видео с аномально высокими просмотрами (outliers).
|
||
|
||
Вы загружаете CSV из расширения и листаете видео как в Tinder: превью, название, просмотры, подписчики и outlier score. Свайп вправо — нравится, влево — нет. В конце приложение отдаёт новый CSV в том же формате, но только с понравившимися видео. Отдельная страница показывает отобранное сеткой, как главная YouTube.
|
||
|
||
- Сайт: https://outliers.viaproger.ru/
|
||
- Расширение для браузера, которое создаёт CSV: [outlier-saver-extension](https://gitea.viaproger.ru/volochay/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](https://gitea.viaproger.ru/volochay/outlier-saver-extension). Короткий пример на 6 видео лежит в репозитории: `example.csv`.
|
||
|
||
## Локальный запуск
|
||
|
||
Откройте `index.html` в браузере двойным кликом. Ничего устанавливать не нужно.
|
||
|
||
Файлы `index.html`, `liked.html` и `style.css` должны лежать в одной папке. Шрифты (Google Fonts) и превью (`i.ytimg.com`) подгружаются из интернета. Без сети интерфейс работает, но превью не покажутся.
|
||
|
||
Если нужен локальный сервер:
|
||
|
||
```bash
|
||
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`](deploy/nginx.conf).
|
||
|
||
### 1. Установите nginx
|
||
|
||
```bash
|
||
sudo apt update
|
||
sudo apt install nginx
|
||
```
|
||
|
||
### 2. Выложите файлы приложения
|
||
|
||
Нужны только три файла. CSV и остальное на сервер класть не надо.
|
||
|
||
```bash
|
||
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. Подключите конфиг
|
||
|
||
```bash
|
||
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
|
||
|
||
```bash
|
||
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 не нужно:
|
||
|
||
```bash
|
||
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:
|
||
|
||
```bash
|
||
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` базовую авторизацию:
|
||
|
||
```nginx
|
||
auth_basic "Thumbnail Tinder";
|
||
auth_basic_user_file /etc/nginx/.htpasswd;
|
||
```
|
||
|
||
```bash
|
||
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, покажутся без картинки.
|