change: css for readability

app.py

@@ -30,7 +30,7 @@ MODEL_IDS = {
         "DiNO": "OK-AI/dino-vitb16-pretrain-in1k",
         "iBOT": "OK-AI/ibot-vitb16-pretrain-in1k",
         "LeJEPA": "OK-AI/lejepa-vitb16-pretrain-in1k",
-    }
+    },
 }
 
 MODEL_KEYS = ["DiNO", "iBOT", "LeJEPA"]
@@ -98,10 +98,11 @@ def create_coming_soon_image(
 
     return image
 
+
 def resize_image_for_patches(
-        image: Image.Image,
-        image_size: int,
-        patch_size: int = PATCH_SIZE,
+    image: Image.Image,
+    image_size: int,
+    patch_size: int = PATCH_SIZE,
 ) -> torch.Tensor:
     """Resize so height = image_size and width is patch-aligned,
     preserving aspect ratio. Returns (1, 3, H, W) float tensor."""
@@ -137,7 +138,9 @@ def pad_to_square(img: Image.Image, canvas_size: int) -> Image.Image:
 # ── PCA visualisation ─────────────────────────────────────────────────────────
 
 
-def pca_vis(model: torch.nn.Module, image_tensor: torch.Tensor, canvas_size: int) -> Image.Image:
+def pca_vis(
+    model: torch.nn.Module, image_tensor: torch.Tensor, canvas_size: int
+) -> Image.Image:
     """Run image through model, PCA patch features → square-padded RGB PIL image."""
     model_input = preprocess(image_tensor).to(DEVICE)
 
@@ -207,27 +210,55 @@ CSS = """
     text-align: center;
     padding: 1.5rem 0 0.25rem;
 }
+/* Higher contrast subtitle */
 .subtitle-row {
     text-align: center;
-    color: #6b7280;
+    color: #d1d5db;
     font-size: 0.9rem;
     padding-bottom: 1rem;
 }
+/* Higher contrast section headers */
 .arch-header {
     font-size: 1.2rem;
     font-weight: 700;
     margin-top: 1rem;
     padding-left: 0.5rem;
-    border-left: 4px solid #3b82f6;
-    color: #1f2937;
+    border-left: 4px solid #60a5fa;
+    color: #f3f4f6;
 }
+/* Brighter model labels */
 .model-label {
     text-align: center;
-    font-weight: 600;
-    font-size: 0.85rem;
-    color: #374151;
+    font-weight: 700;
+    font-size: 0.9rem;
+    color: #f3f4f6;
     padding: 0.25rem 0;
 }
+/* Make links readable before AND after clicking */
+.subtitle-row a,
+.model-label a,
+.custom-footer a,
+.subtitle-row a:visited,
+.model-label a:visited,
+.custom-footer a:visited {
+    color: #93c5fd;
+    text-decoration: underline;
+    text-decoration-color: #93c5fd;
+    font-weight: 600;
+}
+/* Strong hover state */
+.subtitle-row a:hover,
+.model-label a:hover,
+.custom-footer a:hover {
+    color: #dbeafe;
+    text-decoration-color: #dbeafe;
+}
+/* Prevent browsers from turning visited links purple/dark */
+.subtitle-row a:active,
+.model-label a:active,
+.custom-footer a:active {
+    color: #bfdbfe;
+}
 .output-col {
     display: flex !important;
     flex-direction: column !important;
@@ -242,21 +273,24 @@ CSS = """
     max-height: 350px !important;
     width: 100% !important;
 }
