Refactor Tic Tac Toe game by adding DeepSeek and OpenAI agents, updating README title, enhancing game logic, and implementing game statistics tracking.

README.md

@@ -1,5 +1,5 @@
 ---
-title: Tic Tac Toe
+title: Tic-Tac-Toe
 emoji: 😻
 colorFrom: pink
 colorTo: red

agents/deepseek_agent.py

@@ -0,0 +1,39 @@
+import os
+import logging
+from azure.ai.inference import ChatCompletionsClient
+from azure.ai.inference.models import SystemMessage, UserMessage
+from azure.core.credentials import AzureKeyCredential
+from agents.agent import Agent
+
+logging.getLogger("azure").setLevel(logging.WARNING)
+logging.getLogger("azure.core.pipeline").setLevel(logging.WARNING)
+
+
+class DeepSeekAgent(Agent):
+    name = "DeepSeek"
+    color = Agent.CYAN
+
+    def __init__(self, model_name):
+        """
+        Set up this instance
+        """
+        self.endpoint = "https://models.github.ai/inference"
+        self.token = os.environ["GITHUB_TOKEN"]
+        self.client = ChatCompletionsClient(
+            endpoint=self.endpoint,
+            credential=AzureKeyCredential(self.token),
+        )
+        self.log(f"DeepSeek agent is getting called with model: {model_name}")
+
+    def make_move(self, model_key, prompt):
+        response = self.client.complete(
+            messages=[
+                SystemMessage(
+                    content="You are a snarky Tic-Tac-Toe player who loves to mock opponents."
+                ),
+                UserMessage(content=prompt),
+            ],
+            max_tokens=1000,
+            model=model_key["value"],
+        )
+        return response.choices[0].message.content

agents/openai_agent.py

@@ -0,0 +1,33 @@
+import os
+from openai import OpenAI
+from agents.agent import Agent
+
+
+class OpenAIAgent(Agent):
+    name = "OpenAI"
+    color = Agent.GREEN
+
+    def __init__(self, model_name):
+        """
+        Set up this instance
+        """
+        self.token = os.environ["GITHUB_TOKEN"]
+        self.endpoint = "https://models.github.ai/inference"
+        self.client = OpenAI(base_url=self.endpoint, api_key=self.token)
+        self.log(f"OpenAI agent is getting called with model: {model_name}")
+
+    def make_move(self, model_key, prompt):
+        response = self.client.chat.completions.create(
+            messages=[
+                {
+                    "role": "system",
+                    "content": "You are a snarky Tic-Tac-Toe player who loves to mock opponents.",
+                },
+                {
+                    "role": "user",
+                    "content": prompt,
+                },
+            ],
+            model=model_key["value"],
+        )
+        return response.choices[0].message.content

game/logic.py

@@ -1,8 +1,11 @@
 from transformers import pipeline
-from models.registry import models        
+from models.registry import models
 from models.provider_constant import PROVIDER_CONSTANT
 from agents.ollama_agent import OllamaAgent
 from agents.google_agent import GoogleAgent
+from agents.openai_agent import OpenAIAgent
+from agents.deepseek_agent import DeepSeekAgent
+
 
 def parse_move_and_comment(text):
     """Parse 'MOVE: N' and 'COMMENT: ...' from model response."""
@@ -19,42 +22,43 @@ def parse_move_and_comment(text):
             comment = line.split(":", 1)[-1].strip()[:200]
     return move, comment or "No comment."
 
-def ask_model_for_best_move(board, player, model_name):
 
+def ask_model_for_best_move(board, player, model_name):
     grid = """
     [{0}] [{1}] [{2}]
     [{3}] [{4}] [{5}]
     [{6}] [{7}] [{8}]
-    """.format(
-        *(board[i] if board[i] is not None else "_" for i in range(9))
-    )
-
-    prompt = f"""
-    You are playing Tic-Tac-Toe as "{player}". Be snarky and competitive.
+    """.format(*(board[i] if board[i] is not None else "_" for i in range(9)))
 
