add price explorer tab

Author: sophie200

fastchat/serve/gradio_web_server_multi.py

@@ -53,31 +53,57 @@
 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!
+    Arena visualizer provides interactive tools to explore and draw insights from our leaderboard data. 
     """
     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">
+    with gr.Tabs():
+        with gr.Tab("Topic Explorer", id=0):
+            topic_markdown = """ 
+            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(topic_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)
+        with gr.Tab("Price Analysis", id=1):
+            price_markdown = """
+            This scatterplot displays a selection of the arena's models, showing their arena score plotted against their cost.
+            """
+            gr.Markdown(price_markdown)
+            expandText = "👇 Expand to see detailed instructions on how to use the scatterplot"
+            with gr.Accordion(expandText, open=False):
+                instructions = """
+                - Hover Over Points: View the model's arena score, cost, organization, and license.
+                - Click on Points: Click on a point to visit the website where the pricing details were sourced.
+                - Use the Legend: Click an organization name on the right to display its models. To compare models, click multiple organization names.
+
+                The prices were obtained either from the model's organization's website or through the [together.ai](https://www.together.ai/) pricing model. The scatterplot was last updated using Arena battle data from 2024/12.
+                """
+                gr.Markdown(instructions)
+            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/scatterplot.html">
                 </iframe>
             """
-    gr.HTML(frame)
+            gr.HTML(frame)
 
 
 def load_demo(context: Context, request: gr.Request):