function VideoPodcastTranscript({ url, setUrl, isSubmitting, fetchTranscript, transcript, progress }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg p-8 bg-white shadow-md rounded lg:max-w-2xl", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Get Audio Transcript"), /*#__PURE__*/ React.createElement("form", { onSubmit: fetchTranscript, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "video-podcast-url", className: "block text-sm font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Paste the link to the video or podcast:"), /*#__PURE__*/ React.createElement("input", { type: "url", name: "video-podcast-url", id: "video-podcast-url", value: url, onChange: (e)=>setUrl(e.target.value), placeholder: "https://example.com", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", required: true, __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmitting, className: `${isSubmitting ? 'bg-[#93C5FD]' : 'bg-[#1D4ED8] hover:bg-[#2563EB]'} w-full text-white font-roboto py-2 px-4 rounded focus:outline-none focus:shadow-outline`, __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, isSubmitting ? 'Submitting...' : 'Get Transcript')), isSubmitting && /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full overflow-hidden mt-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2563EB] text-xs font-roboto font-medium text-blue-100 text-center p-0.5 leading-none rounded-full", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Processing ", progress, "%")), transcript && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, transcript))); } function VideoPodcastTranscriptStory() { const [url, setUrl] = React.useState(''); const [isSubmitting, setIsSubmitting] = React.useState(false); const [progress, setProgress] = React.useState(0); const [transcript, setTranscript] = React.useState(''); const simulateProgress = ()=>{ let currentProgress = 0; const interval = setInterval(()=>{ currentProgress += 10; if (currentProgress <= 100) { setProgress(currentProgress); } else { clearInterval(interval); setTranscript("Example transcript text..."); setIsSubmitting(false); } }, 200); }; const fetchTranscript = async (event)=>{ event.preventDefault(); setIsSubmitting(true); simulateProgress(); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPodcastTranscript, { url: url, setUrl: setUrl, isSubmitting: isSubmitting, fetchTranscript: fetchTranscript, transcript: transcript, progress: progress, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this })); } function Formatting({ isLoading }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex justify-center items-center", __source: { fileName: "", lineNumber: 3, columnNumber: 9 }, __self: this }, isLoading && /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 27 }, __self: this }, "ChatGPT Formatting...")); } function FormattingStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Formatting, { isLoading: true, __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(Formatting, { isLoading: false, __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this })); } function BeginScrape({ url, onSubmit }) { return /*#__PURE__*/ React.createElement("form", { onSubmit: onSubmit, className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: url, onChange: (e)=>onSubmit(e.target.value), name: "url", placeholder: "Enter URL for scrapping", className: "p-2 border-2 border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "ml-4 p-2 bg-blue-500 text-white rounded-md", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "Scrape")); } function BeginScrapeStory() { const [url, setUrl] = React.useState(''); const [scrapping, setScrapping] = React.useState(false); const handleScrap = async (inputUrl)=>{ setScrapping(true); setUrl(inputUrl); await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url: inputUrl }), headers: { 'Content-Type': 'application/json' } }); setScrapping(false); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BeginScrape, { url: url, onSubmit: handleScrap, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), scrapping && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 40, columnNumber: 21 }, __self: this }, "Scrapping...")); } function PrintTranscript({ transcript }) { return /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Video Podcast Transcript")), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-4", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, transcript))); } function PrintTranscriptStory() { const sampleTranscript = "This is a sample transcript of a video podcast, showcasing how ChatGPT can format and print the transcript to the screen."; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PrintTranscript, { transcript: sampleTranscript, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [url, setUrl] = React.useState(''); const [isSubmitting, setIsSubmitting] = React.useState(false); const [transcript, setTranscript] = React.useState(''); const [summary, setSummary] = React.useState(''); const [isScraping, setIsScraping] = React.useState(false); const [isFormatting, setIsFormatting] = React.useState(false); const fetchTranscript = async (event)=>{ event.preventDefault(); setIsSubmitting(true); setTranscript(''); setIsScraping(true); try { await simulateScraping(); setIsScraping(false); setIsFormatting(true); await simulateFormatting(); setIsFormatting(false); setTranscript("Example formatted transcript text..."); summarizeTranscript(); } catch (error) { console.error('Error:', error); } setIsSubmitting(false); }; const simulateScraping = ()=>new Promise((resolve)=>setTimeout(resolve, 1000)); const simulateFormatting = ()=>new Promise((resolve)=>setTimeout(resolve, 1000)); const summarizeTranscript = ()=>setSummary("This is a summarized version of the transcript..."); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F0F2F5] flex flex-wrap justify-center items-start pt-8", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-[40%] p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPodcastTranscript, { url: url, setUrl: setUrl, isSubmitting: isSubmitting, fetchTranscript: fetchTranscript, transcript: transcript, progress: isScraping ? 50 : isFormatting ? 80 : 100, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-[60%] p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, isScraping && /*#__PURE__*/ React.createElement(BeginScrape, { url: url, onSubmit: ()=>{}, __source: { fileName: "", lineNumber: 49, columnNumber: 24 }, __self: this }), isFormatting && /*#__PURE__*/ React.createElement(Formatting, { isLoading: isFormatting, __source: { fileName: "", lineNumber: 50, columnNumber: 26 }, __self: this }), transcript && /*#__PURE__*/ React.createElement(PrintTranscript, { transcript: transcript, __source: { fileName: "", lineNumber: 51, columnNumber: 24 }, __self: this }), transcript && /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-4 bg-white shadow-md rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Summary"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, summary)))); }