From 9af59c9f2025e743fa90b3362a9f4e83d0be12b2 Mon Sep 17 00:00:00 2001 From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com> Date: Tue, 18 Mar 2025 14:21:19 +0530 Subject: [PATCH 1/9] add code to download and extract zip --- client/package.json | 1 + client/src/Pages/ProcessingPage.tsx | 41 ++++++++++++++++++++++++++++- 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/client/package.json b/client/package.json index 713d1ef..c521b62 100644 --- a/client/package.json +++ b/client/package.json @@ -16,6 +16,7 @@ "@mui/icons-material": "^5.15.10", "@mui/material": "^5.15.10", "axios": "^1.8.3", + "jszip": "^3.10.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.1" diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx index 5ee8734..9566bdc 100644 --- a/client/src/Pages/ProcessingPage.tsx +++ b/client/src/Pages/ProcessingPage.tsx @@ -4,6 +4,7 @@ import { Typography, Container, Paper, Box, LinearProgress } from "@mui/material import StepperComponent from "../components/StepperComponent"; import { useMediaContext } from "../contexts/MediaContext"; import axios from "axios"; +import JSZip from "jszip"; function ProcessingPage() { const navigate = useNavigate(); @@ -39,6 +40,44 @@ function ProcessingPage() { } }; + const fetchDownload = async () => { + try { + setStatusText("Fetching Results..."); + + const res = await axios.get(`/api/download?file_uuid=${response.file_uuid}`, { + responseType: "blob", + }); + + if (res.status === 200) { + console.log("Download successful"); + await handleDownload(res.data); + } else { + console.log("Failed to download the file"); + } + } catch (error) { + console.error("Error fetching download:", error); + } + }; + + + const handleDownload = async (downloadData: Blob) => { + const zipBlob = new Blob([downloadData], { type: "application/zip" }); + const zip = await JSZip.loadAsync(zipBlob); + + const fileURLs = []; + + for (const [filename, fileData] of Object.entries(zip.files)) { + if (!fileData.dir) { + const fileBlob = await fileData.async("blob"); + const fileURL = URL.createObjectURL(fileBlob); + fileURLs.push({ filename, fileURL }); + } + } + + fileURLs.forEach(({ filename, fileURL }) => console.log(`File: ${filename}, URL: ${fileURL}`)); + setProgress(100); + }; + useEffect(() => { if (!mediaFile) { navigate("/upload"); @@ -51,7 +90,7 @@ function ProcessingPage() { processStep("/api/trim", () => { if (response.audio_class === "Music") { processStep("/api/resample", () => { - processStep("/api/separate", () => setProgress(100), 100, "Separating music into vocals, bass, drums and other..."); + processStep("/api/separate", () => fetchDownload(), 90, "Separating music into vocals, bass, drums and other..."); }, 75, "Resampling audio to 44100Hz...", { sr: "44100" }); } else { processStep("/api/noisereduce", () => setProgress(100), 100, "Reducing background noise from the audio..."); From 767977836b9cc5d828d0226f9f30acb6b329e1df Mon Sep 17 00:00:00 2001 From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com> Date: Tue, 18 Mar 2025 15:01:01 +0530 Subject: [PATCH 2/9] add extractedFiles state to MediaContext --- client/src/Pages/ProcessingPage.tsx | 7 +++---- client/src/Pages/ResultsPage.tsx | 3 ++- client/src/contexts/MediaContext.tsx | 6 +++++- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx index 9566bdc..797b6a8 100644 --- a/client/src/Pages/ProcessingPage.tsx +++ b/client/src/Pages/ProcessingPage.tsx @@ -8,7 +8,7 @@ import JSZip from "jszip"; function ProcessingPage() { const navigate = useNavigate(); - const { mediaFile, response } = useMediaContext(); + const { mediaFile, response, setExtractedFiles } = useMediaContext(); const [progress, setProgress] = useState(0); const [statusText, setStatusText] = useState("Analyzing media..."); @@ -70,11 +70,10 @@ function ProcessingPage() { if (!fileData.dir) { const fileBlob = await fileData.async("blob"); const fileURL = URL.createObjectURL(fileBlob); - fileURLs.push({ filename, fileURL }); + fileURLs.push({ name: filename, url: fileURL }); } } - - fileURLs.forEach(({ filename, fileURL }) => console.log(`File: ${filename}, URL: ${fileURL}`)); + setExtractedFiles(fileURLs); setProgress(100); }; diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx index 031328f..38007aa 100644 --- a/client/src/Pages/ResultsPage.tsx +++ b/client/src/Pages/ResultsPage.tsx @@ -21,7 +21,8 @@ import { useMediaContext } from '../contexts/MediaContext'; function ResultsPage() { const navigate = useNavigate(); - const { mediaFile, response } = useMediaContext(); + const { mediaFile, response, extractedFiles } = useMediaContext(); + console.log("Extracted files are", extractedFiles); // const [isPlaying, setIsPlaying] = useState(false); const audioRefs = [useRef(null), useRef(null), useRef(null),useRef(null)]; const audioClass = response.audio_class diff --git a/client/src/contexts/MediaContext.tsx b/client/src/contexts/MediaContext.tsx index 7ad877d..d2952aa 100644 --- a/client/src/contexts/MediaContext.tsx +++ b/client/src/contexts/MediaContext.tsx @@ -5,6 +5,8 @@ interface MediaContextType { setMediaFile: (file: { name: string; url: string; type: string }) => void; response: { file_uuid: string; sr: number; audio_class: string }; setResponse: (response: { file_uuid: string; sr: number; audio_class: string }) => void; + extractedFiles: { name: string; url: string }[]; + setExtractedFiles: (files: {name: string; url: string }[]) => void; } @@ -17,10 +19,12 @@ export const MediaProvider: React.FC<{ children: React.ReactNode }> = ({ childre file_uuid: "", sr: 0, }); + + const [extractedFiles, setExtractedFiles] = useState([]); return ( - + {children} ); From 8bd1cc4abb05cd8bdfddc4b28dcf2b5311e28830 Mon Sep 17 00:00:00 2001 From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com> Date: Tue, 18 Mar 2025 15:20:14 +0530 Subject: [PATCH 3/9] preview results --- client/src/Pages/ResultsPage.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx index 38007aa..011891d 100644 --- a/client/src/Pages/ResultsPage.tsx +++ b/client/src/Pages/ResultsPage.tsx @@ -77,11 +77,14 @@ function ResultsPage() { {mediaFile.name} (Processed) {audioClass === "Music" ? ( - audioRefs.map((ref, index) => ( + extractedFiles.map((file, index) => ( + + {file.name} + ); } -export default ResultsPage; +export default ResultsPage; \ No newline at end of file From 4afae4cc8493001826c1f5553a26c8974ae0641f Mon Sep 17 00:00:00 2001 From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com> Date: Tue, 18 Mar 2025 16:51:50 +0530 Subject: [PATCH 9/9] add logic for download --- client/src/Pages/ResultsPage.tsx | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx index dc80bfb..36988ba 100644 --- a/client/src/Pages/ResultsPage.tsx +++ b/client/src/Pages/ResultsPage.tsx @@ -28,6 +28,26 @@ function ResultsPage() { const mediaFileRef = useRef(null); const audioClass = response.audio_class const isVideo = mediaFile?.type.includes('video'); + + const handleDownloadAll = () => { + if (audioClass === 'Music') { + extractedFiles.forEach(({ name, url }) => { + const link = document.createElement('a'); + link.href = url; + link.download = name; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }); + } else { + const link = document.createElement('a'); + link.href = downloadedFileURL; + link.download = mediaFile?.name ?? 'downloaded_file'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + } + }; useEffect(() => { if (!mediaFile) { @@ -163,7 +183,7 @@ function ResultsPage() { - +