Add Chatbot Arena Web Server Documentation and Fix Latex Display

README.md

@@ -237,6 +237,36 @@ This is the user interface that users will interact with.
 By following these steps, you will be able to serve your models using the web UI. You can open your browser and chat with a model now.
 If the models do not show up, try to reboot the gradio web server.
 
+## Launch Chatbot Arena (side-by-side battle UI)
+
+Currently, Chatbot Arena is powered by FastChat. Here is how you can launch an instance of Chatbot Arena locally.
+
+To support an API-based model, consider using the existing OpenAI api code for example.
+If the model is compatible with OpenAI APIs, then only modifying the configuration file is required without any additional code.
+For custom protocols, implementation of a streaming generator in [fastchat/serve/api_provider.py](https://github.com/lm-sys/FastChat/blob/main/fastchat/serve/api_provider.py) is required, following the provided examples. Currently, FastChat is compatible with OpenAI, Anthropic, Google Vertex AI, Mistral, Nvidia NGC, YandexGPT and Reka. For more information about model support, please refer to the model support [Doc](./docs/model_support.md).
+
+Create a JSON configuration file `api_endpoint.json` with the api endpoints of the models you want to serve, for example:
+```
+{
+    "gpt-4o-2024-05-13": {
+        "model_name": "gpt-4o-2024-05-13",
+        "api_base": "https://api.openai.com/v1",
+        "api_type": "openai",
+        "api_key": [Insert API Key],
+        "anony_only": falseg
+    }
+}
+```
+For anthropic model, set `api_type` to `"anthropic_message"` and replace `api_key` with your anthropic key. For gemini model, set `api_type` to `"gemini"` and replace `api_key` with your gemini key.
+
+If you want to serve your own model using local gpus, following the instructions in [Serving with Web GUI](#serving-with-web-gui).
+
+To launch a gradio web server, run `gradio_web_server_multi.py`.
+```
+cd fastchat/serve
+python gradio_web_server_multi.py --port 8080 --share --register-api-endpoint-file api_endpoint.json
+```
+
 #### (Optional): Advanced Features, Scalability, Third Party UI
 - You can register multiple model workers to a single controller, which can be used for serving a single model with higher throughput or serving multiple models at the same time. When doing so, please allocate different GPUs and ports for different model workers.
 ```

fastchat/serve/gradio_block_arena_anony.py

@@ -480,6 +480,12 @@ def build_side_by_side_ui_anony(models):
                         elem_id="chatbot",
                         height=650,
                         show_copy_button=True,
+                        latex_delimiters=[
+                            {"left": "$", "right": "$", "display": False},
+                            {"left": "$$", "right": "$$", "display": True},
+                            {"left": r"\(", "right": r"\)", "display": False},
+                            {"left": r"\[", "right": r"\]", "display": True},
+                        ],
                     )
 
         with gr.Row():

fastchat/serve/gradio_block_arena_named.py

@@ -358,6 +358,12 @@ def build_side_by_side_ui_named(models):
                         elem_id=f"chatbot",
                         height=650,
                         show_copy_button=True,
+                        latex_delimiters=[
+                            {"left": "$", "right": "$", "display": False},
+                            {"left": "$$", "right": "$$", "display": True},
+                            {"left": r"\(", "right": r"\)", "display": False},
+                            {"left": r"\[", "right": r"\]", "display": True},
+                        ],
                     )
 
     with gr.Row():

fastchat/serve/gradio_block_arena_vision.py

@@ -356,6 +356,12 @@ def build_single_vision_language_model_ui(
                 label="Scroll down and start chatting",
                 height=650,
                 show_copy_button=True,
+                latex_delimiters=[
+                    {"left": "$", "right": "$", "display": False},
+                    {"left": "$$", "right": "$$", "display": True},
+                    {"left": r"\(", "right": r"\)", "display": False},
+                    {"left": r"\[", "right": r"\]", "display": True},
+                ],
             )
 
     with gr.Row():

fastchat/serve/gradio_block_arena_vision_anony.py

@@ -432,6 +432,12 @@ def build_side_by_side_vision_ui_anony(context: Context, random_questions=None):
                                 elem_id="chatbot",
                                 height=650,
                                 show_copy_button=True,
+                                latex_delimiters=[
+                                    {"left": "$", "right": "$", "display": False},
+                                    {"left": "$$", "right": "$$", "display": True},
+                                    {"left": r"\(", "right": r"\)", "display": False},
+                                    {"left": r"\[", "right": r"\]", "display": True},
+                                ],
                             )
 
                 with gr.Row():

fastchat/serve/gradio_block_arena_vision_named.py

@@ -372,6 +372,12 @@ def build_side_by_side_vision_ui_named(context: Context, random_questions=None):
                                 elem_id=f"chatbot",
                                 height=650,
                                 show_copy_button=True,
+                                latex_delimiters=[
+                                    {"left": "$", "right": "$", "display": False},
+                                    {"left": "$$", "right": "$$", "display": True},
+                                    {"left": r"\(", "right": r"\)", "display": False},
+                                    {"left": r"\[", "right": r"\]", "display": True},
+                                ],
                             )
 
     with gr.Row():

fastchat/serve/gradio_web_server.py

@@ -873,6 +873,12 @@ def build_single_model_ui(models, add_promotion_links=False):
             label="Scroll down and start chatting",
             height=650,
             show_copy_button=True,
+            latex_delimiters=[
+                {"left": "$", "right": "$", "display": False},
+                {"left": "$$", "right": "$$", "display": True},
+                {"left": r"\(", "right": r"\)", "display": False},
+                {"left": r"\[", "right": r"\]", "display": True},
+            ],
         )
     with gr.Row():
         textbox = gr.Textbox(