Plagiarism Detection & Early Warning System

Overview

Deploy and customize a complete 论文查重监测预警系统 (Paper Plagiarism Detection & Early Warning System) — a full-featured single-page application for academic integrity monitoring. The system includes a dashboard with trend charts, paper upload with simulated 4-stage detection pipeline, detailed similarity analysis with highlighted text comparison, AI-generated content detection, multi-severity alert management, and report generation.

Tech Stack: React 19 + TypeScript 6.0 + Vite 8.0 + Tailwind CSS 3.4 + Recharts 3.8 + Lucide React

When to Use

• User asks to build/deploy a plagiarism detection, 查重, or academic integrity system
• User wants to add similarity checking or AI-content analysis to an existing platform
• User requests a monitoring dashboard for academic papers
• User needs an alert/warning system for content similarity
• User mentions keywords: 论文查重, 查重检测, 抄袭检测, 学术不端, 相似度分析, AI生成检测

Quick Start — Deploy from Template

To deploy the plagiarism detection system:

1. Copy the project template from assets/project-template/ to the target directory.
2. Install dependencies: Run npm install in the project directory.
3. Start the dev server: Run npm run dev (defaults to http://localhost:5173).
4. Preview: Use preview_url to open the app in the browser.

# Full deployment commands
cp -r assets/project-template/ D:/plagiarism-system/
cd D:/plagiarism-system/
npm install
npm run dev

The system runs entirely in the browser with mock data — no backend required. All data (8 papers, 5 detection results, 5 alerts, 3 reports, monitoring stats) is pre-configured in src/data/mock.ts.

Core Capabilities

1. Monitoring Dashboard (dashboard)

The main landing page with four key areas:
- Statistics cards: Total papers, pending checks, average similarity rate, high-risk count
- 7-day trend chart: Line chart via Recharts showing daily paper submissions and average similarity
- Similarity distribution: Pie chart showing papers grouped by similarity range (0-20%, 20-40%, 40-60%, 60-80%, 80-100%)
- Recent alerts & papers: Preview lists with quick-action buttons

2. Paper Upload & Management (upload)

• Drag-and-drop file upload area supporting PDF, DOCX, TXT formats
• Simulated 4-stage detection pipeline with animated progress (Upload → Parse → Detect → Analyze)
• Paper list with status badges (pending/processing/completed/warning/critical)
• Review actions: pass (通过) / reject (不通过) verdicts
• Click any paper to open a detail modal with full text viewing
• Upload generates a dynamic detection result via src/utils/generate-detection.ts

3. Detection Results (detection)

Split-panel layout for analyzing check results:
- Left panel: Scrollable list of checked papers with similarity rates and risk badges
- Right panel: Tab-based detail view with:
- 相似片段 tab: List of similar segments with source attribution
- 匹配来源 tab: Source literature table (知网/万方/维普)
- AI分析结论 tab: Editable AI conclusion with originality/grammar/structure scores, strengths, weaknesses, suggestions, and risk assessment
- Review verdict actions (pass/reject)

4. Alert Center (alerts)

Multi-severity alert management:
- Filter by severity: 全部 / 严重 / 警告 / 通知 (All / Critical / Warning / Info)
- Alert types: similarity_detected, ai_generated_suspected, citation_issue, format_error, system
- Mark individual alerts as read or mark all as read
- Click to view detailed alert information in a modal
- Unread count badge on navigation bell icon

5. Report Manager (reports)

Report generation and management:
- Generate three types of reports: 综合周报 (Weekly Summary), 详细报告 (Detailed), 预警报告 (Alert)
- Simulated generation with loading state (generating → ready)
- Historical report list with timestamps and paper counts
- Click to view full report content in a modal

6. API Test Console (api-test)

Mock API testing interface for integration testing:
- 8 predefined REST endpoints (GET/POST/PUT/DELETE)
- Test individually or run all tests at once
- Display HTTP status codes and response times
- View JSON request/response examples
- Simulated response bodies matching the system's data structures

7. System Settings (settings)

Configurable thresholds and feature toggles:
- Similarity threshold slider (10% – 50%)
- AI-generated content detection threshold (20% – 80%)
- Feature toggles: Auto-check, Email notifications, Strict mode
- Save / Reset to defaults

8. Full-Text Viewer with Plagiarism Highlighting

The detail modal (DetailModal.tsx) includes a PaperContentViewer that:
- Parses full academic paper content from Markdown format
- Overlays color-coded plagiarism highlights based on character-offset matching:
- 🔴 Red (≥70%): High similarity
- 🟠 Orange (40-69%): Medium similarity
- 🟡 Yellow (<40%): Low similarity
- Each highlighted paragraph shows a badge with similarity percentage and source title
- Hover tooltips reveal full match details

Project Structure

project-root/
├── index.html                    # Entry HTML (lang="zh-CN")
├── package.json                  # Dependencies & scripts
├── vite.config.ts                # Vite config with @/ path alias
├── tailwind.config.ts            # Custom theme (primary/accent/surface colors)
├── tsconfig.json                 # TypeScript project references
└── src/
    ├── main.tsx                  # React entry point
    ├── App.tsx                   # Root component — routing & global modal state
    ├── index.css                 # Tailwind + custom component styles
    ├── lib/utils.ts              # cn() utility (clsx + tailwind-merge)
    ├── types/index.ts            # All TypeScript interfaces
    ├── data/mock.ts              # Mock data for papers, detections, alerts, reports
    ├── utils/
    │   ├── generate-content.ts   # Full paper markdown content generator
    │   └── generate-detection.ts # Dynamic detection result generator
    └── components/
        ├── layout/
        │   ├── Sidebar.tsx       # Navigation sidebar (7 pages + v2.1.0 badge)
        │   └── Header.tsx        # Top bar with title, bell icon, admin avatar
        ├── pages/
        │   ├── Dashboard.tsx     # Monitoring dashboard with Recharts
        │   ├── PaperUpload.tsx   # Upload & paper management
        │   ├── DetectionResult.tsx # Detection results with tabs
        │   ├── DetailModal.tsx   # Universal detail modal (788 lines, core)
        │   ├── AlertCenter.tsx   # Alert management
        │   ├── ReportManager.tsx # Report generation & list
        │   ├── ApiTestPage.tsx   # API testing console
        │   ├── SettingsPage.tsx  # System settings
        │   └── ArchitecturePage.tsx # System architecture display
        └── ui/
            ├── Badge.tsx         # Status badge component
            ├── Button.tsx        # Button with 5 variants
            ├── Card.tsx          # Card container
            ├── Modal.tsx         # Modal dialog
            ├── Progress.tsx      # Progress bar
            └── Tabs.tsx          # Tab component

Key Architecture Patterns

Data Flow (Unidirectional)

All data originates from src/data/mock.ts and flows downward through the component tree. The root App.tsx manages:
- activePage: Current page state
- detailModal: Global modal state (DetailModalState union type)
- openDetail() / closeDetail() callbacks passed as props

Dynamic Content Generation

• generate-content.ts: Produces full academic paper Markdown based on topic keywords (AI, blockchain, healthcare, new energy, cloud-native, environment, transportation, cryptography). Each paper gets 10 major sections with realistic Chinese academic content.
• generate-detection.ts: When no pre-configured detection result matches a paper, dynamically generates one with proportional character-offset segments.

Similarity Segment Highlighting Algorithm

The PaperContentViewer in DetailModal.tsx:
1. Pre-computes all highlight ranges from SimilaritySegment[] sorted by start index
2. Parses Markdown line-by-line, tracking a running character offset
3. For each paragraph, checks overlap with all highlight ranges
4. When overlap is detected, renders the paragraph inside a HighlightedParagraph wrapper with gradient background and metadata badge

Configuration

Customization

To customize the system:

• Change mock data: Edit src/data/mock.ts — all papers, results, alerts, and reports
• Modify paper content: Edit keyword-based templates in src/utils/generate-content.ts
• Adjust detection logic: Edit segment generation in src/utils/generate-detection.ts
• Change styling: Modify the custom color palette in tailwind.config.ts or component styles in src/index.css
• Add new pages: Create a page component in src/components/pages/, add a navigation item in Sidebar.tsx, and add a case in App.tsx

Commands

npm run dev      # Start development server
npm run build    # TypeScript check + Vite production build
npm run lint     # ESLint
npm run preview  # Preview production build

References

For detailed architecture diagrams, data schemas, and design rationale, refer to references/architecture.md.