function ProcessingStatus({ status = "", isProcessing = false }) { return /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gray-100", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-2 h-2 rounded-full ${isProcessing ? "animate-ping bg-blue-500" : "bg-gray-400"}`, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, status || "アイドル状態")); } function ProcessingStatusStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProcessingStatus, { __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProcessingStatus, { status: "分析中", isProcessing: true, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProcessingStatus, { status: "生成中", isProcessing: true, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProcessingStatus, { status: "完了", isProcessing: false, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function DownloadButton({ isComplete, onDownload, fileName }) { return /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center gap-2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, isComplete && /*#__PURE__*/ React.createElement("button", { onClick: onDownload, className: "px-4 py-2 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg font-roboto transition-colors duration-200 flex items-center gap-2", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }), fileName || "ダウンロード")); } function DownloadButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "処理中:"), /*#__PURE__*/ React.createElement(DownloadButton, { isComplete: false, onDownload: ()=>{}, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "処理完了:"), /*#__PURE__*/ React.createElement(DownloadButton, { isComplete: true, onDownload: ()=>alert("ダウンロード開始"), fileName: "結果.pdf", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [videoFile, setVideoFile] = useState(null); const [textFile, setTextFile] = useState(null); const [isProcessing, setIsProcessing] = useState(null); const [isComplete, setIsComplete] = useState(false); const [processStatus, setProcessStatus] = useState(""); const [resultUrl, setResultUrl] = useState(""); const [upload] = useUpload(); const handleDownload = (event)=>{ if (resultUrl) { window.open(resultUrl, "_blank"); } }; const handleProcessing = async ()=>{ if (!videoFile || !textFile) return; setIsProcessing(true); setProcessStatus("ファイルをアップロード中..."); try { const videoUpload = await upload({ file: videoFile }); const textUpload = await upload({ file: textFile }); setProcessStatus("動画を処理中..."); const response = await fetch("/api/process-video", { method: "POST", body: JSON.stringify({ videoUrl: videoUpload.url, textUrl: textUpload.url }) }); const data = await response.json(); setResultUrl(data.url); setProcessStatus("完了"); setIsComplete(true); } catch (error) { setProcessStatus("エラーが発生しました"); console.error(error); } setIsProcessing(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-sky-200 p-6 mb-8", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "ビデオテキスト抽出ツール")), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 max-w-2xl", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-6 rounded-lg", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-medium", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "動画ファイル"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "video/*", onChange: (e)=>setVideoFile(e.target.files[0]), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-6 rounded-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-medium", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "テキストファイル"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".txt,.doc,.docx", onChange: (e)=>setTextFile(e.target.files[0]), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleProcessing, disabled: !videoFile || !textFile || isProcessing, className: "w-full bg-blue-500 text-white py-3 px-6 rounded-lg hover:bg-blue-600 disabled:bg-gray-300 transition-colors", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "抽出開始"), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(ProcessingStatus, { status: processStatus, isProcessing: isProcessing, __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(DownloadButton, { isComplete: isComplete, onDownload: handleDownload, fileName: "処理結果.mp4", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }))))); }