@primestyleai/tryon 5.8.47 → 5.8.49

package/dist/react/index.js

@@ -7759,6 +7759,37 @@ function FaceOverlay({
     ] }, key))
   ] });
 }
+function AccessoryStageCycler({
+  category,
+  sizingDone,
+  t
+}) {
+  const stages = category === "head" ? [
+    { title: t("DETECTING HEAD"), desc: t("Reading head landmarks from your photo.") },
+    { title: t("MAPPING CIRCUMFERENCE"), desc: t("Estimating head width and depth.") },
+    { title: t("MATCHING HAT SIZE"), desc: t("Comparing your circumference to the size chart.") },
+    { title: t("FINALIZING RESULT"), desc: t("Almost done — preparing your recommendation.") }
+  ] : [
+    { title: t("DETECTING FACE"), desc: t("Identifying 478 face landmarks in your photo.") },
+    { title: t("CALIBRATING SCALE"), desc: t("Using iris size as the pixel-to-mm anchor.") },
+    { title: t("MEASURING FRAME"), desc: t("Mapping bridge, lens width and temple length.") },
+    { title: t("MATCHING FRAME SIZE"), desc: t("Comparing your measurements to the size chart.") },
+    { title: t("FINALIZING RESULT"), desc: t("Almost done — preparing your recommendation.") }
+  ];
+  const [idx, setIdx] = useState(0);
+  useEffect(() => {
+    if (sizingDone) return;
+    const id = setInterval(() => {
+      setIdx((i) => Math.min(i + 1, stages.length - 1));
+    }, 900);
+    return () => clearInterval(id);
+  }, [sizingDone, stages.length]);
+  const current = stages[idx] ?? stages[0];
+  return /* @__PURE__ */ jsx("div", { className: "ps-msc-stage", style: { alignSelf: "center", marginTop: "auto", marginBottom: "auto" }, children: /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage-slot", children: [
+    /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-title", children: current.title }),
+    /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
+  ] }, idx) });
+}
 function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
   const W = imgWidth;
   const H = imgHeight;
