Hugging Face's logo

Spaces:
NRbones
/
docsync
Running

App Files Community
NRbones commited on
Commit
abcc060
·
verified ·
1 Parent(s): 00024c6

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1024 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Docsync
3
- emoji: 🌖
4
- colorFrom: red
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: docsync
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1024 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DocSync - Intelligent Document Automation</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pdf-lib.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ .dropzone {
13
+ border: 2px dashed #3b82f6;
14
+ transition: all 0.3s ease;
15
+ }
16
+ .dropzone.active {
17
+ border-color: #10b981;
18
+ background-color: #f0fdf4;
19
+ }
20
+ .document-preview {
21
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
22
+ }
23
+ .confidence-meter {
24
+ height: 6px;
25
+ border-radius: 3px;
26
+ }
27
+ .sidebar-item {
28
+ transition: all 0.2s ease;
29
+ }
30
+ .sidebar-item:hover {
31
+ background-color: #f3f4f6;
32
+ }
33
+ .page-turner {
34
+ animation: pageTurn 0.5s ease-in-out;
35
+ }
36
+ @keyframes pageTurn {
37
+ 0% { transform: rotateY(0deg); }
38
+ 50% { transform: rotateY(90deg); }
39
+ 100% { transform: rotateY(0deg); }
40
+ }
41
+ .highlight-field {
42
+ animation: pulse 2s infinite;
43
+ }
44
+ @keyframes pulse {
45
+ 0% { background-color: rgba(255, 255, 0, 0.3); }
46
+ 50% { background-color: rgba(255, 255, 0, 0.7); }
47
+ 100% { background-color: rgba(255, 255, 0, 0.3); }
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="bg-gray-50 font-sans">
52
+ <div class="flex h-screen overflow-hidden">
53
+ <!-- Sidebar -->
54
+ <div class="hidden md:flex md:flex-shrink-0">
55
+ <div class="flex flex-col w-64 bg-white border-r border-gray-200">
56
+ <div class="flex items-center justify-center h-16 px-4 bg-blue-600">
57
+ <h1 class="text-white font-bold text-xl">DocSync</h1>
58
+ </div>
59
+ <div class="flex flex-col flex-grow p-4 overflow-y-auto">
60
+ <nav class="flex-1 space-y-2">
61
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-blue-700 bg-blue-100 rounded-md sidebar-item">
62
+ <i class="fas fa-home mr-3"></i>
63
+ Dashboard
64
+ </a>
65
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 rounded-md sidebar-item">
66
+ <i class="fas fa-file-import mr-3"></i>
67
+ Document Processing
68
+ </a>
69
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 rounded-md sidebar-item">
70
+ <i class="fas fa-history mr-3"></i>
71
+ Processing History
72
+ </a>
73
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 rounded-md sidebar-item">
74
+ <i class="fas fa-cog mr-3"></i>
75
+ Settings
76
+ </a>
77
+ </nav>
78
+ <div class="mt-auto p-4">
79
+ <div class="flex items-center">
80
+ <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile">
81
+ <div class="ml-3">
82
+ <p class="text-sm font-medium text-gray-700">Sarah Johnson</p>
83
+ <p class="text-xs font-medium text-gray-500">Admin</p>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Main content -->
92
+ <div class="flex flex-col flex-1 overflow-hidden">
93
+ <!-- Top navigation -->
94
+ <div class="flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200">
95
+ <div class="flex items-center">
96
+ <button class="md:hidden text-gray-500 focus:outline-none">
97
+ <i class="fas fa-bars"></i>
98
+ </button>
99
+ <h2 class="ml-4 text-lg font-medium text-gray-900">Document Automation</h2>
100
+ </div>
101
+ <div class="flex items-center space-x-4">
102
+ <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none">
103
+ <i class="fas fa-bell"></i>
104
+ </button>
105
+ <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none">
106
+ <i class="fas fa-question-circle"></i>
107
+ </button>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Main content area -->
112
+ <div class="flex-1 overflow-auto p-6">
113
+ <div class="max-w-7xl mx-auto">
114
+ <!-- Process steps -->
115
+ <div class="mb-8">
116
+ <div class="flex items-center">
117
+ <div class="flex items-center relative">
118
+ <div class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-semibold">
119
+ 1
120
+ </div>
121
+ <div class="ml-3 text-sm font-medium text-blue-600">Upload Source</div>
122
+ </div>
123
+ <div class="flex-auto border-t-2 border-gray-200 mx-4"></div>
124
+ <div class="flex items-center">
125
+ <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-200 text-gray-600 font-semibold">
126
+ 2
127
+ </div>
128
+ <div class="ml-3 text-sm font-medium text-gray-500">Upload Template</div>
129
+ </div>
130
+ <div class="flex-auto border-t-2 border-gray-200 mx-4"></div>
131
+ <div class="flex items-center">
132
+ <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-200 text-gray-600 font-semibold">
133
+ 3
134
+ </div>
135
+ <div class="ml-3 text-sm font-medium text-gray-500">Review & Export</div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Upload source document -->
141
+ <div class="bg-white rounded-lg shadow p-6 mb-8">
142
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Upload Source Document</h3>
143
+ <p class="text-sm text-gray-500 mb-6">Upload a completed invoice, form, or PDF document that contains the data you want to extract.</p>
144
+
145
+ <div id="sourceDropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-4">
146
+ <div class="flex flex-col items-center justify-center">
147
+ <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i>
148
+ <p class="text-sm text-gray-600 mb-1">Drag and drop your file here</p>
149
+ <p class="text-xs text-gray-400">or click to browse</p>
150
+ <input type="file" id="sourceFileInput" class="hidden" accept=".pdf,.jpg,.jpeg,.png,.tiff">
151
+ </div>
152
+ </div>
153
+ <div class="text-xs text-gray-500 text-center">Supported formats: PDF, JPG, PNG, TIFF (Max 20MB)</div>
154
+ </div>
155
+
156
+ <!-- Processing status (hidden initially) -->
157
+ <div id="processingStatus" class="hidden bg-white rounded-lg shadow p-6 mb-8">
158
+ <div class="flex items-center justify-between mb-4">
159
+ <h3 class="text-lg font-medium text-gray-900">Processing Document</h3>
160
+ <div class="text-sm text-blue-600">Step 1 of 3</div>
161
+ </div>
162
+
163
+ <div class="space-y-4">
164
+ <div>
165
+ <div class="flex items-center justify-between mb-1">
166
+ <span class="text-sm font-medium text-gray-700">OCR Processing</span>
167
+ <span class="text-xs font-medium text-green-600">Completed</span>
168
+ </div>
169
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
170
+ <div class="bg-green-600 h-1.5 rounded-full" style="width: 100%"></div>
171
+ </div>
172
+ </div>
173
+
174
+ <div>
175
+ <div class="flex items-center justify-between mb-1">
176
+ <span class="text-sm font-medium text-gray-700">Layout Analysis</span>
177
+ <span class="text-xs font-medium text-green-600">Completed</span>
178
+ </div>
179
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
180
+ <div class="bg-green-600 h-1.5 rounded-full" style="width: 100%"></div>
181
+ </div>
182
+ </div>
183
+
184
+ <div>
185
+ <div class="flex items-center justify-between mb-1">
186
+ <span class="text-sm font-medium text-gray-700">Field Extraction</span>
187
+ <span class="text-xs font-medium text-blue-600">In Progress</span>
188
+ </div>
189
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
190
+ <div class="bg-blue-600 h-1.5 rounded-full" style="width: 65%"></div>
191
+ </div>
192
+ </div>
193
+
194
+ <div>
195
+ <div class="flex items-center justify-between mb-1">
196
+ <span class="text-sm font-medium text-gray-700">Semantic Matching</span>
197
+ <span class="text-xs font-medium text-gray-600">Pending</span>
198
+ </div>
199
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
200
+ <div class="bg-gray-300 h-1.5 rounded-full" style="width: 0%"></div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Extracted data preview (hidden initially) -->
207
+ <div id="extractedDataPreview" class="hidden bg-white rounded-lg shadow overflow-hidden mb-8">
208
+ <div class="border-b border-gray-200 px-6 py-4">
209
+ <h3 class="text-lg font-medium text-gray-900">Extracted Data Preview</h3>
210
+ </div>
211
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-0">
212
+ <!-- Document preview -->
213
+ <div class="md:col-span-1 border-r border-gray-200">
214
+ <div class="p-4">
215
+ <div class="document-preview bg-gray-100 rounded-lg overflow-hidden relative">
216
+ <div class="absolute top-0 left-0 right-0 bg-gray-800 text-white py-1 px-3 text-sm flex justify-between items-center">
217
+ <span>source_document.pdf</span>
218
+ <div class="flex space-x-2">
219
+ <button class="text-gray-300 hover:text-white">
220
+ <i class="fas fa-search-plus"></i>
221
+ </button>
222
+ <button class="text-gray-300 hover:text-white">
223
+ <i class="fas fa-search-minus"></i>
224
+ </button>
225
+ </div>
226
+ </div>
227
+ <div class="p-4 h-96 overflow-auto">
228
+ <img id="documentPreviewImage" src="https://via.placeholder.com/600x800?text=Document+Preview" alt="Document preview" class="mx-auto shadow-lg">
229
+ </div>
230
+ <div class="absolute bottom-0 left-0 right-0 bg-gray-100 py-2 px-4 flex justify-between items-center border-t border-gray-200">
231
+ <button id="prevPage" class="text-gray-600 hover:text-blue-600 disabled:text-gray-300">
232
+ <i class="fas fa-chevron-left"></i> Previous
233
+ </button>
234
+ <span class="text-sm text-gray-600">Page <span id="currentPage">1</span> of <span id="totalPages">3</span></span>
235
+ <button id="nextPage" class="text-gray-600 hover:text-blue-600 disabled:text-gray-300">
236
+ Next <i class="fas fa-chevron-right"></i>
237
+ </button>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Extracted fields -->
244
+ <div class="md:col-span-2">
245
+ <div class="p-4">
246
+ <div class="flex justify-between items-center mb-4">
247
+ <div>
248
+ <h4 class="font-medium text-gray-900">Extracted Fields</h4>
249
+ <p class="text-sm text-gray-500">Review and edit the extracted data before proceeding</p>
250
+ </div>
251
+ <div class="flex space-x-2">
252
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm hover:bg-gray-200">
253
+ <i class="fas fa-filter mr-1"></i> Filter
254
+ </button>
255
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm hover:bg-gray-200">
256
+ <i class="fas fa-search mr-1"></i> Search
257
+ </button>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="overflow-auto" style="max-height: 500px;">
262
+ <table class="min-w-full divide-y divide-gray-200">
263
+ <thead class="bg-gray-50">
264
+ <tr>
265
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Field Name</th>
266
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Extracted Value</th>
267
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Confidence</th>
268
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
269
+ </tr>
270
+ </thead>
271
+ <tbody id="extractedFieldsTable" class="bg-white divide-y divide-gray-200">
272
+ <!-- Sample rows will be inserted here by JavaScript -->
273
+ </tbody>
274
+ </table>
275
+ </div>
276
+
277
+ <div class="mt-4 flex justify-between items-center">
278
+ <div class="text-sm text-gray-500">
279
+ Showing <span id="showingStart">1</span> to <span id="showingEnd">10</span> of <span id="totalFields">24</span> fields
280
+ </div>
281
+ <div class="flex space-x-2">
282
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm hover:bg-gray-200 disabled:opacity-50">
283
+ <i class="fas fa-chevron-left"></i>
284
+ </button>
285
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm hover:bg-gray-200 disabled:opacity-50">
286
+ <i class="fas fa-chevron-right"></i>
287
+ </button>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Upload template document (hidden initially) -->
296
+ <div id="templateUploadSection" class="hidden bg-white rounded-lg shadow p-6 mb-8">
297
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Upload Template Document</h3>
298
+ <p class="text-sm text-gray-500 mb-6">Upload a blank or partially completed template form that you want to fill with the extracted data.</p>
299
+
300
+ <div id="templateDropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-4">
301
+ <div class="flex flex-col items-center justify-center">
302
+ <i class="fas fa-file-alt text-4xl text-blue-500 mb-3"></i>
303
+ <p class="text-sm text-gray-600 mb-1">Drag and drop your template file here</p>
304
+ <p class="text-xs text-gray-400">or click to browse</p>
305
+ <input type="file" id="templateFileInput" class="hidden" accept=".pdf">
306
+ </div>
307
+ </div>
308
+ <div class="text-xs text-gray-500 text-center">Supported formats: PDF (Max 20MB)</div>
309
+ </div>
310
+
311
+ <!-- Field mapping (hidden initially) -->
312
+ <div id="fieldMappingSection" class="hidden bg-white rounded-lg shadow overflow-hidden mb-8">
313
+ <div class="border-b border-gray-200 px-6 py-4">
314
+ <h3 class="text-lg font-medium text-gray-900">Field Mapping</h3>
315
+ <p class="text-sm text-gray-500">Review and adjust how fields from your source document map to the template fields</p>
316
+ </div>
317
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-0">
318
+ <!-- Source fields -->
319
+ <div class="md:col-span-1 border-r border-gray-200 p-4">
320
+ <h4 class="font-medium text-gray-900 mb-3">Source Fields</h4>
321
+ <div class="relative mb-3">
322
+ <input type="text" placeholder="Search source fields..." class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
323
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
324
+ </div>
325
+ <div class="overflow-auto" style="max-height: 500px;">
326
+ <div id="sourceFieldsList" class="space-y-2">
327
+ <!-- Source fields will be inserted here by JavaScript -->
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Mapping visualization -->
333
+ <div class="md:col-span-1 border-r border-gray-200 p-4">
334
+ <h4 class="font-medium text-gray-900 mb-3 text-center">Field Mapping</h4>
335
+ <div class="flex flex-col items-center justify-center h-full">
336
+ <div class="w-full max-w-xs">
337
+ <div class="bg-blue-50 rounded-lg p-6 text-center">
338
+ <i class="fas fa-random text-3xl text-blue-500 mb-3"></i>
339
+ <p class="text-sm text-gray-700 mb-3">Drag fields between columns to create custom mappings</p>
340
+ <p class="text-xs text-gray-500">Auto-mapped fields are shown in green</p>
341
+ </div>
342
+ <div class="mt-6">
343
+ <h5 class="text-sm font-medium text-gray-700 mb-2">Mapping Confidence</h5>
344
+ <div class="bg-white rounded-lg shadow p-4">
345
+ <canvas id="mappingConfidenceChart" height="150"></canvas>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Template fields -->
353
+ <div class="md:col-span-1 p-4">
354
+ <h4 class="font-medium text-gray-900 mb-3">Template Fields</h4>
355
+ <div class="relative mb-3">
356
+ <input type="text" placeholder="Search template fields..." class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
357
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
358
+ </div>
359
+ <div class="overflow-auto" style="max-height: 500px;">
360
+ <div id="templateFieldsList" class="space-y-2">
361
+ <!-- Template fields will be inserted here by JavaScript -->
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <!-- Final output (hidden initially) -->
369
+ <div id="finalOutputSection" class="hidden bg-white rounded-lg shadow overflow-hidden mb-8">
370
+ <div class="border-b border-gray-200 px-6 py-4">
371
+ <h3 class="text-lg font-medium text-gray-900">Final Output</h3>
372
+ <p class="text-sm text-gray-500">Review and download your completed document</p>
373
+ </div>
374
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-0">
375
+ <!-- Document preview -->
376
+ <div class="md:col-span-1 border-r border-gray-200 p-4">
377
+ <h4 class="font-medium text-gray-900 mb-3">Completed Document Preview</h4>
378
+ <div class="document-preview bg-gray-100 rounded-lg overflow-hidden relative">
379
+ <div class="absolute top-0 left-0 right-0 bg-gray-800 text-white py-1 px-3 text-sm flex justify-between items-center">
380
+ <span>completed_document.pdf</span>
381
+ <div class="flex space-x-2">
382
+ <button class="text-gray-300 hover:text-white">
383
+ <i class="fas fa-search-plus"></i>
384
+ </button>
385
+ <button class="text-gray-300 hover:text-white">
386
+ <i class="fas fa-search-minus"></i>
387
+ </button>
388
+ </div>
389
+ </div>
390
+ <div class="p-4 h-96 overflow-auto">
391
+ <img id="completedDocumentPreview" src="https://via.placeholder.com/600x800?text=Completed+Document+Preview" alt="Completed document preview" class="mx-auto shadow-lg">
392
+ </div>
393
+ <div class="absolute bottom-0 left-0 right-0 bg-gray-100 py-2 px-4 flex justify-between items-center border-t border-gray-200">
394
+ <button id="prevCompletedPage" class="text-gray-600 hover:text-blue-600 disabled:text-gray-300">
395
+ <i class="fas fa-chevron-left"></i> Previous
396
+ </button>
397
+ <span class="text-sm text-gray-600">Page <span id="currentCompletedPage">1</span> of <span id="totalCompletedPages">3</span></span>
398
+ <button id="nextCompletedPage" class="text-gray-600 hover:text-blue-600 disabled:text-gray-300">
399
+ Next <i class="fas fa-chevron-right"></i>
400
+ </button>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- Export options -->
406
+ <div class="md:col-span-1 p-4">
407
+ <h4 class="font-medium text-gray-900 mb-3">Export Options</h4>
408
+
409
+ <div class="space-y-4">
410
+ <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
411
+ <div class="flex items-start">
412
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
413
+ <i class="fas fa-file-pdf"></i>
414
+ </div>
415
+ <div class="ml-3">
416
+ <h5 class="text-sm font-medium text-gray-900">PDF Document</h5>
417
+ <p class="text-sm text-gray-500">Download the filled-in PDF document</p>
418
+ <div class="mt-2">
419
+ <button id="downloadPdf" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
420
+ <i class="fas fa-download mr-1"></i> Download PDF
421
+ </button>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
428
+ <div class="flex items-start">
429
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
430
+ <i class="fas fa-file-code"></i>
431
+ </div>
432
+ <div class="ml-3">
433
+ <h5 class="text-sm font-medium text-gray-900">JSON Data</h5>
434
+ <p class="text-sm text-gray-500">Export the structured data in JSON format</p>
435
+ <div class="mt-2">
436
+ <button id="downloadJson" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
437
+ <i class="fas fa-download mr-1"></i> Download JSON
438
+ </button>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
445
+ <div class="flex items-start">
446
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
447
+ <i class="fas fa-file-csv"></i>
448
+ </div>
449
+ <div class="ml-3">
450
+ <h5 class="text-sm font-medium text-gray-900">CSV Data</h5>
451
+ <p class="text-sm text-gray-500">Export the data in tabular CSV format</p>
452
+ <div class="mt-2">
453
+ <button id="downloadCsv" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
454
+ <i class="fas fa-download mr-1"></i> Download CSV
455
+ </button>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="mt-6 pt-4 border-t border-gray-200">
463
+ <h5 class="text-sm font-medium text-gray-900 mb-2">Processing Summary</h5>
464
+ <div class="bg-white rounded-lg shadow p-4">
465
+ <div class="grid grid-cols-2 gap-4">
466
+ <div>
467
+ <p class="text-xs text-gray-500">Source Fields</p>
468
+ <p class="font-medium">24</p>
469
+ </div>
470
+ <div>
471
+ <p class="text-xs text-gray-500">Template Fields</p>
472
+ <p class="font-medium">18</p>
473
+ </div>
474
+ <div>
475
+ <p class="text-xs text-gray-500">Auto-mapped</p>
476
+ <p class="font-medium text-green-600">16 (89%)</p>
477
+ </div>
478
+ <div>
479
+ <p class="text-xs text-gray-500">Manual Mappings</p>
480
+ <p class="font-medium">2</p>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <!-- Navigation buttons -->
490
+ <div class="flex justify-between">
491
+ <button id="backButton" class="hidden px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
492
+ <i class="fas fa-arrow-left mr-2"></i> Back
493
+ </button>
494
+ <button id="nextButton" class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
495
+ Continue <i class="fas fa-arrow-right ml-2"></i>
496
+ </button>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+
503
+ <script>
504
+ // Sample data for demonstration
505
+ const extractedFields = [
506
+ { id: 1, name: "Invoice Number", value: "INV-2023-0042", confidence: 98, page: 1, boundingBox: "100,200,300,220" },
507
+ { id: 2, name: "Invoice Date", value: "2023-05-15", confidence: 95, page: 1, boundingBox: "100,250,300,270" },
508
+ { id: 3, name: "Due Date", value: "2023-06-14", confidence: 92, page: 1, boundingBox: "100,300,300,320" },
509
+ { id: 4, name: "Customer Name", value: "Acme Corporation", confidence: 97, page: 1, boundingBox: "100,350,300,370" },
510
+ { id: 5, name: "Customer Address", value: "123 Business Ave, Suite 450", confidence: 90, page: 1, boundingBox: "100,400,300,450" },
511
+ { id: 6, name: "Customer ID", value: "ACME-0042", confidence: 88, page: 1, boundingBox: "100,500,300,520" },
512
+ { id: 7, name: "Subtotal", value: "$1,250.00", confidence: 96, page: 2, boundingBox: "400,200,500,220" },
513
+ { id: 8, name: "Tax (8.25%)", value: "$103.13", confidence: 94, page: 2, boundingBox: "400,250,500,270" },
514
+ { id: 9, name: "Total Amount", value: "$1,353.13", confidence: 99, page: 2, boundingBox: "400,300,500,320" },
515
+ { id: 10, name: "Payment Terms", value: "Net 30", confidence: 85, page: 2, boundingBox: "400,350,500,370" },
516
+ ];
517
+
518
+ const templateFields = [
519
+ { id: 't1', name: "Invoice No.", mappedTo: 1, confidence: 95 },
520
+ { id: 't2', name: "Date Issued", mappedTo: 2, confidence: 90 },
521
+ { id: 't3', name: "Payment Due Date", mappedTo: 3, confidence: 88 },
522
+ { id: 't4', name: "Client Name", mappedTo: 4, confidence: 93 },
523
+ { id: 't5', name: "Client Address", mappedTo: 5, confidence: 85 },
524
+ { id: 't6', name: "Client Reference", mappedTo: 6, confidence: 80 },
525
+ { id: 't7', name: "Subtotal Amount", mappedTo: 7, confidence: 96 },
526
+ { id: 't8', name: "Tax Amount", mappedTo: 8, confidence: 94 },
527
+ { id: 't9', name: "Total Due", mappedTo: 9, confidence: 97 },
528
+ { id: 't10', name: "Payment Terms", mappedTo: 10, confidence: 82 },
529
+ { id: 't11', name: "Bank Account", mappedTo: null, confidence: null },
530
+ { id: 't12', name: "Payment Instructions", mappedTo: null, confidence: null },
531
+ ];
532
+
533
+ // Current state
534
+ let currentStep = 1;
535
+ let currentPage = 1;
536
+ let totalPages = 3;
537
+ let currentCompletedPage = 1;
538
+ let totalCompletedPages = 3;
539
+
540
+ // DOM elements
541
+ const sourceDropzone = document.getElementById('sourceDropzone');
542
+ const sourceFileInput = document.getElementById('sourceFileInput');
543
+ const templateDropzone = document.getElementById('templateDropzone');
544
+ const templateFileInput = document.getElementById('templateFileInput');
545
+ const processingStatus = document.getElementById('processingStatus');
546
+ const extractedDataPreview = document.getElementById('extractedDataPreview');
547
+ const templateUploadSection = document.getElementById('templateUploadSection');
548
+ const fieldMappingSection = document.getElementById('fieldMappingSection');
549
+ const finalOutputSection = document.getElementById('finalOutputSection');
550
+ const nextButton = document.getElementById('nextButton');
551
+ const backButton = document.getElementById('backButton');
552
+ const extractedFieldsTable = document.getElementById('extractedFieldsTable');
553
+ const sourceFieldsList = document.getElementById('sourceFieldsList');
554
+ const templateFieldsList = document.getElementById('templateFieldsList');
555
+ const documentPreviewImage = document.getElementById('documentPreviewImage');
556
+ const currentPageSpan = document.getElementById('currentPage');
557
+ const totalPagesSpan = document.getElementById('totalPages');
558
+ const prevPageButton = document.getElementById('prevPage');
559
+ const nextPageButton = document.getElementById('nextPage');
560
+ const currentCompletedPageSpan = document.getElementById('currentCompletedPage');
561
+ const totalCompletedPagesSpan = document.getElementById('totalCompletedPages');
562
+ const prevCompletedPageButton = document.getElementById('prevCompletedPage');
563
+ const nextCompletedPageButton = document.getElementById('nextCompletedPage');
564
+ const showingStartSpan = document.getElementById('showingStart');
565
+ const showingEndSpan = document.getElementById('showingEnd');
566
+ const totalFieldsSpan = document.getElementById('totalFields');
567
+
568
+ // Initialize the app
569
+ function init() {
570
+ // Set up event listeners
571
+ sourceDropzone.addEventListener('click', () => sourceFileInput.click());
572
+ sourceFileInput.addEventListener('change', handleSourceFileUpload);
573
+
574
+ templateDropzone.addEventListener('click', () => templateFileInput.click());
575
+ templateFileInput.addEventListener('change', handleTemplateFileUpload);
576
+
577
+ nextButton.addEventListener('click', handleNextStep);
578
+ backButton.addEventListener('click', handlePreviousStep);
579
+
580
+ prevPageButton.addEventListener('click', () => changePage(-1));
581
+ nextPageButton.addEventListener('click', () => changePage(1));
582
+
583
+ prevCompletedPageButton.addEventListener('click', () => changeCompletedPage(-1));
584
+ nextCompletedPageButton.addEventListener('click', () => changeCompletedPage(1));
585
+
586
+ // Set up drag and drop
587
+ setupDragAndDrop(sourceDropzone, sourceFileInput);
588
+ setupDragAndDrop(templateDropzone, templateFileInput);
589
+
590
+ // Initialize showing fields
591
+ showingStartSpan.textContent = '1';
592
+ showingEndSpan.textContent = '10';
593
+ totalFieldsSpan.textContent = extractedFields.length;
594
+
595
+ // Initialize page numbers
596
+ currentPageSpan.textContent = currentPage;
597
+ totalPagesSpan.textContent = totalPages;
598
+ currentCompletedPageSpan.textContent = currentCompletedPage;
599
+ totalCompletedPagesSpan.textContent = totalCompletedPages;
600
+
601
+ // Disable previous page buttons initially
602
+ prevPageButton.disabled = true;
603
+ prevCompletedPageButton.disabled = true;
604
+ }
605
+
606
+ // Set up drag and drop functionality
607
+ function setupDragAndDrop(dropzone, fileInput) {
608
+ dropzone.addEventListener('dragover', (e) => {
609
+ e.preventDefault();
610
+ dropzone.classList.add('active');
611
+ });
612
+
613
+ dropzone.addEventListener('dragleave', () => {
614
+ dropzone.classList.remove('active');
615
+ });
616
+
617
+ dropzone.addEventListener('drop', (e) => {
618
+ e.preventDefault();
619
+ dropzone.classList.remove('active');
620
+
621
+ if (e.dataTransfer.files.length) {
622
+ fileInput.files = e.dataTransfer.files;
623
+ if (fileInput === sourceFileInput) {
624
+ handleSourceFileUpload();
625
+ } else {
626
+ handleTemplateFileUpload();
627
+ }
628
+ }
629
+ });
630
+ }
631
+
632
+ // Handle source file upload
633
+ function handleSourceFileUpload() {
634
+ if (sourceFileInput.files.length) {
635
+ const file = sourceFileInput.files[0];
636
+ console.log('Source file uploaded:', file.name);
637
+
638
+ // Show processing status
639
+ processingStatus.classList.remove('hidden');
640
+
641
+ // Simulate processing
642
+ setTimeout(() => {
643
+ processingStatus.classList.add('hidden');
644
+ extractedDataPreview.classList.remove('hidden');
645
+ populateExtractedFieldsTable();
646
+ updateProcessSteps(2);
647
+ }, 3000);
648
+ }
649
+ }
650
+
651
+ // Handle template file upload
652
+ function handleTemplateFileUpload() {
653
+ if (templateFileInput.files.length) {
654
+ const file = templateFileInput.files[0];
655
+ console.log('Template file uploaded:', file.name);
656
+
657
+ // Show field mapping section
658
+ templateUploadSection.classList.add('hidden');
659
+ fieldMappingSection.classList.remove('hidden');
660
+ populateFieldMappingLists();
661
+ renderMappingConfidenceChart();
662
+ updateProcessSteps(3);
663
+ }
664
+ }
665
+
666
+ // Populate extracted fields table
667
+ function populateExtractedFieldsTable() {
668
+ extractedFieldsTable.innerHTML = '';
669
+
670
+ extractedFields.forEach(field => {
671
+ const row = document.createElement('tr');
672
+ row.className = field.page === currentPage ? 'bg-blue-50' : '';
673
+ row.dataset.id = field.id;
674
+ row.dataset.page = field.page;
675
+
676
+ row.innerHTML = `
677
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${field.name}</td>
678
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${field.value}</td>
679
+ <td class="px-6 py-4 whitespace-nowrap">
680
+ <div class="flex items-center">
681
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
682
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: ${field.confidence}%"></div>
683
+ </div>
684
+ <span class="ml-2 text-xs font-medium text-gray-700">${field.confidence}%</span>
685
+ </div>
686
+ </td>
687
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
688
+ <button class="text-blue-600 hover:text-blue-900 mr-3 edit-field">
689
+ <i class="fas fa-edit"></i>
690
+ </button>
691
+ <button class="text-red-600 hover:text-red-900 delete-field">
692
+ <i class="fas fa-trash"></i>
693
+ </button>
694
+ </td>
695
+ `;
696
+
697
+ extractedFieldsTable.appendChild(row);
698
+ });
699
+
700
+ // Add event listeners to edit and delete buttons
701
+ document.querySelectorAll('.edit-field').forEach(button => {
702
+ button.addEventListener('click', (e) => {
703
+ const row = e.target.closest('tr');
704
+ const fieldId = parseInt(row.dataset.id);
705
+ editField(fieldId);
706
+ });
707
+ });
708
+
709
+ document.querySelectorAll('.delete-field').forEach(button => {
710
+ button.addEventListener('click', (e) => {
711
+ const row = e.target.closest('tr');
712
+ const fieldId = parseInt(row.dataset.id);
713
+ deleteField(fieldId);
714
+ });
715
+ });
716
+ }
717
+
718
+ // Populate field mapping lists
719
+ function populateFieldMappingLists() {
720
+ sourceFieldsList.innerHTML = '';
721
+ templateFieldsList.innerHTML = '';
722
+
723
+ // Source fields
724
+ extractedFields.forEach(field => {
725
+ const fieldElement = document.createElement('div');
726
+ fieldElement.className = 'flex items-center justify-between p-2 border border-gray-200 rounded-md cursor-move';
727
+ fieldElement.dataset.id = field.id;
728
+ fieldElement.draggable = true;
729
+
730
+ fieldElement.innerHTML = `
731
+ <div>
732
+ <div class="text-sm font-medium text-gray-700">${field.name}</div>
733
+ <div class="text-xs text-gray-500">${field.value}</div>
734
+ </div>
735
+ <div class="text-xs text-gray-400">
736
+ <i class="fas fa-grip-vertical"></i>
737
+ </div>
738
+ `;
739
+
740
+ sourceFieldsList.appendChild(fieldElement);
741
+
742
+ // Add drag start event
743
+ fieldElement.addEventListener('dragstart', (e) => {
744
+ e.dataTransfer.setData('text/plain', `source:${field.id}`);
745
+ });
746
+ });
747
+
748
+ // Template fields
749
+ templateFields.forEach(field => {
750
+ const fieldElement = document.createElement('div');
751
+ fieldElement.className = `flex items-center justify-between p-2 border rounded-md cursor-move ${field.mappedTo ? 'border-green-200 bg-green-50' : 'border-gray-200'}`;
752
+ fieldElement.dataset.id = field.id;
753
+ fieldElement.draggable = true;
754
+
755
+ fieldElement.innerHTML = `
756
+ <div>
757
+ <div class="text-sm font-medium text-gray-700">${field.name}</div>
758
+ ${field.mappedTo ?
759
+ `<div class="text-xs text-green-600">Mapped to: ${extractedFields.find(f => f.id === field.mappedTo).name}</div>` :
760
+ `<div class="text-xs text-gray-500">Not mapped</div>`}
761
+ </div>
762
+ <div class="text-xs ${field.mappedTo ? 'text-green-500' : 'text-gray-400'}">
763
+ <i class="fas fa-grip-vertical"></i>
764
+ </div>
765
+ `;
766
+
767
+ templateFieldsList.appendChild(fieldElement);
768
+
769
+ // Add drag start event
770
+ fieldElement.addEventListener('dragstart', (e) => {
771
+ e.dataTransfer.setData('text/plain', `template:${field.id}`);
772
+ });
773
+
774
+ // Add drop event
775
+ fieldElement.addEventListener('dragover', (e) => {
776
+ e.preventDefault();
777
+ });
778
+
779
+ fieldElement.addEventListener('drop', (e) => {
780
+ e.preventDefault();
781
+ const data = e.dataTransfer.getData('text/plain');
782
+ const [type, id] = data.split(':');
783
+
784
+ if (type === 'source') {
785
+ // Map source field to template field
786
+ const sourceFieldId = parseInt(id);
787
+ const templateFieldId = field.id;
788
+ mapFields(sourceFieldId, templateFieldId);
789
+ }
790
+ });
791
+ });
792
+ }
793
+
794
+ // Render mapping confidence chart
795
+ function renderMappingConfidenceChart() {
796
+ const ctx = document.getElementById('mappingConfidenceChart').getContext('2d');
797
+ const mappedFields = templateFields.filter(f => f.mappedTo !== null);
798
+ const unmappedFields = templateFields.filter(f => f.mappedTo === null);
799
+
800
+ new Chart(ctx, {
801
+ type: 'doughnut',
802
+ data: {
803
+ labels: ['High Confidence', 'Medium Confidence', 'Low Confidence', 'Unmapped'],
804
+ datasets: [{
805
+ data: [
806
+ mappedFields.filter(f => f.confidence >= 90).length,
807
+ mappedFields.filter(f => f.confidence >= 70 && f.confidence < 90).length,
808
+ mappedFields.filter(f => f.confidence < 70).length,
809
+ unmappedFields.length
810
+ ],
811
+ backgroundColor: [
812
+ '#10B981',
813
+ '#3B82F6',
814
+ '#F59E0B',
815
+ '#EF4444'
816
+ ],
817
+ borderWidth: 0
818
+ }]
819
+ },
820
+ options: {
821
+ cutout: '70%',
822
+ plugins: {
823
+ legend: {
824
+ position: 'bottom',
825
+ labels: {
826
+ boxWidth: 12,
827
+ padding: 20
828
+ }
829
+ }
830
+ }
831
+ }
832
+ });
833
+ }
834
+
835
+ // Map source field to template field
836
+ function mapFields(sourceFieldId, templateFieldId) {
837
+ const templateField = templateFields.find(f => f.id === templateFieldId);
838
+ templateField.mappedTo = sourceFieldId;
839
+
840
+ // Calculate confidence based on field name similarity (simplified for demo)
841
+ const sourceField = extractedFields.find(f => f.id === sourceFieldId);
842
+ const sourceName = sourceField.name.toLowerCase();
843
+ const templateName = templateField.name.toLowerCase();
844
+
845
+ // Simple similarity calculation for demo
846
+ let similarity = 0;
847
+ if (sourceName.includes('invoice') && templateName.includes('invoice')) similarity += 30;
848
+ if (sourceName.includes('date') && templateName.includes('date')) similarity += 30;
849
+ if (sourceName.includes('customer') && templateName.includes('client')) similarity += 20;
850
+ if (sourceName.includes('total') && templateName.includes('total')) similarity += 20;
851
+
852
+ templateField.confidence = Math.min(100, similarity + 50); // Ensure we don't go over 100%
853
+
854
+ // Update the UI
855
+ populateFieldMappingLists();
856
+
857
+ // Re-render the chart
858
+ const chartCanvas = document.getElementById('mappingConfidenceChart');
859
+ chartCanvas.innerHTML = ''; // Clear old chart
860
+ chartCanvas.width = chartCanvas.offsetWidth;
861
+ chartCanvas.height = chartCanvas.offsetHeight;
862
+ renderMappingConfidenceChart();
863
+ }
864
+
865
+ // Edit field
866
+ function editField(fieldId) {
867
+ const field = extractedFields.find(f => f.id === fieldId);
868
+ alert(`Editing field: ${field.name}\nCurrent value: ${field.value}`);
869
+ // In a real app, you would show a modal or inline editor
870
+ }
871
+
872
+ // Delete field
873
+ function deleteField(fieldId) {
874
+ if (confirm('Are you sure you want to delete this field?')) {
875
+ const index = extractedFields.findIndex(f => f.id === fieldId);
876
+ if (index !== -1) {
877
+ extractedFields.splice(index, 1);
878
+ populateExtractedFieldsTable();
879
+ }
880
+ }
881
+ }
882
+
883
+ // Change page in document preview
884
+ function changePage(delta) {
885
+ const newPage = currentPage + delta;
886
+ if (newPage >= 1 && newPage <= totalPages) {
887
+ currentPage = newPage;
888
+ currentPageSpan.textContent = currentPage;
889
+
890
+ // Update document preview image (simulated)
891
+ documentPreviewImage.src = `https://via.placeholder.com/600x800?text=Document+Page+${currentPage}`;
892
+
893
+ // Update extracted fields table highlighting
894
+ document.querySelectorAll('#extractedFieldsTable tr').forEach(row => {
895
+ if (parseInt(row.dataset.page) === currentPage) {
896
+ row.classList.add('bg-blue-50');
897
+ } else {
898
+ row.classList.remove('bg-blue-50');
899
+ }
900
+ });
901
+
902
+ // Update pagination buttons
903
+ prevPageButton.disabled = currentPage === 1;
904
+ nextPageButton.disabled = currentPage === totalPages;
905
+
906
+ // Add page turn animation
907
+ documentPreviewImage.classList.add('page-turner');
908
+ setTimeout(() => {
909
+ documentPreviewImage.classList.remove('page-turner');
910
+ }, 500);
911
+ }
912
+ }
913
+
914
+ // Change page in completed document preview
915
+ function changeCompletedPage(delta) {
916
+ const newPage = currentCompletedPage + delta;
917
+ if (newPage >= 1 && newPage <= totalCompletedPages) {
918
+ currentCompletedPage = newPage;
919
+ currentCompletedPageSpan.textContent = currentCompletedPage;
920
+
921
+ // Update completed document preview image (simulated)
922
+ document.getElementById('completedDocumentPreview').src = `https://via.placeholder.com/600x800?text=Completed+Page+${currentCompletedPage}`;
923
+
924
+ // Update pagination buttons
925
+ prevCompletedPageButton.disabled = currentCompletedPage === 1;
926
+ nextCompletedPageButton.disabled = currentCompletedPage === totalCompletedPages;
927
+
928
+ // Add page turn animation
929
+ document.getElementById('completedDocumentPreview').classList.add('page-turner');
930
+ setTimeout(() => {
931
+ document.getElementById('completedDocumentPreview').classList.remove('page-turner');
932
+ }, 500);
933
+ }
934
+ }
935
+
936
+ // Handle next step
937
+ function handleNextStep() {
938
+ if (currentStep === 1) {
939
+ // From upload source to upload template
940
+ templateUploadSection.classList.remove('hidden');
941
+ nextButton.textContent = 'Continue';
942
+ backButton.classList.remove('hidden');
943
+ } else if (currentStep === 2) {
944
+ // From upload template to field mapping (handled in upload handler)
945
+ } else if (currentStep === 3) {
946
+ // From field mapping to final output
947
+ fieldMappingSection.classList.add('hidden');
948
+ finalOutputSection.classList.remove('hidden');
949
+ nextButton.textContent = 'Finish';
950
+ } else if (currentStep === 4) {
951
+ // Finish the process
952
+ alert('Document processing completed!');
953
+ // In a real app, you would reset the form or redirect
954
+ }
955
+ }
956
+
957
+ // Handle previous step
958
+ function handlePreviousStep() {
959
+ if (currentStep === 2) {
960
+ // From upload template back to upload source
961
+ templateUploadSection.classList.add('hidden');
962
+ backButton.classList.add('hidden');
963
+ nextButton.textContent = 'Continue';
964
+ } else if (currentStep === 3) {
965
+ // From field mapping back to upload template
966
+ fieldMappingSection.classList.add('hidden');
967
+ templateUploadSection.classList.remove('hidden');
968
+ } else if (currentStep === 4) {
969
+ // From final output back to field mapping
970
+ finalOutputSection.classList.add('hidden');
971
+ fieldMappingSection.classList.remove('hidden');
972
+ nextButton.textContent = 'Continue';
973
+ }
974
+
975
+ updateProcessSteps(currentStep - 1);
976
+ }
977
+
978
+ // Update process steps UI
979
+ function updateProcessSteps(step) {
980
+ currentStep = step;
981
+
982
+ // Update step indicators
983
+ const steps = document.querySelectorAll('.flex.items-center.relative');
984
+ steps.forEach((stepElement, index) => {
985
+ const stepNumber = index + 1;
986
+ const circle = stepElement.querySelector('div');
987
+ const text = stepElement.querySelector('div + div');
988
+
989
+ if (stepNumber < step) {
990
+ // Completed step
991
+ circle.classList.remove('bg-gray-200', 'text-gray-600');
992
+ circle.classList.add('bg-green-500', 'text-white');
993
+ text.classList.remove('text-gray-500');
994
+ text.classList.add('text-green-600');
995
+ } else if (stepNumber === step) {
996
+ // Current step
997
+ circle.classList.remove('bg-gray-200', 'text-gray-600');
998
+ circle.classList.add('bg-blue-600', 'text-white');
999
+ text.classList.remove('text-gray-500');
1000
+ text.classList.add('text-blue-600');
1001
+ } else {
1002
+ // Future step
1003
+ circle.classList.remove('bg-blue-600', 'bg-green-500', 'text-white');
1004
+ circle.classList.add('bg-gray-200', 'text-gray-600');
1005
+ text.classList.remove('text-blue-600', 'text-green-600');
1006
+ text.classList.add('text-gray-500');
1007
+ }
1008
+ });
1009
+
1010
+ // Update next button text
1011
+ if (step === 3) {
1012
+ nextButton.textContent = 'Complete Processing';
1013
+ } else if (step === 4) {
1014
+ nextButton.textContent = 'Finish';
1015
+ } else {
1016
+ nextButton.textContent = 'Continue';
1017
+ }
1018
+ }
1019
+
1020
+ // Initialize the app when DOM is loaded
1021
+ document.addEventListener('DOMContentLoaded', init);
1022
+ </script>
1023
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=NRbones/docsync" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1024
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Design and implement a full-stack intelligent document automation system functionally analogous to the application available at git clone https://huggingface.co/spaces/seamoors/wealthsync-ad. The application shall enable users to upload a fully completed invoice, form, or PDF document, which will then be programmatically parsed using a suite of Python-based OCR (e.g., Tesseract), PDF parsing (e.g., PyMuPDF, pdfplumber, or PyPDF2), and machine learning techniques for semantic field recognition and structured data extraction. The core functionality must support: Field Extraction & Analysis: Upon uploading a completed form, the application must utilize OCR, visual layout analysis, and NLP-driven entity recognition to extract both labeled and inferred field data with high accuracy. All extracted values should be normalized into a unified schema for downstream processing. Template-Agnostic Form Filling: The user will subsequently upload a second PDF — a blank or partially completed template form that may differ in structure or layout from the original. The system must intelligently map and propagate values from the original form to this new document, using semantic similarity (e.g., cosine similarity on embedded field names, BERT-based field name matching, or fuzzy logic heuristics). It must robustly handle field remapping, layout discrepancies, and varying form structures. Output Formats & Data Export: Render a real-time, user-visible preview of the completed PDF document within the UI. Enable export in three formats: A downloadable filled-in PDF document. A structured and semantically accurate JSON representation of the data. A CSV file conforming to normalized tabular output specifications. Architecture & Stack Requirements: Backend: Python with FastAPI or Flask. Frontend: React or Streamlit (if rapid prototyping is preferred). ML/AI: Integrate document layout models (e.g., LayoutLMv3), OCR engines (e.g., Tesseract or EasyOCR), and optional fine-tuned transformer models for field matching. Data Persistence: Optional use of a document database (e.g., MongoDB) for session persistence or audit logs. Include robust error handling, field confidence scoring, and preview customization. Deliverables: Fully functional application with modular, maintainable code. Inline documentation for all components. README with installation, usage, and architecture overview. Exportable build (e.g., Dockerized container or deployment instructions). Constraints: Must support varying form formats without relying on static template matching. Ensure data privacy and sandboxed file handling. Prioritize high field fidelity, semantic consistency, and UI responsiveness.