Fixed - Template Mapping Issue - Tested Invoice JSON Extraction - Failed Other Type Document Scenario
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<p-toast></p-toast>
|
||||
<div class="template-mapping-container">
|
||||
<p-splitter [panelSizes]="[50, 50]" [minSizes]="[30, 30]" styleClass="h-full w-full">
|
||||
<p-splitter [panelSizes]="[70, 30]" [minSizes]="[50, 20]" styleClass="h-full w-full">
|
||||
|
||||
<!-- LEFT PANEL: DOCUMENT PREVIEW -->
|
||||
<ng-template pTemplate>
|
||||
|
||||
@@ -59,23 +59,23 @@
|
||||
/* Draggable Nodes */
|
||||
.layout-node {
|
||||
position: absolute;
|
||||
padding: 0.1rem;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 2px;
|
||||
box-sizing: content-box !important;
|
||||
border: 6px solid transparent;
|
||||
margin: -6px !important;
|
||||
background-clip: padding-box;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 4px;
|
||||
transition: box-shadow 0.2s, border-color 0.2s;
|
||||
overflow: hidden;
|
||||
resize: both;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-width: 60px;
|
||||
min-height: 25px;
|
||||
padding: 4px 6px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||
z-index: 10;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
@@ -93,34 +93,48 @@
|
||||
}
|
||||
|
||||
.node-text {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-color);
|
||||
line-height: 1.1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.2;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Color coding by block type - use borders now instead of thick left border */
|
||||
&.header { border-color: #3B82F6; }
|
||||
&.vendor { border-color: #8B5CF6; }
|
||||
&.table_header { border-color: #F59E0B; }
|
||||
&.total { border-color: #10B981; }
|
||||
&.tax { border-color: #EF4444; }
|
||||
&.header { box-shadow: inset 0 0 0 1.5px #3B82F6; }
|
||||
&.vendor { box-shadow: inset 0 0 0 1.5px #8B5CF6; }
|
||||
&.table_header { box-shadow: inset 0 0 0 1.5px #F59E0B; }
|
||||
&.total { box-shadow: inset 0 0 0 1.5px #10B981; }
|
||||
&.tax { box-shadow: inset 0 0 0 1.5px #EF4444; }
|
||||
|
||||
&:hover {
|
||||
z-index: 10;
|
||||
&.header { box-shadow: inset 0 0 0 2px #3B82F6, 0 4px 8px rgba(59, 130, 246, 0.2); }
|
||||
&.vendor { box-shadow: inset 0 0 0 2px #8B5CF6, 0 4px 8px rgba(139, 92, 246, 0.2); }
|
||||
&.table_header { box-shadow: inset 0 0 0 2px #F59E0B, 0 4px 8px rgba(245, 158, 11, 0.2); }
|
||||
&.total { box-shadow: inset 0 0 0 2px #10B981, 0 4px 8px rgba(16, 185, 129, 0.2); }
|
||||
&.tax { box-shadow: inset 0 0 0 2px #EF4444, 0 4px 8px rgba(239, 68, 68, 0.2); }
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
font-size: 0.6rem;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
font-size: 0.55rem;
|
||||
color: var(--text-color-secondary);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 2px;
|
||||
padding: 2px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: grab;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
z-index: 20;
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
z-index: 25;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
border: 1px solid var(--surface-border);
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
@@ -128,7 +142,7 @@
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
background: var(--primary-50);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -138,21 +152,26 @@
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
font-size: 0.6rem;
|
||||
color: var(--text-color-secondary);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
font-size: 0.55rem;
|
||||
color: white;
|
||||
background: #EF4444;
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
z-index: 20;
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
z-index: 25;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
|
||||
&:hover {
|
||||
color: var(--red-500);
|
||||
background: var(--red-50);
|
||||
background: #DC2626;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -134,7 +134,7 @@ export class TemplatesComponent implements OnInit {
|
||||
if (!this.documentId) return;
|
||||
this.templateService.recognizeTemplate(this.documentId).subscribe({
|
||||
next: (matches) => {
|
||||
if (matches && matches.length > 0 && matches[0].confidence_score > 0.5) {
|
||||
if (matches && matches.length > 0 && matches[0].confidence_score >= 0.75) {
|
||||
const match = matches[0];
|
||||
this.messageService.add({ severity: 'info', summary: 'Template Recognized', detail: `Confidence: ${(match.confidence_score * 100).toFixed(1)}%` });
|
||||
|
||||
|
||||
Reference in New Issue
Block a user