From 0afb33cb89dbae61f6db991d640ea97ba8b2de9a Mon Sep 17 00:00:00 2001
From: SUFIYANJT <jtfinu@gmail.com>
Date: Mon, 17 Mar 2025 15:46:04 +0530
Subject: [PATCH 1/5] preview files in result page: frontend change only

---
 client/src/Pages/PreviewPage.tsx    |   7 +-
 client/src/Pages/ProcessingPage.tsx |   8 +-
 client/src/Pages/ResultsPage.tsx    | 174 +++++++---------------------
 client/src/Pages/UploadPage.tsx     |   2 +-
 4 files changed, 52 insertions(+), 139 deletions(-)

diff --git a/client/src/Pages/PreviewPage.tsx b/client/src/Pages/PreviewPage.tsx
index 545c0b7..8c8bfe7 100644
--- a/client/src/Pages/PreviewPage.tsx
+++ b/client/src/Pages/PreviewPage.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { 
   Typography, 
   Container, 
@@ -20,7 +21,8 @@ function PreviewPage() {
   const [isPlaying, setIsPlaying] = useState(false);
   const [error, setError] = useState(false);
   const videoRef = useRef(null);
-  
+  const location = useLocation();
+  const { audioClass } = location.state || {}
   // Supported video formats
   const supportedFormats = ['video/mp4', 'video/webm', 'video/ogg'];
   const isVideo = mediaFile && supportedFormats.includes(mediaFile.type);
@@ -46,6 +48,7 @@ function PreviewPage() {
 
   return (
     <Container maxWidth="md" sx={{ py: 4 }}>
+      <p>Audio Classification: {audioClass || "No data received"}</p>
       <StepperComponent activeStep={1} />
       
       <Paper elevation={3} sx={{ p: 4, mt: 4 }}>
@@ -129,7 +132,7 @@ function PreviewPage() {
           <Button
             variant="contained"
             color="primary"
-            onClick={() => navigate('/processing')}
+            onClick={() =>  navigate('/processing', { state: { audioClass}})}
           >
             Process Media
           </Button>
diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx
index 0e9392b..19f9137 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,useLocation } from "react-router-dom";
 import { Typography, Container, Paper, Box, LinearProgress } from "@mui/material";
 import StepperComponent from "../components/StepperComponent";
 import { useMediaContext } from "../contexts/MediaContext";
@@ -35,6 +35,8 @@ function ProcessingPage() {
       console.error(`Error in step: ${url}`, error);
     }
   };
+  const location = useLocation();
+  const { audioClass } = location.state || {}; 
 
   useEffect(() => {
     if (!mediaFile) {
@@ -59,7 +61,9 @@ function ProcessingPage() {
 
   useEffect(() => {
     if (progress === 100) {
-      navigate("/results");
+    
+      navigate('/results', { state: { audioClass}})
+      
     }
   }, [progress]);
 
diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx
index 46b4fb1..5d3b195 100644
--- a/client/src/Pages/ResultsPage.tsx
+++ b/client/src/Pages/ResultsPage.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import axios from 'axios';
 import { 
   Typography, 
@@ -23,45 +23,12 @@ import { useMediaContext } from '../contexts/MediaContext';
 function ResultsPage() {
   const navigate = useNavigate();
   const theme = useTheme();
-  const { mediaFile, clearMedia,response } = useMediaContext();
+  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 audioRefs = [useRef(null), useRef(null), useRef(null),useRef(null)];
+  const location = useLocation();
+  const { audioClass } = location.state || {};
+  const isVideo = mediaFile?.type.includes('video');
   
   useEffect(() => {
     if (!mediaFile) {
@@ -69,26 +36,19 @@ function ResultsPage() {
     }
   }, [mediaFile, navigate]);
   
-  const togglePlay = () => {
-    if (videoRef.current) {
+  const togglePlay = (index) => {
+    if (audioRefs[index].current) {
       if (isPlaying) {
-        videoRef.current.pause();
+        audioRefs[index].current.pause();
       } else {
-        videoRef.current.play();
+        audioRefs[index].current.play();
       }
       setIsPlaying(!isPlaying);
     }
   };
 
-  const handleProcessAnother = () => {
-    clearMedia();
-    navigate('/upload');
-  };
-  
   if (!mediaFile) return <LinearProgress />;
   
-  const isVideo = mediaFile.type.includes('video');
-  
   return (
     <Container maxWidth="md" sx={{ py: 4 }}>
       <StepperComponent activeStep={3} />
@@ -107,50 +67,38 @@ function ResultsPage() {
         
         <Box sx={{ mt: 4, mb: 4, textAlign: 'center' }}>
           {isVideo ? (
-            <Box
-              sx={{
-                position: 'relative',
-                width: '100%',
-                maxWidth: '100%',
-                borderRadius: 2,
-                overflow: 'hidden',
-                bgcolor: 'black',
-              }}
-            >
-              <video
-                ref={videoRef}
-                src={mediaFile.url}
-                style={{ width: '100%', borderRadius: 8 }}
-                controls
-                onPlay={() => setIsPlaying(true)}
-                onPause={() => setIsPlaying(false)}
-              />
-            </Box>
+            <video
+              src={mediaFile.url}
+              style={{ width: '100%', borderRadius: 8 }}
+              controls
+            />
           ) : (
-            <Box
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                p: 4,
-                bgcolor: 'rgba(0, 0, 0, 0.04)',
-                borderRadius: 2,
-              }}
-            >
+            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', p: 4, bgcolor: 'rgba(0, 0, 0, 0.04)', borderRadius: 2 }}>
               <VolumeUpIcon color="primary" sx={{ fontSize: 80, mb: 2 }} />
               <Typography variant="h6" gutterBottom>
                 {mediaFile.name} (Processed)
               </Typography>
-              <Box sx={{ width: '100%', mt: 2 }}>
-                <audio
-                  ref={videoRef}
-                  src={mediaFile.url}
-                  style={{ width: '100%' }}
-                  controls
-                  onPlay={() => setIsPlaying(true)}
-                  onPause={() => setIsPlaying(false)}
-                />
-              </Box>
+              {audioClass === "Music" ? (
+                audioRefs.map((ref, index) => (
+                  <Box key={index} sx={{ width: '100%', mt: 2 }}>
+                    <audio
+                      ref={ref}
+                      src={mediaFile.url}
+                      style={{ width: '100%' }}
+                      controls
+                    />
+                  </Box>
+                ))
+              ) : (
+                <Box sx={{ width: '100%', mt: 2 }}>
+                  <audio
+                    ref={audioRefs[0]}
+                    src={mediaFile.url}
+                    style={{ width: '100%' }}
+                    controls
+                  />
+                </Box>
+              )}
             </Box>
           )}
         </Box>
@@ -168,58 +116,16 @@ function ResultsPage() {
                 <Typography variant="body2" color="textSecondary">
                   <strong>Type:</strong> {mediaFile.type}
                 </Typography>
-                <Typography variant="body2" color="textSecondary">
-                  <strong>Size:</strong> {(mediaFile.size / (1024 * 1024)).toFixed(2)} MB
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-          <Grid item xs={12} sm={6}>
-            <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
-              <CardContent>
-                <Typography variant="h6" gutterBottom>
-                  Actions
-                </Typography>
-                <Typography variant="body2" paragraph color="textSecondary">
-                  Download or share your processed media
-                </Typography>
-                <Box sx={{ mt: 2 }}>
-                  <Button
-                    variant="contained"
-                    color="primary"
-                    fullWidth
-                    sx={{ mb: 1 }}
-                    onClick={() => processDownload()}
-                  >
-                    Download
-                  </Button>
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    fullWidth
-                    onClick={() => alert('Sharing file...')}
-                  >
-                    Share
-                  </Button>
-                </Box>
               </CardContent>
             </Card>
           </Grid>
         </Grid>
         
         <Box sx={{ mt: 4, display: 'flex', justifyContent: 'space-between' }}>
-          <Button
-            variant="outlined"
-            color="primary"
-            onClick={()=> navigate('/upload')}
-          >
+          <Button variant="outlined" color="primary" onClick={() => navigate('/upload')}>
             Process Another File
           </Button>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => navigate('/')}
-          >
+          <Button variant="contained" color="primary" onClick={() => navigate('/')}> 
             Back to Home
           </Button>
         </Box>
@@ -228,4 +134,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..84194d2 100644
--- a/client/src/Pages/UploadPage.tsx
+++ b/client/src/Pages/UploadPage.tsx
@@ -71,7 +71,7 @@ function UploadPage() {
         url: URL.createObjectURL(file),
         type: file.type,
       }); // ✅ Corrected function call
-      navigate("/preview");
+      navigate('/preview', { state: { audioClass: response.audio_class } });
     } else {
       setFileError("Please upload a file to continue.");
     }

From 2d63cf3ab9a2cbbc1b12e8940001eb84ae3e7005 Mon Sep 17 00:00:00 2001
From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com>
Date: Tue, 18 Mar 2025 01:00:00 +0530
Subject: [PATCH 2/5] code refactor

---
 client/index.html                          |  3 +-
 client/src/App.tsx                         |  4 +--
 client/src/Pages/LandingPage.tsx           |  3 +-
 client/src/Pages/PreviewPage.tsx           | 29 ++++--------------
 client/src/Pages/ProcessingPage.tsx        | 13 ++++----
 client/src/Pages/ResultsPage.tsx           | 35 ++++++++++------------
 client/src/Pages/UploadPage.tsx            | 13 ++++----
 client/src/components/StepperComponent.tsx |  7 +++--
 client/src/main.tsx                        |  2 +-
 9 files changed, 43 insertions(+), 66 deletions(-)

diff --git a/client/index.html b/client/index.html
index e4b78ea..cccac0e 100644
--- a/client/index.html
+++ b/client/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>FreqSplit</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 3bd3413..49f1eb3 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -28,7 +28,7 @@ const App: React.FC = () => {
         <Router>
           <AppBar position="static">
             <Toolbar>
-              <Typography variant="h6" sx={{ flexGrow: 1 }}>Freq Split</Typography>
+              <Typography variant="h6" sx={{ flexGrow: 1 }}>FreqSplit</Typography>
               <Button color="inherit" href="/"> <HomeIcon sx={{ mr: 1 }} /> Home </Button>
             </Toolbar>
           </AppBar>
@@ -40,7 +40,7 @@ const App: React.FC = () => {
             <Route path="/processing" element={<ProcessingPage />} />
             <Route path="/results" element={<ResultsPage />} />
             <Route path="*" element={<Navigate to="/" replace />} />
-            <Route path='/audio' element={<AudioVisualizer/>}/>
+            <Route path='/audio' element={<AudioVisualizer />}/>
           </Routes>
         </Router>
       </MediaProvider>
diff --git a/client/src/Pages/LandingPage.tsx b/client/src/Pages/LandingPage.tsx
index c932c5f..fdfbb2a 100644
--- a/client/src/Pages/LandingPage.tsx
+++ b/client/src/Pages/LandingPage.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { 
   Typography, 
@@ -43,7 +42,7 @@ function LandingPage() {
           }}
         >
           <Typography variant="h3" gutterBottom color="primary">
-            Welcome to Freq Split
+            Welcome to FreqSplit
           </Typography>
           <Typography variant="h5" paragraph color="textSecondary">
             Upload, preview, and process your audio and video files with ease
diff --git a/client/src/Pages/PreviewPage.tsx b/client/src/Pages/PreviewPage.tsx
index 8c8bfe7..2373699 100644
--- a/client/src/Pages/PreviewPage.tsx
+++ b/client/src/Pages/PreviewPage.tsx
@@ -1,6 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useLocation } from 'react-router-dom';
 import { 
   Typography, 
   Container, 
@@ -8,7 +7,6 @@ import {
   Paper, 
   Box, 
   LinearProgress,
-  useTheme 
 } from '@mui/material';
 import { VolumeUp as VolumeUpIcon, ErrorOutline as ErrorIcon } from '@mui/icons-material';
 import StepperComponent from '../components/StepperComponent';
@@ -16,13 +14,10 @@ import { useMediaContext } from '../contexts/MediaContext';
 
 function PreviewPage() {
   const navigate = useNavigate();
-  const theme = useTheme();
-  const { mediaFile } = useMediaContext();
-  const [isPlaying, setIsPlaying] = useState(false);
+  const { mediaFile, response } = useMediaContext();
   const [error, setError] = useState(false);
   const videoRef = useRef(null);
-  const location = useLocation();
-  const { audioClass } = location.state || {}
+  const audioClass = response.audio_class
   // Supported video formats
   const supportedFormats = ['video/mp4', 'video/webm', 'video/ogg'];
   const isVideo = mediaFile && supportedFormats.includes(mediaFile.type);
@@ -33,17 +28,6 @@ function PreviewPage() {
     }
   }, [mediaFile, navigate]);
   
-  const togglePlay = () => {
-    if (videoRef.current) {
-      if (isPlaying) {
-        videoRef.current.pause();
-      } else {
-        videoRef.current.play();
-      }
-      setIsPlaying(!isPlaying);
-    }
-  };
-
   if (!mediaFile) return <LinearProgress />;
 
   return (
@@ -77,8 +61,6 @@ function PreviewPage() {
                 style={{ width: '100%', borderRadius: 8 }}
                 controls
                 onError={() => setError(true)}
-                onPlay={() => setIsPlaying(true)}
-                onPause={() => setIsPlaying(false)}
               />
               {error && (
                 <Typography color="error" sx={{ mt: 2 }}>
@@ -108,8 +90,6 @@ function PreviewPage() {
                   src={mediaFile.url}
                   style={{ width: '100%' }}
                   controls
-                  onPlay={() => setIsPlaying(true)}
-                  onPause={() => setIsPlaying(false)}
                 />
               </Box>
             </Box>
@@ -132,12 +112,13 @@ function PreviewPage() {
           <Button
             variant="contained"
             color="primary"
-            onClick={() =>  navigate('/processing', { state: { audioClass}})}
+            onClick={() =>  navigate('/processing')}
           >
             Process Media
           </Button>
         </Box>
       </Paper>
+      <LinearProgress />
     </Container>
   );
 }
diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx
index 19f9137..ed66a47 100644
--- a/client/src/Pages/ProcessingPage.tsx
+++ b/client/src/Pages/ProcessingPage.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useNavigate,useLocation } 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();
@@ -35,8 +38,6 @@ function ProcessingPage() {
       console.error(`Error in step: ${url}`, error);
     }
   };
-  const location = useLocation();
-  const { audioClass } = location.state || {}; 
 
   useEffect(() => {
     if (!mediaFile) {
@@ -51,7 +52,7 @@ function ProcessingPage() {
         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" });
+          }, 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...");
         }
@@ -62,7 +63,7 @@ function ProcessingPage() {
   useEffect(() => {
     if (progress === 100) {
     
-      navigate('/results', { state: { audioClass}})
+      navigate('/results')
       
     }
   }, [progress]);
diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx
index 5d3b195..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 { useNavigate, useLocation } from 'react-router-dom';
-import axios from 'axios';
+import { useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+//import axios from 'axios';
 import { 
   Typography, 
   Container, 
@@ -11,7 +11,6 @@ import {
   CardContent,
   Grid,
   LinearProgress,
-  useTheme 
 } from '@mui/material';
 import { 
   Check as CheckIcon,
@@ -22,12 +21,10 @@ import { useMediaContext } from '../contexts/MediaContext';
 
 function ResultsPage() {
   const navigate = useNavigate();
-  const theme = useTheme();
-  const { mediaFile, clearMedia, response } = useMediaContext();
-  const [isPlaying, setIsPlaying] = useState(false);
+  const { mediaFile, response } = useMediaContext();
+//  const [isPlaying, setIsPlaying] = useState(false);
   const audioRefs = [useRef(null), useRef(null), useRef(null),useRef(null)];
-  const location = useLocation();
-  const { audioClass } = location.state || {};
+  const audioClass = response.audio_class
   const isVideo = mediaFile?.type.includes('video');
   
   useEffect(() => {
@@ -36,16 +33,16 @@ function ResultsPage() {
     }
   }, [mediaFile, navigate]);
   
-  const togglePlay = (index) => {
-    if (audioRefs[index].current) {
-      if (isPlaying) {
-        audioRefs[index].current.pause();
-      } else {
-        audioRefs[index].current.play();
-      }
-      setIsPlaying(!isPlaying);
-    }
-  };
+//  const togglePlay = (index) => {
+//    if (audioRefs[index].current) {
+//      if (isPlaying) {
+//        audioRefs[index].current.pause();
+//      } else {
+//        audioRefs[index].current.play();
+//      }
+//      setIsPlaying(!isPlaying);
+//    }
+//  };
 
   if (!mediaFile) return <LinearProgress />;
   
diff --git a/client/src/Pages/UploadPage.tsx b/client/src/Pages/UploadPage.tsx
index 84194d2..a6fbe78 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<File | null>(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', { state: { audioClass: response.audio_class } });
+      }); //
+      navigate('/preview');
     } else {
       setFileError("Please upload a file to continue.");
     }
@@ -84,7 +84,7 @@ 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<{
@@ -123,9 +123,6 @@ function UploadPage() {
         <Typography variant="h4" gutterBottom color="primary">
           Upload Your Media
         </Typography>
-        <Typography variant="body1" paragraph color="textSecondary">
-          Drag and drop your audio or video file, or click to browse
-        </Typography>
 
         <Box
           sx={{
@@ -157,7 +154,7 @@ function UploadPage() {
           
           <CloudUploadIcon color="primary" sx={{ fontSize: 64, mb: 2 }} />
           <Typography variant="h6" gutterBottom>
-            {file ? file.name : "Drop your file here or click to browse"}
+            {file ? file.name : "Drop your file here or click to browse files"}
           </Typography>
           {file && (
             <Typography variant="body2" color="textSecondary">
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 (
     <Box sx={{ width: '100%', mb: 4 }}>
       <Stepper activeStep={activeStep} alternativeLabel>
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(
   <App />
 );
\ No newline at end of file

From 40b71c3fdb60bc3313871d12dce26a41438aa8f1 Mon Sep 17 00:00:00 2001
From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com>
Date: Tue, 18 Mar 2025 01:23:17 +0530
Subject: [PATCH 3/5] query progress for some pages

---
 client/src/Pages/PreviewPage.tsx    | 7 ++++++-
 client/src/Pages/ProcessingPage.tsx | 6 ++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/client/src/Pages/PreviewPage.tsx b/client/src/Pages/PreviewPage.tsx
index 2373699..0ea3898 100644
--- a/client/src/Pages/PreviewPage.tsx
+++ b/client/src/Pages/PreviewPage.tsx
@@ -118,7 +118,12 @@ function PreviewPage() {
           </Button>
         </Box>
       </Paper>
-      <LinearProgress />
+      <LinearProgress
+        variant="query"
+        sx={{
+          height: 2,
+        }}
+      />
     </Container>
   );
 }
diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx
index ed66a47..8da474c 100644
--- a/client/src/Pages/ProcessingPage.tsx
+++ b/client/src/Pages/ProcessingPage.tsx
@@ -97,6 +97,12 @@ function ProcessingPage() {
           </Typography>
         </Box>
       </Paper>
+    <LinearProgress
+      variant="query"
+      sx={{
+        height: 2,
+      }}
+    />
     </Container>
   );
 }

From ba18a7a27f5f4271728f7c8f35f404daae6c0c01 Mon Sep 17 00:00:00 2001
From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com>
Date: Tue, 18 Mar 2025 01:53:53 +0530
Subject: [PATCH 4/5] setup vite proxy for development

---
 client/src/Pages/ProcessingPage.tsx | 10 +++++-----
 client/src/Pages/UploadPage.tsx     |  2 +-
 client/vite.config.ts               |  8 ++++++++
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx
index 8da474c..cc319de 100644
--- a/client/src/Pages/ProcessingPage.tsx
+++ b/client/src/Pages/ProcessingPage.tsx
@@ -47,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...");
+          processStep("/api/resample", () => {
+            processStep("/api/separate", () => setProgress(100), 100, "Separating sources 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...");
diff --git a/client/src/Pages/UploadPage.tsx b/client/src/Pages/UploadPage.tsx
index a6fbe78..7359519 100644
--- a/client/src/Pages/UploadPage.tsx
+++ b/client/src/Pages/UploadPage.tsx
@@ -91,7 +91,7 @@ function UploadPage() {
         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",
         },
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,
+      },
+    },
+  },
 })

From d9fd9f65916e68e8c091a5d10ea4b66067fadf90 Mon Sep 17 00:00:00 2001
From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com>
Date: Tue, 18 Mar 2025 02:02:36 +0530
Subject: [PATCH 5/5] code refactor

---
 client/src/Pages/PreviewPage.tsx    | 2 +-
 client/src/Pages/ProcessingPage.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/Pages/PreviewPage.tsx b/client/src/Pages/PreviewPage.tsx
index 0ea3898..b8d976b 100644
--- a/client/src/Pages/PreviewPage.tsx
+++ b/client/src/Pages/PreviewPage.tsx
@@ -32,7 +32,6 @@ function PreviewPage() {
 
   return (
     <Container maxWidth="md" sx={{ py: 4 }}>
-      <p>Audio Classification: {audioClass || "No data received"}</p>
       <StepperComponent activeStep={1} />
       
       <Paper elevation={3} sx={{ p: 4, mt: 4 }}>
@@ -92,6 +91,7 @@ function PreviewPage() {
                   controls
                 />
               </Box>
+              <p>Audio Classification: {audioClass || "No data received"}</p>
             </Box>
           ) : (
             <Typography color="error" sx={{ mt: 2 }}>
diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx
index cc319de..5ee8734 100644
--- a/client/src/Pages/ProcessingPage.tsx
+++ b/client/src/Pages/ProcessingPage.tsx
@@ -51,7 +51,7 @@ function ProcessingPage() {
       processStep("/api/trim", () => {
         if (response.audio_class === "Music") {
           processStep("/api/resample", () => {
-            processStep("/api/separate", () => setProgress(100), 100, "Separating sources into vocals, bass, drums and other...");
+            processStep("/api/separate", () => setProgress(100), 100, "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...");