Spaces:
Sleeping
Sleeping
File size: 15,686 Bytes
ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda a457084 5753ed4 ed74fda 5753ed4 ed74fda a457084 ed74fda a457084 5753ed4 a457084 5753ed4 a457084 5753ed4 a457084 5753ed4 a457084 5753ed4 a457084 5753ed4 a457084 5753ed4 a457084 5753ed4 ed74fda a457084 ed74fda a457084 5753ed4 a457084 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda a457084 5753ed4 a457084 5753ed4 a457084 5753ed4 ed74fda a457084 ed74fda 5753ed4 b7d66ac ed74fda 5753ed4 b7d66ac da16377 b7d66ac 5753ed4 b7d66ac 5753ed4 b7d66ac 5753ed4 ed74fda a457084 ed74fda 5753ed4 a457084 5753ed4 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 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 |
<!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>
<!-- 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> |