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

Merge pull request #38 from joelmathewthomas/client/download

Browse Source 
Client/download
This commit is contained in:
Joel Mathew Thomas
2025-03-18 12:54:53 +05:30
committed by GitHub
parent 8c4cae77b2 d9fd9f6591
commit 31c550b3dc
10 changed files with 102 additions and 193 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/App.tsx
+2 -2
View File
@@ -28,7 +28,7 @@ const App: React.FC = () => {
<Router> <Router>
<AppBar position="static"> <AppBar position="static">
<Toolbar> <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> <Button color="inherit" href="/"> <HomeIcon sx={{ mr: 1 }} /> Home </Button>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
@@ -40,7 +40,7 @@ const App: React.FC = () => {
<Route path="/processing" element={<ProcessingPage />} /> <Route path="/processing" element={<ProcessingPage />} />
<Route path="/results" element={<ResultsPage />} /> <Route path="/results" element={<ResultsPage />} />
<Route path="*" element={<Navigate to="/" replace />} /> <Route path="*" element={<Navigate to="/" replace />} />
<Route path='/audio' element={<AudioVisualizer/>}/> <Route path='/audio' element={<AudioVisualizer />}/>
</Routes> </Routes>
</Router> </Router>
</MediaProvider> </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 { useNavigate } from 'react-router-dom';
import { import {
Typography, Typography,
@@ -43,7 +42,7 @@ function LandingPage() {
}} }}
> >
<Typography variant="h3" gutterBottom color="primary"> <Typography variant="h3" gutterBottom color="primary">
Welcome to Freq Split Welcome to FreqSplit
</Typography> </Typography>
<Typography variant="h5" paragraph color="textSecondary"> <Typography variant="h5" paragraph color="textSecondary">
Upload, preview, and process your audio and video files with ease Upload, preview, and process your audio and video files with ease
client/src/Pages/PreviewPage.tsx
+11 -22
View File
@@ -1,4 +1,4 @@
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 { import {
Typography, Typography,
@@ -7,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';
@@ -15,12 +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 audioClass = response.audio_class
// 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);
@@ -31,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 (
@@ -74,8 +60,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 }}>
@@ -105,10 +89,9 @@ function PreviewPage() {
src={mediaFile.url} src={mediaFile.url}
style={{ width: '100%' }} style={{ width: '100%' }}
controls controls
onPlay={() => setIsPlaying(true)}
onPause={() => setIsPlaying(false)}
/> />
</Box> </Box>
<p>Audio Classification: {audioClass || "No data received"}</p>
</Box> </Box>
) : ( ) : (
<Typography color="error" sx={{ mt: 2 }}> <Typography color="error" sx={{ mt: 2 }}>
@@ -129,12 +112,18 @@ function PreviewPage() {
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
onClick={() => navigate('/processing')} onClick={() => navigate('/processing')}
> >
Process Media Process Media
</Button> </Button>
</Box> </Box>
</Paper> </Paper>
<LinearProgress
variant="query"
sx={{
height: 2,
}}
/>
</Container> </Container>
); );
} }
client/src/Pages/ProcessingPage.tsx
+20 -9
View File
@@ -1,5 +1,5 @@
import { useState, useEffect } from "react"; 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 { 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();
@@ -44,14 +47,14 @@ function ProcessingPage() {
console.log("Starting processing..."); console.log("Starting processing...");
processStep("http://127.0.0.1:8000/api/normalize", () => { processStep("/api/normalize", () => {
processStep("http://127.0.0.1:8000/api/trim", () => { processStep("/api/trim", () => {
if (response.audio_class === "Music") { if (response.audio_class === "Music") {
processStep("http://127.0.0.1:8000/api/resample", () => { processStep("/api/resample", () => {
processStep("http://127.0.0.1:8000/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: 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("/api/noisereduce", () => setProgress(100), 100, "Reducing background noise from the audio...");
} }
}, 50, "Trimming silent parts from the audio..."); }, 50, "Trimming silent parts from the audio...");
}, 25, "Normalizing audio frequency..."); }, 25, "Normalizing audio frequency...");
@@ -59,7 +62,9 @@ function ProcessingPage() {
useEffect(() => { useEffect(() => {
if (progress === 100) { if (progress === 100) {
navigate("/results");
navigate('/results')
} }
}, [progress]); }, [progress]);
@@ -92,6 +97,12 @@ function ProcessingPage() {
</Typography> </Typography>
</Box> </Box>
</Paper> </Paper>
<LinearProgress
variant="query"
sx={{
height: 2,
}}
/>
</Container> </Container>
); );
} }
client/src/Pages/ResultsPage.tsx
+46 -143
View File
@@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { useNavigate } 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,46 +21,11 @@ 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 videoRef = useRef(null); const audioClass = response.audio_class
const isVideo = mediaFile?.type.includes('video');
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);
}
};
useEffect(() => { useEffect(() => {
if (!mediaFile) { if (!mediaFile) {
@@ -69,26 +33,19 @@ function ResultsPage() {
} }
}, [mediaFile, navigate]); }, [mediaFile, navigate]);
const togglePlay = () => { // const togglePlay = (index) => {
if (videoRef.current) { // if (audioRefs[index].current) {
if (isPlaying) { // if (isPlaying) {
videoRef.current.pause(); // audioRefs[index].current.pause();
} else { // } else {
videoRef.current.play(); // audioRefs[index].current.play();
} // }
setIsPlaying(!isPlaying); // setIsPlaying(!isPlaying);
} // }
}; // };
const handleProcessAnother = () => {
clearMedia();
navigate('/upload');
};
if (!mediaFile) return <LinearProgress />; if (!mediaFile) return <LinearProgress />;
const isVideo = mediaFile.type.includes('video');
return ( return (
<Container maxWidth="md" sx={{ py: 4 }}> <Container maxWidth="md" sx={{ py: 4 }}>
<StepperComponent activeStep={3} /> <StepperComponent activeStep={3} />
@@ -107,50 +64,38 @@ function ResultsPage() {
<Box sx={{ mt: 4, mb: 4, textAlign: 'center' }}> <Box sx={{ mt: 4, mb: 4, textAlign: 'center' }}>
{isVideo ? ( {isVideo ? (
<Box <video
sx={{ src={mediaFile.url}
position: 'relative', style={{ width: '100%', borderRadius: 8 }}
width: '100%', controls
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>
) : ( ) : (
<Box <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', p: 4, bgcolor: 'rgba(0, 0, 0, 0.04)', borderRadius: 2 }}>
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 }} /> <VolumeUpIcon color="primary" sx={{ fontSize: 80, mb: 2 }} />
<Typography variant="h6" gutterBottom> <Typography variant="h6" gutterBottom>
{mediaFile.name} (Processed) {mediaFile.name} (Processed)
</Typography> </Typography>
<Box sx={{ width: '100%', mt: 2 }}> {audioClass === "Music" ? (
<audio audioRefs.map((ref, index) => (
ref={videoRef} <Box key={index} sx={{ width: '100%', mt: 2 }}>
src={mediaFile.url} <audio
style={{ width: '100%' }} ref={ref}
controls src={mediaFile.url}
onPlay={() => setIsPlaying(true)} style={{ width: '100%' }}
onPause={() => setIsPlaying(false)} controls
/> />
</Box> </Box>
))
) : (
<Box sx={{ width: '100%', mt: 2 }}>
<audio
ref={audioRefs[0]}
src={mediaFile.url}
style={{ width: '100%' }}
controls
/>
</Box>
)}
</Box> </Box>
)} )}
</Box> </Box>
@@ -168,58 +113,16 @@ function ResultsPage() {
<Typography variant="body2" color="textSecondary"> <Typography variant="body2" color="textSecondary">
<strong>Type:</strong> {mediaFile.type} <strong>Type:</strong> {mediaFile.type}
</Typography> </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> </CardContent>
</Card> </Card>
</Grid> </Grid>
</Grid> </Grid>
<Box sx={{ mt: 4, display: 'flex', justifyContent: 'space-between' }}> <Box sx={{ mt: 4, display: 'flex', justifyContent: 'space-between' }}>
<Button <Button variant="outlined" color="primary" onClick={() => navigate('/upload')}>
variant="outlined"
color="primary"
onClick={()=> navigate('/upload')}
>
Process Another File Process Another File
</Button> </Button>
<Button <Button variant="contained" color="primary" onClick={() => navigate('/')}>
variant="contained"
color="primary"
onClick={() => navigate('/')}
>
Back to Home Back to Home
</Button> </Button>
</Box> </Box>
client/src/Pages/UploadPage.tsx
+6 -9
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"); navigate('/preview');
} else { } else {
setFileError("Please upload a file to continue."); setFileError("Please upload a file to continue.");
} }
@@ -84,14 +84,14 @@ 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<{
file_uuid: string; file_uuid: string;
sr: number; sr: number;
audio_class: string; audio_class: string;
}>("http://127.0.0.1:8000/api/upload", formData, { }>("/api/upload", formData, {
headers: { headers: {
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data",
}, },
@@ -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 />
); );
client/vite.config.ts
+8
View File
@@ -4,4 +4,12 @@ import react from '@vitejs/plugin-react'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react()],
server: {
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
},
},
},
}) })