function MainComponent() { const [loading, setLoading] = React.useState(false); const [pages, setPages] = React.useState([]); const [currentPageIndex, setCurrentPageIndex] = React.useState(0); const [successMessage, setSuccessMessage] = React.useState(''); const navigatePages = (direction)=>{ setCurrentPageIndex((prevIndex)=>{ const newIndex = prevIndex + direction; if (newIndex < 0) return 0; if (newIndex >= pages.length) return pages.length - 1; return newIndex; }); }; const handleSubmit = async (e)=>{ e.preventDefault(); setCurrentPageIndex(0); setPages([]); setSuccessMessage(''); setLoading(true); const story = e.target.story.value; try { for(let i = 1; i <= 3; i++){ const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(story + `, page ${i}, manga style, A4, blank speech bubbles`)}`, { method: 'GET' }); const responseData = await response.json(); setPages((prev)=>[ ...prev, ...responseData.data ]); } } catch (error) { console.error("Failed to generate manga pages", error); } finally{ setLoading(false); setSuccessMessage('漫画が描けました！'); } }; const dotCount = React.useRef(1); React.useEffect(()=>{ let interval; if (loading) { interval = setInterval(()=>{ dotCount.current = dotCount.current === 3 ? 1 : dotCount.current + 1; }, 1000); } return ()=>clearInterval(interval); }, [ loading ]); React.useEffect(()=>{ let progress = 0; const updateProgress = ()=>{ if (loading) { progress = progress >= 100 ? 100 : progress + 10; document.getElementById('progressBar').style.width = `${progress}%`; if (progress < 100) setTimeout(updateProgress, 600 / 3); } }; updateProgress(); }, [ loading ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-white", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center p-4 border-b border-gray-200 w-full", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "📚AI 漫画ジェネレーター")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center justify-center flex-1", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-1/2 p-8 space-y-4 bg-white shadow-lg", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "story", placeholder: "ストーリーをここに入力...", className: "w-full p-4 border-2 border-gray-300 rounded-md resize-none font-roboto", rows: "5", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-1/3 px-6 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "漫画を生成")), loading && /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-4 mt-4 bg-white shadow-lg flex flex-col items-center", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "漫画生成中", '.'.repeat(dotCount.current)), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "progressBar", className: "bg-blue-600 h-2.5 rounded-full", style: { width: `0%` }, __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }))), !loading && successMessage && /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-4 mt-4 bg-white shadow-lg flex flex-col items-center", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, successMessage)), pages.length > 0 && /*#__PURE__*/ React.createElement("img", { src: pages[currentPageIndex], alt: `Generated Manga Page ${currentPageIndex + 1}`, className: "w-[210mm] h-[297mm] cursor-pointer", onClick: (e)=>{ const halfWidth = e.target.offsetWidth / 2; if (e.nativeEvent.offsetX < halfWidth) navigatePages(-1); else navigatePages(1); }, __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("footer", { className: "text-center p-4 border-t border-gray-200 w-full", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, "©︎2024 endotaishi")); }