🚀 Клиентская часть проекта FrameReader — одностраничное React-приложение для обработки видео с платформы Rutube с помощью технологий компьютерного зрения и распознавания текста (OCR).
framereaderdemo.mp4
| Функция | Описание |
|---|---|
| Обработка видео Rutube | Пользователи вводят URL видео с Rutube, бэкенд автоматически загружает и обрабатывает видео. |
| Интуитивный интерфейс | Красивое анимированное поле ввода URL и кнопка обработки с плавными переходами. |
| Встроенный Rutube плеер | Воспроизведение оригинального видео с платформы Rutube прямо в интерфейсе. |
| Визуализация OCR результатов | Наложение аннотаций распознанного текста поверх видеоплеера в реальном времени. |
| Аналитика сессий | Сбор анонимных данных о пользовательских сессиях и обработках видео для улучшения сервиса. |
| WebSocket соединение | Получение результатов обработки в реальном времени через WebSocket подключение. |
| Адаптивный дизайн | Оптимизирован для работы на различных устройствах и размерах экрана. |
Приложение построено как Single Page Application на React, обеспечивающее быстрое взаимодействие без перезагрузки страницы.
- Автоматический сбор анонимных куки пользовательских сессий
- Отслеживание сессий обработки видео для статистики
- Хранение только обезличенных данных без персональной информации
- Соответствие требованиям конфиденциальности данных
- Прямая работа с видео-ссылками Rutube
- Встроенный плеер для воспроизведения оригинального контента
- Автоматическое извлечение метаданных видео
- Динамическое наложение результатов OCR поверх видео
- Синхронизация аннотаций с временными метками
- Интерактивные элементы для взаимодействия с распознанным текстом
- Node.js >= 18.x
- npm >= 8.x (Node Package Manager)
- Git для клонирования репозитория
- Современный веб-браузер с поддержкой ES6+ и WebSocket
# Клонирование репозитория с веткой client
git clone -b client https://github.com/Prischli-Drink-Coffee/FrameReader.git
# Переход в директорию проекта
cd FrameReader# Установка всех npm пакетов из package.json
npm install
# Альтернативно, для чистой установки:
npm ciСоздайте файл .env.local на основе существующих конфигураций:
# Копирование конфигурации для локальной разработки
cp .env.development .env.localОсновные переменные окружения:
# URL бэкенд API сервера
REACT_APP_API_URL=http://localhost:8010/server
# Дополнительные настройки (опционально)
REACT_APP_WS_URL=ws://localhost:8010/ws
REACT_APP_ENV=development# Запуск dev-сервера с hot reload
npm startПриложение будет доступно по адресу http://localhost:3000.
# Создание оптимизированной сборки
npm run build
# Предварительный просмотр продакшен сборки
npm run previewСобранные файлы будут находиться в папке build/.
client_repo/
├── public/ # Статические файлы (index.html, favicon, etc.)
├── src/ # Исходный код React-приложения
│ ├── components/ # Переиспользуемые UI-компоненты
│ ├── pages/ # Страницы приложения
│ ├── services/ # Сервисы для взаимодействия с API
│ ├── utils/ # Вспомогательные утилиты
│ └── App.js # Главный компонент приложения
├── package.json # Описание проекта и зависимости
├── package-lock.json # Заблокированные версии зависимостей
└── .gitignore # Файлы и папки, игнорируемые Git
- Поле ввода URL — анимированное поле для вставки ссылки на Rutube видео
- Кнопка обработки — запуск процесса анализа видео с красивой анимацией загрузки
- Rutube плеер — встроенный видеоплеер с оригинальным контентом
- Слой аннотаций — наложенные результаты OCR с временными метками
| Переменная | Описание | Пример |
|---|---|---|
REACT_APP_API_URL |
URL бэкенд сервера | http://localhost:8010/server |
REACT_APP_WS_URL |
WebSocket эндпоинт | ws://localhost:8010/ws |
REACT_APP_ENV |
Среда выполнения | development или production |
Все запросы к бэкенду проходят через централизованный API клиент в src/services/api.js, который автоматически добавляет необходимые заголовки и обрабатывает ошибки.
Откройте консоль разработчика (F12) для просмотра:
- Состояние WebSocket соединения
- API запросы и ответы
- Ошибки рендеринга компонентов
- Аналитические события
| Проблема | Возможное решение |
|---|---|
| Не работает подключение к API | Проверьте REACT_APP_API_URL в .env |
| Видео не загружается | Убедитесь, что URL от Rutube корректный |
| WebSocket разрывается | Проверьте настройки сети и фаервола |
| Аннотации не отображаются | Проверьте консоль на JavaScript ошибки |
# Сборка проекта
npm run build
# Установка статического сервера
npm install -g serve
# Запуск продакшен версии
serve -s build -l 3000- Проверьте консоль браузера на наличие JavaScript ошибок
- Убедитесь в корректности URL — принимаются только ссылки Rutube
- Проверьте подключение к бэкенду — сервер должен быть запущен на
localhost:8010 - Очистите кэш браузера и перезагрузите страницу
- Создайте issue в репозитории с подробным описанием проблемы
Включите в описание:
- Скриншоты интерфейса
- Логи из консоли браузера
- Шаги для воспроизведения проблемы
- Информацию о браузере и ОС
- FrameReader Server — Основной бэкенд-сервер с REST API и WebSocket
- FrameReader Train — Модуль обучения моделей компьютерного зрения и OCR
- FrameReader Triton Server — Высокопроизводительный inference сервер на NVIDIA Triton и Ray Serve