@jaak.ai/stamps 2.5.7-dev.3 → 2.5.7
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-BcFBOmM6.js → index-D6NBn_qu.js} +4 -30
- package/dist/cjs/index-D6NBn_qu.js.map +1 -0
- package/dist/cjs/jaak-stamps-webcomponent.cjs.js +2 -2
- package/dist/cjs/jaak-stamps.cjs.entry.js +72 -143
- 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/{jaak-stamps/jaak-stamps.js → my-component/my-component.js} +34 -88
- package/dist/collection/components/my-component/my-component.js.map +1 -0
- package/dist/collection/components/my-component/watermark-fallback.js.map +1 -0
- package/dist/collection/services/DetectionService.js +38 -60
- package/dist/collection/services/DetectionService.js.map +1 -1
- package/dist/collection/utils/utils.js +4 -0
- package/dist/collection/utils/utils.js.map +1 -0
- package/dist/components/index.js +2 -20
- package/dist/components/index.js.map +1 -1
- package/dist/components/jaak-stamps.js +71 -145
- package/dist/components/jaak-stamps.js.map +1 -1
- package/dist/esm/{index-Cb0ILUvS.js → index-BCfAsrzL.js} +4 -30
- package/dist/esm/index-BCfAsrzL.js.map +1 -0
- package/dist/esm/jaak-stamps-webcomponent.js +3 -3
- package/dist/esm/jaak-stamps.entry.js +72 -143
- 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-268577ba.entry.js → p-63c2c085.entry.js} +3 -3
- package/dist/jaak-stamps-webcomponent/p-63c2c085.entry.js.map +1 -0
- package/dist/jaak-stamps-webcomponent/p-BCfAsrzL.js +3 -0
- package/dist/jaak-stamps-webcomponent/p-BCfAsrzL.js.map +1 -0
- package/dist/types/components/{jaak-stamps/jaak-stamps.d.ts → my-component/my-component.d.ts} +0 -5
- package/dist/types/services/DetectionService.d.ts +4 -5
- package/dist/types/utils/utils.d.ts +1 -0
- package/package.json +4 -4
- package/dist/cjs/index-BcFBOmM6.js.map +0 -1
- package/dist/collection/components/jaak-stamps/jaak-stamps.js.map +0 -1
- package/dist/collection/components/jaak-stamps/watermark-fallback.js.map +0 -1
- package/dist/esm/index-Cb0ILUvS.js.map +0 -1
- package/dist/jaak-stamps-webcomponent/p-268577ba.entry.js.map +0 -1
- package/dist/jaak-stamps-webcomponent/p-Cb0ILUvS.js +0 -3
- package/dist/jaak-stamps-webcomponent/p-Cb0ILUvS.js.map +0 -1
- /package/dist/collection/components/{jaak-stamps/jaak-stamps.css → my-component/my-component.css} +0 -0
- /package/dist/collection/components/{jaak-stamps → my-component}/watermark-fallback.js +0 -0
- /package/dist/types/components/{jaak-stamps → my-component}/watermark-fallback.d.ts +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, g as getElement, h } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, g as getElement, h } from './index-BCfAsrzL.js';
|
|
2
2
|
|
|
3
3
|
class EventBusService {
|
|
4
4
|
events = new Map();
|
|
@@ -796,6 +796,15 @@ class DetectionService {
|
|
|
796
796
|
INPUT_SIZE = 320;
|
|
797
797
|
CONFIDENCE_THRESHOLD = 0.6;
|
|
798
798
|
useFloat16 = true;
|
|
799
|
+
// Hoisted views for float32->float16 bit-twiddling. A fresh ArrayBuffer
|
|
800
|
+
// per call was costing ~614K allocations per frame.
|
|
801
|
+
_f32View = new Float32Array(1);
|
|
802
|
+
_u32View = new Uint32Array(this._f32View.buffer);
|
|
803
|
+
// Pre-allocated tensor buffers reused across frames. Same shape every time
|
|
804
|
+
// (3 * INPUT_SIZE * INPUT_SIZE), and runInference is awaited before the next
|
|
805
|
+
// preprocess runs, so reuse is safe.
|
|
806
|
+
_tensorF32 = new Float32Array(3 * 320 * 320);
|
|
807
|
+
_tensorF16 = new Uint16Array(3 * 320 * 320);
|
|
799
808
|
// Canvas pool for optimization
|
|
800
809
|
preprocessCanvas;
|
|
801
810
|
preprocessCtx;
|
|
@@ -822,7 +831,7 @@ class DetectionService {
|
|
|
822
831
|
try {
|
|
823
832
|
const sessionOptions = this.deviceStrategy.getSessionOptions(this.debug);
|
|
824
833
|
try {
|
|
825
|
-
this.session = await
|
|
834
|
+
this.session = await window.ort.InferenceSession.create(this.MODEL_PATH, sessionOptions);
|
|
826
835
|
this.detectFloat16Support();
|
|
827
836
|
}
|
|
828
837
|
catch (error) {
|
|
@@ -837,7 +846,7 @@ class DetectionService {
|
|
|
837
846
|
if (isFloat16Error) {
|
|
838
847
|
this.useFloat16 = false;
|
|
839
848
|
try {
|
|
840
|
-
this.session = await
|
|
849
|
+
this.session = await window.ort.InferenceSession.create(this.MODEL_PATH_FP32, sessionOptions);
|
|
841
850
|
}
|
|
842
851
|
catch (fp32Error) {
|
|
843
852
|
// Intentar con opciones minimas de WASM
|
|
@@ -846,7 +855,7 @@ class DetectionService {
|
|
|
846
855
|
graphOptimizationLevel: 'all',
|
|
847
856
|
logSeverityLevel: this.debug ? 2 : 4,
|
|
848
857
|
};
|
|
849
|
-
this.session = await
|
|
858
|
+
this.session = await window.ort.InferenceSession.create(this.MODEL_PATH_FP32, wasmOptions);
|
|
850
859
|
}
|
|
851
860
|
}
|
|
852
861
|
else if (isMemoryError) {
|
|
@@ -865,7 +874,7 @@ class DetectionService {
|
|
|
865
874
|
};
|
|
866
875
|
this.useFloat16 = false;
|
|
867
876
|
try {
|
|
868
|
-
this.session = await
|
|
877
|
+
this.session = await window.ort.InferenceSession.create(this.MODEL_PATH_FP32, fallbackOptions);
|
|
869
878
|
}
|
|
870
879
|
catch (fallbackError) {
|
|
871
880
|
throw new Error(`no available backend found. ERR: [wasm] RangeError: Out of memory`);
|
|
@@ -906,7 +915,7 @@ class DetectionService {
|
|
|
906
915
|
// Load model
|
|
907
916
|
const sessionOptions = this.deviceStrategy.getSessionOptions(this.debug);
|
|
908
917
|
try {
|
|
909
|
-
this.mobileNetSession = await
|
|
918
|
+
this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, sessionOptions);
|
|
910
919
|
}
|
|
911
920
|
catch (error) {
|
|
912
921
|
// Múltiples tipos de errores de memoria que pueden ocurrir
|
|
@@ -930,7 +939,7 @@ class DetectionService {
|
|
|
930
939
|
sessionLogVerbosityLevel: 0,
|
|
931
940
|
};
|
|
932
941
|
try {
|
|
933
|
-
this.mobileNetSession = await
|
|
942
|
+
this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, fallbackOptions);
|
|
934
943
|
}
|
|
935
944
|
catch (fallbackError) {
|
|
936
945
|
throw new Error(`no available backend found. ERR: [wasm] RangeError: Out of memory`);
|
|
@@ -956,25 +965,31 @@ class DetectionService {
|
|
|
956
965
|
if (!this.preprocessCanvas || !this.preprocessCtx) {
|
|
957
966
|
this.initializeCanvasPool();
|
|
958
967
|
}
|
|
959
|
-
|
|
960
|
-
this.preprocessCtx.
|
|
961
|
-
|
|
962
|
-
const
|
|
968
|
+
const SIZE = this.INPUT_SIZE;
|
|
969
|
+
this.preprocessCtx.clearRect(0, 0, SIZE, SIZE);
|
|
970
|
+
this.preprocessCtx.drawImage(video, 0, 0, SIZE, SIZE);
|
|
971
|
+
const imageData = this.preprocessCtx.getImageData(0, 0, SIZE, SIZE);
|
|
963
972
|
const { data } = imageData;
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
}
|
|
969
|
-
const transposedData = new Float32Array(R.concat(G, B));
|
|
973
|
+
const pixels = SIZE * SIZE;
|
|
974
|
+
const gOffset = pixels;
|
|
975
|
+
const bOffset = pixels * 2;
|
|
976
|
+
const inv255 = 1 / 255;
|
|
970
977
|
if (this.useFloat16) {
|
|
971
|
-
const
|
|
972
|
-
for (let i = 0; i <
|
|
973
|
-
|
|
978
|
+
const out = this._tensorF16;
|
|
979
|
+
for (let i = 0, p = 0; i < data.length; i += 4, p++) {
|
|
980
|
+
out[p] = this.float32ToFloat16(data[i] * inv255);
|
|
981
|
+
out[gOffset + p] = this.float32ToFloat16(data[i + 1] * inv255);
|
|
982
|
+
out[bOffset + p] = this.float32ToFloat16(data[i + 2] * inv255);
|
|
974
983
|
}
|
|
975
|
-
return new window.ort.Tensor("float16",
|
|
984
|
+
return new window.ort.Tensor("float16", out, [1, 3, SIZE, SIZE]);
|
|
985
|
+
}
|
|
986
|
+
const out = this._tensorF32;
|
|
987
|
+
for (let i = 0, p = 0; i < data.length; i += 4, p++) {
|
|
988
|
+
out[p] = data[i] * inv255;
|
|
989
|
+
out[gOffset + p] = data[i + 1] * inv255;
|
|
990
|
+
out[bOffset + p] = data[i + 2] * inv255;
|
|
976
991
|
}
|
|
977
|
-
return new window.ort.Tensor("float32",
|
|
992
|
+
return new window.ort.Tensor("float32", out, [1, 3, SIZE, SIZE]);
|
|
978
993
|
}
|
|
979
994
|
async runInference(inputTensor) {
|
|
980
995
|
if (!this.useDocumentDetector) {
|
|
@@ -1122,41 +1137,6 @@ class DetectionService {
|
|
|
1122
1137
|
areAllSidesAligned(alignment) {
|
|
1123
1138
|
return alignment.top && alignment.right && alignment.bottom && alignment.left;
|
|
1124
1139
|
}
|
|
1125
|
-
// Reference counter so concurrent sessions share one filter and the last
|
|
1126
|
-
// one to finish restores the original console.warn.
|
|
1127
|
-
static _ortWarnActiveCount = 0;
|
|
1128
|
-
static _originalWarn = null;
|
|
1129
|
-
static _acquireWarnFilter() {
|
|
1130
|
-
if (DetectionService._ortWarnActiveCount === 0) {
|
|
1131
|
-
DetectionService._originalWarn = console.warn;
|
|
1132
|
-
console.warn = (...args) => {
|
|
1133
|
-
const msg = typeof args[0] === 'string' ? args[0] : '';
|
|
1134
|
-
if (!msg.includes('removing requested execution provider')) {
|
|
1135
|
-
DetectionService._originalWarn.apply(console, args);
|
|
1136
|
-
}
|
|
1137
|
-
};
|
|
1138
|
-
}
|
|
1139
|
-
DetectionService._ortWarnActiveCount++;
|
|
1140
|
-
}
|
|
1141
|
-
static _releaseWarnFilter() {
|
|
1142
|
-
DetectionService._ortWarnActiveCount--;
|
|
1143
|
-
if (DetectionService._ortWarnActiveCount === 0 && DetectionService._originalWarn) {
|
|
1144
|
-
console.warn = DetectionService._originalWarn;
|
|
1145
|
-
DetectionService._originalWarn = null;
|
|
1146
|
-
}
|
|
1147
|
-
}
|
|
1148
|
-
async createSession(modelPath, options) {
|
|
1149
|
-
// Keep the filter active for the full await: ORT may emit
|
|
1150
|
-
// "removing requested execution provider" during async resolution,
|
|
1151
|
-
// not only in the synchronous preamble of create().
|
|
1152
|
-
DetectionService._acquireWarnFilter();
|
|
1153
|
-
try {
|
|
1154
|
-
return await window.ort.InferenceSession.create(modelPath, options);
|
|
1155
|
-
}
|
|
1156
|
-
finally {
|
|
1157
|
-
DetectionService._releaseWarnFilter();
|
|
1158
|
-
}
|
|
1159
|
-
}
|
|
1160
1140
|
cleanup() {
|
|
1161
1141
|
this.cleanupCanvasPool();
|
|
1162
1142
|
if (this.session) {
|
|
@@ -1201,10 +1181,8 @@ class DetectionService {
|
|
|
1201
1181
|
}
|
|
1202
1182
|
}
|
|
1203
1183
|
float32ToFloat16(value) {
|
|
1204
|
-
|
|
1205
|
-
const
|
|
1206
|
-
view.setFloat32(0, value, true);
|
|
1207
|
-
const f = view.getUint32(0, true);
|
|
1184
|
+
this._f32View[0] = value;
|
|
1185
|
+
const f = this._u32View[0];
|
|
1208
1186
|
const sign = (f >> 31) & 0x1;
|
|
1209
1187
|
const exp = (f >> 23) & 0xFF;
|
|
1210
1188
|
const frac = f & 0x7FFFFF;
|
|
@@ -18667,7 +18645,7 @@ class LicenseValidationService {
|
|
|
18667
18645
|
}
|
|
18668
18646
|
}
|
|
18669
18647
|
|
|
18670
|
-
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}}";
|
|
18648
|
+
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}}";
|
|
18671
18649
|
|
|
18672
18650
|
const JaakStamps = class {
|
|
18673
18651
|
constructor(hostRef) {
|
|
@@ -18697,7 +18675,7 @@ const JaakStamps = class {
|
|
|
18697
18675
|
propagateTraceHeaderCorsUrls; // Comma-separated URLs or regex patterns
|
|
18698
18676
|
metricsExportIntervalMillis = 60000; // Export metrics every 60 seconds
|
|
18699
18677
|
license; // License key for validation
|
|
18700
|
-
licenseEnvironment = 'prod';
|
|
18678
|
+
licenseEnvironment = 'prod'; // Environment for license validation
|
|
18701
18679
|
traceId; // Optional trace ID for tracking
|
|
18702
18680
|
appId = 'jaak-stamps-web'; // Application ID for license validation
|
|
18703
18681
|
captureCompleted;
|
|
@@ -18745,8 +18723,6 @@ const JaakStamps = class {
|
|
|
18745
18723
|
licenseValid = true; // License validation status
|
|
18746
18724
|
licenseError = null; // License validation error message
|
|
18747
18725
|
classificationDisabled = false; // Classification disabled at runtime due to errors
|
|
18748
|
-
_initialized = false;
|
|
18749
|
-
_initializing = false;
|
|
18750
18726
|
// Services
|
|
18751
18727
|
licenseValidationService = null;
|
|
18752
18728
|
serviceContainer;
|
|
@@ -18816,10 +18792,8 @@ const JaakStamps = class {
|
|
|
18816
18792
|
canvasPool = [];
|
|
18817
18793
|
MAX_CANVAS_POOL_SIZE = 3;
|
|
18818
18794
|
async componentWillLoad() {
|
|
18819
|
-
// Yield one microtask so attributes set synchronously after innerHTML are reflected as props
|
|
18820
|
-
await Promise.resolve();
|
|
18821
18795
|
if (this.debug) {
|
|
18822
|
-
console.log('[JAAK-DEBUG] componentWillLoad() - Props
|
|
18796
|
+
console.log('[JAAK-DEBUG] componentWillLoad() - Props at initialization:');
|
|
18823
18797
|
console.log('[JAAK-DEBUG] useDocumentDetector:', this.useDocumentDetector, '(type:', typeof this.useDocumentDetector, ')');
|
|
18824
18798
|
console.log('[JAAK-DEBUG] useDocumentClassification:', this.useDocumentClassification);
|
|
18825
18799
|
console.log('[JAAK-DEBUG] debug:', this.debug);
|
|
@@ -18831,64 +18805,32 @@ const JaakStamps = class {
|
|
|
18831
18805
|
console.log('[JAAK-DEBUG] preferredCamera:', this.preferredCamera);
|
|
18832
18806
|
console.log('[JAAK-DEBUG] appId:', this.appId);
|
|
18833
18807
|
}
|
|
18834
|
-
|
|
18835
|
-
|
|
18836
|
-
|
|
18837
|
-
|
|
18838
|
-
|
|
18839
|
-
|
|
18840
|
-
else {
|
|
18841
|
-
// License present — pre-set the first status synchronously so the initial render
|
|
18842
|
-
// already shows it, preventing a state change inside componentDidLoad that Stencil
|
|
18843
|
-
// would flag as an extra re-render.
|
|
18844
|
-
this.updateStatus('Validando licencia...', 'Verificando autorización de uso', 'initializing');
|
|
18845
|
-
}
|
|
18846
|
-
// Heavy initialization is deferred to componentDidLoad so the first render is not blocked
|
|
18847
|
-
}
|
|
18848
|
-
async componentDidLoad() {
|
|
18849
|
-
// License absent at mount time — @Watch('license') handles initialization when it arrives
|
|
18850
|
-
if (!this.license || this._initialized || this._initializing) {
|
|
18851
|
-
return;
|
|
18808
|
+
// License is required - always validate
|
|
18809
|
+
// Wait a bit to ensure props are set from attributes
|
|
18810
|
+
await new Promise(resolve => setTimeout(resolve, 50));
|
|
18811
|
+
if (this.debug) {
|
|
18812
|
+
console.log('[JAAK-DEBUG] Props AFTER 50ms wait:');
|
|
18813
|
+
console.log('[JAAK-DEBUG] useDocumentDetector:', this.useDocumentDetector, '(type:', typeof this.useDocumentDetector, ')');
|
|
18852
18814
|
}
|
|
18853
|
-
|
|
18854
|
-
|
|
18855
|
-
|
|
18856
|
-
if (!
|
|
18815
|
+
this.updateStatus('Validando licencia...', 'Verificando autorización de uso', 'initializing');
|
|
18816
|
+
await this.validateLicense();
|
|
18817
|
+
// If license validation failed, stop initialization
|
|
18818
|
+
if (!this.licenseValid) {
|
|
18819
|
+
if (this.debug) {
|
|
18820
|
+
console.error('[JAAK-DEBUG] License validation FAILED. Stopping initialization.');
|
|
18821
|
+
}
|
|
18857
18822
|
return;
|
|
18858
18823
|
}
|
|
18859
|
-
|
|
18860
|
-
|
|
18861
|
-
await this.validateAndInitialize();
|
|
18862
|
-
}
|
|
18863
|
-
async onLicenseEnvironmentChanged() {
|
|
18864
|
-
// Always recreate the service so the correct environment URL is used from now on.
|
|
18865
|
-
this.licenseValidationService = new LicenseValidationService(this.licenseEnvironment);
|
|
18866
|
-
// If a license is present but the component never finished initializing
|
|
18867
|
-
// (e.g. first validate ran against the wrong env and failed, or license arrived
|
|
18868
|
-
// before licenseEnvironment was set), retry the full init flow now.
|
|
18869
|
-
if (this.license && !this._initialized && !this._initializing) {
|
|
18870
|
-
this.updateStatus('Validando licencia...', 'Verificando autorización de uso', 'initializing');
|
|
18871
|
-
await this.validateAndInitialize();
|
|
18824
|
+
if (this.debug) {
|
|
18825
|
+
console.log('[JAAK-DEBUG] License validation OK');
|
|
18872
18826
|
}
|
|
18873
18827
|
}
|
|
18874
|
-
async
|
|
18875
|
-
if (this._initialized || this._initializing) {
|
|
18876
|
-
return;
|
|
18877
|
-
}
|
|
18878
|
-
this._initializing = true;
|
|
18828
|
+
async componentDidLoad() {
|
|
18879
18829
|
try {
|
|
18880
|
-
//
|
|
18881
|
-
// to avoid a state change inside componentDidLoad that Stencil warns about.
|
|
18882
|
-
await this.validateLicense();
|
|
18830
|
+
// If license validation failed, stop initialization
|
|
18883
18831
|
if (!this.licenseValid) {
|
|
18884
|
-
if (this.debug) {
|
|
18885
|
-
console.error('[JAAK-DEBUG] License validation FAILED. Stopping initialization.');
|
|
18886
|
-
}
|
|
18887
18832
|
return;
|
|
18888
18833
|
}
|
|
18889
|
-
if (this.debug) {
|
|
18890
|
-
console.log('[JAAK-DEBUG] License validation OK');
|
|
18891
|
-
}
|
|
18892
18834
|
this.updateStatus('Preparando capturador...', 'Configurando herramientas de captura', 'initializing');
|
|
18893
18835
|
await this.initializeServices();
|
|
18894
18836
|
this.updateStatus('Preparando funciones...', 'Configurando herramientas de trabajo', 'initializing');
|
|
@@ -18898,14 +18840,9 @@ const JaakStamps = class {
|
|
|
18898
18840
|
if (this.debug) {
|
|
18899
18841
|
this.initializePerformanceMonitor();
|
|
18900
18842
|
}
|
|
18901
|
-
this._initialized = true;
|
|
18902
18843
|
}
|
|
18903
18844
|
catch (error) {
|
|
18904
|
-
|
|
18905
|
-
this.updateStatus('Error de inicialización', errorMessage, 'error');
|
|
18906
|
-
}
|
|
18907
|
-
finally {
|
|
18908
|
-
this._initializing = false;
|
|
18845
|
+
this.updateStatus('Error de inicialización', error.message, 'error');
|
|
18909
18846
|
}
|
|
18910
18847
|
}
|
|
18911
18848
|
async initializeServices() {
|
|
@@ -18955,14 +18892,14 @@ const JaakStamps = class {
|
|
|
18955
18892
|
}
|
|
18956
18893
|
async validateLicense() {
|
|
18957
18894
|
if (!this.license) {
|
|
18895
|
+
console.error('❌ No license provided for JAAK Stamps component');
|
|
18958
18896
|
this.licenseError = 'Este componente requiere una licencia válida. Por favor, proporcione una licencia usando el atributo "license".';
|
|
18959
18897
|
this.licenseValid = false;
|
|
18960
18898
|
this.updateStatus('Error de licencia', 'Licencia no proporcionada', 'error');
|
|
18961
18899
|
return;
|
|
18962
18900
|
}
|
|
18963
18901
|
try {
|
|
18964
|
-
|
|
18965
|
-
console.log('[jaak-stamps] validating license...');
|
|
18902
|
+
console.log('🔑 Validating license for JAAK Stamps...');
|
|
18966
18903
|
// Initialize license validation service
|
|
18967
18904
|
this.licenseValidationService = new LicenseValidationService(this.licenseEnvironment);
|
|
18968
18905
|
// Validate the license, passing traceId and appId if provided
|
|
@@ -18970,21 +18907,18 @@ const JaakStamps = class {
|
|
|
18970
18907
|
if (response && response.access_token) {
|
|
18971
18908
|
this.licenseValid = true;
|
|
18972
18909
|
this.licenseError = null;
|
|
18973
|
-
|
|
18974
|
-
console.log('[jaak-stamps] license validated successfully');
|
|
18910
|
+
console.log('✅ License validated successfully for JAAK Stamps');
|
|
18975
18911
|
// Emit the traceId (either provided or generated)
|
|
18976
18912
|
if (response.traceId) {
|
|
18977
18913
|
this.traceIdGenerated.emit({ traceId: response.traceId });
|
|
18978
|
-
|
|
18979
|
-
console.log('[jaak-stamps] traceId:', response.traceId);
|
|
18914
|
+
console.log('📋 TraceId:', response.traceId);
|
|
18980
18915
|
}
|
|
18981
18916
|
}
|
|
18982
18917
|
else {
|
|
18983
18918
|
this.licenseValid = false;
|
|
18984
18919
|
this.licenseError = 'La licencia proporcionada no es válida. Por favor, verifique su licencia e intente nuevamente.';
|
|
18985
18920
|
this.updateStatus('Error de licencia', 'Licencia inválida', 'error');
|
|
18986
|
-
|
|
18987
|
-
console.error('[jaak-stamps] invalid license');
|
|
18921
|
+
console.error('❌ Invalid license for JAAK Stamps');
|
|
18988
18922
|
}
|
|
18989
18923
|
}
|
|
18990
18924
|
catch (error) {
|
|
@@ -18992,8 +18926,7 @@ const JaakStamps = class {
|
|
|
18992
18926
|
const licenseError = error;
|
|
18993
18927
|
this.licenseError = licenseError.error_description || 'Error al validar la licencia. Por favor, verifique su conexión e intente nuevamente.';
|
|
18994
18928
|
this.updateStatus('Error de licencia', 'Fallo en la validación', 'error');
|
|
18995
|
-
|
|
18996
|
-
console.error('[jaak-stamps] license validation failed:', error);
|
|
18929
|
+
console.error('❌ License validation failed for JAAK Stamps:', error);
|
|
18997
18930
|
}
|
|
18998
18931
|
}
|
|
18999
18932
|
async setupEventListeners() {
|
|
@@ -20279,7 +20212,7 @@ const JaakStamps = class {
|
|
|
20279
20212
|
isCapturing: false
|
|
20280
20213
|
};
|
|
20281
20214
|
const cameraInfo = this.cameraInfoWithAutofocus;
|
|
20282
|
-
return (h("div", { key: '
|
|
20215
|
+
return (h("div", { key: 'a4f5254bb0f5198cfea553fb46d8841c4a410853', class: "detector-container" }, !this.licenseValid && this.licenseError && (h("div", { key: '48353567b7c23df1b44e035cd6b52dd692b338a6', class: "license-error-container" }, h("div", { key: '8a520b2cb936cae9ed64c513ae9e583f62d31b99', class: "license-error-card" }, h("svg", { key: 'dccdda293c28bd5d1e76bbff0060859a394a800c', class: "license-error-icon", width: "64", height: "64", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '09015453d8230c523abe8e5b4b800b4a55a81202', 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" }), h("path", { key: '5f9fd50412d21de2274e124c02dcc8e971fd23ee', d: "M12 8V12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("circle", { key: 'e534af1f29c6382c2c47623129a94d3aac3ec71e', cx: "12", cy: "16", r: "0.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" })), h("h2", { key: '6ed105bb6e16d8ce7419bc64a0f69e7e2d7ed0ac', class: "license-error-title" }, "Licencia Requerida"), h("p", { key: 'c1d7e06b03a4af316e28836eb7a0f3729993ca1f', class: "license-error-message" }, this.licenseError), h("p", { key: '349ae281248b56524460cb18f36300e69c11ab5e', class: "license-error-help" }, "Contacte a soporte: ", h("a", { key: '62546d77296d220338953c3bd1820946164ff96c', href: "mailto:support@jaak.ai" }, "support@jaak.ai")), h("div", { key: 'b45ac9c2d9b9d65e4156d07a067e6c9214da8113', class: "license-error-footer" }, "JAAK Stamps")))), this.licenseValid && (h("div", { key: '77c274b14b69fe4220f71ef789de8c4943833fee', class: "video-container" }, h("video", { key: 'e036a408939aa5875e36a1f038bed98bfbfba134', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: {
|
|
20283
20216
|
// Keep the element rendered (display: block) so the browser
|
|
20284
20217
|
// loads stream metadata and fires 'loadedmetadata'. Hiding it
|
|
20285
20218
|
// with display:none prevents metadata loading in Chrome and
|
|
@@ -20288,7 +20221,7 @@ const JaakStamps = class {
|
|
|
20288
20221
|
// render context alive.
|
|
20289
20222
|
opacity: captureState.isVideoActive ? '1' : '0',
|
|
20290
20223
|
visibility: captureState.isVideoActive ? 'visible' : 'hidden',
|
|
20291
|
-
} }), h("div", { key: '
|
|
20224
|
+
} }), h("div", { key: '9389f1495814409aa849ce409a28cb578761df76', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index) => (h("div", { key: index, class: "detection-box", style: {
|
|
20292
20225
|
position: 'absolute',
|
|
20293
20226
|
left: `${box.x}px`,
|
|
20294
20227
|
top: `${box.y}px`,
|
|
@@ -20297,9 +20230,9 @@ const JaakStamps = class {
|
|
|
20297
20230
|
border: '2px solid #32406C',
|
|
20298
20231
|
pointerEvents: 'none',
|
|
20299
20232
|
boxSizing: 'border-box'
|
|
20300
|
-
} })))), this.isMaskReady && (h("div", { key: '
|
|
20233
|
+
} })))), this.isMaskReady && (h("div", { key: '8050beb9a72279f3a2d54884fe598eca8b1929af', class: "overlay-mask" }, h("div", { key: '25028f1c5bab6b457563c098899c7645083be3a0', class: "card-outline" }, h("div", { key: 'd125b627160c671f1be837d1f957704d016dcf47', class: "side side-top" }), h("div", { key: '78ed55f578fcadba60e80c50315f4a82bbe9c15c', class: "side side-right" }), h("div", { key: '263d29d0844bfa88d68698d71630fd9b08debc26', class: "side side-bottom" }), h("div", { key: '18e528b4d877699add45d9b4e1e029a2bb993582', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '7e09980601c146cd48f80a04640a8a7d635e14d4', class: `guide-text ${this.showPerformanceMessage ? 'performance-warning-text' : ''}` }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '102e95d211e79d5c5d8e13ae717cb8913eae7ea1', class: "back-capture-section" }, h("div", { key: 'cde593bf62825392df6e950585e9950351bac430', class: "back-capture-buttons" }, (!this.useDocumentDetector || this.performanceDegradedMode || this.showManualCaptureButton) && (h("button", { key: '823b35d70e2bb1cf242e01578e921c8a091c7639', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-back' && (h("span", { key: 'b6f6e82f515cd588eeca60e7abe220d89b40cfe8', class: "button-spinner" })), "Capturar Reverso")), h("button", { key: '7d91e6b780958a36df9a859fb02d8224b0de46dc', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'skip-back' && (h("span", { key: '0d5bce58452c7f7b5e197dfa0eff959971357b3c', class: "button-spinner" })), this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
|
|
20301
20234
|
? `Saltar reverso (${this.backDocumentTimerRemaining}s)`
|
|
20302
|
-
: 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: '
|
|
20235
|
+
: 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: 'e8fc7f2bb1a0ca8235a82ed368717205c7b63ad8', class: "camera-controls" }, h("button", { key: '691e4a97f2804666db5e32236619196d616227f7', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (h("div", { key: '80233723131262f516574a4dd2bb125970f7aeea', class: "camera-selector-dropdown" }, h("div", { key: 'c9284a77cd9f2d3e600924c9e5f38614f3d06dc4', class: "camera-selector-header" }, h("span", { key: '92a495d2b605a73a067791442a8c8617706d96bf' }, "Seleccionar C\u00E1mara"), h("button", { key: 'dc06382c154443ea9928740d53546dc2ab3ce662', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: 'b520d0940ef51dc1a46641adaf834e105a16c964', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`, camera.hasAutofocus && (h("span", { class: "autofocus-icon", title: "Autofoco disponible" }, "\u29BF"))), cameraInfo.selectedCameraId === camera.id && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: '7df8908982af0142d5c02d9b09827f44e697cbb5', class: "device-info" }, h("small", { key: '5669aa375b7aa6cd98d36e5a77eb217e549a5d4d' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '40ed9bde6c2a0afadd8b949ce0cba59344b09379', class: "manual-capture-section" }, h("button", { key: 'f394d0a578888782a0a569e721f06bb642ebfbd4', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-front' && (h("span", { key: 'ec5ee370a578705ccc3a562763c906701a1e4da4', class: "button-spinner" })), "Capturar Frente"))))), captureState.isCapturing && (h("div", { key: '60520ec5cdd2632ac9cd645a5d8d820298b7388b', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: 'af3647bc1dd4e58630bf06bae37d7e5cd522c900', class: "flip-animation" }, h("div", { key: 'e974ee4fc12ebdef1cdcef288951abb0b98b368a', class: "id-card-icon" }), h("div", { key: 'd80764bf0e01069d4fa1367b250215024c8e41ee', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '07956e4e03dee2ebe64d5eeb1d0c6559dbd8c944', class: "success-animation" }, h("div", { key: 'd8cb39f4f7ad3adc9c16b2226b75d14b788636f6', class: "check-icon" }), h("div", { key: '9e3ddbac4946cd585de7c406d55915f532a390ed', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: 'b1ba412c9c4664eda9c024c3fa22e53f11acae4f', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: 'b466904829c87bcb050500c9f24f507a6d42d56d', class: "status-spinner" })), h("div", { key: '3dcfe509f83adf031fadd2fa322a110456e5993b', class: "status-content" }, h("div", { key: '3a6c820251b30c0cbd63538b23872ac1191b5213', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: 'a7c35a8a773d852035a35e77fb99cf475307a5f7', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: 'd581099e2e1aedc1aea88a4c26af59a118042070', class: "performance-monitor" }, h("div", { key: '18bf5ba4feb6515a454d0769fe8eb02fd37ef167', class: "performance-expanded" }, h("div", { key: '7765f916c26556046b8326befc796f9188aeca3f', class: "metrics-row" }, h("div", { key: '9533109a7a762a7d8a95f12f45dddb6833fa7326', class: "metric-compact" }, h("span", { key: 'c236d06e692694a58519e86f133f39a5184a485f', class: "metric-label" }, "FPS"), h("span", { key: '4a7b53c89c4822dc03c6683f6d6895f96458b95d', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: 'd362ceb5edf7585fc7c05da7367a6affee83b942', class: "metric-compact" }, h("span", { key: '08779e8da11b1593f7d91b409b36184ed405dee6', class: "metric-label" }, "MEM"), h("span", { key: '64c15bcbaeca6760e578e4ff9386583938c0be87', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: '1ef4f7a5aaae9ed9131bd45c7a4c227ad6419d93', class: "metrics-row" }, h("div", { key: 'c5d5ab2a81f7c8f5145253ece37e43981c68ccb8', class: "metric-compact" }, h("span", { key: '7ba45cae45b336c52adf1eb4588851be20475f4e', class: "metric-label" }, "INF"), h("span", { key: '1341edaafa1de81b304605378a8b1262f2f8a084', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: '4c6edc10f88b776825a5a07643864fef4295c295', class: "metric-compact" }, h("span", { key: '7d58a7250a133b84f001a5313dce606fcd9eda82', class: "metric-label" }, "FRAME"), h("span", { key: 'de6a8e8475cd893546b939d5e3a7045a9d7df6dc', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: 'a26794337b9fd17fc9bc6718461c5251b57c1949', class: "metrics-row" }, h("div", { key: 'd790ac359b04532a5e7aa44e2a2952522c1ceb64', class: "metric-compact" }, h("span", { key: '581c72f166de867bbbfe3bb654cdf89e94cfc27b', class: "metric-label" }, "DET"), h("span", { key: '8d478a6d5e84151504e2dd136e2b1ff1e26e0853', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: 'bb7f6dad291a79b5f683e51e07558ca73c22ad98', class: "metric-compact" }, h("span", { key: '1d2626fb63026ce3eb9d0696501b08c0ddf4be09', class: "metric-label" }, "RATE"), h("span", { key: '8f8a67276ad40ce3fe9acab86c2a807f426d2a23', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: 'a9ae57be92d04f8d5d7eae801c0a0ae7c548f770', class: "watermark" }, h("img", { key: 'c9cd4510dfff2265e3ae5d213845e7b5d8f9a343', src: "https://static.jaak.ai/commons/powered-by-jaak.png", alt: "Powered by Jaak", onError: (e) => {
|
|
20303
20236
|
const img = e.target;
|
|
20304
20237
|
img.onerror = null;
|
|
20305
20238
|
img.src = POWERED_BY_JAAK_FALLBACK;
|
|
@@ -20847,7 +20780,7 @@ const JaakStamps = class {
|
|
|
20847
20780
|
await this.tracingService.flush();
|
|
20848
20781
|
}
|
|
20849
20782
|
catch (error) {
|
|
20850
|
-
console.error('[
|
|
20783
|
+
console.error('[my-component] Failed to flush traces:', error);
|
|
20851
20784
|
}
|
|
20852
20785
|
}
|
|
20853
20786
|
this.captureCompleted.emit(finalImages);
|
|
@@ -21120,12 +21053,8 @@ const JaakStamps = class {
|
|
|
21120
21053
|
// If pool is full, let the canvas be garbage collected
|
|
21121
21054
|
}
|
|
21122
21055
|
static get assetsDirs() { return ["../../assets"]; }
|
|
21123
|
-
static get watchers() { return {
|
|
21124
|
-
"license": ["onLicenseChanged"],
|
|
21125
|
-
"licenseEnvironment": ["onLicenseEnvironmentChanged"]
|
|
21126
|
-
}; }
|
|
21127
21056
|
};
|
|
21128
|
-
JaakStamps.style =
|
|
21057
|
+
JaakStamps.style = myComponentCss;
|
|
21129
21058
|
|
|
21130
21059
|
export { JaakStamps as jaak_stamps };
|
|
21131
21060
|
//# sourceMappingURL=jaak-stamps.entry.js.map
|