Spaces:
Sleeping
Sleeping
File size: 7,237 Bytes
ed74fda |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 |
<!DOCTYPE html>
<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> |