[Ref] apply custom css to heatmap, increase size of images

app.py

@@ -21,7 +21,7 @@ metric_init = "CAPA"
 with gr.Blocks(title="LLM Similarity Analyzer", css=app_util.custom_css) as demo:
     gr.Markdown("# Model Similarity Comparison Tool")
     gr.Markdown(links_markdown)
-    gr.Markdown('Demo for the recent publication ["Great Models Think Alike and this Undermines AI Oversight"](https://huggingface.co/papers/2502.04313).')
+    gr.Markdown('This is a demo for the recent publication "[Great Models Think Alike and this Undermines AI Oversight](https://huggingface.co/papers/2502.04313)."')
 
     with gr.Row():
         dataset_dropdown = gr.Dropdown(
@@ -57,7 +57,7 @@ with gr.Blocks(title="LLM Similarity Analyzer", css=app_util.custom_css) as demo
     )
     
     generate_btn = gr.Button("Generate Heatmap", variant="primary")
-    heatmap = gr.Image(value=app_util.create_heatmap(model_init, dataset_init, metric_init), label="Similarity Heatmap", visible=True)
+    heatmap = gr.Image(value=app_util.create_heatmap(model_init, dataset_init, metric_init), label="Similarity Heatmap", elem_classes="image_container", visible=True)
 
     generate_btn.click(
         fn=app_util.validate_inputs,

src/app_util.py

@@ -90,9 +90,9 @@ def update_datasets_based_on_models(selected_models, current_dataset):
     
 custom_css = """
 .image-container img {
-    width: 80% !important;  /* Make it 80% of the parent container */
+    width: 90% !important;  /* Make it 90% of the parent container */
     height: auto !important; /* Maintain aspect ratio */
-    max-width: 800px; /* Optional: Set a max limit */
+    max-width: 1000px; /* Optional: Set a max limit */
     display: block;
     margin: auto; /* Center the image */
 }