@interware/content-generator 0.2.1 → 0.3.0

package/dist/_chunks/{App-DCuBRwX8.js → App-CwkLhm0x.js}

@@ -4,12 +4,12 @@ const jsxRuntime = require("react/jsx-runtime");
 const admin = require("@strapi/strapi/admin");
 const designSystem = require("@strapi/design-system");
 const reactRouterDom = require("react-router-dom");
-const index = require("./index-BVGbP3E-.js");
+const index = require("./index-D4lanCw0.js");
 const reactIntl = require("react-intl");
 const react = require("react");
 const reactRedux = require("react-redux");
 const icons = require("@strapi/icons");
-const getTranslation = require("./getTranslation-CacX7ZX5.js");
+const getTranslation = require("./getTranslation-C1jZiBcc.js");
 const formik = require("formik");
 const Yup = require("yup");
 function _interopNamespace(e) {
@@ -588,24 +588,24 @@ const useUsers = () => {
     getUsers
   };
 };
-const validationSchema = Yup__namespace.object().shape({
+const validationSchema$2 = Yup__namespace.object().shape({
   titulo: Yup__namespace.string().notRequired(),
   autor: Yup__namespace.string().required("Este campo es obligatorio"),
   categoria: Yup__namespace.string().required("Este campo es obligatorio"),
   temperatura: Yup__namespace.string().notRequired(),
   instrucciones: Yup__namespace.string().notRequired()
 });
-const initialValues = {
+const initialValues$1 = {
   titulo: "",
   autor: "",
   categoria: "",
-  temperatura: "0.2",
+  temperatura: "0.5",
   instrucciones: ""
 };
-const Form = ({ onSubmit, categorias, users }) => {
+const Form$2 = ({ onSubmit, categorias, users }) => {
   const formik$1 = formik.useFormik({
-    initialValues,
-    validationSchema,
+    initialValues: initialValues$1,
+    validationSchema: validationSchema$2,
     onSubmit
   });
   const { values, errors, touched, isValid, dirty, isSubmitting, handleChange, setFieldValue, handleSubmit } = formik$1;
@@ -863,7 +863,7 @@ const GenerateContentContainer = () => {
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { alignItems: "end", width: "100%", justifyContent: "end", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.LinkButton, { href: "/admin/plugins/strapi-content-generator-gemini", children: "Regresar" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form, { categorias, users, onSubmit }) })
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { categorias, users, onSubmit }) })
     ] })
   ] });
 };
@@ -874,7 +874,7 @@ const GenerateContent = () => {
   ] });
 };
 const useImages$1 = () => {
-  const { get, del } = admin.useFetchClient();
+  const { get, del, post } = admin.useFetchClient();
   const getImages = react.useCallback(
     async () => {
       return await get("/strapi-content-generator-gemini/images");
@@ -887,9 +887,23 @@ const useImages$1 = () => {
     },
     [del]
   );
+  const generateImageWithConfig = react.useCallback(
+    async (data, config) => {
+      return await post("/strapi-content-generator-gemini/generate-image-with-config", data, config);
+    },
+    [post]
+  );
+  const generateVideoWithScenes = react.useCallback(
+    async (data, config) => {
+      return await post("/strapi-content-generator-gemini/generate-video-with-scenes", data, config);
+    },
+    [post]
+  );
   return {
     getImages,
-    deleteImage
+    deleteImage,
+    generateImageWithConfig,
+    generateVideoWithScenes
   };
 };
 const PRINCIPAL_KEY = "principal";
@@ -1192,9 +1206,10 @@ const Images = () => {
 const GenerateImagesContainer = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ImagesProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { padding: 6, children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "start", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", children: "Generar imagenes con IA" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", children: "Generar imagenes y videos con IA" }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
     ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "end", alignItems: "end", gap: 3, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.LinkButton, { href: "/admin/plugins/strapi-content-generator-gemini/generate-image", children: "Generar nueva imagen" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Images, {}) })
   ] }) }) });
 };
