"use client"; function MainComponent() { const [imageFile, setImageFile] = React.useState(null); const [processedImageUrl, setProcessedImageUrl] = React.useState(""); const [isProcessing, setIsProcessing] = React.useState(false); const [errorMessage, setErrorMessage] = React.useState(""); const [imageUrl, setImageUrl] = React.useState(""); const handleImageUpload = (event)=>{ const file = event.target.files[0]; setImageFile(file); const reader = new FileReader(); reader.onloadend = ()=>{ setImageUrl(reader.result); }; reader.readAsDataURL(file); }; const handleRemoveBackground = async ()=>{ if (!imageFile) return; setIsProcessing(true); setErrorMessage(""); const requestOptions = { method: "POST", body: JSON.stringify({ key: "9fvVBLeK8sY26HtRBYl6O4zIyvunMzuU828Rx5c0T9PB7KNryFAQEobIFf8L", image: imageUrl }), headers: { "Content-Type": "application/json" } }; try { const response = await fetch("https://modelslab.com/api/v6/image_editing/removebg_mask", requestOptions); const result = await response.json(); if (result && result.output) { setIsProcessing(false); setProcessedImageUrl(result.output[0]); } else { setErrorMessage("背景透過処理でエラーが発生しました。"); setIsProcessing(false); } } catch (error) { console.error("Error:", error); setErrorMessage("背景透過処理でエラーが発生しました。"); setIsProcessing(false); } }; const handleRemoveImage = ()=>{ setImageFile(null); setImageUrl(""); setProcessedImageUrl(""); }; const handleDownloadImage = ()=>{ const link = document.createElement("a"); link.href = processedImageUrl; link.download = "processed_image.png"; link.click(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 py-6 flex flex-col justify-center sm:py-12 font-noto-sans", __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative py-3 sm:max-w-xl sm:mx-auto", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-2xl transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative px-4 py-10 bg-white shadow-2xl sm:rounded-3xl sm:p-20", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-center font-poppins text-indigo-600", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic mr-2", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }), "背景透過アプリ")), /*#__PURE__*/ React.createElement("div", { className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imageUpload", className: "block mb-2 text-sm font-medium text-gray-900 font-poppins", __source: { fileName: "", lineNumber: 88, columnNumber: 19 }, __self: this }, "画像をアップロード:"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", id: "imageUpload", name: "imageUpload", accept: "image/jpeg,image/png", onChange: handleImageUpload, className: "opacity-0 absolute inset-0 w-full h-full cursor-pointer", __source: { fileName: "", lineNumber: 92, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-[#edf2f7] border-2 border-dashed border-[#cbd5e0] rounded-lg px-4 py-6 text-center", __source: { fileName: "", lineNumber: 100, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-upload-alt text-4xl text-[#4a5568] mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-[#4a5568]", __source: { fileName: "", lineNumber: 102, columnNumber: 23 }, __self: this }, "ここにファイルをドラッグ＆ドロップ"), /*#__PURE__*/ React.createElement("p", { className: "text-[#4a5568]", __source: { fileName: "", lineNumber: 105, columnNumber: 23 }, __self: this }, "または"), /*#__PURE__*/ React.createElement("span", { className: "bg-[#3182ce] text-white rounded-full px-4 py-2 mt-2 inline-block cursor-pointer hover:bg-[#2c5282]", __source: { fileName: "", lineNumber: 106, columnNumber: 23 }, __self: this }, "ファイルを選択")))), imageUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 114, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2 text-center font-poppins", __source: { fileName: "", lineNumber: 115, columnNumber: 21 }, __self: this }, "アップロードした画像:"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg relative", __source: { fileName: "", lineNumber: 118, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "アップロードした画像のプレビュー", className: "max-w-full h-auto mx-auto", __source: { fileName: "", lineNumber: 119, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleRemoveImage, className: "absolute top-2 right-2 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 transition duration-300", __source: { fileName: "", lineNumber: 124, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 128, columnNumber: 25 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: handleRemoveBackground, disabled: !imageFile || isProcessing, className: `w-full py-3 px-6 text-lg font-semibold text-white rounded-lg mt-6 mb-4 ${!imageFile || isProcessing ? "bg-[#a0aec0] cursor-not-allowed" : "bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 transform hover:scale-105 transition duration-300"}`, __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, isProcessing ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 144, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-white mr-2", __source: { fileName: "", lineNumber: 145, columnNumber: 23 }, __self: this }), "処理中...") : "背景を透過する"), errorMessage && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-center", __source: { fileName: "", lineNumber: 154, columnNumber: 19 }, __self: this }, errorMessage), processedImageUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-8 border-t border-gray-200 pt-8", __source: { fileName: "", lineNumber: 158, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 text-center font-poppins", __source: { fileName: "", lineNumber: 159, columnNumber: 21 }, __self: this }, "処理後の画像:"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 162, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: processedImageUrl, alt: "背景透過処理後の画像", className: "max-w-full h-auto mx-auto", __source: { fileName: "", lineNumber: 163, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleDownloadImage, className: "w-full py-3 px-6 text-lg font-semibold text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 rounded-lg mt-4 transition duration-300", __source: { fileName: "", lineNumber: 168, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 172, columnNumber: 25 }, __self: this }), "画像をダウンロード")))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 184, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } `)); }