@primestyleai/tryon 3.0.0 → 3.1.1

package/dist/react/index.js

@@ -187,11 +187,9 @@ function PrimeStyleTryonInner({
   const [resultImageUrl, setResultImageUrl] = useState(null);
   const [errorMessage, setErrorMessage] = useState(null);
   const [dragOver, setDragOver] = useState(false);
-  const countdownRef = useRef(25);
-  const countdownElRef = useRef(null);
-  const countdownCircleRef = useRef(null);
   const [sizingMethod, setSizingMethod] = useState(null);
   const [sizingResult, setSizingResult] = useState(null);
+  const [sizingLoading, setSizingLoading] = useState(false);
   const [sizeGuide, setSizeGuide] = useState(null);
   const [sizeGuideFetching, setSizeGuideFetching] = useState(false);
   const sizeGuideFetchedRef = useRef(false);
@@ -202,6 +200,7 @@ function PrimeStyleTryonInner({
   const [weightUnit, setWeightUnit] = useState(imperial ? "lbs" : "kg");
   const formRef = useRef({});
   const [formGender, setFormGender] = useState("male");
+  const [formKey, setFormKey] = useState(0);
   const [profiles, setProfiles] = useState(() => lsGet("profiles", []));
   const [history, setHistory] = useState(() => lsGet("history", []));
   const [activeProfileId, setActiveProfileId] = useState(null);
@@ -240,15 +239,33 @@ function PrimeStyleTryonInner({
       if (pollingRef.current) clearInterval(pollingRef.current);
     };
   }, [apiUrl]);
+  const progressRef = useRef(0);
+  const progressBarRef = useRef(null);
+  const progressTextRef = useRef(null);
+  const progressStatusRef = useRef(null);
   useEffect(() => {
     if (view === "processing") {
-      countdownRef.current = 25;
+      progressRef.current = 0;
+      const statuses = [
+        { at: 0, text: "Preparing your image..." },
+        { at: 15, text: "Analyzing body proportions..." },
+        { at: 30, text: "Matching garment to your photo..." },
+        { at: 50, text: "Generating virtual try-on..." },
+        { at: 75, text: "Refining details..." },
+        { at: 90, text: "Almost there..." }
+      ];
       const interval = setInterval(() => {
-        countdownRef.current -= 1;
-        if (countdownElRef.current) countdownElRef.current.textContent = String(Math.max(countdownRef.current, 0));
-        if (countdownCircleRef.current) countdownCircleRef.current.style.strokeDashoffset = `${Math.max(countdownRef.current, 0) / 25 * 326.73}`;
-        if (countdownRef.current <= 0) clearInterval(interval);
-      }, 1e3);
+        const p = progressRef.current;
+        const increment = p < 30 ? 1.2 : p < 60 ? 0.8 : p < 80 ? 0.4 : p < 95 ? 0.15 : 0;
+        progressRef.current = Math.min(p + increment, 95);
+        const val = Math.round(progressRef.current);
+        if (progressBarRef.current) progressBarRef.current.style.width = `${val}%`;
+        if (progressTextRef.current) progressTextRef.current.textContent = `${val}%`;
+        if (progressStatusRef.current) {
+          const status = [...statuses].reverse().find((s) => val >= s.at);
+          if (status) progressStatusRef.current.textContent = status.text;
+        }
+      }, 200);
       return () => clearInterval(interval);
     }
   }, [view]);
@@ -332,6 +349,7 @@ function PrimeStyleTryonInner({
     setErrorMessage(null);
     setSizingMethod(null);
     setSizingResult(null);
+    setSizingLoading(false);
     setSizeGuide(null);
     setProfileSaved(false);
     formRef.current = {};
@@ -385,8 +403,12 @@ function PrimeStyleTryonInner({
       });
       if (!completedRef.current) {
         completedRef.current = true;
+        progressRef.current = 100;
+        if (progressBarRef.current) progressBarRef.current.style.width = "100%";
+        if (progressTextRef.current) progressTextRef.current.textContent = "100%";
+        if (progressStatusRef.current) progressStatusRef.current.textContent = "Complete!";
         cleanupJob();
-        setView("result");
+        setTimeout(() => setView("result"), 400);
         onComplete?.({ jobId: update.galleryId, imageUrl: update.imageUrl });
       }
     } else if (update.status === "failed") {
@@ -439,8 +461,13 @@ function PrimeStyleTryonInner({
       if (res.ok) {
         const data = await res.json();
         setSizingResult(data);
+      } else {
+        console.warn("[PrimeStyle] Sizing API error:", res.status, await res.text().catch(() => ""));
       }
-    } catch {
+    } catch (err) {
+      console.warn("[PrimeStyle] Sizing request failed:", err);
+    } finally {
+      setSizingLoading(false);
     }
   }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle]);
   const handleSubmit = useCallback(async () => {
@@ -453,7 +480,10 @@ function PrimeStyleTryonInner({
     }
     completedRef.current = false;
     setView("processing");
-    if (sizingMethod) submitSizing();
+    if (sizingMethod) {
+      setSizingLoading(true);
+      submitSizing();
+    }
     try {
       const modelImage = await compressImage(selectedFile);
       const response = await apiRef.current.submitTryOn(modelImage, productImage);
@@ -516,6 +546,7 @@ function PrimeStyleTryonInner({
     setErrorMessage(null);
     setSizingMethod(null);
     setSizingResult(null);
+    setSizingLoading(false);
     setProfileSaved(false);
     setView("upload");
   }, [previewUrl, cleanupJob]);
@@ -541,6 +572,11 @@ function PrimeStyleTryonInner({
     if (p.fitPreference) fd.fitPreference = p.fitPreference;
     formRef.current = fd;
     setFormGender(fd.gender || "male");
+    if (p.country) setSizingCountry(p.country);
+    if (p.sizingUnit) setSizingUnit(p.sizingUnit);
+    if (p.heightUnit) setHeightUnit(p.heightUnit);
+    if (p.weightUnit) setWeightUnit(p.weightUnit);
+    setFormKey((k) => k + 1);
   }, [profiles]);
   const saveProfile = useCallback((name) => {
     const id = activeProfileId || `p_${Date.now()}`;
@@ -563,6 +599,10 @@ function PrimeStyleTryonInner({
       shoeUS: formRef.current.shoeUS,
       shoeUK: formRef.current.shoeUK,
       fitPreference: formRef.current.fitPreference,
+      country: sizingCountry,
+      sizingUnit,
+      heightUnit,
+      weightUnit,
       createdAt: Date.now()
     };
     setProfiles((prev) => {
@@ -576,7 +616,7 @@ function PrimeStyleTryonInner({
     });
     setActiveProfileId(id);
     setProfileSaved(true);
-  }, [activeProfileId]);
+  }, [activeProfileId, sizingCountry, sizingUnit, heightUnit, weightUnit]);
   const saveHistoryEntry = useCallback(() => {
     const entry = {
       id: `h_${Date.now()}`,
@@ -827,7 +867,11 @@ function PrimeStyleTryonInner({
         /* @__PURE__ */ jsx("label", { children: "Sizing region" }),
         /* @__PURE__ */ jsx("select", { className: "ps-tryon-country-select", value: sizingCountry, onChange: (e) => setSizingCountry(e.target.value), children: SIZING_COUNTRIES.map((c) => /* @__PURE__ */ jsx("option", { value: c.code, children: c.label }, c.code)) })
       ] }),
-      sizingMethod === "exact" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "in", value: "in" }], value: sizingUnit, onChange: setSizingUnit }) }),
+      sizingMethod === "exact" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "in", value: "in" }], value: sizingUnit, onChange: (v) => {
+        setSizingUnit(v);
+        setHeightUnit(v === "cm" ? "cm" : "ft");
+        setWeightUnit(v === "cm" ? "kg" : "lbs");
+      } }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
         /* @__PURE__ */ jsx("label", { children: "Height" }),
         heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-height-ft", children: [
