function MainComponent() { const [videoFile, setVideoFile] = React.useState(null); const [finalTranscripts, setFinalTranscripts] = React.useState([]); const handleFileChange = (e)=>{ const file = e.target.files[0]; if (file) { setVideoFile(file); } }; const handleGenerateTranscript = async (e)=>{ e.preventDefault(); if (!videoFile) { alert('動画ファイルを選択してください。'); return; } const transcripts = [ { speaker: "話者1", text: `動画ファイル「${videoFile.name}」の話者1の発言です。` }, { speaker: "話者2", text: `動画ファイル「${videoFile.name}」の話者2の発言です。` } ]; setFinalTranscripts(transcripts); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold mb-6 text-[#333] font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "動画の内容を文字起こし"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl bg-white shadow-md rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleGenerateTranscript, __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "videoFile", className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 25 }, __self: this }, "動画ファイル"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "videoFile", id: "videoFile", onChange: handleFileChange, className: "mt-1 p-2 w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500", accept: "video/*", __source: { fileName: "", lineNumber: 33, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 35, columnNumber: 21 }, __self: this }, "生成")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, finalTranscripts.map((transcript, index)=>/*#__PURE__*/ React.createElement("p", { key: index, __source: { fileName: "", lineNumber: 39, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 39, columnNumber: 36 }, __self: this }, transcript.speaker, ":"), " ", transcript.text)))))); }