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;"> | |
| <!-- Navigation Header --> | |
| <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> | |
| <div class="container"> | |
| <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> | |
| <div class="container mt-4"> | |
| <!-- Dashboard Stats --> | |
| <div class="row mb-4" id="stats"> | |
| <!-- Stats will be loaded here --> | |
| </div> | |
| <!-- Navigation Tabs --> | |
| <ul class="nav nav-tabs mb-4" id="mainTabs" role="tablist"> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link active" onclick="showTab('upload')" type="button"> | |
| <i class="fas fa-upload me-2"></i>Upload Categories | |
| </button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" onclick="showTab('classify')" type="button"> | |
| <i class="fas fa-search me-2"></i>Classify Documents | |
| </button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" onclick="showTab('browse')" type="button"> | |
| <i class="fas fa-folder-open me-2"></i>Browse Archive | |
| </button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" onclick="showTab('ocr')" type="button"> | |
| <i class="fas fa-eye me-2"></i>OCR Text | |
| </button> | |
| </li> | |
| </ul> | |
| <!-- Upload Categories Tab --> | |
| <div id="upload" class="tab-content active"> | |
| <div class="card"> | |
| <div class="card-header bg-primary text-white"> | |
| <h4><i class="fas fa-tags me-2"></i>Upload Document Categories</h4> | |
| </div> | |
| <div class="card-body"> | |
| <p class="text-muted">Upload sample documents for each category to train the classification system.</p> | |
| <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> | |
| </div> | |
| <div class="col-12"> | |
| <button type="submit" class="btn btn-primary"> | |
| <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="card"> | |
| <div class="card-header bg-info text-white"> | |
| <h4><i class="fas fa-archive me-2"></i>Browse Document Archive</h4> | |
| </div> | |
| <div class="card-body"> | |
| <p class="text-muted">Browse and search through your classified documents by category.</p> | |
| <div class="mb-3" id="categoryButtons"> | |
| <!-- Category buttons will be loaded here --> | |
| </div> | |
| <div id="documentsContainer"> | |
| <!-- Documents will be loaded here --> | |
| </div> | |
| </div> | |
| </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>OCR Text Extraction</h4> | |
| </div> | |
| <div class="card-body"> | |
| <p class="text-muted">Extract text from documents using Optical Character Recognition.</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> | |
| <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-search me-2"></i>Extract Text | |
| </button> | |
| </div> | |
| </form> | |
| <div id="ocrResult" class="mt-3"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bootstrap JS --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <!-- Custom JS --> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> |