function MainComponent() { const [videoId, setVideoId] = React.useState(""); const [transcript, setTranscript] = React.useState(""); const [article, setArticle] = React.useState(""); const [summary, setSummary] = React.useState(""); const [commentsSummary, setCommentsSummary] = React.useState(""); const handleVideoIdChange = (e)=>{ setVideoId(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); // Step 1 & 5: Get video and its comments using YouTube API const videoResponse = await fetch(`/api/youtube/video/${videoId}`); const commentsResponse = await fetch(`/api/youtube/comments/${videoId}`); const videoData = await videoResponse.json(); const commentsData = await commentsResponse.json(); // Step 2: Transcribe video audio to text const transcriptionResponse = await fetch('/api/transcribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: videoData.audioUrl }) }); const transcriptionData = await transcriptionResponse.json(); setTranscript(transcriptionData.text); // Step 3: Spell-check and correct transcription text const spellCheckResponse = await fetch('/api/spellcheck', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: transcriptionData.text }) }); const correctedTranscriptionData = await spellCheckResponse.json(); setTranscript(correctedTranscriptionData.correctedText); // Step 4: Rewrite the transcript text const rewriteResponse = await fetch('/api/rewrite', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: correctedTranscriptionData.correctedText }) }); const rewriteData = await rewriteResponse.json(); setArticle(rewriteData.rewrittenText); // Step 6: Summarize comments const summarizeCommentsResponse = await fetch('/api/summarize/comments', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ comments: commentsData.comments }) }); const commentsSummaryData = await summarizeCommentsResponse.json(); setCommentsSummary(commentsSummaryData.summary); // Step 7: Summarize the entire article incorporating comments summary const summarizeArticleResponse = await fetch('/api/summarize/article', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ article: `${rewriteData.rewrittenText}\n\n${commentsSummaryData.summary}` }) }); const articleSummaryData = await summarizeArticleResponse.json(); setSummary(articleSummaryData.summary); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "videoId", className: "block mb-2 text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "YouTube Video ID"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "videoId", name: "videoId", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "Enter YouTube video ID here...", value: videoId, onChange: handleVideoIdChange, __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "Generate Article")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, transcript && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Transcript:"), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, transcript)), article && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "Article:"), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, article)), commentsSummary && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "Comments Summary:"), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, commentsSummary)), summary && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Summary:"), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, summary)))); }