function MainComponent() { const [file, setFile] = React.useState(null); const [rChannel, setRChannel] = React.useState(''); const [gChannel, setGChannel] = React.useState(''); const [bChannel, setBChannel] = React.useState(''); const [aChannel, setAChannel] = React.useState(''); const handleFileChange = (event)=>{ setFile(event.target.files[0]); }; const handleSplitChannels = ()=>{ if (!file) return; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.src = URL.createObjectURL(file); img.onload = ()=>{ canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); const imageData = ctx.getImageData(0, 0, img.width, img.height); for(let j = 0; j < 4; j++){ const channelData = ctx.createImageData(img.width, img.height); for(let i = 0; i < imageData.data.length; i += 4){ channelData.data[i] = j === 0 ? imageData.data[i] : 0; channelData.data[i + 1] = j === 1 ? imageData.data[i + 1] : 0; channelData.data[i + 2] = j === 2 ? imageData.data[i + 2] : 0; channelData.data[i + 3] = j !== 3 ? 255 : imageData.data[i + 3]; } ctx.putImageData(channelData, 0, 0); if (j === 0) setRChannel(canvas.toDataURL()); else if (j === 1) setGChannel(canvas.toDataURL()); else if (j === 2) setBChannel(canvas.toDataURL()); else setAChannel(canvas.toDataURL()); } }; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4 p-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", onChange: handleFileChange, className: "mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSplitChannels, className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, "Split Channels"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center gap-4 mt-8", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[200px] bg-cover bg-center", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: rChannel, alt: "R Channel Output", className: "w-full h-full", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-[#ffffff]", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "R Channel")), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[200px] bg-cover bg-center", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: gChannel, alt: "G Channel Output", className: "w-full h-full", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-[#ffffff]", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "G Channel")), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[200px] bg-cover bg-center", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: bChannel, alt: "B Channel Output", className: "w-full h-full", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-[#ffffff]", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "B Channel")), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[200px] bg-cover bg-center", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: aChannel, alt: "A Channel Output", className: "w-full h-full", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-[#ffffff]", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "A Channel")))); }