Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Model Comparison - 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"> | |
| </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 active"> | |
| <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"> | |
| <i class="fas fa-chart-bar"></i> Evaluation | |
| </a> | |
| </div> | |
| </nav> | |
| <i class="fas fa-chart-bar"></i> Evaluation | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- Page Content --> | |
| <div class="page-container"> | |
| <h1 class="page-title">Model Comparison Matrix</h1> | |
| <p class="page-subtitle">Compare extractive and abstractive strategies in real-time. Witness how graph-based ranking compares to transformer-based generation.</p> | |
| <!-- Input Section --> | |
| <div class="comparison-input-section"> | |
| <textarea | |
| class="text-input" | |
| id="inputText" | |
| placeholder="Input source text for cross-model analysis..." | |
| style="min-height: 200px;" | |
| ></textarea> | |
| </div> | |
| <!-- Run Analysis Button --> | |
| <div style="text-align: center; margin: 2rem 0;"> | |
| <button class="btn-generate" id="runAnalysisBtn" style="padding: 1rem 3rem;"> | |
| Run Analysis | |
| </button> | |
| </div> | |
| <!-- Results Grid --> | |
| <div class="comparison-grid" id="resultsGrid"> | |
| <!-- TextRank Card --> | |
| <div class="comparison-card"> | |
| <div class="comparison-header"> | |
| <span class="model-indicator" style="background: #FFA500;"></span> | |
| <h3>TextRank</h3> | |
| </div> | |
| <div class="comparison-result" id="textrank-result"> | |
| <div class="awaiting-text">Awaiting Analysis</div> | |
| </div> | |
| </div> | |
| <!-- BART Card --> | |
| <div class="comparison-card"> | |
| <div class="comparison-header"> | |
| <span class="model-indicator" style="background: #4A90E2;"></span> | |
| <h3>BART</h3> | |
| </div> | |
| <div class="comparison-result" id="bart-result"> | |
| <div class="awaiting-text">Awaiting Analysis</div> | |
| </div> | |
| </div> | |
| <!-- PEGASUS Card --> | |
| <div class="comparison-card"> | |
| <div class="comparison-header"> | |
| <span class="model-indicator" style="background: #50C878;"></span> | |
| <h3>PEGASUS</h3> | |
| </div> | |
| <div class="comparison-result" id="pegasus-result"> | |
| <div class="awaiting-text">Awaiting Analysis</div> | |
| </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> | |
| const inputText = document.getElementById('inputText'); | |
| const runAnalysisBtn = document.getElementById('runAnalysisBtn'); | |
| runAnalysisBtn.addEventListener('click', async () => { | |
| const text = inputText.value.trim(); | |
| if (!text || text.split(/\s+/).length < 10) { | |
| alert('Please enter at least 10 words of text'); | |
| return; | |
| } | |
| // Show loading state | |
| runAnalysisBtn.disabled = true; | |
| runAnalysisBtn.textContent = 'Analyzing...'; | |
| // Show loading in all cards | |
| ['textrank', 'bart', 'pegasus'].forEach(model => { | |
| document.getElementById(`${model}-result`).innerHTML = ` | |
| <div class="spinner"></div> | |
| <div style="margin-top: 1rem; color: var(--slate-blue);">Processing...</div> | |
| `; | |
| }); | |
| try { | |
| const response = await fetch('/api/compare', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ text: text }) | |
| }); | |
| const data = await response.json(); | |
| if (data.success) { | |
| // Display results for each model | |
| Object.keys(data.results).forEach(model => { | |
| const result = data.results[model]; | |
| const resultDiv = document.getElementById(`${model}-result`); | |
| if (result.error) { | |
| resultDiv.innerHTML = ` | |
| <div style="color: #ef4444; padding: 1rem;"> | |
| <strong>Error:</strong> ${result.error} | |
| </div> | |
| `; | |
| } else { | |
| resultDiv.innerHTML = ` | |
| <div class="summary-content"> | |
| ${result.summary} | |
| </div> | |
| <div class="summary-metrics"> | |
| <div class="metric-item"> | |
| <span class="metric-label">Time:</span> | |
| <span class="metric-value">${result.metadata.processing_time.toFixed(2)}s</span> | |
| </div> | |
| <div class="metric-item"> | |
| <span class="metric-label">Compression:</span> | |
| <span class="metric-value">${(result.metadata.compression_ratio * 100).toFixed(1)}%</span> | |
| </div> | |
| <div class="metric-item"> | |
| <span class="metric-label">Words:</span> | |
| <span class="metric-value">${result.metadata.summary_length}</span> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| }); | |
| } else { | |
| alert('Error: ' + data.error); | |
| } | |
| } catch (error) { | |
| alert('Failed to run analysis. Please try again.'); | |
| console.error(error); | |
| } finally { | |
| runAnalysisBtn.disabled = false; | |
| runAnalysisBtn.textContent = 'Run Analysis'; | |
| } | |
| }); | |
| </script> | |
| <!-- Mobile Menu JavaScript --> | |
| <script src="{{ url_for('static', filename='js/mobile-menu.js') }}"></script> | |
| </body> | |
| </html> | |