@@ -8922,6 +8953,9 @@ function SizeResultView({
         const isFaceCategory = measurementType === "face" || measurementType === "head";
         const detectionDone = isFaceCategory ? !!faceLandmarks : !!bodyLandmarks;
         const detectLabel = isFaceCategory ? measurementType === "head" ? t("Detecting head") : t("Detecting face") : t("Detecting body pose");
+        if (isFaceCategory) {
+          return /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-right-col", style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(AccessoryStageCycler, { category: measurementType, sizingDone, t }) });
+        }
         return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-right-col ps-tryon-snap-steps", children: [
           /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${detectionDone ? " ps-done" : " ps-active"}`, children: [
             /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: detectionDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
@@ -12871,6 +12905,21 @@ function AccessorySizeView({
                 /* @__PURE__ */ jsx("span", { style: { color: "#3267c3", fontSize: "0.65vw", fontWeight: 600 }, children: t("Quick Tip") })
               ] }),
               /* @__PURE__ */ jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.6 }, children: isCloseUp ? t("A clear, well-lit face photo gives the most accurate fit for eyewear and headwear.") : t("The simpler your photo is, the more accurate your virtual try-on results will be.") })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: {
+              background: "rgba(33, 84, 239, 0.04)",
+              border: "1px solid rgba(33, 84, 239, 0.16)",
+              borderRadius: "0.5vw",
+              padding: "0.6vw 0.8vw",
+              display: "flex",
+              flexDirection: "column",
+              gap: "0.3vw"
+            }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.35vw" }, children: [
+                /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "0.75vw", height: "0.75vw", fill: "none", stroke: "#2154ef", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }),
+                /* @__PURE__ */ jsx("span", { style: { color: "#2154ef", fontSize: "0.62vw", fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase" }, children: t("Legal Notice") })
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-secondary)", lineHeight: 1.55 }, children: t("Your image will be used to generate a virtual try-on preview showing how selected items may look and fit. Images are processed securely and are not stored after generation.") })
             ] })
           ] })
         ] }),
@@ -13611,6 +13660,7 @@ function PrimeStyleTryonInner({
         category: measurementType,
         ...Object.keys(faceMm).length > 0 && { faceMeasurementsMm: faceMm, irisConfidence: 1 }
       };
+      const minVisible = new Promise((r) => setTimeout(r, 3200));
       try {
         const resp = await fetch(`${baseUrl}/api/v1/sizing/face-recommend`, {
           method: "POST",
@@ -13619,17 +13669,20 @@ function PrimeStyleTryonInner({
         });
         if (resp.ok) {
           const data = await resp.json();
+          await minVisible;
           setSizingResult(data);
           onComplete?.(data);
         } else {
           const body = await resp.text().catch(() => "");
           console.error("[PS-SDK] face-recommend failed:", resp.status, body);
+          await minVisible;
           setErrorMessage(t("Unable to get size recommendation. Please try again."));
           setView("error");
           setEstimationDone(true);
         }
       } catch (err) {
         console.error("[PS-SDK] face-recommend network error:", err);
+        await minVisible;
         setErrorMessage(t("Unable to connect to sizing service. Please try again."));
         setView("error");
         setEstimationDone(true);
@@ -13824,6 +13877,7 @@ function PrimeStyleTryonInner({
     const measurementType = detectMeasurementType(productTitle);
     if (measurementType === "face" || measurementType === "head") {
       setFaceLandmarks(null);
+      const minVisible = new Promise((r) => setTimeout(r, 3200));
       try {
         const faceResult = await detectFaceMeasurements(objUrl);
         if (faceResult) setFaceLandmarks(faceResult.landmarks);
@@ -13846,6 +13900,7 @@ function PrimeStyleTryonInner({
         });
         if (recRes.ok) {
           const recData = await recRes.json();
+          await minVisible;
           setSizingResult(recData);
           onComplete?.(recData);
           persistResultToProfile(
@@ -13861,10 +13916,12 @@ function PrimeStyleTryonInner({
             recData
           );
         } else {
+          await minVisible;
           setEstimationDone(true);
         }
       } catch (err) {
         console.error("[ps-sdk] face-recommend failed:", err);
+        await minVisible;
         setEstimationDone(true);
       }
       setSizingLoading(false);

package/dist/storefront/primestyle-tryon.js

@@ -17183,6 +17183,37 @@ function FaceOverlay({
     ] }, key))
   ] });
 }
+function AccessoryStageCycler({
+  category,
+  sizingDone,
+  t: t2
+}) {
+  const stages = category === "head" ? [
+    { title: t2("DETECTING HEAD"), desc: t2("Reading head landmarks from your photo.") },
+    { title: t2("MAPPING CIRCUMFERENCE"), desc: t2("Estimating head width and depth.") },
+    { title: t2("MATCHING HAT SIZE"), desc: t2("Comparing your circumference to the size chart.") },
+    { title: t2("FINALIZING RESULT"), desc: t2("Almost done — preparing your recommendation.") }
+  ] : [
+    { title: t2("DETECTING FACE"), desc: t2("Identifying 478 face landmarks in your photo.") },
+    { title: t2("CALIBRATING SCALE"), desc: t2("Using iris size as the pixel-to-mm anchor.") },
+    { title: t2("MEASURING FRAME"), desc: t2("Mapping bridge, lens width and temple length.") },
+    { title: t2("MATCHING FRAME SIZE"), desc: t2("Comparing your measurements to the size chart.") },
+    { title: t2("FINALIZING RESULT"), desc: t2("Almost done — preparing your recommendation.") }
+  ];
+  const [idx, setIdx] = reactExports.useState(0);
+  reactExports.useEffect(() => {
+    if (sizingDone) return;
+    const id2 = setInterval(() => {
+      setIdx((i) => Math.min(i + 1, stages.length - 1));
+    }, 900);
+    return () => clearInterval(id2);
+  }, [sizingDone, stages.length]);
+  const current = stages[idx] ?? stages[0];
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage", style: { alignSelf: "center", marginTop: "auto", marginBottom: "auto" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage-slot", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-title", children: current.title }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
+  ] }, idx) });
+}
 function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
   const W2 = imgWidth;
   const H2 = imgHeight;
@@ -18346,6 +18377,9 @@ function SizeResultView({
         const isFaceCategory = measurementType === "face" || measurementType === "head";
         const detectionDone = isFaceCategory ? !!faceLandmarks : !!bodyLandmarks;
         const detectLabel = isFaceCategory ? measurementType === "head" ? t2("Detecting head") : t2("Detecting face") : t2("Detecting body pose");
+        if (isFaceCategory) {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-right-col", style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(AccessoryStageCycler, { category: measurementType, sizingDone, t: t2 }) });
+        }
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-right-col ps-tryon-snap-steps", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${detectionDone ? " ps-done" : " ps-active"}`, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: detectionDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
@@ -22295,6 +22329,21 @@ function AccessorySizeView({
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#3267c3", fontSize: "0.65vw", fontWeight: 600 }, children: t2("Quick Tip") })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.6 }, children: isCloseUp ? t2("A clear, well-lit face photo gives the most accurate fit for eyewear and headwear.") : t2("The simpler your photo is, the more accurate your virtual try-on results will be.") })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+              background: "rgba(33, 84, 239, 0.04)",
+              border: "1px solid rgba(33, 84, 239, 0.16)",
+              borderRadius: "0.5vw",
+              padding: "0.6vw 0.8vw",
+              display: "flex",
+              flexDirection: "column",
+              gap: "0.3vw"
+            }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.35vw" }, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", width: "0.75vw", height: "0.75vw", fill: "none", stroke: "#2154ef", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#2154ef", fontSize: "0.62vw", fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase" }, children: t2("Legal Notice") })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-secondary)", lineHeight: 1.55 }, children: t2("Your image will be used to generate a virtual try-on preview showing how selected items may look and fit. Images are processed securely and are not stored after generation.") })
             ] })
           ] })
         ] }),
