@primestyleai/tryon 5.8.52 → 5.8.54

package/dist/react/index.js

@@ -7760,36 +7760,57 @@ function FaceOverlay({
     ] }, key))
   ] });
 }
-function AccessoryStageCycler({
+function StageCycler({
   category,
   sizingDone,
+  tryOnProcessing,
+  tryOnDone,
   t
 }) {
-  const stages = category === "head" ? [
+  const sizingStages = 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.") }
-  ] : [
+  ] : category === "face" ? [
     { 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.") }
+  ] : [
+    // Body + foot fall through here — broadest set of stages so long
+    // Gemini estimates still have fresh text to cycle through.
+    { title: t("DETECTING POSE"), desc: t("Identifying body landmarks from your photo.") },
+    { title: t("SCANNING FRAME"), desc: t("Our AI is mapping your proportions.") },
+    { title: t("ANALYZING BODY"), desc: t("Measuring shoulders, chest, waist and hips.") },
+    { title: t("MATCHING SIZE"), desc: t("Comparing your measurements to the size guide.") },
+    { title: t("FINALIZING RESULT"), desc: t("Almost done — preparing your recommendation.") }
+  ];
+  const tryOnStages = [
+    { title: t("GENERATING TRY-ON"), desc: t("Rendering the garment on your photo.") },
+    { title: t("REFINING DETAILS"), desc: t("Fine-tuning fit, drape and shadows.") },
+    { title: t("ALMOST THERE"), desc: t("Final compositing in progress.") },
+    { title: t("FINISHING TOUCHES"), desc: t("Polishing the result.") }
   ];
+  const active = tryOnProcessing ? tryOnStages : sizingStages;
+  const isDone = tryOnProcessing ? !!tryOnDone : sizingDone;
   const [idx, setIdx] = useState(0);
   useEffect(() => {
-    if (sizingDone) return;
+    setIdx(0);
+  }, [tryOnProcessing]);
+  useEffect(() => {
+    if (isDone) return;
     const id = setInterval(() => {
-      setIdx((i) => Math.min(i + 1, stages.length - 1));
+      setIdx((i) => Math.min(i + 1, active.length - 1));
     }, 900);
     return () => clearInterval(id);
-  }, [sizingDone, stages.length]);
-  const current = stages[idx] ?? stages[0];
+  }, [isDone, active.length]);
+  const current = active[idx] ?? active[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) });
+  ] }, `${tryOnProcessing ? "t" : "s"}-${idx}`) });
 }
 function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
   const W = imgWidth;
