@primestyleai/tryon 3.8.0 → 3.9.0

package/dist/index.d.ts

@@ -4,3 +4,5 @@ export { SseClient } from "./sse-client";
 export { detectProductImage } from "./product-detector";
 export { compressImage, isValidImageFile } from "./image-utils";
 export type { PrimeStyleConfig, ButtonStyles, ModalStyles, TryOnResponse, TryOnStatus, VtoUpdate, PrimeStyleEvents, } from "./types";
+export { registerLocale, createT, SUPPORTED_LOCALES, TRANSLATION_KEYS, detectLanguage } from "./i18n";
+export type { TranslateFn } from "./i18n";

package/dist/primestyle-tryon.js

@@ -1,5 +1,5 @@
-import { A as ApiClient, S as SseClient, i as isValidImageFile, c as compressImage } from "./image-utils-C9bJ1zKO.js";
-import { P } from "./image-utils-C9bJ1zKO.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-B0KE3c8S.js";
+import { P, b, T, d, r } from "./index-B0KE3c8S.js";
 function detectProductImage() {
   const ogImage = document.querySelector(
     'meta[property="og:image"]'
@@ -457,6 +457,7 @@ class PrimeStyleTryon extends HTMLElement {
     this.errorMessage = null;
     this.currentJobId = null;
     this.productImageUrl = null;
+    this.t = createT();
     this.buttonStyles = {};
     this.modalStyles = {};
     this.savedScrollY = 0;
@@ -485,6 +486,9 @@ class PrimeStyleTryon extends HTMLElement {
     if (name === "api-key" || name === "api-url") {
       this.initApi();
     }
+    if (name === "locale") {
+      this.t = createT(val || void 0);
+    }
     if (name === "product-image") {
       this.productImageUrl = val;
     }
@@ -569,6 +573,8 @@ class PrimeStyleTryon extends HTMLElement {
       } catch {
       }
     }
+    const localeAttr = this.getAttribute("locale");
+    if (localeAttr) this.t = createT(localeAttr);
     this.productImageUrl = this.getAttribute("product-image") || null;
     if (!this.productImageUrl) {
       this.productImageUrl = detectProductImage();
@@ -607,7 +613,7 @@ class PrimeStyleTryon extends HTMLElement {
     );
   }
   get buttonText() {
-    return this.getAttribute("button-text") || "Virtual Try-On";
+    return this.getAttribute("button-text") || this.t("Virtual Try-On");
   }
   get showPoweredBy() {
     const attr = this.getAttribute("show-powered-by");
@@ -647,7 +653,7 @@ class PrimeStyleTryon extends HTMLElement {
     const header = document.createElement("div");
     header.className = "ps-header";
     header.innerHTML = `
-      <span class="ps-header-title">Virtual Try-On</span>
+      <span class="ps-header-title">${this.t("Virtual Try-On")}</span>
     `;
     const closeBtn = document.createElement("button");
     closeBtn.className = "ps-close";
@@ -675,7 +681,7 @@ class PrimeStyleTryon extends HTMLElement {
     if (this.showPoweredBy) {
       const powered = document.createElement("div");
       powered.className = "ps-powered";
-      powered.innerHTML = `Powered by <a href="https://myaifitting.com" target="_blank" rel="noopener">PrimeStyle AI</a>`;
+      powered.innerHTML = `${this.t("Powered by")} <a href="https://myaifitting.com" target="_blank" rel="noopener">PrimeStyle AI</a>`;
       modal.appendChild(powered);
     }
     overlay.appendChild(modal);
@@ -688,7 +694,7 @@ class PrimeStyleTryon extends HTMLElement {
       preview.className = "ps-preview";
       const img = document.createElement("img");
       img.src = this.previewUrl;
-      img.alt = "Your photo";
+      img.alt = this.t("Your photo");
       preview.appendChild(img);
       const removeBtn = document.createElement("button");
       removeBtn.className = "ps-preview-remove";
@@ -701,7 +707,7 @@ class PrimeStyleTryon extends HTMLElement {
       frag.appendChild(preview);
       const submit = document.createElement("button");
       submit.className = "ps-submit";
-      submit.textContent = "Try It On";
+      submit.textContent = this.t("Try It On");
       submit.addEventListener("click", () => this.handleSubmit());
       frag.appendChild(submit);
     } else {
@@ -716,8 +722,8 @@ class PrimeStyleTryon extends HTMLElement {
       });
       zone.innerHTML = `
         <svg class="ps-upload-icon" viewBox="0 0 24 24">${ICONS.upload.replace(/<\/?svg[^>]*>/g, "")}</svg>
-        <p class="ps-upload-text">Drop your photo here or click to upload</p>
-        <p class="ps-upload-hint">JPEG, PNG or WebP (max 10MB)</p>
+        <p class="ps-upload-text">${this.t("Drop your photo here or click to upload")}</p>
+        <p class="ps-upload-hint">${this.t("JPEG, PNG or WebP (max 10MB)")}</p>
       `;
       zone.appendChild(input);
       zone.addEventListener("click", () => input.click());
@@ -743,8 +749,8 @@ class PrimeStyleTryon extends HTMLElement {
     div.className = "ps-processing";
     div.innerHTML = `
       <div class="ps-spinner"></div>
-      <p class="ps-processing-text">Generating your try-on...</p>
-      <p class="ps-processing-sub">This usually takes 15-20 seconds</p>
+      <p class="ps-processing-text">${this.t("Generating virtual try-on...")}</p>
+      <p class="ps-processing-sub">${this.t("This usually takes 15-20 seconds")}</p>
     `;
     return div;
   }
@@ -754,19 +760,19 @@ class PrimeStyleTryon extends HTMLElement {
     if (this.resultImageUrl) {
       const img = document.createElement("img");
       img.src = this.resultImageUrl;
-      img.alt = "Try-on result";
+      img.alt = this.t("Try-on result");
       div.appendChild(img);
     }
     const actions = document.createElement("div");
     actions.className = "ps-result-actions";
     const downloadBtn = document.createElement("button");
     downloadBtn.className = "ps-btn-download";
-    downloadBtn.textContent = "Download";
+    downloadBtn.textContent = this.t("Download");
     downloadBtn.addEventListener("click", () => this.handleDownload());
     actions.appendChild(downloadBtn);
     const retryBtn = document.createElement("button");
     retryBtn.className = "ps-btn-retry";
-    retryBtn.textContent = "Try Another";
+    retryBtn.textContent = this.t("Try Another");
     retryBtn.addEventListener("click", () => {
       this.resetUpload();
       this.state = "upload";
@@ -781,11 +787,11 @@ class PrimeStyleTryon extends HTMLElement {
     div.className = "ps-error";
     div.innerHTML = `
       <svg class="ps-error-icon" viewBox="0 0 24 24">${ICONS.alert.replace(/<\/?svg[^>]*>/g, "")}</svg>
-      <p class="ps-error-text">${this.errorMessage || "Something went wrong"}</p>
+      <p class="ps-error-text">${this.errorMessage || this.t("Something went wrong")}</p>
     `;
     const retryBtn = document.createElement("button");
     retryBtn.className = "ps-submit";
-    retryBtn.textContent = "Try Again";
+    retryBtn.textContent = this.t("Try Again");
     retryBtn.addEventListener("click", () => {
       this.state = "upload";
       this.errorMessage = null;
@@ -797,13 +803,13 @@ class PrimeStyleTryon extends HTMLElement {
   // ── Handlers ────────────────────────────────
   handleFileSelect(file) {
     if (!isValidImageFile(file)) {
-      this.errorMessage = "Please upload a JPEG, PNG, or WebP image.";
+      this.errorMessage = this.t("Please upload a JPEG, PNG, or WebP image.");
       this.state = "error";
       this.render();
       return;
     }
     if (file.size > 10 * 1024 * 1024) {
-      this.errorMessage = "Image must be under 10MB.";
+      this.errorMessage = this.t("Image must be under 10MB.");
       this.state = "error";
       this.render();
       return;
@@ -815,13 +821,13 @@ class PrimeStyleTryon extends HTMLElement {
   }
   async handleSubmit() {
     if (!this.selectedFile || !this.apiClient || !this.sseClient) {
-      this.errorMessage = "SDK not configured. Please provide an API key.";
+      this.errorMessage = this.t("SDK not configured. Please provide an API key.");
       this.state = "error";
       this.render();
       return;
     }
     if (!this.productImageUrl) {
-      this.errorMessage = "No product image found. Please set the product-image attribute.";
+      this.errorMessage = this.t("No product image found. Please set the product-image attribute.");
       this.state = "error";
       this.render();
       return;
@@ -842,7 +848,7 @@ class PrimeStyleTryon extends HTMLElement {
       );
       this.startPolling(response.jobId);
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Failed to start try-on";
+      const message = err instanceof Error ? err.message : this.t("Failed to start try-on");
       this.errorMessage = message;
       this.state = "error";
       this.emit("ps:error", { message, code: err?.code });
@@ -861,7 +867,7 @@ class PrimeStyleTryon extends HTMLElement {
         this.render();
       }
     } else if (update.status === "failed") {
-      this.errorMessage = update.error || "Try-on generation failed";
+      this.errorMessage = update.error || this.t("Try-on generation failed");
       this.state = "error";
       this.emit("ps:error", { message: this.errorMessage });
       this.render();
@@ -918,7 +924,7 @@ class PrimeStyleTryon extends HTMLElement {
     if (this.resultImageUrl.startsWith("data:")) {
       link.click();
     } else {
-      fetch(this.resultImageUrl).then((r) => r.blob()).then((blob) => {
+      fetch(this.resultImageUrl).then((r2) => r2.blob()).then((blob) => {
         const url = URL.createObjectURL(blob);
         link.href = url;
         link.click();
@@ -1007,8 +1013,13 @@ export {
   ApiClient,
   P as PrimeStyleError,
   PrimeStyleTryon,
+  b as SUPPORTED_LOCALES,
   SseClient,
+  T as TRANSLATION_KEYS,
   compressImage,
+  createT,
+  d as detectLanguage,
   detectProductImage,
-  isValidImageFile
+  isValidImageFile,
+  r as registerLocale
 };

package/dist/react/index.d.ts

@@ -10,6 +10,8 @@ export interface PrimeStyleTryonProps {
     showIcon?: boolean;
     /** Custom icon element to replace the default camera icon. Pass any React node (e.g. an <svg> or <img>). */
     buttonIcon?: React.ReactNode;
+    /** BCP-47 locale tag for UI translations (e.g. "en", "ja", "pt-BR"). Auto-detects from browser if omitted. */
+    locale?: string;
     buttonStyles?: ButtonStyles;
     modalStyles?: ModalStyles;
     classNames?: PrimeStyleClassNames;