Add Data Explorer Tab (#3632)

Co-authored-by: Sophie Xie <[email protected]>

Author: ygtangg

fastchat/serve/gradio_web_server.py

@@ -722,6 +722,22 @@ def bot_response(
 .block {
   overflow-y: hidden !important;
 }
+
+.visualizer {
+    overflow: hidden;
+    height: 60vw;
+    border: 1px solid lightgrey; 
+    border-radius: 10px;
+}
+
+@media screen and (max-width: 769px) {
+    .visualizer {
+        height: 180vw;
+        overflow-y: scroll;
+        width: 100%;
+        overflow-x: hidden;
+    }
+}
 """
 
 

fastchat/serve/gradio_web_server_multi.py

@@ -4,10 +4,6 @@
 """
 
 import argparse
-import pickle
-import time
-from typing import List
-
 import gradio as gr
 
 from fastchat.serve.gradio_block_arena_anony import (
@@ -54,6 +50,36 @@
 logger = build_logger("gradio_web_server_multi", "gradio_web_server_multi.log")
 
 
+def build_visualizer():
+    visualizer_markdown = """
+    # 🔍 Arena Visualizer
+    This tool provides an interactive way to explore how people are using Chatbot Arena. 
+    Using *[topic clustering](https://github.com/MaartenGr/BERTopic)*, we organized user-submitted prompts from Arena battles into broad and specific categories. 
+    Dive in to uncover insights about the distribution and themes of these prompts!
+    """
+    gr.Markdown(visualizer_markdown, elem_id="visualizer_markdown")
+    expandText = "👇 Expand to see detailed instructions on how to use the visualizer"
+    with gr.Accordion(expandText, open=False):
+        instructions = """
+        - Hover Over Segments: View the category name, the number of prompts, and their percentage.
+            - *On mobile devices*: Tap instead of hover.
+        - Click to Explore: 
+            - Click on a main category to see its subcategories.
+            - Click on subcategories to see example prompts in the sidebar.
+        - Undo and Reset: Click the center of the chart to return to the top level.
+
+        Visualizer is created using Arena battle data collected from 2024/6 to 2024/8.
+        """
+        gr.Markdown(instructions)
+
+    frame = """
+                <iframe class="visualizer" width="100%"
+                        src="https://storage.googleapis.com/public-arena-no-cors/index.html">
+                </iframe>
+            """
+    gr.HTML(frame)
+
+
 def load_demo(context: Context, request: gr.Request):
     ip = get_ip(request)
     logger.info(f"load_demo. ip: {ip}. params: {request.query_params}")
@@ -199,12 +225,14 @@ def build_demo(
                         arena_hard_table,
                         show_plot=True,
                     )
+            if args.show_visualizer:
+                with gr.Tab("🔍 Arena Visualizer", id=5):
+                    build_visualizer()
 
             with gr.Tab("ℹ️ About Us", id=4):
-                about = build_about()
+                build_about()
 
         context_state = gr.State(context)
-        url_params = gr.JSON(visible=False)
 
         if args.model_list_mode not in ["once", "reload"]:
             raise ValueError(f"Unknown model list mode: {args.model_list_mode}")
@@ -271,7 +299,8 @@ def build_demo(
     parser.add_argument(
         "--gradio-auth-path",
         type=str,
-        help='Set the gradio authentication file path. The file should contain one or more user:password pairs in this format: "u1:p1,u2:p2,u3:p3"',
+        help='Set the gradio authentication file path. The file should contain one or \
+              more user:password pairs in this format: "u1:p1,u2:p2,u3:p3"',
         default=None,
     )
     parser.add_argument(
@@ -286,7 +315,8 @@ def build_demo(
     parser.add_argument(
         "--gradio-root-path",
         type=str,
-        help="Sets the gradio root path, eg /abc/def. Useful when running behind a reverse-proxy or at a custom URL path prefix",
+        help="Sets the gradio root path, eg /abc/def. Useful when running behind a \
+              reverse-proxy or at a custom URL path prefix",
     )
     parser.add_argument(
         "--ga-id",
@@ -305,6 +335,12 @@ def build_demo(
         type=str,
         help="Set the password for the gradio web server",
     )
+    parser.add_argument(
+        "--show-visualizer",
+        action="store_true",
+        default=False,
+        help="Show the Data Visualizer tab",
+    )
     args = parser.parse_args()
     logger.info(f"args: {args}")