function MainComponent() { const [step, setStep] = React.useState('register'); const [user, setUser] = React.useState(null); const [photo, setPhoto] = React.useState(null); const [simulatedPhoto, setSimulatedPhoto] = React.useState(null); const [selectedFeatures, setSelectedFeatures] = React.useState([]); const [intensity, setIntensity] = React.useState('moderate'); const [tutorial, setTutorial] = React.useState(true); const handleRegister = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); setUser({ name: formData.get('name'), email: formData.get('email') }); setStep('upload'); }; const handlePhotoUpload = (e)=>{ const file = e.target.files[0]; setPhoto(URL.createObjectURL(file)); setStep('simulate'); }; const simulateFeatures = ()=>{ const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.onload = ()=>{ canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); selectedFeatures.forEach((feature)=>{ switch(feature){ case 'あごライン強化': enhanceJawline(ctx, intensity); break; case 'ひげスタイリング': styleBeard(ctx, intensity); break; case 'しわ改善': reduceWrinkles(ctx, intensity); break; case 'フェイシャルリフト': applyFacialLift(ctx, intensity); break; case '毛穴ケア': minimizePores(ctx, intensity); break; case 'アンチエイジング': applyAntiAging(ctx, intensity); break; } }); setSimulatedPhoto(canvas.toDataURL()); }; img.src = photo; setStep('compare'); }; const enhanceJawline = (ctx, intensity)=>{ const intensityFactor = intensity === 'mild' ? 0.3 : intensity === 'moderate' ? 0.6 : 0.9; }; const styleBeard = (ctx, intensity)=>{ const intensityFactor = intensity === 'mild' ? 0.3 : intensity === 'moderate' ? 0.6 : 0.9; }; const reduceWrinkles = (ctx, intensity)=>{ const intensityFactor = intensity === 'mild' ? 0.3 : intensity === 'moderate' ? 0.6 : 0.9; }; const applyFacialLift = (ctx, intensity)=>{ const intensityFactor = intensity === 'mild' ? 0.3 : intensity === 'moderate' ? 0.6 : 0.9; }; const minimizePores = (ctx, intensity)=>{ const intensityFactor = intensity === 'mild' ? 0.3 : intensity === 'moderate' ? 0.6 : 0.9; }; const applyAntiAging = (ctx, intensity)=>{ const intensityFactor = intensity === 'mild' ? 0.3 : intensity === 'moderate' ? 0.6 : 0.9; }; const shareResults = ()=>{ if (navigator.share) { navigator.share({ title: 'マンモーフAIシミュレーション結果', text: '私のマンモーフAIシミュレーション結果をチェックしてください！', url: simulatedPhoto }).then(()=>{ console.log('共有成功'); }).catch((error)=>{ console.log('共有エラー:', error); }); } else { alert('お使いのブラウザは共有機能をサポートしていません。'); } }; const toggleFeature = (feature)=>{ setSelectedFeatures((prev)=>prev.includes(feature) ? prev.filter((f)=>f !== feature) : [ ...prev, feature ]); }; const renderTutorial = ()=>/*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 111, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg max-w-md", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "マンモーフAIへようこそ"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, "以下の手順に従って始めましょう："), /*#__PURE__*/ React.createElement("ol", { className: "list-decimal list-inside mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, "登録またはログイン"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "写真をアップロード"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "強化したい特徴を選択"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, "強度を調整"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, "結果を確認・比較")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTutorial(false), className: "bg-blue-600 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, "始めましょう"))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 128, columnNumber: 5 }, __self: this }, tutorial && renderTutorial(), /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white p-4", __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, "マンモーフAI")), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 134, columnNumber: 7 }, __self: this }, step === 'register' && /*#__PURE__*/ React.createElement("form", { onSubmit: handleRegister, className: "space-y-4", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "氏名", className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "メールアドレス", className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 text-white p-2 rounded", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "登録")), step === 'upload' && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, "写真をアップロード"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handlePhotoUpload, className: "hidden", id: "photoUpload", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "photoUpload", className: "bg-blue-600 text-white p-2 rounded cursor-pointer", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, "写真を選択")), step === 'simulate' && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: photo, alt: "オリジナル写真", className: "w-full h-[300px] object-cover rounded", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, [ 'あごライン強化', 'ひげスタイリング', 'しわ改善', 'フェイシャルリフト', '毛穴ケア', 'アンチエイジング' ].map((feature)=>/*#__PURE__*/ React.createElement("button", { key: feature, onClick: ()=>toggleFeature(feature), className: `p-2 rounded ${selectedFeatures.includes(feature) ? 'bg-blue-600 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }, feature))), /*#__PURE__*/ React.createElement("select", { value: intensity, onChange: (e)=>setIntensity(e.target.value), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "mild", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, "弱め"), /*#__PURE__*/ React.createElement("option", { value: "moderate", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, "適度"), /*#__PURE__*/ React.createElement("option", { value: "strong", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }, "強め")), /*#__PURE__*/ React.createElement("button", { onClick: simulateFeatures, className: "w-full bg-blue-600 text-white p-2 rounded", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, "シミュレーション")), step === 'compare' && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: photo, alt: "オリジナル", className: "w-full md:w-1/2 h-[300px] object-cover rounded", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: simulatedPhoto, alt: "シミュレーション結果", className: "w-full md:w-1/2 h-[300px] object-cover rounded", __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep('simulate'), className: "bg-gray-300 text-gray-800 p-2 rounded", __source: { fileName: "", lineNumber: 185, columnNumber: 15 }, __self: this }, "別のシミュレーション"), /*#__PURE__*/ React.createElement("button", { onClick: shareResults, className: "bg-blue-600 text-white p-2 rounded", __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }, "結果を共有する")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-200 p-4 mt-8 text-center", __source: { fileName: "", lineNumber: 192, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 193, columnNumber: 9 }, __self: this }, "© 2024 ManMorph AI. All rights reserved."))); }