function MainComponent() { const [prompt, setPrompt] = React.useState(""); const [frames, setFrames] = React.useState([]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [currentFrame, setCurrentFrame] = React.useState(0); const [isPlaying, setIsPlaying] = React.useState(false); const [frameCount, setFrameCount] = React.useState(8); // Keep default at 8 const generateFrames = async ()=>{ if (!prompt.trim()) { setError("Please enter a prompt"); return; } setLoading(true); setError(null); setFrames([]); try { const newFrames = []; for(let i = 0; i < frameCount; i++){ const framePrompt = `${prompt}, frame ${i + 1} of ${frameCount}, sequence, animation style`; const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(framePrompt)}`); if (!response.ok) { throw new Error(`Failed to generate frame ${i + 1}`); } const data = await response.json(); if (data.data && data.data[0]) { newFrames.push(data.data[0]); setFrames([ ...newFrames ]); // Update UI as we generate } } } catch (err) { console.error(err); setError("Failed to generate video frames. Please try again."); } finally{ setLoading(false); } }; React.useEffect(()=>{ if (isPlaying && frames.length > 0) { const interval = setInterval(()=>{ setCurrentFrame((prev)=>(prev + 1) % frames.length); }, 800); return ()=>clearInterval(interval); } }, [ isPlaying, frames.length ]); const togglePlayback = ()=>{ if (frames.length > 0) { setIsPlaying(!isPlaying); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 p-4", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center gap-4 mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/dbad5927-e539-42cc-9b37-a5672c77d5f3/-/format/auto/", alt: "MCO Logo", className: "w-16 h-16 md:w-20 md:h-20 rounded-full", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-white font-inter", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "MCO Video Frame Generator")), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-purple-200 font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Create amazing video sequences with AI"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 font-roboto text-sm font-medium", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "MASTERCOTUTORIALS"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-2xl p-6 mb-8", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white font-medium mb-2 font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "Video Prompt"), /*#__PURE__*/ React.createElement("textarea", { value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Describe your video... (e.g., 'a cat walking through a magical forest')", className: "w-full p-4 rounded-lg bg-white/20 text-white placeholder-purple-200 border border-purple-300/30 focus:border-purple-400 focus:outline-none resize-none", rows: 3, __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white font-medium mb-2 font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, "Number of Frames: ", frameCount), /*#__PURE__*/ React.createElement("input", { type: "range", min: "2", max: "25" // Increased max from 16 to 25 , value: frameCount, onChange: (e)=>setFrameCount(parseInt(e.target.value)), className: "w-full", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateFrames, disabled: loading, className: "w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold py-4 px-6 rounded-lg hover:from-purple-700 hover:to-pink-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all font-roboto", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, loading ? "Generating Frames..." : "Generate AI Video"))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-500/20 border border-red-500/50 text-red-200 p-4 rounded-lg mb-6", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, error), frames.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-2xl p-6", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-4 font-inter", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, "Your AI Video"), /*#__PURE__*/ React.createElement("div", { className: "relative bg-black rounded-lg overflow-hidden mb-4", style: { aspectRatio: "16/9" }, __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, frames[currentFrame] && /*#__PURE__*/ React.createElement("img", { src: frames[currentFrame], alt: `Frame ${currentFrame + 1}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 142, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-4 bg-black/50 text-white px-3 py-1 rounded-full text-sm font-roboto", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, "Frame ", currentFrame + 1, " of ", frames.length)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mb-4", __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: togglePlayback, className: "bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg font-medium transition-colors font-roboto", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }, isPlaying ? "Pause" : "Play"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentFrame(0), className: "bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg font-medium transition-colors font-roboto", __source: { fileName: "", lineNumber: 162, columnNumber: 17 }, __self: this }, "Reset")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-2", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, frames.map((frame, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>setCurrentFrame(index), className: `relative cursor-pointer rounded-lg overflow-hidden border-2 transition-all ${currentFrame === index ? "border-purple-400" : "border-transparent hover:border-purple-300"}`, __source: { fileName: "", lineNumber: 172, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: frame, alt: `Thumbnail ${index + 1}`, className: "w-full h-20 object-cover", __source: { fileName: "", lineNumber: 181, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 rounded", __source: { fileName: "", lineNumber: 186, columnNumber: 21 }, __self: this }, index + 1)))))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-purple-400 mb-4", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 font-roboto", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, "Generating frame ", frames.length + 1, " of ", frameCount, "..."))), /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 206, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-purple-300 font-roboto text-sm", __source: { fileName: "", lineNumber: 207, columnNumber: 9 }, __self: this }, "CREATED BY SIDIQUL AKBAR"))); }