css designs to table and more

app.css

@@ -0,0 +1,32 @@
+
+.infoPoint h1 {
+    font-size: 30px;
+    text-decoration: bold;
+    
+    }
+    
+a {
+    text-decoration: underline; 
+    color: #1f3b54 ;
+}
+
+table {
+  
+    margin: 25px 0;
+    font-size: 0.9em;
+    font-family: sans-serif;
+    min-width: 400px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+}
+
+table th,
+table td {
+    padding: 12px 15px;
+}
+
+tr {
+text-align: left;
+}
+thead tr {
+text-align: left;
+}

app.py

@@ -11,12 +11,12 @@ from huggingface_hub.repocard import metadata_load
 # Make model clickable link
 def make_clickable_model(model_name):
     link = "https://huggingface.co/" + model_name
-    return f'<a style="text-decoration: underline; color: #1f3b54 " target="_blank" href="{link}">{model_name}</a>'
+    return f'<a target="_blank" href="{link}">{model_name}</a>'
 
 # Make user clickable link
 def make_clickable_user(user_id):
     link = "https://huggingface.co/" + user_id
-    return f'<a style="text-decoration: underline; color: #1f3b54 " target="_blank" href="{link}">{user_id}</a>'
+    return f'<a  target="_blank" href="{link}">{user_id}</a>'
     
 def get_model_ids(rl_env):
     api = HfApi()
@@ -83,12 +83,9 @@ def get_data_per_env(rl_env):
         dataframe["User"] = dataframe["User"].apply(make_clickable_user)
         dataframe["Model"] = dataframe["Model"].apply(make_clickable_model)
         dataframe = dataframe.sort_values(by=['Results'], ascending=False)
-        table_html = dataframe.to_html(escape=False, index=False)
-        table_html = table_html.replace("<table>", '<table style="width: 100%; margin: auto; border:0.5px solid; border-spacing: 7px 0px">')  # center-align the headers
-      
-        table_html = table_html.replace("<thead>", '<thead align="left">')  # left-align the headers
-
-        table_html = "<div style='text-align: left ; width:100%'>"+table_html+"</div>"
+        table_html = dataframe.to_html(escape=False, index=False,justify = 'left')
+     
+        #table_html = table_html.replace("<thead>", '<thead align="left">')  # left-align the headers
         return table_html,dataframe,dataframe.empty
     else: 
         html = """<div style="color: green">
@@ -107,71 +104,59 @@ RL_DETAILS ={'CarRacing-v0':{'title':" The Car Racing 🏎️ Leaderboard 🚀",
             }
 
 
-def reload_leaderboard(rl_env):
-    #import pdb;pdb.set_trace()
-    global RL_DETAILS
-    RL_DETAILS[rl_env]['data'] = get_data_per_env(rl_env)
-  
-    data_html,data_dataframe,is_empty = RL_DETAILS[rl_env]['data'] 
-                
+def get_info_display(len_dataframe,env_name,name_leaderboard,is_empty):
     if not is_empty:
         markdown = """
-        # {name_leaderboard}
-
-        This is a leaderboard of **{len_dataframe}** agents playing {env_name} 👩‍🚀.
-
-        We use lower bound result to sort the models: mean_reward - std_reward.
-
-        You can click on the model's name to be redirected to its model card which includes documentation.
-
-        You want to try your model? Read this [Unit 1](https://github.com/huggingface/deep-rl-class/blob/Unit1/unit1/README.md) of Deep Reinforcement Learning Class.
-
-
-        """.format(len_dataframe = len(data_dataframe),env_name = rl_env,name_leaderboard =  RL_DETAILS[rl_env]['title'])
+        <div class='infoPoint'>
+        <h1> {name_leaderboard} </h1>
+        <br>
+        <p> This is a leaderboard of <b>{len_dataframe}</b> agents playing {env_name} 👩‍🚀. </p>
+        <br>
+        <p> We use lower bound result to sort the models: mean_reward - std_reward. </p>
+        <br>    
+        <p> You can click on the model's name to be redirected to its model card which includes documentation. </p>
+        <br>
+        <p> You want to try your model? Read this <a href="https://github.com/huggingface/deep-rl-class/blob/Unit1/unit1/README.md" target="_blank">Unit 1</a> of Deep Reinforcement Learning Class.
+        </p>
+        </div>
+        """.format(len_dataframe = len_dataframe,env_name = env_name,name_leaderboard = name_leaderboard)
 
     else:
         markdown = """
-        # {name_leaderboard}                   
-        """.format(name_leaderboard =  RL_DETAILS[rl_env]['title'])
+        <div class='infoPoint'>
+        <h1> {name_leaderboard} </h1>
+        <br>
+        </div>                  
+        """.format(name_leaderboard =  name_leaderboard)
+    return markdown    
+
+def reload_leaderboard(rl_env):
+    global RL_DETAILS
+    RL_DETAILS[rl_env]['data'] = get_data_per_env(rl_env)
+  
+    data_html,data_dataframe,is_empty = RL_DETAILS[rl_env]['data'] 
+    data_html = data_html.replace('thead align="left"', '<thead align="left" style="color:red">')  # left-align the headers
 
+    markdown = get_info_display(len(data_dataframe),rl_env,RL_DETAILS[rl_env]['title'],is_empty)            
+    
     return markdown,data_html     
             
-                       
-
+with open('app.css','r') as f:
+    BLOCK_CSS = f.read() 
 
-block = gr.Blocks()
+block = gr.Blocks(css=BLOCK_CSS)
 with block:
     
     with gr.Tabs():
         for rl_env in RL_ENVS:
             with gr.TabItem(rl_env):
                 data_html,data_dataframe,is_empty = RL_DETAILS[rl_env]['data'] 
-                
-                if not is_empty:
-                    markdown = """
-                    # {name_leaderboard}
-
-                    This is a leaderboard of **{len_dataframe}** agents playing {env_name} 👩‍🚀.
-
-                    We use lower bound result to sort the models: mean_reward - std_reward.
-
-                    You can click on the model's name to be redirected to its model card which includes documentation.
-
-                    You want to try your model? Read this [Unit 1](https://github.com/huggingface/deep-rl-class/blob/Unit1/unit1/README.md) of Deep Reinforcement Learning Class.
-
-
-                    """.format(len_dataframe = len(data_dataframe),env_name = rl_env,name_leaderboard =  RL_DETAILS[rl_env]['title'])
-
-                else:
-                    markdown = """
-                    # {name_leaderboard}                   
-                    """.format(name_leaderboard =  RL_DETAILS[rl_env]['title'])
-
+                markdown = get_info_display(len(data_dataframe),rl_env,RL_DETAILS[rl_env]['title'],is_empty)            
                 reload = gr.Button('Reload Leaderboard')
-                #env_state = gr.State(rl_env)    
-                output_markdown = gr.Markdown(markdown)
+                env_state =gr.Variable(default_value=rl_env)  
+                output_markdown = gr.HTML(markdown)
                 output_html = gr.HTML(data_html)
-                reload.click(reload_leaderboard,inputs=[rl_env],outputs=[output_markdown,output_html])
+                reload.click(reload_leaderboard,inputs=[env_state],outputs=[output_markdown,output_html])
             
 
 block.launch()