@primestyleai/tryon 5.8.47 → 5.8.48

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" } }) }),
@@ -13611,6 +13645,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 +13654,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 +13862,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 +13885,7 @@ function PrimeStyleTryonInner({
         });
         if (recRes.ok) {
           const recData = await recRes.json();
+          await minVisible;
           setSizingResult(recData);
           onComplete?.(recData);
           persistResultToProfile(
@@ -13861,10 +13901,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" } }) }),
@@ -23035,6 +23069,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 +23078,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 +23286,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 +23309,7 @@ function PrimeStyleTryonInner({
         });
         if (recRes.ok) {
           const recData = await recRes.json();
+          await minVisible;
           setSizingResult(recData);
           onComplete?.(recData);
           persistResultToProfile(
@@ -23285,10 +23325,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.48",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",