@aivue/360-spin 1.0.2 → 2.0.0

package/dist/index.mjs

@@ -1,100 +1,103 @@
-import { ref as p, computed as y, onUnmounted as H, defineComponent as q, onMounted as N, createElementBlock as k, openBlock as F, normalizeStyle as O, normalizeClass as L, unref as r, createCommentVNode as C, withDirectives as $, createElementVNode as _, toDisplayString as z, vShow as x } from "vue";
-function V(t, d) {
-  const a = p(!1), c = p(!0), i = p(0), o = p(null), l = p([]), v = p(!1), A = p(0), M = p(0), u = y(() => t.mode && t.mode !== "auto" ? t.mode : Array.isArray(t.animatedImage) ? "frames" : "gif"), I = y(() => u.value === "gif" && typeof t.animatedImage == "string" ? t.animatedImage : ""), b = y(() => {
-    if (u.value === "frames" && Array.isArray(t.animatedImage)) {
-      const n = t.animatedImage, s = i.value % n.length;
-      return n[s];
+var W = Object.defineProperty;
+var Q = (u, a, e) => a in u ? W(u, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[a] = e;
+var O = (u, a, e) => Q(u, typeof a != "symbol" ? a + "" : a, e);
+import { ref as f, computed as F, onUnmounted as Y, defineComponent as j, onMounted as Z, createElementBlock as _, openBlock as y, normalizeStyle as X, normalizeClass as G, unref as k, createCommentVNode as C, withDirectives as U, createElementVNode as r, toDisplayString as D, vShow as q, vModelText as ee, withModifiers as R, vModelSelect as N, createVNode as ae, Fragment as te, renderList as re } from "vue";
+function oe(u, a) {
+  const e = f(!1), l = f(!0), n = f(0), i = f(null), s = f([]), v = f(!1), c = f(0), m = f(0), p = F(() => u.mode && u.mode !== "auto" ? u.mode : Array.isArray(u.animatedImage) ? "frames" : "gif"), S = F(() => p.value === "gif" && typeof u.animatedImage == "string" ? u.animatedImage : ""), B = F(() => {
+    if (p.value === "frames" && Array.isArray(u.animatedImage)) {
+      const d = u.animatedImage, w = n.value % d.length;
+      return d[w];
     }
     return "";
-  }), T = y(() => Array.isArray(t.animatedImage) ? t.animatedImage : []), m = y(() => T.value.length);
-  async function B() {
-    c.value = !0;
+  }), T = F(() => Array.isArray(u.animatedImage) ? u.animatedImage : []), h = F(() => T.value.length);
+  async function L() {
+    l.value = !0;
     try {
-      if (u.value === "gif")
-        await S(I.value);
-      else if (u.value === "frames") {
-        const n = T.value.map((f) => S(f)), s = await Promise.all(n);
-        l.value = s;
+      if (p.value === "gif")
+        await $(S.value);
+      else if (p.value === "frames") {
+        const d = T.value.map((b) => $(b)), w = await Promise.all(d);
+        s.value = w;
       }
-      await S(t.staticImage), c.value = !1, d("loaded");
-    } catch (n) {
-      c.value = !1, d("error", n);
-    }
-  }
-  function S(n, s = 5e3) {
-    return new Promise((f, h) => {
-      const g = new Image(), e = setTimeout(() => {
-        h(new Error(`Image load timeout: ${n}`));
-      }, s);
-      g.onload = () => {
-        clearTimeout(e), f(g);
-      }, g.onerror = () => {
-        clearTimeout(e), h(new Error(`Failed to load image: ${n}`));
-      }, g.src = n;
+      await $(u.staticImage), l.value = !1, a("loaded");
+    } catch (d) {
+      l.value = !1, a("error", d);
+    }
+  }
+  function $(d, w = 5e3) {
+    return new Promise((b, I) => {
+      const A = new Image(), o = setTimeout(() => {
+        I(new Error(`Image load timeout: ${d}`));
+      }, w);
+      A.onload = () => {
+        clearTimeout(o), b(A);
+      }, A.onerror = () => {
+        clearTimeout(o), I(new Error(`Failed to load image: ${d}`));
+      }, A.src = d;
     });
   }
-  function X() {
-    a.value || c.value || (a.value = !0, d("animation-start"), u.value === "frames" && P());
+  function x() {
+    e.value || l.value || (e.value = !0, a("animation-start"), p.value === "frames" && z());
   }
-  function D() {
-    a.value && (a.value = !1, d("animation-end"), o.value !== null && (cancelAnimationFrame(o.value), o.value = null), u.value === "frames" && (i.value = 0));
+  function E() {
+    e.value && (e.value = !1, a("animation-end"), i.value !== null && (cancelAnimationFrame(i.value), i.value = null), p.value === "frames" && (n.value = 0));
   }
-  function P() {
-    if (m.value === 0) return;
-    const n = 1e3 / (t.frameRate || 30);
-    let s = Date.now();
-    function f() {
-      const h = Date.now();
-      if (h - s >= n && (t.direction === "clockwise" ? i.value = (i.value + 1) % m.value : i.value = i.value === 0 ? m.value - 1 : i.value - 1, d("frame-change", i.value), s = h, !t.loop && i.value === 0)) {
-        D();
+  function z() {
+    if (h.value === 0) return;
+    const d = 1e3 / (u.frameRate || 30);
+    let w = Date.now();
+    function b() {
+      const I = Date.now();
+      if (I - w >= d && (u.direction === "clockwise" ? n.value = (n.value + 1) % h.value : n.value = n.value === 0 ? h.value - 1 : n.value - 1, a("frame-change", n.value), w = I, !u.loop && n.value === 0)) {
+        E();
         return;
       }
-      a.value && (o.value = requestAnimationFrame(f));
+      e.value && (i.value = requestAnimationFrame(b));
     }
-    o.value = requestAnimationFrame(f);
+    i.value = requestAnimationFrame(b);
   }
-  function U(n) {
-    u.value !== "frames" || m.value === 0 || (v.value = !0, M.value = i.value, n instanceof TouchEvent ? A.value = n.touches[0].clientX : A.value = n.clientX, a.value && D());
+  function V(d) {
+    p.value !== "frames" || h.value === 0 || (v.value = !0, m.value = n.value, d instanceof TouchEvent ? c.value = d.touches[0].clientX : c.value = d.clientX, e.value && E());
   }
-  function E(n) {
-    if (!v.value || u.value !== "frames") return;
-    n.preventDefault();
-    let s;
-    n instanceof TouchEvent ? s = n.touches[0].clientX : s = n.clientX;
-    const f = s - A.value, h = t.dragSensitivity || 10, g = Math.floor(f / h);
-    let e = M.value + g;
-    for (; e < 0; ) e += m.value;
-    for (; e >= m.value; ) e -= m.value;
-    e !== i.value && (i.value = e, d("frame-change", i.value));
+  function M(d) {
+    if (!v.value || p.value !== "frames") return;
+    d.preventDefault();
+    let w;
+    d instanceof TouchEvent ? w = d.touches[0].clientX : w = d.clientX;
+    const b = w - c.value, I = u.dragSensitivity || 10, A = Math.floor(b / I);
+    let o = m.value + A;
+    for (; o < 0; ) o += h.value;
+    for (; o >= h.value; ) o -= h.value;
+    o !== n.value && (n.value = o, a("frame-change", n.value));
   }
-  function R(n) {
+  function K(d) {
     v.value = !1;
   }
-  return H(() => {
-    o.value !== null && cancelAnimationFrame(o.value);
+  return Y(() => {
+    i.value !== null && cancelAnimationFrame(i.value);
   }), {
-    isAnimating: a,
-    isLoading: c,
-    currentFrameIndex: i,
-    currentMode: u,
-    animatedImageUrl: I,
-    currentFrameUrl: b,
-    totalFrames: m,
-    startAnimation: X,
-    stopAnimation: D,
-    preloadImages: B,
-    handleDragStart: U,
-    handleDragMove: E,
-    handleDragEnd: R
+    isAnimating: e,
+    isLoading: l,
+    currentFrameIndex: n,
+    currentMode: p,
+    animatedImageUrl: S,
+    currentFrameUrl: B,
+    totalFrames: h,
+    startAnimation: x,
+    stopAnimation: E,
+    preloadImages: L,
+    handleDragStart: V,
+    handleDragMove: M,
+    handleDragEnd: K
   };
 }
-const G = {
+const ne = {
   key: 0,
   class: "ai-360-spin__loading"
-}, J = { class: "ai-360-spin__loading-text" }, K = ["src", "alt"], Q = ["src", "alt"], W = ["src", "alt"], Y = {
+}, ie = { class: "ai-360-spin__loading-text" }, se = ["src", "alt"], le = ["src", "alt"], ue = ["src", "alt"], ce = {
   key: 3,
   class: "ai-360-spin__hint"
-}, Z = /* @__PURE__ */ q({
+}, de = /* @__PURE__ */ j({
   __name: "Ai360Spin",
   props: {
     staticImage: {},
@@ -118,132 +121,635 @@ const G = {
     dragSensitivity: { default: 10 }
   },
   emits: ["animation-start", "animation-end", "loaded", "error", "frame-change"],
-  setup(t, { emit: d }) {
-    const a = t, c = d, i = p(null), {
-      isAnimating: o,
-      isLoading: l,
+  setup(u, { emit: a }) {
+    const e = u, l = a, n = f(null), {
+      isAnimating: i,
+      isLoading: s,
       currentMode: v,
-      animatedImageUrl: A,
-      currentFrameUrl: M,
-      startAnimation: u,
-      stopAnimation: I,
-      preloadImages: b,
+      animatedImageUrl: c,
+      currentFrameUrl: m,
+      startAnimation: p,
+      stopAnimation: S,
+      preloadImages: B,
       handleDragStart: T,
-      handleDragMove: m,
-      handleDragEnd: B
-    } = V(a, c), S = y(() => ({
-      width: typeof a.width == "number" ? `${a.width}px` : a.width,
-      height: typeof a.height == "number" ? `${a.height}px` : a.height
-    })), X = y(() => a.trigger === "hover" && !o.value), D = y(() => "Hover to spin");
-    function P() {
-      a.trigger === "hover" && u();
-    }
-    function U() {
-      a.trigger === "hover" && I();
+      handleDragMove: h,
+      handleDragEnd: L
+    } = oe(e, l), $ = F(() => ({
+      width: typeof e.width == "number" ? `${e.width}px` : e.width,
+      height: typeof e.height == "number" ? `${e.height}px` : e.height
+    })), x = F(() => e.trigger === "hover" && !i.value), E = F(() => "Hover to spin");
+    function z() {
+      e.trigger === "hover" && p();
     }
-    function E() {
-      a.trigger === "click" && (o.value ? I() : u());
+    function V() {
+      e.trigger === "hover" && S();
     }
-    function R(e) {
-      a.enableDragSpin && v.value === "frames" ? T(e) : a.trigger === "click" && E();
+    function M() {
+      e.trigger === "click" && (i.value ? S() : p());
     }
-    function n(e) {
-      a.enableDragSpin && v.value === "frames" && m(e);
+    function K(o) {
+      e.enableDragSpin && v.value === "frames" ? T(o) : e.trigger === "click" && M();
     }
-    function s(e) {
-      a.enableDragSpin && v.value === "frames" && B(e);
+    function d(o) {
+      e.enableDragSpin && v.value === "frames" && h(o);
     }
-    function f() {
-      console.log("[Ai360Spin] Static image loaded, clearing loading state"), l.value && (l.value = !1), console.log("[Ai360Spin] isLoading after static load:", l.value);
+    function w(o) {
+      e.enableDragSpin && v.value === "frames" && L(o);
     }
-    function h() {
-      c("loaded");
+    function b() {
+      console.log("[Ai360Spin] Static image loaded, clearing loading state"), s.value && (s.value = !1), console.log("[Ai360Spin] isLoading after static load:", s.value);
     }
-    function g(e) {
-      var w;
-      console.error("Image failed to load:", (w = e.target) == null ? void 0 : w.src), l.value && (l.value = !1), c("error", new Error("Failed to load image"));
+    function I() {
+      l("loaded");
     }
-    return N(async () => {
-      if (console.log("[Ai360Spin] onMounted - preload:", a.preload, "isLoading:", l.value), a.preload)
+    function A(o) {
+      var t;
+      console.error("Image failed to load:", (t = o.target) == null ? void 0 : t.src), s.value && (s.value = !1), l("error", new Error("Failed to load image"));
+    }
+    return Z(async () => {
+      if (console.log("[Ai360Spin] onMounted - preload:", e.preload, "isLoading:", s.value), e.preload)
         try {
-          await b();
-        } catch (e) {
-          console.error("[Ai360Spin] Preload failed:", e), l.value = !1;
+          await B();
+        } catch (o) {
+          console.error("[Ai360Spin] Preload failed:", o), s.value = !1;
         }
       else
-        console.log("[Ai360Spin] Preload disabled, clearing loading state"), l.value = !1, console.log("[Ai360Spin] isLoading after clear:", l.value);
-      a.trigger === "auto" && u();
-    }), (e, w) => (F(), k("div", {
+        console.log("[Ai360Spin] Preload disabled, clearing loading state"), s.value = !1, console.log("[Ai360Spin] isLoading after clear:", s.value);
+      e.trigger === "auto" && p();
+    }), (o, t) => (y(), _("div", {
       ref_key: "containerRef",
-      ref: i,
-      class: L(["ai-360-spin", e.containerClass, { "ai-360-spin--animating": r(o), "ai-360-spin--loading": r(l) }]),
-      style: O(S.value),
-      onMouseenter: P,
-      onMouseleave: U,
-      onClick: E,
-      onTouchstart: R,
-      onTouchmove: n,
-      onTouchend: s
+      ref: n,
+      class: G(["ai-360-spin", o.containerClass, { "ai-360-spin--animating": k(i), "ai-360-spin--loading": k(s) }]),
+      style: X($.value),
+      onMouseenter: z,
+      onMouseleave: V,
+      onClick: M,
+      onTouchstart: K,
+      onTouchmove: d,
+      onTouchend: w
     }, [
-      r(l) && e.showLoading ? (F(), k("div", G, [
-        w[0] || (w[0] = _("div", { class: "ai-360-spin__spinner" }, null, -1)),
-        _("p", J, z(e.loadingText), 1)
+      k(s) && o.showLoading ? (y(), _("div", ne, [
+        t[0] || (t[0] = r("div", { class: "ai-360-spin__spinner" }, null, -1)),
+        r("p", ie, D(o.loadingText), 1)
       ])) : C("", !0),
-      $(_("img", {
-        src: e.staticImage,
-        alt: e.alt,
-        class: L(["ai-360-spin__image", "ai-360-spin__image--static", e.imageClass]),
-        onLoad: f,
-        onError: g
-      }, null, 42, K), [
-        [x, !r(o) && !r(l)]
+      U(r("img", {
+        src: o.staticImage,
+        alt: o.alt,
+        class: G(["ai-360-spin__image", "ai-360-spin__image--static", o.imageClass]),
+        onLoad: b,
+        onError: A
+      }, null, 42, se), [
+        [q, !k(i) && !k(s)]
       ]),
-      r(v) === "gif" && !r(l) ? $((F(), k("img", {
+      k(v) === "gif" && !k(s) ? U((y(), _("img", {
         key: 1,
-        src: r(A),
-        alt: e.alt,
-        class: L(["ai-360-spin__image", "ai-360-spin__image--animated", e.imageClass]),
-        onLoad: h,
-        onError: g
-      }, null, 42, Q)), [
-        [x, r(o)]
+        src: k(c),
+        alt: o.alt,
+        class: G(["ai-360-spin__image", "ai-360-spin__image--animated", o.imageClass]),
+        onLoad: I,
+        onError: A
+      }, null, 42, le)), [
+        [q, k(i)]
       ]) : C("", !0),
-      r(v) === "frames" && !r(l) ? $((F(), k("img", {
+      k(v) === "frames" && !k(s) ? U((y(), _("img", {
         key: 2,
-        src: r(M),
-        alt: e.alt,
-        class: L(["ai-360-spin__image", "ai-360-spin__image--frame", e.imageClass])
-      }, null, 10, W)), [
-        [x, r(o)]
+        src: k(m),
+        alt: o.alt,
+        class: G(["ai-360-spin__image", "ai-360-spin__image--frame", o.imageClass])
+      }, null, 10, ue)), [
+        [q, k(i)]
       ]) : C("", !0),
-      !r(o) && !r(l) && X.value ? (F(), k("div", Y, [
-        w[1] || (w[1] = _("svg", {
+      !k(i) && !k(s) && x.value ? (y(), _("div", ce, [
+        t[1] || (t[1] = r("svg", {
           class: "ai-360-spin__hint-icon",
           viewBox: "0 0 24 24",
           fill: "none",
           stroke: "currentColor"
         }, [
-          _("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
-          _("path", { d: "M2 17l10 5 10-5" }),
-          _("path", { d: "M2 12l10 5 10-5" })
+          r("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+          r("path", { d: "M2 17l10 5 10-5" }),
+          r("path", { d: "M2 12l10 5 10-5" })
         ], -1)),
-        _("span", null, z(D.value), 1)
+        r("span", null, D(E.value), 1)
       ])) : C("", !0)
     ], 38));
   }
-}), j = (t, d) => {
-  const a = t.__vccOpts || t;
-  for (const [c, i] of d)
-    a[c] = i;
-  return a;
-}, ee = /* @__PURE__ */ j(Z, [["__scopeId", "data-v-915b2a52"]]), ne = {
-  install(t) {
-    t.component("Ai360Spin", ee);
+}), H = (u, a) => {
+  const e = u.__vccOpts || u;
+  for (const [l, n] of a)
+    e[l] = n;
+  return e;
+}, J = /* @__PURE__ */ H(de, [["__scopeId", "data-v-915b2a52"]]);
+class ge {
+  constructor(a, e) {
+    O(this, "config");
+    O(this, "onProgress");
+    this.config = {
+      provider: a.provider || "openai",
+      apiKey: a.apiKey,
+      frameCount: a.frameCount || 36,
+      backgroundColor: a.backgroundColor || "white",
+      customBackgroundColor: a.customBackgroundColor || "#ffffff",
+      quality: a.quality || 80,
+      imageSize: a.imageSize || "1024x1024",
+      model: a.model || (a.provider === "openai" ? "dall-e-3" : "stable-diffusion-xl-1024-v1-0"),
+      useVisionAnalysis: a.useVisionAnalysis !== !1,
+      promptTemplate: a.promptTemplate || ""
+    }, this.onProgress = e;
+  }
+  /**
+   * Generate 360-degree frames from a single product image
+   */
+  async generate(a) {
+    const e = Date.now(), l = [];
+    try {
+      const n = typeof a == "string" ? a : await this.fileToBase64(a);
+      this.updateProgress(0, "Analyzing product image...");
+      let i = "";
+      this.config.useVisionAnalysis && this.config.provider === "openai" ? i = await this.analyzeProduct(n) : i = "Product image", this.updateProgress(10, "Product analyzed. Generating frames...");
+      const s = 360 / this.config.frameCount;
+      for (let c = 0; c < this.config.frameCount; c++) {
+        const m = Math.round(c * s), p = 10 + Math.round(c / this.config.frameCount * 85);
+        this.updateProgress(p, `Generating frame ${c + 1}/${this.config.frameCount} (${m}°)...`, l);
+        const S = await this.generateFrame(i, m, c);
+        l.push(S);
+      }
+      this.updateProgress(100, "Generation complete!", l);
+      const v = Date.now() - e;
+      return {
+        frames: l,
+        productDescription: i,
+        metadata: {
+          provider: this.config.provider,
+          frameCount: this.config.frameCount,
+          generationTime: v,
+          model: this.config.model
+        }
+      };
+    } catch (n) {
+      throw console.error("AI 360 Generation error:", n), n;
+    }
+  }
+  /**
+   * Analyze product image using GPT-4 Vision
+   */
+  async analyzeProduct(a) {
+    var n, i;
+    const e = await fetch("https://api.openai.com/v1/chat/completions", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${this.config.apiKey}`
+      },
+      body: JSON.stringify({
+        model: "gpt-4o",
+        messages: [
+          {
+            role: "user",
+            content: [
+              {
+                type: "text",
+                text: "Analyze this product image and provide a detailed description including: product type, color, material, key features, and style. Be concise but specific. This will be used to generate 360-degree views."
+              },
+              {
+                type: "image_url",
+                image_url: { url: a }
+              }
+            ]
+          }
+        ],
+        max_tokens: 300
+      })
+    });
+    if (!e.ok)
+      throw new Error(`Vision API error: ${e.statusText}`);
+    return ((i = (n = (await e.json()).choices[0]) == null ? void 0 : n.message) == null ? void 0 : i.content) || "Product";
+  }
+  /**
+   * Generate a single frame at a specific angle
+   */
+  async generateFrame(a, e, l) {
+    return this.config.provider === "openai" ? this.generateFrameOpenAI(a, e, l) : this.generateFrameStability(a, e, l);
+  }
+  /**
+   * Generate frame using OpenAI DALL-E
+   */
+  async generateFrameOpenAI(a, e, l) {
+    var m;
+    const n = this.getBackgroundColorValue(), i = this.config.promptTemplate || `Create a high-quality product photograph of: ${a}
+View angle: ${e} degrees rotation (0° is front view, rotating clockwise around vertical axis)
+Background: ${n}
+Style: Professional product photography, studio lighting, high detail, sharp focus, centered composition
+The product should be clearly visible and well-lit from this ${e}° angle.`, s = await fetch("https://api.openai.com/v1/images/generations", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${this.config.apiKey}`
+      },
+      body: JSON.stringify({
+        model: this.config.model,
+        prompt: i.substring(0, 4e3),
+        // DALL-E has prompt limits
+        n: 1,
+        size: this.config.imageSize,
+        quality: "hd",
+        style: "natural"
+      })
+    });
+    if (!s.ok)
+      throw new Error(`OpenAI API error: ${s.statusText}`);
+    const c = (m = (await s.json()).data[0]) == null ? void 0 : m.url;
+    if (!c)
+      throw new Error("No image URL returned from OpenAI");
+    return this.urlToBase64(c);
+  }
+  /**
+   * Generate frame using Stability AI
+   */
+  async generateFrameStability(a, e, l) {
+    var m;
+    const n = this.getBackgroundColorValue(), i = this.config.promptTemplate || `Professional product photograph of ${a}, viewed from ${e} degrees angle, ${n} background, studio lighting, high quality, detailed, centered`, s = await fetch("https://api.stability.ai/v1/generation/stable-diffusion-xl-1024-v1-0/text-to-image", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${this.config.apiKey}`,
+        Accept: "application/json"
+      },
+      body: JSON.stringify({
+        text_prompts: [
+          {
+            text: i,
+            weight: 1
+          }
+        ],
+        cfg_scale: 7,
+        height: 1024,
+        width: 1024,
+        samples: 1,
+        steps: 30
+      })
+    });
+    if (!s.ok)
+      throw new Error(`Stability AI error: ${s.statusText}`);
+    const c = (m = (await s.json()).artifacts[0]) == null ? void 0 : m.base64;
+    if (!c)
+      throw new Error("No image returned from Stability AI");
+    return `data:image/png;base64,${c}`;
+  }
+  /**
+   * Get background color value based on config
+   */
+  getBackgroundColorValue() {
+    switch (this.config.backgroundColor) {
+      case "white":
+        return "pure white";
+      case "transparent":
+        return "transparent/alpha channel";
+      case "black":
+        return "pure black";
+      case "custom":
+        return this.config.customBackgroundColor;
+      default:
+        return "white";
+    }
+  }
+  /**
+   * Convert File to base64
+   */
+  fileToBase64(a) {
+    return new Promise((e, l) => {
+      const n = new FileReader();
+      n.onload = () => e(n.result), n.onerror = l, n.readAsDataURL(a);
+    });
+  }
+  /**
+   * Convert URL to base64
+   */
+  async urlToBase64(a) {
+    try {
+      const l = await (await fetch(a)).blob();
+      return new Promise((n, i) => {
+        const s = new FileReader();
+        s.onload = () => n(s.result), s.onerror = i, s.readAsDataURL(l);
+      });
+    } catch (e) {
+      return console.error("Error converting URL to base64:", e), a;
+    }
+  }
+  /**
+   * Update progress callback
+   */
+  updateProgress(a, e, l = []) {
+    this.onProgress && this.onProgress({
+      currentFrame: l.length,
+      totalFrames: this.config.frameCount,
+      percentage: a,
+      status: e,
+      generatedFrames: l
+    });
+  }
+}
+const me = { class: "ai-360-generator" }, pe = {
+  key: 0,
+  class: "ai-360-generator__api-key"
+}, fe = { for: "api-key-input" }, ve = ["placeholder"], he = {
+  key: 1,
+  class: "ai-360-generator__upload"
+}, _e = {
+  key: 0,
+  class: "ai-360-generator__dropzone-content"
+}, ye = {
+  key: 1,
+  class: "ai-360-generator__preview"
+}, we = ["src"], ke = {
+  key: 0,
+  class: "ai-360-generator__options"
+}, be = { class: "ai-360-generator__option" }, Ae = { class: "ai-360-generator__option" }, Se = { class: "ai-360-generator__option" }, Ie = {
+  key: 2,
+  class: "ai-360-generator__progress"
+}, Ce = { class: "ai-360-generator__progress-bar" }, Fe = { class: "ai-360-generator__progress-text" }, Te = { class: "ai-360-generator__progress-detail" }, $e = {
+  key: 3,
+  class: "ai-360-generator__result"
+}, Pe = { class: "ai-360-generator__viewer" }, De = {
+  key: 0,
+  class: "ai-360-generator__frame-grid"
+}, Be = ["src", "alt"], Ee = {
+  key: 4,
+  class: "ai-360-generator__error"
+}, Me = /* @__PURE__ */ j({
+  __name: "Ai360Generator",
+  props: {
+    provider: { default: "openai" },
+    apiKey: { default: "" },
+    autoSaveApiKey: { type: Boolean, default: !0 },
+    showFramePreview: { type: Boolean, default: !0 }
+  },
+  emits: ["frames-generated", "generation-start", "generation-complete", "generation-error"],
+  setup(u, { emit: a }) {
+    const e = u, l = a, n = f(e.apiKey || localStorage.getItem(`ai_360_api_key_${e.provider}`) || ""), i = f(null), s = f(!1), v = f(!1), c = f([]), m = f(null), p = f(null), S = f(36), B = f("white"), T = f(80), h = f({
+      currentFrame: 0,
+      totalFrames: 0,
+      percentage: 0,
+      status: "",
+      generatedFrames: []
+    }), L = F(() => n.value.length > 0), $ = F(() => e.provider === "openai" ? "OpenAI" : "Stability AI");
+    function x() {
+      e.autoSaveApiKey && localStorage.setItem(`ai_360_api_key_${e.provider}`, n.value);
+    }
+    function E() {
+      var o;
+      (o = p.value) == null || o.click();
+    }
+    function z(o) {
+      var P;
+      const g = (P = o.target.files) == null ? void 0 : P[0];
+      g && M(g);
+    }
+    function V(o) {
+      var g;
+      s.value = !1;
+      const t = (g = o.dataTransfer) == null ? void 0 : g.files[0];
+      t && t.type.startsWith("image/") && M(t);
+    }
+    function M(o) {
+      const t = new FileReader();
+      t.onload = (g) => {
+        var P;
+        i.value = (P = g.target) == null ? void 0 : P.result;
+      }, t.readAsDataURL(o);
+    }
+    function K() {
+      i.value = null, p.value && (p.value.value = "");
+    }
+    async function d() {
+      if (!(!i.value || !n.value)) {
+        v.value = !0, m.value = null, c.value = [], l("generation-start");
+        try {
+          const t = await new ge(
+            {
+              provider: e.provider,
+              apiKey: n.value,
+              frameCount: S.value,
+              backgroundColor: B.value,
+              quality: T.value,
+              useVisionAnalysis: !0
+            },
+            (g) => {
+              h.value = g;
+            }
+          ).generate(i.value);
+          c.value = t.frames, l("generation-complete", t.frames);
+        } catch (o) {
+          const t = o instanceof Error ? o.message : "Generation failed";
+          m.value = t, l("generation-error", o instanceof Error ? o : new Error(t));
+        } finally {
+          v.value = !1;
+        }
+      }
+    }
+    function w() {
+      c.value.forEach((o, t) => {
+        const g = document.createElement("a");
+        g.href = o, g.download = `360-frame-${String(t + 1).padStart(3, "0")}.png`, g.click();
+      });
+    }
+    function b() {
+      c.value = [], i.value = null, m.value = null, h.value = {
+        currentFrame: 0,
+        totalFrames: 0,
+        percentage: 0,
+        status: "",
+        generatedFrames: []
+      };
+    }
+    function I() {
+      l("frames-generated", c.value);
+    }
+    function A() {
+      m.value = null;
+    }
+    return (o, t) => (y(), _("div", me, [
+      L.value ? C("", !0) : (y(), _("div", pe, [
+        r("label", fe, D($.value) + " API Key:", 1),
+        U(r("input", {
+          id: "api-key-input",
+          "onUpdate:modelValue": t[0] || (t[0] = (g) => n.value = g),
+          type: "password",
+          placeholder: `Enter your ${$.value} API key`,
+          class: "ai-360-generator__input"
+        }, null, 8, ve), [
+          [ee, n.value]
+        ]),
+        r("button", {
+          onClick: x,
+          class: "ai-360-generator__button"
+        }, " Save API Key ")
+      ])),
+      L.value && !v.value && c.value.length === 0 ? (y(), _("div", he, [
+        r("div", {
+          class: G(["ai-360-generator__dropzone", { "ai-360-generator__dropzone--dragging": s.value }]),
+          onDrop: R(V, ["prevent"]),
+          onDragover: t[1] || (t[1] = R((g) => s.value = !0, ["prevent"])),
+          onDragleave: t[2] || (t[2] = R((g) => s.value = !1, ["prevent"])),
+          onClick: E
+        }, [
+          r("input", {
+            ref_key: "fileInputRef",
+            ref: p,
+            type: "file",
+            accept: "image/*",
+            style: { display: "none" },
+            onChange: z
+          }, null, 544),
+          i.value ? (y(), _("div", ye, [
+            r("img", {
+              src: i.value,
+              alt: "Uploaded product",
+              class: "ai-360-generator__preview-image"
+            }, null, 8, we),
+            r("button", {
+              onClick: R(K, ["stop"]),
+              class: "ai-360-generator__clear-button"
+            }, " ✕ ")
+          ])) : (y(), _("div", _e, t[6] || (t[6] = [
+            r("svg", {
+              class: "ai-360-generator__upload-icon",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor"
+            }, [
+              r("path", {
+                d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              })
+            ], -1),
+            r("p", { class: "ai-360-generator__dropzone-text" }, " Drop an image here or click to upload ", -1),
+            r("p", { class: "ai-360-generator__dropzone-hint" }, " Upload a product image to generate 360° views ", -1)
+          ])))
+        ], 34),
+        i.value ? (y(), _("div", ke, [
+          r("div", be, [
+            t[8] || (t[8] = r("label", null, "Frame Count:", -1)),
+            U(r("select", {
+              "onUpdate:modelValue": t[3] || (t[3] = (g) => S.value = g),
+              class: "ai-360-generator__select"
+            }, t[7] || (t[7] = [
+              r("option", { value: 12 }, "12 frames (Fast)", -1),
+              r("option", { value: 24 }, "24 frames (Balanced)", -1),
+              r("option", { value: 36 }, "36 frames (Smooth)", -1),
+              r("option", { value: 72 }, "72 frames (Ultra Smooth)", -1)
+            ]), 512), [
+              [
+                N,
+                S.value,
+                void 0,
+                { number: !0 }
+              ]
+            ])
+          ]),
+          r("div", Ae, [
+            t[10] || (t[10] = r("label", null, "Background:", -1)),
+            U(r("select", {
+              "onUpdate:modelValue": t[4] || (t[4] = (g) => B.value = g),
+              class: "ai-360-generator__select"
+            }, t[9] || (t[9] = [
+              r("option", { value: "white" }, "White", -1),
+              r("option", { value: "transparent" }, "Transparent", -1),
+              r("option", { value: "black" }, "Black", -1)
+            ]), 512), [
+              [N, B.value]
+            ])
+          ]),
+          r("div", Se, [
+            t[12] || (t[12] = r("label", null, "Quality:", -1)),
+            U(r("select", {
+              "onUpdate:modelValue": t[5] || (t[5] = (g) => T.value = g),
+              class: "ai-360-generator__select"
+            }, t[11] || (t[11] = [
+              r("option", { value: 60 }, "Standard", -1),
+              r("option", { value: 80 }, "High", -1),
+              r("option", { value: 100 }, "Ultra", -1)
+            ]), 512), [
+              [
+                N,
+                T.value,
+                void 0,
+                { number: !0 }
+              ]
+            ])
+          ]),
+          r("button", {
+            onClick: d,
+            class: "ai-360-generator__generate-button"
+          }, " 🤖 Generate 360° View ")
+        ])) : C("", !0)
+      ])) : C("", !0),
+      v.value ? (y(), _("div", Ie, [
+        r("div", Ce, [
+          r("div", {
+            class: "ai-360-generator__progress-fill",
+            style: X({ width: h.value.percentage + "%" })
+          }, null, 4)
+        ]),
+        r("p", Fe, D(h.value.status), 1),
+        r("p", Te, " Frame " + D(h.value.currentFrame) + " / " + D(h.value.totalFrames) + " (" + D(Math.round(h.value.percentage)) + "%) ", 1)
+      ])) : C("", !0),
+      c.value.length > 0 && !v.value ? (y(), _("div", $e, [
+        t[13] || (t[13] = r("h3", { class: "ai-360-generator__result-title" }, "✅ 360° View Generated!", -1)),
+        r("div", Pe, [
+          ae(J, {
+            "static-image": c.value[0],
+            "animated-image": c.value,
+            mode: "frames",
+            trigger: "hover",
+            "enable-drag-spin": !0,
+            "frame-rate": 30
+          }, null, 8, ["static-image", "animated-image"])
+        ]),
+        r("div", { class: "ai-360-generator__actions" }, [
+          r("button", {
+            onClick: w,
+            class: "ai-360-generator__button"
+          }, " 📥 Download Frames "),
+          r("button", {
+            onClick: b,
+            class: "ai-360-generator__button ai-360-generator__button--secondary"
+          }, " 🔄 Generate Another "),
+          r("button", {
+            onClick: I,
+            class: "ai-360-generator__button ai-360-generator__button--primary"
+          }, " ✓ Use These Frames ")
+        ]),
+        o.showFramePreview ? (y(), _("div", De, [
+          (y(!0), _(te, null, re(c.value.slice(0, 12), (g, P) => (y(), _("img", {
+            key: P,
+            src: g,
+            alt: `Frame ${P + 1}`,
+            class: "ai-360-generator__frame-thumbnail"
+          }, null, 8, Be))), 128))
+        ])) : C("", !0)
+      ])) : C("", !0),
+      m.value ? (y(), _("div", Ee, [
+        r("p", null, "❌ " + D(m.value), 1),
+        r("button", {
+          onClick: A,
+          class: "ai-360-generator__button"
+        }, " Dismiss ")
+      ])) : C("", !0)
+    ]));
+  }
+}), Ue = /* @__PURE__ */ H(Me, [["__scopeId", "data-v-fc0644b2"]]), ze = {
+  install(u) {
+    u.component("Ai360Spin", J), u.component("Ai360Generator", Ue);
   }
 };
 export {
-  ee as Ai360Spin,
-  ne as default,
-  V as use360Spin
+  ge as AI360Generator,
+  Ue as Ai360Generator,
+  J as Ai360Spin,
+  ze as default,
+  oe as use360Spin
 };
 //# sourceMappingURL=index.mjs.map