function MainComponent() { const [formData, setFormData] = React.useState({ bookTitle: '', subject: '', characterDescription: '', illustrationStyle: '', numberOfPages: '10', writingStyle: '', storyDescription: '' }); const [bookText, setBookText] = React.useState([]); const [loading, setLoading] = React.useState(false); const handleInputChange = (event)=>{ const { name, value } = event.target; setFormData((prevData)=>({ ...prevData, [name]: value })); }; const subjectOptions = Array.from({ length: 15 }, (_, i)=>`Subject ${i + 1}`); const writingStyleOptions = [ 'Rhyming', 'Silly', 'Dr. Seuss Inspired', 'Adventure' ]; const illustrationStyles = [ 'Watercolor', 'Pencil Sketch', 'Digital Art', 'Oil Painting', 'Cartoon', 'Abstract', 'Photorealistic' ]; const generateBookText = async ()=>{ setLoading(true); const messages = Object.entries(formData).map(([key, value])=>({ role: 'user', content: `${key}: ${value}` })); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages, system_prompt: 'Create a children book text based on attributes selected', max_tokens: 2000 }) }); if (!response.ok) throw new Error('Network response was not ok'); const data = await response.json(); const pages = []; const linesPerPage = 4; let lines = data.result.split('\n').filter((line)=>line.trim() !== ''); for(let i = 0, pageNum = 1; i < lines.length; i += linesPerPage, pageNum++){ pages.push({ id: pageNum, text: lines.slice(i, i + linesPerPage).join('\n') }); } setBookText(pages); } catch (error) { console.error('Error generating book text:', error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center bg-gradient-to-br from-blue-400 via-pink-500 to-yellow-300 font-calibri", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-6xl font-bold my-8", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#ff69b4]", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Children's AI"), " ", /*#__PURE__*/ React.createElement("span", { className: "text-black", __source: { fileName: "", lineNumber: 69, columnNumber: 63 }, __self: this }, "Book Generator")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg w-full max-w-4xl mb-8 p-6", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-xl mb-8", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "powered by ChatGPT"), /*#__PURE__*/ React.createElement("form", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "bookTitle", placeholder: "Book Title", value: formData.bookTitle, onChange: handleInputChange, className: "form-input", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "subject", value: formData.subject, onChange: handleInputChange, className: "form-input", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, subjectOptions.map((option, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: option, __source: { fileName: "", lineNumber: 78, columnNumber: 52 }, __self: this }, option))), /*#__PURE__*/ React.createElement("input", { type: "text", name: "characterDescription", placeholder: "Character Description", value: formData.characterDescription, onChange: handleInputChange, className: "form-input", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "illustrationStyle", value: formData.illustrationStyle, onChange: handleInputChange, className: "form-input", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, illustrationStyles.map((style, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: style, __source: { fileName: "", lineNumber: 84, columnNumber: 55 }, __self: this }, style))), /*#__PURE__*/ React.createElement("input", { type: "range", name: "numberOfPages", min: "5", max: "20", value: formData.numberOfPages, onChange: handleInputChange, className: "form-range", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "writingStyle", value: formData.writingStyle, onChange: handleInputChange, className: "form-input", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, writingStyleOptions.map((style, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: style, __source: { fileName: "", lineNumber: 90, columnNumber: 56 }, __self: this }, style))), /*#__PURE__*/ React.createElement("textarea", { name: "storyDescription", placeholder: "Story Description", value: formData.storyDescription, onChange: handleInputChange, className: "form-input h-32", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: generateBookText, disabled: loading, className: "col-span-2 bg-[#6171FF] hover:bg-[#5061cf] text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:-translate-y-1", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, loading ? 'Creating Your Book...' : 'Write My Book'))), bookText.length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold my-8", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, formData.bookTitle || "Your Book Title Here"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, bookText.map((page, index)=>/*#__PURE__*/ React.createElement("div", { key: page.id, className: "bg-white p-4 rounded-lg shadow-md text-lg font-bold relative", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-2", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, "Page ", page.id), page.text.split('\n').map((line, idx)=>/*#__PURE__*/ React.createElement("p", { key: idx, className: "font-bold", __source: { fileName: "", lineNumber: 108, columnNumber: 59 }, __self: this }, line))))))); }