function MainComponent() { const [result, setResult] = React.useState(""); const uploadImageRef = React.useRef(null); const analyzeImage = ()=>{ const uploadImage = uploadImageRef.current; if (uploadImage.files.length === 0) { alert("画像を選択してください"); return; } const file = uploadImage.files[0]; const reader = new FileReader(); reader.onload = (event)=>{ const imageData = event.target.result; const fishType = recognizeFish(imageData); searchFishInfo(fishType, (info)=>{ setResult(`

${fishType}

${info}

`); }); }; reader.readAsDataURL(file); }; const recognizeFish = (imageData)=>{ return "マグロ"; }; const searchFishInfo = (fishType, callback)=>{ callback("マグロは大型の硬骨魚で、世界中の温暖な海に生息しています。日本では高級魚として食用され、寿司や刺身などに人気があります。"); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-sans", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "魚判別アプリ"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "upload-image", accept: "image/*", className: "mb-4", name: "upload-image", ref: uploadImageRef, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { id: "analyze-button", className: "bg-blue-500 text-white py-2 px-4 rounded", onClick: analyzeImage, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, "分析"), /*#__PURE__*/ React.createElement("div", { id: "result", className: "border border-gray-300 mt-4 p-4", dangerouslySetInnerHTML: { __html: result }, __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, ` .image-preview { max-width: 100%; height: auto; } `)); }