Update app.py

app.py

@@ -146,106 +146,15 @@ initialize_leaderboard_file()
 
 # Function to set default mode
 # Function to set default mode
+import gradio as gr
+
+# Ensure CSS is correctly defined
 css_tech_theme = """
 body {
     background-color: #f4f6fa;
     color: #333333;
     font-family: 'Roboto', sans-serif;
     line-height: 1.8;
-    margin: 0;
-    padding: 0;
-}
-
-a {
-    color: #6a1b9a;
-    font-weight: 500;
-}
-
-a:hover {
-    color: #8c52d3;
-    text-decoration: underline;
-}
-
-h1, h2, h3 {
-    color: #4a148c;
-    margin: 15px 0;
-    text-align: center;
-}
-
-h1 {
-    font-size: 2.5rem;
-}
-
-h2 {
-    font-size: 2rem;
-}
-
-h3 {
-    font-size: 1.8rem;
-}
-
-p, li {
-    font-size: 1.2rem;
-    margin: 10px 0;
-}
-
-button {
-    background-color: #64b5f6;
-    color: #ffffff;
-    border: none;
-    border-radius: 6px;
-    padding: 12px 18px;
-    font-size: 16px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-button:hover {
-    background-color: #6a1b9a;
-}
-
-.input-row, .tab-content {
-    background-color: #ffffff;
-    border-radius: 10px;
-    padding: 25px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    margin: 15px 0;
-}
-
-.tabs {
-    margin-bottom: 20px;
-    gap: 15px;
-    display: flex;
-    justify-content: center;
-}
-
-.tab-item {
-    background-color: #ece2f4;
-    border-radius: 8px;
-    padding: 12px 20px;
-    font-size: 1.1rem;
-    font-weight: bold;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    margin: 8px;
-    text-align: center;
-    transition: background-color 0.3s ease;
-}
-
-.tab-item:hover {
-    background-color: #d1c4e9;
-}
-
-.dataframe {
-    color: #333333;
-    background-color: #ffffff;
-    border: 1px solid #e5eff2;
-    border-radius: 10px;
-    padding: 20px;
-    font-size: 1rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-    margin: 15px 0;
 }
 
 .center-content {
@@ -258,75 +167,63 @@ button:hover {
     padding: 20px;
 }
 
-.center-content img {
-    max-width: 200px;
-    height: auto;
-    margin: 20px 0;
-    border-radius: 10px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-hr {
-    border: 1px solid #ddd;
-    width: 80%;
-    margin: 30px auto;
+h1, h3 {
+    color: #5e35b1;
+    margin: 15px 0;
+    text-align: center;
 }
 """
 
+# Ensure all required functions and variables are defined
+def evaluate_predictions(file, model_name, add_to_leaderboard):
+    # Add logic for evaluating predictions
+    return "Evaluation completed", 90.0  # Example return
 
+def load_leaderboard():
+    # Add logic for loading leaderboard
+    return [{"Model Name": "Example", "Accuracy": 90}]
 
-with gr.Blocks(css=css_tech_theme) as demo:
-   gr.Markdown("""
-<div class="center-content">
-    <h1>🏆 Mobile-MMLU Benchmark Competition</h1>
-    <h3>🌟 Welcome to the Competition Overview</h3>
-    <img src="https://via.placeholder.com/200" alt="Competition Logo">
-    <p>
-        Welcome to the Mobile-MMLU Benchmark Competition. Here you can submit your predictions, 
-        view the leaderboard, and track your performance!
-    </p>
-    <hr>
-</div>
-""", elem_id="center-content")
+LAST_UPDATED = "December 21, 2024"
 
+# Create the Gradio Interface
+with gr.Blocks(css=css_tech_theme) as demo:
+    gr.Markdown("""
+    <div class="center-content">
+        <h1>🏆 Mobile-MMLU Benchmark Competition</h1>
+        <h3>🌟 Welcome to the Competition Overview</h3>
+        <img src="https://via.placeholder.com/200" alt="Competition Logo">
+        <p>
+            Welcome to the Mobile-MMLU Benchmark Competition. Here you can submit your predictions, 
+            view the leaderboard, and track your performance!
+        </p>
+        <hr>
+    </div>
+    """)
 
     with gr.Tabs(elem_id="tabs"):
-        with gr.TabItem("📖 Overview", elem_classes=["tab-item"]):
+        with gr.TabItem("📖 Overview"):
             gr.Markdown("""
-## Overview
-Welcome to the **Mobile-MMLU Benchmark Competition**! Evaluate mobile-compatible Large Language Models (LLMs) on **16,186 scenario-based and factual questions** across **80 fields**.
----
-### What is Mobile-MMLU?
-Mobile-MMLU is a benchmark designed to test the capabilities of LLMs optimized for mobile use. Contribute to advancing mobile AI systems by competing to achieve the highest accuracy.
-
-### How It Works
-1. **Download the Dataset**
-   Access the dataset and instructions on our [GitHub page](https://github.com/your-github-repo).
-2. **Generate Predictions**
-   Use your LLM to answer the dataset questions. Format your predictions as a CSV file.
-3. **Submit Predictions**
-   Upload your predictions on this platform.
-4. **Evaluation**
-   Submissions are scored on accuracy.
-5. **Leaderboard**
-   View real-time rankings on the leaderboard.
----
-### Competition Tasks
-Participants must:
-- Optimize their models for **accuracy**.
-- Answer diverse field questions effectively.
----
-### Get Started
-1. Prepare your model using resources on our [GitHub page](https://github.com/your-github-repo).
-2. Submit predictions in the required format.
-3. Track your progress on the leaderboard.
-
-### Contact Us
-For support, email: [Insert Email Address]
----
+            ## Overview
+            Welcome to the **Mobile-MMLU Benchmark Competition**! Evaluate mobile-compatible Large Language Models (LLMs) on **16,186 scenario-based and factual questions** across **80 fields**.
+            ---
+            ### What is Mobile-MMLU?
+            Mobile-MMLU is a benchmark designed to test the capabilities of LLMs optimized for mobile use. Contribute to advancing mobile AI systems by competing to achieve the highest accuracy.
+            ---
+            ### How It Works
+            1. **Download the Dataset**
+               Access the dataset and instructions on our [GitHub page](https://github.com/your-github-repo).
+            2. **Generate Predictions**
+               Use your LLM to answer the dataset questions. Format your predictions as a CSV file.
+            3. **Submit Predictions**
+               Upload your predictions on this platform.
+            4. **Evaluation**
+               Submissions are scored on accuracy.
+            5. **Leaderboard**
+               View real-time rankings on the leaderboard.
+            ---
             """)
 
-        with gr.TabItem("📤 Submission", elem_classes=["tab-item"]):
+        with gr.TabItem("📤 Submission"):
             with gr.Row():
                 file_input = gr.File(label="📂 Upload Prediction CSV", file_types=[".csv"], interactive=True)
                 model_name_input = gr.Textbox(label="🖋️ Model Name", placeholder="Enter your model name")
@@ -344,7 +241,7 @@ For support, email: [Insert Email Address]
                 outputs=[eval_status, overall_accuracy_display],
             )
 
-        with gr.TabItem("🏅 Leaderboard", elem_classes=["tab-item"]):
+        with gr.TabItem("🏅 Leaderboard"):
             leaderboard_table = gr.Dataframe(
                 value=load_leaderboard(),
                 label="Leaderboard",