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> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="/static/styles.css"> | |
| </head> | |
| <body> | |
| <!-- Login Modal --> | |
| <div id="loginModal" class="modal"> | |
| <div class="modal-content"> | |
| <h2><i class="fas fa-lock"></i> Login Required</h2> | |
| <form id="loginForm"> | |
| <div class="form-group"> | |
| <label for="username">Username</label> | |
| <input type="text" id="username" class="form-control" required value="admin"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="password">Password</label> | |
| <input type="password" id="password" class="form-control" required value="admin123"> | |
| </div> | |
| <button type="submit" class="btn btn-primary"> | |
| <i class="fas fa-sign-in-alt"></i> Login | |
| </button> | |
| </form> | |
| <div id="loginResult"></div> | |
| </div> | |
| </div> | |
| <!-- Main Application --> | |
| <div id="mainApp" style="display: none;"> | |
| <div class="container"> | |
| <div class="header"> | |
| <div class="header-content"> | |
| <div> | |
| <h1><i class="fas fa-archive"></i> Archive Digitalization System</h1> | |
| <p>Handwritten Document Classification & Storage</p> | |
| </div> | |
| <div class="user-info"> | |
| <span id="welcomeUser"></span> | |
| <button class="btn btn-secondary" onclick="logout()"> | |
| <i class="fas fa-sign-out-alt"></i> Logout | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-stats" id="stats"> | |
| <!-- Stats will be loaded here --> | |
| </div> | |
| <div class="tabs"> | |
| <button class="tab-button active" onclick="showTab('upload')"> | |
| <i class="fas fa-upload"></i> Upload Categories | |
| </button> | |
| <button class="tab-button" onclick="showTab('classify')"> | |
| <i class="fas fa-search"></i> Classify Documents | |
| </button> | |
| <button class="tab-button" onclick="showTab('browse')"> | |
| <i class="fas fa-folder-open"></i> Browse Archive | |
| </button> | |
| <button class="tab-button" onclick="showTab('ocr')"> | |
| <i class="fas fa-eye"></i> OCR Text | |
| </button> | |
| </div> | |
| <!-- Upload Categories Tab --> | |
| <div id="upload" class="tab-content active"> | |
| <h2><i class="fas fa-tags"></i> Upload Document Categories</h2> | |
| <p>Upload sample documents for each category to train the classification system.</p> | |
| <form id="uploadForm"> | |
| <div class="form-group"> | |
| <label for="categoryFile">Document File (Image or PDF)</label> | |
| <div class="file-upload" id="categoryUpload"> | |
| <i class="fas fa-cloud-upload-alt fa-2x"></i> | |
| <p>Click to select or drag & drop files here</p> | |
| <input type="file" id="categoryFile" accept="image/*,.pdf" style="display: none;"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="categoryLabel">Category Label</label> | |
| <input type="text" id="categoryLabel" class="form-control" placeholder="e.g., birth_certificate, passport, diploma"> | |
| </div> | |
| <button type="submit" class="btn btn-primary"> | |
| <i class="fas fa-plus"></i> Add Category | |
| </button> | |
| </form> | |
| <div id="uploadResult"></div> | |
| </div> | |
| <!-- Classify Documents Tab --> | |
| <div id="classify" class="tab-content"> | |
| <h2><i class="fas fa-robot"></i> Classify & Store Documents</h2> | |
| <p>Upload documents to automatically classify and store them in the archive (min. 35% confidence).</p> | |
| <form id="classifyForm"> | |
| <div class="form-group"> | |
| <label for="classifyFile">Document to Classify</label> | |
| <div class="file-upload" id="classifyUpload"> | |
| <i class="fas fa-file fa-2x"></i> | |
| <p>Click to select or drag & drop files here</p> | |
| <input type="file" id="classifyFile" accept="image/*,.pdf" style="display: none;"> | |
| </div> | |
| </div> | |
| <button type="submit" class="btn btn-success"> | |
| <i class="fas fa-search"></i> Classify Document | |
| </button> | |
| </form> | |
| <div id="classifyResult"></div> | |
| </div> | |
| <!-- Browse Archive Tab --> | |
| <div id="browse" class="tab-content"> | |
| <h2><i class="fas fa-archive"></i> Browse Document Archive</h2> | |
| <p>Browse and search through your classified documents by category.</p> | |
| <div class="category-buttons" id="categoryButtons"> | |
| <!-- Category buttons will be loaded here --> | |
| </div> | |
| <div id="documentsContainer"> | |
| <!-- Documents will be loaded here --> | |
| </div> | |
| </div> | |
| <!-- OCR Text Tab --> | |
| <div id="ocr" class="tab-content"> | |
| <h2><i class="fas fa-eye"></i> OCR Text Extraction</h2> | |
| <p>Extract text from documents using Optical Character Recognition.</p> | |
| <form id="ocrForm"> | |
| <div class="form-group"> | |
| <label for="ocrFile">Document File</label> | |
| <div class="file-upload" id="ocrUpload"> | |
| <i class="fas fa-file-alt fa-2x"></i> | |
| <p>Click to select or drag & drop files here</p> | |
| <input type="file" id="ocrFile" accept="image/*,.pdf" style="display: none;"> | |
| </div> | |
| </div> | |
| <button type="submit" class="btn btn-primary"> | |
| <i class="fas fa-search"></i> Extract Text | |
| </button> | |
| </form> | |
| <div id="ocrResult"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> |