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"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>FreqSplit</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
client/src/Pages/LandingPage.tsx
-1
View File
@@ -1,4 +1,3 @@
import React from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { import {
Typography, Typography,
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 { useNavigate } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { import {
Typography, Typography,
Container, Container,
@@ -8,7 +7,6 @@ import {
Paper, Paper,
Box, Box,
LinearProgress, LinearProgress,
useTheme
} from '@mui/material'; } from '@mui/material';
import { VolumeUp as VolumeUpIcon, ErrorOutline as ErrorIcon } from '@mui/icons-material'; import { VolumeUp as VolumeUpIcon, ErrorOutline as ErrorIcon } from '@mui/icons-material';
import StepperComponent from '../components/StepperComponent'; import StepperComponent from '../components/StepperComponent';
@@ -16,13 +14,10 @@ import { useMediaContext } from '../contexts/MediaContext';
function PreviewPage() { function PreviewPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const theme = useTheme(); const { mediaFile, response } = useMediaContext();
const { mediaFile } = useMediaContext();
const [isPlaying, setIsPlaying] = useState(false);
const [error, setError] = useState(false); const [error, setError] = useState(false);
const videoRef = useRef(null); const videoRef = useRef(null);
const location = useLocation(); const audioClass = response.audio_class
const { audioClass } = location.state || {}
// Supported video formats // Supported video formats
const supportedFormats = ['video/mp4', 'video/webm', 'video/ogg']; const supportedFormats = ['video/mp4', 'video/webm', 'video/ogg'];
const isVideo = mediaFile && supportedFormats.includes(mediaFile.type); const isVideo = mediaFile && supportedFormats.includes(mediaFile.type);
@@ -33,17 +28,6 @@ function PreviewPage() {
} }
}, [mediaFile, navigate]); }, [mediaFile, navigate]);
const togglePlay = () => {
if (videoRef.current) {
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setIsPlaying(!isPlaying);
}
};
if (!mediaFile) return <LinearProgress />; if (!mediaFile) return <LinearProgress />;
return ( return (
@@ -77,8 +61,6 @@ function PreviewPage() {
style={{ width: '100%', borderRadius: 8 }} style={{ width: '100%', borderRadius: 8 }}
controls controls
onError={() => setError(true)} onError={() => setError(true)}
onPlay={() => setIsPlaying(true)}
onPause={() => setIsPlaying(false)}
/> />
{error && ( {error && (
<Typography color="error" sx={{ mt: 2 }}> <Typography color="error" sx={{ mt: 2 }}>
@@ -108,8 +90,6 @@ function PreviewPage() {
src={mediaFile.url} src={mediaFile.url}
style={{ width: '100%' }} style={{ width: '100%' }}
controls controls
onPlay={() => setIsPlaying(true)}
onPause={() => setIsPlaying(false)}
/> />
</Box> </Box>
</Box> </Box>
@@ -132,12 +112,13 @@ function PreviewPage() {
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
onClick={() => navigate('/processing', { state: { audioClass}})} onClick={() => navigate('/processing')}
> >
Process Media Process Media
</Button> </Button>
</Box> </Box>
</Paper> </Paper>
<LinearProgress />
</Container> </Container>
); );
} }
client/src/Pages/ProcessingPage.tsx
+7 -6
View File
@@ -1,5 +1,5 @@
import { useState, useEffect } from "react"; 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 { Typography, Container, Paper, Box, LinearProgress } from "@mui/material";
import StepperComponent from "../components/StepperComponent"; import StepperComponent from "../components/StepperComponent";
import { useMediaContext } from "../contexts/MediaContext"; import { useMediaContext } from "../contexts/MediaContext";
@@ -17,7 +17,10 @@ function ProcessingPage() {
try { try {
const formData = new FormData(); const formData = new FormData();
formData.append("file_uuid", response.file_uuid); 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); setStatusText(status);
const startTime = Date.now(); const startTime = Date.now();
@@ -35,8 +38,6 @@ function ProcessingPage() {
console.error(`Error in step: ${url}`, error); console.error(`Error in step: ${url}`, error);
} }
}; };
const location = useLocation();
const { audioClass } = location.state || {};
useEffect(() => { useEffect(() => {
if (!mediaFile) { if (!mediaFile) {
@@ -51,7 +52,7 @@ function ProcessingPage() {
if (response.audio_class === "Music") { if (response.audio_class === "Music") {
processStep("http://127.0.0.1:8000/api/resample", () => { 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("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 { } else {
processStep("http://127.0.0.1:8000/api/noisereduce", () => setProgress(100), 100, "Reducing background noise from the audio..."); 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(() => { useEffect(() => {
if (progress === 100) { if (progress === 100) {
navigate('/results', { state: { audioClass}}) navigate('/results')
} }
}, [progress]); }, [progress]);
client/src/Pages/ResultsPage.tsx
+16 -19
View File
@@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { useNavigate, useLocation } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import axios from 'axios'; //import axios from 'axios';
import { import {
Typography, Typography,
Container, Container,
@@ -11,7 +11,6 @@ import {
CardContent, CardContent,
Grid, Grid,
LinearProgress, LinearProgress,
useTheme
} from '@mui/material'; } from '@mui/material';
import { import {
Check as CheckIcon, Check as CheckIcon,
@@ -22,12 +21,10 @@ import { useMediaContext } from '../contexts/MediaContext';
function ResultsPage() { function ResultsPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const theme = useTheme(); const { mediaFile, response } = useMediaContext();
const { mediaFile, clearMedia, response } = useMediaContext(); // const [isPlaying, setIsPlaying] = useState(false);
const [isPlaying, setIsPlaying] = useState(false);
const audioRefs = [useRef(null), useRef(null), useRef(null),useRef(null)]; const audioRefs = [useRef(null), useRef(null), useRef(null),useRef(null)];
const location = useLocation(); const audioClass = response.audio_class
const { audioClass } = location.state || {};
const isVideo = mediaFile?.type.includes('video'); const isVideo = mediaFile?.type.includes('video');
useEffect(() => { useEffect(() => {
@@ -36,16 +33,16 @@ function ResultsPage() {
} }
}, [mediaFile, navigate]); }, [mediaFile, navigate]);
const togglePlay = (index) => { // const togglePlay = (index) => {
if (audioRefs[index].current) { // if (audioRefs[index].current) {
if (isPlaying) { // if (isPlaying) {
audioRefs[index].current.pause(); // audioRefs[index].current.pause();
} else { // } else {
audioRefs[index].current.play(); // audioRefs[index].current.play();
} // }
setIsPlaying(!isPlaying); // setIsPlaying(!isPlaying);
} // }
}; // };
if (!mediaFile) return <LinearProgress />; if (!mediaFile) return <LinearProgress />;
client/src/Pages/UploadPage.tsx
+5 -8
View File
@@ -20,7 +20,7 @@ import { useMediaContext } from "../contexts/MediaContext";
function UploadPage() { function UploadPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const theme = useTheme(); const theme = useTheme();
const { setMediaFile, setResponse, response } = useMediaContext(); // ✅ Correct function name const { setMediaFile, setResponse, response } = useMediaContext();
const [file, setFile] = useState<File | null>(null); const [file, setFile] = useState<File | null>(null);
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const [fileError, setFileError] = useState(""); const [fileError, setFileError] = useState("");
@@ -70,8 +70,8 @@ function UploadPage() {
name: file.name, name: file.name,
url: URL.createObjectURL(file), url: URL.createObjectURL(file),
type: file.type, type: file.type,
}); // ✅ Corrected function call }); //
navigate('/preview', { state: { audioClass: response.audio_class } }); navigate('/preview');
} else { } else {
setFileError("Please upload a file to continue."); setFileError("Please upload a file to continue.");
} }
@@ -84,7 +84,7 @@ function UploadPage() {
} }
const formData = new FormData(); const formData = new FormData();
formData.append("file", file); // ✅ No more errors because we checked `file` is not null. formData.append("file", file);
try { try {
const res = await axios.post<{ const res = await axios.post<{
@@ -123,9 +123,6 @@ function UploadPage() {
<Typography variant="h4" gutterBottom color="primary"> <Typography variant="h4" gutterBottom color="primary">
Upload Your Media Upload Your Media
</Typography> </Typography>
<Typography variant="body1" paragraph color="textSecondary">
Drag and drop your audio or video file, or click to browse
</Typography>
<Box <Box
sx={{ sx={{
@@ -157,7 +154,7 @@ function UploadPage() {
<CloudUploadIcon color="primary" sx={{ fontSize: 64, mb: 2 }} /> <CloudUploadIcon color="primary" sx={{ fontSize: 64, mb: 2 }} />
<Typography variant="h6" gutterBottom> <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> </Typography>
{file && ( {file && (
<Typography variant="body2" color="textSecondary"> <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'; import { Box, Stepper, Step, StepLabel } from '@mui/material';
const steps = ['Upload', 'Preview', 'Process', ,'Results']; const steps = ['Upload', 'Preview', 'Process', ,'Results'];
function StepperComponent({ activeStep }) { type StepperComponentProps = {
activeStep: number;
};
function StepperComponent({ activeStep }: StepperComponentProps) {
return ( return (
<Box sx={{ width: '100%', mb: 4 }}> <Box sx={{ width: '100%', mb: 4 }}>
<Stepper activeStep={activeStep} alternativeLabel> <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/500.css';
import '@fontsource/roboto/700.css'; import '@fontsource/roboto/700.css';
ReactDOM.createRoot(document.getElementById('root')).render( ReactDOM.createRoot(document.getElementById('root')!).render(
<App /> <App />
); );