function MainComponent() { const [searchResults, setSearchResults] = React.useState([]); const [errorMessage, setErrorMessage] = React.useState(''); const [selectedFile, setSelectedFile] = React.useState(null); const handleFileChange = (event)=>{ setSelectedFile(event.target.files[0]); }; const handleSearch = ()=>{ if (!selectedFile) { setErrorMessage('Please upload an image.'); return; } const query = ''; // Placeholder for image feature extraction process fetch(`/integrations/image-search/imagesearch?q=${query}`).then((res)=>res.json()).then((data)=>{ if (data.status === 'success' && data.items.length > 0) { setSearchResults(data.items); setErrorMessage(''); } else { setSearchResults([]); setErrorMessage('No results found.'); } }).catch(()=>setErrorMessage('An error occurred during the search.')); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-4xl font-bold font-sans mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "画像検索アプリ"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto border p-4 rounded shadow", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "image-upload", onChange: handleFileChange, className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "bg-blue-500 text-white p-2 rounded mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "さがす"), errorMessage && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 26 }, __self: this }, errorMessage), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-2 rounded", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.contextLink, target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: result.thumbnailImageUrl, alt: `Image result ${index + 1}`, className: "w-full h-auto", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, result.title)))))); }