function MainComponent() { const { useState } = React; const [prompt, setPrompt] = useState("a serene lake with rippling water at sunset"); const [video, setVideo] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [duration, setDuration] = useState(3); const [size, setSize] = useState("medium"); const [metadata, setMetadata] = useState(null); const [retryCount, setRetryCount] = useState(0); const sizes = { small: "576x320", medium: "1024x576", large: "1280x720" }; const handleError = (err)=>{ const errorMessage = err.message || "Failed to generate video"; if (errorMessage.toLowerCase().includes("connection reset")) { if (retryCount < 3) { setRetryCount((prev)=>prev + 1); setTimeout(()=>generateVideo(), 1000 * (retryCount + 1)); setError("Connection reset needed. Retrying..."); } else { setError("Connection failed after multiple attempts. Please try again."); setRetryCount(0); } } else if (errorMessage.toLowerCase().includes("timeout")) { setError("Taking longer than expected. Please try again."); } else if (errorMessage.toLowerCase().includes("quota")) { setError("Please try again later."); } else if (errorMessage.toLowerCase().includes("invalid")) { setError("Please try a different description."); } else if (errorMessage.toLowerCase().includes("busy")) { setError("System is busy. Please try again in a moment."); } else { setError("Something went wrong. Please try again."); } }; const generateVideo = async ()=>{ setLoading(true); setError(null); try { const response = await fetch("/api/generate-video", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt, frames: Math.max(3, Math.min(10, duration)), size }) }); const data = await response.json(); if (data.error) { throw new Error(data.error); } if (data.videoUrl) { setVideo(data.videoUrl); setMetadata(data.metadata); } else { throw new Error("No video URL received"); } } catch (err) { handleError(err); setVideo(null); setMetadata(null); } finally{ setLoading(false); } }; const handleSave = async ()=>{ if (!video) return; const link = document.createElement("a"); link.href = video; link.download = `video-${metadata?.generationId || Date.now()}.mp4`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#0A192F] via-[#112240] to-[#0A192F]", __source: { fileName: "", lineNumber: 90, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-16", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "inline-flex items-center text-[#64FFDA] hover:opacity-80 transition-opacity duration-300 mb-8", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }), "Back to Tools"), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl md:text-7xl font-bold text-[#64FFDA] mb-12 text-center font-poppins", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "Video Generator"), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 mb-4 font-roboto", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Create smooth AI-generated videos from text"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: size, onChange: (e)=>setSize(e.target.value), className: "w-full bg-[#112240] text-gray-300 px-4 py-3 rounded-lg font-roboto border border-[#64FFDA] focus:outline-none", name: "size", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, Object.entries(sizes).map(([value, label])=>/*#__PURE__*/ React.createElement("option", { key: value, value: value, __source: { fileName: "", lineNumber: 116, columnNumber: 19 }, __self: this }, label))), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 mt-2 text-sm font-roboto", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, sizes[size], " pixels")), /*#__PURE__*/ React.createElement("label", { className: "block text-gray-300 mb-2 font-roboto", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "Duration: ", duration, "s"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "3", max: "10", value: duration, onChange: (e)=>setDuration(parseInt(e.target.value)), className: "w-full", name: "duration", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-8", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Describe the video you want to create...", className: "flex-1 bg-[#112240] text-gray-300 px-6 py-4 rounded-lg font-roboto border border-[#64FFDA] focus:outline-none focus:ring-2 focus:ring-[#64FFDA]", name: "prompt", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateVideo, disabled: loading || !prompt, className: "bg-[#112240] text-[#64FFDA] border-2 border-[#64FFDA] px-8 py-4 rounded-lg font-bold hover:bg-[#64FFDA] hover:text-[#112240] transition-colors duration-300 disabled:opacity-50", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 153, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic mr-2", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }), loading ? "Generating..." : "Generate")), error && /*#__PURE__*/ React.createElement("div", { className: "mb-8 p-4 bg-red-500/10 border border-red-500 rounded-lg", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle text-red-500 mt-1 mr-3", __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-red-500 font-bold mb-1 font-roboto", __source: { fileName: "", lineNumber: 166, columnNumber: 19 }, __self: this }, retryCount < 3 ? "Retrying..." : "Generation Failed"), /*#__PURE__*/ React.createElement("p", { className: "text-red-400 font-roboto", __source: { fileName: "", lineNumber: 169, columnNumber: 19 }, __self: this }, error), retryCount >= 3 && /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setError(null); setRetryCount(0); }, className: "mt-2 text-red-400 hover:text-red-300 text-sm font-roboto", __source: { fileName: "", lineNumber: 171, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times mr-1", __source: { fileName: "", lineNumber: 178, columnNumber: 23 }, __self: this }), "Dismiss")))), video && /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#64FFDA] rounded-3xl blur-3xl opacity-20 animate-pulse", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("video", { src: video, controls: true, autoPlay: true, loop: true, muted: true, className: "w-full rounded-3xl shadow-2xl", __source: { fileName: "", lineNumber: 190, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSave, className: "mt-4 w-full bg-[#112240] text-[#64FFDA] border-2 border-[#64FFDA] px-8 py-4 rounded-lg font-bold hover:bg-[#64FFDA] hover:text-[#112240] transition-colors duration-300", __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }), "Save Video"))), loading && /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center p-12", __source: { fileName: "", lineNumber: 210, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 border-4 border-[#64FFDA] border-t-transparent rounded-full animate-spin", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-[#64FFDA] font-roboto text-center", __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this }, "Creating your video..."))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 221, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0% { opacity: 0.1; } 50% { opacity: 0.3; } 100% { opacity: 0.1; } } .animate-pulse { animation: pulse 3s infinite; } `)); }