@@ -1204,6 +1219,512 @@ const GenerateImages = () => {
     /* @__PURE__ */ jsxRuntime.jsx(GenerateImagesContainer, {})
   ] });
 };
+const aspectRatioOptions = [
+  { value: "1:1", label: "1:1 (Cuadrado)" },
+  { value: "2:3", label: "2:3 Rectangular (vertical)" },
+  { value: "3:2", label: "3:2 Rectangular (horizontal)" },
+  { value: "3:4", label: "3:4 Rectangular (vertical)" },
+  { value: "4:3", label: "4:3 Rectangular (horizontal)" },
+  { value: "9:16", label: "9:16 Rectangular (vertical)" },
+  { value: "16:9", label: "16:9 Rectangular (horizontal)" },
+  { value: "21:9", label: "21:9 Rectangular (horizontal)" }
+];
+const validationSchema$1 = Yup__namespace.object({
+  prompt: Yup__namespace.string().required("El prompt es requerido"),
+  aspectRatio: Yup__namespace.string().required("La relación de aspecto es requerida"),
+  imageSize: Yup__namespace.string().required("El tamaño de la imagen es requerido")
+});
+const Form$1 = ({ onSubmit }) => {
+  const [referenceImages, setReferenceImages] = react.useState([]);
+  const individualFileInputRefs = react.useRef({});
+  const newImageFileInputRef = react.useRef(null);
+  const formik$1 = formik.useFormik({
+    initialValues: {
+      prompt: "",
+      aspectRatio: "16:9",
+      imageSize: "1K"
+    },
+    validationSchema: validationSchema$1,
+    onSubmit: (values, formikHelpers) => onSubmit({ ...values }, formikHelpers, referenceImages)
+  });
+  const handleAddImage = () => {
+    newImageFileInputRef.current?.click();
+  };
+  const handleRemoveImage = (id) => {
+    const imageToRemove = referenceImages.find((img) => img.id === id);
+    if (imageToRemove?.previewUrl) {
+      URL.revokeObjectURL(imageToRemove.previewUrl);
+    }
+    setReferenceImages(referenceImages.filter((image) => image.id !== id));
+  };
+  const handleNewImageFileChange = (e) => {
+    const selectedFile = e.target.files?.[0];
+    if (selectedFile) {
+      setReferenceImages((prevImages) => [
+        ...prevImages,
+        { id: Date.now(), file: selectedFile, previewUrl: URL.createObjectURL(selectedFile) }
+      ]);
+    }
+    e.target.value = "";
+  };
+  const handleIndividualFileChange = (id, selectedFile) => {
+    setReferenceImages((prevImages) => prevImages.map((image) => {
+      if (image.id === id) {
+        if (image.previewUrl) {
+          URL.revokeObjectURL(image.previewUrl);
+        }
+        if (selectedFile) {
+          return { ...image, file: selectedFile, previewUrl: URL.createObjectURL(selectedFile) };
+        } else {
+          const { file, previewUrl, ...rest } = image;
+          return rest;
+        }
+      }
+      return image;
+    }));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 6, hasRadius: true, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: formik$1.handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Field.Root,
+      {
+        id: "prompt",
+        width: "100%",
+        required: true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Prompt de la imagen" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Textarea,
+            {
+              name: "prompt",
+              placeholder: "Ej: Un paisaje futurista de la Ciudad de México con neones.",
+              onChange: formik$1.handleChange,
+              onBlur: formik$1.handleBlur,
+              value: formik$1.values.prompt,
+              rows: 12
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Field.Root,
+      {
+        id: "imagen-referencia",
+        width: "100%",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Imagen(es) de referencia" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, width: "100%", children: [
+            referenceImages.map((image) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral100", padding: 3, hasRadius: true, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", gap: 3, width: "100%", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "primary100", padding: 1, children: image.previewUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: image.previewUrl, alt: "preview", style: { width: "50px", height: "50px", objectFit: "cover" } }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "50px", height: "50px", backgroundColor: "#ccc" } }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flexGrow: 2 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "file",
+                    accept: "image/*",
+                    ref: (el) => individualFileInputRefs.current[image.id] = el,
+                    style: { display: "none" },
+                    onChange: (e) => handleIndividualFileChange(image.id, e.target.files?.[0])
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Button,
+                  {
+                    onClick: () => individualFileInputRefs.current[image.id]?.click(),
+                    startIcon: image.file ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(icons.PlusCircle, {}),
+                    variant: "secondary",
+                    fullWidth: true,
+                    children: image.file ? image.file.name : "Seleccionar archivo"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { onClick: () => handleRemoveImage(image.id), label: "Eliminar imagen", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}) })
+            ] }) }, image.id)),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "file",
+                accept: "image/*",
+                ref: newImageFileInputRef,
+                style: { display: "none" },
+                onChange: handleNewImageFileChange
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Button,
+              {
+                startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.PlusCircle, {}),
+                variant: "secondary",
+                fullWidth: true,
+                onClick: handleAddImage,
+                disabled: referenceImages.length >= 5,
+                children: "Añadir imagen de referencia"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Field.Root,
+      {
+        id: "aspectRatio",
+        width: "100%",
+        required: true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Relación de aspecto" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Combobox,
+            {
+              name: "aspectRatio",
+              onChange: (value) => formik$1.setFieldValue("aspectRatio", value),
+              onBlur: () => formik$1.setFieldTouched("aspectRatio", true),
+              value: formik$1.values.aspectRatio,
+              onClear: () => formik$1.setFieldValue("aspectRatio", ""),
+              children: aspectRatioOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: option.value, children: option.label }, option.value))
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Field.Root,
+      {
+        id: "imageSize",
+        error: formik$1.touched.imageSize && formik$1.errors.imageSize ? formik$1.errors.imageSize : void 0,
+        width: "100%",
+        required: true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Tamaño de la imagen" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Combobox,
+            {
+              name: "imageSize",
+              onChange: (value) => formik$1.setFieldValue("imageSize", value),
+              onBlur: () => formik$1.setFieldTouched("imageSize", true),
+              value: formik$1.values.imageSize,
+              onClear: () => formik$1.setFieldValue("imageSize", ""),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: "1K", children: "1K" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: "2K", children: "2K" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: "4K", children: "4K" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, { children: formik$1.errors.imageSize })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { width: "100%", justifyContent: "end", alignItems: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Button,
+      {
+        type: "submit",
+        fullWidth: true,
+        disabled: !(formik$1.isValid && formik$1.dirty) || formik$1.isSubmitting,
+        loading: formik$1.isSubmitting,
+        children: "Generar imagen"
+      }
+    ) }) })
+  ] }) }) });
+};
+const GenerateImageContainer = () => {
+  const { toggleNotification } = admin.useNotification();
+  const { generateImageWithConfig } = useImages$1();
+  const { formatMessage } = reactIntl.useIntl();
+  const handleSubmit = async (values, { setSubmitting }, referenceImages) => {
+    try {
+      const formData = new FormData();
+      formData.append("prompt", values.prompt);
+      formData.append("aspectRatio", values.aspectRatio);
+      formData.append("imageSize", values.imageSize);
+      referenceImages.forEach((img, index2) => {
+        if (img.file) {
+          formData.append(`referenceImages[${index2}]`, img.file);
+        }
+      });
+      const response = await generateImageWithConfig(formData);
+      toggleNotification({
+        type: "success",
+        message: formatMessage({
+          id: `${index.PLUGIN_ID}.config.load.success`,
+          defaultMessage: "Imagen generada con éxito"
+        })
+      });
+    } catch (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: `${index.PLUGIN_ID}.config.load.error`,
+          defaultMessage: "Ocurrió un error al generar la imagen"
+        })
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { padding: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "start", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", children: "Generar imagen con IA" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { padding: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 2 }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 8, children: /* @__PURE__ */ jsxRuntime.jsx(Form$1, { onSubmit: handleSubmit }) })
+    ] })
+  ] });
+};
+const GenerateImage = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(admin.Page.Main, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Title, { children: "Generar imagen con IA" }),
+    /* @__PURE__ */ jsxRuntime.jsx(GenerateImageContainer, {})
+  ] });
+};
+const sceneSchema = Yup__namespace.object().shape({
+  prompt: Yup__namespace.string().trim().required("El prompt es obligatorio para esta escena"),
+  durationSeconds: Yup__namespace.number().min(1, "La duración mínima es 1 segundo").max(90, "La duración máxima es 90 segundos").required("La duración es obligatoria"),
+  referenceImages: Yup__namespace.array().of(
+    Yup__namespace.object().shape({
+      id: Yup__namespace.number().required(),
+      file: Yup__namespace.mixed().optional(),
+      previewUrl: Yup__namespace.string().optional()
+    })
+  ).max(3, "Se permiten máximo 3 imágenes de referencia por escena").optional()
+});
+const validationSchema = Yup__namespace.object().shape({
+  aspectRatio: Yup__namespace.string().oneOf(["16:9", "9:16", "1:1"], "Aspect ratio no válido").required("El aspect ratio es obligatorio"),
+  scenes: Yup__namespace.array().of(sceneSchema).min(1, "Debe haber al menos una escena").max(20, "No se permiten más de 20 escenas")
+});
+const initialValues = {
+  aspectRatio: "16:9",
+  scenes: [
+    {
+      prompt: ``,
+      durationSeconds: 8,
+      narrationText: ``,
+      referenceImages: []
+    }
+  ]
+};
+const Form = ({ onSubmit }) => {
+  const formik$1 = formik.useFormik({
+    initialValues,
+    validationSchema,
+    validateOnMount: true,
+    onSubmit
+  });
+  console.log("🚀 ~ Form ~ formik:", formik$1.errors);
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 6, hasRadius: true, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: formik$1.handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: "aspectRatio", width: "100%", required: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Relación de aspecto" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Combobox,
+        {
+          name: "aspectRatio",
+          onChange: (value) => formik$1.setFieldValue("aspectRatio", value),
+          onBlur: () => formik$1.setFieldTouched("aspectRatio", true),
+          value: formik$1.values.aspectRatio,
+          onClear: () => formik$1.setFieldValue("aspectRatio", ""),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: "16:9", children: "16:9" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: "9:16", children: "9:16" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: "1:1", children: "1:1" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, { children: formik$1.errors.aspectRatio })
+    ] }) }),
+    formik$1.values.scenes.map((scene, index2) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral100", padding: 4, hasRadius: true, width: "100%", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+          "Escena ",
+          index2 + 1
+        ] }),
+        formik$1.values.scenes.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            variant: "danger-light",
+            onClick: () => {
+              const updatedScenes = [...formik$1.values.scenes];
+              updatedScenes.splice(index2, 1);
+              formik$1.setFieldValue("scenes", updatedScenes);
+            },
+            children: "Eliminar Escena"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: `scenes.${index2}.prompt`, width: "100%", required: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Prompt de la escena" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Textarea,
+            {
+              name: `scenes.${index2}.prompt`,
+              placeholder: "Describe visualmente esta escena",
+              onChange: formik$1.handleChange,
+              onBlur: formik$1.handleBlur,
+              value: formik$1.values.scenes[index2].prompt,
+              rows: 6
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: `scenes.${index2}.durationSeconds`, width: "100%", required: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Duración (segundos)" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Combobox,
+            {
+              name: `scenes.${index2}.durationSeconds`,
+              onChange: (value) => formik$1.setFieldValue(`scenes.${index2}.durationSeconds`, value),
+              onBlur: formik$1.handleBlur,
+              value: formik$1.values.scenes[index2].durationSeconds,
+              onClear: () => formik$1.setFieldValue(`scenes.${index2}.durationSeconds`, ""),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: 4, children: "4" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: 6, children: "6" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: 8, children: "8" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: `scenes.${index2}.referenceImages`, width: "100%", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Imagen(es) de referencia" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, width: "100%", children: [
+            scene.referenceImages.map((image, imgIndex) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral200", padding: 2, hasRadius: true, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+              image.previewUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: image.previewUrl, alt: "preview", style: { width: 50, height: 50, objectFit: "cover" } }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 50, height: 50, backgroundColor: "#ccc" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.IconButton,
+                {
+                  onClick: () => {
+                    const imageToRemove = scene.referenceImages[imgIndex];
+                    if (imageToRemove.previewUrl) {
+                      URL.revokeObjectURL(imageToRemove.previewUrl);
+                    }
+                    const updatedImages = [...scene.referenceImages];
+                    updatedImages.splice(imgIndex, 1);
+                    formik$1.setFieldValue(`scenes.${index2}.referenceImages`, updatedImages);
+                  },
+                  label: "Eliminar imagen",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
+                }
+              )
+            ] }) }, image.id)),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Button,
+              {
+                type: "button",
+                startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.PlusCircle, {}),
+                variant: "secondary",
+                fullWidth: true,
+                onClick: () => {
+                  const input = document.createElement("input");
+                  input.type = "file";
+                  input.accept = "image/*";
+                  input.onchange = (e) => {
+                    const selectedFile = e.target.files?.[0];
+                    if (!selectedFile) return;
+                    const newImage = {
+                      id: Date.now(),
+                      file: selectedFile,
+                      previewUrl: URL.createObjectURL(selectedFile)
+                    };
+                    const newImages = [...scene.referenceImages, newImage];
+                    formik$1.setFieldValue(`scenes.${index2}.referenceImages`, newImages.slice(0, 5));
+                  };
+                  input.click();
+                },
+                disabled: scene.referenceImages.length >= 5,
+                children: "Añadir imagen de referencia"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }, index2) }, `scene-${index2}`)),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Button,
+      {
+        type: "button",
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.PlusCircle, {}),
+        variant: "secondary",
+        onClick: () => {
+          formik$1.setFieldValue("scenes", [
+            ...formik$1.values.scenes,
+            { prompt: "", durationSeconds: 6, narrationText: "", referenceImages: [] }
+          ]);
+        },
+        fullWidth: true,
+        children: "Añadir Escena"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { width: "100%", justifyContent: "end", alignItems: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Button,
+      {
+        type: "submit",
+        fullWidth: true,
+        disabled: !(formik$1.isValid && formik$1.dirty) || formik$1.isSubmitting,
+        loading: formik$1.isSubmitting,
+        children: "Generar Video"
+      }
+    ) }) })
+  ] }) }) });
+};
+const GenerateVideoContainer = () => {
+  const { toggleNotification } = admin.useNotification();
+  const { generateVideoWithScenes } = useImages$1();
+  const { formatMessage } = reactIntl.useIntl();
+  const handleSubmit = async (values, { setSubmitting }) => {
+    try {
+      const formData = new FormData();
+      formData.append("aspectRatio", values.aspectRatio);
+      values.scenes.forEach((scene, index2) => {
+        formData.append(`scenes[${index2}][prompt]`, scene.prompt);
+        formData.append(`scenes[${index2}][durationSeconds]`, scene.durationSeconds.toString());
+        formData.append(`scenes[${index2}][narrationText]`, scene.narrationText || "");
+        scene.referenceImages.forEach((image, imgIndex) => {
+          if (image.file) {
+            formData.append(`scenes[${index2}][referenceImages][${imgIndex}]`, image.file);
+          }
+        });
+      });
+      const response = await generateVideoWithScenes(formData);
+      console.log("🚀 ~ handleSubmit ~ response:", response);
+      toggleNotification({
+        type: "success",
+        message: formatMessage({
+          id: `${index.PLUGIN_ID}.config.load.success`,
+          defaultMessage: "Video generado con éxito"
+        })
+      });
+    } catch (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: `${index.PLUGIN_ID}.config.load.error`,
+          defaultMessage: "Ocurrió un error al generar el video"
+        })
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { padding: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "start", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", children: "Generar video con IA" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { padding: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 2 }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 8, children: /* @__PURE__ */ jsxRuntime.jsx(Form, { onSubmit: handleSubmit }) })
+    ] })
+  ] });
+};
+const GenerateVideo = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(admin.Page.Main, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Title, { children: "Generar video con IA" }),
+    /* @__PURE__ */ jsxRuntime.jsx(GenerateVideoContainer, {})
+  ] });
+};
 const App = () => {
   const { allowedActions, isLoading } = admin.useRBAC(index.pluginPermissions);
   if (isLoading) {
@@ -1223,7 +1744,11 @@ const App = () => {
         /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
           allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(HomePage, {}) }),
           allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-content", element: /* @__PURE__ */ jsxRuntime.jsx(GenerateContent, {}) }),
-          allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-images", element: /* @__PURE__ */ jsxRuntime.jsx(GenerateImages, {}) }),
+          allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-images", element: /* @__PURE__ */ jsxRuntime.jsx(GenerateImages, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-image", element: /* @__PURE__ */ jsxRuntime.jsx(GenerateImage, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-video", element: /* @__PURE__ */ jsxRuntime.jsx(GenerateVideo, {}) })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Error, {}) })
         ] })
       ] })

