add preview for noisereduced file

client/src/Pages/ProcessingPage.tsx

@@ -8,7 +8,7 @@ import JSZip from "jszip";
 
 function ProcessingPage() {
   const navigate = useNavigate();
-  const { mediaFile, response, setExtractedFiles } = useMediaContext();
+  const { mediaFile, response, setExtractedFiles, setDownloadedFileURL } = useMediaContext();
   const [progress, setProgress] = useState(0);
   const [statusText, setStatusText] = useState("Analyzing media...");
 
@@ -40,7 +40,7 @@ function ProcessingPage() {
     }
   };
 
-  const fetchDownload = async () => {
+  const fetchZipDownload = async () => {
     try {
       setStatusText("Fetching Results...");
   
@@ -59,6 +59,30 @@ 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");
+        const blob = new Blob([res.data], { type: "audio/wav" });
+        const fileURL = URL.createObjectURL(blob);
+
+        setDownloadedFileURL( fileURL  );
+        setProgress(100);
+
+      } 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" });
@@ -89,10 +113,10 @@ function ProcessingPage() {
       processStep("/api/trim", () => {
         if (response.audio_class === "Music") {
           processStep("/api/resample", () => {
-            processStep("/api/separate", () => fetchDownload(), 90, "Separating music into vocals, bass, drums and other...");
+            processStep("/api/separate", () => fetchZipDownload(), 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...");
+          processStep("/api/noisereduce", () => fetchDownload(), 90, "Reducing background noise from the audio...");
         }
       }, 50, "Trimming silent parts from the audio...");
     }, 25, "Normalizing audio frequency...");

client/src/Pages/ResultsPage.tsx

@@ -21,7 +21,7 @@ import { useMediaContext } from '../contexts/MediaContext';
 
 function ResultsPage() {
   const navigate = useNavigate();
-  const { mediaFile, response, extractedFiles } = useMediaContext();
+  const { mediaFile, response, extractedFiles, downloadedFileURL } = useMediaContext();
   console.log("Extracted files are", extractedFiles);
 //  const [isPlaying, setIsPlaying] = useState(false);
   const audioRefs = [useRef(null), useRef(null), useRef(null),useRef(null)];
@@ -104,9 +104,12 @@ function ResultsPage() {
                 ))
               ) : (
                 <Box sx={{ width: '100%', mt: 2 }}>
+                  <Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
+                      {mediaFile?.name}
+                    </Typography>
                   <audio
                     ref={audioRefs[0]}
-                    src={mediaFile.url}
+                    src={downloadedFileURL}
                     style={{ width: '100%' }}
                     controls
                   />

client/src/contexts/MediaContext.tsx

@@ -7,6 +7,8 @@ interface MediaContextType {
   setResponse: (response: { file_uuid: string; sr: number; audio_class: string }) => void;
   extractedFiles: { name: string; url: string }[];
   setExtractedFiles: (files: {name: string; url: string }[]) => void;
+  downloadedFileURL:  string;
+  setDownloadedFileURL: ( file: string) => void;
 }
 
 
@@ -19,12 +21,12 @@ export const MediaProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     file_uuid: "",
     sr: 0,
   });
-
   const [extractedFiles, setExtractedFiles] = useState<MediaContextType["extractedFiles"]>([]);
+  const [downloadedFileURL, setDownloadedFileURL] = useState<MediaContextType["downloadedFileURL"]>("");
   
 
   return (
-    <MediaContext.Provider value={{ mediaFile, setMediaFile, response, setResponse, extractedFiles, setExtractedFiles }}>
+    <MediaContext.Provider value={{ mediaFile, setMediaFile, response, setResponse, extractedFiles, setExtractedFiles, downloadedFileURL, setDownloadedFileURL }}>
       {children}
     </MediaContext.Provider>
   );