@interware/content-generator 0.2.1 → 0.3.0

package/README.md

@@ -1,3 +1,45 @@
 # strapi-content-generator-gemini
 
 Plugin to generate content with Gemini AI
+
+# SPEECH
+
+# AUDIO PROFILE: IW Robot.
+## "Te presentamos"
+
+## THE SCENE: Promotional Video
+YouTube, social media, you explain the IW Robot product, its capabilities, functionalities, integrations, benefits, you want to awaken people's interest in the product.
+
+### DIRECTOR'S NOTES
+Style:
+* The "Vocal Smile": The voice conveys a smile and enthusiasm. Its tone is bright, warm, and friendly, inviting the viewer to learn about the product
+* At the end of the speech, use a farewell tone.
+* Don't pronounce IW Robot like an English speaker, but like they would in Mexican Spanish.
+
+Rhythm: Energetic and vibrant, with a fast-paced rhythm like the background music. Information is presented quickly, with smooth transitions and strategic pauses between each function to highlight its benefits.
+
+Accent: México, Ciudad de México
+
+### SAMPLE CONTEXT
+IW Robot is an RPA that creates a digital workforce that automates manual and semi-automatic tasks, allowing effortless control and operating 24/7.
+
+#### TRANSCRIPT
+Es una herramienta avanzada de automatización, monitoreo y observabilidad, que  optimiza las operaciones diarias de tu empresa de manera autónoma y adaptable  a tus necesidades.
+
+IW Robot Monitorea aplicaciones y servicios críticos.
+
+Detecta eventos en tiempo real.
+
+Notifica de manera instantánea a cualquier aplicación de mensajería.
+
+Genera reportes/ con análisis del rendimiento.
+
+Se integra con cualquier IA.
+
+Personalizable / a tus necesidades.
+
+Porque los procesos no pueden esperar. IW Robot te da visibilidad, eficiencia y tranquilidad.
+
+IW Robot: Tu caja de herramientas digital a la medida.
+
+- Autonoe

package/dist/_chunks/{App-Cbkccs2K.mjs → App-ClgJldBv.mjs}

@@ -2,12 +2,12 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useRBAC, useFetchClient, useNotification, Page } from "@strapi/strapi/admin";
 import { SubNav, SubNavHeader, SubNavSections, SubNavSection, SubNavLink, Box, Table, Thead, Tr, Th, Typography, Flex, Tbody, Td, Button, LinkButton, Dialog, Grid, Field, Textarea, TextInput, Combobox, ComboboxOption, Modal, Card, CardHeader, CardCheckbox, CardAsset, CardBody, CardContent, CardTitle, CardSubtitle, CardBadge, CardAction, IconButton, DesignSystemProvider } from "@strapi/design-system";
 import { useLocation, useNavigate, Routes, Route } from "react-router-dom";
-import { p as pluginPermissions, c as closeDialog, o as openDialog, P as PLUGIN_ID } from "./index-B2RuvYul.mjs";
+import { p as pluginPermissions, c as closeDialog, o as openDialog, P as PLUGIN_ID } from "./index-K1A2opOE.mjs";
 import { useIntl } from "react-intl";
 import { useCallback, memo, useMemo, useState, useRef, useEffect, createContext, useContext } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Play, ExternalLink, Image as Image$1, Download, Trash } from "@strapi/icons";
-import { g as getTranslation } from "./getTranslation-B97xbmEl.mjs";
+import { Play, ExternalLink, Image as Image$1, Download, Trash, PlusCircle } from "@strapi/icons";
+import { g as getTranslation } from "./getTranslation-D3pA_57E.mjs";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 const links = [
@@ -568,24 +568,24 @@ const useUsers = () => {
     getUsers
   };
 };
-const validationSchema = Yup.object().shape({
+const validationSchema$2 = Yup.object().shape({
   titulo: Yup.string().notRequired(),
   autor: Yup.string().required("Este campo es obligatorio"),
   categoria: Yup.string().required("Este campo es obligatorio"),
   temperatura: Yup.string().notRequired(),
   instrucciones: Yup.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 = useFormik({
-    initialValues,
-    validationSchema,
+    initialValues: initialValues$1,
+    validationSchema: validationSchema$2,
     onSubmit
   });
   const { values, errors, touched, isValid, dirty, isSubmitting, handleChange, setFieldValue, handleSubmit } = formik;
@@ -843,7 +843,7 @@ const GenerateContentContainer = () => {
         /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
       ] }) }),
       /* @__PURE__ */ jsx(Grid.Item, { m: 12, children: /* @__PURE__ */ jsx(Flex, { alignItems: "end", width: "100%", justifyContent: "end", children: /* @__PURE__ */ jsx(LinkButton, { href: "/admin/plugins/strapi-content-generator-gemini", children: "Regresar" }) }) }),
