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

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

Overview

Constructs the anonymous side-by-side arena battle tab where users compare responses from two randomly assigned, hidden models.

Description

The build_side_by_side_ui_anony function creates a Gradio UI component that enables blind comparison of two language models. When a user submits a prompt, the system randomly selects two models from the available pool using weighted sampling (controlled by SAMPLING_WEIGHTS, BATTLE_TARGETS, and SAMPLING_BOOST_MODELS) and streams both responses simultaneously in a side-by-side layout. Model identities remain hidden behind placeholder labels until the user casts a vote.

The module implements a complete voting workflow through leftvote_last_response, rightvote_last_response, tievote_last_response, and bothbad_vote_last_response. Each vote handler logs the interaction to a conversation log file and a remote logger, then reveals the model identities. The regenerate function allows users to request new responses from the same model pair, while clear_history resets the entire conversation state.

The add_text function handles input validation, including character length limits (governed by BLIND_MODE_INPUT_CHAR_LEN_LIMIT), conversation turn limits (CONVERSATION_TURN_LIMIT), and optional content moderation. The bot_response_multi function orchestrates parallel streaming of responses from both models, updating both chatbot panels in real time. Model pairing logic in get_battle_pair uses weighted random selection with support for outage exclusions and boost priorities.

Usage

Use this module when building the anonymous arena battle tab for Chatbot Arena. It is typically called from the main Gradio web server multi-model launcher (gradio_web_server_multi.py) to construct one of the primary tabs. This is the core engagement mode of the Arena where users contribute preference data for model ranking.

Code Reference

Source Location

Repository: Lm_sys_FastChat
File: fastchat/serve/gradio_block_arena_anony.py
Lines: 1-655

Signature

def build_side_by_side_ui_anony(models):
    """
    Build the anonymous side-by-side arena battle UI.

    Args:
        models: List of available model names for battle pairing.

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

Import

from fastchat.serve.gradio_block_arena_anony import build_side_by_side_ui_anony

Key Functions

Function	Line	Description
build_side_by_side_ui_anony	441	Main entry point; constructs the entire anonymous arena Gradio tab
load_demo_side_by_side_anony	56	Initializes states and model selector visibility on page load
vote_last_response	69	Core vote logger; writes vote data to file and remote logger
leftvote_last_response	102	Records a vote for the left model (Model A)
rightvote_last_response	112	Records a vote for the right model (Model B)
tievote_last_response	122	Records a tie vote between both models
bothbad_vote_last_response	132	Records a vote indicating both responses were bad
regenerate	142	Clears the last assistant turn and re-generates responses
clear_history	156	Resets conversation state and chatbot displays
add_text	269	Validates user input, selects battle pair, and appends to conversation
bot_response_multi	358	Streams responses from both models in parallel
get_battle_pair	212	Selects two models using weighted sampling with outage and boost logic
share_click	170	Handles share button click, logs shared conversation data
set_global_vars_anony	51	Sets module-level moderation flag

I/O Contract

Inputs

Name	Type	Required	Description
models	list[str]	Yes	List of available model name strings for random battle pairing

Outputs

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

Dependencies

Internal Imports

from fastchat.constants import (
    MODERATION_MSG, CONVERSATION_LIMIT_MSG, SLOW_MODEL_MSG,
    BLIND_MODE_INPUT_CHAR_LEN_LIMIT, CONVERSATION_TURN_LIMIT, SURVEY_LINK,
)
from fastchat.model.model_adapter import get_conversation_template
from fastchat.serve.gradio_block_arena_named import flash_buttons
from fastchat.serve.gradio_web_server import (
    State, bot_response, get_conv_log_filename,
    no_change_btn, enable_btn, disable_btn, invisible_btn,
    enable_text, disable_text, 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 re
import gradio as gr
import numpy as np

Usage Examples

# Building the anonymous arena tab within a Gradio Blocks layout
import gradio as gr
from fastchat.serve.gradio_block_arena_anony import (
    build_side_by_side_ui_anony,
    load_demo_side_by_side_anony,
    set_global_vars_anony,
)

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

with gr.Blocks() as demo:
    with gr.Tab("Arena (battle)"):
        states_and_selectors = build_side_by_side_ui_anony(models)

    # On page load, initialize states
    demo.load(
        load_demo_side_by_side_anony,
        [models, url_params],
        states_and_selectors,
    )

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment