joel/freqsplit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code refactor

Browse Source
This commit is contained in:
Joel Mathew Thomas
2025-03-18 01:00:00 +05:30
parent 0afb33cb89
commit 2d63cf3ab9
9 changed files with 43 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/index.html
+1 -2
View File
@@ -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>
client/src/App.tsx
+2 -2
View File
@@ -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>
client/src/Pages/LandingPage.tsx
+1 -2
View File
@@ -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
client/src/Pages/PreviewPage.tsx
+5 -24
View File
@@ -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>
);
}
client/src/Pages/ProcessingPage.tsx
+7 -6
View File
@@ -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]);
client/src/Pages/ResultsPage.tsx
+16 -19
View File
@@ -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 />;
client/src/Pages/UploadPage.tsx
+5 -8
View File
@@ -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">
client/src/components/StepperComponent.tsx
+5 -2
View File
@@ -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>
client/src/main.tsx
+1 -1
View File
@@ -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 />
);