Merge pull request #51 from joelmathewthomas/feature/record
Feature/record
This commit is contained in:
Joel Mathew Thomas
@@ -1,25 +1,31 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Typography,
|
||||
Container,
|
||||
Button,
|
||||
Paper,
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Grid,
|
||||
useTheme
|
||||
import {
|
||||
Typography,
|
||||
Container,
|
||||
Button,
|
||||
Paper,
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Grid,
|
||||
useTheme,
|
||||
Slide,
|
||||
Zoom,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
CloudUpload as CloudUploadIcon,
|
||||
import {
|
||||
CloudUpload as CloudUploadIcon,
|
||||
PlayArrow as PlayArrowIcon,
|
||||
Check as CheckIcon
|
||||
Check as CheckIcon,
|
||||
GraphicEq as GraphicEqIcon,
|
||||
NoiseAware as NoiseAwareIcon,
|
||||
MusicNote as MusicNoteIcon,
|
||||
} from '@mui/icons-material';
|
||||
|
||||
function LandingPage() {
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
|
||||
const showContent = true;
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@@ -33,73 +39,163 @@ function LandingPage() {
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="md">
|
||||
<Paper
|
||||
elevation={3}
|
||||
sx={{
|
||||
padding: theme.spacing(6),
|
||||
textAlign: 'center',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h3" gutterBottom color="primary">
|
||||
Welcome to FreqSplit
|
||||
</Typography>
|
||||
<Typography variant="h5" paragraph color="textSecondary">
|
||||
Upload, preview, and process your audio files with ease
|
||||
</Typography>
|
||||
<Box sx={{ mt: 4 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
startIcon={<CloudUploadIcon />}
|
||||
onClick={() => navigate('/upload')}
|
||||
sx={{ mr: 2 }}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Grid container spacing={4} sx={{ mt: 4 }}>
|
||||
<Slide direction="down" in={showContent} mountOnEnter unmountOnExit>
|
||||
<Paper
|
||||
elevation={3}
|
||||
sx={{
|
||||
padding: theme.spacing(6),
|
||||
textAlign: 'center',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h3" gutterBottom color="primary">
|
||||
Welcome to FreqSplit
|
||||
</Typography>
|
||||
<Typography variant="h5" paragraph color="textSecondary">
|
||||
Upload, preview, and process your audio files with ease
|
||||
</Typography>
|
||||
<Box sx={{ mt: 4 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
startIcon={<CloudUploadIcon />}
|
||||
onClick={() => navigate('/upload')}
|
||||
sx={{ mr: 2 }}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Slide>
|
||||
|
||||
<Grid container spacing={4} sx={{ mt: 4, justifyContent: 'center' }}>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardContent sx={{ textAlign: 'center' }}>
|
||||
<CloudUploadIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Easy Upload
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Drag and drop your media files for quick processing
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Zoom in={showContent} style={{ transitionDelay: '100ms' }}>
|
||||
<Card
|
||||
sx={{
|
||||
height: '100%',
|
||||
transition: 'transform 0.3s ease-in-out',
|
||||
'&:hover': { transform: 'scale(1.05)' },
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center' }}>
|
||||
<CloudUploadIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Upload or Record
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Drag and drop your media files or record directly for quick processing.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Zoom>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardContent sx={{ textAlign: 'center' }}>
|
||||
<PlayArrowIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Preview Media
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Review your files before processing
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Zoom in={showContent} style={{ transitionDelay: '200ms' }}>
|
||||
<Card
|
||||
sx={{
|
||||
height: '100%',
|
||||
transition: 'transform 0.3s ease-in-out',
|
||||
'&:hover': { transform: 'scale(1.05)' },
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center' }}>
|
||||
<PlayArrowIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Preview Media
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Review your files before processing.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Zoom>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardContent sx={{ textAlign: 'center' }}>
|
||||
<CheckIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
View Results
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Download and share your processed media
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Zoom in={showContent} style={{ transitionDelay: '300ms' }}>
|
||||
<Card
|
||||
sx={{
|
||||
height: '100%',
|
||||
transition: 'transform 0.3s ease-in-out',
|
||||
'&:hover': { transform: 'scale(1.05)' },
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center' }}>
|
||||
<CheckIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
View Results
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Download and share your processed media.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Zoom>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={4}>
|
||||
<Zoom in={showContent} style={{ transitionDelay: '400ms' }}>
|
||||
<Card
|
||||
sx={{
|
||||
height: '100%',
|
||||
transition: 'transform 0.3s ease-in-out',
|
||||
'&:hover': { transform: 'scale(1.05)' },
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center' }}>
|
||||
<GraphicEqIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Audio Source Separation (Demucs)
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Separate audio sources with state-of-the-art Demucs.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Zoom>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Zoom in={showContent} style={{ transitionDelay: '500ms' }}>
|
||||
<Card
|
||||
sx={{
|
||||
height: '100%',
|
||||
transition: 'transform 0.3s ease-in-out',
|
||||
'&:hover': { transform: 'scale(1.05)' },
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center' }}>
|
||||
<NoiseAwareIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Noise Reduction (DeepFilterNet)
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Reduce noise effectively using DeepFilterNet.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Zoom>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Zoom in={showContent} style={{ transitionDelay: '600ms' }}>
|
||||
<Card
|
||||
sx={{
|
||||
height: '100%',
|
||||
transition: 'transform 0.3s ease-in-out',
|
||||
'&:hover': { transform: 'scale(1.05)' },
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center' }}>
|
||||
<MusicNoteIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Audio Processing (Librosa)
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Advanced audio processing and manipulation with Librosa.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Zoom>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
|
||||
@@ -13,7 +13,8 @@ import {
|
||||
} from "@mui/material";
|
||||
import {
|
||||
CloudUpload as CloudUploadIcon,
|
||||
VolumeUp as VolumeUpIcon,
|
||||
Mic as MicIcon,
|
||||
Stop as StopIcon
|
||||
} from "@mui/icons-material";
|
||||
import StepperComponent from "../components/StepperComponent";
|
||||
import { useWebSocket } from "../contexts/WebSocketContext";
|
||||
@@ -29,6 +30,46 @@ function UploadPage() {
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [upload, setUpload] = useState(false);
|
||||
const [inputEnabled, setInputEnabled] = useState(false);
|
||||
const [isRecording, setIsRecording] = useState(false);
|
||||
const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
|
||||
|
||||
const startRecording = async () => {
|
||||
setUpload(false);
|
||||
setResponse({
|
||||
audio_class: "",
|
||||
file_uuid: "",
|
||||
sr: 0,
|
||||
spectrogram: "",
|
||||
spec_sr: 0
|
||||
});
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
const recorder = new MediaRecorder(stream);
|
||||
setMediaRecorder(recorder);
|
||||
|
||||
const chunks: Blob[] = [];
|
||||
recorder.ondataavailable = (e) => chunks.push(e.data);
|
||||
recorder.onstop = () => {
|
||||
const blob = new Blob(chunks, { type: "audio/wav" });
|
||||
const file = new File([blob], "recording.wav", { type: "audio/wav" });
|
||||
validateAndSetFile(file);
|
||||
handleUpload(file);
|
||||
};
|
||||
|
||||
recorder.start();
|
||||
setIsRecording(true);
|
||||
} catch (error) {
|
||||
console.error("Failed to start recording:", error);
|
||||
showErrorToast("Failed to start recording");
|
||||
}
|
||||
};
|
||||
|
||||
const stopRecording = () => {
|
||||
if (mediaRecorder) {
|
||||
mediaRecorder.stop();
|
||||
setIsRecording(false);
|
||||
}
|
||||
};
|
||||
|
||||
const showErrorToast = (message: string) => {
|
||||
setToastMessage(message);
|
||||
@@ -220,8 +261,52 @@ function UploadPage() {
|
||||
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: "center" }}>
|
||||
<Typography variant="h4" gutterBottom color="primary">
|
||||
Upload Your Media
|
||||
Upload or Record Your Media
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
border: `2px dashed ${
|
||||
isDragging ? theme.palette.primary.main : theme.palette.divider
|
||||
}`,
|
||||
borderRadius: 2,
|
||||
p: 6,
|
||||
mt: 3,
|
||||
mb: 3,
|
||||
backgroundColor: isDragging
|
||||
? "rgba(63, 81, 181, 0.08)"
|
||||
: "transparent",
|
||||
transition: "all 0.3s ease",
|
||||
cursor: "pointer",
|
||||
overflow: "auto",
|
||||
}}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => document.getElementById("fileInput")?.click()}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
style={{ display: "none" }}
|
||||
onChange={handleFileChange}
|
||||
accept="audio/*"
|
||||
disabled={!inputEnabled}
|
||||
/>
|
||||
<CloudUploadIcon color="primary" sx={{ fontSize: 64, mb: 2 }} />
|
||||
<Typography
|
||||
variant="h6"
|
||||
gutterBottom
|
||||
sx={{
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
maxWidth: "100%",
|
||||
}}
|
||||
>
|
||||
{file ? file.name : "Drop your file here or click to browse files"}
|
||||
</Typography>
|
||||
<Typography>Supported formats: MP3, WAV, AAC, OGG</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
@@ -244,39 +329,18 @@ function UploadPage() {
|
||||
onDrop={handleDrop}
|
||||
onClick={() => document.getElementById("fileInput")?.click()}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
style={{ display: "none" }}
|
||||
onChange={handleFileChange}
|
||||
accept="audio/*"
|
||||
disabled={!inputEnabled}
|
||||
/>
|
||||
|
||||
<CloudUploadIcon color="primary" sx={{ fontSize: 64, mb: 2 }} />
|
||||
<Typography
|
||||
variant="h6"
|
||||
gutterBottom
|
||||
sx={{
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
maxWidth: "100%", // Ensure it adapts to the box size
|
||||
}}
|
||||
>
|
||||
{file ? file.name : "Drop your file here or click to browse files"}
|
||||
</Typography>
|
||||
<Typography>
|
||||
Max file size: 100MB
|
||||
</Typography>
|
||||
{file && (
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
{file.type.includes("audio") ? <VolumeUpIcon sx={{ mr: 1 }} /> : null}
|
||||
{file.type} - {(file.size / (1024 * 1024)).toFixed(2)} MB
|
||||
</Typography>
|
||||
)}
|
||||
<Button
|
||||
variant="contained"
|
||||
color={isRecording ? "secondary" : "primary"}
|
||||
startIcon={isRecording ? <StopIcon /> : <MicIcon />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation(); // Prevent click from reaching file input
|
||||
isRecording ? stopRecording() : startRecording();
|
||||
}}
|
||||
>
|
||||
{isRecording ? "Stop Recording" : "Start Recording"}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 4, display: "flex", justifyContent: "space-between" }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
|
||||
Reference in New Issue
Block a user