smartcomply-web-sdk 1.0.33 → 1.0.35

package/dist/smartcomply.browser.js

@@ -5178,7 +5178,7 @@ var SmartComplySDK = (() => {
           let attempts = 0;
           let stableFrames = 0;
           let missedFrames = 0;
-          const STABLE_REQUIRED = 2;
+          const STABLE_REQUIRED = 4;
           const MISS_TOLERANCE = 2;
           const MAX_WAIT_MS = 8e3;
           const startTime = performance.now();
@@ -5210,7 +5210,7 @@ var SmartComplySDK = (() => {
           requestAnimationFrame(checkFace);
         });
         ui2.updateInstruction("Hold still...");
-        await new Promise((r2) => setTimeout(r2, 150));
+        await new Promise((r2) => setTimeout(r2, 500));
         const autoshotBlob = await this.captureFrame(videoForDetection);
         tempVideo.pause();
         if (!autoshotBlob || autoshotBlob.size === 0) {
@@ -5352,10 +5352,16 @@ var SmartComplySDK = (() => {
      * Capture a single sharp frame from a video element as a JPEG Blob.
      * Retries up to maxAttempts times (300 ms apart) if the Laplacian blur
      * score is below threshold, then falls back to the best frame captured.
+     *
+     * Threshold calibration:
+     *   The server rejects images with OpenCV Laplacian variance < 80.
+     *   This SDK uses sum-of-squared Laplacian (different normalisation) —
+     *   empirically ~100 here corresponds to ~80 server-side. We aim for 120
+     *   to give a comfortable safety margin.
      */
-    async captureFrame(video, maxAttempts = 3) {
-      const MIN_BLUR_SCORE = 45;
-      const RETRY_DELAY_MS2 = 100;
+    async captureFrame(video, maxAttempts = 5) {
+      const MIN_BLUR_SCORE = 120;
+      const RETRY_DELAY_MS2 = 200;
       let bestBlob = null;
       let bestScore = -1;
       for (let attempt = 0; attempt < maxAttempts; attempt++) {
@@ -5382,8 +5388,13 @@ var SmartComplySDK = (() => {
       throw new Error("Failed to capture frame");
     }
     /**
-     * Laplacian variance blur metric on a centre-cropped region (320×240 max).
-     * Higher score = sharper image.  Score < 80 is considered blurry.
+     * Sum-of-squared Laplacian blur metric on a centre-cropped region (320×240 max).
+     * Higher score = sharper image.
+     *
+     * NOTE: This is sum-of-squares, NOT Laplacian variance (which OpenCV uses).
+     * The two scales differ — empirically, a score of ~120 here corresponds to
+     * ~80 on the server side (OpenCV cv2.Laplacian().var()). Keep MIN_BLUR_SCORE
+     * in captureFrame() calibrated against this.
      */
     _computeBlurScore(canvas) {
       const ctx = canvas.getContext("2d");
@@ -5651,126 +5662,128 @@ var SmartComplySDK = (() => {
     }
     renderChoiceScreen(container, theme, documentType) {
       this.root = document.createElement("div");
-      this.root.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px 20px;max-width:100%;";
+      this.root.style.cssText = `
+      display:flex;flex-direction:column;gap:0;padding:0;width:100%;
+      font-family:system-ui,-apple-system,sans-serif;
+    `;
       const docLabel = this.getDocumentLabel(documentType);
       const requiresBack = this.shouldCaptureBackSide(documentType);
       const isCapturingFront = this.currentSide === "front";
-      const header = document.createElement("div");
-      header.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;";
-      const iconContainer = document.createElement("div");
-      iconContainer.style.cssText = `
-      width:120px;height:120px;border-radius:24px;
+      const sideLabel = requiresBack ? isCapturingFront ? " \u2014 Front side" : " \u2014 Back side" : "";
+      const headerRow = document.createElement("div");
+      headerRow.style.cssText = `
+      display:flex;align-items:center;gap:14px;
+      padding:16px 20px 14px;
+    `;
+      const iconBox = document.createElement("div");
+      iconBox.style.cssText = `
+      width:48px;height:48px;border-radius:14px;flex-shrink:0;
       display:flex;align-items:center;justify-content:center;
-      background:linear-gradient(135deg, ${theme.primary}15, ${theme.primary}05);
-      border:3px solid ${theme.primary}30;
-      position:relative;overflow:hidden;
-      box-shadow:0 8px 32px ${theme.primary}20;
+      font-size:24px;
+      background:${theme.primary}15;
+      border:1.5px solid ${theme.primary}30;
     `;
-      const icon = document.createElement("div");
-      icon.style.cssText = "font-size:48px;animation:float 3s ease-in-out infinite;";
-      icon.textContent = "\u{1FAAA}";
-      iconContainer.appendChild(icon);
-      if (!document.head.querySelector("style[data-float-animation]")) {
-        const style2 = document.createElement("style");
-        style2.setAttribute("data-float-animation", "true");
-        style2.textContent = `
-        @keyframes float {
-          0%, 100% { transform: translateY(0px); }
-          50% { transform: translateY(-10px); }
-        }
-      `;
-        document.head.appendChild(style2);
-      }
-      header.appendChild(iconContainer);
-      const title = document.createElement("div");
-      title.style.cssText = `color:${theme.text};font-size:20px;font-weight:700;text-align:center;line-height:1.4;`;
-      let labelText = `Capture your ${docLabel}`;
-      if (requiresBack) {
-        labelText += ` (${isCapturingFront ? "Front Side" : "Back Side"})`;
-      }
-      title.textContent = labelText;
-      header.appendChild(title);
-      const subtitle = document.createElement("div");
-      subtitle.style.cssText = `color:${theme.textSecondary};font-size:14px;text-align:center;line-height:1.5;max-width:280px;`;
-      subtitle.textContent = "Choose how you'd like to provide your document";
-      header.appendChild(subtitle);
-      this.root.appendChild(header);
-      if (requiresBack) {
-        const progress = document.createElement("div");
-        progress.style.cssText = `
-        display:flex;flex-direction:column;align-items:center;gap:12px;
-        padding:16px 20px;background:${theme.primary}08;border-radius:16px;
-        border:1px solid ${theme.primary}20;width:100%;max-width:320px;
-      `;
-        progress.innerHTML = `
-        <div style="display:flex;gap:8px;align-items:center;">
-          <div style="width:12px;height:12px;border-radius:50%;background:${isCapturingFront ? theme.primary : theme.border};transition:all 0.3s ease;"></div>
-          <div style="width:32px;height:2px;background:${theme.border};border-radius:1px;"></div>
-          <div style="width:12px;height:12px;border-radius:50%;background:${!isCapturingFront ? theme.primary : theme.border};transition:all 0.3s ease;"></div>
-        </div>
-        <span style="color:${theme.text};font-size:13px;font-weight:600;">${isCapturingFront ? "Step 1 of 2" : "Step 2 of 2"}</span>
-      `;
-        this.root.appendChild(progress);
-      }
-      const actionsContainer = document.createElement("div");
-      actionsContainer.style.cssText = "display:flex;flex-direction:column;gap:16px;width:100%;max-width:320px;";
-      const cameraBtn = this.createEnhancedButton(
-        "\u{1F4F7}  Take Photo with Camera",
-        theme,
-        true,
-        "Open camera to capture document"
-      );
+      iconBox.textContent = this._docIcon(documentType);
+      const titleBlock = document.createElement("div");
+      const titleEl = document.createElement("div");
+      titleEl.style.cssText = `color:${theme.text};font-size:16px;font-weight:700;line-height:1.3;`;
+      titleEl.textContent = `Capture your ${docLabel}`;
+      const subEl = document.createElement("div");
+      subEl.style.cssText = `color:${theme.textSecondary};font-size:12px;margin-top:2px;`;
+      subEl.textContent = requiresBack ? isCapturingFront ? "Step 1 of 2 \u2014 front side" : "Step 2 of 2 \u2014 back side" : "Choose how to provide your document";
+      titleBlock.appendChild(titleEl);
+      titleBlock.appendChild(subEl);
+      headerRow.appendChild(iconBox);
+      headerRow.appendChild(titleBlock);
+      this.root.appendChild(headerRow);
+      const btnRow = document.createElement("div");
+      btnRow.style.cssText = `
+      display:grid;grid-template-columns:1fr 1fr;gap:10px;
+      padding:0 20px 14px;
+    `;
+      const cameraBtn = document.createElement("button");
+      cameraBtn.style.cssText = `
+      display:flex;flex-direction:column;align-items:center;justify-content:center;
+      gap:8px;padding:16px 12px;
+      background:${theme.primary};color:#fff;
+      border:none;border-radius:14px;cursor:pointer;
+      font-size:13px;font-weight:600;font-family:inherit;
+      transition:all 0.15s ease;min-height:80px;
+      box-shadow:0 4px 14px ${theme.primary}30;
+    `;
+      cameraBtn.innerHTML = `<span style="font-size:26px;">\u{1F4F7}</span><span>Take Photo</span><span style="font-size:10px;opacity:0.8;font-weight:500;">Use camera</span>`;
+      cameraBtn.addEventListener("mouseenter", () => {
+        cameraBtn.style.opacity = "0.9";
+        cameraBtn.style.transform = "translateY(-1px)";
+      });
+      cameraBtn.addEventListener("mouseleave", () => {
+        cameraBtn.style.opacity = "1";
+        cameraBtn.style.transform = "none";
+      });
       cameraBtn.addEventListener("click", () => {
-        this.showLoadingState("Opening camera...", theme);
         this.root.innerHTML = "";
-        setTimeout(() => {
-          this.renderCameraView(this.root, theme, documentType);
-        }, 500);
+        this.renderCameraView(this.root, theme, documentType);
+      });
+      const uploadBtn = document.createElement("button");
+      uploadBtn.style.cssText = `
+      display:flex;flex-direction:column;align-items:center;justify-content:center;
+      gap:8px;padding:16px 12px;
+      background:${theme.cardBg || theme.inputBg};color:${theme.text};
+      border:2px solid ${theme.border};border-radius:14px;cursor:pointer;
+      font-size:13px;font-weight:600;font-family:inherit;
+      transition:all 0.15s ease;min-height:80px;
+    `;
+      uploadBtn.innerHTML = `<span style="font-size:26px;">\u{1F5BC}\uFE0F</span><span>From Gallery</span><span style="font-size:10px;color:${theme.textMuted || theme.textSecondary};font-weight:500;">Upload file</span>`;
+      uploadBtn.addEventListener("mouseenter", () => {
+        uploadBtn.style.borderColor = theme.primary;
+        uploadBtn.style.transform = "translateY(-1px)";
+      });
+      uploadBtn.addEventListener("mouseleave", () => {
+        uploadBtn.style.borderColor = theme.border;
+        uploadBtn.style.transform = "none";
       });
-      actionsContainer.appendChild(cameraBtn);
-      const uploadBtn = this.createEnhancedButton(
-        "\u{1F4C1}  Choose from Gallery",
-        theme,
-        false,
-        "Upload document image from device"
-      );
       uploadBtn.addEventListener("click", () => {
         this.handleFileUpload(container, theme);
       });
-      actionsContainer.appendChild(uploadBtn);
-      this.root.appendChild(actionsContainer);
+      btnRow.appendChild(cameraBtn);
+      btnRow.appendChild(uploadBtn);
+      this.root.appendChild(btnRow);
       const tips = document.createElement("div");
       tips.style.cssText = `
-      width:100%;padding:16px 20px;border-radius:16px;
-      background:${theme.shimmer};border:1px solid ${theme.border};
-      margin-top:8px;
+      margin:0 20px 16px;padding:12px 14px;
+      background:${theme.shimmer || theme.cardBg};
+      border:1px solid ${theme.border};border-radius:12px;
     `;
-      const tipsTitle = document.createElement("div");
-      tipsTitle.style.cssText = `font-weight:700;color:${theme.text};margin-bottom:12px;font-size:14px;display:flex;align-items:center;gap:8px;`;
-      tipsTitle.innerHTML = `\u{1F4A1} Tips for best results`;
-      tips.appendChild(tipsTitle);
-      const tipsList = document.createElement("div");
-      tipsList.style.cssText = `display:grid;gap:8px;font-size:13px;color:${theme.textSecondary};line-height:1.6;`;
-      tipsList.innerHTML = `
-      <div style="display:flex;gap:8px;align-items:flex-start;">
-        <span style="color:${theme.primary};font-weight:bold;">\u2713</span>
-        <span>Lay document flat on a solid surface</span>
-      </div>
-      <div style="display:flex;gap:8px;align-items:flex-start;">
-        <span style="color:${theme.primary};font-weight:bold;">\u2713</span>
-        <span>Ensure all four corners are visible</span>
-      </div>
-      <div style="display:flex;gap:8px;align-items:flex-start;">
-        <span style="color:${theme.primary};font-weight:bold;">\u2713</span>
-        <span>Use good lighting, avoid glare</span>
-      </div>
-      <div style="display:flex;gap:8px;align-items:flex-start;">
-        <span style="color:${theme.primary};font-weight:bold;">\u2713</span>
-        <span>Make sure all text is clearly readable</span>
-      </div>
+      const tipsGrid = document.createElement("div");
+      tipsGrid.style.cssText = `
+      display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;
     `;
-      tips.appendChild(tipsList);
+      const tipItems = [
+        "Lay document flat",
+        "All 4 corners visible",
+        "Good lighting, no glare",
+        "All text clearly readable"
+      ];
+      tipItems.forEach((t2) => {
+        const row = document.createElement("div");
+        row.style.cssText = `display:flex;align-items:center;gap:5px;font-size:11px;color:${theme.textSecondary};`;
+        row.innerHTML = `<span style="color:${theme.primary};font-weight:700;flex-shrink:0;">\u2713</span><span>${t2}</span>`;
+        tipsGrid.appendChild(row);
+      });
+      tips.appendChild(tipsGrid);
       this.root.appendChild(tips);
+      if (requiresBack && isCapturingFront) {
+        const notice = document.createElement("div");
+        notice.style.cssText = `
+        margin:0 20px 16px;padding:10px 14px;
+        background:${theme.primary}0D;
+        border:1px solid ${theme.primary}25;border-radius:10px;
+        display:flex;align-items:center;gap:8px;
+        font-size:12px;color:${theme.textSecondary};line-height:1.5;
+      `;
+        notice.innerHTML = `<span style="font-size:16px;flex-shrink:0;">\u2139\uFE0F</span><span>You'll capture both the <strong style="color:${theme.text}">front</strong> and <strong style="color:${theme.text}">back</strong> of this document.</span>`;
+        this.root.appendChild(notice);
+      }
       const fileInput = document.createElement("input");
       fileInput.type = "file";
       fileInput.accept = "image/jpeg,image/png";
@@ -5779,18 +5792,26 @@ var SmartComplySDK = (() => {
       fileInput.addEventListener("change", (e2) => {
         const file = e2.target.files?.[0];
         if (file) {
-          const validationError = this.validateFile(file);
-          if (validationError) {
-            this.showError(validationError);
+          const err = this.validateFile(file);
+          if (err) {
+            this.showError(err);
             return;
           }
           this.showLoadingState("Processing image...", theme);
-          this.compressImage(file, 1280, 960, 0.85).then((compressed) => this.handleFileUploadComplete(compressed, container, theme, documentType)).catch(() => this.handleFileUploadComplete(file, container, theme, documentType));
+          this.compressImage(file, 1280, 960, 0.85).then((c2) => this.handleFileUploadComplete(c2, container, theme, documentType)).catch(() => this.handleFileUploadComplete(file, container, theme, documentType));
         }
       });
       this.root.appendChild(fileInput);
       container.appendChild(this.root);
     }
+    /** Returns an appropriate emoji icon for the document type. */
+    _docIcon(documentType) {
+      const t2 = documentType.toLowerCase();
+      if (t2.includes("passport")) return "\u{1F4D8}";
+      if (t2.includes("driver") || t2.includes("licen")) return "\u{1F697}";
+      if (t2.includes("voter") || t2.includes("pvc")) return "\u{1F5F3}\uFE0F";
+      return "\u{1FAAA}";
+    }
     renderCameraView(container, theme, documentType) {
       const wrapper = document.createElement("div");
       wrapper.style.cssText = "position:relative;width:100%;border-radius:12px;overflow:hidden;background:#000;";