Update app.py

app.py

@@ -385,7 +385,6 @@ display:flex;
 #submission-fields input[type="file"],
 #submission-fields input[type="text"] {
     width: 90%;
-    max-width: 400px;
     padding: 12px 15px;
     font-size: 1em;
     border: 2px solid #d3bce8;
@@ -502,27 +501,45 @@ with gr.Blocks(css=css_tech_theme) as demo:
         with gr.TabItem("📖 Overview"):
             gr.Markdown("""
             <div class="tabs">
-            <h2>About the Competition</h2>
-            <p>The <strong>Mobile-MMLU Benchmark Competition</strong> is a premier challenge designed to evaluate and advance mobile-optimized Large Language Models (LLMs). It provides an unparalleled opportunity to showcase your model's ability to handle diverse, real-world scenarios while pushing the boundaries of mobile intelligence.</p>
-            <p>With a dataset spanning <strong>80 distinct fields</strong> and featuring <strong>16,186 questions</strong>, this competition emphasizes practical application. From education and healthcare to technology and daily life, the questions are crafted to mimic real-world challenges and test the adaptability, accuracy, and efficiency of mobile-compatible LLMs.</p>
-            <h3>Why Compete?</h3>
-            <p>Participating in this competition allows you to:
-            <ul>
-            <li>🌟 Showcase your expertise in LLM development and optimization for mobile platforms.</li>
+        <h2 style="color: #6a1b9a; text-align: center;">About the Competition</h2>
+        <p>The <strong>Mobile-MMLU Benchmark Competition</strong> is a premier challenge designed to evaluate and advance mobile-optimized Large Language Models (LLMs). This competition is an excellent opportunity to showcase your model's ability to handle real-world scenarios and excel in mobile intelligence.</p>
+        <p>With a dataset spanning <strong>80 distinct fields</strong> and featuring <strong>16,186 questions</strong>, the competition emphasizes practical applications, from education and healthcare to technology and daily life.</p>
+        
+        <h3 style="color: #8e44ad;">Why Compete?</h3>
+        <p>Participating in this competition allows you to:</p>
+        <ul>
+            <li>🌟 Showcase your expertise in developing and optimizing LLMs for mobile platforms.</li>
             <li>🚀 Benchmark your model’s performance against others in a highly competitive environment.</li>
-            <li>📈 Contribute to advancements in AI for mobile technology, shaping the future of user-centric AI systems.</li>
-            </ul></p>
-                <h3>How It Works</h3>
-                <ul>
-                    <li>1️⃣ <strong>Download the Dataset:</strong> Access the dataset and instructions on our 
-                    <a href="https://github.com/your-github-repo" target="_blank">GitHub page</a>.</li>
-                    <li>2️⃣ <strong>Generate Predictions:</strong> Use your LLM to answer the dataset questions. 
-                    Format your predictions as a CSV file.</li>
-                    <li>3️⃣ <strong>Submit Predictions:</strong> Upload your predictions on this platform.</li>
-                    <li>4️⃣ <strong>Evaluation:</strong> Submissions are scored based on accuracy.</li>
-                    <li>5️⃣ <strong>Leaderboard:</strong> View real-time rankings on the leaderboard.</li>
-                </ul>
-            </div>
+            <li>📈 Contribute to advancements in mobile AI, shaping the future of user-centric AI systems.</li>
+        </ul>
+        
+        <h3 style="color: #6a1b9a;">How It Works</h3>
+        <ol>
+            <li>1️⃣ <strong>Download the Dataset:</strong> Access the dataset and detailed instructions on the <a href="https://github.com/your-github-repo" target="_blank">GitHub page</a>. Follow the steps to ensure your environment is set up correctly.</li>
+            <li>2️⃣ <strong>Generate Predictions:</strong> Use the provided script in the GitHub repository to generate answers. Ensure the output file matches the following format:</li>
+        </ol>
+        <pre style="background-color: #f9f7fd; border: 1px solid #d3bce8; border-radius: 8px; padding: 10px;">
+question_id,predicted_answer
+q1,A
+q2,B
+q3,C
+...
+        </pre>
+        <p>The <code>question_id</code> is the unique identifier for each question, and <code>predicted_answer</code> is your model's prediction (A, B, C, or D).</p>
+        
+        <ol start="3">
+            <li>3️⃣ <strong>Submit Predictions:</strong> Upload your CSV file to the <strong>Submission Page</strong> on this platform.</li>
+            <li>4️⃣ <strong>Evaluation:</strong> Your submission will be scored based on accuracy. The results will include overall and valid accuracy metrics.</li>
+            <li>5️⃣ <strong>Leaderboard:</strong> Optionally, add your results to the real-time leaderboard to compare your model's performance with others.</li>
+        </ol>
+        
+        <h3 style="color: #8e44ad;">Resources</h3>
+        <ul>
+            <li>📂 <a href="https://github.com/your-github-repo" target="_blank">GitHub Repository</a>: Contains the dataset, scripts, and detailed instructions.</li>
+            <li>📊 <a href="https://github.com/your-dataset-link" target="_blank">Dataset Link</a>: Direct access to the competition dataset.</li>
+            <li>❓ <a href="https://github.com/your-github-repo/issues" target="_blank">Support Page</a>: Use this for queries or issues during participation.</li>
+        </ul>
+        </div>
             """)
             
         with gr.TabItem("📤 Submission"):