Image change and tooltips text

frontend/src/features/models/components/model-details-properties.tsx

@@ -135,6 +135,9 @@ const ModelProperties: React.FC<ModelPropertiesProps> = ({
             label={
               APP_CONTENT.models.modelsDetailsCard.properties.accuracy.title
             }
+            tooltip={
+              APP_CONTENT.models.modelsDetailsCard.properties.accuracy.tooltip
+            }
             value={trainingAccuracy}
             isAccuracy
           />
@@ -181,6 +184,10 @@ const ModelProperties: React.FC<ModelPropertiesProps> = ({
               APP_CONTENT.models.modelsDetailsCard.properties.currentDatasetSize
                 .title
             }
+            tooltip={
+              APP_CONTENT.models.modelsDetailsCard.properties.currentDatasetSize
+                .tooltip
+            }
             value={chips_length}
           />
           {/* Animate the status when it's in progress. */}
@@ -197,6 +204,10 @@ const ModelProperties: React.FC<ModelPropertiesProps> = ({
             label={
               APP_CONTENT.models.modelsDetailsCard.properties.sourceImage.title
             }
+            tooltip={
+              APP_CONTENT.models.modelsDetailsCard.properties.sourceImage
+                .tooltip
+            }
             value={source_imagery}
             isTMS
           />

frontend/src/utils/content.ts

@@ -230,35 +230,35 @@ export const APP_CONTENT = {
       properties: {
         zoomLevels: {
           title: "Zoom Levels",
-          tooltip: "",
+          tooltip: "Those are the zoom level tiles imagery that was used when training this model",
         },
         epochs: {
           title: "Epochs",
-          tooltip: "",
+          tooltip: "Refers to the total number of times that the whole training datasets has been learned by the model",
         },
         contactSpacing: {
           title: "Contact Spacing",
-          tooltip: "",
+          tooltip: "The distance in pixels to extend the area around each building. This will be used to find points where buildings come into contact or are in close proximity to one another. For example, entering '8' will explore areas within 8 pixels outside the original building shapes to detect nearby buildings",
         },
         currentDatasetSize: {
           title: "Current Dataset Size",
-          tooltip: "",
+          tooltip: "The total number of images used to train this model",
         },
         sourceImage: {
           title: "Source Image (TMS)",
-          tooltip: "",
+          tooltip: "The tile server link used to train this model, click on the copy icon to copy the TMS link",
         },
         batchSize: {
           title: "Batch Size",
-          tooltip: "",
+          tooltip: "Refers to the total number of images that is fed into the model training in each batch until the whole training dataset is used to train the model",
         },
         accuracy: {
           title: "Accuracy",
-          tooltip: "",
+          tooltip: "Refers to the training sparse categorical accuracy of RAMP model or YOLO accuracy of the model",
         },
         boundaryWidth: {
           title: "Boundary Width",
-          tooltip: "",
+          tooltip: "Specify the width in pixels to reduce the original building shape inwardly, creating a boundary or margin around each building. A smaller value creates a tighter boundary close to the building's edges, while a larger value creates a wider surrounding area. For example, entering '3' will create a boundary that 3 pixles inside from the original building edges.",
         },
       },
       trainingHistoryTableHeader: {