bf83a409bb
- Complete WCAG 2.1 accessibility checking system
- AI-powered analysis with Claude 4.5 and Google Vision
- Web interface with drag-and-drop upload
- REST API backend (PHP)
- Python checker with parallel processing
- Quick mode for fast scans (~10 seconds)
- Full mode with AI analysis (~2 minutes)
- .env file support for API keys
- Error logging and debugging tools
- Comprehensive documentation
Performance improvements:
- Parallel image processing (3x faster)
- Smart API timeouts (10s)
- Reduced DPI for faster conversions
- Real-time progress updates
🤖 Generated with Claude Code
1013 lines
36 KiB
HTML
1013 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Enterprise PDF Accessibility Checker</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary: #FFC407;
|
|
--primary-dark: #e6b006;
|
|
--primary-darker: #cc9d05;
|
|
--black: #000000;
|
|
--success: #10b981;
|
|
--warning: #f59e0b;
|
|
--error: #ef4444;
|
|
--critical: #dc2626;
|
|
--info: #3b82f6;
|
|
--bg: #fafafa;
|
|
--surface: #ffffff;
|
|
--text: #000000;
|
|
--text-light: #4a4a4a;
|
|
--border: #e0e0e0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
header {
|
|
background: var(--black);
|
|
border-bottom: 3px solid var(--primary);
|
|
padding: 30px 0;
|
|
margin-bottom: 40px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.card {
|
|
background: var(--surface);
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.card h2 {
|
|
font-size: 24px;
|
|
margin-bottom: 20px;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* Upload Area */
|
|
.upload-area {
|
|
border: 3px dashed var(--border);
|
|
border-radius: 12px;
|
|
padding: 60px 40px;
|
|
text-align: center;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.upload-area.dragover {
|
|
border-color: var(--primary);
|
|
background: rgba(37, 99, 235, 0.05);
|
|
}
|
|
|
|
.upload-area input[type="file"] {
|
|
display: none;
|
|
}
|
|
|
|
.upload-icon {
|
|
font-size: 64px;
|
|
margin-bottom: 20px;
|
|
color: var(--black);
|
|
}
|
|
|
|
.upload-text {
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.upload-hint {
|
|
font-size: 14px;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--black);
|
|
color: var(--primary);
|
|
border: 2px solid var(--primary);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--primary);
|
|
color: var(--black);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #cbd5e1;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Progress */
|
|
.progress-container {
|
|
display: none;
|
|
padding: 20px;
|
|
background: #f1f5f9;
|
|
border-radius: 8px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.progress-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.progress-percent {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 8px;
|
|
background: var(--border);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: var(--primary);
|
|
transition: width 0.3s;
|
|
}
|
|
|
|
.progress-log {
|
|
background: white;
|
|
border: 2px solid var(--border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.log-header {
|
|
background: var(--black);
|
|
color: var(--primary);
|
|
padding: 12px 16px;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
border-bottom: 2px solid var(--primary);
|
|
}
|
|
|
|
.log-content {
|
|
padding: 16px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 13px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.log-entry {
|
|
padding: 8px 12px;
|
|
margin-bottom: 8px;
|
|
border-radius: 4px;
|
|
background: #f8f9fa;
|
|
border-left: 3px solid #ddd;
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
.log-entry.success {
|
|
background: rgba(16, 185, 129, 0.1);
|
|
border-left-color: var(--success);
|
|
color: #065f46;
|
|
}
|
|
|
|
.log-entry.warning {
|
|
background: rgba(245, 158, 11, 0.1);
|
|
border-left-color: var(--warning);
|
|
color: #92400e;
|
|
}
|
|
|
|
.log-entry.error {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
border-left-color: var(--error);
|
|
color: #991b1b;
|
|
}
|
|
|
|
.log-entry.info {
|
|
background: rgba(59, 130, 246, 0.1);
|
|
border-left-color: var(--info);
|
|
color: #1e40af;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Results */
|
|
.results {
|
|
display: none;
|
|
}
|
|
|
|
.score-display {
|
|
text-align: center;
|
|
padding: 40px;
|
|
background: linear-gradient(135deg, var(--black) 0%, #1a1a1a 50%, var(--black) 100%);
|
|
border: 3px solid var(--primary);
|
|
border-radius: 12px;
|
|
color: white;
|
|
margin-bottom: 30px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.score-display::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: var(--primary);
|
|
}
|
|
|
|
.score-number {
|
|
font-size: 72px;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.score-label {
|
|
font-size: 20px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.stat-card {
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-card.critical {
|
|
background: rgba(220, 38, 38, 0.1);
|
|
border: 2px solid var(--critical);
|
|
}
|
|
|
|
.stat-card.error {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
border: 2px solid var(--error);
|
|
}
|
|
|
|
.stat-card.warning {
|
|
background: rgba(245, 158, 11, 0.1);
|
|
border: 2px solid var(--warning);
|
|
}
|
|
|
|
.stat-card.info {
|
|
background: rgba(59, 130, 246, 0.1);
|
|
border: 2px solid var(--info);
|
|
}
|
|
|
|
.stat-card.success {
|
|
background: rgba(16, 185, 129, 0.1);
|
|
border: 2px solid var(--success);
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Issues */
|
|
.issue {
|
|
padding: 20px;
|
|
margin-bottom: 15px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid;
|
|
}
|
|
|
|
.issue.CRITICAL {
|
|
background: rgba(220, 38, 38, 0.05);
|
|
border-left-color: var(--critical);
|
|
}
|
|
|
|
.issue.ERROR {
|
|
background: rgba(239, 68, 68, 0.05);
|
|
border-left-color: var(--error);
|
|
}
|
|
|
|
.issue.WARNING {
|
|
background: rgba(245, 158, 11, 0.05);
|
|
border-left-color: var(--warning);
|
|
}
|
|
|
|
.issue.INFO {
|
|
background: rgba(59, 130, 246, 0.05);
|
|
border-left-color: var(--info);
|
|
}
|
|
|
|
.issue.SUCCESS {
|
|
background: rgba(16, 185, 129, 0.05);
|
|
border-left-color: var(--success);
|
|
}
|
|
|
|
.issue-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: start;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.issue-category {
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.issue-badge {
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.issue-badge.CRITICAL { background: var(--critical); color: white; }
|
|
.issue-badge.ERROR { background: var(--error); color: white; }
|
|
.issue-badge.WARNING { background: var(--warning); color: white; }
|
|
.issue-badge.INFO { background: var(--info); color: white; }
|
|
.issue-badge.SUCCESS { background: var(--success); color: white; }
|
|
|
|
.issue-description {
|
|
color: var(--text);
|
|
margin-bottom: 10px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.issue-meta {
|
|
display: flex;
|
|
gap: 20px;
|
|
font-size: 14px;
|
|
color: var(--text-light);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.issue-recommendation {
|
|
background: white;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
border-left: 3px solid var(--success);
|
|
font-size: 14px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.issue-recommendation strong {
|
|
color: var(--success);
|
|
}
|
|
|
|
/* Filters */
|
|
.filters {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-btn {
|
|
padding: 8px 16px;
|
|
border: 2px solid var(--border);
|
|
border-radius: 6px;
|
|
background: white;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.filter-btn.active {
|
|
background: var(--primary);
|
|
color: white;
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.filter-btn:hover {
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
/* Loading */
|
|
.loading {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 3px solid rgba(255,255,255,.3);
|
|
border-radius: 50%;
|
|
border-top-color: white;
|
|
animation: spin 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 10px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.card {
|
|
padding: 20px;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.api-config {
|
|
margin-top: 20px;
|
|
padding: 20px;
|
|
background: #f1f5f9;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-group input {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.help-text {
|
|
font-size: 12px;
|
|
color: var(--text-light);
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
<h1>🔍 Enterprise PDF Accessibility Checker</h1>
|
|
<p class="subtitle">Comprehensive WCAG 2.1 compliance validation with AI-powered analysis</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<!-- Upload Section -->
|
|
<div class="card" id="uploadSection">
|
|
<h2>Upload PDF Document</h2>
|
|
|
|
<div class="upload-area" id="uploadArea">
|
|
<div class="upload-icon">📄</div>
|
|
<div class="upload-text">Drop your PDF here or click to browse</div>
|
|
<div class="upload-hint">Maximum file size: 50MB</div>
|
|
<input type="file" id="fileInput" accept=".pdf">
|
|
</div>
|
|
|
|
<div class="api-config">
|
|
<h3 style="margin-bottom: 15px;">Check Options</h3>
|
|
<div class="form-group" style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
|
|
<input type="checkbox" id="quickMode" style="width: auto; height: 18px; cursor: pointer;">
|
|
<label for="quickMode" style="cursor: pointer; margin: 0; font-weight: 600;">
|
|
⚡ Quick Mode (Skip AI analysis, OCR, and color contrast)
|
|
</label>
|
|
</div>
|
|
<div class="help-text" style="margin-top: -15px; margin-bottom: 20px;">
|
|
Quick mode runs basic checks only - great for initial scans. Completes in ~10 seconds vs ~2 minutes.
|
|
</div>
|
|
|
|
<div style="background: #f0f9ff; border-left: 3px solid #3b82f6; padding: 15px; border-radius: 6px; margin-top: 20px;">
|
|
<div style="font-weight: 600; margin-bottom: 5px;">🔑 API Keys</div>
|
|
<div style="font-size: 14px; color: #4a4a4a;">
|
|
API keys are configured in the <code style="background: white; padding: 2px 6px; border-radius: 3px;">.env</code> file on the server.
|
|
<br>Edit <code style="background: white; padding: 2px 6px; border-radius: 3px;">.env</code> to add your Anthropic and Google API keys.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress-container" id="progressContainer">
|
|
<div class="progress-header">
|
|
<div class="progress-text" id="progressText">Uploading...</div>
|
|
<div class="progress-percent" id="progressPercent">0%</div>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressFill" style="width: 0%"></div>
|
|
</div>
|
|
|
|
<!-- Debug/Progress Log -->
|
|
<div class="progress-log" id="progressLog">
|
|
<div class="log-header">🔍 Processing Details</div>
|
|
<div class="log-content" id="logContent">
|
|
<div class="log-entry">⏳ Initializing...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Section -->
|
|
<div class="results" id="resultsSection">
|
|
<div class="card">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<h2>Accessibility Report</h2>
|
|
<button class="btn btn-secondary" onclick="resetCheck()">Check Another PDF</button>
|
|
</div>
|
|
|
|
<div class="score-display">
|
|
<div class="score-number" id="scoreNumber">--</div>
|
|
<div class="score-label">Accessibility Score</div>
|
|
</div>
|
|
|
|
<div class="stats-grid" id="statsGrid">
|
|
<!-- Stats will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Issues & Recommendations</h2>
|
|
|
|
<div class="filters">
|
|
<button class="filter-btn active" onclick="filterIssues('all')">All</button>
|
|
<button class="filter-btn" onclick="filterIssues('CRITICAL')">Critical</button>
|
|
<button class="filter-btn" onclick="filterIssues('ERROR')">Errors</button>
|
|
<button class="filter-btn" onclick="filterIssues('WARNING')">Warnings</button>
|
|
<button class="filter-btn" onclick="filterIssues('INFO')">Info</button>
|
|
</div>
|
|
|
|
<div id="issuesList">
|
|
<!-- Issues will be inserted here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentJobId = null;
|
|
let currentFilter = 'all';
|
|
let allIssues = [];
|
|
let pollInterval = null;
|
|
let pollCount = 0;
|
|
|
|
// Logging functions
|
|
function addLog(message, type = 'info') {
|
|
const logContent = document.getElementById('logContent');
|
|
const entry = document.createElement('div');
|
|
entry.className = `log-entry ${type}`;
|
|
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
entry.innerHTML = `<strong>${timestamp}</strong> ${message}`;
|
|
|
|
logContent.appendChild(entry);
|
|
logContent.scrollTop = logContent.scrollHeight;
|
|
}
|
|
|
|
function clearLog() {
|
|
const logContent = document.getElementById('logContent');
|
|
logContent.innerHTML = '<div class="log-entry">⏳ Initializing...</div>';
|
|
}
|
|
|
|
function updateProgress(percent, message) {
|
|
document.getElementById('progressFill').style.width = percent + '%';
|
|
document.getElementById('progressPercent').textContent = percent + '%';
|
|
document.getElementById('progressText').textContent = message;
|
|
}
|
|
|
|
// Upload area drag and drop
|
|
const uploadArea = document.getElementById('uploadArea');
|
|
const fileInput = document.getElementById('fileInput');
|
|
|
|
uploadArea.addEventListener('click', () => fileInput.click());
|
|
|
|
uploadArea.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
uploadArea.classList.add('dragover');
|
|
});
|
|
|
|
uploadArea.addEventListener('dragleave', () => {
|
|
uploadArea.classList.remove('dragover');
|
|
});
|
|
|
|
uploadArea.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
uploadArea.classList.remove('dragover');
|
|
|
|
const files = e.dataTransfer.files;
|
|
if (files.length > 0) {
|
|
handleFile(files[0]);
|
|
}
|
|
});
|
|
|
|
fileInput.addEventListener('change', (e) => {
|
|
if (e.target.files.length > 0) {
|
|
handleFile(e.target.files[0]);
|
|
}
|
|
});
|
|
|
|
async function handleFile(file) {
|
|
if (!file.name.toLowerCase().endsWith('.pdf')) {
|
|
alert('Please select a PDF file');
|
|
return;
|
|
}
|
|
|
|
// Show progress
|
|
clearLog();
|
|
document.getElementById('progressContainer').style.display = 'block';
|
|
updateProgress(0, 'Preparing upload...');
|
|
addLog('📄 File selected: ' + file.name + ' (' + (file.size / 1024 / 1024).toFixed(2) + ' MB)', 'info');
|
|
|
|
// Upload file
|
|
const formData = new FormData();
|
|
formData.append('pdf', file);
|
|
formData.append('action', 'upload');
|
|
|
|
try {
|
|
updateProgress(10, 'Uploading file...');
|
|
addLog('⬆️ Uploading to server...', 'info');
|
|
|
|
const response = await fetch('api.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
currentJobId = result.data.job_id;
|
|
updateProgress(20, 'Upload complete');
|
|
addLog('✅ Upload successful - Job ID: ' + currentJobId, 'success');
|
|
addLog('📊 File size: ' + (file.size / 1024 / 1024).toFixed(2) + ' MB', 'info');
|
|
|
|
// Small delay for visual feedback
|
|
await new Promise(resolve => setTimeout(resolve, 500));
|
|
startCheck();
|
|
} else {
|
|
addLog('❌ Upload failed: ' + result.error, 'error');
|
|
alert('Upload failed: ' + result.error);
|
|
document.getElementById('progressContainer').style.display = 'none';
|
|
}
|
|
} catch (error) {
|
|
addLog('❌ Upload error: ' + error.message, 'error');
|
|
alert('Upload failed: ' + error.message);
|
|
document.getElementById('progressContainer').style.display = 'none';
|
|
}
|
|
}
|
|
|
|
async function startCheck() {
|
|
updateProgress(25, 'Initializing accessibility check...');
|
|
addLog('🔧 Preparing accessibility analysis...', 'info');
|
|
|
|
const formData = new FormData();
|
|
formData.append('action', 'check');
|
|
formData.append('job_id', currentJobId);
|
|
|
|
// Add quick mode flag
|
|
const quickMode = document.getElementById('quickMode').checked;
|
|
if (quickMode) {
|
|
formData.append('quick_mode', '1');
|
|
addLog('⚡ Quick mode enabled - skipping expensive checks', 'info');
|
|
}
|
|
|
|
// API keys are read from .env file on the server
|
|
addLog('🔑 Using API keys from server .env file', 'info');
|
|
|
|
try {
|
|
updateProgress(30, 'Starting analysis...');
|
|
addLog('🚀 Launching Python checker with venv...', 'info');
|
|
|
|
const response = await fetch('api.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
updateProgress(35, 'Analysis started');
|
|
addLog('✅ Python process started successfully', 'success');
|
|
addLog('⏱️ Estimated time: 2-5 minutes depending on document complexity', 'info');
|
|
pollStatus();
|
|
} else {
|
|
addLog('❌ Check failed: ' + result.error, 'error');
|
|
alert('Check failed: ' + result.error);
|
|
document.getElementById('progressContainer').style.display = 'none';
|
|
}
|
|
} catch (error) {
|
|
addLog('❌ Check error: ' + error.message, 'error');
|
|
alert('Check failed: ' + error.message);
|
|
document.getElementById('progressContainer').style.display = 'none';
|
|
}
|
|
}
|
|
|
|
async function pollStatus() {
|
|
pollCount = 0;
|
|
|
|
const checkStages = [
|
|
{ percent: 40, message: 'Loading PDF...', log: '📖 Reading PDF structure and metadata' },
|
|
{ percent: 45, message: 'Extracting text...', log: '📝 Extracting text from all pages' },
|
|
{ percent: 50, message: 'Analyzing document structure...', log: '🏗️ Checking PDF tagging and structure' },
|
|
{ percent: 55, message: 'Checking metadata...', log: '📋 Validating title, author, language' },
|
|
{ percent: 60, message: 'Analyzing images...', log: '🖼️ Processing images with AI (this may take a while)' },
|
|
{ percent: 65, message: 'Running OCR quality check...', log: '🔍 Analyzing text clarity and OCR confidence' },
|
|
{ percent: 70, message: 'Checking color contrast...', log: '🎨 Calculating WCAG contrast ratios' },
|
|
{ percent: 75, message: 'Analyzing readability...', log: '📚 Computing Flesch scores and grade levels' },
|
|
{ percent: 80, message: 'Validating links...', log: '🔗 Checking link text quality' },
|
|
{ percent: 85, message: 'Checking forms and headings...', log: '📄 Validating form fields and heading structure' },
|
|
{ percent: 90, message: 'Running final checks...', log: '✓ Font embedding, bookmarks, security' },
|
|
{ percent: 95, message: 'Compiling results...', log: '📊 Generating accessibility report' }
|
|
];
|
|
|
|
let stageIndex = 0;
|
|
|
|
const checkStatus = async () => {
|
|
pollCount++;
|
|
|
|
// Update simulated progress
|
|
if (stageIndex < checkStages.length && pollCount % 2 === 0) {
|
|
const stage = checkStages[stageIndex];
|
|
updateProgress(stage.percent, stage.message);
|
|
addLog(stage.log, 'info');
|
|
stageIndex++;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`api.php?action=status&job_id=${currentJobId}`);
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
if (result.data.status === 'completed') {
|
|
clearInterval(pollInterval);
|
|
updateProgress(98, 'Loading results...');
|
|
addLog('✅ Analysis complete! Loading results...', 'success');
|
|
addLog('⏱️ Total time: ' + Math.round(pollCount * 2) + ' seconds', 'info');
|
|
loadResults();
|
|
} else if (result.data.status === 'processing') {
|
|
// Still processing
|
|
if (pollCount === 1) {
|
|
addLog('⚙️ Python venv activated successfully', 'success');
|
|
addLog('🔬 Running comprehensive WCAG 2.1 analysis...', 'info');
|
|
}
|
|
|
|
if (pollCount > 60) {
|
|
addLog('⚠️ Analysis taking longer than expected (complex document)', 'warning');
|
|
}
|
|
|
|
// Timeout after 150 polls (5 minutes)
|
|
if (pollCount > 150) {
|
|
clearInterval(pollInterval);
|
|
addLog('❌ Analysis timed out after 5 minutes', 'error');
|
|
addLog('💡 Try using Quick Mode for faster results', 'info');
|
|
|
|
// Try to get debug info
|
|
try {
|
|
const debugResp = await fetch(`api.php?action=debug&job_id=${currentJobId}`);
|
|
const debugResult = await debugResp.json();
|
|
if (debugResult.success && debugResult.data.error_log) {
|
|
addLog('🔍 Error log: ' + debugResult.data.error_log.substring(0, 500), 'error');
|
|
}
|
|
} catch (e) {
|
|
console.error('Debug fetch failed:', e);
|
|
}
|
|
|
|
document.getElementById('progressContainer').style.display = 'none';
|
|
alert('Analysis timed out. Check the error log or try Quick Mode.');
|
|
}
|
|
} else if (result.data.status === 'failed' || result.data.status === 'error') {
|
|
clearInterval(pollInterval);
|
|
addLog('❌ Analysis failed', 'error');
|
|
if (result.data.error_log) {
|
|
addLog('🔍 Error: ' + result.data.error_log.substring(0, 500), 'error');
|
|
}
|
|
document.getElementById('progressContainer').style.display = 'none';
|
|
alert('Analysis failed. Check the error log for details.');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Status check failed:', error);
|
|
addLog('⚠️ Status check error (retrying...): ' + error.message, 'warning');
|
|
}
|
|
};
|
|
|
|
// Check immediately
|
|
checkStatus();
|
|
|
|
// Then check every 2 seconds
|
|
pollInterval = setInterval(checkStatus, 2000);
|
|
}
|
|
|
|
async function loadResults() {
|
|
updateProgress(100, 'Complete!');
|
|
addLog('📥 Fetching results from server...', 'info');
|
|
|
|
try {
|
|
const response = await fetch(`api.php?action=result&job_id=${currentJobId}`);
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
addLog('✅ Results loaded successfully', 'success');
|
|
addLog('📊 Accessibility Score: ' + result.data.accessibility_score + '/100', 'success');
|
|
addLog('🔍 Total Issues Found: ' + result.data.total_issues, 'info');
|
|
addLog('📈 Critical: ' + result.data.severity_counts.critical +
|
|
' | Errors: ' + result.data.severity_counts.error +
|
|
' | Warnings: ' + result.data.severity_counts.warning, 'info');
|
|
|
|
// Wait a moment so user can see the final logs
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
|
|
displayResults(result.data);
|
|
} else {
|
|
addLog('❌ Failed to load results: ' + result.error, 'error');
|
|
alert('Failed to load results: ' + result.error);
|
|
}
|
|
} catch (error) {
|
|
addLog('❌ Error loading results: ' + error.message, 'error');
|
|
alert('Failed to load results: ' + error.message);
|
|
}
|
|
}
|
|
|
|
function displayResults(data) {
|
|
// Hide upload, show results
|
|
document.getElementById('uploadSection').style.display = 'none';
|
|
document.getElementById('resultsSection').style.display = 'block';
|
|
|
|
// Display score
|
|
document.getElementById('scoreNumber').textContent = data.accessibility_score;
|
|
|
|
// Display stats
|
|
const statsGrid = document.getElementById('statsGrid');
|
|
statsGrid.innerHTML = `
|
|
<div class="stat-card critical">
|
|
<div class="stat-number">${data.severity_counts.critical}</div>
|
|
<div class="stat-label">Critical</div>
|
|
</div>
|
|
<div class="stat-card error">
|
|
<div class="stat-number">${data.severity_counts.error}</div>
|
|
<div class="stat-label">Errors</div>
|
|
</div>
|
|
<div class="stat-card warning">
|
|
<div class="stat-number">${data.severity_counts.warning}</div>
|
|
<div class="stat-label">Warnings</div>
|
|
</div>
|
|
<div class="stat-card info">
|
|
<div class="stat-number">${data.severity_counts.info}</div>
|
|
<div class="stat-label">Info</div>
|
|
</div>
|
|
<div class="stat-card success">
|
|
<div class="stat-number">${data.severity_counts.success}</div>
|
|
<div class="stat-label">Success</div>
|
|
</div>
|
|
`;
|
|
|
|
// Store and display issues
|
|
allIssues = data.issues;
|
|
displayIssues(allIssues);
|
|
}
|
|
|
|
function displayIssues(issues) {
|
|
const issuesList = document.getElementById('issuesList');
|
|
|
|
if (issues.length === 0) {
|
|
issuesList.innerHTML = '<p style="text-align: center; color: var(--text-light); padding: 40px;">No issues to display</p>';
|
|
return;
|
|
}
|
|
|
|
issuesList.innerHTML = issues.map(issue => `
|
|
<div class="issue ${issue.severity}">
|
|
<div class="issue-header">
|
|
<div class="issue-category">${issue.category}</div>
|
|
<span class="issue-badge ${issue.severity}">${issue.severity}</span>
|
|
</div>
|
|
<div class="issue-description">${issue.description}</div>
|
|
${issue.page_number ? `<div class="issue-meta"><span>📄 Page ${issue.page_number}</span></div>` : ''}
|
|
${issue.wcag_criterion ? `<div class="issue-meta"><span>📋 WCAG ${issue.wcag_criterion}</span></div>` : ''}
|
|
${issue.recommendation ? `<div class="issue-recommendation"><strong>💡 Recommendation:</strong> ${issue.recommendation}</div>` : ''}
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function filterIssues(severity) {
|
|
currentFilter = severity;
|
|
|
|
// Update filter buttons
|
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
});
|
|
event.target.classList.add('active');
|
|
|
|
// Filter issues
|
|
const filtered = severity === 'all'
|
|
? allIssues
|
|
: allIssues.filter(issue => issue.severity === severity);
|
|
|
|
displayIssues(filtered);
|
|
}
|
|
|
|
function resetCheck() {
|
|
if (pollInterval) {
|
|
clearInterval(pollInterval);
|
|
pollInterval = null;
|
|
}
|
|
pollCount = 0;
|
|
document.getElementById('uploadSection').style.display = 'block';
|
|
document.getElementById('resultsSection').style.display = 'none';
|
|
document.getElementById('progressContainer').style.display = 'none';
|
|
document.getElementById('fileInput').value = '';
|
|
currentJobId = null;
|
|
clearLog();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|