@@ -8343,7 +8364,10 @@ function SectionDetailView({
             borderRadius: "8px",
             padding: "4px 12px"
           }, children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size", children: displaySizeLabel }),
+            /* @__PURE__ */ jsxs("span", { className: "ps-msd-card-size", children: [
+              displaySizeLabel,
+              !selectedCountry && finalDisplayLength ? ` / ${finalDisplayLength}` : ""
+            ] }),
             finalDisplayLength && /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size-meta", children: finalDisplayLength }),
             selectedCountry && isRecommended && /* @__PURE__ */ jsxs("span", { className: "ps-msd-card-size-meta", style: { fontSize: "11px", opacity: 0.7 }, children: [
               "(",
@@ -8776,7 +8800,6 @@ function SizeResultView({
   const [poseLines, setPoseLines] = useState(null);
   const [poseReady, setPoseReady] = useState(false);
   const [imgDims, setImgDims] = useState({ w: 800, h: 1200 });
-  const analyzingDone = estimationDone;
   const handleImgLoad = useCallback((e) => {
     const el = e.currentTarget;
     if (el.naturalWidth && el.naturalHeight) {
@@ -8958,31 +8981,17 @@ 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" } }) }),
-            /* @__PURE__ */ jsx("span", { children: detectLabel })
-          ] }),
-          !sizingDone && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-done" : detectionDone ? " ps-active" : ""}`, children: [
-              /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: !detectionDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "2" }) : !analyzingDone ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) : /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) }),
-              /* @__PURE__ */ jsx("span", { children: t("Analyzing your size") })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-active" : ""}`, children: [
-              /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: !analyzingDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "3" }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-              /* @__PURE__ */ jsx("span", { children: t("Finding best fit for you") })
-            ] })
-          ] }),
-          tryOnProcessing && /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${tryOnDone ? " ps-done" : " ps-active"}`, children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: tryOnDone ? /* @__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" } }) }),
-            /* @__PURE__ */ jsx("span", { children: t("Generating virtual try-on") })
-          ] })
-        ] });
+        isFaceCategory ? measurementType === "head" ? t("Detecting head") : t("Detecting face") : t("Detecting body pose");
+        return /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-right-col", style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+          StageCycler,
+          {
+            category: isFaceCategory ? measurementType : "body",
+            sizingDone,
+            tryOnProcessing,
+            tryOnDone,
+            t
+          }
+        ) });
       })()
     ] }),
     (allDone || sizingResult && !isSnapProcessing) && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -13463,6 +13472,21 @@ function PrimeStyleTryonInner({
       setPreviewUrl(null);
       setBodyLandmarks(null);
     }
+    const profilePhoto = p.photoBase64;
+    if (profilePhoto) {
+      try {
+        const dataUrl = profilePhoto.startsWith("data:") ? profilePhoto : `data:image/jpeg;base64,${profilePhoto}`;
+        fetch(dataUrl).then((r) => r.blob()).then((blob) => {
+          const file = new File([blob], "profile-photo.jpg", { type: blob.type || "image/jpeg" });
+          setSelectedFile(file);
+          selectedFileRef.current = file;
+          if (previewUrl) URL.revokeObjectURL(previewUrl);
+          setPreviewUrl(URL.createObjectURL(file));
+        }).catch(() => {
+        });
+      } catch {
+      }
+    }
     setView("size-result");
     recommendForProduct({
       productId: effectiveProductId,

package/dist/storefront/primestyle-tryon.js

@@ -17184,36 +17184,57 @@ function FaceOverlay({
     ] }, key))
   ] });
 }
-function AccessoryStageCycler({
+function StageCycler({
   category,
   sizingDone,
+  tryOnProcessing,
+  tryOnDone,
   t: t2
 }) {
-  const stages = category === "head" ? [
+  const sizingStages = 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.") }
-  ] : [
+  ] : category === "face" ? [
     { 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.") }
+  ] : [
+    // Body + foot fall through here — broadest set of stages so long
+    // Gemini estimates still have fresh text to cycle through.
+    { title: t2("DETECTING POSE"), desc: t2("Identifying body landmarks from your photo.") },
+    { title: t2("SCANNING FRAME"), desc: t2("Our AI is mapping your proportions.") },
+    { title: t2("ANALYZING BODY"), desc: t2("Measuring shoulders, chest, waist and hips.") },
+    { title: t2("MATCHING SIZE"), desc: t2("Comparing your measurements to the size guide.") },
+    { title: t2("FINALIZING RESULT"), desc: t2("Almost done — preparing your recommendation.") }
+  ];
+  const tryOnStages = [
+    { title: t2("GENERATING TRY-ON"), desc: t2("Rendering the garment on your photo.") },
+    { title: t2("REFINING DETAILS"), desc: t2("Fine-tuning fit, drape and shadows.") },
+    { title: t2("ALMOST THERE"), desc: t2("Final compositing in progress.") },
+    { title: t2("FINISHING TOUCHES"), desc: t2("Polishing the result.") }
   ];
+  const active = tryOnProcessing ? tryOnStages : sizingStages;
+  const isDone = tryOnProcessing ? !!tryOnDone : sizingDone;
   const [idx, setIdx] = reactExports.useState(0);
   reactExports.useEffect(() => {
-    if (sizingDone) return;
+    setIdx(0);
+  }, [tryOnProcessing]);
+  reactExports.useEffect(() => {
+    if (isDone) return;
     const id2 = setInterval(() => {
-      setIdx((i) => Math.min(i + 1, stages.length - 1));
+      setIdx((i) => Math.min(i + 1, active.length - 1));
     }, 900);
     return () => clearInterval(id2);
-  }, [sizingDone, stages.length]);
-  const current = stages[idx] ?? stages[0];
+  }, [isDone, active.length]);
+  const current = active[idx] ?? active[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) });
+  ] }, `${tryOnProcessing ? "t" : "s"}-${idx}`) });
 }
 function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
   const W2 = imgWidth;
@@ -17767,7 +17788,10 @@ function SectionDetailView({
             borderRadius: "8px",
             padding: "4px 12px"
           }, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-card-size", children: displaySizeLabel }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-msd-card-size", children: [
+              displaySizeLabel,
+              !selectedCountry && finalDisplayLength ? ` / ${finalDisplayLength}` : ""
+            ] }),
             finalDisplayLength && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-card-size-meta", children: finalDisplayLength }),
             selectedCountry && isRecommended && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-msd-card-size-meta", style: { fontSize: "11px", opacity: 0.7 }, children: [
               "(",
@@ -18200,7 +18224,6 @@ function SizeResultView({
   const [poseLines, setPoseLines] = reactExports.useState(null);
   const [poseReady, setPoseReady] = reactExports.useState(false);
   const [imgDims, setImgDims] = reactExports.useState({ w: 800, h: 1200 });
-  const analyzingDone = estimationDone;
   const handleImgLoad = reactExports.useCallback((e) => {
     const el2 = e.currentTarget;
     if (el2.naturalWidth && el2.naturalHeight) {
@@ -18382,31 +18405,17 @@ 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" } }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: detectLabel })
-          ] }),
-          !sizingDone && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-done" : detectionDone ? " ps-active" : ""}`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: !detectionDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-num", children: "2" }) : !analyzingDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Analyzing your size") })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-active" : ""}`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: !analyzingDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-num", children: "3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Finding best fit for you") })
-            ] })
-          ] }),
-          tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${tryOnDone ? " ps-done" : " ps-active"}`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: tryOnDone ? /* @__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" } }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Generating virtual try-on") })
-          ] })
-        ] });
+        isFaceCategory ? measurementType === "head" ? t2("Detecting head") : t2("Detecting face") : t2("Detecting body pose");
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-right-col", style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          StageCycler,
+          {
+            category: isFaceCategory ? measurementType : "body",
+            sizingDone,
+            tryOnProcessing,
+            tryOnDone,
+            t: t2
+          }
+        ) });
       })()
     ] }),
     (allDone || sizingResult && !isSnapProcessing) && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -22887,6 +22896,21 @@ function PrimeStyleTryonInner({
       setPreviewUrl(null);
       setBodyLandmarks(null);
     }
+    const profilePhoto = p2.photoBase64;
+    if (profilePhoto) {
+      try {
+        const dataUrl = profilePhoto.startsWith("data:") ? profilePhoto : `data:image/jpeg;base64,${profilePhoto}`;
+        fetch(dataUrl).then((r2) => r2.blob()).then((blob) => {
+          const file = new File([blob], "profile-photo.jpg", { type: blob.type || "image/jpeg" });
+          setSelectedFile(file);
+          selectedFileRef.current = file;
+          if (previewUrl) URL.revokeObjectURL(previewUrl);
+          setPreviewUrl(URL.createObjectURL(file));
+        }).catch(() => {
+        });
+      } catch {
+      }
+    }
     setView("size-result");
     recommendForProduct({
       productId: effectiveProductId,

package/package.json

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