function MainComponent() { const [youtubeURL, setYoutubeURL] = React.useState(''); const [question, setQuestion] = React.useState(''); const [response, setResponse] = React.useState(''); const [summary, setSummary] = React.useState(''); const handleURLChange = (event)=>{ setYoutubeURL(event.target.value); }; const handleQuestionChange = (event)=>{ setQuestion(event.target.value); }; const handleSubmit = async ()=>{ setSummary("動画の要約: AIによる動画の概要はこちらです（これはダミーの要約です）。"); }; const handleQuestionSubmit = async ()=>{ setResponse("AIからの回答: (これはダミーの応答です。)"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#FAFAFA] p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto text-[#121212] mb-8", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "動画の要約と質疑応答AI"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full max-w-xl space-y-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "youtube-url", className: "text-xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "YouTube動画のURL:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "youtube-url", name: "youtube-url", value: youtubeURL, onChange: handleURLChange, className: "p-2 border border-[#DDDDDD]", placeholder: "https://", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "py-2 px-4 bg-[#007BFF] text-white", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "要約する"), summary && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border border-[#DDDDDD]", __source: { fileName: "", lineNumber: 42, columnNumber: 21 }, __self: this }, summary), summary && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("label", { htmlFor: "ai-question", className: "text-xl font-roboto text-[#121212] mt-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "AIに質問する:"), /*#__PURE__*/ React.createElement("textarea", { id: "ai-question", name: "ai-question", rows: "4", value: question, onChange: handleQuestionChange, className: "p-2 border border-[#DDDDDD]", placeholder: "ここに質問を入力...", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleQuestionSubmit, className: "py-2 px-4 bg-[#007BFF] text-white mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "質問する")), response && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border border-[#DDDDDD]", __source: { fileName: "", lineNumber: 62, columnNumber: 22 }, __self: this }, response))); }