@@ -105,10 +89,9 @@ function PreviewPage() {
src={mediaFile.url}
style={{ width: '100%' }}
controls
- onPlay={() => setIsPlaying(true)}
- onPause={() => setIsPlaying(false)}
/>
+ Audio Classification: {audioClass || "No data received"}
) : (
@@ -129,12 +112,18 @@ function PreviewPage() {
+
);
}
diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx
index 0e9392b..5ee8734 100644
--- a/client/src/Pages/ProcessingPage.tsx
+++ b/client/src/Pages/ProcessingPage.tsx
@@ -1,5 +1,5 @@
import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate} from "react-router-dom";
import { Typography, Container, Paper, Box, LinearProgress } from "@mui/material";
import StepperComponent from "../components/StepperComponent";
import { useMediaContext } from "../contexts/MediaContext";
@@ -17,7 +17,10 @@ function ProcessingPage() {
try {
const formData = new FormData();
formData.append("file_uuid", response.file_uuid);
- Object.entries(extraData).forEach(([key, value]) => formData.append(key, value));
+ Object.entries(extraData).forEach(([key, value]) =>
+ formData.append(key, String(value))
+ );
+
setStatusText(status);
const startTime = Date.now();
@@ -44,14 +47,14 @@ function ProcessingPage() {
console.log("Starting processing...");
- processStep("http://127.0.0.1:8000/api/normalize", () => {
- processStep("http://127.0.0.1:8000/api/trim", () => {
+ processStep("/api/normalize", () => {
+ processStep("/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, "Separating sources into vocals, bass, drums and other...");
- }, 75, "Resampling audio to 44100Hz...", { sr: response.sr?.toString() || "44100" });
+ processStep("/api/resample", () => {
+ processStep("/api/separate", () => setProgress(100), 100, "Separating music into vocals, bass, drums and other...");
+ }, 75, "Resampling audio to 44100Hz...", { sr: "44100" });
} else {
- processStep("http://127.0.0.1:8000/api/noisereduce", () => setProgress(100), 100, "Reducing background noise from the audio...");
+ processStep("/api/noisereduce", () => setProgress(100), 100, "Reducing background noise from the audio...");
}
}, 50, "Trimming silent parts from the audio...");
}, 25, "Normalizing audio frequency...");
@@ -59,7 +62,9 @@ function ProcessingPage() {
useEffect(() => {
if (progress === 100) {
- navigate("/results");
+
+ navigate('/results')
+
}
}, [progress]);
@@ -92,6 +97,12 @@ function ProcessingPage() {
+
);
}
diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx
index 46b4fb1..031328f 100644
--- a/client/src/Pages/ResultsPage.tsx
+++ b/client/src/Pages/ResultsPage.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
+//import axios from 'axios';
import {
Typography,
Container,
@@ -11,7 +11,6 @@ import {
CardContent,
Grid,
LinearProgress,
- useTheme
} from '@mui/material';
import {
Check as CheckIcon,
@@ -22,46 +21,11 @@ import { useMediaContext } from '../contexts/MediaContext';
function ResultsPage() {
const navigate = useNavigate();
- const theme = useTheme();
- const { mediaFile, clearMedia,response } = useMediaContext();
- const [isPlaying, setIsPlaying] = useState(false);
- const videoRef = useRef(null);
-
- const processDownload = async() => {
- try {
- console.log('download started..')
- const res = await axios.get("http://127.0.0.1:8000/api/download", {
- params: { file_uuid: response.file_uuid }, // Attach file_uuid as a query param
- responseType: "blob", // Treat response as a file
- });
-
- if (res.status === 200) {
- const blob = new Blob([res.data]);
- const url = window.URL.createObjectURL(blob);
-
- // Extract filename from headers or use default
- const contentDisposition = res.headers["content-disposition"];
- const filename = contentDisposition
- ? contentDisposition.split("filename=")[1]
- : "downloaded_file";
-
- // Auto-download the file (no user interaction needed)
- const link = document.createElement("a");
- link.href = url;
- link.setAttribute("download", filename);
- document.body.appendChild(link);
- link.click();
-
- // Cleanup
- document.body.removeChild(link);
- window.URL.revokeObjectURL(url);
- } else {
- console.error("Download failed, server responded with:", res);
- }
- } catch (error) {
- console.error("Download error:", error);
- }
- };
+ const { mediaFile, response } = useMediaContext();
+// const [isPlaying, setIsPlaying] = useState(false);
+ const audioRefs = [useRef(null), useRef(null), useRef(null),useRef(null)];
+ const audioClass = response.audio_class
+ const isVideo = mediaFile?.type.includes('video');
useEffect(() => {
if (!mediaFile) {
@@ -69,26 +33,19 @@ function ResultsPage() {
}
}, [mediaFile, navigate]);
- const togglePlay = () => {
- if (videoRef.current) {
- if (isPlaying) {
- videoRef.current.pause();
- } else {
- videoRef.current.play();
- }
- setIsPlaying(!isPlaying);
- }
- };
+// const togglePlay = (index) => {
+// if (audioRefs[index].current) {
+// if (isPlaying) {
+// audioRefs[index].current.pause();
+// } else {
+// audioRefs[index].current.play();
+// }
+// setIsPlaying(!isPlaying);
+// }
+// };
- const handleProcessAnother = () => {
- clearMedia();
- navigate('/upload');
- };
-
if (!mediaFile) return ;
- const isVideo = mediaFile.type.includes('video');
-
return (
@@ -107,50 +64,38 @@ function ResultsPage() {
{isVideo ? (
-
-
+
) : (
-
+
{mediaFile.name} (Processed)
-
-
+ {audioClass === "Music" ? (
+ audioRefs.map((ref, index) => (
+
+
+
+ ))
+ ) : (
+
+
+
+ )}
)}
@@ -168,58 +113,16 @@ function ResultsPage() {
Type: {mediaFile.type}
-
- Size: {(mediaFile.size / (1024 * 1024)).toFixed(2)} MB
-
-
-
-
-
-
-
-
- Actions
-
-
- Download or share your processed media
-
-
-
-
-
-
@@ -228,4 +131,4 @@ function ResultsPage() {
);
}
-export default ResultsPage;
\ No newline at end of file
+export default ResultsPage;
diff --git a/client/src/Pages/UploadPage.tsx b/client/src/Pages/UploadPage.tsx
index af77901..7359519 100644
--- a/client/src/Pages/UploadPage.tsx
+++ b/client/src/Pages/UploadPage.tsx
@@ -20,7 +20,7 @@ import { useMediaContext } from "../contexts/MediaContext";
function UploadPage() {
const navigate = useNavigate();
const theme = useTheme();
- const { setMediaFile, setResponse, response } = useMediaContext(); // ✅ Correct function name
+ const { setMediaFile, setResponse, response } = useMediaContext();
const [file, setFile] = useState(null);
const [isDragging, setIsDragging] = useState(false);
const [fileError, setFileError] = useState("");
@@ -70,8 +70,8 @@ function UploadPage() {
name: file.name,
url: URL.createObjectURL(file),
type: file.type,
- }); // ✅ Corrected function call
- navigate("/preview");
+ }); //
+ navigate('/preview');
} else {
setFileError("Please upload a file to continue.");
}
@@ -84,14 +84,14 @@ function UploadPage() {
}
const formData = new FormData();
- formData.append("file", file); // ✅ No more errors because we checked `file` is not null.
+ formData.append("file", file);
try {
const res = await axios.post<{
file_uuid: string;
sr: number;
audio_class: string;
- }>("http://127.0.0.1:8000/api/upload", formData, {
+ }>("/api/upload", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
@@ -123,9 +123,6 @@ function UploadPage() {
Upload Your Media
-
- Drag and drop your audio or video file, or click to browse
-
- {file ? file.name : "Drop your file here or click to browse"}
+ {file ? file.name : "Drop your file here or click to browse files"}
{file && (
diff --git a/client/src/components/StepperComponent.tsx b/client/src/components/StepperComponent.tsx
index 67a36ba..4ebdb9a 100644
--- a/client/src/components/StepperComponent.tsx
+++ b/client/src/components/StepperComponent.tsx
@@ -1,9 +1,12 @@
-import React from 'react';
import { Box, Stepper, Step, StepLabel } from '@mui/material';
const steps = ['Upload', 'Preview', 'Process', ,'Results'];
-function StepperComponent({ activeStep }) {
+type StepperComponentProps = {
+ activeStep: number;
+};
+
+function StepperComponent({ activeStep }: StepperComponentProps) {
return (
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 28e7b4a..d69ed7a 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -5,6 +5,6 @@ import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
);
\ No newline at end of file
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 8b0f57b..12f020c 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -4,4 +4,12 @@ import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
+ server: {
+ proxy: {
+ '/api': {
+ target: 'http://localhost:8000',
+ changeOrigin: true,
+ },
+ },
+ },
})