function NewComponent({ analysisResult, onFileChange, onAnalyzeClick }) { return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-sans", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-center mb-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "画像解析システム"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "imageUpload", accept: "image/*", onChange: onFileChange, className: "mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: onAnalyzeClick, className: "bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "画像をアップロード")), /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-medium mb-4", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "解析結果"), analysisResult ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 rounded shadow", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, "粒度分布: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 16, columnNumber: 44 }, __self: this }, analysisResult.distribution)), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, "面積: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 17, columnNumber: 42 }, __self: this }, analysisResult.area)), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, "周囲長: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 18, columnNumber: 43 }, __self: this }, analysisResult.perimeter)), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, "円形度: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 19, columnNumber: 43 }, __self: this }, analysisResult.circularity)), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, "平均勾配大きさ: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 20, columnNumber: 47 }, __self: this }, analysisResult.meanGradient)))) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 rounded shadow", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "粒度分布: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 26, columnNumber: 44 }, __self: this }, "--")), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "面積: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 27, columnNumber: 42 }, __self: this }, "--")), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "周囲長: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 28, columnNumber: 43 }, __self: this }, "--")), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "円形度: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 29, columnNumber: 43 }, __self: this }, "--")), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "平均勾配大きさ: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 30, columnNumber: 47 }, __self: this }, "--")))))); } function NewComponentStory() { const [image, setImage] = React.useState(null); const [analysisResult, setAnalysisResult] = React.useState(null); function handleFileChange(event) { setImage(event.target.files[0]); } async function handleAnalyzeClick() { if (!image) return; const formData = new FormData(); formData.append('image', image); const response = await fetch('/analyze', { method: 'POST', body: formData }); if (response.ok) { const result = await response.json(); setAnalysisResult(result); } } return /*#__PURE__*/ React.createElement(NewComponent, { analysisResult: analysisResult, onFileChange: handleFileChange, onAnalyzeClick: handleAnalyzeClick, __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }); } function ImageUploadField({ name, accept }) { return /*#__PURE__*/ React.createElement("input", { type: "file", className: "mb-4 p-2 border border-gray-300 rounded", name: name, accept: accept, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ImageUploadFieldStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageUploadField, { name: "imageUpload", accept: "image/*", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const [image, setImage] = React.useState(null); const [analysisResult, setAnalysisResult] = React.useState(null); function handleFileChange(event) { setImage(event.target.files[0]); } async function analyzeImage() { if (!image) return; const formData = new FormData(); formData.append('image', image); const response = await fetch('/analyze', { method: 'POST', body: formData }); if (response.ok) { const result = await response.json(); setAnalysisResult(result); } } return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-sans", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-center mb-6", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "画像解析システム"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ImageUploadField, { name: "imageUpload", accept: "image/*", onChange: handleFileChange, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: analyzeImage, className: "bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "画像をアップロード")), /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-medium mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "解析結果"), analysisResult ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 rounded shadow", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "粒度分布: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 40, columnNumber: 44 }, __self: this }, analysisResult.distribution)), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "面積: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 41, columnNumber: 42 }, __self: this }, analysisResult.area)), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "周囲長: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 42, columnNumber: 43 }, __self: this }, analysisResult.perimeter)), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "円形度: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 43, columnNumber: 43 }, __self: this }, analysisResult.circularity)), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "平均勾配大きさ: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 44, columnNumber: 47 }, __self: this }, analysisResult.meanGradient)))) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 rounded shadow", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "粒度分布: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 50, columnNumber: 44 }, __self: this }, "--")), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "面積: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 51, columnNumber: 42 }, __self: this }, "--")), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "周囲長: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 52, columnNumber: 43 }, __self: this }, "--")), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "円形度: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 53, columnNumber: 43 }, __self: this }, "--")), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "平均勾配大きさ: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 54, columnNumber: 47 }, __self: this }, "--")))))); }