From d47a228ce7bb8dfc60f2a702551b8211f5c0ee54 Mon Sep 17 00:00:00 2001 From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com> Date: Wed, 19 Mar 2025 16:10:01 +0530 Subject: [PATCH] Add logs for processing --- client/src/Pages/PreviewPage.tsx | 2 ++ client/src/Pages/ProcessingPage.tsx | 32 ++++++++++++++++++++++------- client/src/Pages/ResultsPage.tsx | 7 ++++++- client/src/Pages/UploadPage.tsx | 8 ++++---- 4 files changed, 37 insertions(+), 12 deletions(-) diff --git a/client/src/Pages/PreviewPage.tsx b/client/src/Pages/PreviewPage.tsx index 250158d..e30d023 100644 --- a/client/src/Pages/PreviewPage.tsx +++ b/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, }} /> + ); } diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx index 8a44a90..a77d6f2 100644 --- a/client/src/Pages/ProcessingPage.tsx +++ b/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/trim", () => { + processStep("/api/normalize", formatLogMessage("freqsplit/preprocessing: Applying amplitude scaling"), () => { + processStep("/api/trim", formatLogMessage("freqsplit/preprocessing: Pruning silent segments from audio"), () => { if (response.audio_class === "Music") { - processStep("/api/resample", () => { - processStep("/api/separate", () => fetchZipDownload(), 90, "Separating music into vocals, bass, drums and other..."); + processStep("/api/resample", formatLogMessage(`freqsplit/preprocessing: Performing rate conversion: ${response.sr}Hz -> 44100Hz`), () => { + 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, }} /> + ); } diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx index 2735a50..698c1ca 100644 --- a/client/src/Pages/ResultsPage.tsx +++ b/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() { + ); } diff --git a/client/src/Pages/UploadPage.tsx b/client/src/Pages/UploadPage.tsx index 1a4eb08..b8781df 100644 --- a/client/src/Pages/UploadPage.tsx +++ b/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(`file_uuid: ${res.data.file_uuid}`)]) - setLogs((prevLogs) => [...prevLogs, formatLogMessage(`audio_class: ${res.data.audio_class}`)]) + setLogs((prevLogs) => [...prevLogs, formatLogMessage(`freqsplit/input: Uploaded file successfully`)]) + setLogs((prevLogs) => [...prevLogs, formatLogMessage(`freqsplit/input: file_uuid: ${res.data.file_uuid}`)]) + setLogs((prevLogs) => [...prevLogs, formatLogMessage(`freqsplit/input: audio_class: ${res.data.audio_class}`)]) } } catch (error) { console.error("Upload failed:", error);