Merge pull request #38 from joelmathewthomas/client/download

Client/download
2025-03-18 12:54:53 +05:30
parent 8c4cae77b2 d9fd9f6591
commit 31c550b3dc
10 changed files with 102 additions and 193 deletions
@@ -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>
@@ -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>
@@ -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
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { 
  Typography, 
@@ -7,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';
@@ -15,12 +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 audioClass = response.audio_class
  // Supported video formats
  const supportedFormats = ['video/mp4', 'video/webm', 'video/ogg'];
  const isVideo = mediaFile && supportedFormats.includes(mediaFile.type);
@@ -31,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 (
@@ -74,8 +60,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 }}>
@@ -105,10 +89,9 @@ function PreviewPage() {
                  src={mediaFile.url}
                  style={{ width: '100%' }}
                  controls
-                  onPlay={() => setIsPlaying(true)}
-                  onPause={() => setIsPlaying(false)}
                />
              </Box>
+              <p>Audio Classification: {audioClass || "No data received"}</p>
            </Box>
          ) : (
            <Typography color="error" sx={{ mt: 2 }}>
@@ -135,6 +118,12 @@ function PreviewPage() {
          </Button>
        </Box>
      </Paper>
+      <LinearProgress
+        variant="query"
+        sx={{
+          height: 2,
+        }}
+      />
    </Container>
  );
 }
@@ -1,5 +1,5 @@
 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 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();
@@ -44,14 +47,14 @@ function ProcessingPage() {

    console.log("Starting processing...");

-    processStep("http://127.0.0.1:8000/api/normalize", () => {
-      processStep("http://127.0.0.1:8000/api/trim", () => {
+    processStep("/api/normalize", () => {
+      processStep("/api/trim", () => {
        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" });
+          processStep("/api/resample", () => {
+            processStep("/api/separate", () => setProgress(100), 100, "Separating music into vocals, bass, drums and other...");
+          }, 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...");
+          processStep("/api/noisereduce", () => setProgress(100), 100, "Reducing background noise from the audio...");
        }
      }, 50, "Trimming silent parts from the audio...");
    }, 25, "Normalizing audio frequency...");
@@ -59,7 +62,9 @@ function ProcessingPage() {

  useEffect(() => {
    if (progress === 100) {
-      navigate("/results");
+    
+      navigate('/results')
+      
    }
  }, [progress]);

@@ -92,6 +97,12 @@ function ProcessingPage() {
          </Typography>
        </Box>
      </Paper>
+    <LinearProgress
+      variant="query"
+      sx={{
+        height: 2,
+      }}
+    />
    </Container>
  );
 }
@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
+//import axios from 'axios';
 import { 
  Typography, 
  Container, 
@@ -11,7 +11,6 @@ import {
  CardContent,
  Grid,
  LinearProgress,
-  useTheme 
 } from '@mui/material';
 import { 
  Check as CheckIcon,
@@ -22,46 +21,11 @@ import { useMediaContext } from '../contexts/MediaContext';

 function ResultsPage() {
  const navigate = useNavigate();
-  const theme = useTheme();
-  const { mediaFile, clearMedia,response } = useMediaContext();
-  const [isPlaying, setIsPlaying] = useState(false);
-  const videoRef = useRef(null);
-
-  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);
-    }
-  };
+  const { mediaFile, response } = useMediaContext();
+//  const [isPlaying, setIsPlaying] = useState(false);
+  const audioRefs = [useRef(null), useRef(null), useRef(null),useRef(null)];
+  const audioClass = response.audio_class
+  const isVideo = mediaFile?.type.includes('video');
  
  useEffect(() => {
    if (!mediaFile) {
@@ -69,26 +33,19 @@ function ResultsPage() {
    }
  }, [mediaFile, navigate]);
  
-  const togglePlay = () => {
-    if (videoRef.current) {
-      if (isPlaying) {
-        videoRef.current.pause();
-      } else {
-        videoRef.current.play();
-      }
-      setIsPlaying(!isPlaying);
-    }
-  };
-
-  const handleProcessAnother = () => {
-    clearMedia();
-    navigate('/upload');
-  };
+//  const togglePlay = (index) => {
+//    if (audioRefs[index].current) {
+//      if (isPlaying) {
+//        audioRefs[index].current.pause();
+//      } else {
+//        audioRefs[index].current.play();
+//      }
+//      setIsPlaying(!isPlaying);
+//    }
+//  };

  if (!mediaFile) return <LinearProgress />;
  
-  const isVideo = mediaFile.type.includes('video');
-  
  return (
    <Container maxWidth="md" sx={{ py: 4 }}>
      <StepperComponent activeStep={3} />
@@ -107,50 +64,38 @@ function ResultsPage() {
        
        <Box sx={{ mt: 4, mb: 4, textAlign: 'center' }}>
          {isVideo ? (
-            <Box
-              sx={{
-                position: 'relative',
-                width: '100%',
-                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
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                p: 4,
-                bgcolor: 'rgba(0, 0, 0, 0.04)',
-                borderRadius: 2,
-              }}
-            >
+            <Box 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 }} />
              <Typography variant="h6" gutterBottom>
                {mediaFile.name} (Processed)
              </Typography>
-              <Box sx={{ width: '100%', mt: 2 }}>
+              {audioClass === "Music" ? (
+                audioRefs.map((ref, index) => (
+                  <Box key={index} sx={{ width: '100%', mt: 2 }}>
                    <audio
-                  ref={videoRef}
+                      ref={ref}
                      src={mediaFile.url}
                      style={{ width: '100%' }}
                      controls
-                  onPlay={() => setIsPlaying(true)}
-                  onPause={() => setIsPlaying(false)}
                    />
                  </Box>
+                ))
+              ) : (
+                <Box sx={{ width: '100%', mt: 2 }}>
+                  <audio
+                    ref={audioRefs[0]}
+                    src={mediaFile.url}
+                    style={{ width: '100%' }}
+                    controls
+                  />
+                </Box>
+              )}
            </Box>
          )}
        </Box>
@@ -168,58 +113,16 @@ function ResultsPage() {
                <Typography variant="body2" color="textSecondary">
                  <strong>Type:</strong> {mediaFile.type}
                </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>
            </Card>
          </Grid>
        </Grid>
        
        <Box sx={{ mt: 4, display: 'flex', justifyContent: 'space-between' }}>
-          <Button
-            variant="outlined"
-            color="primary"
-            onClick={()=> navigate('/upload')}
-          >
+          <Button variant="outlined" color="primary" onClick={() => navigate('/upload')}>
            Process Another File
          </Button>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => navigate('/')}
-          >
+          <Button variant="contained" color="primary" onClick={() => navigate('/')}> 
            Back to Home
          </Button>
        </Box>
@@ -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");
+      }); //
+      navigate('/preview');
    } else {
      setFileError("Please upload a file to continue.");
    }
@@ -84,14 +84,14 @@ 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<{
        file_uuid: string;
        sr: number;
        audio_class: string;
-      }>("http://127.0.0.1:8000/api/upload", formData, {
+      }>("/api/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
@@ -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">
@@ -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>
@@ -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 />
 );
@@ -4,4 +4,12 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+    },
+  },
 })