Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Handwritten Archive Document Digitalization System</title> | |
| <!-- Bootstrap CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Font Awesome --> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <!-- Custom CSS --> | |
| <link rel="stylesheet" href="/static/styles.css"> | |
| </head> | |
| <body> | |
| <!-- Login Modal --> | |
| <div id="loginModal" class="modal fade show" style="display: block; background: rgba(0,0,0,0.8);"> | |
| <div class="modal-dialog modal-dialog-centered"> | |
| <div class="modal-content shadow-lg"> | |
| <div class="modal-header bg-primary text-white"> | |
| <h4 class="modal-title"><i class="fas fa-lock me-2"></i>Login Required</h4> | |
| </div> | |
| <div class="modal-body p-4"> | |
| <form id="loginForm"> | |
| <div class="mb-3"> | |
| <label for="username" class="form-label">Username</label> | |
| <div class="input-group"> | |
| <span class="input-group-text"><i class="fas fa-user"></i></span> | |
| <input type="text" id="username" class="form-control" required value="admin" placeholder="Enter username"> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="password" class="form-label">Password</label> | |
| <div class="input-group"> | |
| <span class="input-group-text"><i class="fas fa-lock"></i></span> | |
| <input type="password" id="password" class="form-control" required value="admin123" placeholder="Enter password"> | |
| </div> | |
| </div> | |
| <button type="submit" class="btn btn-primary w-100"> | |
| <i class="fas fa-sign-in-alt me-2"></i>Login | |
| </button> | |
| </form> | |
| <div id="loginResult" class="mt-3"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Application --> | |
| <div id="mainApp" style="display: none;"> | |
| <!-- Top Navigation --> | |
| <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top"> | |
| <div class="container-fluid"> | |
| <button class="btn btn-primary me-3" type="button" id="sidebarToggle"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <a class="navbar-brand" href="#"> | |
| <i class="fas fa-archive me-2"></i>Archive Digitalization System | |
| </a> | |
| <div class="navbar-nav ms-auto"> | |
| <span class="navbar-text me-3" id="welcomeUser"></span> | |
| <button class="btn btn-outline-light btn-sm" onclick="logout()"> | |
| <i class="fas fa-sign-out-alt me-1"></i>Logout | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Sidebar --> | |
| <nav id="sidebar" class="sidebar"> | |
| <div class="sidebar-header"> | |
| <h4><i class="fas fa-archive me-2"></i>Archive System</h4> | |
| </div> | |
| <!-- Dashboard Stats in Sidebar --> | |
| <div class="sidebar-stats" id="sidebarStats"> | |
| <!-- Stats will be loaded here --> | |
| </div> | |
| <ul class="sidebar-nav"> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link active" onclick="showTab('dashboard')"> | |
| <i class="fas fa-chart-dashboard me-2"></i>Dashboard | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link" onclick="showTab('upload')"> | |
| <i class="fas fa-upload me-2"></i>Upload Categories | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link" onclick="showTab('classify')"> | |
| <i class="fas fa-search me-2"></i>Classify Documents | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link" onclick="showTab('browse')"> | |
| <i class="fas fa-folder-open me-2"></i>Browse Archive | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link" onclick="showTab('ocr')"> | |
| <i class="fas fa-eye me-2"></i>OCR Text | |
| </a> | |
| </li> | |
| </ul> | |
| <!-- Category List in Sidebar --> | |
| <div class="sidebar-section"> | |
| <h6 class="sidebar-heading">Categories</h6> | |
| <div id="sidebarCategories"> | |
| <!-- Categories will be loaded here --> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Dashboard Tab --> | |
| <div id="dashboard" class="tab-content active"> | |
| <div class="content-header"> | |
| <h2><i class="fas fa-chart-dashboard me-2"></i>Dashboard</h2> | |
| <p class="text-muted">Overview of your document archive system</p> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="row mb-4" id="dashboardStats"> | |
| <!-- Stats will be loaded here --> | |
| </div> | |
| <!-- Category Overview --> | |
| <div class="row"> | |
| <div class="col-md-8"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h5><i class="fas fa-chart-bar me-2"></i>Document Distribution</h5> | |
| </div> | |
| <div class="card-body"> | |
| <canvas id="categoryChart" width="400" height="200"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h5><i class="fas fa-clock me-2"></i>Recent Activity</h5> | |
| </div> | |
| <div class="card-body"> | |
| <div id="recentActivity"> | |
| <!-- Recent activity will be loaded here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upload Categories Tab --> | |
| <div id="upload" class="tab-content"> | |
| <div class="content-header"> | |
| <h2><i class="fas fa-tags me-2"></i>Upload Document Categories</h2> | |
| <p class="text-muted">Train the system by uploading sample documents for each category</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-body"> | |
| <form id="uploadForm" class="row g-3"> | |
| <div class="col-md-6"> | |
| <label for="categoryFile" class="form-label">Document File (Image or PDF)</label> | |
| <div class="file-upload border rounded p-4 text-center" id="categoryUpload"> | |
| <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i> | |
| <p class="mb-0">Click to select or drag & drop files here</p> | |
| <input type="file" id="categoryFile" accept="image/*,.pdf" class="d-none"> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <label for="categoryLabel" class="form-label">Category Label</label> | |
| <input type="text" id="categoryLabel" class="form-control" placeholder="e.g., birth_certificate, passport, diploma"> | |
| <div class="form-text">Use descriptive names without spaces</div> | |
| <button type="submit" class="btn btn-primary mt-3"> | |
| <i class="fas fa-plus me-2"></i>Add Category | |
| </button> | |
| </div> | |
| </form> | |
| <div id="uploadResult" class="mt-3"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Classify Documents Tab --> | |
| <div id="classify" class="tab-content"> | |
| <div class="card"> | |
| <div class="card-header bg-success text-white"> | |
| <h4><i class="fas fa-robot me-2"></i>Classify & Store Documents</h4> | |
| </div> | |
| <div class="card-body"> | |
| <p class="text-muted">Upload documents to automatically classify and store them in the archive (min. 35% confidence).</p> | |
| <form id="classifyForm" class="row g-3"> | |
| <div class="col-12"> | |
| <label for="classifyFile" class="form-label">Document to Classify</label> | |
| <div class="file-upload border rounded p-4 text-center" id="classifyUpload"> | |
| <i class="fas fa-file fa-3x text-success mb-3"></i> | |
| <p class="mb-0">Click to select or drag & drop files here</p> | |
| <input type="file" id="classifyFile" accept="image/*,.pdf" class="d-none"> | |
| </div> | |
| </div> | |
| <div class="col-12"> | |
| <button type="submit" class="btn btn-success"> | |
| <i class="fas fa-search me-2"></i>Classify Document | |
| </button> | |
| </div> | |
| </form> | |
| <div id="classifyResult" class="mt-3"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Browse Archive Tab --> | |
| <div id="browse" class="tab-content"> | |
| <div class="content-header"> | |
| <h2><i class="fas fa-archive me-2"></i>Browse Document Archive</h2> | |
| <p class="text-muted">Browse and search through your classified documents by category</p> | |
| </div> | |
| <!-- Category Filters --> | |
| <div class="card mb-4"> | |
| <div class="card-body"> | |
| <div class="d-flex justify-content-between align-items-center mb-3"> | |
| <h5 class="mb-0">Filter by Category</h5> | |
| <div class="btn-group" role="group"> | |
| <button type="button" class="btn btn-outline-primary btn-sm" onclick="toggleView('grid')"> | |
| <i class="fas fa-th-large"></i> Grid | |
| </button> | |
| <button type="button" class="btn btn-outline-primary btn-sm active" onclick="toggleView('list')"> | |
| <i class="fas fa-list"></i> List | |
| </button> | |
| </div> | |
| </div> | |
| <div id="categoryButtons" class="category-buttons"> | |
| <!-- Category buttons will be loaded here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Documents Container --> | |
| <div id="documentsContainer"> | |
| <!-- Documents will be loaded here --> | |
| </div> | |
| </div> | |
| <!-- OCR Text Tab --> | |
| <div id="ocr" class="tab-content"> | |
| <div class="card"> | |
| <div class="card-header bg-warning text-dark"> | |
| <h4><i class="fas fa-eye me-2"></i>Advanced OCR Text Extraction</h4> | |
| </div> | |
| <div class="card-body"> | |
| <div class="alert alert-info" role="alert"> | |
| <i class="fas fa-info-circle me-2"></i> | |
| <strong>Enhanced OCR Features:</strong> Our advanced model supports table extraction (HTML), LaTeX equations, watermark detection, signature recognition, and checkbox handling. | |
| </div> | |
| <p class="text-muted">Extract text from documents using advanced Optical Character Recognition with AI-powered document understanding.</p> | |
| <form id="ocrForm" class="row g-3"> | |
| <div class="col-12"> | |
| <label for="ocrFile" class="form-label">Document File</label> | |
| <div class="file-upload border rounded p-4 text-center" id="ocrUpload"> | |
| <i class="fas fa-file-alt fa-3x text-warning mb-3"></i> | |
| <p class="mb-0">Click to select or drag & drop files here</p> | |
| <small class="text-muted">Supports: PDF, JPEG, PNG, TIFF</small> | |
| <input type="file" id="ocrFile" accept="image/*,.pdf" class="d-none"> | |
| </div> | |
| </div> | |
| <div class="col-12"> | |
| <button type="submit" class="btn btn-warning"> | |
| <i class="fas fa-robot me-2"></i>Extract Text with AI OCR | |
| </button> | |
| </div> | |
| </form> | |
| <div id="ocrResult" class="mt-3"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Document Preview Modal --> | |
| <div class="modal fade" id="documentModal" tabindex="-1"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Document Preview</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal"></button> | |
| </div> | |
| <div class="modal-body text-center"> | |
| <img id="documentPreview" class="img-fluid mb-3" style="max-height: 400px;"> | |
| <div id="documentDetails"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bootstrap JS --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <!-- Chart.js --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <!-- Custom JS --> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> |