-      /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(Form, { categorias, users, onSubmit }) })
+      /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(Form$2, { categorias, users, onSubmit }) })
     ] })
   ] });
 };
@@ -854,7 +854,7 @@ const GenerateContent = () => {
   ] });
 };
 const useImages$1 = () => {
-  const { get, del } = useFetchClient();
+  const { get, del, post } = useFetchClient();
   const getImages = useCallback(
     async () => {
       return await get("/strapi-content-generator-gemini/images");
@@ -867,9 +867,23 @@ const useImages$1 = () => {
     },
     [del]
   );
+  const generateImageWithConfig = useCallback(
+    async (data, config) => {
+      return await post("/strapi-content-generator-gemini/generate-image-with-config", data, config);
+    },
+    [post]
+  );
+  const generateVideoWithScenes = 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";
@@ -1172,9 +1186,10 @@ const Images = () => {
 const GenerateImagesContainer = () => {
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ImagesProvider, { children: /* @__PURE__ */ jsxs(Grid.Root, { padding: 6, children: [
     /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "alpha", children: "Generar imagenes con IA" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "alpha", children: "Generar imagenes y videos con IA" }),
       /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
     ] }) }),
+    /* @__PURE__ */ jsx(Grid.Item, { m: 12, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "end", alignItems: "end", gap: 3, width: "100%", children: /* @__PURE__ */ jsx(LinkButton, { href: "/admin/plugins/strapi-content-generator-gemini/generate-image", children: "Generar nueva imagen" }) }) }),
     /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(Images, {}) })
   ] }) }) });
 };
