fixed html formatting

app.py

@@ -36,7 +36,7 @@ class KazTEBLeaderboard:
     def __init__(self, data: List[Dict[str, Any]]):
         self.data = data
         self.tasks = self._extract_tasks()
-        
+
     def _extract_tasks(self) -> Dict[str, List[str]]:
         tasks = {}
         if self.data:
@@ -46,20 +46,20 @@ class KazTEBLeaderboard:
                     datasets = [k for k in sample_model[task_name].keys() if k != 'average_score']
                     tasks[task_name] = datasets
         return tasks
-    
+
     def _format_score(self, score: float) -> str:
         return f"{score:.4f}"
-    
+
     def _create_model_link(self, name: str, url: str) -> str:
         return f'<a href="{url}" target="_blank" style="color: #1976d2; text-decoration: none;">{name}</a>'
-    
+
     def get_task_dataframe(self, task_name: str) -> pd.DataFrame:
         rows = []
-        
+
         for model in self.data:
             if task_name not in model:
                 continue
-                
+
             row = {
                 'Model': self._create_model_link(model['name'], model['url']),
                 'Average': self._format_score(model[task_name]['average_score']),
@@ -67,21 +67,21 @@ class KazTEBLeaderboard:
                 'Parameters': model.get('num_parameters', 'N/A'),
                 'Embedding Dimmension': model.get('emb_dim', 'N/A')
             }
-            
+
             # Addition of dataset-specific scores
             for dataset in self.tasks[task_name]:
                 if dataset in model[task_name]:
                     row[dataset] = self._format_score(model[task_name][dataset])
-            
+
             rows.append(row)
-        
+
         df = pd.DataFrame(rows)
         df['_sort_key'] = df['Average'].astype(float)
         df = df.sort_values('_sort_key', ascending=False).drop('_sort_key', axis=1)
         df.insert(0, 'Rank', range(1, len(df) + 1))
-        
+
         return df
-    
+
     def create_interface(self):
 
         # we will force the light theme for now :)
@@ -98,7 +98,7 @@ class KazTEBLeaderboard:
 
         with gr.Blocks(js=js_func) as demo:
             # Header
