function MainComponent() { const [folderName, setFolderName] = React.useState(''); const [progress, setProgress] = React.useState(0); const handleFormSubmit = async (event)=>{ event.preventDefault(); const files = event.target.folderUpload.files; const formData = new FormData(); for (const file of files){ formData.append('images', file); } const response = await fetch('/api/convert', { method: 'POST', body: formData }); const reader = response.body.getReader(); const contentLength = +response.headers.get('Content-Length'); let receivedLength = 0; const chunks = []; while(true){ const { done, value } = await reader.read(); if (done) break; chunks.push(value); receivedLength += value.length; setProgress(Math.floor(receivedLength / contentLength * 100)); } const blob = new Blob(chunks); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'converted_images.zip'; document.body.appendChild(a); a.click(); a.remove(); }; const handleFolderChange = (event)=>{ const path = event.target.value; const pathParts = path.split('\\'); setFolderName(pathParts[pathParts.length - 2] || ''); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-200 flex flex-col items-center justify-center font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-6", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "フォルダをアップロードして変換"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center", onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "folderUpload", className: "cursor-pointer mb-4 px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-folder-open mr-2", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }), " フォルダを選択"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "folderUpload", name: "folderUpload", webkitdirectory: "", multiple: true, className: "hidden", onChange: handleFolderChange, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), folderName && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-700", __source: { fileName: "", lineNumber: 65, columnNumber: 26 }, __self: this }, "選択されたフォルダ: ", folderName), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 px-4 py-2 bg-green-500 text-white rounded", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt mr-2", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }), " WEBPに変換")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full px-4 py-2 bg-purple-500 text-white rounded", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }), " フォルダをダウンロード")), progress > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-full bg-gray-300 rounded", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-green-500 text-xs leading-none py-1 text-center text-white rounded", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, progress, "%")))); }