function MainComponent() { const [loading, setLoading] = React.useState(false); const [characterImage, setCharacterImage] = React.useState(""); const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); const description = event.target.characterDescription.value; try { const chatGptResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: description } ] }) }).then((response)=>response.json()); const prompt = chatGptResponse.choices[0].message.content; const dallEResponse = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }).then((response)=>response.json()); setCharacterImage(dallEResponse.data[0]); } catch (error) { console.error('Error:', error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "Consistent Character Generator"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white p-8 rounded shadow-md", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { id: "characterForm", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "characterDescription", className: "block text-lg font-medium mb-2 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Character Description"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "characterDescription", name: "characterDescription", className: "w-full p-2 mb-4 border rounded", placeholder: "Describe your character", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Generate Character")), loading && /*#__PURE__*/ React.createElement("div", { id: "loadingState", className: "text-center text-xl mt-4 font-crimson-text", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Loading Character..."), !loading && characterImage && /*#__PURE__*/ React.createElement("div", { id: "characterImage", className: "mt-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: characterImage, alt: "Generated character", className: "w-full rounded", id: "characterImg", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this })))); }