@@ -1184,6 +1199,512 @@ const GenerateImages = () => {
     /* @__PURE__ */ 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.object({
+  prompt: Yup.string().required("El prompt es requerido"),
+  aspectRatio: Yup.string().required("La relación de aspecto es requerida"),
+  imageSize: Yup.string().required("El tamaño de la imagen es requerido")
+});
+const Form$1 = ({ onSubmit }) => {
+  const [referenceImages, setReferenceImages] = useState([]);
+  const individualFileInputRefs = useRef({});
+  const newImageFileInputRef = useRef(null);
+  const 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__ */ jsx(Box, { background: "neutral0", padding: 6, hasRadius: true, width: "100%", children: /* @__PURE__ */ jsx("form", { onSubmit: formik.handleSubmit, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Grid.Item, { m: 12, children: /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        id: "prompt",
+        width: "100%",
+        required: true,
+        children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: "Prompt de la imagen" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              name: "prompt",
+              placeholder: "Ej: Un paisaje futurista de la Ciudad de México con neones.",
+              onChange: formik.handleChange,
+              onBlur: formik.handleBlur,
+              value: formik.values.prompt,
+              rows: 12
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid.Item, { m: 12, children: /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        id: "imagen-referencia",
+        width: "100%",
+        children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: "Imagen(es) de referencia" }),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, width: "100%", children: [
+            referenceImages.map((image) => /* @__PURE__ */ jsx(Box, { background: "neutral100", padding: 3, hasRadius: true, width: "100%", children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", gap: 3, width: "100%", children: [
+              /* @__PURE__ */ jsx(Box, { background: "primary100", padding: 1, children: image.previewUrl ? /* @__PURE__ */ jsx("img", { src: image.previewUrl, alt: "preview", style: { width: "50px", height: "50px", objectFit: "cover" } }) : /* @__PURE__ */ jsx("div", { style: { width: "50px", height: "50px", backgroundColor: "#ccc" } }) }),
+              /* @__PURE__ */ jsxs("div", { style: { flexGrow: 2 }, children: [
+                /* @__PURE__ */ 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__ */ jsx(
+                  Button,
+                  {
+                    onClick: () => individualFileInputRefs.current[image.id]?.click(),
+                    startIcon: image.file ? void 0 : /* @__PURE__ */ jsx(PlusCircle, {}),
+                    variant: "secondary",
+                    fullWidth: true,
+                    children: image.file ? image.file.name : "Seleccionar archivo"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(IconButton, { onClick: () => handleRemoveImage(image.id), label: "Eliminar imagen", children: /* @__PURE__ */ jsx(Trash, {}) })
+            ] }) }, image.id)),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "file",
+                accept: "image/*",
+                ref: newImageFileInputRef,
+                style: { display: "none" },
+                onChange: handleNewImageFileChange
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                startIcon: /* @__PURE__ */ jsx(PlusCircle, {}),
+                variant: "secondary",
+                fullWidth: true,
+                onClick: handleAddImage,
+                disabled: referenceImages.length >= 5,
+                children: "Añadir imagen de referencia"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Field.Error, {}),
+          /* @__PURE__ */ jsx(Field.Hint, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid.Item, { m: 12, children: /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        id: "aspectRatio",
+        width: "100%",
+        required: true,
+        children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: "Relación de aspecto" }),
+          /* @__PURE__ */ jsx(
+            Combobox,
+            {
+              name: "aspectRatio",
+              onChange: (value) => formik.setFieldValue("aspectRatio", value),
+              onBlur: () => formik.setFieldTouched("aspectRatio", true),
+              value: formik.values.aspectRatio,
+              onClear: () => formik.setFieldValue("aspectRatio", ""),
+              children: aspectRatioOptions.map((option) => /* @__PURE__ */ jsx(ComboboxOption, { value: option.value, children: option.label }, option.value))
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid.Item, { m: 12, children: /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        id: "imageSize",
+        error: formik.touched.imageSize && formik.errors.imageSize ? formik.errors.imageSize : void 0,
+        width: "100%",
+        required: true,
+        children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: "Tamaño de la imagen" }),
+          /* @__PURE__ */ jsxs(
+            Combobox,
+            {
+              name: "imageSize",
+              onChange: (value) => formik.setFieldValue("imageSize", value),
+              onBlur: () => formik.setFieldTouched("imageSize", true),
+              value: formik.values.imageSize,
+              onClear: () => formik.setFieldValue("imageSize", ""),
+              children: [
+                /* @__PURE__ */ jsx(ComboboxOption, { value: "1K", children: "1K" }),
+                /* @__PURE__ */ jsx(ComboboxOption, { value: "2K", children: "2K" }),
+                /* @__PURE__ */ jsx(ComboboxOption, { value: "4K", children: "4K" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Field.Error, { children: formik.errors.imageSize })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsx(Flex, { width: "100%", justifyContent: "end", alignItems: "end", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "submit",
+        fullWidth: true,
+        disabled: !(formik.isValid && formik.dirty) || formik.isSubmitting,
+        loading: formik.isSubmitting,
+        children: "Generar imagen"
+      }
+    ) }) })
+  ] }) }) });
+};
+const GenerateImageContainer = () => {
+  const { toggleNotification } = useNotification();
+  const { generateImageWithConfig } = useImages$1();
+  const { formatMessage } = 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, index) => {
+        if (img.file) {
+          formData.append(`referenceImages[${index}]`, img.file);
+        }
+      });
+      const response = await generateImageWithConfig(formData);
+      toggleNotification({
+        type: "success",
+        message: formatMessage({
+          id: `${PLUGIN_ID}.config.load.success`,
+          defaultMessage: "Imagen generada con éxito"
+        })
+      });
+    } catch (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: `${PLUGIN_ID}.config.load.error`,
+          defaultMessage: "Ocurrió un error al generar la imagen"
+        })
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Grid.Root, { padding: 6, children: /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "alpha", children: "Generar imagen con IA" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
+    ] }) }) }),
+    /* @__PURE__ */ jsxs(Grid.Root, { padding: 6, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { m: 2 }),
+      /* @__PURE__ */ jsx(Grid.Item, { m: 8, children: /* @__PURE__ */ jsx(Form$1, { onSubmit: handleSubmit }) })
+    ] })
+  ] });
+};
+const GenerateImage = () => {
+  return /* @__PURE__ */ jsxs(Page.Main, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: "Generar imagen con IA" }),
+    /* @__PURE__ */ jsx(GenerateImageContainer, {})
+  ] });
+};
+const sceneSchema = Yup.object().shape({
+  prompt: Yup.string().trim().required("El prompt es obligatorio para esta escena"),
+  durationSeconds: Yup.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.array().of(
+    Yup.object().shape({
+      id: Yup.number().required(),
+      file: Yup.mixed().optional(),
+      previewUrl: Yup.string().optional()
+    })
+  ).max(3, "Se permiten máximo 3 imágenes de referencia por escena").optional()
+});
+const validationSchema = Yup.object().shape({
+  aspectRatio: Yup.string().oneOf(["16:9", "9:16", "1:1"], "Aspect ratio no válido").required("El aspect ratio es obligatorio"),
+  scenes: Yup.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 = useFormik({
+    initialValues,
+    validationSchema,
+    validateOnMount: true,
+    onSubmit
+  });
+  console.log("🚀 ~ Form ~ formik:", formik.errors);
+  return /* @__PURE__ */ jsx(Box, { background: "neutral0", padding: 6, hasRadius: true, width: "100%", children: /* @__PURE__ */ jsx("form", { onSubmit: formik.handleSubmit, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Grid.Item, { m: 12, children: /* @__PURE__ */ jsxs(Field.Root, { id: "aspectRatio", width: "100%", required: true, children: [
+      /* @__PURE__ */ jsx(Field.Label, { children: "Relación de aspecto" }),
+      /* @__PURE__ */ jsxs(
+        Combobox,
+        {
+          name: "aspectRatio",
+          onChange: (value) => formik.setFieldValue("aspectRatio", value),
+          onBlur: () => formik.setFieldTouched("aspectRatio", true),
+          value: formik.values.aspectRatio,
+          onClear: () => formik.setFieldValue("aspectRatio", ""),
+          children: [
+            /* @__PURE__ */ jsx(ComboboxOption, { value: "16:9", children: "16:9" }),
+            /* @__PURE__ */ jsx(ComboboxOption, { value: "9:16", children: "9:16" }),
+            /* @__PURE__ */ jsx(ComboboxOption, { value: "1:1", children: "1:1" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Error, { children: formik.errors.aspectRatio })
+    ] }) }),
+    formik.values.scenes.map((scene, index) => /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(Box, { background: "neutral100", padding: 4, hasRadius: true, width: "100%", children: [
+      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: [
+        /* @__PURE__ */ jsxs("strong", { children: [
+          "Escena ",
+          index + 1
+        ] }),
+        formik.values.scenes.length > 1 && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "danger-light",
+            onClick: () => {
+              const updatedScenes = [...formik.values.scenes];
+              updatedScenes.splice(index, 1);
+              formik.setFieldValue("scenes", updatedScenes);
+            },
+            children: "Eliminar Escena"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
+        /* @__PURE__ */ jsxs(Field.Root, { id: `scenes.${index}.prompt`, width: "100%", required: true, children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: "Prompt de la escena" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              name: `scenes.${index}.prompt`,
+              placeholder: "Describe visualmente esta escena",
+              onChange: formik.handleChange,
+              onBlur: formik.handleBlur,
+              value: formik.values.scenes[index].prompt,
+              rows: 6
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { id: `scenes.${index}.durationSeconds`, width: "100%", required: true, children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: "Duración (segundos)" }),
+          /* @__PURE__ */ jsxs(
+            Combobox,
+            {
+              name: `scenes.${index}.durationSeconds`,
+              onChange: (value) => formik.setFieldValue(`scenes.${index}.durationSeconds`, value),
+              onBlur: formik.handleBlur,
+              value: formik.values.scenes[index].durationSeconds,
+              onClear: () => formik.setFieldValue(`scenes.${index}.durationSeconds`, ""),
+              children: [
+                /* @__PURE__ */ jsx(ComboboxOption, { value: 4, children: "4" }),
+                /* @__PURE__ */ jsx(ComboboxOption, { value: 6, children: "6" }),
+                /* @__PURE__ */ jsx(ComboboxOption, { value: 8, children: "8" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { id: `scenes.${index}.referenceImages`, width: "100%", children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: "Imagen(es) de referencia" }),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, width: "100%", children: [
+            scene.referenceImages.map((image, imgIndex) => /* @__PURE__ */ jsx(Box, { background: "neutral200", padding: 2, hasRadius: true, width: "100%", children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+              image.previewUrl ? /* @__PURE__ */ jsx("img", { src: image.previewUrl, alt: "preview", style: { width: 50, height: 50, objectFit: "cover" } }) : /* @__PURE__ */ jsx("div", { style: { width: 50, height: 50, backgroundColor: "#ccc" } }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  onClick: () => {
+                    const imageToRemove = scene.referenceImages[imgIndex];
+                    if (imageToRemove.previewUrl) {
+                      URL.revokeObjectURL(imageToRemove.previewUrl);
+                    }
+                    const updatedImages = [...scene.referenceImages];
+                    updatedImages.splice(imgIndex, 1);
+                    formik.setFieldValue(`scenes.${index}.referenceImages`, updatedImages);
+                  },
+                  label: "Eliminar imagen",
+                  children: /* @__PURE__ */ jsx(Trash, {})
+                }
+              )
+            ] }) }, image.id)),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                startIcon: /* @__PURE__ */ jsx(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.setFieldValue(`scenes.${index}.referenceImages`, newImages.slice(0, 5));
+                  };
+                  input.click();
+                },
+                disabled: scene.referenceImages.length >= 5,
+                children: "Añadir imagen de referencia"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }, index) }, `scene-${index}`)),
+    /* @__PURE__ */ jsx(Grid.Item, { m: 12, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        startIcon: /* @__PURE__ */ jsx(PlusCircle, {}),
+        variant: "secondary",
+        onClick: () => {
+          formik.setFieldValue("scenes", [
+            ...formik.values.scenes,
+            { prompt: "", durationSeconds: 6, narrationText: "", referenceImages: [] }
+          ]);
+        },
+        fullWidth: true,
+        children: "Añadir Escena"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsx(Flex, { width: "100%", justifyContent: "end", alignItems: "end", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "submit",
+        fullWidth: true,
+        disabled: !(formik.isValid && formik.dirty) || formik.isSubmitting,
+        loading: formik.isSubmitting,
+        children: "Generar Video"
+      }
+    ) }) })
+  ] }) }) });
+};
+const GenerateVideoContainer = () => {
+  const { toggleNotification } = useNotification();
+  const { generateVideoWithScenes } = useImages$1();
+  const { formatMessage } = useIntl();
+  const handleSubmit = async (values, { setSubmitting }) => {
+    try {
+      const formData = new FormData();
+      formData.append("aspectRatio", values.aspectRatio);
+      values.scenes.forEach((scene, index) => {
+        formData.append(`scenes[${index}][prompt]`, scene.prompt);
+        formData.append(`scenes[${index}][durationSeconds]`, scene.durationSeconds.toString());
+        formData.append(`scenes[${index}][narrationText]`, scene.narrationText || "");
+        scene.referenceImages.forEach((image, imgIndex) => {
+          if (image.file) {
+            formData.append(`scenes[${index}][referenceImages][${imgIndex}]`, image.file);
+          }
+        });
+      });
+      const response = await generateVideoWithScenes(formData);
+      console.log("🚀 ~ handleSubmit ~ response:", response);
+      toggleNotification({
+        type: "success",
+        message: formatMessage({
+          id: `${PLUGIN_ID}.config.load.success`,
+          defaultMessage: "Video generado con éxito"
+        })
+      });
+    } catch (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: `${PLUGIN_ID}.config.load.error`,
+          defaultMessage: "Ocurrió un error al generar el video"
+        })
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Grid.Root, { padding: 6, children: /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "alpha", children: "Generar video con IA" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
+    ] }) }) }),
+    /* @__PURE__ */ jsxs(Grid.Root, { padding: 6, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { m: 2 }),
+      /* @__PURE__ */ jsx(Grid.Item, { m: 8, children: /* @__PURE__ */ jsx(Form, { onSubmit: handleSubmit }) })
+    ] })
+  ] });
+};
+const GenerateVideo = () => {
+  return /* @__PURE__ */ jsxs(Page.Main, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: "Generar video con IA" }),
+    /* @__PURE__ */ jsx(GenerateVideoContainer, {})
+  ] });
+};
 const App = () => {
   const { allowedActions, isLoading } = useRBAC(pluginPermissions);
   if (isLoading) {
@@ -1203,7 +1724,11 @@ const App = () => {
         /* @__PURE__ */ jsxs(Routes, { children: [
           allowedActions.canAccess && /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(HomePage, {}) }),
           allowedActions.canAccess && /* @__PURE__ */ jsx(Route, { path: "/generate-content", element: /* @__PURE__ */ jsx(GenerateContent, {}) }),
-          allowedActions.canAccess && /* @__PURE__ */ jsx(Route, { path: "/generate-images", element: /* @__PURE__ */ jsx(GenerateImages, {}) }),
+          allowedActions.canAccess && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Route, { path: "/generate-images", element: /* @__PURE__ */ jsx(GenerateImages, {}) }),
+            /* @__PURE__ */ jsx(Route, { path: "/generate-image", element: /* @__PURE__ */ jsx(GenerateImage, {}) }),
+            /* @__PURE__ */ jsx(Route, { path: "/generate-video", element: /* @__PURE__ */ jsx(GenerateVideo, {}) })
+          ] }),
           /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Page.Error, {}) })
         ] })
       ] })