Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Evaluation - Smart Summarizer</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| </head> | |
| <body> | |
| <!-- Top Navigation Bar --> | |
| <nav class="top-navbar"> | |
| <a href="/" class="navbar-logo"> | |
| <div class="logo-circle">S</div> | |
| <span>Smart Summarizer</span> | |
| </a> | |
| <!-- Mobile Menu Toggle --> | |
| <button class="mobile-menu-toggle" onclick="toggleMobileMenu()"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="navbar-links" id="navbarLinks"> | |
| <a href="/" class="nav-item"> | |
| <i class="fas fa-home"></i> Home | |
| </a> | |
| <a href="/single-summary" class="nav-item"> | |
| <i class="fas fa-file-alt"></i> Single Summary | |
| </a> | |
| <a href="/comparison" class="nav-item"> | |
| <i class="fas fa-balance-scale"></i> Comparison | |
| </a> | |
| <a href="/batch" class="nav-item"> | |
| <i class="fas fa-layer-group"></i> Batch | |
| </a> | |
| <a href="/evaluation" class="nav-item active"> | |
| <i class="fas fa-chart-bar"></i> Evaluation | |
| </a> | |
| </div> | |
| </nav> | |
| <a href="/evaluation" class="nav-item active"> | |
| <i class="fas fa-chart-bar"></i> Evaluation | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- Page Content --> | |
| <div class="page-container"> | |
| <h1 class="page-title">Metric Benchmarks</h1> | |
| <p class="page-subtitle">Aggregate performance data based on the ROUGE (Recall-Oriented Understudy for Gisting Evaluation) scoring system.</p> | |
| <!-- Content Grid --> | |
| <div class="evaluation-grid"> | |
| <!-- Chart Section --> | |
| <div class="chart-section"> | |
| <div class="chart-container"> | |
| <h3 class="chart-title">ROUGE Metric Comparison</h3> | |
| <canvas id="rougeChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Metrics Explanation --> | |
| <div class="metrics-explanation"> | |
| <h3 class="section-title">Understanding the Metrics</h3> | |
| <div class="metric-card"> | |
| <div class="metric-header"> | |
| <div class="metric-indicator" style="background: #6D8196;"></div> | |
| <h4>ROUGE-1</h4> | |
| </div> | |
| <p>Measures the overlap of unigrams (single words) between the generated summary and the reference text. High scores indicate good content coverage.</p> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="metric-header"> | |
| <div class="metric-indicator" style="background: #CBCBCB;"></div> | |
| <h4>ROUGE-2</h4> | |
| </div> | |
| <p>Measures the overlap of bigrams (pairs of consecutive words). This is a strong indicator of fluency and phrasing quality.</p> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="metric-header"> | |
| <div class="metric-indicator" style="background: #4A4A4A;"></div> | |
| <h4>ROUGE-L</h4> | |
| </div> | |
| <p>Based on the Longest Common Subsequence. It captures sentence structure and sequential flow more effectively than simple n-gram overlap.</p> | |
| </div> | |
| <div class="insight-box"> | |
| <h4>MODEL INSIGHT</h4> | |
| <p>"BART and PEGASUS typically outperform TextRank in ROUGE-2 and ROUGE-L as they generate fluent, abstractive prose rather than just extracting source fragments."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <div class="footer-left"> | |
| <div class="logo-circle" style="width: 24px; height: 24px; font-size: 0.9rem;">S</div> | |
| <span>Smart Summarizer</span> | |
| </div> | |
| <div class="footer-right"> | |
| <span>© 2025 Smart Summarizer. Abdul Razzaq Ansari</span> | |
| <a href="https://github.com/Rajak13/Smart-Summarizer" target="_blank" class="footer-link"> | |
| <i class="fab fa-github"></i> GitHub Repository | |
| </a> | |
| </div> | |
| </footer> | |
| <script src="{{ url_for('static', filename='js/evaluation.js') }}"></script> | |
| <!-- Mobile Menu JavaScript --> | |
| <script src="{{ url_for('static', filename='js/mobile-menu.js') }}"></script> | |
| </body> | |
| </html> | |