-.subtitle-row a, .model-label a, .custom-footer a {
-    color: inherit;
-    text-decoration: underline;
-    text-decoration-color: #d1d5db;
+/* Improve contrast of markdown/help text */
+.gradio-container p {
+    color: #d1d5db;
 }
-.model-label a:hover, .subtitle-row a:hover, .custom-footer a:hover {
-    text-decoration-color: currentColor;
+/* Improve dropdown labels and general form text */
+.gradio-container label,
+.gradio-container .form,
+.gradio-container .prose {
+    color: #f3f4f6;
 }
+/* More legible footer */
 .custom-footer {
     text-align: center;
     margin-top: 2.5rem;
     padding-top: 1rem;
-    border-top: 1px solid #e5e7eb;
-    font-size: 0.8rem;
-    color: #9ca3af;
+    border-top: 1px solid #374151;
+    font-size: 0.85rem;
+    color: #d1d5db;
 }
 footer { display: none !important; }
 """
@@ -287,21 +321,21 @@ with gr.Blocks(css=CSS, title="SSL ViT PCA Visualiser") as demo:
                     choices=["ep100", "ep300"],
                     value="ep300",
                     label="Epochs",
-                    interactive=True
+                    interactive=True,
                 )
                 opt_weight = gr.Dropdown(
                     choices=["student", "teacher"],
                     value="teacher",
                     label="Weight Type",
                     info="LeJEPA always uses student",
-                    interactive=True
+                    interactive=True,
                 )
 
             opt_size = gr.Dropdown(
                 choices=["224", "448", "672", "1280"],
                 value="672",
                 label="Image Target Resolution",
-                interactive=True
+                interactive=True,
             )
 
             run_btn = gr.Button("Visualise", variant="primary")
@@ -326,15 +360,18 @@ with gr.Blocks(css=CSS, title="SSL ViT PCA Visualiser") as demo:
             with gr.Row(equal_height=True):
                 with gr.Column(elem_classes="output-col"):
                     gr.HTML(
-                        f'<div class="model-label"><a href="https://huggingface.co/{MODEL_IDS["ViT-S/16"]["DiNO"]}" target="_blank">DiNO (S/16)</a></div>')
+                        f'<div class="model-label"><a href="https://huggingface.co/{MODEL_IDS["ViT-S/16"]["DiNO"]}" target="_blank">DiNO (S/16)</a></div>'
+                    )
                     out_dino_s = gr.Image(show_label=False, interactive=False)
                 with gr.Column(elem_classes="output-col"):
                     gr.HTML(
-                        f'<div class="model-label"><a href="https://huggingface.co/{MODEL_IDS["ViT-S/16"]["iBOT"]}" target="_blank">iBOT (S/16)</a></div>')
+                        f'<div class="model-label"><a href="https://huggingface.co/{MODEL_IDS["ViT-S/16"]["iBOT"]}" target="_blank">iBOT (S/16)</a></div>'
+                    )
                     out_ibot_s = gr.Image(show_label=False, interactive=False)
                 with gr.Column(elem_classes="output-col"):
                     gr.HTML(
-                        f'<div class="model-label"><a href="https://huggingface.co/{MODEL_IDS["ViT-S/16"]["LeJEPA"]}" target="_blank">LeJEPA (S/16)</a></div>')
+                        f'<div class="model-label"><a href="https://huggingface.co/{MODEL_IDS["ViT-S/16"]["LeJEPA"]}" target="_blank">LeJEPA (S/16)</a></div>'
+                    )
                     out_lejepa_s = gr.Image(show_label=False, interactive=False)
 
             # ── ViT-B/16 Row ──
@@ -342,21 +379,28 @@ with gr.Blocks(css=CSS, title="SSL ViT PCA Visualiser") as demo:
             with gr.Row(equal_height=True):
                 with gr.Column(elem_classes="output-col"):
                     gr.HTML(
-                        f'<div class="model-label"><a href="https://huggingface.co/{MODEL_IDS["ViT-B/16"]["DiNO"]}" target="_blank">DiNO (B/16)</a></div>')
+                        f'<div class="model-label"><a href="https://huggingface.co/{MODEL_IDS["ViT-B/16"]["DiNO"]}" target="_blank">DiNO (B/16)</a></div>'
+                    )
                     out_dino_b = gr.Image(show_label=False, interactive=False)
                 with gr.Column(elem_classes="output-col"):
                     gr.HTML(
-                        f'<div class="model-label"><a href="https://huggingface.co/{MODEL_IDS["ViT-B/16"]["iBOT"]}" target="_blank">iBOT (B/16)</a></div>')
+                        f'<div class="model-label"><a href="https://huggingface.co/{MODEL_IDS["ViT-B/16"]["iBOT"]}" target="_blank">iBOT (B/16)</a></div>'
+                    )
                     out_ibot_b = gr.Image(show_label=False, interactive=False)
                 with gr.Column(elem_classes="output-col"):
                     gr.HTML(
-                        f'<div class="model-label"><a href="https://huggingface.co/{MODEL_IDS["ViT-B/16"]["LeJEPA"]}" target="_blank">LeJEPA (B/16)</a></div>')
+                        f'<div class="model-label"><a href="https://huggingface.co/{MODEL_IDS["ViT-B/16"]["LeJEPA"]}" target="_blank">LeJEPA (B/16)</a></div>'
+                    )
                     out_lejepa_b = gr.Image(show_label=False, interactive=False)
 
     # Wire outputs orderly following the exact resolution pattern tracking inside the `run` loop
     output_targets = [
-        out_dino_s, out_ibot_s, out_lejepa_s,
-        out_dino_b, out_ibot_b, out_lejepa_b
+        out_dino_s,
+        out_ibot_s,
+        out_lejepa_s,
+        out_dino_b,
+        out_ibot_b,
+        out_lejepa_b,
     ]
 
     run_btn.click(