Add logs for processing

client/src/Pages/PreviewPage.tsx

@@ -8,6 +8,7 @@ import {
   Box, 
   LinearProgress,
 } from '@mui/material';
+import Logs from "../components/Logs"
 import { VolumeUp as VolumeUpIcon, ErrorOutline as ErrorIcon } from '@mui/icons-material';
 import StepperComponent from '../components/StepperComponent';
 import { useMediaContext } from '../contexts/MediaContext';
@@ -129,6 +130,7 @@ function PreviewPage() {
           height: 2,
         }}
       />
+      <Logs />
     </Container>
   );
 }

client/src/Pages/ProcessingPage.tsx

@@ -5,17 +5,24 @@ import StepperComponent from "../components/StepperComponent";
 import { useMediaContext } from "../contexts/MediaContext";
 import axios from "axios";
 import JSZip from "jszip";
+import Logs from "../components/Logs"
+import { formatLogMessage } from "../utils/logUtils";
 
 function ProcessingPage() {
   const navigate = useNavigate();
-  const { mediaFile, response, setExtractedFiles, setDownloadedFileURL, setDownloadedFileSpectrogram } = useMediaContext();
+  const { mediaFile, response, setExtractedFiles, setDownloadedFileURL, setDownloadedFileSpectrogram, setLogs } = useMediaContext();
   const [progress, setProgress] = useState(0);
   const [statusText, setStatusText] = useState("Analyzing media...");
 
   const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
-  const processStep = async (url: string, nextStep: () => void, progressValue: number, status: string, extraData = {}) => {
+  const processStep = async (url: string, log: string | null, nextStep: () => void, progressValue: number, status: string, extraData = {}) => {
     try {
+
+      if (log !== null) {
+        setLogs((prevLogs) => [...prevLogs, log]);
+      }
+
       const formData = new FormData();
       formData.append("file_uuid", response.file_uuid);
       Object.entries(extraData).forEach(([key, value]) => 
@@ -67,6 +74,10 @@ function ProcessingPage() {
         responseType: "blob",
       });
   
+      setLogs((prevLogs) => [...prevLogs, formatLogMessage(`freqsplit/postprocessing: Exporting source file`)]);
+      setTimeout(() => {
+        setLogs((prevLogs) => [...prevLogs, formatLogMessage(`freqsplit/postprocessing: Downloading file`)]);
+      }, 100);
       if (res.status === 200) {
         console.log("Download successful");
         const blob = new Blob([res.data], { type: "audio/wav" });
@@ -78,6 +89,7 @@ function ProcessingPage() {
         // Get spectrogram
         setProgress(95);
         setStatusText("Calculating Spectrogram");
+        setLogs((prevLogs) => [...prevLogs, formatLogMessage(`freqsplit/spectrogram: Calculating spectrogram`)]);
 
         const formData = new FormData();
         formData.append("file_uuid", response.file_uuid);
@@ -114,6 +126,10 @@ function ProcessingPage() {
   
 
   const handleDownload = async (downloadData: Blob) => {
+    setLogs((prevLogs) => [...prevLogs, formatLogMessage(`freqsplit/postprocessing: Exporting source files`)]);
+    setTimeout(() => {
+      setLogs((prevLogs) => [...prevLogs, formatLogMessage(`freqsplit/postprocessing: Downloading files`)]);
+    }, 100);
     const zipBlob = new Blob([downloadData], { type: "application/zip" });
     const zip = await JSZip.loadAsync(zipBlob);
 
@@ -127,6 +143,7 @@ function ProcessingPage() {
         // Get spectrograms
         setProgress(95);
         setStatusText("Calculating Spectrograms");
+        setLogs((prevLogs) => [...prevLogs, formatLogMessage(`freqsplit/spectrogram: Calculating spectrograms`)]);
 
         const formData = new FormData();
         formData.append("file_uuid", response.file_uuid);
@@ -161,14 +178,14 @@ function ProcessingPage() {
 
     console.log("Starting processing...");
 
-    processStep("/api/normalize", () => {
+    processStep("/api/normalize", formatLogMessage("freqsplit/preprocessing: Applying amplitude scaling"), () => {
-      processStep("/api/trim", () => {
+      processStep("/api/trim", formatLogMessage("freqsplit/preprocessing: Pruning silent segments from audio"), () => {
         if (response.audio_class === "Music") {
-          processStep("/api/resample", () => {
+          processStep("/api/resample", formatLogMessage(`freqsplit/preprocessing: Performing rate conversion: ${response.sr}Hz -> 44100Hz`), () => {
-            processStep("/api/separate", () => fetchZipDownload(), 90, "Separating music into vocals, bass, drums and other...");
+            processStep("/api/separate", formatLogMessage(`freqsplit/separation: Demucs: Applying Time-domain source extraction`), () => fetchZipDownload(), 90, formatLogMessage("Separating music into vocals, bass, drums and other..."));
           }, 75, "Resampling audio to 44100Hz...", { sr: "44100" });
         } else {
-          processStep("/api/noisereduce", () => fetchDownload(), 90, "Reducing background noise from the audio...");
+          processStep("/api/noisereduce", formatLogMessage(`freqsplit/refinement: DeepFilterNet: Applying Spectral noise gating`), () => fetchDownload(), 90, formatLogMessage("Reducing background noise from the audio..."));
         }
       }, 50, "Trimming silent parts from the audio...");
     }, 25, "Normalizing audio frequency...");
@@ -217,6 +234,7 @@ function ProcessingPage() {
         height: 2,
       }}
     />
+    <Logs />
     </Container>
   );
 }

client/src/Pages/ResultsPage.tsx

@@ -20,10 +20,12 @@ import StepperComponent from '../components/StepperComponent';
 import { useMediaContext } from '../contexts/MediaContext';
 // @ts-ignore
 import SpectrogramPlayer from "react-audio-spectrogram-player"
+import Logs from "../components/Logs"
+import { formatLogMessage } from "../utils/logUtils";
 
 function ResultsPage() {
   const navigate = useNavigate();
-  const { mediaFile, response, extractedFiles, downloadedFileURL, downloadedFileSpectrogram } = useMediaContext();
+  const { mediaFile, response, extractedFiles, downloadedFileURL, downloadedFileSpectrogram, setLogs } = useMediaContext();
   console.log("Extracted files are", extractedFiles);
 //  const [isPlaying, setIsPlaying] = useState(false);
   const audioClass = response.audio_class
@@ -31,6 +33,7 @@ function ResultsPage() {
 
   const handleDownloadAll = () => {
     if (audioClass === 'Music') {
+      setLogs((prevLogs) => [...prevLogs, formatLogMessage("Saving files")]);
       extractedFiles.forEach(({ name, url }) => {
         const link = document.createElement('a');
         link.href = url;
@@ -40,6 +43,7 @@ function ResultsPage() {
         document.body.removeChild(link);
       });
     } else {
+      setLogs((prevLogs) => [...prevLogs, formatLogMessage("Saving file")]);
       const link = document.createElement('a');
       link.href = downloadedFileURL;
       link.download = mediaFile?.name ?? 'downloaded_file';
@@ -195,6 +199,7 @@ function ResultsPage() {
           <Button variant="contained" color="primary" onClick={handleDownloadAll}>Download All Files</Button>
         </Box>
       </Paper>
+      <Logs />
     </Container>
   );
 }

client/src/Pages/UploadPage.tsx

@@ -102,7 +102,7 @@ function UploadPage() {
     formData.append("file", file);
   
     try {
-      setLogs((prevLogs) => [...prevLogs, formatLogMessage("Uploading audio file")]);
+      setLogs((prevLogs) => [...prevLogs, formatLogMessage("freqsplit/input: Uploading audio file")]);
       const res = await axios.post<{
         file_uuid: string;
         sr: number;
@@ -126,9 +126,9 @@ function UploadPage() {
           spec_sr: res.data.spec_sr
         }));
         setUpload(true);
-        setLogs((prevLogs) => [...prevLogs, formatLogMessage(`Uploaded file successfully`)])
+        setLogs((prevLogs) => [...prevLogs, formatLogMessage(`freqsplit/input: Uploaded file successfully`)])
-        setLogs((prevLogs) => [...prevLogs, formatLogMessage(`file_uuid: ${res.data.file_uuid}`)])
+        setLogs((prevLogs) => [...prevLogs, formatLogMessage(`freqsplit/input: file_uuid: ${res.data.file_uuid}`)])
-        setLogs((prevLogs) => [...prevLogs, formatLogMessage(`audio_class: ${res.data.audio_class}`)])
+        setLogs((prevLogs) => [...prevLogs, formatLogMessage(`freqsplit/input: audio_class: ${res.data.audio_class}`)])
       }
     } catch (error) {
       console.error("Upload failed:", error);