From 892aaee108e4b4e19c42375a79af057fc56e4dad Mon Sep 17 00:00:00 2001
From: ygtangg <ygtang04@gmail.com>
Date: Tue, 10 Dec 2024 23:59:49 +0000
Subject: [PATCH] added visualizer option

---
 fastchat/serve/gradio_web_server.py       | 43 -----------------
 fastchat/serve/gradio_web_server_multi.py | 58 +++++++++++++++++++++--
 2 files changed, 54 insertions(+), 47 deletions(-)

diff --git a/fastchat/serve/gradio_web_server.py b/fastchat/serve/gradio_web_server.py
index db5cf3a56..f847b7ed9 100644
--- a/fastchat/serve/gradio_web_server.py
+++ b/fastchat/serve/gradio_web_server.py
@@ -792,49 +792,6 @@ def get_model_description_md(models):
     return model_description_md
 
 
-def build_visualizer():
-    visualizer_markdown = """
-    # 🧭 Arena Visualizer
-    Data explorer provides interactive tools to explore and draw insights from our leaderboard data. 
-    """
-
-    gr.Markdown(visualizer_markdown, elem_id="visualizer_markdown")
-
-    with gr.Tabs():
-        with gr.Tab("Topic Explorer", id=0):
-            topic_markdown = """
-            ## *Welcome to the Topic Explorer*
-            This tool lets you dive into user-submitted prompts, organized into general 
-            categories and detailed subcategories. Using the sunburst chart, you can easily 
-            explore the data and understand how different topics are distributed.
-
-            ### How to Use:
-            - Hover Over Segments: View the category name, the number of prompts, and their percentage.
-            - 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.
-
-            Start exploring and discover interesting trends in the data!
-            
-            """
-            gr.Markdown(topic_markdown)
-
-            frame = """
-                <iframe width="100%" scrolling="no" style="height: 800px; border: 1px solid lightgrey; border-radius: 10px;" 
-                        src="https://storage.googleapis.com/public-arena-no-cors/index.html">
-                </iframe>
-            """
-            gr.HTML(frame)
-
-        with gr.Tab("Price Analysis", id=1):
-            price_markdown = """
-            ## *Price Control Data Visualizations*
-            Below are scatter-plots depicting a model's arena score against its cost effectiveness 
-            and output token price.
-            """
-            gr.Markdown(price_markdown)
-
 
 def build_about():
     about_markdown = """
diff --git a/fastchat/serve/gradio_web_server_multi.py b/fastchat/serve/gradio_web_server_multi.py
index 99f94c12a..bb365a77d 100644
--- a/fastchat/serve/gradio_web_server_multi.py
+++ b/fastchat/serve/gradio_web_server_multi.py
@@ -37,7 +37,6 @@
     set_global_vars,
     block_css,
     build_single_model_ui,
-    build_visualizer,
     build_about,
     get_model_list,
     load_demo_single,
@@ -55,6 +54,50 @@
 logger = build_logger("gradio_web_server_multi", "gradio_web_server_multi.log")
 
 
+def build_visualizer():
+    visualizer_markdown = """
+    # 🧭 Arena Visualizer
+    Data explorer provides interactive tools to explore and draw insights from our leaderboard data. 
+    """
+
+    gr.Markdown(visualizer_markdown, elem_id="visualizer_markdown")
+
+    with gr.Tabs():
+        with gr.Tab("Topic Explorer", id=0):
+            topic_markdown = """
+            ## *Welcome to the Topic Explorer*
+            This tool lets you dive into user-submitted prompts, organized into general 
+            categories and detailed subcategories. Using the sunburst chart, you can easily 
+            explore the data and understand how different topics are distributed.
+
+            ### How to Use:
+            - Hover Over Segments: View the category name, the number of prompts, and their percentage.
+            - 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.
+
+            Start exploring and discover interesting trends in the data!
+            
+            """
+            gr.Markdown(topic_markdown)
+
+            frame = """
+                <iframe width="100%" scrolling="no" style="height: 800px; border: 1px solid lightgrey; border-radius: 10px;" 
+                        src="https://storage.googleapis.com/public-arena-no-cors/index.html">
+                </iframe>
+            """
+            gr.HTML(frame)
+
+        with gr.Tab("Price Analysis", id=1):
+            price_markdown = """
+            ## *Price Control Data Visualizations*
+            Below are scatter-plots depicting a model's arena score against its cost effectiveness 
+            and output token price.
+            """
+            gr.Markdown(price_markdown)
+
+
 def load_demo(context: Context, request: gr.Request):
     ip = get_ip(request)
     logger.info(f"load_demo. ip: {ip}. params: {request.query_params}")
@@ -200,9 +243,10 @@ def build_demo(
                         arena_hard_table,
                         show_plot=True,
                     )
-
-            with gr.Tab("🔍 Data Visualizer", id=5):
-                build_visualizer()
+                    
+            if args.show_visualizer:
+                with gr.Tab("🔍 Data Visualizer", id=5):
+                    build_visualizer()
 
             with gr.Tab("ℹ️ About Us", id=4):
                 about = build_about()
@@ -309,6 +353,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}")