Spaces:
Sleeping
Sleeping
File size: 11,215 Bytes
ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 5753ed4 ed74fda 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 |
<!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;">
<!-- 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> |