-    Current board (empty cells are "_"):
-    {grid}
+    prompt = f"""You are playing Tic-Tac-Toe as "{player}". You are a strategic player.
 
-    Rules you MUST follow:
-    1. You may ONLY choose a cell that currently contains "_".
-    2. Choosing a filled cell is an INVALID MOVE and a FAILURE.
-    3. Before answering, identify all empty cell indices and pick ONE of them.
-    4. Double-check that your chosen cell is empty before replying.
+Current board state (empty cells are "_"):
+{grid}
 
-    Cell indices:
-    Top row:    0, 1, 2
-    Middle row: 3, 4, 5
-    Bottom row: 6, 7, 8
+Cell positions:
+  0 | 1 | 2
+  ----------
+  3 | 4 | 5
+  ----------
+  6 | 7 | 8
 
-    Your MOVE must be a single digit from the empty cells.
-    Do not explain your reasoning.
-    You will look foolish and stupid if you return number which is already filled.
+CRITICAL RULES:
+1. You MUST choose a cell that currently shows "_" (underscore).
+2. NEVER choose an already filled cell - this is an instant loss.
+3. Winning moves (completing 3 in a row) take PRIORITY.
+4. Blocking moves (stopping opponent's winning move) take second priority.
+5. Center cell (4) is valuable early game.
 
-    Reply with EXACTLY two lines and nothing else:
-    MOVE: <one digit from the empty cells only>
-    COMMENT: <one short snarky sentence mocking the opponent or bragging>
-    """
+STRATEGY (in priority order):
+1. If you can win in one move, take it immediately.
+2. If opponent can win next turn, block them.
+3. Take center (4) if available.
+4. Take a corner if available.
+5. Avoid giving opponent a winning setup.
 
