submission form prettier, dark mode a bit better

frontend/layout.py

@@ -147,7 +147,7 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
             return new_data
 
         # Info section
-        info_html = gr.HTML(LeaderboardContent.get_info_html())
+        info_html = gr.HTML(LeaderboardContent.get_info_html(), elem_classes=["info-leaderboard"])
 
     return tab, table
 
@@ -167,148 +167,198 @@ def create_submission_tab(submit_callback: Callable = None) -> gr.TabItem:
     """Create the submission tab layout"""
 
     with gr.TabItem("Submit", elem_id="submission-tab", id=2) as tab:
+        with gr.Blocks(elem_classes=["form-wrapper"]):
+            gr.HTML(f"""<div class="header-section">
+                    <h2 class="header-emoji">{SubmissionContent.emoji}</h2>
+                <h2 class="header-title">{SubmissionContent.title}</h2>
+            </div>""")
+
+            # Instructions
+            instructions_html = gr.HTML(SubmissionContent.get_instructions_html())
+
+            # Submission form
+            with gr.Blocks():
+                # Required fields
+                gr.HTML(f"<div>{SubmissionContent.form_labels['model_name']}</div>", container=False, elem_classes=["field-label"])
+                model_name = gr.Textbox(
+                    show_label=True,
+                    placeholder=SubmissionContent.form_placeholders["model_name"],
+                    #info=SubmissionContent.form_info["model_name"],
+                    container=False,
+                    elem_classes=["form-container"],
+                    max_lines=1,
+                )
 
-        gr.HTML(f"""<div class="header-section">
-                <h2 class="header-emoji">{SubmissionContent.emoji}</h2>
-            <h2 class="header-title">{SubmissionContent.title}</h2>
-        </div>""")
-
-        # Instructions
-        instructions_html = gr.HTML(SubmissionContent.get_instructions_html())
-
-        # Submission form
-        with gr.Blocks(elem_classes=["form-container"]):
-            # Required fields
-            model_name = gr.Textbox(
-                label=SubmissionContent.form_labels["model_name"],
-                placeholder=SubmissionContent.form_placeholders["model_name"],
-                info=SubmissionContent.form_info["model_name"],
-            )
-
-            hf_space_tag = gr.Textbox(
-                label=SubmissionContent.form_labels["hf_space_tag"],
-                placeholder=SubmissionContent.form_placeholders["hf_space_tag"],
-                info=SubmissionContent.form_info["hf_space_tag"],
-            )
-
-            model_description = gr.Textbox(
-                label=SubmissionContent.form_labels["model_description"],
-                placeholder=SubmissionContent.form_placeholders[
-                    "model_description"
-                ],
-                info=SubmissionContent.form_info["model_description"],
-                lines=3,
-            )
+                gr.HTML(f"<div>{SubmissionContent.form_labels['hf_space_tag']}</div>", container=False, elem_classes=["field-label"])
+                hf_space_tag = gr.Textbox(
+                    label=SubmissionContent.form_labels["hf_space_tag"],
+                    placeholder=SubmissionContent.form_placeholders["hf_space_tag"],
+                    #info=SubmissionContent.form_info["hf_space_tag"],
+                    container=False,
+                    max_lines=1,
+                    elem_classes=["form-container"]
+                )
 
-            # Optional fields in accordion
-            # with gr.Accordion("Additional Information", open=False):
-            organization = gr.Textbox(
-                label=SubmissionContent.form_labels["organization"],
-                placeholder=SubmissionContent.form_placeholders[
-                    "organization"
-                ],
-            )
+                gr.HTML(f"<div>{SubmissionContent.form_labels['model_description']}</div>", container=False, elem_classes=["field-label"])
+                model_description = gr.Textbox(
+                    label=SubmissionContent.form_labels["model_description"],
+                    placeholder=SubmissionContent.form_placeholders[
+                        "model_description"
+                    ],
+                    #info=SubmissionContent.form_info["model_description"],
+                    lines=3,
+                    container=False,
+                    elem_classes=["form-container"]
+                )
 