@@ -23035,6 +23084,7 @@ function PrimeStyleTryonInner({
         category: measurementType,
         ...Object.keys(faceMm).length > 0 && { faceMeasurementsMm: faceMm, irisConfidence: 1 }
       };
+      const minVisible = new Promise((r2) => setTimeout(r2, 3200));
       try {
         const resp = await fetch(`${baseUrl}/api/v1/sizing/face-recommend`, {
           method: "POST",
@@ -23043,17 +23093,20 @@ function PrimeStyleTryonInner({
         });
         if (resp.ok) {
           const data = await resp.json();
+          await minVisible;
           setSizingResult(data);
           onComplete?.(data);
         } else {
           const body = await resp.text().catch(() => "");
           console.error("[PS-SDK] face-recommend failed:", resp.status, body);
+          await minVisible;
           setErrorMessage(t2("Unable to get size recommendation. Please try again."));
           setView("error");
           setEstimationDone(true);
         }
       } catch (err) {
         console.error("[PS-SDK] face-recommend network error:", err);
+        await minVisible;
         setErrorMessage(t2("Unable to connect to sizing service. Please try again."));
         setView("error");
         setEstimationDone(true);
@@ -23248,6 +23301,7 @@ function PrimeStyleTryonInner({
     const measurementType = detectMeasurementType(productTitle);
     if (measurementType === "face" || measurementType === "head") {
       setFaceLandmarks(null);
+      const minVisible = new Promise((r2) => setTimeout(r2, 3200));
       try {
         const faceResult = await detectFaceMeasurements(objUrl);
         if (faceResult) setFaceLandmarks(faceResult.landmarks);
@@ -23270,6 +23324,7 @@ function PrimeStyleTryonInner({
         });
         if (recRes.ok) {
           const recData = await recRes.json();
+          await minVisible;
           setSizingResult(recData);
           onComplete?.(recData);
           persistResultToProfile(
@@ -23285,10 +23340,12 @@ function PrimeStyleTryonInner({
             recData
           );
         } else {
+          await minVisible;
           setEstimationDone(true);
         }
       } catch (err) {
         console.error("[ps-sdk] face-recommend failed:", err);
+        await minVisible;
         setEstimationDone(true);
       }
       setSizingLoading(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "5.8.47",
+  "version": "5.8.49",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",