@@ -883,27 +927,34 @@ function PrimeStyleTryonInner({
         "Get My Size & Try On ",
         /* @__PURE__ */ jsx(ArrowRightIcon, {})
       ] })
-    ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}`);
+    ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}-${formKey}`);
   }
   function ProcessingView() {
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-countdown-ring", children: [
-        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 120 120", children: [
-          /* @__PURE__ */ jsx("circle", { className: "ps-tryon-countdown-track", cx: "60", cy: "60", r: "52" }),
-          /* @__PURE__ */ jsx("circle", { ref: countdownCircleRef, className: "ps-tryon-countdown-progress", cx: "60", cy: "60", r: "52", style: { strokeDashoffset: `${25 / 25 * 326.73}` } })
-        ] }),
-        /* @__PURE__ */ jsx("span", { ref: countdownElRef, className: "ps-tryon-countdown-number", children: "25" })
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing-image-wrap", children: [
+        previewUrl && /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: "ps-tryon-processing-model" }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-line" }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-overlay" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: progressBarRef, className: "ps-tryon-progress-bar-fill", style: { width: "0%" } }) }),
+        /* @__PURE__ */ jsx("span", { ref: progressTextRef, className: "ps-tryon-progress-pct", children: "0%" })
       ] }),
-      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-text", cn.processingText), children: "Generating your try-on..." }),
+      /* @__PURE__ */ jsx("div", { ref: progressStatusRef, className: cx("ps-tryon-processing-text", cn.processingText), children: "Preparing your image..." }),
       /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: "This usually takes 15-25 seconds" })
     ] });
   }
   function ResultView() {
-    const hasBoth = !!resultImageUrl && !!sizingResult;
+    const hasSizing = !!sizingResult || sizingLoading;
+    const hasBoth = !!resultImageUrl && hasSizing;
     const [profileName, setProfileName] = useState("");
     return /* @__PURE__ */ jsxs("div", { className: `ps-tryon-result-layout${hasBoth ? " ps-tryon-result-split" : ""}`, children: [
       resultImageUrl && /* @__PURE__ */ jsx("div", { className: "ps-tryon-result-image-col", children: /* @__PURE__ */ jsx("img", { src: resultImageUrl, alt: "Try-on result", className: cn.resultImage }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-result-info-col", children: [
+        sizingLoading && !sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend ps-tryon-sizing-loading", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner" }),
+          /* @__PURE__ */ jsx("p", { className: "ps-tryon-size-reasoning", children: "Analyzing your size..." })
+        ] }),
         sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend", children: [
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-badge", children: sizingResult.recommendedSize }),
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-confidence", children: [
@@ -1324,19 +1375,49 @@ const STYLES = `
   .ps-tryon-disclaimer { font-size: 11px; color: #666; margin: 4px 0 0; }
 
   /* Processing */
-  .ps-tryon-processing { text-align: center; padding: 40px 24px; }
-  .ps-tryon-spinner {
-    width: 48px; height: 48px; border: 3px solid #333;
-    border-top-color: var(--ps-loader, #bb945c); border-radius: 50%;
-    animation: ps-spin 0.8s linear infinite; margin: 0 auto 16px;
+  .ps-tryon-processing { text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; }
+
+  .ps-tryon-processing-image-wrap {
+    position: relative; width: 200px; height: 260px; margin: 0 auto 24px;
+    border-radius: 16px; overflow: hidden; border: 2px solid #333;
   }
-  @keyframes ps-spin { to { transform: rotate(360deg); } }
-  .ps-tryon-countdown-ring { position: relative; width: 100px; height: 100px; margin: 0 auto 20px; }
-  .ps-tryon-countdown-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
-  .ps-tryon-countdown-track { fill: none; stroke: #333; stroke-width: 4; }
-  .ps-tryon-countdown-progress { fill: none; stroke: var(--ps-loader, #bb945c); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 326.73; transition: stroke-dashoffset 1s linear; }
-  .ps-tryon-countdown-number { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
-  .ps-tryon-done-pulse { animation: ps-scale-in 0.4s ease both; }
+  .ps-tryon-processing-model {
+    width: 100%; height: 100%; object-fit: cover; display: block;
+  }
+  .ps-tryon-scan-overlay {
+    position: absolute; inset: 0;
+    background: linear-gradient(180deg, rgba(187,148,92,0.05) 0%, transparent 40%, transparent 60%, rgba(187,148,92,0.05) 100%);
+    pointer-events: none;
+  }
+  .ps-tryon-scan-line {
+    position: absolute; left: 0; right: 0; height: 3px;
+    background: linear-gradient(90deg, transparent, #bb945c 20%, #d6ba7d 50%, #bb945c 80%, transparent);
+    box-shadow: 0 0 15px rgba(187,148,92,0.6), 0 0 40px rgba(187,148,92,0.2);
+    animation: ps-scan 2.5s ease-in-out infinite;
+    pointer-events: none; z-index: 2;
+  }
+  @keyframes ps-scan {
+    0% { top: 0; opacity: 0; }
+    5% { opacity: 1; }
+    95% { opacity: 1; }
+    100% { top: calc(100% - 3px); opacity: 0; }
+  }
+
+  .ps-tryon-progress-section {
+    display: flex; align-items: center; gap: 12px; width: 100%; max-width: 300px; margin-bottom: 16px;
+  }
+  .ps-tryon-progress-bar-wrap {
+    flex: 1; height: 6px; background: #333; border-radius: 3px; overflow: hidden;
+  }
+  .ps-tryon-progress-bar-fill {
+    height: 100%; background: linear-gradient(90deg, #bb945c, #d6ba7d);
+    border-radius: 3px; transition: width 0.3s ease;
+  }
+  .ps-tryon-progress-pct {
+    font-size: 13px; font-weight: 700; color: #bb945c; min-width: 36px; text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
   @keyframes ps-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
   .ps-tryon-processing-text { font-size: 14px; color: #fff; margin: 0 0 4px; }
   .ps-tryon-processing-sub { font-size: 12px; color: #999; margin: 0; }
@@ -1366,6 +1447,13 @@ const STYLES = `
     background: linear-gradient(135deg, #bb945c, #d6ba7d);
     color: #111; font-size: 20px; font-weight: 700; margin-bottom: 10px;
   }
+  .ps-tryon-sizing-loading { text-align: center; padding: 20px 0; }
+  .ps-tryon-size-loading-spinner {
+    width: 36px; height: 36px; border: 3px solid #333;
+    border-top-color: #bb945c; border-radius: 50%;
+    animation: ps-spin 0.8s linear infinite; margin: 0 auto 12px;
+  }
+  @keyframes ps-spin { to { transform: rotate(360deg); } }
   .ps-tryon-size-confidence { font-size: 12px; color: #999; margin-bottom: 8px; }
   .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: #bb945c; } .ps-conf-low { color: #ef4444; }
   .ps-tryon-size-reasoning { font-size: 13px; color: #ccc; line-height: 1.5; margin-bottom: 12px; }

package/package.json

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