function Upload() { const [loading, setLoading] = React.useState(false); const handleFileUpload = async (event)=>{ setLoading(true); const file = event.target.files[0]; if (!file) return; let convertedFile = file; if (file.type === 'video/mp4') { const data = new FormData(); data.append('inputFile', file); data.append('outputType', 'mp3'); const response = await fetch('/integrations/file-converter/convert', { method: 'POST', body: data }); convertedFile = await response.blob(); } const transcribeResponse = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', headers: { 'Content-Type': file.type === 'video/mp4' ? 'audio/mpeg' : file.type }, body: convertedFile }); const transcript = await transcribeResponse.json(); const text = transcript.results.channels[0].alternatives[0].transcript; await fetch('/api/db/transcripts', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `transcripts` (content) VALUES (?)", values: [ text ] }) }); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "w-[330px] bg-transparent flex flex-col items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".mp4,.mp3,.wav", className: "mb-4 cursor-pointer hidden", onChange: handleFileUpload, name: "fileUpload", id: "fileUpload", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "fileUpload", className: "bg-gradient-to-b from-gray-500 to-black text-center text-[45pt] font-bebas-neue text-white w-[300px] h-[300px] rounded-full shadow-md flex items-center justify-center", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "border-4 border-gray-300 border-t-4 border-t-transparent rounded-full w-16 h-16 animate-spin", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }) : "Upload & Transcribe"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, ` .animate-spin { animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `)); } function UploadStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-gray-200", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Upload, { __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this })); } function TranscriptDisplayPanel({ transcript }) { const [query, setQuery] = React.useState(''); const [loading, setLoading] = React.useState(false); const [response, setResponse] = React.useState(''); const handleAnalyze = async ()=>{ setLoading(true); const result = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": query }, { "role": "system", "content": transcript } ], system_prompt: 'Analyze this transcript based on the user query' }) }).then((res)=>res.json()); setLoading(false); setResponse(result.choices[0].message.content); }; return /*#__PURE__*/ React.createElement("div", { className: "w-[683px] h-full border-2 border-[#4da167] bg-gradient-to-tr from-[#616569] to-black text-white", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-between h-full p-1", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-1/3 p-1 pb-0 flex flex-col", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-1/2 pt-1 font-bebas-neue text-6xl font-bold", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Analyze Transcript"), /*#__PURE__*/ React.createElement("div", { className: "h-1/2 pt-1 flex items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "gpt-query", value: query, onChange: (e)=>setQuery(e.target.value), className: "bg-[#333333] placeholder-white rounded-l p-2 w-2/3 text-white outline-none", placeholder: "Analyze with GPT...", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAnalyze, disabled: loading, className: "ml-2 bg-gradient-to-tr from-white to-gray-300 rounded-full w-10 h-10 flex items-center justify-center", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-down text-black", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "h-1/3 p-1", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#333333] rounded text-white font-kanit-light text-base h-full p-2 overflow-auto", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, loading ? 'Loading...' : response)), /*#__PURE__*/ React.createElement("div", { className: "h-1/3 p-1 pt-0", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#333333] rounded text-white font-kanit-light text-base h-full p-2 overflow-y-scroll scrollbar scrollbar-thumb-white scrollbar-track-transparent", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, transcript)))); } function TranscriptDisplayPanelStory() { const dummyTranscript = "This is a sample transcript text from a video or audio file. It includes multiple lines of text to demonstrate the scrolling functionality in the bottom third of the panel."; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-gray-800", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TranscriptDisplayPanel, { transcript: dummyTranscript, __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this })); } function Background() { return /*#__PURE__*/ React.createElement("div", { className: "w-[342px] h-full bg-gradient-to-br from-[#4da167] to-black flex items-center justify-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Upload, { __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function BackgroundStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-end h-screen", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Background, { __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function Upload() { const [loading, setLoading] = React.useState(false); const handleFileUpload = async (event)=>{ setLoading(true); const file = event.target.files[0]; if (!file) return; let convertedFile = file; const data = new FormData(); data.append('inputFile', file); data.append('outputType', 'mp3'); const response = await fetch('/integrations/file-converter/convert', { method: 'POST', body: data }); convertedFile = await response.blob(); const transcribeResponse = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', headers: { 'Content-Type': 'audio/mpeg' }, body: convertedFile }); const transcript = await transcribeResponse.json(); const text = transcript.results.channels[0].alternatives[0].transcript; await fetch('/api/db/video-library', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `video_transcripts` (transcript) VALUES (?)", values: [ text ] }) }); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "w-[330px] bg-transparent flex flex-col items-center", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".mp4,.mp3,.wav", className: "mb-4 cursor-pointer hidden", onChange: handleFileUpload, name: "fileUpload", id: "fileUpload", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "fileUpload", className: "bg-gradient-to-b from-gray-500 to-black text-center text-[45pt] font-bebas-neue text-white w-[300px] h-[300px] rounded-full shadow-md flex items-center justify-center", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "border-4 border-gray-300 border-t-4 border-t-transparent rounded-full w-16 h-16 animate-spin", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }) : "Upload & Transcribe"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, ` .animate-spin { animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `)); } function MainComponent() { const [transcript, setTranscript] = React.useState(''); return /*#__PURE__*/ React.createElement("div", { className: "w-[1024px] h-screen flex", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2/3", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(TranscriptDisplayPanel, { transcript: transcript, __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-1/3", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Background, { setTranscript: setTranscript, __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }))); } function Background({ setTranscript }) { const [loading, setLoading] = React.useState(false); const handleFileUpload = async (event)=>{ setLoading(true); const file = event.target.files[0]; if (!file) return; let convertedFile = file; if (file.type === 'video/mp4') { const data = new FormData(); data.append('inputFile', file); data.append('outputType', 'mp3'); const response = await fetch('/integrations/file-converter/convert', { method: 'POST', body: data }); convertedFile = await response.blob(); } const transcribeResponse = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', headers: { 'Content-Type': file.type === 'video/mp4' ? 'audio/mpeg' : file.type }, body: convertedFile }); const transcript = await transcribeResponse.json(); const text = transcript.results.channels[0].alternatives[0].transcript; setTranscript(text); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "w-[342px] h-full bg-gradient-to-br from-[#4da167] to-black flex items-center justify-center", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[330px] bg-transparent flex flex-col items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".mp4,.mp3,.wav", className: "mb-4 cursor-pointer hidden", onChange: handleFileUpload, name: "fileUpload", id: "fileUpload", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "fileUpload", className: "bg-gradient-to-b from-gray-500 to-black text-center text-[45pt] font-bebas-neue text-white w-[300px] h-[300px] rounded-full shadow-md flex items-center justify-center", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "border-4 border-gray-300 border-t-4 border-t-transparent rounded-full w-16 h-16 animate-spin", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }) : "Upload & Transcribe"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, ` .animate-spin { animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `))); }