function MainComponent() { const [panels, setPanels] = useState([]); const [loading, setLoading] = useState({}); const [error, setError] = useState({}); const addPanel = ()=>{ setPanels([ ...panels, { id: Date.now(), prompt: "", imageUrl: "" } ]); }; const removePanel = (id)=>{ setPanels(panels.filter((panel)=>panel.id !== id)); }; const updatePrompt = (id, prompt)=>{ setPanels(panels.map((panel)=>panel.id === id ? { ...panel, prompt } : panel)); }; const generateImage = async (id)=>{ setLoading((prev)=>({ ...prev, [id]: true })); setError((prev)=>({ ...prev, [id]: null })); try { const response = await fetch("/api/generate-comic-panel", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: panels.find((panel)=>panel.id === id).prompt }) }); if (!response.ok) { throw new Error("Failed to generate image"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setPanels(panels.map((panel)=>panel.id === id ? { ...panel, imageUrl: data.imageUrl } : panel)); } catch (err) { setError((prev)=>({ ...prev, [id]: err.message })); console.error(err); } finally{ setLoading((prev)=>({ ...prev, [id]: false })); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 font-crimson-text mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Create Your Anime Comic"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Design your comic by adding panels and describing each scene. Our AI will generate unique anime-style illustrations based on your descriptions.")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: addPanel, className: "bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg flex items-center space-x-2 transition-all transform hover:scale-105", title: "Add a new panel to your comic", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Add Panel")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{}, className: "bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg flex items-center space-x-2 transition-all transform hover:scale-105", title: "Save your comic for later", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-save", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Save Comic"))), panels.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-12 bg-white rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-image text-4xl text-gray-400 mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, 'Start by adding your first panel using the "Add Panel" button above')) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, panels.map((panel)=>/*#__PURE__*/ React.createElement("div", { key: panel.id, className: "bg-white rounded-lg shadow-sm overflow-hidden transition-all transform hover:shadow-md", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: panel.prompt, onChange: (e)=>updatePrompt(panel.id, e.target.value), placeholder: "Describe the scene for this panel...", className: "w-full p-2 border rounded-lg mb-4 h-24 resize-none", title: "Describe what you want to see in this panel", __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>generateImage(panel.id), disabled: loading[panel.id] || !panel.prompt.trim(), className: "flex-1 bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white px-4 py-2 rounded-lg transition-colors flex items-center justify-center space-x-2", title: "Generate an image based on your description", __source: { fileName: "", lineNumber: 116, columnNumber: 21 }, __self: this }, loading[panel.id] ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent", __source: { fileName: "", lineNumber: 124, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 125, columnNumber: 27 }, __self: this }, "Generating...")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic", __source: { fileName: "", lineNumber: 129, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 130, columnNumber: 27 }, __self: this }, "Generate"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removePanel(panel.id), className: "bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition-colors", title: "Remove this panel", __source: { fileName: "", lineNumber: 134, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 139, columnNumber: 23 }, __self: this }))), error[panel.id] && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-2", __source: { fileName: "", lineNumber: 143, columnNumber: 21 }, __self: this }, error[panel.id])), /*#__PURE__*/ React.createElement("div", { className: "aspect-w-1 aspect-h-1 bg-gray-100", __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this }, panel.imageUrl ? /*#__PURE__*/ React.createElement("img", { src: panel.imageUrl, alt: panel.prompt, className: "object-cover w-full h-full", __source: { fileName: "", lineNumber: 150, columnNumber: 21 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-full text-gray-400", __source: { fileName: "", lineNumber: 156, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-image text-4xl", __source: { fileName: "", lineNumber: 157, columnNumber: 23 }, __self: this }))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .grid > div { animation: fadeIn 0.3s ease-out forwards; } `)); }