function MainComponent() { const [generatedImage, setGeneratedImage] = React.useState(null); const [loading, setLoading] = React.useState(false); const [tips, setTips] = React.useState(''); const [searchedImages, setSearchedImages] = React.useState([]); const handleSubmit = async (event)=>{ event.preventDefault(); const form = event.target; const prompt = form.prompt.value; const width = form.width.value; const height = form.height.value; const searchQuery = form.searchQuery.value; setLoading(true); const imageResponse = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompt)}&width=${width}&height=${height}`, { method: 'GET' }); const imageResult = await imageResponse.json(); setGeneratedImage(imageResult.data[0]); const chatGptResponse = await fetch(`/integrations/chat-gpt/conversationgpt4`, { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: 'Provide eye care tips for screen time' } ] }), headers: { 'Content-Type': 'application/json' } }); const chatGptResult = await chatGptResponse.json(); const assistantMessage = chatGptResult.choices[0].message.content; setTips(assistantMessage); const searchResponse = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(searchQuery)}`, { method: 'GET' }); const searchResult = await searchResponse.json(); setSearchedImages(searchResult.items.slice(0, 3)); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 min-h-screen flex flex-col items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-crimson-text text-[#0000ff] mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "Blue Armor Screen Protector App"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-sm bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#0000ff] mb-2 font-crimson-text", htmlFor: "prompt", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Image Description"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "text", id: "prompt", name: "prompt", placeholder: "Enter image description", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#0000ff] mb-2 font-crimson-text", htmlFor: "width", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Width"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "text", id: "width", name: "width", placeholder: "Enter image width", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#0000ff] mb-2 font-crimson-text", htmlFor: "height", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Height"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "text", id: "height", name: "height", placeholder: "Enter image height", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#0000ff] mb-2 font-crimson-text", htmlFor: "searchQuery", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Search Query"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "text", id: "searchQuery", name: "searchQuery", placeholder: "Enter search query", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#0000ff] text-white p-2 rounded font-crimson-text", type: "submit", disabled: loading, __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, loading ? 'Generating...' : 'Generate and Search')), generatedImage && /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "Generated image based on user description", className: "mt-4 w-full max-w-[400px] rounded", __source: { fileName: "", lineNumber: 69, columnNumber: 26 }, __self: this }), tips && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-white rounded shadow-md w-full max-w-sm", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold font-crimson-text text-[#0000ff] mb-2", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Eye Care Tips"), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, tips)), /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, searchedImages.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-2 rounded shadow-md", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.thumbnailImageUrl, alt: `Search result for ${image.title}`, className: "w-full h-[200px] object-cover rounded", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-2 font-crimson-text text-sm", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, image.title))))); }