add emoji

app.py

@@ -97,13 +97,13 @@ def sample_explore_item(model_name, size_H, size_W):
         return "No item found", "No item found", "No item found", "No item found"
     model_name = explore_item['Model']
     example_id = explore_item['id']
-    puzzle_md = f"### Puzzle [{example_id}]:\n\n" + explore_item['puzzle'].replace("## Clues", "### Clues").replace("\n", "<br>")
-    model_reasoning_md = f"### {model_name}'s Reasoning:\n\n {explore_item['reasoning']}"
-    model_prediction_md = f"### {model_name}'s Prediction:\n\n {str(explore_item['solution']).replace('___', 'null')}" + \
-                                        "\n\n" + explore_item['solution_table_md']
+    puzzle_md = f"### 🦓 Puzzle [{example_id}]:\n\n" + explore_item['puzzle'].replace("## Clues:", "### **Clues:**").replace("\n", "<br>")
+    model_reasoning_md = f"### 🤖 Reasoning of {model_name}:\n\n {explore_item['reasoning']}"
+    model_prediction_md = f"### 💬 Answer of {model_name}:\n\n**Json format:** {str(explore_item['solution']).replace('___', 'null')}" + \
+                                        "\n\n**Table format:**\n" + explore_item['solution_table_md']
     puzzle_solved = explore_item['correct_cells'] == explore_item['total_cells']
     cell_acc = explore_item["correct_cells"] / explore_item["total_cells"] * 100
-    model_eval_md = f"### Evaluation:\n\n  **Total Cells**: {explore_item['total_cells']} | **Correct Cells**: {explore_item['correct_cells']} | **Puzzle solved**: {puzzle_solved} | **Cell Acc**: {cell_acc:.2f}%"
+    model_eval_md = f"### 🆚 Evaluation:\n\n  **Total Cells**: {explore_item['total_cells']} | **Correct Cells**: {explore_item['correct_cells']} | **Puzzle solved**: {puzzle_solved} | **Cell Acc**: {cell_acc:.2f}%"
     return puzzle_md, model_reasoning_md, model_prediction_md, model_eval_md
 
 
@@ -121,10 +121,10 @@ def _tab_explore():
             gr.Markdown("### 🚀 Click below to sample a puzzle. ⬇️ ")
             explore_button = gr.Button("🦓 Sample a Zebra Puzzle!", elem_id="explore-button")
     
-    puzzle_md = gr.Markdown("\n\nTo be loaded", elem_id="puzzle-md", elem_classes="box_md")
-    model_reasoning_md = gr.Markdown("\n\nTo be loaded", elem_id="model-reasoning-md", elem_classes="box_md")
-    model_prediction_md = gr.Markdown("\n\nTo be loaded", elem_id="model-prediction-md", elem_classes="box_md")
-    model_eval_md = gr.Markdown("\n\nTo be loaded", elem_id="model-eval-md", elem_classes="box_md")
+    puzzle_md = gr.Markdown("### 🦓 Puzzle: \n\nTo be loaded", elem_id="puzzle-md", elem_classes="box_md")
+    model_reasoning_md = gr.Markdown("### 🤖 Reasoning: \n\nTo be loaded", elem_id="model-reasoning-md", elem_classes="box_md")
+    model_prediction_md = gr.Markdown("### 💬 Answer: \n\nTo be loaded", elem_id="model-prediction-md", elem_classes="box_md")
+    model_eval_md = gr.Markdown("### 🆚 Evaluation: \n\nTo be loaded", elem_id="model-eval-md", elem_classes="box_md")
     
     explore_button.click(fn=sample_explore_item, 
                          inputs=[model_selection, size_H_selection, size_W_selection], 

constants.py

@@ -280,7 +280,7 @@ button.selected[role="tab"][aria-selected="true"] {
 .box_md{
     border: 1px solid #000000;
     border-radius: 10px;
-    padding: 5px;
+    padding: 10px;
     font-size: 12pt;
     margin: 5px;
 }