update

pages/leaderboard.py

@@ -1,49 +1,11 @@
+import pandas as pd
+import html
 import json
-
 import gradio as gr
-import pandas as pd
 
-from pages.summarization_playground import custom_css
-
-css = '''
-.tooltip-wrapper {
-    position: relative;
-    display: inline-block;
-    border-bottom: 1px dotted black;
-}
-
-.tooltip-wrapper .tooltip {
-    visibility: hidden;
-    width: 300px; /* Increased width */
-    background-color: black;
-    color: #fff;
-    text-align: left; /* Changed to left align */
-    border-radius: 6px;
-    padding: 5px;
-    position: absolute;
-    z-index: 1;
-    bottom: 125%;
-    left: 50%;
-    margin-left: -150px; /* Half of the width */
-    opacity: 0;
-    transition: opacity 0.3s;
-    white-space: pre-wrap; /* Allow text wrapping */
-    word-wrap: break-word; /* Break long words if necessary */
-}
-
-.tooltip-wrapper:hover .tooltip {
-    visibility: visible;
-    opacity: 1;
-}
-'''
-
-def create_html_with_tooltip(text, tooltip):
-    return f'''
-    <div class="tooltip-wrapper">
-        {text}
-        <span class="tooltip">{tooltip}</span>
-    </div>
-    '''
+def create_html_with_tooltip(id, prompt):
+    escaped_prompt = html.escape(prompt.replace("\n", "<br />"))
+    return f'<span class="tooltip" data-id="{id}" data-prompt="{escaped_prompt}">{id}</span>'
 
 with open("prompt/prompt.json", "r") as file:
     json_data = file.read()
@@ -53,11 +15,10 @@ winning_rate = [prompt['metric']['winning_number'] for prompt in prompts]
 winning_rate = [num / sum(winning_rate) for num in winning_rate]
 data = {
     'Rank': [i+1 for i in range(len(prompts))],
-    'Methods': [create_html_with_tooltip(prompt['id'], prompt['prompt']) for prompt in prompts],
+    'Methods': [create_html_with_tooltip(prompt['id'], prompt['prompt'].replace("\n","<br />")) for prompt in prompts],
     'Rouge Score': [prompt['metric']['Rouge'] for prompt in prompts],
     'Winning Rate': winning_rate,
     'Authors': [prompt['author'] for prompt in prompts],
-    'Prompts': [prompt['prompt'] for prompt in prompts]
 }
 
 df = pd.DataFrame(data)
@@ -69,35 +30,59 @@ medals = ['🏅', '🥈', '🥉']
 for i in range(3):
     df.loc[i, 'Authors'] = f"{medals[i]} {df.loc[i, 'Authors']}"
 
+def create_html_with_tooltip(id, prompt):
+    escaped_prompt = html.escape(prompt.replace("\n", "<br />"))
+    return f'<span class="tooltip" data-id="{id}" data-prompt="{escaped_prompt}">{id}</span>'
+
 def update_leaderboard(sort_by):
     sorted_df = df.sort_values(by=sort_by, ascending=False, ignore_index=True)
     sorted_df['Rank'] = range(1, len(sorted_df) + 1)
-
+    
     # Convert DataFrame to HTML with clickable headers for sorting and without escaping
-    html = sorted_df.to_html(index=False, escape=False)
-
+    table_html = sorted_df.to_html(index=False, escape=False)
+    
     # Add sorting links to column headers
     for column in sorted_df.columns:
-        html = html.replace(f'<th>{column}</th>', 
+        table_html = table_html.replace(f'<th>{column}</th>', 
                             f'<th><a href="#" onclick="sortBy(\'{column}\'); return false;">{column}</a></th>')
-
-    return html
+    
+    # Load the HTML template
+    with open('pages/leaderboard_template.html', 'r') as file:
+        template = file.read()
+    
+    # Create the sortBy function in JavaScript
+    sort_by_function = f"""
+    function sortBy(column) {{
+        const gradioEl = document.querySelector('gradio-app');
+        const dropdown = gradioEl.querySelector('select');
+        dropdown.value = column;
+        dropdown.dispatchEvent(new Event('change'));
+    }}
+    """
+    
+    # Insert the table HTML and sortBy function into the template
+    full_html = template.replace('<div id="leaderboard-container"></div>', 
+                                 f'<div id="leaderboard-container">{table_html}</div>')
+    full_html = full_html.replace('// This function will be implemented in Python and injected here', 
+                                  sort_by_function)
+    
+    return full_html
 
 def create_leaderboard():
-    with gr.Blocks(css=css) as demo:
+    with gr.Blocks(css="""
+        .tooltip { cursor: pointer; color: blue; text-decoration: underline; }
+    """) as demo:
         gr.Markdown("# 🏆 Summarization Arena Leaderboard")
-
         with gr.Row():
             gr.Markdown("[Blog](placeholder) | [GitHub](placeholder) | [Paper](placeholder) | [Dataset](placeholder) | [Twitter](placeholder) | [Discord](placeholder)")
-
         gr.Markdown("Welcome to our open platform for evaluating LLM summarization capabilities. We use the DATASET_NAME_PLACEHOLDER dataset to generate summaries with Qwen2-1.5b. These summaries are then evaluated by Rouge and Winning Rate from the arena")
-
         sort_by = gr.Dropdown(list(df.columns), label="Sort by", value="Rouge Score")
-
         gr.Markdown("**Performance**\n\n**methods**: 5,   **questions**: 15")
-
         leaderboard = gr.HTML(update_leaderboard("Rouge Score"), elem_id="leaderboard")
-
         sort_by.change(update_leaderboard, inputs=[sort_by], outputs=[leaderboard])
+    return demo
+
 
-    return demo
+if __name__ == "__main__":
+    demo = create_leaderboard()
+    demo.launch()

pages/leaderboard_template.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Summarization Arena Leaderboard</title>
+    <style>
+        .tooltip {
+            cursor: pointer;
+            color: blue;
+            text-decoration: underline;
+        }
+        table {
+            border-collapse: collapse;
+            width: 100%;
+        }
+        th, td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+        th {
+            background-color: #f2f2f2;
+        }
+        #prompt-display {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="leaderboard-container"></div>
+    <div id="prompt-display">
+        <h2 id="prompt-title"></h2>
+        <pre id="prompt-content"></pre>
+        <button onclick="showLeaderboard()">Back to Leaderboard</button>
+    </div>
+
+    <script>
+        function sortBy(column) {
+            // This function will be implemented in Python and injected here
+        }
+
+        function showPrompt(id, prompt) {
+            document.getElementById('leaderboard-container').style.display = 'none';
+            document.getElementById('prompt-display').style.display = 'block';
+            document.getElementById('prompt-title').textContent = 'Prompt for ' + id;
+            document.getElementById('prompt-content').textContent = prompt;
+        }
+
+        function showLeaderboard() {
+            document.getElementById('leaderboard-container').style.display = 'block';
+            document.getElementById('prompt-display').style.display = 'none';
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const leaderboardContainer = document.getElementById('leaderboard-container');
+            leaderboardContainer.addEventListener('click', function(event) {
+                if (event.target.classList.contains('tooltip')) {
+                    const id = event.target.getAttribute('data-id');
+                    const prompt = event.target.getAttribute('data-prompt');
+                    showPrompt(id, prompt);
+                }
+            });
+        });
+    </script>
+</body>
+</html>