function MainComponent() { const [uploadProgress, setUploadProgress] = React.useState(0); const [transcriptText, setTranscriptText] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleFileUpload = async (event)=>{ const file = event.target.files[0]; const formData = new FormData(); formData.append('video', file); setIsLoading(true); const response = await fetch('/upload', { method: 'POST', body: formData, onUploadProgress: (progressEvent)=>{ const percentCompleted = Math.round(progressEvent.loaded * 100 / progressEvent.total); setUploadProgress(percentCompleted); } }); if (response.ok) { const text = await response.text(); setTranscriptText(text); } else { alert('アップロードに失敗しました'); } setIsLoading(false); }; const handleDownloadPdf = async ()=>{ const response = await fetch('/download-pdf', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: transcriptText }) }); if (response.ok) { const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'transcript.pdf'; document.body.appendChild(a); a.click(); a.remove(); window.URL.revokeObjectURL(url); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, "動画の文字起こし"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "videoUpload", className: "block mb-2 font-bold", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "動画ファイルをアップロード (.mp4)"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "videoUpload", accept: ".mp4", onChange: handleFileUpload, className: "border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this })), isLoading && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("progress", { id: "uploadProgress", value: uploadProgress, max: "100", className: "w-full h-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this })), transcriptText && /*#__PURE__*/ React.createElement("div", { className: "result-section", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "解析結果"), /*#__PURE__*/ React.createElement("textarea", { id: "transcriptText", rows: "10", value: transcriptText, onChange: (e)=>setTranscriptText(e.target.value), className: "w-full border border-gray-300 p-2 rounded mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { id: "downloadPdfButton", onClick: handleDownloadPdf, className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "PDFとしてダウンロード"))); }