-            model_size = gr.Textbox(
-                    label=SubmissionContent.form_labels["model_size"],
+                # Optional fields in accordion
+                # with gr.Accordion("Additional Information", open=False):
+                gr.HTML(f"<div>{SubmissionContent.form_labels['organization']}</div>", container=False, elem_classes=["field-label"])
+                organization = gr.Textbox(
+                    label=SubmissionContent.form_labels["organization"],
                     placeholder=SubmissionContent.form_placeholders[
-                        "model_size"
+                        "organization"
                     ],
+                    container=False,
+                    elem_classes=["form-container"],
+                    max_lines=1,
                 )
 
-            with gr.Row():
+                gr.HTML(f"<div>{SubmissionContent.form_labels['model_size']}</div>", container=False, elem_classes=["field-label"])
+                model_size = gr.Textbox(
+                        label=SubmissionContent.form_labels["model_size"],
+                        placeholder=SubmissionContent.form_placeholders[
+                            "model_size"
+                        ],
+                        container=False,
+                        max_lines=1,
+                        elem_classes=["form-container"]
+                    )
+
                 pretrained = gr.Checkbox(
                     label=SubmissionContent.form_labels["pretrained"],
+                    container=False,
+                    elem_classes=["form-container-checkbox"]
                 )
 
+                pretraining_label = gr.HTML(f"<div>{SubmissionContent.form_labels['pretraining_data']}</div>", container=False, 
+                                            elem_classes=["field-label"], visible="hidden")
                 pretraining_data = gr.Textbox(
                     label=SubmissionContent.form_labels["pretraining_data"],
                     placeholder=SubmissionContent.form_placeholders[
                         "pretraining_data"
                     ],
                     visible="hidden",
+                    container=False,
+                    max_lines=1,
+                    elem_classes=["form-container"]
                 )
 
                 # When checkbox changes, update visibility
                 pretrained.change(
-                    fn=lambda checked: gr.update(visible=True if checked else "hidden"),
+                    fn=lambda checked: [
+                        gr.update(visible=checked),
+                        gr.update(visible=checked),
+                    ],
                     inputs=pretrained,
-                    outputs=pretraining_data
+                    outputs=[pretraining_label, pretraining_data],
                 )
 
-                # pretrained = gr.Textbox(
-                #     label=SubmissionContent.form_labels["pretrained"],
-                #     placeholder=SubmissionContent.form_placeholders[
-                #         "pretrained"
-                #     ],
-                # )
-
-            publication_title = gr.Textbox(
-                label=SubmissionContent.form_labels["publication_title"],
-                placeholder=SubmissionContent.form_placeholders[
-                    "publication_title"
-                ],
-            )
-
-            publication_link = gr.Textbox(
-                label=SubmissionContent.form_labels["publication_link"],
-                placeholder=SubmissionContent.form_placeholders[
-                    "publication_link"
-                ],
-            )
+                    # pretrained = gr.Textbox(
+                    #     label=SubmissionContent.form_labels["pretrained"],
+                    #     placeholder=SubmissionContent.form_placeholders[
+                    #         "pretrained"
+                    #     ],
+                    # )
+
+                gr.HTML(f"<div>{SubmissionContent.form_labels['publication_title']}</div>", 
+                        container=False, elem_classes=["field-label"])
+                publication_title = gr.Textbox(
+                    label=SubmissionContent.form_labels["publication_title"],
+                    placeholder=SubmissionContent.form_placeholders[
+                        "publication_title"
+                    ],
+                    container=False,
+                    max_lines=1,
+                    elem_classes=["form-container"]
+                )
 
-            zero_shot = gr.Checkbox(
-                    label=SubmissionContent.form_labels["zero_shot"],
+                gr.HTML(f"<div>{SubmissionContent.form_labels['publication_link']}</div>", container=False, elem_classes=["field-label"])
+                publication_link = gr.Textbox(
+                    label=SubmissionContent.form_labels["publication_link"],
+                    placeholder=SubmissionContent.form_placeholders[
+                        "publication_link"
+                    ],
+                    max_lines=1,
+                    container=False,
+                    elem_classes=["form-container"]
                 )
-            
 
-            with gr.Row():
+                zero_shot = gr.Checkbox(
+                        label=SubmissionContent.form_labels["zero_shot"],
+                        container=False,
+                        elem_classes=["form-container-checkbox"]
+                    )
+                
+
                 few_shot = gr.Checkbox(
                     label=SubmissionContent.form_labels["few_shot"],
+                    container=False,
+                    elem_classes=["form-container-checkbox"]
                 )
+
+                n_shot_label = gr.HTML(f"<div>{SubmissionContent.form_labels['n_shot']}</div>", 
+                                       container=False, elem_classes=["field-label"], visible="hidden")
                 n_shot = gr.Textbox(
                     label=SubmissionContent.form_labels["n_shot"],
                     placeholder=SubmissionContent.form_placeholders[
                         "n_shot"
                     ],
                     visible="hidden",
+                    container=False,
+                    max_lines=1,
+                    elem_classes=["form-container"]
                 )
 
                 few_shot.change(
-                    fn=lambda checked: gr.update(visible=True if checked else "hidden"),
+                    fn=lambda checked: [
+                        gr.update(visible=checked),
+                        gr.update(visible=checked),
+                    ],
                     inputs=few_shot,
-                    outputs=n_shot
+                    outputs=[n_shot_label, n_shot],
                 )
 
-            agree = gr.Checkbox(label="I confirm that the submission fulfills the requirements and that the results are reproducible.", elem_id="agree-checkbox")
-
-
-
-
-            # Submit button and result
-            submit_btn = gr.Button("Submit Model", value="primary", interactive=False, elem_classes=["submit-button"])
-            agree.change(lambda x: gr.update(interactive=x), inputs=agree, outputs=submit_btn)
-            result_msg = gr.HTML()
-
-            if submit_callback:
-                submit_btn.click(
-                    fn=submit_callback,
-                    inputs=[
-                        model_name,
-                        hf_space_tag,
-                        model_description,
-                        organization,
-                        model_size,
-                        pretrained,
-                        pretraining_data,
-                        publication_title,
-                        publication_link,
-                        zero_shot,
-                        few_shot,
-                        n_shot,
-                    ],
-                    outputs=result_msg,
-                )
+                agree = gr.Checkbox(label="I confirm that the submission fulfills the requirements and that the results are reproducible.", 
+                                    elem_id="agree-checkbox", container=False, elem_classes=["form-container-checkbox"])
+
+
+
+
+                # Submit button and result
+                submit_btn = gr.Button("Submit", value="primary", interactive=False, elem_classes=["submit-button", "form-container-checkbox"])
+                agree.change(lambda x: gr.update(interactive=x), inputs=agree, outputs=submit_btn)
+                result_msg = gr.HTML()
+
+                if submit_callback:
+                    submit_btn.click(
+                        fn=submit_callback,
+                        inputs=[
+                            model_name,
+                            hf_space_tag,
+                            model_description,
+                            organization,
+                            model_size,
+                            pretrained,
+                            pretraining_data,
+                            publication_title,
+                            publication_link,
+                            zero_shot,
+                            few_shot,
+                            n_shot,
+                        ],
+                        outputs=result_msg,
+                    )
 
     return tab
 

frontend/leaderboard.py

@@ -56,7 +56,7 @@ def format_leaderboard_data(raw_data: dict) -> pd.DataFrame:
             ("", "Model"): config["model_name"],
             ("", "Organization"): config.get("organization", ""),
             ("", "Avg. AUC"): results["overall_score"]["roc_auc"],
-            ("", "ΔAUC-PR"): config.get("daucpr", ""),
+            ("", "ΔAUC-PR"): results["overall_score"].get("delta_auprc"),
         }
         print(results["overall_score"])
 
@@ -66,7 +66,7 @@ def format_leaderboard_data(raw_data: dict) -> pd.DataFrame:
                 row[("ROC-AUC", task_key)] = task_result.get("roc_auc", "")
         for task_key, task_result in results.items():
             if task_key != "overall_score": 
-                row[("ΔAUC-PR", task_key)] = task_result.get("delta_auc_pr", "")
+                row[("ΔAUC-PR", task_key)] = task_result.get("delta_auprc", "")
 
 
         # === Then continue with the rest of the metadata columns ===

frontend/styles.css

@@ -53,9 +53,8 @@ body, .gradio-container {
 .leaderboard-container {
   overflow: auto;
   max-height: 600px;                 /* scroll vertically after ~10 rows */
-  border: 1px solid #e5e7eb;
+  border: 1px solid #d1d5db;
   border-radius: 10px;
-  background: #fff;
   margin-top: 3px;
 }
 
@@ -74,15 +73,20 @@ body, .gradio-container {
   padding: 10px 14px;
   font-weight: 600;
   font-size: 14px;
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #d1d5db;
   position: sticky;
+  background-color: #F4F4F3;
   top: 0;
   z-index: 2;
+  word-break: break-word;
+  max-width: 300px;
+}
+
+.leaderboard-table tbody tr:last-child td {
+  border-bottom: 1px white !important;
 }
 
 .leaderboard-table thead tr:first-child th {
-  background: #f1f5f9;
   font-weight: 700;
 }
 
@@ -98,21 +102,16 @@ body, .gradio-container {
   text-align: left;
   padding: 10px 14px;
   font-size: 14px;
-  color: #111827;
-  border: 1px solid #f3f4f6;
+  border: 1px solid #d1d5db;
   vertical-align: top;
   word-break: break-word;
   white-space: normal;
   line-height: 1.5;
+  max-width: 300px;
+  word-break: break-word;
 }
 
-/* === Hover effect === */
-.leaderboard-row:hover {
-  background-color: #f8fafc;
-  transition: background-color 0.15s ease-in-out;
-}
 
-/* === Scrollbar === */
 .leaderboard-container::-webkit-scrollbar {
   height: 8px;
 }
@@ -121,7 +120,7 @@ body, .gradio-container {
   border-radius: 4px;
 }
 .leaderboard-container::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
+  background: #7E848C;
 }
 
 
@@ -132,7 +131,6 @@ body, .gradio-container {
 
 
 
-
 #leaderboard-tab,
 #leaderboard-tab .gr-panel,
 #leaderboard-tab .gr-block,
@@ -179,8 +177,8 @@ body, .gradio-container {
   align-items: center !important;
   justify-content: center !important;
   gap: 8px !important;
-  padding: 6px 8px 6px 15px !important;
-  color: white !important;
+  padding: 20px !important;
+  background-color: white;
   font-weight: 700 !important;
   font-size: 25px !important;
   border-radius: 30px !important;
@@ -199,12 +197,20 @@ body, .gradio-container {
 
 /* Remove tab panel border + shadow */
 #submission-tab,
-#submission-tab .gr-panel,
 #submission-tab .gr-block,
-#submission-tab .gr-box {
-  border: none !important;
-  box-shadow: none !important;
+#submission-tab .gr-box,
+#submission-tab .column {
+  margin: 0 !important;
+  padding: 0 !important;
+  gap: 0 !important;
+}
+
+#submission-tab .form-wrapper * {
+  margin: 0 !important;
   padding: 0 !important;
+  gap: 0 !important;
+  box-shadow: none !important;
+  border: none !important;
 }
 
 
@@ -228,13 +234,13 @@ body, .gradio-container {
   border: none !important;
   box-shadow: none !important;
   padding: 0.3rem 0 !important;
-  font-weight: 400 !important;
-  color: #222 !important;
+  font-weight: 600 !important;
+  color: #666 !important;
 }
 
 /* Active tab text bold */
 .tab-nav button[aria-selected="true"] {
-  font-weight: 600 !important;
+  font-weight: 700 !important;
 }
 
 /* Make the underline visible and above everything */
@@ -248,130 +254,149 @@ body, .gradio-container {
   display: block;
   pointer-events: none;
   z-index: 10; /* ensures it's visible */
-  border-bottom: #222 3px 
+  border-bottom: #666 5px 
 }
 
 
 
 
 
-.form-container {
-    border: none !important;
-}
-/* Remove the container border + shadow */
-/* Remove the outer border + gray background */
-.form-container .form {
-  background: white !important;
+/* === Form wrapper (outer layout) === */
+.form-wrapper {
+  margin: 0 auto !important;
+  padding: 16px 5px !important;
   border: none !important;
-  box-shadow: none !important;
-  padding: 0 !important;
+  max-width: 80%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start; /* ✅ modern, replaces old -ms-flex-align */
 }
 
-/* Remove the gray separator "bars" between inputs */
-.form-container .block {
-  border: none !important;
-  box-shadow: none !important;
-  margin: 0 !important;
-  padding: 0 !important;
+/* === Label wrapper === */
+.field-label {
+  color: #111827;
+  font-size: 14px !important;
+  font-weight: 500;
+  margin-bottom: 2px !important;  /* tighter spacing below */
+  margin-top: 10px !important;    /* consistent space above */
+  line-height: 1.3;
+  padding-left: 2px;              /* ✅ tiny indent for visual alignment */
 }
 
-/* Add spacing between input groups */
-.form-container .block:not(:last-child) {
-  margin-bottom: 18px !important;
-  border: none;
+/* === Textboxes === */
+.form-container {
+  width: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 14px;
+  color: #111827;
+  box-sizing: border-box;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-/* Style the actual text fields */
-.form-container input,
-.form-container textarea {
-  border: 1px solid #d1d5db !important;
-  background: white !important;
-  border-radius: 8px !important;
-  padding: 10px 12px !important;
-  font-size: 15px !important;
-  transition: 0.15s ease;
+.form-container:focus,
+.form-container:active {
+  border-color: #3b82f6;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
 }
 
-/* Focus effect */
-.form-container input:focus,
-.form-container textarea:focus {
-  outline: none !important;
-  border-color: #6366f1 !important;
-  background: #ffffff !important;
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
-  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+/* === Placeholder === */
+.form-container::placeholder {
+  color: #9ca3af;
 }
 
-.form-container .block:focus-within {
-  position: relative;
-  z-index: 2;
+/* === Checkbox alignment === */
+.form-container-checkbox {
+  display: flex;                  /* ✅ aligns checkbox + label nicely */
+  align-items: center;
+  gap: 8px;                       /* space between checkbox and text */
+  padding: 8px 10px;
+  margin-top: 10px !important;
+  margin-bottom: 5px !important;
+  font-size: 14px !important;
+  font-weight: 500;
+  color: #111827;
+  width: 100%;
+  box-sizing: border-box;
+  background: transparent;
+  border-radius: 8px;
 }
 
-.form-container input:hover,
-.form-container textarea:hover {
-  border-color: #b7bce8 !important;
+/* === Checkbox input itself === */
+.form-container-checkbox input[type="checkbox"] {
+  accent-color: #3b82f6;
+  transform: scale(1.1);
+  margin-left: 4px;
+  cursor: pointer;
 }
 
-/* Make labels clean + consistent */
-.form-container label {
-  display: block !important;
-  margin-bottom: 6px !important;
-  font-weight: 700 !important;   /* thicker */
-  font-size: 15px !important;
-  color: #111 !important;        /* true black, not gray */
+/* === Subtle hover cue for inputs === */
+.form-container:hover {
+  border-color: #d1d5db;
 }
 
-.form-container.gr-block,
-.form-container .gr-block,
-.form-container .gr-box {
-  border: none !important;
-  box-shadow: none !important;
-  background: white !important;
-  padding: 0 !important;
-}
 
-/* Also remove the automatically injected Gradio border variable */
-.form-container {
-  --block-border-width: 0px !important;
-}
 
 
 
 
 
 
-/* Base button styling */
-.submit-button button {
-    background: #6366f1 !important;  /* Indigo */
-    color: white !important;
-    border: none !important;
-    border-radius: 8px !important;
-    padding: 10px 16px !important;
-    font-size: 15px !important;
-    font-weight: 600 !important;
-    cursor: pointer !important;
-}
 
-/* Hover state */
-.submit-button button:hover {
-    background: #4f46e5 !important; /* darker indigo */
-    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35) !important;
+/* === Submit Button === */
+.submit-button {
+  display: inline-block !important;
+  background-color: #ACCBE1 !important;   /* indigo base */
+  color: #fff !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 12px 22px !important;
+  font-size: 15px !important;
+  font-weight: 600 !important;
+  cursor: pointer !important;
+  transition: all 0.15s ease-in-out;
+  width:100%;
+  
+  /* Fix weird float / alignment */
+  align-self: flex-start !important;      /* ✅ anchors left within flex parent */
+  margin-top: 16px !important;            /* ✅ small top gap */
+  margin-bottom: 8px !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* === Hover state === */
+.submit-button:hover:not(:disabled) {
+  background-color: #ACCBE1 !important;   /* darker indigo */
+  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35) !important;
+  transform: translateY(-1px);
+}
+
+/* === Active (pressed) state === */
+.submit-button:active:not(:disabled) {
+  background-color: #CEE5F2 !important;
+  transform: scale(0.98);
+  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25) !important;
+}
+
+/* === Disabled state === */
+.submit-button:disabled {
+  background-color: #CEE5F2 !important;  /* Light gray */
+  color: #9ca3af !important;             /* Muted gray text */
+  cursor: not-allowed !important;
+  box-shadow: none !important;
+  opacity: 0.75 !important;
+  transform: none !important;
 }
 
-/* Active (pressed) state */
-.submit-button button:active {
-    background: #4338ca !important;
-    transform: scale(0.98);
+/* === Ensure Gradio doesn’t override the background === */
+#submission-tab .submit-button,
+.form-container .submit-button,
+.gr-button.submit-button {
+  background-color: #ACCBE1 !important;
 }
 
-/* Disabled state (before checkbox is checked) */
-.submit-button button:disabled {
-    background: #d1d5db !important;  /* Light gray */
-    color: #9ca3af !important;       /* Muted gray text */
-    cursor: not-allowed !important;
-    box-shadow: none !important;
-    opacity: 0.75 !important;
-}
 
 
 
@@ -380,10 +405,11 @@ body, .gradio-container {
 
 
 .instructions-section {
-    padding: 16px 18px;
+    padding: 10px 18px;
     font-size: 15px;
     line-height: 1.5;
     margin-bottom: 20px;
+    margin-top: 20px;
 }
 
 .instructions-section code {
@@ -400,3 +426,10 @@ body, .gradio-container {
 .instructions-section p {
     margin: 6px 0;
 }
+
+
+
+.info-leaderboard {
+    margin-top: 10px;
+    margin-left: 20px;
+}

frontend/submission.py

@@ -12,10 +12,10 @@ def handle_submission(
     
     # Basic validation
     if not model_name or not hf_space_tag or not model_description:
-        return "<div style='color: red;'>L Error: Please fill in all required fields (*)</div>"
+        return "<div style='color: red;'>Please fill in all required fields (*)</div>"
     
     if "/" not in hf_space_tag:
-        return "<div style='color: red;'>L Error: HuggingFace space tag should be in format 'username/space-name'</div>"
+        return "<div style='color: red;'>HuggingFace space tag should be in format 'username/space-name'</div>"
     
     # Process submission
     try: