function MainComponent() { const [error, setError] = useState(null); const [upload, { loading: uploading }] = useUpload(); const [file, setFile] = useState(null); const [image, setImage] = useState(null); const [analyzing, setAnalyzing] = useState(false); const [results, setResults] = useState(null); const onSubmit = useCallback(async ()=>{ try { setError(null); setAnalyzing(true); const { url, error: uploadError } = await upload({ file }); if (uploadError) { setError(`アップロードエラー: ${uploadError}`); return; } setImage(url); const response = await fetch("/api/analyze-image", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ imageUrl: url }) }); const data = await response.json(); if (data.error) { setError(`分析エラー: ${data.error}`); return; } setResults(data); } catch (err) { setError(`予期せぬエラー: ${err.message}`); } finally{ setAnalyzing(false); } }, [ file, upload ]); return /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-6", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "Image Analysis App"), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>{ if (e.target.files) { setFile(e.target.files[0]); setError(null); setResults(null); } }, className: "hidden", id: "imageInput", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "imageInput", className: "bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg cursor-pointer transition-colors", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "画像を選択"), file && /*#__PURE__*/ React.createElement("button", { onClick: onSubmit, disabled: uploading || analyzing, className: "bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, uploading ? "アップロード中..." : analyzing ? "分析中..." : "分析開始")), analyzing && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center p-4", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-3 text-lg text-gray-600", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "画像を分析中...")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 border-l-4 border-red-500 p-4 rounded", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle text-red-500", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-700", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, error)))), image && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "アップロードされた画像", className: "max-w-full h-auto rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this })), !analyzing && results?.description && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg border border-gray-200", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-roboto flex items-center", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-green-500 mr-2", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }), "分析結果"), /*#__PURE__*/ React.createElement("p", { className: "text-lg leading-relaxed text-gray-700 font-roboto whitespace-pre-wrap", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, results.description)))); }