package/dist/_chunks/{Settings-DuGbtyWC.js → Settings-BEtewXxk.js}

@@ -7,8 +7,8 @@ const react = require("react");
 const designSystem = require("@strapi/design-system");
 const formik = require("formik");
 const Yup = require("yup");
-const index = require("./index-BVGbP3E-.js");
-const getTranslation = require("./getTranslation-CacX7ZX5.js");
+const index = require("./index-D4lanCw0.js");
+const getTranslation = require("./getTranslation-C1jZiBcc.js");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/_chunks/{Settings-B60QGKK4.mjs → Settings-Bc5rcMRs.mjs}

@@ -5,8 +5,8 @@ import { useCallback, useState, useEffect } from "react";
 import { Box, Grid, Field, Flex, Button, DesignSystemProvider, Typography } from "@strapi/design-system";
 import { Formik } from "formik";
 import * as Yup from "yup";
-import { P as PLUGIN_ID } from "./index-B2RuvYul.mjs";
-import { g as getTranslation } from "./getTranslation-B97xbmEl.mjs";
+import { P as PLUGIN_ID } from "./index-K1A2opOE.mjs";
+import { g as getTranslation } from "./getTranslation-D3pA_57E.mjs";
 const useSettings = () => {
   const { get, post } = useFetchClient();
   const getSettings = useCallback(

package/dist/_chunks/{getTranslation-CacX7ZX5.js → getTranslation-C1jZiBcc.js}

@@ -1,4 +1,4 @@
 "use strict";
-const index = require("./index-BVGbP3E-.js");
+const index = require("./index-D4lanCw0.js");
 const getTranslation = (id) => `${index.PLUGIN_ID}.${id}`;
 exports.getTranslation = getTranslation;

package/dist/_chunks/{getTranslation-B97xbmEl.mjs → getTranslation-D3pA_57E.mjs}

@@ -1,4 +1,4 @@
-import { P as PLUGIN_ID } from "./index-B2RuvYul.mjs";
+import { P as PLUGIN_ID } from "./index-K1A2opOE.mjs";
 const getTranslation = (id) => `${PLUGIN_ID}.${id}`;
 export {
   getTranslation as g