add log box, and states to contain logs in MediaContext

client/src/Pages/UploadPage.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import Logs from "../components/Logs"
 import axios from "axios";
 import {
   Typography,
@@ -16,15 +17,29 @@ import {
 } from "@mui/icons-material";
 import StepperComponent from "../components/StepperComponent";
 import { useMediaContext } from "../contexts/MediaContext";
+import { formatLogMessage } from "../utils/logUtils";
 
 function UploadPage() {
   const navigate = useNavigate();
   const theme = useTheme();
-  const { setMediaFile, setResponse, response } = useMediaContext();
+  const { setMediaFile, setResponse, response, setLogs } = useMediaContext();
   const [file, setFile] = useState<File | null>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [fileError, setFileError] = useState("");
   const [upload, setUpload] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLogs([formatLogMessage("Initializing freqsplit")]);
+      setTimeout(() => {
+        setLogs((prevLogs) => [...prevLogs, formatLogMessage("Connecting to server")]);
+        setTimeout(() => {
+          setLogs((prevLogs) => [...prevLogs, formatLogMessage("Connection established successfully")]);
+        },80)
+      }, 90);
+    }, 100);
+    
+  }, []);
  
   const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
@@ -87,6 +102,7 @@ function UploadPage() {
     formData.append("file", file);
   
     try {
+      setLogs((prevLogs) => [...prevLogs, formatLogMessage("Uploading audio file")]);
       const res = await axios.post<{
         file_uuid: string;
         sr: number;
@@ -110,6 +126,9 @@ function UploadPage() {
           spec_sr: res.data.spec_sr
         }));
         setUpload(true);
+        setLogs((prevLogs) => [...prevLogs, formatLogMessage(`Uploaded file successfully`)])
+        setLogs((prevLogs) => [...prevLogs, formatLogMessage(`file_uuid: ${res.data.file_uuid}`)])
+        setLogs((prevLogs) => [...prevLogs, formatLogMessage(`audio_class: ${res.data.audio_class}`)])
       }
     } catch (error) {
       console.error("Upload failed:", error);
@@ -196,7 +215,7 @@ function UploadPage() {
           </Button>
         </Box>
       </Paper>
-      
+      <Logs />
     </Container>
   );
 }

client/src/components/Logs.tsx

@@ -0,0 +1,38 @@
+import { Box, Typography } from "@mui/material";
+import { useMediaContext } from "../contexts/MediaContext";
+
+const Logs = () => {
+  const { logs } = useMediaContext();
+
+  return (
+    <Box
+      sx={{
+        bgcolor: '#000',
+        color: '#fff',
+        padding: '8px',
+        borderRadius: '4px',
+        width: '100%',
+        minHeight: '100px',
+        maxHeight: '200px',
+        overflowY: 'auto',
+        boxShadow: '0 0 5px rgba(0, 0, 0, 0.8)',
+        mt: '40px',
+      }}
+    >
+      {logs.length > 0 ? (
+        logs.map((log, index) => (
+          <Typography key={index} variant="logText" display="block">
+            {`> ${log}`}
+          </Typography>
+        ))
+      ) : (
+        <Typography variant="logText" sx={{ opacity: 0.5 }}>
+          Waiting for logs...
+        </Typography>
+      )}
+    </Box>
+  );
+  
+};
+
+export default Logs;

client/src/contexts/MediaContext.tsx

@@ -11,6 +11,8 @@ interface MediaContextType {
   setDownloadedFileURL: ( file: string) => void;
   downloadedFileSpectrogram: { spectrogram: string, spec_sr: number};
   setDownloadedFileSpectrogram: (spectrogram: {spectrogram: string, spec_sr: number}) => void;
+  logs: string[];
+  setLogs: React.Dispatch<React.SetStateAction<string[]>>;
 }
 
 
@@ -31,10 +33,10 @@ export const MediaProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     spectrogram: "",
     spec_sr: 0
   });
-  
+  const [logs, setLogs] = useState<MediaContextType["logs"]>([""]);
 
   return (
-    <MediaContext.Provider value={{ mediaFile, setMediaFile, response, setResponse, extractedFiles, setExtractedFiles, downloadedFileURL, setDownloadedFileURL, downloadedFileSpectrogram, setDownloadedFileSpectrogram }}>
+    <MediaContext.Provider value={{ mediaFile, setMediaFile, response, setResponse, extractedFiles, setExtractedFiles, downloadedFileURL, setDownloadedFileURL, downloadedFileSpectrogram, setDownloadedFileSpectrogram, logs, setLogs }}>
       {children}
     </MediaContext.Provider>
   );

client/src/theme/theme.tsx

@@ -20,6 +20,11 @@ const theme = createTheme({
     h5: {
       fontWeight: 500,
     },
+    logText: {
+      fontFamily: 'monospace',
+      fontSize: '0.8rem',
+      whiteSpace: 'nowrap',
+    },
   },
   components: {
     MuiButton: {

client/src/utils/logUtils.ts

@@ -0,0 +1,28 @@
+/**
+ * Formats a log message with the current date and time, and a 'freqsplit' prefix.
+ * @param message - The log message to format.
+ * @returns The formatted log message.
+ */
+export function formatLogMessage(message: string): string {
+  const now = new Date();
+
+  // Pad single-digit numbers with leading zeros
+  const pad = (number: number, length = 2): string => number.toString().padStart(length, '0');
+
+  // Extract date components
+  const year = now.getFullYear();
+  const month = pad(now.getMonth() + 1); // Months are zero-based
+  const day = pad(now.getDate());
+
+  // Extract time components
+  const hours = pad(now.getHours());
+  const minutes = pad(now.getMinutes());
+  const seconds = pad(now.getSeconds());
+  const milliseconds = pad(now.getMilliseconds(), 3);
+
+  // Construct the formatted date-time string
+  const timestamp = `[${year}-${month}-${day} ${hours}:${minutes}:${seconds},${milliseconds}: freqsplit]`;
+
+  // Return the combined log message
+  return `${timestamp}: ${message}`;
+}