function MainComponent() { const [loading, setLoading] = React.useState(false); const [imageUrl, setImageUrl] = React.useState(''); const handleSearch = async (event)=>{ event.preventDefault(); const searchTerm = event.target.searchTerm.value; setLoading(true); setImageUrl(''); const response = await fetch('/integrations/google-gemini-1-5-flash/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: searchTerm } ] }) }); const result = await response.json(); const content = result.choices[0].message.content; setImageUrl(content); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full h-full p-8 bg-gray-100", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto mb-6", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "Twitter Image Search Engine"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg bg-white p-6 rounded-lg shadow-md", onSubmit: handleSearch, __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("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "searchTerm", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Search Term"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "searchTerm", type: "text", name: "searchTerm", placeholder: "Enter search term", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __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 focus:outline-none focus:shadow-outline w-full", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full max-w-lg text-center", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-700 mb-4 text-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, loading ? 'Loading image...' : imageUrl ? /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Search result image", className: "w-[400px] h-[300px] object-cover", __source: { fileName: "", lineNumber: 59, columnNumber: 55 }, __self: this }) : 'No image found'), loading && /*#__PURE__*/ React.createElement("div", { className: "w-[400px] h-[300px] bg-gray-300 flex items-center justify-center", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-pulse text-4xl text-gray-500", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this })))); }