Update app.py

app.py

@@ -40,8 +40,7 @@ def write_pgn(
     utc_time = current_utc_datetime.strftime("%H:%M:%S")
 
     # Output the final PGN with CLKS and additional details
-    final_pgn = f"""
-[Event 'Chess LLM Arena']
+    final_pgn = f"""[Event 'Chess LLM Arena']
 [Site 'https://github.com/mlabonne/chessllm']
 [Date '{utc_date}']
 [White '{model_id_white}']
@@ -106,7 +105,7 @@ def render_init(board):
     new_width = 3 * width
     
     # Create a new blank image with the desired dimensions
-    new_image = PILImage.new('RGB', (new_width, height), 'white')
+    new_image = PILImage.new('RGB', (width, height), 'white')
     
     # Calculate the position to paste the chess board image
     left = width  # One third of the width
@@ -129,7 +128,7 @@ def render_new(board):
     new_width = 3 * width
     
     # Create a new blank image with the desired dimensions
-    new_image = PILImage.new('RGB', (new_width, height), 'white')
+    new_image = PILImage.new('RGB', (width, height), 'white')
     
     # Calculate the position to paste the chess board image
     left = width  # One third of the width
@@ -451,7 +450,8 @@ with gr.Blocks(theme=gr.themes.Monochrome()) as demo:
         model_id_black = gr.Textbox(label="Black Model ID", value="EleutherAI/pythia-70m-deduped")
     btn = gr.Button("Fight!")
     with gr.Row():
-        out = gr.Image(width=256, show_label=False, show_share_button=False, show_download_button=False)
+        gr.HTML("""<div id='chessboard' style='display:block; margin-left: auto; margin-right: auto></div>""")
+        out = gr.Image(width=512, show_label=False, show_share_button=False, show_download_button=False, elem_id="chessboard")
     btn.click(fn=update, inputs=[model_id_white, model_id_black], outputs=out)
     gr.Markdown('<div align="center"><p style="font-size: 36px;">🏆 Leaderboard</p></div>')
     leaderboard = gr.Dataframe(value=get_leaderboard, every=60)