-            gr.Markdown(
+            gr.HTML(
                 """
                 <div style="text-align: center; margin-bottom: 20px;">
                     <h1 style="font-size: 36px; margin-bottom: 10px;">KazTEB Leaderboard 🏆</h1>
@@ -106,9 +106,9 @@ class KazTEBLeaderboard:
                 </div>
                 """
             )
-            
+
             # Subheader -- Project description
-            gr.Markdown(
+            gr.HTML(
                 """
                 <div style="margin-bottom: 30px; padding: 20px; background-color: #f8f9fa; border-radius: 8px; border-left: 4px solid #1976d2;">
                     <p style="font-size: 16px; line-height: 1.6; margin: 0; color: #333;">
@@ -117,10 +117,10 @@ class KazTEBLeaderboard:
                 </div>
                 """
             )
-            
+
             with gr.Tabs() as main_tabs:
                 with gr.Tab("📊 Task Results"):
-                    
+
                     with gr.Tabs() as task_tabs:
                         with gr.Tab("Retrieval"):
                             retrieval_df = self.get_task_dataframe('retrieval')
@@ -129,9 +129,10 @@ class KazTEBLeaderboard:
                                 headers=list(retrieval_df.columns),
                                 datatype=["number", "html", "str", "str", "str"] + ["str"] * (len(retrieval_df.columns) - 5),
                                 col_count=(len(retrieval_df.columns), "fixed"),
-                                interactive=False
+                                interactive=False,
+                                column_widths=[50, 400] + [200] * (len(retrieval_df.columns)-2)
                             )
-                        
+
                         with gr.Tab("Classification"):
                             classification_df = self.get_task_dataframe('classification')
                             gr.DataFrame(
@@ -139,9 +140,10 @@ class KazTEBLeaderboard:
                                 headers=list(classification_df.columns),
                                 datatype=["number", "html", "str", "str", "str"] + ["str"] * (len(classification_df.columns) - 5),
                                 col_count=(len(classification_df.columns), "fixed"),
-                                interactive=False
+                                interactive=False,
+                                column_widths=[50, 400] + [200] * (len(classification_df.columns)-2)
                             )
-                        
+
                         with gr.Tab("Bitext Mining"):
                             bitext_df = self.get_task_dataframe('bitext_mining')
                             gr.DataFrame(
@@ -149,19 +151,20 @@ class KazTEBLeaderboard:
                                 headers=list(bitext_df.columns),
                                 datatype=["number", "html", "str", "str", "str"] + ["str"] * (len(bitext_df.columns) - 5),
                                 col_count=(len(bitext_df.columns), "fixed"),
-                                interactive=False
+                                interactive=False,
+                                column_widths=[50, 400] + [200] * (len(bitext_df.columns)-2)
                             )
-                
+
                 with gr.Tab("📈 Metrics"):
                     gr.Markdown("## Evaluation Metrics Overview")
                     gr.Markdown("Although the evaluation generates multiple metric values for each task, we retain only a single metric for reference.")
-                    
+
                     with gr.Row():
 
                         with gr.Column():
                             gr.Markdown(
                                 """### 🔍 Retrieval
-                                
+
 **Metric:** nDCG@10 (Normalized Discounted Cumulative Gain)
 - Measures ranking quality of retrieved documents
 - Considers both relevance and position
@@ -172,26 +175,26 @@ class KazTEBLeaderboard:
 - Human-annotated question-document pairs""",
                                 elem_classes=["retrieval-card"]
                             )
-                        
+
                         with gr.Column():
                             gr.Markdown(
                                 """### 📝 Classification
-                                
+
 **Metric:** Accuracy
 - Percentage of correctly classified instances
 - Standard classification metric
 - **Range:** 0.0 - 1.0 (higher is better)
 
 **Datasets:**
-- [KazSandraPolarityClassification](https://huggingface.co/datasets/issai/kazsandra): Sentiment polarity
-- [KazSandraScoreClassification](https://huggingface.co/datasets/issai/kazsandra): Sentiment scoring""",
+- **[KazSandraPolarityClassification](https://huggingface.co/datasets/issai/kazsandra):** Sentiment polarity
+- **[KazSandraScoreClassification](https://huggingface.co/datasets/issai/kazsandra):** Sentiment scoring""",
                                 elem_classes=["classification-card"]
                             )
-                        
+
                         with gr.Column():
                             gr.Markdown(
                                 """### 🔗 Bitext Mining
-                                
+
 **Metric:** F1-Score
 - Harmonic mean of precision and recall
 - Balances correctness and completeness
@@ -202,10 +205,10 @@ class KazTEBLeaderboard:
 - Bidirectional evaluation""",
                                 elem_classes=["bitext-card"]
                             )
-                    
+
                     gr.Markdown("---")
                     gr.Markdown("### 📊 Scoring & Ranking")
-                    
+
                     with gr.Row():
                         with gr.Column():
                             gr.Markdown("**Task Averaging:** Equal weight per dataset within each task")
@@ -214,10 +217,9 @@ class KazTEBLeaderboard:
                         with gr.Column():
                             #gr.Markdown("**Future Plans:** Overall cross-task scoring implementation")
                             pass
-            
-            # Todo section at the bottom
+
             gr.Markdown("---")
-            gr.Markdown(
+            gr.HTML(
                 """
                 <div style="margin-top: 30px; padding: 20px; background-color: #f0f8ff; border-radius: 8px; border-left: 4px solid #4a90e2;">
                     <h3 style="margin-top: 0; color: #2c3e50; display: flex; align-items: center;">
@@ -230,16 +232,16 @@ class KazTEBLeaderboard:
                 </div>
                 """
             )
-            
+
             # Contact information
-            gr.Markdown(
+            gr.HTML(
                 """
                 <div style="text-align: center; margin-top: 20px; padding: 15px; color: #666; font-size: 14px;">
                     📧 Contact: <a href="mailto:arysbatyr@gmail.com" style="color: #1976d2; text-decoration: none;">arysbatyr@gmail.com</a>
                 </div>
                 """
             )
-        
+
         return demo
 
 
@@ -252,9 +254,9 @@ def load_benchmark_data(filepath: str = None) -> List[Dict[str, Any]]:
 
 if __name__ == "__main__":
     data = load_benchmark_data("./results.json")
-    
+
     leaderboard = KazTEBLeaderboard(data)
-    
+
     demo = leaderboard.create_interface()
     demo.launch()