SparkGuardian Antiplagiat Frontend
Клиентское веб-приложение для управления процессами алгоритмической проверки академических работ на заимствования, работающее поверх REST API системы SparkGuardian Antiplagiat.
A premium single-page web client for managing algorithmic plagiarism checks, handling ZIP course uploads, and reviewing source code overlaps, built on top of the SparkGuardian Antiplagiat REST API.
О проекте
Приложение предназначено для преподавателей, ассистентов и администраторов учебного процесса. Оно позволяет прозрачно и эффективно анализировать сдачу программного кода студентами с применением методов лексической токенизации и алгоритма шинглов (Shingling & Jaccard). Фронтенд построен в соответствии со строгими стандартами T-Bank Design System, полностью адаптивен и предоставляет мощные встроенные инструменты для конфигурации правил анализа.
Ключевые возможности
- Landing Page: Современная маркетинговая страница с метриками системы и процессом выполнения проверок (pipeline).
- Управление мероприятиями и группами: Полный CRUD для удобного распределения курсовых и потоков, чтобы исключить пересечения проверок между разными годами.
- Загрузка ZIP-архивов: Массовое добавление работ (Works) — система на лету распаковывает архивы и распределяет их по студентам выбранной группы.
- Reference Sets (Эталоны): Управление коллекциями шаблонного исходного кода, позволяющими игнорировать заготовки и базовые классы при расчете плагиата.
- Анализ заимствований (Analysis Runs): Запуск фоновых задач проверки совпадений, использующих построение AST и N-граммы, благодаря чему переименование переменных не скрывает факт списывания.
- Выгрузка отчетов: Мгновенная генерация сводных деталей совпадений в PDF, HTML, и JSON форматах с тепловыми картами заимствований (heatmap overlaps).
- Встроенная Dev-Console: Полноценная in-app консоль разработчика для перехвата API-запросов (
dev-log.interceptor) прямо в интерфейсе браузера, без открытия Network Tab. - Мониторинг инфраструктуры: Доступ к таблице журнала телеметрии и аудита для отслеживания загруженности серверов.
- Уведомления: Интеллектуальная классификация HTTP-ошибок (Network/Timeout/Parse) с человекочитаемыми сообщениями.
Технологический стек
| Область | Выбор |
|---|---|
| Фреймворк | Angular 21 (Signals, OnPush, Standalone) |
| Язык | TypeScript (strict-mode) |
| UI & Дизайн | Taiga UI v5, кастомные токены T-Bank CSS (color-tokens.css) |
| Взаимодействие | HttpClient, RXJS, Interceptors |
Архитектурные особенности
- Слоевая структура: Строгое деление на
core(синглтоны, DI-токены, интерсепторы),features(lazy-loaded самостоятельные компоненты) иshared(чистые pure-функции и date-time утилиты). - Производительность: Использование
ChangeDetectionStrategy.OnPushповсеместно. Lazy-loading вкладок (@defer).
Локальная настройка и конфигурация
- Скопируйте
.env.exampleв.envи настройте значения (например,SG_API_BASE_PATH,SG_API_FALLBACK_ORIGIN). - Выполните:
npm install(илиmake install). - Синхронизируйте переменные (вызывается авто-hooks):
npm run env:sync. Создаетenvironment.ts. - Запуск dev-сервера с прокси:
npm start(по умолчаниюhttp://localhost:4200/).
Актуальный OpenAPI контракт системы доступен в docs/antiplagiat_api.json.
About the project
The app is aimed at professors, teaching assistants, and administrators. It provides a robust framework to transparently manage the submission and peer-review of source code using tokenization and shingling (Shingling & Jaccard index). The frontend strictly adheres to the T-Bank Design System, ensuring a premium, responsive, and robust user experience.
Core Features
- Landing Page: A modern entrance showcasing system metrics and technical capabilities (Bento block layout).
- Event & Group Management: Complete CRUD for grouping courses and isolated assignments.
- ZIP Batch Uploads: Frictionless batch adding of student assignments directly via ZIP package uploads.
- Reference Sets: Ignore template code or boilerplate when finding codebase matches.
- Analysis Runs: Dispatching background tasks verifying structural overlaps, effectively matching similarities despite variable renaming or function shuffles.
- Formatted Reports: Export matched outputs into highly readable PDF, HTML, or raw JSON deliverables.
- Built-in Dev-Console: An integrated developer console overlay trapping all API requests and responses directly in the browser window.
- Infrastructure Telemetry: Direct access to event auditing and system stability metrics.
- Smart Error Handling: Intelligent HTTP error classification with user-friendly Russian/English notifications.
Tech Stack
| Area | Choice |
|---|---|
| Framework | Angular 21 (Signals, OnPush, Standalone components) |
| Language | TypeScript (strict-mode) |
| UI & Design | Taiga UI v5, custom T-Bank CSS variables (color-tokens.css) |
| Data | HttpClient, RXJS, specialized interceptors |
Architecture
The project strictly isolates modules into core (services, tokens, interceptors), features (routing, smart components), and shared (pure utilities). All components use OnPush change detection and Angular 21's @defer blocks to achieve peak rendering performance across massive administrative data tables.
Running Local Environment
- Copy
.env.exampleto.envand set endpoints (SG_API_BASE_PATH,SG_API_FALLBACK_ORIGIN). - Install packages:
npm install(ormake install). - Sync environment (done automatically on hooks):
npm run env:sync. - Run proxy dev-server:
npm start(usually athttp://localhost:4200/).
Refer to docs/antiplagiat_api.json for the most recent REST Open API specification.
Command Reference
| Task | Command |
|---|---|
| Dev server with proxy | npm start or make start |
| Production build | npm run build or make build |
| Development build | make build-dev |
| Unit tests | npm test |
| Lint | npm run lint |
| Clean artifacts | make clean |