Add backend health check and warning label

- Implemented a warning label component using styled-components for consistent styling.
- Added logic to check if REACT_APP_BACKEND_URL is set in the environment.
- Integrated a health check by pinging the /health endpoint of the backend.
- Configured the warning label to display when the backend URL is unset or the server is inactive.
- Styled the warning label for clear visibility (yellow background, red text).
- Positioned the warning label at the top of the Classifier component for immediate user attention.

#55

src/pages/classifier/index.tsx

@@ -5,9 +5,10 @@ import {
   LeftContent,
   ColumnContainer,
   InfoContent,
+  WarningLabel,
 } from "./indexElements";
 import type Webcam from "react-webcam";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import MicroscopeFeed from "../../components/body/microscope_feed";
 import ClassificationResults from "../../components/body/classification_results";
 import ImageCache from "../../components/body/image_cache";
@@ -43,6 +44,7 @@ interface params {
   switchTable: boolean;
   setSwitchTable: React.Dispatch<React.SetStateAction<boolean>>;
   setCurDir: React.Dispatch<React.SetStateAction<string>>;
+  backendURL: string | null;
   windowSize: {
     width: number;
     height: number;
@@ -53,8 +55,30 @@ interface params {
 }
 
 const Classifier: React.FC<params> = (props) => {
+  const [alertMessage, setAlertMessage] = useState("");
+  const [isError, setIsError] = useState(false);
+
+  useEffect(() => {
+    // Explicitly check for null, undefined, or empty string
+    if (
+      props.backendURL === null ||
+      props.backendURL === undefined ||
+      props.backendURL === ""
+    ) {
+      setIsError(true);
+      setAlertMessage("Backend URL is not set or is not working.");
+    } else {
+      setIsError(false);
+    }
+  }, [props.backendURL]);
+
   return (
     <ColumnContainer>
+      <>
+        {isError && (
+          <>{isError && <WarningLabel>{alertMessage}</WarningLabel>}</>
+        )}
+      </>
       <RowContainer>
         <LeftContent>
           <MicroscopeFeed

src/pages/classifier/indexElements.tsx

@@ -77,3 +77,15 @@ export const RightContent = styled.div`
   z-index: 0;
   position: relative;
 `;
+
+export const WarningLabel = styled.div`
+  background: #ffd700; // Corrected to camelCase
+  width: 110%;
+  height: 2.5vh;
+  color: #ff4500;
+  margin-bottom: 10px; // Corrected to camelCase
+  margin-top: -6.4vh; // Corrected to camelCase
+  text-align: center; // Corrected to camelCase
+  font-size: 2vh; // Corrected to camelCase
+  padding: 0 1.9vw;
+`;