function MainComponent() { const [isSubmitting, setIsSubmitting] = React.useState(false); const [bookContent, setBookContent] = React.useState(''); const handleSubmit = async (event)=>{ event.preventDefault(); setIsSubmitting(true); const formData = new FormData(event.target); const formProps = Object.fromEntries(formData); setBookContent(''); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: JSON.stringify(formProps) } ], system_prompt: 'tailored to a 3-year-old toddler audience. written in a literary style inspired by "llama llama red pajama" book, Dr. Seuss, and other fun best selling rhyming books. The style is meant to be fun and silly and make little kids laugh.', max_tokens: 2000 }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); if (data.status) { setBookContent(data.result); } else { throw new Error(data.result); } } catch (error) { console.error('Error writing book:', error); } finally{ setIsSubmitting(false); } }; const subjectOptions = [ "Adventure", "Friendship", "Animals", "Space", "Magic", "Custom..." ]; const artStyleOptions = [ "Cartoon", "Watercolor", "Digital Art", "Abstract", "Classic Illustrations", "Custom..." ]; return /*#__PURE__*/ React.createElement("div", { className: "h-full w-full bg-[#00B4D8] font-calibri font-bold text-xl", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-start p-8 space-y-6", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, isSubmitting ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Creating your story...")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl mb-4 text-[#FFFFFF]", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Readzy"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-lg space-y-4", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "subject", className: "block mb-2 text-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, "Subject"), /*#__PURE__*/ React.createElement("select", { name: "subject", className: "w-full border rounded p-2", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, subjectOptions.map((option, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: option, __source: { fileName: "", lineNumber: 74, columnNumber: 58 }, __self: this }, option)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "character", className: "block mb-2 text-lg", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, "Character Description"), /*#__PURE__*/ React.createElement("input", { name: "character", type: "text", className: "w-full border rounded p-2", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "artStyle", className: "block mb-2 text-lg", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, "Art Style"), /*#__PURE__*/ React.createElement("select", { name: "artStyle", className: "w-full border rounded p-2", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, artStyleOptions.map((option, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: option, __source: { fileName: "", lineNumber: 86, columnNumber: 59 }, __self: this }, option)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "length", type: "hidden", value: "10 Pages", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "writingStyle", type: "hidden", value: "Rhyming", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "storyDescription", className: "block mb-2 text-lg", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, "Story Description"), /*#__PURE__*/ React.createElement("textarea", { name: "storyDescription", className: "w-full h-32 border rounded p-2", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-yellow-400 hover:bg-pink-300 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, isSubmitting ? 'CREATING...' : 'CREATE MY STORY'))), bookContent && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mt-4 p-4 border rounded bg-white", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, "Your Story:"), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-line", __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }, bookContent))))); }