function NavigationControls({ currentSlide, totalSlides, onPrevious, onNext }) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-6 p-4 bg-white dark:bg-gray-900 rounded-xl w-full max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onPrevious, disabled: currentSlide <= 1, className: `inline-block px-6 py-2 rounded-lg font-inter font-medium text-white ${currentSlide <= 1 ? "bg-gray-400 cursor-not-allowed" : "bg-blue-600 hover:bg-blue-700 active:bg-blue-800"}`, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left mr-2", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), "Anterior"), /*#__PURE__*/ React.createElement("div", { className: "font-inter text-lg font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, currentSlide, " / ", totalSlides), /*#__PURE__*/ React.createElement("button", { onClick: onNext, disabled: currentSlide >= totalSlides, className: `inline-block px-6 py-2 rounded-lg font-inter font-medium text-white ${currentSlide >= totalSlides ? "bg-gray-400 cursor-not-allowed" : "bg-blue-600 hover:bg-blue-700 active:bg-blue-800"}`, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "Siguiente", /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right ml-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }))); } function NavigationControlsStory() { const cases = [ { currentSlide: 1, totalSlides: 5 }, { currentSlide: 3, totalSlides: 5 }, { currentSlide: 5, totalSlides: 5 } ]; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, cases.map((props, index)=>/*#__PURE__*/ React.createElement(NavigationControls, { key: index, ...props, onPrevious: ()=>console.log("Previous clicked"), onNext: ()=>console.log("Next clicked"), __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }))); } function Slide({ title, imageUrl, description, transitionType = "fade" }) { const [error, setError] = useState(null); const [imageLoaded, setImageLoaded] = useState(false); const [isVisible, setIsVisible] = useState(false); useEffect(()=>{ setIsVisible(true); return ()=>setIsVisible(false); }, [ title ]); const handleImageError = ()=>{ setError("Error al cargar la imagen"); console.error("Error al cargar la imagen"); }; const getTransitionClasses = ()=>{ const baseClasses = "transform transition-all duration-1000"; const visibleClass = "opacity-100 translate-x-0 rotate-0 scale-100"; if (!isVisible) { switch(transitionType){ case "rotate": return `${baseClasses} opacity-0 -rotate-180 scale-50`; case "flip": return `${baseClasses} opacity-0 rotateY-180 scale-50`; case "zoom": return `${baseClasses} opacity-0 scale-0`; case "slide": return `${baseClasses} opacity-0 translate-x-full`; default: return `${baseClasses} opacity-0`; } } return `${baseClasses} ${visibleClass}`; }; return /*#__PURE__*/ React.createElement("div", { className: "perspective-1000", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-full max-w-4xl mx-auto ${getTransitionClasses()}`, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-900 rounded-xl shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6 font-inter", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-700 dark:text-gray-300 font-inter leading-relaxed", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, description)), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, !imageLoaded && !error && /*#__PURE__*/ React.createElement("div", { className: "animate-pulse bg-gray-200 dark:bg-gray-700 rounded-xl h-[400px]", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 dark:text-red-400 text-center py-8", __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }, error), /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: title, className: `w-full h-[400px] object-cover rounded-xl ${!imageLoaded && "hidden"}`, onLoad: ()=>setImageLoaded(true), onError: handleImageError, loading: "eager", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }))))))); } function SlideStory() { const sampleData = { title: "Introducción a la Inteligencia Artificial", description: "La inteligencia artificial (IA) es la simulación de procesos de inteligencia humana por parte de máquinas, especialmente sistemas informáticos. Estos procesos incluyen el aprendizaje, el razonamiento y la autocorrección.", imageUrl: "https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg" }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-4", __source: { fileName: "", lineNumber: 95, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Slide, { ...sampleData, transitionType: "fade", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Slide, { ...sampleData, transitionType: "rotate", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Slide, { ...sampleData, transitionType: "flip", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Slide, { ...sampleData, transitionType: "zoom", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Slide, { ...sampleData, transitionType: "slide", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this })); } function MainComponent() { const [topic, setTopic] = useState(""); const [slides, setSlides] = useState([]); const [currentSlide, setCurrentSlide] = useState(1); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [loadingMessage, setLoadingMessage] = useState(""); const [currentTransitionEffect, setCurrentTransitionEffect] = useState(0); const [numSlides, setNumSlides] = useState(5); const [imageHistory, setImageHistory] = useState({}); const transitionEffects = [ "rotate", "flip", "zoom", "slide" ]; const resetPresentation = ()=>{ setTopic(""); setSlides([]); setCurrentSlide(1); setError(null); setLoadingMessage(""); setCurrentTransitionEffect(0); setNumSlides(5); setImageHistory({}); }; const generateSlides = async ()=>{ if (!topic.trim()) { setError("Por favor, ingresa un tema"); return; } setLoading(true); setError(null); setLoadingMessage("Generando contenido..."); try { const response = await fetch("/api/generate-presentation", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ topic: topic.trim(), numSlides: Number(numSlides) }) }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || "Error al generar el contenido"); } if (!data.slides || !Array.isArray(data.slides)) { throw new Error("Formato de respuesta inválido"); } const validatedSlides = data.slides.map((slide, index)=>({ title: String(slide.title || `Diapositiva ${index + 1}`), description: String(slide.description || `Contenido ${index + 1}`), imageSeed: Math.floor(Math.random() * (1000 - 10 + 1)) + 10 })); setSlides(validatedSlides); setCurrentSlide(1); setImageHistory({}); } catch (err) { console.error("Error:", err); setError(`Error: ${err.message}. Por favor, intenta de nuevo.`); } finally{ setLoading(false); setLoadingMessage(""); } }; const handleExport = async (format)=>{ if (!slides.length) { setError("No hay diapositivas para exportar"); return; } try { setLoading(true); setLoadingMessage(`Preparando exportación a ${format}...`); setError(null); const exportSlides = slides.map((slide)=>({ title: slide.title, description: slide.description, imageUrl: `https://image.pollinations.ai/prompt/${encodeURIComponent(slide.title)}` })); setLoadingMessage(`Generando archivo ${format}...`); const response = await fetch("/api/export", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ slides: exportSlides }) }); if (!response.ok) { throw new Error(`Error en la conexión al servidor: ${response.statusText}`); } const data = await response.json(); if (!data.base64) { throw new Error("No se recibieron los datos del archivo"); } setLoadingMessage(`Preparando descarga de ${format}...`); const link = document.createElement("a"); link.href = `data:${data.mimeType || "application/octet-stream"};base64,${data.base64}`; link.download = data.filename || `presentacion.${format}`; document.body.appendChild(link); link.click(); document.body.removeChild(link); setLoadingMessage(`¡La exportación a ${format} se completó con éxito!`); setTimeout(()=>setLoadingMessage(""), 3000); } catch (err) { console.error("Error durante la exportación:", err); setError(`Error en la exportación a ${format}: ${err.message}`); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 dark:bg-gray-800 py-8 px-4", __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-900 rounded-xl p-6 shadow-lg", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: topic, onChange: (e)=>setTopic(e.target.value), placeholder: "Ingresa el tema de tu presentación", className: "flex-grow px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: numSlides, onChange: (e)=>setNumSlides(Number(e.target.value)), className: "px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, [ 3, 4, 5, 6, 7, 8, 9, 10 ].map((num)=>/*#__PURE__*/ React.createElement("option", { key: num, value: num, __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, num, " diapositivas")))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateSlides, disabled: loading, className: "px-6 py-2 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 disabled:bg-gray-400 text-white rounded-lg font-inter", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic mr-2", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }), "Generar Presentación"), slides.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleExport("html5"), disabled: loading, className: "px-6 py-2 bg-green-600 hover:bg-green-700 active:bg-green-800 disabled:bg-gray-400 text-white rounded-lg font-inter", __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 170, columnNumber: 19 }, __self: this }), "HTML5"), /*#__PURE__*/ React.createElement("button", { onClick: resetPresentation, disabled: loading, className: "px-6 py-2 bg-purple-600 hover:bg-purple-700 active:bg-purple-800 disabled:bg-gray-400 text-white rounded-lg font-inter", __source: { fileName: "", lineNumber: 173, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 178, columnNumber: 19 }, __self: this }), "Nueva presentación"))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-red-500 dark:text-red-400 font-inter", __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }), error), loadingMessage && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-blue-500 dark:text-blue-400 font-inter", __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle mr-2", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }), loadingMessage)), slides.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 201, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(Slide, { title: slides[currentSlide - 1].title, description: slides[currentSlide - 1].description, imageUrl: `https://image.pollinations.ai/prompt/${encodeURIComponent(slides[currentSlide - 1].title)}?seed=${slides[currentSlide - 1].imageSeed}`, transitionType: transitionEffects[currentTransitionEffect], expanded: true, __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ const newSlides = [ ...slides ]; const currentIndex = currentSlide - 1; newSlides[currentIndex] = { ...newSlides[currentIndex], imageSeed: Math.floor(Math.random() * (1000 - 10 + 1)) + 10 }; setSlides(newSlides); }, className: "absolute top-4 right-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-inter shadow-lg", __source: { fileName: "", lineNumber: 210, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-undo mr-2", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }), "Cambiar imagen")), /*#__PURE__*/ React.createElement(NavigationControls, { currentSlide: currentSlide, totalSlides: slides.length, onPrevious: ()=>{ setLoading(true); setCurrentTransitionEffect((prev)=>(prev + 1) % transitionEffects.length); setTimeout(()=>{ setCurrentSlide((curr)=>Math.max(1, curr - 1)); setLoading(false); }, 500); }, onNext: ()=>{ setLoading(true); setCurrentTransitionEffect((prev)=>(prev + 1) % transitionEffects.length); setTimeout(()=>{ setCurrentSlide((curr)=>Math.min(slides.length, curr + 1)); setLoading(false); }, 500); }, __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this })))); }