function MainComponent() { const [searchText, setSearchText] = React.useState(''); const [promptText, setPromptText] = React.useState(''); const handleSearchInputChange = (event)=>{ setSearchText(event.target.value); }; const handleGenerateImagePrompt = async (event)=>{ event.preventDefault(); const response = await fetch(`/integrations/book-search/?q=${encodeURIComponent(searchText)}`, { method: 'GET' }); const data = await response.json(); if (data.docs && data.docs.length > 0) { const { title, author_name } = data.docs[0]; const prompt = `a creative book cover for ${title} by ${author_name.join(', ')}`; setPromptText(prompt); } }; const handleGenerateImage = async (event)=>{ event.preventDefault(); if (promptText) { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(promptText)}`, { method: 'GET' }); const data = await response.json(); if (data.data && data.data.length > 0) { window.open(data.data[0], '_blank'); } } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl text-[#333]", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Text to Book Image Prompt Generator")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleGenerateImagePrompt, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "q", className: "border border-gray-300 p-2 rounded w-full", placeholder: "Enter search text e.g. 'The Lord of the Rings'", value: searchText, onChange: handleSearchInputChange, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), " Generate Image Prompt")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleGenerateImage, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-6 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-image", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }), " Generate Image")))); }