app/ui.py

import gradio as gr
from .config import *
from .messages import *
from .ui_vote import *
from .ui_battle import *
from .ui_leaderboard import *


with gr.Blocks() as about:
    gr.Markdown(ABOUT)

CSS = """
footer {visibility: hidden}
textbox {resize: none}

/* Custom scrollbar styles */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-fill-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--body-text-color);
}
"""

with gr.Blocks(css=CSS, theme=gr.themes.Default(font=[gr.themes.GoogleFont("Geist"), "sans-serif"]), title="TTS Arena") as app:
    gr.Markdown(DESCR)
    gr.TabbedInterface([vote, battle, leaderboard, about], ['Vote', 'Battle', 'Leaderboard', 'About'])
    if CITATION_TEXT:
        with gr.Row():
            with gr.Accordion("Citation", open=False):
                gr.Markdown(f"If you use this data in your publication, please cite us!\n\nCopy the BibTeX citation to cite this source:\n\n```bibtext\n{CITATION_TEXT}\n```\n\nPlease note that all generated audio clips should be assumed unsuitable for redistribution or commercial use.")