updated data visualizer UI

Author: ygtangg

fastchat/serve/gradio_web_server.py

@@ -791,7 +791,48 @@ def get_model_description_md(models):
         ct += 1
     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() as 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 = """
 # About Us

fastchat/serve/gradio_web_server_multi.py

@@ -37,6 +37,7 @@
     set_global_vars,
     block_css,
     build_single_model_ui,
+    build_visualizer,
     build_about,
     get_model_list,
     load_demo_single,
@@ -200,13 +201,8 @@ def build_demo(
                         show_plot=True,
                     )
 
-            with gr.Tab("🔍 Data Explorer", id=5):
-                frame = """
-                    <iframe width="100%" style="height: 1000px;" 
-                            src="https://storage.googleapis.com/public-arena-no-cors/index.html">
-                    </iframe>
-                """
-                gr.HTML(frame)
+            with gr.Tab("🔍 Data Visualizer", id=5):
+                build_visualizer()
 
             with gr.Tab("ℹ️ About Us", id=4):
                 about = build_about()