Add Data Explorer Tab

fastchat/serve/gradio_web_server_multi.py

@@ -7,6 +7,7 @@
 import pickle
 import time
 from typing import List
+import plotly.express as px
 
 import gradio as gr
 
@@ -54,6 +55,73 @@
 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 Analysis Visualizations*
+            Below is a scatterplot depicting a model’s arena score against its cost effectiveness. Start exploring and discover some interesting trends in the data!
+            """
+            gr.Markdown(price_markdown)
+            model_keys = ['chatgpt-4o-latest', 'gemini-1.5-pro-exp-0827','gpt-4o-mini-2024-07-18','claude-3-5-sonnet-20240620','gemini-1.5-flash-exp-0827','llama-3.1-405b-instruct','gemini-1.5-pro-api-0514','mistral-large-2407','reka-core-20240722','gemini-1.5-flash-api-0514', 'deepseek-coder-v2-0724','yi-large','llama-3-70b-instruct','qwen2-72b-instruct','claude-3-haiku-20240307','llama-3.1-8b-instruct','mistral-large-2402','command-r','mixtral-8x22b-instruct-v0.1','gpt-3.5-turbo-0613']
+            output_tokens_per_USD = [66.66666667000001,200.0,1666.666667,66.66666667000001,3333.333333,333.3333333,200.0,166.6666667,166.6666667,3333.333333,3333.333333,333.3333333,1265.8227849999998,1111.111111,800.0,11111.11111,166.6666667,666.6666667,166.6666667,500.0]
+            score=[1316.1559008799543,1300.8583398843484,1273.6004783067303,1270.113546648134,1270.530573909608,1266.244657076764,1259.2844314017723,1249.8268751367714,1229.2148108171098,1226.8769924152105,1214.5634252743123,1212.4668382698005,1206.3236747009742,1186.7832147344182,1178.5484948812955,1167.8793593807711,1157.271872307139,1148.6665817312062,1147.0325504217642,1117.0289441863001]
+            fig = px.scatter(x=output_tokens_per_USD, y=score, title="Quality vs. Cost Effectiveness", labels={
+                     "output_tokens_per_USD": "# of output tokens per USD (in thousands)",
+                     "score": "Arena Score"}, log_x=True, text=model_keys)
+            fig.update_traces(
+                textposition="bottom center",
+                textfont=dict(size=16),
+                texttemplate='%{text}',
+                marker=dict(size=8),
+                hovertemplate=(
+                'Model: %{text}<br>'  # Show the model name
+                'Output Tokens Per USD: %{x}<br>'  # Show the x value (Output Price)
+                'Arena Score: %{y}<br>'  # Show the y value (Arena Score)
+                )
+            )
+            fig.update_xaxes(range=[1,4.5])
+            fig.update_yaxes(range=[1100,1320])
+            fig.update_layout(autosize=True, height=850, width=None, xaxis_title="# of output tokens per USD (in thousands)", yaxis_title= "Arena Score")
+
+
+            gr.Plot(fig, elem_id="plotly-graph")
+
+
+
 def load_demo(context: Context, request: gr.Request):
     ip = get_ip(request)
     logger.info(f"load_demo. ip: {ip}. params: {request.query_params}")
@@ -199,6 +267,9 @@ 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()
@@ -305,6 +376,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}")