@jaak.ai/stamps 2.5.7 → 2.5.8-dev.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-D6NBn_qu.js → index-BcFBOmM6.js} +30 -4
- package/dist/cjs/index-BcFBOmM6.js.map +1 -0
- package/dist/cjs/jaak-stamps-webcomponent.cjs.js +2 -2
- package/dist/cjs/jaak-stamps.cjs.entry.js +195 -74
- package/dist/cjs/jaak-stamps.cjs.entry.js.map +1 -1
- package/dist/cjs/jaak-stamps.entry.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/{my-component/my-component.js → jaak-stamps/jaak-stamps.js} +140 -36
- package/dist/collection/components/jaak-stamps/jaak-stamps.js.map +1 -0
- package/dist/collection/components/jaak-stamps/watermark-fallback.js.map +1 -0
- package/dist/collection/services/DetectionService.js +60 -38
- package/dist/collection/services/DetectionService.js.map +1 -1
- package/dist/components/index.js +20 -2
- package/dist/components/index.js.map +1 -1
- package/dist/components/jaak-stamps.js +197 -73
- package/dist/components/jaak-stamps.js.map +1 -1
- package/dist/esm/{index-BCfAsrzL.js → index-Cb0ILUvS.js} +30 -4
- package/dist/esm/index-Cb0ILUvS.js.map +1 -0
- package/dist/esm/jaak-stamps-webcomponent.js +3 -3
- package/dist/esm/jaak-stamps.entry.js +195 -74
- package/dist/esm/jaak-stamps.entry.js.map +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js +1 -1
- package/dist/jaak-stamps-webcomponent/jaak-stamps.entry.esm.js.map +1 -1
- package/dist/jaak-stamps-webcomponent/{p-63c2c085.entry.js → p-474f6bec.entry.js} +3 -3
- package/dist/jaak-stamps-webcomponent/p-474f6bec.entry.js.map +1 -0
- package/dist/jaak-stamps-webcomponent/p-Cb0ILUvS.js +3 -0
- package/dist/jaak-stamps-webcomponent/p-Cb0ILUvS.js.map +1 -0
- package/dist/types/components/{my-component/my-component.d.ts → jaak-stamps/jaak-stamps.d.ts} +7 -0
- package/dist/types/services/DetectionService.d.ts +5 -4
- package/package.json +4 -4
- package/dist/cjs/index-D6NBn_qu.js.map +0 -1
- package/dist/collection/components/my-component/my-component.js.map +0 -1
- package/dist/collection/components/my-component/watermark-fallback.js.map +0 -1
- package/dist/collection/utils/utils.js +0 -4
- package/dist/collection/utils/utils.js.map +0 -1
- package/dist/esm/index-BCfAsrzL.js.map +0 -1
- package/dist/jaak-stamps-webcomponent/p-63c2c085.entry.js.map +0 -1
- package/dist/jaak-stamps-webcomponent/p-BCfAsrzL.js +0 -3
- package/dist/jaak-stamps-webcomponent/p-BCfAsrzL.js.map +0 -1
- package/dist/types/utils/utils.d.ts +0 -1
- /package/dist/collection/components/{my-component/my-component.css → jaak-stamps/jaak-stamps.css} +0 -0
- /package/dist/collection/components/{my-component → jaak-stamps}/watermark-fallback.js +0 -0
- /package/dist/types/components/{my-component → jaak-stamps}/watermark-fallback.d.ts +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BcFBOmM6.js');
|
|
4
4
|
|
|
5
5
|
class EventBusService {
|
|
6
6
|
events = new Map();
|
|
@@ -798,15 +798,6 @@ class DetectionService {
|
|
|
798
798
|
INPUT_SIZE = 320;
|
|
799
799
|
CONFIDENCE_THRESHOLD = 0.6;
|
|
800
800
|
useFloat16 = true;
|
|
801
|
-
// Hoisted views for float32->float16 bit-twiddling. A fresh ArrayBuffer
|
|
802
|
-
// per call was costing ~614K allocations per frame.
|
|
803
|
-
_f32View = new Float32Array(1);
|
|
804
|
-
_u32View = new Uint32Array(this._f32View.buffer);
|
|
805
|
-
// Pre-allocated tensor buffers reused across frames. Same shape every time
|
|
806
|
-
// (3 * INPUT_SIZE * INPUT_SIZE), and runInference is awaited before the next
|
|
807
|
-
// preprocess runs, so reuse is safe.
|
|
808
|
-
_tensorF32 = new Float32Array(3 * 320 * 320);
|
|
809
|
-
_tensorF16 = new Uint16Array(3 * 320 * 320);
|
|
810
801
|
// Canvas pool for optimization
|
|
811
802
|
preprocessCanvas;
|
|
812
803
|
preprocessCtx;
|
|
@@ -833,7 +824,7 @@ class DetectionService {
|
|
|
833
824
|
try {
|
|
834
825
|
const sessionOptions = this.deviceStrategy.getSessionOptions(this.debug);
|
|
835
826
|
try {
|
|
836
|
-
this.session = await
|
|
827
|
+
this.session = await this.createSession(this.MODEL_PATH, sessionOptions);
|
|
837
828
|
this.detectFloat16Support();
|
|
838
829
|
}
|
|
839
830
|
catch (error) {
|
|
@@ -848,7 +839,7 @@ class DetectionService {
|
|
|
848
839
|
if (isFloat16Error) {
|
|
849
840
|
this.useFloat16 = false;
|
|
850
841
|
try {
|
|
851
|
-
this.session = await
|
|
842
|
+
this.session = await this.createSession(this.MODEL_PATH_FP32, sessionOptions);
|
|
852
843
|
}
|
|
853
844
|
catch (fp32Error) {
|
|
854
845
|
// Intentar con opciones minimas de WASM
|
|
@@ -857,7 +848,7 @@ class DetectionService {
|
|
|
857
848
|
graphOptimizationLevel: 'all',
|
|
858
849
|
logSeverityLevel: this.debug ? 2 : 4,
|
|
859
850
|
};
|
|
860
|
-
this.session = await
|
|
851
|
+
this.session = await this.createSession(this.MODEL_PATH_FP32, wasmOptions);
|
|
861
852
|
}
|
|
862
853
|
}
|
|
863
854
|
else if (isMemoryError) {
|
|
@@ -876,7 +867,7 @@ class DetectionService {
|
|
|
876
867
|
};
|
|
877
868
|
this.useFloat16 = false;
|
|
878
869
|
try {
|
|
879
|
-
this.session = await
|
|
870
|
+
this.session = await this.createSession(this.MODEL_PATH_FP32, fallbackOptions);
|
|
880
871
|
}
|
|
881
872
|
catch (fallbackError) {
|
|
882
873
|
throw new Error(`no available backend found. ERR: [wasm] RangeError: Out of memory`);
|
|
@@ -917,7 +908,7 @@ class DetectionService {
|
|
|
917
908
|
// Load model
|
|
918
909
|
const sessionOptions = this.deviceStrategy.getSessionOptions(this.debug);
|
|
919
910
|
try {
|
|
920
|
-
this.mobileNetSession = await
|
|
911
|
+
this.mobileNetSession = await this.createSession(this.MOBILENET_MODEL_PATH, sessionOptions);
|
|
921
912
|
}
|
|
922
913
|
catch (error) {
|
|
923
914
|
// Múltiples tipos de errores de memoria que pueden ocurrir
|
|
@@ -941,7 +932,7 @@ class DetectionService {
|
|
|
941
932
|
sessionLogVerbosityLevel: 0,
|
|
942
933
|
};
|
|
943
934
|
try {
|
|
944
|
-
this.mobileNetSession = await
|
|
935
|
+
this.mobileNetSession = await this.createSession(this.MOBILENET_MODEL_PATH, fallbackOptions);
|
|
945
936
|
}
|
|
946
937
|
catch (fallbackError) {
|
|
947
938
|
throw new Error(`no available backend found. ERR: [wasm] RangeError: Out of memory`);
|
|
@@ -967,31 +958,25 @@ class DetectionService {
|
|
|
967
958
|
if (!this.preprocessCanvas || !this.preprocessCtx) {
|
|
968
959
|
this.initializeCanvasPool();
|
|
969
960
|
}
|
|
970
|
-
|
|
971
|
-
this.preprocessCtx.
|
|
972
|
-
this.preprocessCtx.
|
|
973
|
-
const
|
|
961
|
+
this.preprocessCtx.clearRect(0, 0, this.INPUT_SIZE, this.INPUT_SIZE);
|
|
962
|
+
this.preprocessCtx.drawImage(video, 0, 0, this.INPUT_SIZE, this.INPUT_SIZE);
|
|
963
|
+
const imageData = this.preprocessCtx.getImageData(0, 0, this.INPUT_SIZE, this.INPUT_SIZE);
|
|
964
|
+
const [R, G, B] = [[], [], []];
|
|
974
965
|
const { data } = imageData;
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
966
|
+
for (let i = 0; i < data.length; i += 4) {
|
|
967
|
+
R.push(data[i] / 255);
|
|
968
|
+
G.push(data[i + 1] / 255);
|
|
969
|
+
B.push(data[i + 2] / 255);
|
|
970
|
+
}
|
|
971
|
+
const transposedData = new Float32Array(R.concat(G, B));
|
|
979
972
|
if (this.useFloat16) {
|
|
980
|
-
const
|
|
981
|
-
for (let i = 0
|
|
982
|
-
|
|
983
|
-
out[gOffset + p] = this.float32ToFloat16(data[i + 1] * inv255);
|
|
984
|
-
out[bOffset + p] = this.float32ToFloat16(data[i + 2] * inv255);
|
|
973
|
+
const float16Data = new Uint16Array(transposedData.length);
|
|
974
|
+
for (let i = 0; i < transposedData.length; i++) {
|
|
975
|
+
float16Data[i] = this.float32ToFloat16(transposedData[i]);
|
|
985
976
|
}
|
|
986
|
-
return new window.ort.Tensor("float16",
|
|
987
|
-
}
|
|
988
|
-
const out = this._tensorF32;
|
|
989
|
-
for (let i = 0, p = 0; i < data.length; i += 4, p++) {
|
|
990
|
-
out[p] = data[i] * inv255;
|
|
991
|
-
out[gOffset + p] = data[i + 1] * inv255;
|
|
992
|
-
out[bOffset + p] = data[i + 2] * inv255;
|
|
977
|
+
return new window.ort.Tensor("float16", float16Data, [1, 3, this.INPUT_SIZE, this.INPUT_SIZE]);
|
|
993
978
|
}
|
|
994
|
-
return new window.ort.Tensor("float32",
|
|
979
|
+
return new window.ort.Tensor("float32", transposedData, [1, 3, this.INPUT_SIZE, this.INPUT_SIZE]);
|
|
995
980
|
}
|
|
996
981
|
async runInference(inputTensor) {
|
|
997
982
|
if (!this.useDocumentDetector) {
|
|
@@ -1139,6 +1124,41 @@ class DetectionService {
|
|
|
1139
1124
|
areAllSidesAligned(alignment) {
|
|
1140
1125
|
return alignment.top && alignment.right && alignment.bottom && alignment.left;
|
|
1141
1126
|
}
|
|
1127
|
+
// Reference counter so concurrent sessions share one filter and the last
|
|
1128
|
+
// one to finish restores the original console.warn.
|
|
1129
|
+
static _ortWarnActiveCount = 0;
|
|
1130
|
+
static _originalWarn = null;
|
|
1131
|
+
static _acquireWarnFilter() {
|
|
1132
|
+
if (DetectionService._ortWarnActiveCount === 0) {
|
|
1133
|
+
DetectionService._originalWarn = console.warn;
|
|
1134
|
+
console.warn = (...args) => {
|
|
1135
|
+
const msg = typeof args[0] === 'string' ? args[0] : '';
|
|
1136
|
+
if (!msg.includes('removing requested execution provider')) {
|
|
1137
|
+
DetectionService._originalWarn.apply(console, args);
|
|
1138
|
+
}
|
|
1139
|
+
};
|
|
1140
|
+
}
|
|
1141
|
+
DetectionService._ortWarnActiveCount++;
|
|
1142
|
+
}
|
|
1143
|
+
static _releaseWarnFilter() {
|
|
1144
|
+
DetectionService._ortWarnActiveCount--;
|
|
1145
|
+
if (DetectionService._ortWarnActiveCount === 0 && DetectionService._originalWarn) {
|
|
1146
|
+
console.warn = DetectionService._originalWarn;
|
|
1147
|
+
DetectionService._originalWarn = null;
|
|
1148
|
+
}
|
|
1149
|
+
}
|
|
1150
|
+
async createSession(modelPath, options) {
|
|
1151
|
+
// Keep the filter active for the full await: ORT may emit
|
|
1152
|
+
// "removing requested execution provider" during async resolution,
|
|
1153
|
+
// not only in the synchronous preamble of create().
|
|
1154
|
+
DetectionService._acquireWarnFilter();
|
|
1155
|
+
try {
|
|
1156
|
+
return await window.ort.InferenceSession.create(modelPath, options);
|
|
1157
|
+
}
|
|
1158
|
+
finally {
|
|
1159
|
+
DetectionService._releaseWarnFilter();
|
|
1160
|
+
}
|
|
1161
|
+
}
|
|
1142
1162
|
cleanup() {
|
|
1143
1163
|
this.cleanupCanvasPool();
|
|
1144
1164
|
if (this.session) {
|
|
@@ -1183,8 +1203,10 @@ class DetectionService {
|
|
|
1183
1203
|
}
|
|
1184
1204
|
}
|
|
1185
1205
|
float32ToFloat16(value) {
|
|
1186
|
-
|
|
1187
|
-
const
|
|
1206
|
+
const buffer = new ArrayBuffer(4);
|
|
1207
|
+
const view = new DataView(buffer);
|
|
1208
|
+
view.setFloat32(0, value, true);
|
|
1209
|
+
const f = view.getUint32(0, true);
|
|
1188
1210
|
const sign = (f >> 31) & 0x1;
|
|
1189
1211
|
const exp = (f >> 23) & 0xFF;
|
|
1190
1212
|
const frac = f & 0x7FFFFF;
|
|
@@ -18647,7 +18669,7 @@ class LicenseValidationService {
|
|
|
18647
18669
|
}
|
|
18648
18670
|
}
|
|
18649
18671
|
|
|
18650
|
-
const myComponentCss = ":host{display:block;width:100%;height:100%;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;height:100%;background-color:#000;border:none;border-radius:8px;overflow:hidden}video,.detection-overlay{position:absolute;width:100%;height:100%;border-radius:8px}video.mirror,.detection-overlay.mirror{transform:rotateY(180deg)}.detection-overlay{z-index:1;pointer-events:none}video{z-index:0}video::-webkit-media-controls{display:none !important}video::-webkit-media-controls-panel{display:none !important}video::-webkit-media-controls-play-button{display:none !important}video::-webkit-media-controls-start-playback-button{display:none !important}video::-webkit-media-controls-enclosure{display:none !important}.detection-box{transition:opacity 0.2s ease}.status{margin-top:16px;font-size:12px;color:#666}.overlay-mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:block;pointer-events:none}.card-outline{position:absolute;top:var(--mask-center-y, 50%);left:var(--mask-center-x, 50%);transform:translate(-50%, -50%);width:var(--mask-width, 88%);height:var(--mask-height, 55%);border:none;border-radius:4px;background:transparent;opacity:0.8}.side{position:absolute;background:#999;transition:background-color 0.3s ease;border-radius:1px}.side-top.aligned{border-left-color:#28a745;border-top-color:#28a745}.side-right.aligned{border-right-color:#28a745;border-top-color:#28a745}.side-bottom.aligned{border-left-color:#28a745;border-bottom-color:#28a745}.side-left.aligned{border-right-color:#28a745;border-bottom-color:#28a745}.side-top{top:-3px;left:-3px;width:30px;height:30px;border-left:6px solid #ffffff;border-top:6px solid #ffffff;background:transparent}.side-right{top:-3px;right:-3px;width:30px;height:30px;border-right:6px solid #ffffff;border-top:6px solid #ffffff;background:transparent}.side-bottom{bottom:-3px;left:-3px;width:30px;height:30px;border-left:6px solid #ffffff;border-bottom:6px solid #ffffff;background:transparent}.side-left{bottom:-3px;right:-3px;width:30px;height:30px;border-right:6px solid #ffffff;border-bottom:6px solid #ffffff;background:transparent}.guide-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);color:#ffffff;font-size:12px;font-weight:500;text-align:center;white-space:normal;padding:13px;max-width:300px;z-index:20;height:fit-content;width:fit-content;animation:slideInFromTopCentered 0.3s ease-out}.quality-indicator{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:8px;background:rgba(0, 0, 0, 0.8);padding:8px 12px;border-radius:20px;z-index:25;transition:all 0.3s ease}.quality-indicator.warning{background:rgba(255, 152, 0, 0.9)}.quality-indicator.good{background:rgba(76, 175, 80, 0.9)}.quality-score{color:#fff;font-size:12px;font-weight:600;min-width:30px;text-align:center}.quality-status{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;color:#fff;transition:all 0.3s ease}.quality-status.ready{background:#4CAF50}.quality-status.not-ready{background:#f44336}.card-outline.quality-warning{animation:qualityWarning 1s ease-in-out infinite alternate}@keyframes qualityWarning{0%{box-shadow:0 0 0 3px rgba(255, 152, 0, 0.6)}100%{box-shadow:0 0 0 6px rgba(255, 152, 0, 0.3)}}.capture-animation{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;z-index:30;pointer-events:none;animation:captureFlash 0.6s ease-out}@keyframes captureFlash{0%{opacity:0}15%{opacity:0.8}30%{opacity:0}45%{opacity:0.4}60%{opacity:0}100%{opacity:0}}.card-outline.capturing{animation:pulseGreen 0.6s ease-out}@keyframes pulseGreen{0%{border-color:#28a745;box-shadow:0 0 0 4px rgba(40, 167, 69, 0)}50%{border-color:#28a745;box-shadow:0 0 0 8px rgba(40, 167, 69, 0.6)}100%{border-color:#28a745;box-shadow:0 0 0 4px rgba(40, 167, 69, 0)}}.flip-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showFlipInstruction 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.id-card-icon{width:80px;height:50px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:8px;position:relative;animation:flipCard 2s ease-in-out infinite;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3)}.id-card-icon::before{content:'';position:absolute;top:8px;left:8px;width:16px;height:12px;background:rgba(255, 255, 255, 0.9);border-radius:2px}.id-card-icon::after{content:'';position:absolute;top:25px;left:8px;width:64px;height:3px;background:rgba(255, 255, 255, 0.7);border-radius:1px;box-shadow:0 6px 0 rgba(255, 255, 255, 0.7), 0 12px 0 rgba(255, 255, 255, 0.7)}.flip-text{margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px}@keyframes showFlipInstruction{0%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}}@keyframes flipCard{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.success-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showSuccessMessage 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.check-icon{width:80px;height:80px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:50%;position:relative;animation:bounceSuccess 0.6s ease-out;box-shadow:0 4px 16px rgba(108, 117, 125, 0.4);display:flex;align-items:center;justify-content:center}.check-icon::before{content:'';position:absolute;width:20px;height:35px;border:4px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);}.success-text{margin-top:16px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;animation:fadeInUp 0.5s ease-out 0.4s both}@keyframes showSuccessMessage{0%{opacity:0;transform:translate(-50%, -50%) scale(0.5)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.9)}}@keyframes bounceSuccess{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes drawCheck{0%{width:0;height:0}50%{width:20px;height:0}100%{width:20px;height:35px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.skip-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px}.back-capture-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:320px}.back-capture-buttons{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.capture-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.capture-button:hover{background:#f8f9fa}.capture-button:active{background:#e9ecef;transform:translateY(1px)}.capture-button:disabled,.capture-button.primary-button:disabled{cursor:not-allowed !important;transform:none !important;opacity:0.7 !important;transition:none !important}@media (max-width: 480px){.back-capture-section{bottom:16px;max-width:300px}.back-capture-buttons{flex-direction:column;gap:8px;width:100%}.capture-button,.back-capture-buttons .skip-button{width:100%;max-width:200px;padding:10px 20px;font-size:13px}.capture-button:disabled,.capture-button.primary-button:disabled,.skip-button:disabled{opacity:0.7 !important;cursor:not-allowed !important}}.skip-explanation{background:rgba(0, 0, 0, 0.5);color:#ffffff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:500;text-align:center;margin-bottom:12px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.1);animation:fadeIn 0.3s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.guide-text.performance-warning-text{animation:gentlePulse 2s ease-in-out infinite;background:rgba(255, 107, 107, 0.3);border:1px solid rgba(255, 107, 107, 0.5)}@keyframes gentlePulse{0%,100%{transform:translate(-50%, -50%) scale(1);background:rgba(255, 107, 107, 0.3)}50%{transform:translate(-50%, -50%) scale(1.02);background:rgba(255, 107, 107, 0.4)}}.skip-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.skip-button:hover{background:#f8f9fa}.skip-button:active{background:#e9ecef;transform:translateY(1px)}.skip-button:disabled{cursor:not-allowed !important;transform:none !important;opacity:0.7 !important;transition:none !important}.camera-controls{position:absolute;top:16px;right:16px;z-index:25;display:flex;gap:8px;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}.camera-selector-button{height:32px;padding:0 10px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.camera-selector-button:hover{background:rgba(0, 0, 0, 0.8);border-color:rgba(255, 255, 255, 0.2);transform:translateY(-1px)}.camera-selector-button:active{transform:translateY(0);background:rgba(0, 0, 0, 0.9)}.camera-selector-button:disabled,.camera-selector-button.loading{opacity:0.7;cursor:not-allowed;pointer-events:none}.camera-selector-button:disabled:hover,.camera-selector-button.loading:hover{transform:none;background:rgba(0, 0, 0, 0.6);border-color:rgba(255, 255, 255, 0.1)}.button-spinner{width:16px;height:16px;border:2px solid rgba(0, 0, 0, 0.2);border-top:2px solid #333333;border-radius:50%;animation:spin 1s linear infinite;display:inline-block;margin-right:8px;vertical-align:middle}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.camera-selector-dropdown{position:absolute;top:56px;right:16px;z-index:30;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;min-width:260px;max-width:300px;border:1px solid rgba(255, 255, 255, 0.1);overflow:hidden;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-8px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes slideInFromTopCentered{0%{opacity:0;transform:translate(-50%, -50%) translateY(-8px) scale(0.95)}100%{opacity:1;transform:translate(-50%, -50%) translateY(0) scale(1)}}.camera-selector-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}.camera-selector-header span{font-weight:500;color:#ffffff;font-size:13px;opacity:0.9}.close-selector{width:20px;height:20px;border:none;background:none;color:rgba(255, 255, 255, 0.7);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all 0.2s ease}.close-selector:hover{background:rgba(255, 255, 255, 0.1);color:#ffffff}.camera-list{padding:4px 0;max-height:240px;overflow-y:auto}.camera-option{width:100%;padding:8px 12px;border:none;background:none;text-align:left;cursor:pointer;transition:all 0.2s ease;display:flex;justify-content:flex-start;align-items:center;gap:8px;color:rgba(255, 255, 255, 0.9)}.camera-option:hover{background:rgba(255, 255, 255, 0.08)}.camera-option.selected{background:rgba(255, 255, 255, 0.12);color:#ffffff}.camera-label{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:0;font-weight:400;display:flex;align-items:center;gap:6px}.camera-label .autofocus-icon{font-size:12px;color:#ffffff !important;opacity:0.8;flex-shrink:0}.selected-indicator{font-size:14px;color:#ffffff;opacity:0.9;flex-shrink:0}.device-info{padding:6px 12px;border-top:1px solid rgba(255, 255, 255, 0.1);background:rgba(255, 255, 255, 0.05)}.device-info small{color:rgba(255, 255, 255, 0.6);font-size:11px;text-transform:capitalize;font-weight:400}@media (max-width: 480px){.camera-controls{top:12px;right:12px;gap:6px}.camera-selector-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-dropdown{right:12px;top:48px;min-width:240px;max-width:calc(100vw - 24px)}.camera-selector-header{padding:6px 10px}.camera-option{padding:6px 10px}.device-info{padding:4px 10px}}.watermark{position:absolute;bottom:12px;right:12px;z-index:15;pointer-events:none;opacity:0.7}.watermark img{height:24px;width:auto;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.component-status{position:absolute;top:16px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);display:flex;align-items:center;gap:6px;padding:6px 10px;z-index:40;height:32px;width:fit-content;animation:slideInFromTop 0.3s ease-out}.status-spinner{width:16px;height:16px;border:1px solid rgba(255, 255, 255, 0.3);border-top:1px solid #ffffff;border-radius:50%;animation:statusSpin 1s linear infinite;flex-shrink:0}.status-content{display:flex;flex-direction:column;gap:1px}.status-message{color:#ffffff;font-size:12px;font-weight:500;margin:0}.status-description{color:rgba(255, 255, 255, 0.7);font-size:10px;line-height:1.2;margin:0}@keyframes statusSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (max-width: 480px){.component-status{top:12px;left:12px;padding:4px 8px;gap:4px;height:28px;border-radius:8px}.status-spinner{width:14px;height:14px}.status-message{font-size:11px}.status-description{font-size:9px}.guide-text{font-size:11px;padding:4px 8px;border-radius:8px}}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.85);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;border-radius:8px}.loading-spinner{width:50px;height:50px;border:3px solid rgba(255, 255, 255, 0.15);border-top:3px solid #28a745;border-radius:50%;animation:spin 1s ease-in-out infinite;margin-bottom:16px}.loading-text{color:#ffffff;font-size:14px;font-weight:500;text-align:center;opacity:0.9;margin-bottom:4px}.loading-description{color:rgba(255, 255, 255, 0.7);font-size:12px;text-align:center;opacity:0.8}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.performance-monitor{position:absolute;top:70px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);z-index:35;width:fit-content;animation:slideInFromTop 0.3s ease-out;transition:all 0.3s ease}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-20px) scale(0.95)}100%{opacity:1;transform:translateX(0) scale(1)}}.performance-expanded{padding:6px 10px}.metrics-row{display:flex;gap:8px;margin-bottom:4px}.metrics-row:last-child{margin-bottom:0}.metric-compact{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:50px}.metric-label{font-size:9px;color:rgba(255, 255, 255, 0.6);font-weight:500;text-transform:uppercase;letter-spacing:0.3px}.metric-value{font-size:10px;font-weight:600;font-family:'Monaco', 'Menlo', 'Consolas', monospace;padding:2px 4px;border-radius:3px;text-align:center;white-space:nowrap}.metric-value.good{color:#4ade80;background:rgba(74, 222, 128, 0.1);border:1px solid rgba(74, 222, 128, 0.2)}.metric-value.warning{color:#fbbf24;background:rgba(251, 191, 36, 0.1);border:1px solid rgba(251, 191, 36, 0.2)}.metric-value.danger{color:#f87171;background:rgba(248, 113, 113, 0.1);border:1px solid rgba(248, 113, 113, 0.2)}@media (max-width: 480px){.performance-monitor{top:60px;left:12px;width:fit-content}.performance-expanded{padding:4px 8px}.metrics-row{gap:6px;margin-bottom:3px}.metric-compact{min-width:45px;gap:1px}.metric-label{font-size:8px}.metric-value{font-size:9px;padding:1px 3px}}.quality-monitor{position:absolute;top:200px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);z-index:35;width:fit-content;animation:slideInFromLeft 0.3s ease-out;transition:all 0.3s ease}.quality-text{padding:6px 10px;font-size:11px;color:white;font-family:'Monaco', 'Menlo', 'Consolas', monospace;line-height:1.4}.quality-fail{color:#ff9999}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}.metric-value.danger{animation:pulse 2s infinite}@media (max-width: 480px){.quality-monitor{top:160px;left:12px}.quality-text{padding:4px 8px;font-size:10px}}.manual-capture-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px}.manual-capture-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.manual-capture-button:hover{background:#f8f9fa}.manual-capture-button:active{background:#e9ecef;transform:translateY(1px)}.manual-capture-button:disabled{cursor:not-allowed !important;transform:none !important;opacity:0.7 !important;transition:none !important}@media (max-width: 480px){.manual-capture-section{bottom:16px;max-width:280px}.manual-capture-button{padding:10px 20px;font-size:13px}.manual-capture-button:disabled{opacity:0.7 !important;cursor:not-allowed !important}}.license-error-container{display:flex;align-items:center;justify-content:center;padding:40px 20px;height:100%;width:100%;background:#f5f7fa;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif}.license-error-card{background:#ffffff;border-radius:8px;box-shadow:0 2px 12px rgba(0, 0, 0, 0.1);max-width:480px;width:100%;padding:48px 32px;text-align:center}.license-error-icon{color:#dc3545;margin-bottom:24px}.license-error-title{color:#2c3e50;font-size:24px;font-weight:600;margin:0 0 16px 0}.license-error-message{color:#495057;font-size:16px;line-height:1.6;margin:0 0 24px 0}.license-error-help{color:#6c757d;font-size:14px;margin:0 0 32px 0}.license-error-help a{color:#007bff;text-decoration:none;font-weight:500}.license-error-help a:hover{text-decoration:underline}.license-error-footer{color:#adb5bd;font-size:12px;font-weight:500;padding-top:24px;border-top:1px solid #e9ecef}@media (max-width: 640px){.license-error-card{padding:32px 24px}.license-error-title{font-size:20px}.license-error-message{font-size:14px}}";
|
|
18672
|
+
const jaakStampsCss = ":host{display:block;width:100%;height:100%;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;height:100%;background-color:#000;border:none;border-radius:8px;overflow:hidden}video,.detection-overlay{position:absolute;width:100%;height:100%;border-radius:8px}video.mirror,.detection-overlay.mirror{transform:rotateY(180deg)}.detection-overlay{z-index:1;pointer-events:none}video{z-index:0}video::-webkit-media-controls{display:none !important}video::-webkit-media-controls-panel{display:none !important}video::-webkit-media-controls-play-button{display:none !important}video::-webkit-media-controls-start-playback-button{display:none !important}video::-webkit-media-controls-enclosure{display:none !important}.detection-box{transition:opacity 0.2s ease}.status{margin-top:16px;font-size:12px;color:#666}.overlay-mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:block;pointer-events:none}.card-outline{position:absolute;top:var(--mask-center-y, 50%);left:var(--mask-center-x, 50%);transform:translate(-50%, -50%);width:var(--mask-width, 88%);height:var(--mask-height, 55%);border:none;border-radius:4px;background:transparent;opacity:0.8}.side{position:absolute;background:#999;transition:background-color 0.3s ease;border-radius:1px}.side-top.aligned{border-left-color:#28a745;border-top-color:#28a745}.side-right.aligned{border-right-color:#28a745;border-top-color:#28a745}.side-bottom.aligned{border-left-color:#28a745;border-bottom-color:#28a745}.side-left.aligned{border-right-color:#28a745;border-bottom-color:#28a745}.side-top{top:-3px;left:-3px;width:30px;height:30px;border-left:6px solid #ffffff;border-top:6px solid #ffffff;background:transparent}.side-right{top:-3px;right:-3px;width:30px;height:30px;border-right:6px solid #ffffff;border-top:6px solid #ffffff;background:transparent}.side-bottom{bottom:-3px;left:-3px;width:30px;height:30px;border-left:6px solid #ffffff;border-bottom:6px solid #ffffff;background:transparent}.side-left{bottom:-3px;right:-3px;width:30px;height:30px;border-right:6px solid #ffffff;border-bottom:6px solid #ffffff;background:transparent}.guide-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);color:#ffffff;font-size:12px;font-weight:500;text-align:center;white-space:normal;padding:13px;max-width:300px;z-index:20;height:fit-content;width:fit-content;animation:slideInFromTopCentered 0.3s ease-out}.quality-indicator{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:8px;background:rgba(0, 0, 0, 0.8);padding:8px 12px;border-radius:20px;z-index:25;transition:all 0.3s ease}.quality-indicator.warning{background:rgba(255, 152, 0, 0.9)}.quality-indicator.good{background:rgba(76, 175, 80, 0.9)}.quality-score{color:#fff;font-size:12px;font-weight:600;min-width:30px;text-align:center}.quality-status{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;color:#fff;transition:all 0.3s ease}.quality-status.ready{background:#4CAF50}.quality-status.not-ready{background:#f44336}.card-outline.quality-warning{animation:qualityWarning 1s ease-in-out infinite alternate}@keyframes qualityWarning{0%{box-shadow:0 0 0 3px rgba(255, 152, 0, 0.6)}100%{box-shadow:0 0 0 6px rgba(255, 152, 0, 0.3)}}.capture-animation{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;z-index:30;pointer-events:none;animation:captureFlash 0.6s ease-out}@keyframes captureFlash{0%{opacity:0}15%{opacity:0.8}30%{opacity:0}45%{opacity:0.4}60%{opacity:0}100%{opacity:0}}.card-outline.capturing{animation:pulseGreen 0.6s ease-out}@keyframes pulseGreen{0%{border-color:#28a745;box-shadow:0 0 0 4px rgba(40, 167, 69, 0)}50%{border-color:#28a745;box-shadow:0 0 0 8px rgba(40, 167, 69, 0.6)}100%{border-color:#28a745;box-shadow:0 0 0 4px rgba(40, 167, 69, 0)}}.flip-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showFlipInstruction 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.id-card-icon{width:80px;height:50px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:8px;position:relative;animation:flipCard 2s ease-in-out infinite;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3)}.id-card-icon::before{content:'';position:absolute;top:8px;left:8px;width:16px;height:12px;background:rgba(255, 255, 255, 0.9);border-radius:2px}.id-card-icon::after{content:'';position:absolute;top:25px;left:8px;width:64px;height:3px;background:rgba(255, 255, 255, 0.7);border-radius:1px;box-shadow:0 6px 0 rgba(255, 255, 255, 0.7), 0 12px 0 rgba(255, 255, 255, 0.7)}.flip-text{margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px}@keyframes showFlipInstruction{0%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}}@keyframes flipCard{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.success-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showSuccessMessage 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.check-icon{width:80px;height:80px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:50%;position:relative;animation:bounceSuccess 0.6s ease-out;box-shadow:0 4px 16px rgba(108, 117, 125, 0.4);display:flex;align-items:center;justify-content:center}.check-icon::before{content:'';position:absolute;width:20px;height:35px;border:4px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);}.success-text{margin-top:16px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;animation:fadeInUp 0.5s ease-out 0.4s both}@keyframes showSuccessMessage{0%{opacity:0;transform:translate(-50%, -50%) scale(0.5)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.9)}}@keyframes bounceSuccess{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes drawCheck{0%{width:0;height:0}50%{width:20px;height:0}100%{width:20px;height:35px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.skip-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px}.back-capture-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:320px}.back-capture-buttons{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.capture-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.capture-button:hover{background:#f8f9fa}.capture-button:active{background:#e9ecef;transform:translateY(1px)}.capture-button:disabled,.capture-button.primary-button:disabled{cursor:not-allowed !important;transform:none !important;opacity:0.7 !important;transition:none !important}@media (max-width: 480px){.back-capture-section{bottom:16px;max-width:300px}.back-capture-buttons{flex-direction:column;gap:8px;width:100%}.capture-button,.back-capture-buttons .skip-button{width:100%;max-width:200px;padding:10px 20px;font-size:13px}.capture-button:disabled,.capture-button.primary-button:disabled,.skip-button:disabled{opacity:0.7 !important;cursor:not-allowed !important}}.skip-explanation{background:rgba(0, 0, 0, 0.5);color:#ffffff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:500;text-align:center;margin-bottom:12px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.1);animation:fadeIn 0.3s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.guide-text.performance-warning-text{animation:gentlePulse 2s ease-in-out infinite;background:rgba(255, 107, 107, 0.3);border:1px solid rgba(255, 107, 107, 0.5)}@keyframes gentlePulse{0%,100%{transform:translate(-50%, -50%) scale(1);background:rgba(255, 107, 107, 0.3)}50%{transform:translate(-50%, -50%) scale(1.02);background:rgba(255, 107, 107, 0.4)}}.skip-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.skip-button:hover{background:#f8f9fa}.skip-button:active{background:#e9ecef;transform:translateY(1px)}.skip-button:disabled{cursor:not-allowed !important;transform:none !important;opacity:0.7 !important;transition:none !important}.camera-controls{position:absolute;top:16px;right:16px;z-index:25;display:flex;gap:8px;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}.camera-selector-button{height:32px;padding:0 10px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.camera-selector-button:hover{background:rgba(0, 0, 0, 0.8);border-color:rgba(255, 255, 255, 0.2);transform:translateY(-1px)}.camera-selector-button:active{transform:translateY(0);background:rgba(0, 0, 0, 0.9)}.camera-selector-button:disabled,.camera-selector-button.loading{opacity:0.7;cursor:not-allowed;pointer-events:none}.camera-selector-button:disabled:hover,.camera-selector-button.loading:hover{transform:none;background:rgba(0, 0, 0, 0.6);border-color:rgba(255, 255, 255, 0.1)}.button-spinner{width:16px;height:16px;border:2px solid rgba(0, 0, 0, 0.2);border-top:2px solid #333333;border-radius:50%;animation:spin 1s linear infinite;display:inline-block;margin-right:8px;vertical-align:middle}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.camera-selector-dropdown{position:absolute;top:56px;right:16px;z-index:30;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;min-width:260px;max-width:300px;border:1px solid rgba(255, 255, 255, 0.1);overflow:hidden;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-8px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes slideInFromTopCentered{0%{opacity:0;transform:translate(-50%, -50%) translateY(-8px) scale(0.95)}100%{opacity:1;transform:translate(-50%, -50%) translateY(0) scale(1)}}.camera-selector-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}.camera-selector-header span{font-weight:500;color:#ffffff;font-size:13px;opacity:0.9}.close-selector{width:20px;height:20px;border:none;background:none;color:rgba(255, 255, 255, 0.7);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all 0.2s ease}.close-selector:hover{background:rgba(255, 255, 255, 0.1);color:#ffffff}.camera-list{padding:4px 0;max-height:240px;overflow-y:auto}.camera-option{width:100%;padding:8px 12px;border:none;background:none;text-align:left;cursor:pointer;transition:all 0.2s ease;display:flex;justify-content:flex-start;align-items:center;gap:8px;color:rgba(255, 255, 255, 0.9)}.camera-option:hover{background:rgba(255, 255, 255, 0.08)}.camera-option.selected{background:rgba(255, 255, 255, 0.12);color:#ffffff}.camera-label{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:0;font-weight:400;display:flex;align-items:center;gap:6px}.camera-label .autofocus-icon{font-size:12px;color:#ffffff !important;opacity:0.8;flex-shrink:0}.selected-indicator{font-size:14px;color:#ffffff;opacity:0.9;flex-shrink:0}.device-info{padding:6px 12px;border-top:1px solid rgba(255, 255, 255, 0.1);background:rgba(255, 255, 255, 0.05)}.device-info small{color:rgba(255, 255, 255, 0.6);font-size:11px;text-transform:capitalize;font-weight:400}@media (max-width: 480px){.camera-controls{top:12px;right:12px;gap:6px}.camera-selector-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-dropdown{right:12px;top:48px;min-width:240px;max-width:calc(100vw - 24px)}.camera-selector-header{padding:6px 10px}.camera-option{padding:6px 10px}.device-info{padding:4px 10px}}.watermark{position:absolute;bottom:12px;right:12px;z-index:15;pointer-events:none;opacity:0.7}.watermark img{height:24px;width:auto;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.component-status{position:absolute;top:16px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);display:flex;align-items:center;gap:6px;padding:6px 10px;z-index:40;height:32px;width:fit-content;animation:slideInFromTop 0.3s ease-out}.status-spinner{width:16px;height:16px;border:1px solid rgba(255, 255, 255, 0.3);border-top:1px solid #ffffff;border-radius:50%;animation:statusSpin 1s linear infinite;flex-shrink:0}.status-content{display:flex;flex-direction:column;gap:1px}.status-message{color:#ffffff;font-size:12px;font-weight:500;margin:0}.status-description{color:rgba(255, 255, 255, 0.7);font-size:10px;line-height:1.2;margin:0}@keyframes statusSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (max-width: 480px){.component-status{top:12px;left:12px;padding:4px 8px;gap:4px;height:28px;border-radius:8px}.status-spinner{width:14px;height:14px}.status-message{font-size:11px}.status-description{font-size:9px}.guide-text{font-size:11px;padding:4px 8px;border-radius:8px}}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.85);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;border-radius:8px}.loading-spinner{width:50px;height:50px;border:3px solid rgba(255, 255, 255, 0.15);border-top:3px solid #28a745;border-radius:50%;animation:spin 1s ease-in-out infinite;margin-bottom:16px}.loading-text{color:#ffffff;font-size:14px;font-weight:500;text-align:center;opacity:0.9;margin-bottom:4px}.loading-description{color:rgba(255, 255, 255, 0.7);font-size:12px;text-align:center;opacity:0.8}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.performance-monitor{position:absolute;top:70px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);z-index:35;width:fit-content;animation:slideInFromTop 0.3s ease-out;transition:all 0.3s ease}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-20px) scale(0.95)}100%{opacity:1;transform:translateX(0) scale(1)}}.performance-expanded{padding:6px 10px}.metrics-row{display:flex;gap:8px;margin-bottom:4px}.metrics-row:last-child{margin-bottom:0}.metric-compact{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:50px}.metric-label{font-size:9px;color:rgba(255, 255, 255, 0.6);font-weight:500;text-transform:uppercase;letter-spacing:0.3px}.metric-value{font-size:10px;font-weight:600;font-family:'Monaco', 'Menlo', 'Consolas', monospace;padding:2px 4px;border-radius:3px;text-align:center;white-space:nowrap}.metric-value.good{color:#4ade80;background:rgba(74, 222, 128, 0.1);border:1px solid rgba(74, 222, 128, 0.2)}.metric-value.warning{color:#fbbf24;background:rgba(251, 191, 36, 0.1);border:1px solid rgba(251, 191, 36, 0.2)}.metric-value.danger{color:#f87171;background:rgba(248, 113, 113, 0.1);border:1px solid rgba(248, 113, 113, 0.2)}@media (max-width: 480px){.performance-monitor{top:60px;left:12px;width:fit-content}.performance-expanded{padding:4px 8px}.metrics-row{gap:6px;margin-bottom:3px}.metric-compact{min-width:45px;gap:1px}.metric-label{font-size:8px}.metric-value{font-size:9px;padding:1px 3px}}.quality-monitor{position:absolute;top:200px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);z-index:35;width:fit-content;animation:slideInFromLeft 0.3s ease-out;transition:all 0.3s ease}.quality-text{padding:6px 10px;font-size:11px;color:white;font-family:'Monaco', 'Menlo', 'Consolas', monospace;line-height:1.4}.quality-fail{color:#ff9999}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}.metric-value.danger{animation:pulse 2s infinite}@media (max-width: 480px){.quality-monitor{top:160px;left:12px}.quality-text{padding:4px 8px;font-size:10px}}.manual-capture-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px}.manual-capture-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.manual-capture-button:hover{background:#f8f9fa}.manual-capture-button:active{background:#e9ecef;transform:translateY(1px)}.manual-capture-button:disabled{cursor:not-allowed !important;transform:none !important;opacity:0.7 !important;transition:none !important}@media (max-width: 480px){.manual-capture-section{bottom:16px;max-width:280px}.manual-capture-button{padding:10px 20px;font-size:13px}.manual-capture-button:disabled{opacity:0.7 !important;cursor:not-allowed !important}}.license-error-container{display:flex;align-items:center;justify-content:center;padding:40px 20px;height:100%;width:100%;background:#f5f7fa;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif}.license-error-card{background:#ffffff;border-radius:8px;box-shadow:0 2px 12px rgba(0, 0, 0, 0.1);max-width:480px;width:100%;padding:48px 32px;text-align:center}.license-error-icon{color:#dc3545;margin-bottom:24px}.license-error-title{color:#2c3e50;font-size:24px;font-weight:600;margin:0 0 16px 0}.license-error-message{color:#495057;font-size:16px;line-height:1.6;margin:0 0 24px 0}.license-error-help{color:#6c757d;font-size:14px;margin:0 0 32px 0}.license-error-help a{color:#007bff;text-decoration:none;font-weight:500}.license-error-help a:hover{text-decoration:underline}.license-error-footer{color:#adb5bd;font-size:12px;font-weight:500;padding-top:24px;border-top:1px solid #e9ecef}@media (max-width: 640px){.license-error-card{padding:32px 24px}.license-error-title{font-size:20px}.license-error-message{font-size:14px}}";
|
|
18651
18673
|
|
|
18652
18674
|
const JaakStamps = class {
|
|
18653
18675
|
constructor(hostRef) {
|
|
@@ -18677,7 +18699,7 @@ const JaakStamps = class {
|
|
|
18677
18699
|
propagateTraceHeaderCorsUrls; // Comma-separated URLs or regex patterns
|
|
18678
18700
|
metricsExportIntervalMillis = 60000; // Export metrics every 60 seconds
|
|
18679
18701
|
license; // License key for validation
|
|
18680
|
-
licenseEnvironment = 'prod';
|
|
18702
|
+
licenseEnvironment = 'prod';
|
|
18681
18703
|
traceId; // Optional trace ID for tracking
|
|
18682
18704
|
appId = 'jaak-stamps-web'; // Application ID for license validation
|
|
18683
18705
|
captureCompleted;
|
|
@@ -18725,6 +18747,10 @@ const JaakStamps = class {
|
|
|
18725
18747
|
licenseValid = true; // License validation status
|
|
18726
18748
|
licenseError = null; // License validation error message
|
|
18727
18749
|
classificationDisabled = false; // Classification disabled at runtime due to errors
|
|
18750
|
+
_initialized = false;
|
|
18751
|
+
_initializing = false;
|
|
18752
|
+
_pendingEnvironmentRetry = false;
|
|
18753
|
+
_pendingInit = null;
|
|
18728
18754
|
// Services
|
|
18729
18755
|
licenseValidationService = null;
|
|
18730
18756
|
serviceContainer;
|
|
@@ -18794,45 +18820,111 @@ const JaakStamps = class {
|
|
|
18794
18820
|
canvasPool = [];
|
|
18795
18821
|
MAX_CANVAS_POOL_SIZE = 3;
|
|
18796
18822
|
async componentWillLoad() {
|
|
18823
|
+
// @Watch handlers fire synchronously when Angular sets properties, which happens
|
|
18824
|
+
// BEFORE componentWillLoad (Stencil schedules componentWillLoad as a microtask after
|
|
18825
|
+
// connectedCallback, while Angular sets props synchronously in that same call stack).
|
|
18826
|
+
// @Watch('license') defers init to a macrotask so @Watch('licenseEnvironment') fires
|
|
18827
|
+
// first. By the time we resume here, init may already be in progress.
|
|
18828
|
+
await new Promise(resolve => setTimeout(resolve, 50));
|
|
18797
18829
|
if (this.debug) {
|
|
18798
|
-
console.log('[JAAK-DEBUG] componentWillLoad() - Props
|
|
18830
|
+
console.log('[JAAK-DEBUG] componentWillLoad() - Props after yield:');
|
|
18831
|
+
console.log('[JAAK-DEBUG] license:', this.license ? this.license.substring(0, 8) + '...' : 'EMPTY');
|
|
18832
|
+
console.log('[JAAK-DEBUG] licenseEnvironment:', this.licenseEnvironment);
|
|
18833
|
+
console.log('[JAAK-DEBUG] _initializing:', this._initializing);
|
|
18834
|
+
console.log('[JAAK-DEBUG] _initialized:', this._initialized);
|
|
18799
18835
|
console.log('[JAAK-DEBUG] useDocumentDetector:', this.useDocumentDetector, '(type:', typeof this.useDocumentDetector, ')');
|
|
18800
18836
|
console.log('[JAAK-DEBUG] useDocumentClassification:', this.useDocumentClassification);
|
|
18801
18837
|
console.log('[JAAK-DEBUG] debug:', this.debug);
|
|
18802
|
-
console.log('[JAAK-DEBUG] license:', this.license ? this.license.substring(0, 8) + '...' : 'EMPTY');
|
|
18803
|
-
console.log('[JAAK-DEBUG] licenseEnvironment:', this.licenseEnvironment);
|
|
18804
18838
|
console.log('[JAAK-DEBUG] alignmentTolerance:', this.alignmentTolerance);
|
|
18805
18839
|
console.log('[JAAK-DEBUG] maskSize:', this.maskSize);
|
|
18806
18840
|
console.log('[JAAK-DEBUG] captureDelay:', this.captureDelay);
|
|
18807
18841
|
console.log('[JAAK-DEBUG] preferredCamera:', this.preferredCamera);
|
|
18808
18842
|
console.log('[JAAK-DEBUG] appId:', this.appId);
|
|
18809
18843
|
}
|
|
18810
|
-
|
|
18811
|
-
|
|
18812
|
-
|
|
18813
|
-
|
|
18814
|
-
|
|
18815
|
-
|
|
18816
|
-
}
|
|
18817
|
-
this.updateStatus('Validando licencia...', 'Verificando autorización de uso', 'initializing');
|
|
18818
|
-
await this.validateLicense();
|
|
18819
|
-
// If license validation failed, stop initialization
|
|
18820
|
-
if (!this.licenseValid) {
|
|
18821
|
-
if (this.debug) {
|
|
18822
|
-
console.error('[JAAK-DEBUG] License validation FAILED. Stopping initialization.');
|
|
18844
|
+
if (!this.license) {
|
|
18845
|
+
if (!this._initialized && !this._initializing) {
|
|
18846
|
+
// No license and init not started — show blocking error UI
|
|
18847
|
+
this.licenseValid = false;
|
|
18848
|
+
this.licenseError = 'Se requiere una licencia para continuar. Por favor, proporcione una licencia usando el atributo "license".';
|
|
18849
|
+
this.updateStatus('Licencia requerida', 'Proporcione una licencia para continuar', 'error');
|
|
18823
18850
|
}
|
|
18824
|
-
return;
|
|
18825
18851
|
}
|
|
18826
|
-
if (this.
|
|
18827
|
-
|
|
18852
|
+
else if (!this._initialized && !this._initializing) {
|
|
18853
|
+
// License present but init hasn't started yet (no @Watch fired) — set initial status
|
|
18854
|
+
// so the first render already shows it without a redundant state change in componentDidLoad
|
|
18855
|
+
this.updateStatus('Validando licencia...', 'Verificando autorización de uso', 'initializing');
|
|
18828
18856
|
}
|
|
18857
|
+
// Heavy initialization is deferred to componentDidLoad so the first render is not blocked
|
|
18829
18858
|
}
|
|
18830
18859
|
async componentDidLoad() {
|
|
18860
|
+
// If @Watch('license') already scheduled or started init, let it proceed
|
|
18861
|
+
if (!this.license || this._initialized || this._initializing || this._pendingInit !== null) {
|
|
18862
|
+
return;
|
|
18863
|
+
}
|
|
18864
|
+
await this.validateAndInitialize();
|
|
18865
|
+
}
|
|
18866
|
+
onLicenseChanged(newLicense) {
|
|
18867
|
+
if (!newLicense || this._initialized || this._initializing) {
|
|
18868
|
+
return;
|
|
18869
|
+
}
|
|
18870
|
+
// Defer init by one macrotask (setTimeout 0) so @Watch('licenseEnvironment') fires
|
|
18871
|
+
// first. Angular applies [license] before [licenseEnvironment] in template order,
|
|
18872
|
+
// meaning a synchronous start here would use the Stencil default "prod" for the env.
|
|
18873
|
+
if (this._pendingInit !== null)
|
|
18874
|
+
clearTimeout(this._pendingInit);
|
|
18875
|
+
this._pendingInit = setTimeout(async () => {
|
|
18876
|
+
this._pendingInit = null;
|
|
18877
|
+
if (!this._initialized && !this._initializing && this.license) {
|
|
18878
|
+
this.updateStatus('Validando licencia...', 'Verificando autorización de uso', 'initializing');
|
|
18879
|
+
await this.validateAndInitialize();
|
|
18880
|
+
}
|
|
18881
|
+
}, 0);
|
|
18882
|
+
}
|
|
18883
|
+
async onLicenseEnvironmentChanged() {
|
|
18884
|
+
// Always recreate the service so the correct environment URL is ready.
|
|
18885
|
+
this.licenseValidationService = new LicenseValidationService(this.licenseEnvironment);
|
|
18886
|
+
if (this._initializing) {
|
|
18887
|
+
// Validation is already in-flight with the wrong environment.
|
|
18888
|
+
// Flag a retry so validateAndInitialize restarts once the current attempt ends.
|
|
18889
|
+
this._pendingEnvironmentRetry = true;
|
|
18890
|
+
return;
|
|
18891
|
+
}
|
|
18892
|
+
// If @Watch('license') already scheduled a deferred init, that init will read
|
|
18893
|
+
// this.licenseEnvironment at fire time (after this handler returns), so the
|
|
18894
|
+
// correct URL will be used — no need to trigger a second init here.
|
|
18895
|
+
if (this._pendingInit !== null) {
|
|
18896
|
+
return;
|
|
18897
|
+
}
|
|
18898
|
+
if (this._initialized) {
|
|
18899
|
+
// Component was fully initialized with the wrong env URL (e.g. Ionic animation
|
|
18900
|
+
// delayed Angular's CD past the initial validateAndInitialize() cycle).
|
|
18901
|
+
// Re-validate the license only — services and camera are already running.
|
|
18902
|
+
await this.validateLicense();
|
|
18903
|
+
return;
|
|
18904
|
+
}
|
|
18905
|
+
if (this.license) {
|
|
18906
|
+
this.updateStatus('Validando licencia...', 'Verificando autorización de uso', 'initializing');
|
|
18907
|
+
await this.validateAndInitialize();
|
|
18908
|
+
}
|
|
18909
|
+
}
|
|
18910
|
+
async validateAndInitialize() {
|
|
18911
|
+
if (this._initialized || this._initializing) {
|
|
18912
|
+
return;
|
|
18913
|
+
}
|
|
18914
|
+
this._initializing = true;
|
|
18831
18915
|
try {
|
|
18832
|
-
//
|
|
18916
|
+
// Status was already set synchronously by the caller (componentWillLoad or @Watch)
|
|
18917
|
+
// to avoid a state change inside componentDidLoad that Stencil warns about.
|
|
18918
|
+
await this.validateLicense();
|
|
18833
18919
|
if (!this.licenseValid) {
|
|
18920
|
+
if (this.debug) {
|
|
18921
|
+
console.error('[JAAK-DEBUG] License validation FAILED. Stopping initialization.');
|
|
18922
|
+
}
|
|
18834
18923
|
return;
|
|
18835
18924
|
}
|
|
18925
|
+
if (this.debug) {
|
|
18926
|
+
console.log('[JAAK-DEBUG] License validation OK');
|
|
18927
|
+
}
|
|
18836
18928
|
this.updateStatus('Preparando capturador...', 'Configurando herramientas de captura', 'initializing');
|
|
18837
18929
|
await this.initializeServices();
|
|
18838
18930
|
this.updateStatus('Preparando funciones...', 'Configurando herramientas de trabajo', 'initializing');
|
|
@@ -18842,9 +18934,30 @@ const JaakStamps = class {
|
|
|
18842
18934
|
if (this.debug) {
|
|
18843
18935
|
this.initializePerformanceMonitor();
|
|
18844
18936
|
}
|
|
18937
|
+
this._initialized = true;
|
|
18845
18938
|
}
|
|
18846
18939
|
catch (error) {
|
|
18847
|
-
|
|
18940
|
+
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
18941
|
+
this.updateStatus('Error de inicialización', errorMessage, 'error');
|
|
18942
|
+
}
|
|
18943
|
+
finally {
|
|
18944
|
+
this._initializing = false;
|
|
18945
|
+
if (this._pendingEnvironmentRetry && this.license) {
|
|
18946
|
+
this._pendingEnvironmentRetry = false;
|
|
18947
|
+
if (this._initialized) {
|
|
18948
|
+
// Already fully initialized with wrong env URL — re-validate only the license.
|
|
18949
|
+
// Services and camera are already running and don't depend on the env URL.
|
|
18950
|
+
await this.validateLicense();
|
|
18951
|
+
}
|
|
18952
|
+
else {
|
|
18953
|
+
// Not yet initialized — full retry with the correct environment.
|
|
18954
|
+
this.updateStatus('Validando licencia...', 'Verificando autorización de uso', 'initializing');
|
|
18955
|
+
await this.validateAndInitialize();
|
|
18956
|
+
}
|
|
18957
|
+
}
|
|
18958
|
+
else {
|
|
18959
|
+
this._pendingEnvironmentRetry = false;
|
|
18960
|
+
}
|
|
18848
18961
|
}
|
|
18849
18962
|
}
|
|
18850
18963
|
async initializeServices() {
|
|
@@ -18894,14 +19007,14 @@ const JaakStamps = class {
|
|
|
18894
19007
|
}
|
|
18895
19008
|
async validateLicense() {
|
|
18896
19009
|
if (!this.license) {
|
|
18897
|
-
console.error('❌ No license provided for JAAK Stamps component');
|
|
18898
19010
|
this.licenseError = 'Este componente requiere una licencia válida. Por favor, proporcione una licencia usando el atributo "license".';
|
|
18899
19011
|
this.licenseValid = false;
|
|
18900
19012
|
this.updateStatus('Error de licencia', 'Licencia no proporcionada', 'error');
|
|
18901
19013
|
return;
|
|
18902
19014
|
}
|
|
18903
19015
|
try {
|
|
18904
|
-
|
|
19016
|
+
if (this.debug)
|
|
19017
|
+
console.log('[jaak-stamps] validating license...');
|
|
18905
19018
|
// Initialize license validation service
|
|
18906
19019
|
this.licenseValidationService = new LicenseValidationService(this.licenseEnvironment);
|
|
18907
19020
|
// Validate the license, passing traceId and appId if provided
|
|
@@ -18909,18 +19022,21 @@ const JaakStamps = class {
|
|
|
18909
19022
|
if (response && response.access_token) {
|
|
18910
19023
|
this.licenseValid = true;
|
|
18911
19024
|
this.licenseError = null;
|
|
18912
|
-
|
|
19025
|
+
if (this.debug)
|
|
19026
|
+
console.log('[jaak-stamps] license validated successfully');
|
|
18913
19027
|
// Emit the traceId (either provided or generated)
|
|
18914
19028
|
if (response.traceId) {
|
|
18915
19029
|
this.traceIdGenerated.emit({ traceId: response.traceId });
|
|
18916
|
-
|
|
19030
|
+
if (this.debug)
|
|
19031
|
+
console.log('[jaak-stamps] traceId:', response.traceId);
|
|
18917
19032
|
}
|
|
18918
19033
|
}
|
|
18919
19034
|
else {
|
|
18920
19035
|
this.licenseValid = false;
|
|
18921
19036
|
this.licenseError = 'La licencia proporcionada no es válida. Por favor, verifique su licencia e intente nuevamente.';
|
|
18922
19037
|
this.updateStatus('Error de licencia', 'Licencia inválida', 'error');
|
|
18923
|
-
|
|
19038
|
+
if (this.debug)
|
|
19039
|
+
console.error('[jaak-stamps] invalid license');
|
|
18924
19040
|
}
|
|
18925
19041
|
}
|
|
18926
19042
|
catch (error) {
|
|
@@ -18928,7 +19044,8 @@ const JaakStamps = class {
|
|
|
18928
19044
|
const licenseError = error;
|
|
18929
19045
|
this.licenseError = licenseError.error_description || 'Error al validar la licencia. Por favor, verifique su conexión e intente nuevamente.';
|
|
18930
19046
|
this.updateStatus('Error de licencia', 'Fallo en la validación', 'error');
|
|
18931
|
-
|
|
19047
|
+
if (this.debug)
|
|
19048
|
+
console.error('[jaak-stamps] license validation failed:', error);
|
|
18932
19049
|
}
|
|
18933
19050
|
}
|
|
18934
19051
|
async setupEventListeners() {
|
|
@@ -20214,7 +20331,7 @@ const JaakStamps = class {
|
|
|
20214
20331
|
isCapturing: false
|
|
20215
20332
|
};
|
|
20216
20333
|
const cameraInfo = this.cameraInfoWithAutofocus;
|
|
20217
|
-
return (index.h("div", { key: '
|
|
20334
|
+
return (index.h("div", { key: 'c0a28d9fd8a66fc8589c0111508ea959f07c143f', class: "detector-container" }, !this.licenseValid && this.licenseError && (index.h("div", { key: '1d0162e9d56c65f646884d12a3c73f4ed7e4c1fc', class: "license-error-container" }, index.h("div", { key: 'a50de01af3d60f4dbe2d17c9d059f79ad0fc8191', class: "license-error-card" }, index.h("svg", { key: '1dd6b599a3ca9bf818aec832638bab23b4ae4074', class: "license-error-icon", width: "64", height: "64", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'c7175baf6b409428d820326e24522c7dd0b28811', d: "M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '1ff3c700981b50ed670a499054ceb7b4afc12bc2', d: "M12 8V12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), index.h("circle", { key: 'f0adaa57bc3a218eedf92478f577a381fdb29268', cx: "12", cy: "16", r: "0.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" })), index.h("h2", { key: '076e4aaf687e47d2553ba264af3de5ff67b03c60', class: "license-error-title" }, "Licencia Requerida"), index.h("p", { key: '607d2793649698c5686ee98af1e4c48921cba094', class: "license-error-message" }, this.licenseError), index.h("p", { key: '2d5eef84366fabdfea2106e7e5a198ab085c3a01', class: "license-error-help" }, "Contacte a soporte: ", index.h("a", { key: '91d7d22d72f78ae52bc8ddc0955b3ac559474579', href: "mailto:support@jaak.ai" }, "support@jaak.ai")), index.h("div", { key: '0ccf2e04602f740b6dd8551068c044d17691ba38', class: "license-error-footer" }, "JAAK Stamps")))), this.licenseValid && (index.h("div", { key: '339a6066a03d820c74cfd77ce7d582d2282dbf05', class: "video-container" }, index.h("video", { key: '680e86ddef25468ea253febbbc2a5b895b9be955', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: {
|
|
20218
20335
|
// Keep the element rendered (display: block) so the browser
|
|
20219
20336
|
// loads stream metadata and fires 'loadedmetadata'. Hiding it
|
|
20220
20337
|
// with display:none prevents metadata loading in Chrome and
|
|
@@ -20223,7 +20340,7 @@ const JaakStamps = class {
|
|
|
20223
20340
|
// render context alive.
|
|
20224
20341
|
opacity: captureState.isVideoActive ? '1' : '0',
|
|
20225
20342
|
visibility: captureState.isVideoActive ? 'visible' : 'hidden',
|
|
20226
|
-
} }), index.h("div", { key: '
|
|
20343
|
+
} }), index.h("div", { key: '521004bb615866dcf160086009810a543fe26a24', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index$1) => (index.h("div", { key: index$1, class: "detection-box", style: {
|
|
20227
20344
|
position: 'absolute',
|
|
20228
20345
|
left: `${box.x}px`,
|
|
20229
20346
|
top: `${box.y}px`,
|
|
@@ -20232,9 +20349,9 @@ const JaakStamps = class {
|
|
|
20232
20349
|
border: '2px solid #32406C',
|
|
20233
20350
|
pointerEvents: 'none',
|
|
20234
20351
|
boxSizing: 'border-box'
|
|
20235
|
-
} })))), this.isMaskReady && (index.h("div", { key: '
|
|
20352
|
+
} })))), this.isMaskReady && (index.h("div", { key: '7b4657df6b922001c726e004c326fe2bc5b20e65', class: "overlay-mask" }, index.h("div", { key: 'c5075a15c4cb994f5628df2be55c0b01077f20f3', class: "card-outline" }, index.h("div", { key: '5028c29cb564a77d7e29ea8fa5877da2d93659e3', class: "side side-top" }), index.h("div", { key: 'e8ce9c8bf2e771ad7862e5127a7d137755f85038', class: "side side-right" }), index.h("div", { key: '351b74462df5ae239fa0519a4cbd994b5e5c5bac', class: "side side-bottom" }), index.h("div", { key: 'e0e8bbe59c665db264ed6174d18cb258dfaddc30', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.h("div", { key: '6e995dbe5753cdbb54773c519389aa0822c3913a', class: `guide-text ${this.showPerformanceMessage ? 'performance-warning-text' : ''}` }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.h("div", { key: 'e1a10fcb0e57765247aea911eb24d2c079cde8ee', class: "back-capture-section" }, index.h("div", { key: '3da2aacdce5badcab9017ea5316a124690773b55', class: "back-capture-buttons" }, (!this.useDocumentDetector || this.performanceDegradedMode || this.showManualCaptureButton) && (index.h("button", { key: 'e04c02cfa13728d7a771243167e9c94c92e3c934', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-back' && (index.h("span", { key: '47759f79990eb34c69e39b2b9f6d71e6c2d8bb33', class: "button-spinner" })), "Capturar Reverso")), index.h("button", { key: 'e41860634d1df34bfa30c2559fc85322088888ee', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'skip-back' && (index.h("span", { key: '44358375377638cd7a7c0699fba5739f38230727', class: "button-spinner" })), this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
|
|
20236
20353
|
? `Saltar reverso (${this.backDocumentTimerRemaining}s)`
|
|
20237
|
-
: 'Saltar reverso')))), captureState.isVideoActive && (index.h("div", { key: '
|
|
20354
|
+
: 'Saltar reverso')))), captureState.isVideoActive && (index.h("div", { key: '2f3d35c91e490da2cb458f317fb2a7ece836ca01', class: "camera-controls" }, index.h("button", { key: '21718e9ab6932bb8bd88ca16cc820081b1ed6469', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (index.h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (index.h("div", { key: '1873af9e9d2ff2761e750713606a3b06295fb2f7', class: "camera-selector-dropdown" }, index.h("div", { key: 'df3f445f7ff51efe298f070c56dbfdd217397ea0', class: "camera-selector-header" }, index.h("span", { key: 'f9f33b0c4ed4bf62e18020f54b90f6ce09e923aa' }, "Seleccionar C\u00E1mara"), index.h("button", { key: '28c29c4c82557c80e42b3f524041ab8e160cfce1', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), index.h("div", { key: '95d06551595ca0b7d23ed16c8c4ead633f98ed2f', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (index.h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, index.h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`, camera.hasAutofocus && (index.h("span", { class: "autofocus-icon", title: "Autofoco disponible" }, "\u29BF"))), cameraInfo.selectedCameraId === camera.id && (index.h("span", { class: "selected-indicator" }, "\u2713")))))), index.h("div", { key: '6844114f4fa6e6a49d1194c4eaac71db4e2c2030', class: "device-info" }, index.h("small", { key: 'db82272ae5d253dd59fb42326e11ca1d50c70e3e' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.h("div", { key: '04bc5e0a469478dab6a5e1e957fa830be15555bc', class: "manual-capture-section" }, index.h("button", { key: '4fae0d4ca89e718a69143d6167dc3f295bc2fafa', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-front' && (index.h("span", { key: '5cb26e80c3216ce4940cf24ff1c18e0664a45eb7', class: "button-spinner" })), "Capturar Frente"))))), captureState.isCapturing && (index.h("div", { key: 'c4e99932aca8940f339aa80d1c9659223d026395', class: "capture-animation" })), captureState.showFlipAnimation && (index.h("div", { key: '4102bccccbae2163e7bb520761d871e07a30e34d', class: "flip-animation" }, index.h("div", { key: '1f9cd0f6d54f643251d24553fe6022f9045a50d6', class: "id-card-icon" }), index.h("div", { key: '1fba0dd3d1b25a1b39f3bda66c8706fd43bf996d', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (index.h("div", { key: '08a0df4e7f7dbf5134cc89d2e300c04825b00495', class: "success-animation" }, index.h("div", { key: 'f94b29abea00c8293da5420981215f929fda19c3', class: "check-icon" }), index.h("div", { key: '01380c7e83e147bf841540178ba56d705c7f3258', class: "success-text" }, "\u00A1Proceso completado!"))), index.h("div", { key: '37d9824236643701b13de9d54adf83662625e6d5', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (index.h("div", { key: '37d6da93b822edf62161a1657887ae1050d16e29', class: "status-spinner" })), index.h("div", { key: '6275ed024cbbeb436b7f04e0dd3bb7cfed1a6a9d', class: "status-content" }, index.h("div", { key: '9c983c432febd71eff737e395e3104711bf8b994', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (index.h("div", { key: '721704c457c378f9563cd28e1e52fa35c68636d8', class: "status-description" }, this.currentStatus.description)))), this.debug && (index.h("div", { key: '0e0ed8e26c2ce73601a88ea74f97da447ad957a3', class: "performance-monitor" }, index.h("div", { key: 'ce46a8da032a38c4c7e6afaf706af5a7ba258f74', class: "performance-expanded" }, index.h("div", { key: '50566325fd8e54d9b5146c95a7965b262b5cbe7e', class: "metrics-row" }, index.h("div", { key: '2c255f1ab96cc0fb3e454b58a37dfe22f6df8ef2', class: "metric-compact" }, index.h("span", { key: '151e4bbf19f362bf32bb4ec838c5ff858ae5c8e6', class: "metric-label" }, "FPS"), index.h("span", { key: '4dcf58fd6d13106ca1fdb28331aebf6ff71c7886', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), index.h("div", { key: '58d0745fb27b0b216fd3865e8fac4731811536c8', class: "metric-compact" }, index.h("span", { key: '0c16975cb5f84351fbad0b6daa6a8d1214f3226e', class: "metric-label" }, "MEM"), index.h("span", { key: 'cf8edc14a7ad690c80dfaeae4f2eaa0b07f88ca3', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), index.h("div", { key: 'c50c14ac229f3a71fc37b256fd5caab77f0c43b2', class: "metrics-row" }, index.h("div", { key: 'b67d2719f42ae342c791d64a52e702af4d54bdbb', class: "metric-compact" }, index.h("span", { key: 'c2ecf87d853dc935b1dad5dd77adee52d1c56404', class: "metric-label" }, "INF"), index.h("span", { key: '86cad05a1846ed3e4e73175acd9a6acabbecb801', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), index.h("div", { key: '82268593f3edea53553b35d4a7ef4c4677ab56c6', class: "metric-compact" }, index.h("span", { key: '937ff57182396d280cb753818b62829d73f7ca4d', class: "metric-label" }, "FRAME"), index.h("span", { key: '6f605b44484ed9e916f16fd50c91e7eb55d45172', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), index.h("div", { key: '5c3c1bd6bde1d43338be02d3f711314fc7c9603c', class: "metrics-row" }, index.h("div", { key: 'bfa796075c5be71dbd8f78471ad2243392561edd', class: "metric-compact" }, index.h("span", { key: '9c2a2999f7026c96f24ef049c2779b1b63b7759a', class: "metric-label" }, "DET"), index.h("span", { key: '5ea705bcde4f534d23d23cf1bfbdbf228d394b22', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), index.h("div", { key: 'cd73965baaed7267be05bf6a8990707b94ad3761', class: "metric-compact" }, index.h("span", { key: 'f7ddd8f95353e21c776c31298c4508e0ee9fffc3', class: "metric-label" }, "RATE"), index.h("span", { key: '2388af4b2ec742889a01b922a44f0d169e747b56', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), index.h("div", { key: '822ae802489dc1621a2edebfb513c0966ea1d4b8', class: "watermark" }, index.h("img", { key: 'bc98d9afb9cb8336bfac25d3f1af3a09f49aafb3', src: "https://static.jaak.ai/commons/powered-by-jaak.png", alt: "Powered by Jaak", onError: (e) => {
|
|
20238
20355
|
const img = e.target;
|
|
20239
20356
|
img.onerror = null;
|
|
20240
20357
|
img.src = POWERED_BY_JAAK_FALLBACK;
|
|
@@ -20782,7 +20899,7 @@ const JaakStamps = class {
|
|
|
20782
20899
|
await this.tracingService.flush();
|
|
20783
20900
|
}
|
|
20784
20901
|
catch (error) {
|
|
20785
|
-
console.error('[
|
|
20902
|
+
console.error('[jaak-stamps] Failed to flush traces:', error);
|
|
20786
20903
|
}
|
|
20787
20904
|
}
|
|
20788
20905
|
this.captureCompleted.emit(finalImages);
|
|
@@ -21055,8 +21172,12 @@ const JaakStamps = class {
|
|
|
21055
21172
|
// If pool is full, let the canvas be garbage collected
|
|
21056
21173
|
}
|
|
21057
21174
|
static get assetsDirs() { return ["../../assets"]; }
|
|
21175
|
+
static get watchers() { return {
|
|
21176
|
+
"license": ["onLicenseChanged"],
|
|
21177
|
+
"licenseEnvironment": ["onLicenseEnvironmentChanged"]
|
|
21178
|
+
}; }
|
|
21058
21179
|
};
|
|
21059
|
-
JaakStamps.style =
|
|
21180
|
+
JaakStamps.style = jaakStampsCss;
|
|
21060
21181
|
|
|
21061
21182
|
exports.jaak_stamps = JaakStamps;
|
|
21062
21183
|
//# sourceMappingURL=jaak-stamps.entry.cjs.js.map
|