integrate backend with client
This commit is contained in:
Joel Mathew Thomas
@@ -1,72 +1,236 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
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';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Snackbar, Alert, Button } from "@mui/material";
|
||||
import {
|
||||
Typography,
|
||||
Container,
|
||||
Paper,
|
||||
Box,
|
||||
LinearProgress,
|
||||
} from "@mui/material";
|
||||
import StepperComponent from "../components/StepperComponent";
|
||||
import { useMediaContext } from "../contexts/MediaContext";
|
||||
import axios from "axios";
|
||||
|
||||
function ProcessingPage() {
|
||||
const navigate = useNavigate();
|
||||
const { mediaFile } = useMediaContext();
|
||||
const { mediaFile, response } = useMediaContext();
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mediaFile) {
|
||||
navigate('/upload');
|
||||
const [open, setOpen] = useState(false);
|
||||
const [message, setMessage] = useState("");
|
||||
const [severity, setSeverity] = useState<
|
||||
"success" | "error" | "warning" | "info"
|
||||
>("info");
|
||||
const showToast = (
|
||||
msg: string,
|
||||
type: "success" | "error" | "warning" | "info"
|
||||
) => {
|
||||
setMessage(msg);
|
||||
setSeverity(type);
|
||||
setOpen(true);
|
||||
};
|
||||
const processNormalize = async () => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("file_uuid", response.file_uuid);
|
||||
const res = await axios.post("http://127.0.0.1:8000/api/normalize", formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
console.log("response from server:", res);
|
||||
if (res.status === 200 && res.data) {
|
||||
showToast(res.data.message, "success");
|
||||
processTrim();
|
||||
} else {
|
||||
showToast("Audio Normalization failed", "error");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Normalization failed:", error);
|
||||
}
|
||||
};
|
||||
const processTrim = async () => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("file_uuid", response.file_uuid);
|
||||
const res = await axios.post(
|
||||
"http://127.0.0.1:8000/api/trim",
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log("response from server:", res);
|
||||
if (res.status === 200 && res.data) {
|
||||
showToast(res.data.message, "success");
|
||||
if (response.audio_class === "Music") {
|
||||
processResampling();
|
||||
}else{
|
||||
processNoiseReduce()
|
||||
}
|
||||
} else {
|
||||
showToast("Audio Trimming failed", "error");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Trimming failed:", error);
|
||||
return;
|
||||
}
|
||||
};
|
||||
const processResampling = async () => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("file_uuid", response.file_uuid);
|
||||
formData.append("sr", String(response.sr));
|
||||
const res = await axios.post(
|
||||
"http://127.0.0.1:8000/api/resample",
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log("response from server:", res);
|
||||
if (res.status === 200 && res.data) {
|
||||
showToast(res.data.message, "success");
|
||||
processSeparate()
|
||||
|
||||
} else {
|
||||
showToast("Audio Resampling failed", "error");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Resampling failed:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const processNoiseReduce = async () => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("file_uuid", response.file_uuid);
|
||||
const res = await axios.post(
|
||||
"http://127.0.0.1:8000/api/noisereduce",
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log("response from server:", res);
|
||||
if (res.status === 200 && res.data) {
|
||||
showToast(res.data.message, "success");
|
||||
} else {
|
||||
showToast("Audio NoiseRemoval failed", "error");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("NoiseRemoval failed:", error);
|
||||
}
|
||||
};
|
||||
const processSeparate = async () => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("file_uuid", response.file_uuid);
|
||||
const res = await axios.post(
|
||||
"http://127.0.0.1:8000/api/separate",
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log("response from server:", res);
|
||||
if (res.status === 200 && res.data) {
|
||||
showToast("Audio separated successfully", "success");
|
||||
} else {
|
||||
showToast("Audio separation failed", "error");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Separation failed:", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!mediaFile) {
|
||||
navigate("/upload");
|
||||
return;
|
||||
}
|
||||
console.log("Normalizing....");
|
||||
processNormalize();
|
||||
|
||||
|
||||
|
||||
// Simulate processing progress
|
||||
const interval = setInterval(() => {
|
||||
setProgress((prevProgress) => {
|
||||
const newProgress = prevProgress + 10;
|
||||
if (newProgress >= 100) {
|
||||
clearInterval(interval);
|
||||
setTimeout(() => navigate('/results'), 500);
|
||||
setTimeout(() => navigate("/results"), 500);
|
||||
return 100;
|
||||
}
|
||||
return newProgress;
|
||||
});
|
||||
}, 800);
|
||||
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [mediaFile, navigate]);
|
||||
|
||||
|
||||
return (
|
||||
<Container maxWidth="md" sx={{ py: 4 }}>
|
||||
<StepperComponent activeStep={2} />
|
||||
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: 'center' }}>
|
||||
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: "center" }}>
|
||||
<Typography variant="h4" gutterBottom color="primary">
|
||||
Processing Your Media
|
||||
</Typography>
|
||||
<Typography variant="body1" paragraph color="textSecondary">
|
||||
Please wait while we process your file
|
||||
</Typography>
|
||||
|
||||
|
||||
<Box sx={{ mt: 4, mb: 2 }}>
|
||||
<LinearProgress variant="determinate" value={progress} sx={{ height: 10, borderRadius: 5 }} />
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={progress}
|
||||
sx={{ height: 10, borderRadius: 5 }}
|
||||
/>
|
||||
<Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
|
||||
{Math.round(progress)}% Complete
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
|
||||
<Box sx={{ mt: 6 }}>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
{progress < 30 ? "Analyzing media..." :
|
||||
progress < 60 ? "Applying processing..." :
|
||||
progress < 90 ? "Finalizing..." :
|
||||
"Almost done..."}
|
||||
{progress < 30
|
||||
? "Analyzing media..."
|
||||
: progress < 60
|
||||
? "Applying processing..."
|
||||
: progress < 90
|
||||
? "Finalizing..."
|
||||
: "Almost done..."}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Snackbar
|
||||
open={open}
|
||||
autoHideDuration={1000}
|
||||
onClose={() => setOpen(false)}
|
||||
anchorOrigin={{ vertical: "top", horizontal: "right" }}
|
||||
>
|
||||
<Alert
|
||||
onClose={() => setOpen(false)}
|
||||
severity={severity}
|
||||
sx={{ width: "100%" }}
|
||||
>
|
||||
{message}
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProcessingPage;
|
||||
export default ProcessingPage;
|
||||
|
||||
Reference in New Issue
Block a user