generate spectrograms for music sources and store it in context

client/src/Pages/ProcessingPage.tsx

@@ -94,9 +94,32 @@ function ProcessingPage() {
       if (!fileData.dir) {
         const fileBlob = await fileData.async("blob");
         const fileURL = URL.createObjectURL(fileBlob);
-        fileURLs.push({ name: filename, url: fileURL });
+        
+        // Get spectrograms
+        setProgress(95);
+        setStatusText("Calculating Spectrograms");
+
+        const formData = new FormData();
+        formData.append("file_uuid", response.file_uuid);
+        formData.append("file_name", filename);
+
+        const res = await axios.post<{
+          Status: string;
+          spectrogram: string;
+          spec_sr: number;
+        }>("/api/spectrogram", formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        })
+
+        if (res.status === 200 && res.data){
+
+        }
+        fileURLs.push({ name: filename, url: fileURL, spectrogram: res.data.spectrogram, spec_sr: res.data.spec_sr });
       }
     }
+    console.log(fileURLs)
     setExtractedFiles(fileURLs);
     setProgress(100);
   };

client/src/contexts/MediaContext.tsx

@@ -5,8 +5,8 @@ interface MediaContextType {
   setMediaFile: (file: { name: string; url: string; type: string }) => void;
   response: { file_uuid: string; sr: number; audio_class: string, spectrogram: string, spec_sr: number }; 
   setResponse: (response: { file_uuid: string; sr: number; audio_class: string, spectrogram: string, spec_sr: number }) => void;
-  extractedFiles: { name: string; url: string }[];
+  extractedFiles: { name: string; url: string, spectrogram: string, spec_sr: number }[];
-  setExtractedFiles: (files: {name: string; url: string }[]) => void;
+  setExtractedFiles: (files: {name: string; url: string, spectrogram: string, spec_sr: number}[]) => void;
   downloadedFileURL:  string;
   setDownloadedFileURL: ( file: string) => void;
 }