Update app.py

app.py

@@ -136,27 +136,38 @@ def segment_mars(img_path):
 
 # 3. CUSTOM HTML LEGEND
 legend_html = """
-<div style="display: flex; justify-content: center; gap: 20px; font-weight: bold; margin-bottom: 10px;">
-    <div style="display: flex; align-items: center; gap: 5px;">
-        <div style="width: 20px; height: 20px; background-color: rgb(0, 255, 0); border: 1px solid white;"></div> <span>Soil</span>
-    </div>
-    <div style="display: flex; align-items: center; gap: 5px;">
-        <div style="width: 20px; height: 20px; background-color: rgb(0, 0, 255); border: 1px solid white;"></div> <span>Bedrock</span>
-    </div>
-    <div style="display: flex; align-items: center; gap: 5px;">
-        <div style="width: 20px; height: 20px; background-color: rgb(255, 215, 0); border: 1px solid white;"></div> <span>Sand</span>
-    </div>
-    <div style="display: flex; align-items: center; gap: 5px;">
-        <div style="width: 20px; height: 20px; background-color: rgb(255, 0, 0); border: 1px solid white;"></div> <span>Big Rock</span>
-    </div>
-    <div style="display: flex; align-items: center; gap: 5px;">
-        <div style="width: 20px; height: 20px; background-color: rgb(0, 0, 0); border: 1px solid white;"></div> <span>Rover / Background Mask</span>
+<div style="text-align: center; margin-bottom: 20px;">
+    <p style="font-size: 1.2em; font-weight: bold; margin-bottom: 15px;">
+        🔍 Select an image to segment from the examples below
+    </p>
+    
+    <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; font-weight: bold;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <div style="width: 18px; height: 18px; background-color: rgb(0, 255, 0); border: 1px solid #ccc; border-radius: 3px;"></div> 
+            <span>Soil</span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <div style="width: 18px; height: 18px; background-color: rgb(0, 0, 255); border: 1px solid #ccc; border-radius: 3px;"></div> 
+            <span>Bedrock</span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <div style="width: 18px; height: 18px; background-color: rgb(255, 215, 0); border: 1px solid #ccc; border-radius: 3px;"></div> 
+            <span>Sand</span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <div style="width: 18px; height: 18px; background-color: rgb(255, 0, 0); border: 1px solid #ccc; border-radius: 3px;"></div> 
+            <span>Big Rock</span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <div style="width: 18px; height: 18px; background-color: rgb(0, 0, 0); border: 1px solid #ccc; border-radius: 3px;"></div> 
+            <span>Rover/Background</span>
+        </div>
     </div>
 </div>
 """
 # 3. GRADIO INTERFACE
 with gr.Blocks() as demo:
-    gr.Markdown(f"## NASA AI4Mars Expert Fused Classifier")
+    gr.Markdown(f"## NASA Curiosity Rover Terrain Classifier")
     gr.HTML(legend_html)
     with gr.Row():
         img_input = gr.Image(type="filepath", label="Input Martian Image",interactive=False)