From a6ae6462506c656e7be969ff9350ab3522bcaab1 Mon Sep 17 00:00:00 2001 From: karthikeyan-ks Date: Sun, 16 Mar 2025 15:03:41 +0530 Subject: [PATCH 1/5] client change --- client/src/Pages/ProcessingPage.tsx | 34 ++++++++++++++--------------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx index a4e6c1c..ff9fef3 100644 --- a/client/src/Pages/ProcessingPage.tsx +++ b/client/src/Pages/ProcessingPage.tsx @@ -1,6 +1,6 @@ -import React, { useState, useEffect } from "react"; +import { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import { Snackbar, Alert, Button } from "@mui/material"; +import { Snackbar, Alert } from "@mui/material"; import { Typography, Container, @@ -41,6 +41,7 @@ function ProcessingPage() { console.log("response from server:", res); if (res.status === 200 && res.data) { showToast(res.data.message, "success"); + setProgress(25) processTrim(); } else { showToast("Audio Normalization failed", "error"); @@ -66,8 +67,10 @@ function ProcessingPage() { if (res.status === 200 && res.data) { showToast(res.data.message, "success"); if (response.audio_class === "Music") { + setProgress(50) processResampling(); }else{ + setProgress(75) processNoiseReduce() } } else { @@ -95,6 +98,7 @@ function ProcessingPage() { console.log("response from server:", res); if (res.status === 200 && res.data) { showToast(res.data.message, "success"); + setProgress(75) processSeparate() } else { @@ -121,6 +125,9 @@ function ProcessingPage() { console.log("response from server:", res); if (res.status === 200 && res.data) { showToast(res.data.message, "success"); + setTimeout(()=>{ + setProgress(100) + },5000) } else { showToast("Audio NoiseRemoval failed", "error"); } @@ -143,6 +150,7 @@ function ProcessingPage() { ); console.log("response from server:", res); if (res.status === 200 && res.data) { + setProgress(100) showToast("Audio separated successfully", "success"); } else { showToast("Audio separation failed", "error"); @@ -162,24 +170,14 @@ function ProcessingPage() { console.log("Normalizing...."); processNormalize(); - - - // Simulate processing progress - const interval = setInterval(() => { - setProgress((prevProgress) => { - const newProgress = prevProgress + 10; - if (newProgress >= 100) { - clearInterval(interval); - setTimeout(() => navigate("/results"), 500); - return 100; - } - return newProgress; - }); - }, 800); - - return () => clearInterval(interval); }, [mediaFile, navigate]); + useEffect(()=>{ + if(progress == 100){ + navigate('/results') + } + },[progress]) + return ( From 4c45ccc62e49c55d8d76aace82858087032f00a6 Mon Sep 17 00:00:00 2001 From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com> Date: Sun, 16 Mar 2025 16:00:30 +0530 Subject: [PATCH 2/5] add 5 sec delay for each process --- client/src/Pages/ProcessingPage.tsx | 164 ++++++---------------------- 1 file changed, 35 insertions(+), 129 deletions(-) diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx index ff9fef3..29a2ed1 100644 --- a/client/src/Pages/ProcessingPage.tsx +++ b/client/src/Pages/ProcessingPage.tsx @@ -21,6 +21,7 @@ function ProcessingPage() { const [severity, setSeverity] = useState< "success" | "error" | "warning" | "info" >("info"); + const showToast = ( msg: string, type: "success" | "error" | "warning" | "info" @@ -29,154 +30,59 @@ function ProcessingPage() { setSeverity(type); setOpen(true); }; - const processNormalize = async () => { - try { - const formData = new FormData(); - formData.append("file_uuid", response.file_uuid); - const res = await axios.post("http://127.0.0.1:8000/api/normalize", formData, { - headers: { - "Content-Type": "multipart/form-data", - }, - }); - console.log("response from server:", res); - if (res.status === 200 && res.data) { - showToast(res.data.message, "success"); - setProgress(25) - processTrim(); - } else { - showToast("Audio Normalization failed", "error"); - } - } catch (error) { - console.error("Normalization failed:", error); - } - }; - const processTrim = async () => { - try { - const formData = new FormData(); - formData.append("file_uuid", response.file_uuid); - const res = await axios.post( - "http://127.0.0.1:8000/api/trim", - formData, - { - headers: { - "Content-Type": "multipart/form-data", - }, - } - ); - console.log("response from server:", res); - if (res.status === 200 && res.data) { - showToast(res.data.message, "success"); - if (response.audio_class === "Music") { - setProgress(50) - processResampling(); - }else{ - setProgress(75) - processNoiseReduce() - } - } else { - showToast("Audio Trimming failed", "error"); - } - } catch (error) { - console.error("Trimming failed:", error); - return; - } - }; - const processResampling = async () => { - try { - const formData = new FormData(); - formData.append("file_uuid", response.file_uuid); - formData.append("sr", String(response.sr)); - const res = await axios.post( - "http://127.0.0.1:8000/api/resample", - formData, - { - headers: { - "Content-Type": "multipart/form-data", - }, - } - ); - console.log("response from server:", res); - if (res.status === 200 && res.data) { - showToast(res.data.message, "success"); - setProgress(75) - processSeparate() - - } else { - showToast("Audio Resampling failed", "error"); - } - } catch (error) { - console.error("Resampling failed:", error); - } - }; - const processNoiseReduce = async () => { + const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); + + const processStep = async (url: string, nextStep: () => void, progressValue: number) => { try { const formData = new FormData(); formData.append("file_uuid", response.file_uuid); - const res = await axios.post( - "http://127.0.0.1:8000/api/noisereduce", - formData, - { - headers: { - "Content-Type": "multipart/form-data", - }, - } - ); - console.log("response from server:", res); + const startTime = Date.now(); + const res = await axios.post(url, formData, { + headers: { "Content-Type": "multipart/form-data" }, + }); + if (res.status === 200 && res.data) { showToast(res.data.message, "success"); - setTimeout(()=>{ - setProgress(100) - },5000) + const elapsedTime = Date.now() - startTime; + if (elapsedTime < 5000) await delay(5000 - elapsedTime); + setProgress(progressValue); + nextStep(); } else { - showToast("Audio NoiseRemoval failed", "error"); + showToast(`Step failed: ${url}`, "error"); } } catch (error) { - console.error("NoiseRemoval failed:", error); + console.error(`Error in step: ${url}`, error); + showToast(`Error processing: ${url}`, "error"); } }; - const processSeparate = async () => { - try { - const formData = new FormData(); - formData.append("file_uuid", response.file_uuid); - const res = await axios.post( - "http://127.0.0.1:8000/api/separate", - formData, - { - headers: { - "Content-Type": "multipart/form-data", - }, - } - ); - console.log("response from server:", res); - if (res.status === 200 && res.data) { - setProgress(100) - showToast("Audio separated successfully", "success"); - } else { - showToast("Audio separation failed", "error"); - } - } catch (error) { - console.error("Separation failed:", error); - } - }; - - useEffect(() => { if (!mediaFile) { navigate("/upload"); return; } - console.log("Normalizing...."); - processNormalize(); - + + console.log("Starting processing..."); + + processStep("http://127.0.0.1:8000/api/normalize", () => { + processStep("http://127.0.0.1:8000/api/trim", () => { + if (response.audio_class === "Music") { + processStep("http://127.0.0.1:8000/api/resample", () => { + processStep("http://127.0.0.1:8000/api/separate", () => setProgress(100), 100); + }, 75); + } else { + processStep("http://127.0.0.1:8000/api/noisereduce", () => setProgress(100), 100); + } + }, 50); + }, 25); }, [mediaFile, navigate]); - useEffect(()=>{ - if(progress == 100){ - navigate('/results') - } - },[progress]) + useEffect(() => { + if (progress === 100) { + navigate("/results"); + } + }, [progress]); return ( From a89b625453209691da22c963b752a4a7ae99b377 Mon Sep 17 00:00:00 2001 From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com> Date: Sun, 16 Mar 2025 16:05:29 +0530 Subject: [PATCH 3/5] bugfix: pass sr in formData to api/resample/ --- client/src/Pages/ProcessingPage.tsx | 41 +++++++++++++++-------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx index 29a2ed1..563da82 100644 --- a/client/src/Pages/ProcessingPage.tsx +++ b/client/src/Pages/ProcessingPage.tsx @@ -1,13 +1,7 @@ import { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { Snackbar, Alert } from "@mui/material"; -import { - Typography, - Container, - Paper, - Box, - LinearProgress, -} from "@mui/material"; +import { Typography, Container, Paper, Box, LinearProgress } from "@mui/material"; import StepperComponent from "../components/StepperComponent"; import { useMediaContext } from "../contexts/MediaContext"; import axios from "axios"; @@ -18,25 +12,27 @@ function ProcessingPage() { const [progress, setProgress] = useState(0); const [open, setOpen] = useState(false); const [message, setMessage] = useState(""); - const [severity, setSeverity] = useState< - "success" | "error" | "warning" | "info" - >("info"); + const [severity, setSeverity] = useState("info"); - const showToast = ( - msg: string, - type: "success" | "error" | "warning" | "info" - ) => { + const showToast = (msg, type) => { setMessage(msg); setSeverity(type); setOpen(true); }; - const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); + const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); - const processStep = async (url: string, nextStep: () => void, progressValue: number) => { + const processStep = async (url, nextStep, progressValue, extraData = null) => { try { const formData = new FormData(); formData.append("file_uuid", response.file_uuid); + + if (extraData) { + for (const key in extraData) { + formData.append(key, extraData[key]); + } + } + const startTime = Date.now(); const res = await axios.post(url, formData, { headers: { "Content-Type": "multipart/form-data" }, @@ -68,9 +64,14 @@ function ProcessingPage() { processStep("http://127.0.0.1:8000/api/normalize", () => { processStep("http://127.0.0.1:8000/api/trim", () => { if (response.audio_class === "Music") { - processStep("http://127.0.0.1:8000/api/resample", () => { - processStep("http://127.0.0.1:8000/api/separate", () => setProgress(100), 100); - }, 75); + processStep( + "http://127.0.0.1:8000/api/resample", + () => { + processStep("http://127.0.0.1:8000/api/separate", () => setProgress(100), 100); + }, + 75, + { sr: response.sr?.toString() || "44100" } + ); } else { processStep("http://127.0.0.1:8000/api/noisereduce", () => setProgress(100), 100); } @@ -137,4 +138,4 @@ function ProcessingPage() { ); } -export default ProcessingPage; +export default ProcessingPage; \ No newline at end of file From 01fd28c1267010f56d0368184ab57eee5e3f6d39 Mon Sep 17 00:00:00 2001 From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com> Date: Sun, 16 Mar 2025 16:21:01 +0530 Subject: [PATCH 4/5] add corresponding process messages --- client/src/Pages/ProcessingPage.tsx | 55 ++++++++++++++--------------- 1 file changed, 26 insertions(+), 29 deletions(-) diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx index 563da82..e65a4a8 100644 --- a/client/src/Pages/ProcessingPage.tsx +++ b/client/src/Pages/ProcessingPage.tsx @@ -1,7 +1,13 @@ import { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { Snackbar, Alert } from "@mui/material"; -import { Typography, Container, Paper, Box, LinearProgress } from "@mui/material"; +import { + Typography, + Container, + Paper, + Box, + LinearProgress, +} from "@mui/material"; import StepperComponent from "../components/StepperComponent"; import { useMediaContext } from "../contexts/MediaContext"; import axios from "axios"; @@ -12,27 +18,29 @@ function ProcessingPage() { const [progress, setProgress] = useState(0); const [open, setOpen] = useState(false); const [message, setMessage] = useState(""); - const [severity, setSeverity] = useState("info"); + const [severity, setSeverity] = useState< + "success" | "error" | "warning" | "info" + >("info"); + const [statusText, setStatusText] = useState("Analyzing media..."); - const showToast = (msg, type) => { + const showToast = ( + msg: string, + type: "success" | "error" | "warning" | "info" + ) => { setMessage(msg); setSeverity(type); setOpen(true); }; - const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); + const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); - const processStep = async (url, nextStep, progressValue, extraData = null) => { + const processStep = async (url: string, nextStep: () => void, progressValue: number, status: string, extraData = {}) => { try { const formData = new FormData(); formData.append("file_uuid", response.file_uuid); - - if (extraData) { - for (const key in extraData) { - formData.append(key, extraData[key]); - } - } + Object.entries(extraData).forEach(([key, value]) => formData.append(key, value)); + setStatusText(status); const startTime = Date.now(); const res = await axios.post(url, formData, { headers: { "Content-Type": "multipart/form-data" }, @@ -64,19 +72,14 @@ function ProcessingPage() { processStep("http://127.0.0.1:8000/api/normalize", () => { processStep("http://127.0.0.1:8000/api/trim", () => { if (response.audio_class === "Music") { - processStep( - "http://127.0.0.1:8000/api/resample", - () => { - processStep("http://127.0.0.1:8000/api/separate", () => setProgress(100), 100); - }, - 75, - { sr: response.sr?.toString() || "44100" } - ); + processStep("http://127.0.0.1:8000/api/resample", () => { + processStep("http://127.0.0.1:8000/api/separate", () => setProgress(100), 100, "Separating sources into vocals, bass, drums and other..."); + }, 75, "Resampling audio to 44100Hz...", { sr: response.sr?.toString() || "44100" }); } else { - processStep("http://127.0.0.1:8000/api/noisereduce", () => setProgress(100), 100); + processStep("http://127.0.0.1:8000/api/noisereduce", () => setProgress(100), 100, "Reducing background noise from the audio..."); } - }, 50); - }, 25); + }, 50, "Trimming silent parts from the audio..."); + }, 25, "Normalizing audio frequency..."); }, [mediaFile, navigate]); useEffect(() => { @@ -110,13 +113,7 @@ function ProcessingPage() { - {progress < 30 - ? "Analyzing media..." - : progress < 60 - ? "Applying processing..." - : progress < 90 - ? "Finalizing..." - : "Almost done..."} + {statusText} Date: Sun, 16 Mar 2025 16:33:30 +0530 Subject: [PATCH 5/5] remove toast messages --- client/src/Pages/ProcessingPage.tsx | 41 +---------------------------- 1 file changed, 1 insertion(+), 40 deletions(-) diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx index e65a4a8..0e9392b 100644 --- a/client/src/Pages/ProcessingPage.tsx +++ b/client/src/Pages/ProcessingPage.tsx @@ -1,13 +1,6 @@ import { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import { Snackbar, Alert } from "@mui/material"; -import { - Typography, - Container, - Paper, - Box, - LinearProgress, -} from "@mui/material"; +import { Typography, Container, Paper, Box, LinearProgress } from "@mui/material"; import StepperComponent from "../components/StepperComponent"; import { useMediaContext } from "../contexts/MediaContext"; import axios from "axios"; @@ -16,22 +9,8 @@ function ProcessingPage() { const navigate = useNavigate(); const { mediaFile, response } = useMediaContext(); const [progress, setProgress] = useState(0); - const [open, setOpen] = useState(false); - const [message, setMessage] = useState(""); - const [severity, setSeverity] = useState< - "success" | "error" | "warning" | "info" - >("info"); const [statusText, setStatusText] = useState("Analyzing media..."); - const showToast = ( - msg: string, - type: "success" | "error" | "warning" | "info" - ) => { - setMessage(msg); - setSeverity(type); - setOpen(true); - }; - const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); const processStep = async (url: string, nextStep: () => void, progressValue: number, status: string, extraData = {}) => { @@ -47,17 +26,13 @@ function ProcessingPage() { }); if (res.status === 200 && res.data) { - showToast(res.data.message, "success"); const elapsedTime = Date.now() - startTime; if (elapsedTime < 5000) await delay(5000 - elapsedTime); setProgress(progressValue); nextStep(); - } else { - showToast(`Step failed: ${url}`, "error"); } } catch (error) { console.error(`Error in step: ${url}`, error); - showToast(`Error processing: ${url}`, "error"); } }; @@ -116,20 +91,6 @@ function ProcessingPage() { {statusText} - setOpen(false)} - anchorOrigin={{ vertical: "top", horizontal: "right" }} - > - setOpen(false)} - severity={severity} - sx={{ width: "100%" }} - > - {message} - - );