preview spectrograms for non-music files

client/src/Pages/ProcessingPage.tsx

@@ -8,7 +8,7 @@ import JSZip from "jszip";
 
 function ProcessingPage() {
   const navigate = useNavigate();
-  const { mediaFile, response, setExtractedFiles, setDownloadedFileURL } = useMediaContext();
+  const { mediaFile, response, setExtractedFiles, setDownloadedFileURL, setDownloadedFileSpectrogram } = useMediaContext();
   const [progress, setProgress] = useState(0);
   const [statusText, setStatusText] = useState("Analyzing media...");
 
@@ -73,7 +73,36 @@ function ProcessingPage() {
         const fileURL = URL.createObjectURL(blob);
 
         setDownloadedFileURL( fileURL  );
-        setProgress(100);
+        setProgress(90);
+
+        // Get spectrogram
+        setProgress(95);
+        setStatusText("Calculating Spectrogram");
+
+        const formData = new FormData();
+        formData.append("file_uuid", response.file_uuid);
+        if (mediaFile?.name) {
+          formData.append("file_name", mediaFile?.name);
+        }
+
+        const startTime = Date.now();
+        const resp = await axios.post<{
+          Status: String;
+          spectrogram: string;
+          spec_sr: number;
+        }>("/api/spectrogram", formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          }
+        })
+
+        if (resp.status === 200 && resp.data) {
+          const elapsedTime = Date.now() - startTime;
+          if(elapsedTime < 5000) await delay(5000 - elapsedTime);
+          setDownloadedFileSpectrogram({spectrogram: resp.data.spectrogram, spec_sr: resp.data.spec_sr})
+          setProgress(100);
+        }
+
 
       } else {
         console.log("Failed to download the file");