+Reply with EXACTLY these two lines only, nothing else:
+MOVE: <cell number 0-8 from available cells only>
+COMMENT: <short competitive trash talk>"""
 
     model_key = next((model for model in models if model["name"] == model_name), None)
     if not model_key:
@@ -64,19 +68,24 @@ def ask_model_for_best_move(board, player, model_name):
 
     if model_key["provider"] == PROVIDER_CONSTANT["OLLAMA"]:
         ollama_model = OllamaAgent(model_key["name"])
-        text = ollama_model.make_move(model_key,prompt)
+        text = ollama_model.make_move(model_key, prompt)
     elif model_key["provider"] == PROVIDER_CONSTANT["GOOGLE"]:
         google_model = GoogleAgent(model_key["name"])
-        text = google_model.make_move(model_key,prompt)
+        text = google_model.make_move(model_key, prompt)
+    elif model_key["provider"] == PROVIDER_CONSTANT["OPENAI"]:
+        openai_model = OpenAIAgent(model_key["name"])
+        text = openai_model.make_move(model_key, prompt)
+    elif model_key["provider"] == PROVIDER_CONSTANT["DEEPSEEK"]:
+        deepseek_model = DeepSeekAgent(model_key["name"])
+        text = deepseek_model.make_move(model_key, prompt)
     else:
         generator = pipeline("text-generation", model=model_key["value"])
         text = generator(
             prompt,
-            max_new_tokens=20,                  # keeps answer short
-            do_sample=False,                    # reduces hallucination
+            max_new_tokens=20,
+            do_sample=False,
             pad_token_id=generator.tokenizer.eos_token_id,
         )[0]["generated_text"]
 
-    
     move, comment = parse_move_and_comment(text)
-    return move, comment
+    return move, comment

game/start_game.py

@@ -1,23 +1,32 @@
 import time
 from game.logic import ask_model_for_best_move
+from game.stats import record_game
 
 
 WIN_LINES = [
-    (0, 1, 2), (3, 4, 5), (6, 7, 8),  # rows
-    (0, 3, 6), (1, 4, 7), (2, 5, 8),  # columns
-    (0, 4, 8), (2, 4, 6),             # diagonals
+    (0, 1, 2),
+    (3, 4, 5),
+    (6, 7, 8),  # rows
+    (0, 3, 6),
+    (1, 4, 7),
+    (2, 5, 8),  # columns
+    (0, 4, 8),
+    (2, 4, 6),  # diagonals
 ]
 
+
 def check_winner(board):
     """Return 'X', 'O', or None."""
     for a, b, c in WIN_LINES:
         if board[a] and board[a] == board[b] == board[c]:
-            return board[a],(a,b,c)
-    return None,None
+            return board[a], (a, b, c)
+    return None, None
+
 
 def check_draw(board):
     return all(cell is not None for cell in board)
 
+
 def get_valid_move(board, player, model_name):
     """Get move from model; if invalid, pick first empty cell as fallback."""
     move, comment = ask_model_for_best_move(board, player, model_name)
@@ -28,6 +37,7 @@ def get_valid_move(board, player, model_name):
             return i, comment
     return None, comment
 
+
 def play_full_game(board_state, current_player_move, model_1_name, model_2_name):
     board = list(board_state) if board_state else [None] * 9
     current = current_player_move
@@ -49,7 +59,7 @@ def play_full_game(board_state, current_player_move, model_1_name, model_2_name)
             model_2_comment = comment
 
         board[move] = current
-        winner,winning_line = check_winner(board)
+        winner, winning_line = check_winner(board)
         if winner:
             status = f"{winner} wins! ({model})"
             game_over = True
@@ -57,11 +67,11 @@ def play_full_game(board_state, current_player_move, model_1_name, model_2_name)
             status = "Draw! No winner."
             game_over = True
         else:
-            status = f"{model} played at position {move+1}."
+            status = f"{model} played at position {move + 1}."
             game_over = False
 
         next_player = "O" if current == "X" else "X"
-        
+
         button_values = []
         for i in range(9):
             if board[i] is None:
@@ -72,11 +82,23 @@ def play_full_game(board_state, current_player_move, model_1_name, model_2_name)
                 button_values.append(board[i])
 
         # yield after *every* move
-        yield (status, board, next_player, *button_values, model_1_comment, model_2_comment)
+        yield (
+            status,
+            board,
+            next_player,
+            *button_values,
+            model_1_comment,
+            model_2_comment,
+        )
 
         if game_over:
             break
 
         time.sleep(5)  # wait 5 seconds before next move
 
-        current = next_player
+        current = next_player
+
+    if winner:
+        record_game(winner, model_1_name, model_2_name)
+    else:
+        record_game("Draw", model_1_name, model_2_name)

game/stats.json

@@ -0,0 +1,135 @@
+{
+  "leaderboard": {
+    "Gemini-2.5 flash": 6,
+    "GPT-4.1 nano": 2,
+    "GPT-4o": 1,
+    "Gemini-2.5 flash lite": 2,
+    "DeepSeek-V3": 1,
+    "GPT-4.1 mini": 1
+  },
+  "matchups": {
+    "Gemini-2.5 flash vs Gemini-2.5 flash lite": {
+      "X_wins": 2,
+      "O_wins": 0,
+      "draws": 0
+    },
+    "Gemini-2.5 flash lite vs Gemini-2.5 flash": {
+      "X_wins": 0,
+      "O_wins": 1,
+      "draws": 0
+    },
+    "GPT-4.1 vs Gemini-2.5 flash": {
+      "X_wins": 0,
+      "O_wins": 1,
+      "draws": 0
+    },
+    "GPT-4.1 mini vs GPT-4.1 nano": {
+      "X_wins": 0,
+      "O_wins": 2,
+      "draws": 0
+    },
+    "DeepSeek-R1 vs DeepSeek-V3": {
+      "X_wins": 0,
+      "O_wins": 0,
+      "draws": 1
+    },
+    "Gemini-2.5 flash vs DeepSeek-R1": {
+      "X_wins": 1,
+      "O_wins": 0,
+      "draws": 0
+    },
+    "GPT-4.1 nano vs Gemini-2.5 flash": {
+      "X_wins": 0,
+      "O_wins": 1,
+      "draws": 0
+    },
+    "Gemini-2.5 flash lite vs GPT-4o": {
+      "X_wins": 1,
+      "O_wins": 1,
+      "draws": 0
+    },
+    "Gemini-2.5 flash lite vs GPT-4.1 mini": {
+      "X_wins": 1,
+      "O_wins": 0,
+      "draws": 0
+    },
+    "DeepSeek-V3 vs GPT-4.1 nano": {
+      "X_wins": 1,
+      "O_wins": 0,
+      "draws": 0
+    },
+    "GPT-4.1 mini vs GPT-4o": {
+      "X_wins": 1,
+      "O_wins": 0,
+      "draws": 0
+    },
+    "GPT-4.1 nano vs GPT-4o": {
+      "X_wins": 0,
+      "O_wins": 0,
+      "draws": 1
+    }
+  },
+  "total_games": 14,
+  "game_history": [
+    {
+      "timestamp": "2026-03-18T18:25:00",
+      "model_x": "DeepSeek-R1",
+      "model_o": "DeepSeek-V3",
+      "winner": "Draw"
+    },
+    {
+      "timestamp": "2026-03-18T18:30:00",
+      "model_x": "Gemini-2.5 flash",
+      "model_o": "DeepSeek-R1",
+      "winner": "X"
+    },
+    {
+      "timestamp": "2026-03-19T00:53:53.714735",
+      "model_x": "Gemini-2.5 flash",
+      "model_o": "Gemini-2.5 flash lite",
+      "winner": "X"
+    },
+    {
+      "timestamp": "2026-03-19T01:07:46.372107",
+      "model_x": "GPT-4.1 nano",
+      "model_o": "Gemini-2.5 flash",
+      "winner": "O"
+    },
+    {
+      "timestamp": "2026-03-19T01:08:35.941844",
+      "model_x": "Gemini-2.5 flash lite",
+      "model_o": "GPT-4o",
+      "winner": "O"
+    },
+    {
+      "timestamp": "2026-03-19T01:09:30.275028",
+      "model_x": "Gemini-2.5 flash lite",
+      "model_o": "GPT-4o",
+      "winner": "X"
+    },
+    {
+      "timestamp": "2026-03-19T01:11:01.137755",
+      "model_x": "Gemini-2.5 flash lite",
+      "model_o": "GPT-4.1 mini",
+      "winner": "X"
+    },
+    {
+      "timestamp": "2026-03-19T01:14:38.001316",
+      "model_x": "DeepSeek-V3",
+      "model_o": "GPT-4.1 nano",
+      "winner": "X"
+    },
+    {
+      "timestamp": "2026-03-19T01:19:46.735939",
+      "model_x": "GPT-4.1 mini",
+      "model_o": "GPT-4o",
+      "winner": "X"
+    },
+    {
+      "timestamp": "2026-03-19T01:24:48.844413",
+      "model_x": "GPT-4.1 nano",
+      "model_o": "GPT-4o",
+      "winner": "Draw"
+    }
+  ]
+}

game/stats.py

@@ -0,0 +1,74 @@
+import json
+from pathlib import Path
+from datetime import datetime
+
+STATS_FILE = Path(__file__).parent / "stats.json"
+
+
+def load_stats():
+    if STATS_FILE.exists():
+        with open(STATS_FILE) as f:
+            return json.load(f)
+    return {"leaderboard": {}, "matchups": {}, "total_games": 0, "game_history": []}
+
+
+def save_stats(stats):
+    with open(STATS_FILE, "w") as f:
+        json.dump(stats, f, indent=2)
+
+
+def record_game(winner, model_x, model_o):
+    stats = load_stats()
+
+    matchup_key = f"{model_x} vs {model_o}"
+    if matchup_key not in stats["matchups"]:
+        stats["matchups"][matchup_key] = {"X_wins": 0, "O_wins": 0, "draws": 0}
+
+    if winner == "X":
+        stats["matchups"][matchup_key]["X_wins"] += 1
+        stats["leaderboard"][model_x] = stats["leaderboard"].get(model_x, 0) + 1
+    elif winner == "O":
+        stats["matchups"][matchup_key]["O_wins"] += 1
+        stats["leaderboard"][model_o] = stats["leaderboard"].get(model_o, 0) + 1
+    else:
+        stats["matchups"][matchup_key]["draws"] += 1
+
+    game_record = {
+        "timestamp": datetime.now().isoformat(),
+        "model_x": model_x,
+        "model_o": model_o,
+        "winner": winner,
+    }
+    stats.setdefault("game_history", [])
+    stats["game_history"].append(game_record)
+    stats["game_history"] = stats["game_history"][-10:]
+
+    stats["total_games"] = stats.get("total_games", 0) + 1
+
+    save_stats(stats)
+
+
+def get_leaderboard_data():
+    stats = load_stats()
+    leaderboard = stats.get("leaderboard", {})
+    return [
+        [model, wins]
+        for model, wins in sorted(leaderboard.items(), key=lambda x: x[1], reverse=True)
+    ]
+
+
+def get_total_games():
+    stats = load_stats()
+    return stats.get("total_games", 0)
+
+
+def get_last_10_games():
+    stats = load_stats()
+    history = stats.get("game_history", [])[-10:]
+    result = []
+    for game in reversed(history):
+        winner_label = game["winner"] if game["winner"] in ("X", "O") else "Draw"
+        result.append(
+            f"{game['model_x']} (X) vs {game['model_o']} (O) → {winner_label}"
+        )
+    return result

models/provider_constant.py

@@ -7,4 +7,6 @@ PROVIDER_CONSTANT = {
     "MISTRAL": "mistral",
     "HUGGINGFACE": "huggingface",
     "QWEN": "qwen",
-}
+    "OPENAI": "openai",
+    "DEEPSEEK": "deepseek",
+}

models/registry.py

@@ -1,9 +1,50 @@
 from models.provider_constant import PROVIDER_CONSTANT
 
 models = [
-    {"name": "Llama-3.2", "value": "llama3.2:latest", "provider": PROVIDER_CONSTANT["OLLAMA"]},
-    {"name": "Gemini-2.5 flash", "value": "gemini-2.5-flash", "provider": PROVIDER_CONSTANT["GOOGLE"]},
-    {"name": "Gemini-2.5 flash lite", "value": "gemini-2.5-flash-lite", "provider": PROVIDER_CONSTANT["GOOGLE"]},
+    # {"name": "Llama-3.2", "value": "llama3.2:latest", "provider": PROVIDER_CONSTANT["OLLAMA"]},
+    {
+        "name": "Gemini-2.5 flash",
+        "value": "gemini-2.5-flash",
+        "provider": PROVIDER_CONSTANT["GOOGLE"],
+    },
+    {
+        "name": "Gemini-2.5 flash lite",
+        "value": "gemini-2.5-flash-lite",
+        "provider": PROVIDER_CONSTANT["GOOGLE"],
+    },
+    {
+        "name": "GPT-4.1",
+        "value": "openai/gpt-4.1",
+        "provider": PROVIDER_CONSTANT["OPENAI"],
+    },
+    {
+        "name": "GPT-4.1 mini",
+        "value": "openai/gpt-4.1-mini",
+        "provider": PROVIDER_CONSTANT["OPENAI"],
+    },
+    {
+        "name": "GPT-4.1 nano",
+        "value": "openai/gpt-4.1-nano",
+        "provider": PROVIDER_CONSTANT["OPENAI"],
+    },
+    {
+        "name": "GPT-4o",
+        "value": "openai/gpt-4o",
+        "provider": PROVIDER_CONSTANT["OPENAI"],
+    },
+    {
+        "name": "DeepSeek-R1",
+        "value": "deepseek/DeepSeek-R1",
+        "provider": PROVIDER_CONSTANT["DEEPSEEK"],
+    },
+    {
+        "name": "DeepSeek-V3",
+        "value": "deepseek/DeepSeek-V3-0324",
+        "provider": PROVIDER_CONSTANT["DEEPSEEK"],
+    },
+    # {"name": "o3", "value": "openai/o3", "provider": PROVIDER_CONSTANT["OPENAI"]},
+    # {"name": "o4-mini", "value": "openai/o4-mini", "provider": PROVIDER_CONSTANT["OPENAI"]},
+    # {"name": "o3-mini", "value": "openai/o3-mini", "provider": PROVIDER_CONSTANT["OPENAI"]},
     # {"name": "Deepseek-r1:8b", "value": "deepseek-r1:8b", "provider": PROVIDER_CONSTANT["OLLAMA"]},
     # {"name": "TinyLlama-1.1B-Chat", "value": "TinyLlama/TinyLlama-1.1B-Chat-v1.0", "provider": PROVIDER_CONSTANT["TINYLLAMA"]},
     # {"name": "Gemma-2-2B", "value": "google/gemma-2-2b", "provider": PROVIDER_CONSTANT["GOOGLE"]},
@@ -11,4 +52,4 @@ models = [
     # {"name": "Qwen2-0.5B-Instruct", "value": "Qwen/Qwen2-0.5B-Instruct", "provider": PROVIDER_CONSTANT["QWEN"]},
     # {"name": "SmolLM-360M-Instruct", "value": "HuggingFaceTB/SmolLM-360M-Instruct", "provider": PROVIDER_CONSTANT["HUGGINGFACE"]},
     # {"name": "Mistral-7B-Instruct", "value": "mistralai/Mistral-7B-Instruct-v0.2", "provider": PROVIDER_CONSTANT["MISTRAL"]},
-]
+]

requirements.txt

@@ -7,6 +7,9 @@ annotated-doc==0.0.4
 annotated-types==0.7.0
 ansi2html==1.9.2
 anthropic==0.76.0
+altair
+azure-ai-inference
+azure-core
 anyio==4.12.1
 appnope==0.1.4
 asttokens==3.0.1
@@ -59,7 +62,6 @@ google-auth-httplib2==0.3.0
 google-genai==1.60.0
 google-generativeai==0.8.6
 googleapis-common-protos==1.72.0
-gradio==6.4.0
 gradio-client==2.0.3
 groovy==0.1.2
 grpcio==1.76.0

ui/bindings.py

@@ -1,5 +1,6 @@
 from game.start_game import play_full_game
 
+
 def bind_events(
     start_button,
     reset_button,
@@ -10,32 +11,34 @@ def bind_events(
     current_player_move,
     board_buttons,
     model_1_comment,
-    model_2_comment
+    model_2_comment,
+    total_games_html=None,
+    last_games_html=None,
+    leaderboard_plot=None,
+    refresh_leaderboard=None,
 ):
-
     start_button.click(
         fn=play_full_game,
         inputs=[board_state, current_player_move, model_1_dropdown, model_2_dropdown],
-        outputs=[status_text, board_state, current_player_move] + flatten_buttons(board_buttons) + [model_1_comment, model_2_comment]
+        outputs=[status_text, board_state, current_player_move]
+        + flatten_buttons(board_buttons)
+        + [model_1_comment, model_2_comment],
+    ).then(
+        fn=refresh_leaderboard,
+        outputs=[total_games_html, last_games_html, leaderboard_plot],
     )
 
-
     def reset_game():
-        return (
-            "Click 'Start Game' to begin!",
-            [None] * 9,
-            "X",  # default current_player_move
-            *[" "]*9
-        )
+        return ("Click 'Start Game' to begin!", [None] * 9, "X", *[" "] * 9)
 
     reset_button.click(
         fn=reset_game,
         inputs=[],
-        outputs=[status_text, board_state, current_player_move] + flatten_buttons(board_buttons)
+        outputs=[status_text, board_state, current_player_move]
+        + flatten_buttons(board_buttons),
     )
 
 
-# Helper to unpack UI buttons as flat array
 def flatten_buttons(board_buttons):
-    """ Convert 3x3 → 1x9 """
+    """Convert 3x3 → 1x9"""
     return [btn for row in board_buttons for btn in row]

ui/components.py

@@ -1,13 +1,70 @@
 import gradio as gr
+import altair as alt
+import pandas as pd
 from models.registry import models
 from ui.bindings import bind_events
+from game.stats import get_leaderboard_data, get_total_games, get_last_10_games
 
 model_choices = [model["name"] for model in models]
 
+
+def create_leaderboard_chart():
+    data = get_leaderboard_data()
+    if not data:
+        return None
+    df = pd.DataFrame(data, columns=["Model", "Wins"])
+    chart = (
+        alt.Chart(df)
+        .mark_bar(color="#4c78a8")
+        .encode(
+            x=alt.X("Wins:Q", title="Total Wins"),
+            y=alt.Y("Model:N", sort="-x", title="Model"),
+            tooltip=["Model:N", "Wins:Q"],
+        )
+        .properties(title="Model Wins Leaderboard", width=400, height=200)
+    )
+    return chart
+
+
+def format_total_games():
+    total = get_total_games()
+    return f"<p style='margin-bottom:10px;color:#333;'><b>Total Games: {total}</b></p>"
+
+
+def format_last_games():
+    games = get_last_10_games()
+    if not games:
+        return "<p style='color:#666;'>No games played yet</p>"
+
+    html = "<div style='font-size:13px;'>"
+    for i, game in enumerate(games, 1):
+        html += f"<p style='margin:5px 0;padding:5px;background:#f5f5f5;border-radius:4px;color:#333;'>{i}. {game}</p>"
+    html += "</div>"
+    return html
+
+
+def refresh_leaderboard():
+    return format_total_games(), format_last_games(), create_leaderboard_chart()
+
+
 def create_ui():
     with gr.Blocks(css=open("ui/styles.css").read()) as demo:
         gr.Markdown("# 🎲 Tic-Tac-Toe Game")
 
+        leaderboard_btn = gr.Button("🏆 Leaderboard", variant="secondary", size="sm")
+
+        with gr.Row(visible=False) as leaderboard_row:
+            with gr.Column(scale=1):
+                total_games_html = gr.HTML(value=format_total_games)
+                gr.Markdown("### 🏅 Last 10 Games")
+                last_games_html = gr.HTML(value=format_last_games)
+            with gr.Column(scale=1):
+                gr.Markdown("### 📊 Wins Leaderboard")
+                leaderboard_plot = gr.Plot(value=create_leaderboard_chart)
+
+        def toggle_leaderboard(visible):
+            return gr.Row(visible=not visible)
+
         with gr.Row():
             with gr.Column(scale=1):
                 model_1_dropdown = gr.Dropdown(
@@ -27,7 +84,7 @@ def create_ui():
             with gr.Column(scale=2):
                 board_buttons = []
                 board_state = gr.State([None] * 9)
-                current_player_move = gr.State("X") 
+                current_player_move = gr.State("X")
 
                 for r in range(3):
                     row_buttons = []
@@ -37,7 +94,7 @@ def create_ui():
                                 value=" ",
                                 elem_classes=["tic-cell", "tic-btn"],
                                 elem_id=f"cell-{r}-{c}",
-                                interactive=False
+                                interactive=False,
                             )
                             row_buttons.append(btn)
                     board_buttons.append(row_buttons)
@@ -45,18 +102,18 @@ def create_ui():
                 status_text = gr.Textbox(
                     label="Game Status",
                     value="Click 'Start Game' to begin the battle!",
-                    interactive=False
+                    interactive=False,
                 )
 
-                start_button = gr.Button("Start Game",variant="primary")
-                reset_button = gr.Button("Reset Game",variant="stop")
+                start_button = gr.Button("Start Game", variant="primary")
+                reset_button = gr.Button("Reset Game", variant="stop")
 
             with gr.Column(scale=1):
                 model_2_dropdown = gr.Dropdown(
                     choices=model_choices,
                     value=models[0]["name"],
                     label="Select Model for Player 2 (O)",
-                    interactive=True
+                    interactive=True,
                 )
 
                 model_2_comment = gr.Textbox(
@@ -65,6 +122,15 @@ def create_ui():
                     interactive=False,
                     lines=3,
                 )
+
+        leaderboard_state = gr.State(False)
+
+        leaderboard_btn.click(
+            fn=toggle_leaderboard, inputs=[leaderboard_state], outputs=[leaderboard_row]
+        ).then(
+            fn=lambda x: not x, inputs=[leaderboard_state], outputs=[leaderboard_state]
+        )
+
         bind_events(
             start_button,
             reset_button,
@@ -75,7 +141,11 @@ def create_ui():
             current_player_move,
             board_buttons,
             model_1_comment,
-            model_2_comment
+            model_2_comment,
+            total_games_html,
+            last_games_html,
+            leaderboard_plot,
+            refresh_leaderboard,
         )
 
-    return demo
+    return demo