function MainComponent() { const [searchQuery, setSearchQuery] = React.useState(""); const [searchResults, setSearchResults] = React.useState([]); const [image, setImage] = React.useState(""); const [loading, setLoading] = React.useState(false); const [chatResponse, setChatResponse] = React.useState(""); const handleSearchChange = (event)=>{ setSearchQuery(event.target.value); }; const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); try { const searchResponse = await fetch(`/integrations/google-search/search?q=${encodeURI(searchQuery)}`); const searchData = await searchResponse.json(); setSearchResults(searchData.items); const imageResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURI(searchQuery)}`); const imageData = await imageResponse.json(); setImage(imageData.data[0]); const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": searchQuery } ], system_prompt: 'Explain this content' }) }); const chatData = await chatResponse.json(); setChatResponse(chatData.choices[0].message.content); } catch (error) { console.error("Error fetching data: ", error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F3F4F6] p-4 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-10", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#121212]", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Discover and Learn"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#606060] mt-2", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Search, Visualize, Understand")), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-lg p-8", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "searchQuery", placeholder: "Enter a search query...", className: "w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0D9488] focus:border-transparent", value: searchQuery, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#0D9488] hover:bg-[#0f766e] text-white font-bold py-2 px-4 rounded-lg w-full", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, loading ? 'Loading...' : 'Search'))), searchResults.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-12", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#121212]", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Search Results"), searchResults.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", className: "text-lg font-bold text-[#0D9488]", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#606060]", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, item.snippet)))), image && /*#__PURE__*/ React.createElement("div", { className: "my-12", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#121212]", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Visual Representation"), /*#__PURE__*/ React.createElement("img", { src: image, alt: "Visual representation based on search query", className: "max-w-full h-auto mt-4", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this })), chatResponse && /*#__PURE__*/ React.createElement("div", { className: "my-12", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#121212]", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Understanding"), /*#__PURE__*/ React.createElement("p", { className: "text-[#606060] mt-4", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, chatResponse)))); }