Implementation:Lm sys FastChat Build Side By Side Arena Named UI

Knowledge Sources	Lm_sys_FastChat Chatbot Arena
Domains	Web_UI, Model_Evaluation
Last Updated	2026-02-07 06:00 GMT

Overview

Constructs the named side-by-side arena comparison tab where users explicitly choose which two models to compare.

Description

The build_side_by_side_ui_named function creates a Gradio UI component that allows users to select two specific models from dropdown menus and compare their responses side by side. Unlike the anonymous arena mode, users know which models they are evaluating, making this mode useful for targeted comparisons between specific models of interest.

The load_demo_side_by_side_named function initializes the tab state by setting default model selections. The left model defaults to the first in the list, while the right model is chosen using weighted random selection that favors models near the top of the list (weights of 8 for the first 4, then 4 for the next 8, then 1 for the rest). This encourages diversity in comparisons while surfacing popular models.

Voting is handled by the same pattern as the anonymous mode: leftvote_last_response, rightvote_last_response, tievote_last_response, and bothbad_vote_last_response each delegate to vote_last_response which logs results to both a local file and a remote logger. The flash_buttons function provides UI feedback by briefly re-enabling vote buttons after a response completes. The add_text function validates user input against INPUT_CHAR_LEN_LIMIT and CONVERSATION_TURN_LIMIT, then constructs conversation state for both selected models. The bot_response_multi function streams both model responses in parallel.

Usage

Use this module when building the named model comparison tab for Chatbot Arena. It is called from the main multi-model Gradio launcher to provide a tab where users can deliberately choose which models to pit against each other, complementing the anonymous battle mode for users who want to evaluate specific models.

Code Reference

Source Location

Repository: Lm_sys_FastChat
File: fastchat/serve/gradio_block_arena_named.py
Lines: 1-512

Signature

def build_side_by_side_ui_named(models):
    """
    Build the named side-by-side arena comparison UI.

    Args:
        models: List of available model names for user selection via dropdowns.

    Returns:
        list: A list containing two gr.State objects and two model selector
              Dropdown components [state0, state1, model_selector0, model_selector1].
    """

Import

from fastchat.serve.gradio_block_arena_named import build_side_by_side_ui_named

Key Functions

Function	Line	Description
build_side_by_side_ui_named	314	Main entry point; constructs the named comparison Gradio tab
load_demo_side_by_side_named	49	Initializes states and populates model dropdowns with weighted defaults
vote_last_response	68	Core vote logger; writes vote data to file and remote logger
leftvote_last_response	81	Records a vote for the left model
rightvote_last_response	91	Records a vote for the right model
tievote_last_response	101	Records a tie vote between both models
bothbad_vote_last_response	111	Records a vote indicating both responses were bad
regenerate	121	Clears the last assistant turn and re-generates responses
clear_history	135	Resets conversation state and chatbot displays
share_click	146	Handles share button click, logs shared conversation data
add_text	154	Validates user input, initializes model states, and appends to conversation
bot_response_multi	224	Streams responses from both models in parallel
flash_buttons	304	Briefly re-enables vote buttons after streaming completes
set_global_vars_named	44	Sets module-level moderation flag

I/O Contract

Inputs

Name	Type	Required	Description
models	list[str]	Yes	List of available model name strings for populating dropdown selectors

Outputs

Name	Type	Description
returns	list	List of [state0, state1, model_selector0, model_selector1] Gradio State and Dropdown components

Dependencies

Internal Imports

from fastchat.constants import (
    MODERATION_MSG, CONVERSATION_LIMIT_MSG,
    INPUT_CHAR_LEN_LIMIT, CONVERSATION_TURN_LIMIT, SURVEY_LINK,
)
from fastchat.model.model_adapter import get_conversation_template
from fastchat.serve.gradio_web_server import (
    State, bot_response, get_conv_log_filename,
    no_change_btn, enable_btn, disable_btn, invisible_btn,
    acknowledgment_md, get_ip, get_model_description_md,
)
from fastchat.serve.remote_logger import get_remote_logger
from fastchat.utils import build_logger, moderation_filter

External Imports

import json
import time
import gradio as gr
import numpy as np

Usage Examples

# Building the named comparison tab within a Gradio Blocks layout
import gradio as gr
from fastchat.serve.gradio_block_arena_named import (
    build_side_by_side_ui_named,
    load_demo_side_by_side_named,
    set_global_vars_named,
)

models = ["gpt-4", "claude-v1", "llama-2-70b-chat", "gemini-pro"]
set_global_vars_named(enable_moderation_=True)

with gr.Blocks() as demo:
    with gr.Tab("Arena (side-by-side)"):
        states_and_selectors = build_side_by_side_ui_named(models)

    # On page load, initialize states with weighted model defaults
    demo.load(
        load_demo_side_by_side_named,
        [models, url_params],
        states_and_selectors,
    )

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment