diff --git a/fastchat/serve/gradio_web_server.py b/fastchat/serve/gradio_web_server.py index 4f0521da0..d0d4e92d1 100644 --- a/fastchat/serve/gradio_web_server.py +++ b/fastchat/serve/gradio_web_server.py @@ -688,6 +688,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; + } +} """ diff --git a/fastchat/serve/gradio_web_server_multi.py b/fastchat/serve/gradio_web_server_multi.py index 7a255d59e..7f9426445 100644 --- a/fastchat/serve/gradio_web_server_multi.py +++ b/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 = """ + + """ + 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}")