Sync from GitHub repo

.env.example

@@ -0,0 +1,15 @@
+SECRET_KEY=your-secret-key-here
+OAUTH_CLIENT_ID=your-huggingface-client-id
+OAUTH_CLIENT_SECRET=your-huggingface-client-secret
+DATABASE_URI=sqlite:///tts_arena.db 
+
+FAL_KEY=
+PLAY_USERID=
+PLAY_SECRETKEY=
+
+TURNSTILE_ENABLED=
+TURNSTILE_SITE_KEY=
+TURNSTILE_SECRET_KEY=
+TURNSTILE_TIMEOUT_HOURS=24
+
+HF_TOKEN=your-huggingface-token-here

.github/workflows/sync-to-hf.yaml

@@ -0,0 +1,43 @@
+name: Sync to Hugging Face Space
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  sync-to-hf:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Git
+        run: |
+          git config --global user.email "[email protected]"
+          git config --global user.name "GitHub Actions"
+
+      - name: Push to Hugging Face Space
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: |
+          # Replace these with your HF username and space name
+          HF_USERNAME="TTS-AGI"
+          SPACE_NAME="TTS-Arena-V2"
+
+          # Clone the HF space repo
+          git clone https://$HF_USERNAME:[email protected]/spaces/$HF_USERNAME/$SPACE_NAME hf-space
+          
+          # Copy all files to the space repo (except .git and hf-space folder)
+          rsync -av --exclude='.git' --exclude='hf-space' ./ hf-space/
+          
+          # Rename SPACES_README.md to README.md for Hugging Face
+          if [ -f hf-space/SPACES_README.md ]; then
+            mv hf-space/SPACES_README.md hf-space/README.md
+          fi
+
+          cd hf-space
+          git add .
+          git commit -m "Sync from GitHub repo" || echo "No changes to commit"
+          git push

.gitignore

@@ -1,12 +1,8 @@
-# Byte-compiled / optimized / DLL files
+# Python
 __pycache__/
 *.py[cod]
 *$py.class
-
-# C extensions
 *.so
-
-# Distribution / packaging
 .Python
 build/
 develop-eggs/
@@ -20,114 +16,11 @@ parts/
 sdist/
 var/
 wheels/
-share/python-wheels/
 *.egg-info/
 .installed.cfg
 *.egg
-MANIFEST
-
-# PyInstaller
-#  Usually these files are written by a python script from a template
-#  before PyInstaller builds the exe, so as to inject date/other infos into it.
-*.manifest
-*.spec
-
-# Installer logs
-pip-log.txt
-pip-delete-this-directory.txt
-
-# Unit test / coverage reports
-htmlcov/
-.tox/
-.nox/
-.coverage
-.coverage.*
-.cache
-nosetests.xml
-coverage.xml
-*.cover
-*.py,cover
-.hypothesis/
-.pytest_cache/
-cover/
-
-# Translations
-*.mo
-*.pot
-
-# Django stuff:
-*.log
-local_settings.py
-db.sqlite3
-db.sqlite3-journal
-
-# Flask stuff:
-instance/
-.webassets-cache
-
-# Scrapy stuff:
-.scrapy
-
-# Sphinx documentation
-docs/_build/
-
-# PyBuilder
-.pybuilder/
-target/
-
-# Jupyter Notebook
-.ipynb_checkpoints
-
-# IPython
-profile_default/
-ipython_config.py
-
-# pyenv
-#   For a library or package, you might want to ignore these files since the code is
-#   intended to run in multiple environments; otherwise, check them in:
-# .python-version
-
-# pipenv
-#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
-#   However, in case of collaboration, if having platform-specific dependencies or dependencies
-#   having no cross-platform support, pipenv may install dependencies that don't work, or not
-#   install all needed dependencies.
-#Pipfile.lock
-
-# UV
-#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
-#   This is especially recommended for binary packages to ensure reproducibility, and is more
-#   commonly ignored for libraries.
-#uv.lock
 
-# poetry
-#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
-#   This is especially recommended for binary packages to ensure reproducibility, and is more
-#   commonly ignored for libraries.
-#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
-#poetry.lock
-
-# pdm
-#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
-#pdm.lock
-#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
-#   in version control.
-#   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
-.pdm.toml
-.pdm-python
-.pdm-build/
-
-# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
-__pypackages__/
-
-# Celery stuff
-celerybeat-schedule
-celerybeat.pid
-
-# SageMath parsed files
-*.sage.py
-
-# Environments
+# Environment and local development
 .env
 .venv
 env/
@@ -135,42 +28,23 @@ venv/
 ENV/
 env.bak/
 venv.bak/
+.flaskenv
 
-# Spyder project settings
-.spyderproject
-.spyproject
-
-# Rope project settings
-.ropeproject
-
-# mkdocs documentation
-/site
-
-# mypy
-.mypy_cache/
-.dmypy.json
-dmypy.json
-
-# Pyre type checker
-.pyre/
-
-# pytype static type analyzer
-.pytype/
-
-# Cython debug symbols
-cython_debug/
-
-# PyCharm
-#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
-#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
-#  and can be added to the global gitignore or merged into this file.  For a more nuclear
-#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
-#.idea/
-
-# Ruff stuff:
-.ruff_cache/
-
-# PyPI configuration file
-.pypirc
-
-*.db
+# Database
+instance/
+*.db
+*.sqlite
+*.sqlite3
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db 
+
+# Uploads
+static/temp_audio

COPYING

@@ -0,0 +1,15 @@
+This project is dual-licensed under the MIT license and the Apache 2.0 license. See the LICENSE.MIT and LICENSE.APACHE files respectively for details.
+
+Copyright 2025 mrfakename
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

LICENSE.APACHE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

LICENSE.MIT

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 mrfakename
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,29 +1,15 @@
 ---
-title: TTS Arena
-sdk: gradio
-app_file: app.py
-license: zlib
-tags:
-- arena
+title: TTS Arena V2 (Beta)
 emoji: 🏆
 colorFrom: blue
 colorTo: blue
-pinned: true
-header: mini
-sdk_version: 5.25.2
-short_description: Vote on the latest TTS models!
----
-
-# TTS Arena
-
-The codebase for TTS Arena v2.
-
-The TTS Arena is a Gradio app with several components. Please refer to the `app` directory for more information.
+sdk: gradio
+app_file: app.py
+short_description: (Private) Vote on the latest TTS models!
 
-## Running the app
+hf_oauth: true
+---
 
-```bash
-RUNNING_LOCALLY=1 python app.py
-```
+Please see the [GitHub repo](https://github.com/TTS-AGI/TTS-Arena-V2) for information.
 
-You must set the `RUNNING_LOCALLY` environment variable to `1` when running the app locally. This prevents it from syncing with the database.
+Join the [Discord server](https://discord.gg/HB8fMR6GTr) for updates and support.

TURNSTILE.md

@@ -0,0 +1,58 @@
+# Cloudflare Turnstile Integration
+
+TTS Arena supports Cloudflare Turnstile for bot protection. This guide explains how to set up and configure Turnstile for your deployment.
+
+## What is Cloudflare Turnstile?
+
+Cloudflare Turnstile is a CAPTCHA alternative that provides protection against bots and malicious traffic while maintaining a user-friendly experience. Unlike traditional CAPTCHAs, Turnstile uses a variety of signals to detect bots without forcing legitimate users to solve frustrating puzzles.
+
+## Setup Instructions
+
+### 1. Register for Cloudflare Turnstile
+
+1. Create a Cloudflare account or log in to your existing account
+2. Go to the [Turnstile dashboard](https://dash.cloudflare.com/?to=/:account/turnstile)
+3. Click "Add Site" and follow the instructions
+4. Create a new site key
+   - Choose "Managed" or "Invisible" mode (Managed is recommended for better balance of security and user experience)
+   - Set an appropriate domain policy
+   - Create the site key
+
+Once created, you'll receive a **Site Key** (public) and **Secret Key** (private).
+
+### 2. Configure Environment Variables
+
+Add the following environment variables to your deployment:
+
+```
+TURNSTILE_ENABLED=true
+TURNSTILE_SITE_KEY=your_site_key_here
+TURNSTILE_SECRET_KEY=your_secret_key_here
+TURNSTILE_TIMEOUT_HOURS=24
+```
+
+| Variable | Description |
+|----------|-------------|
+| `TURNSTILE_ENABLED` | Set to `true` to enable Turnstile protection |
+| `TURNSTILE_SITE_KEY` | Your Cloudflare Turnstile site key |
+| `TURNSTILE_SECRET_KEY` | Your Cloudflare Turnstile secret key |
+| `TURNSTILE_TIMEOUT_HOURS` | How often users need to verify (default: 24 hours) |
+
+### 3. Implementation Details
+
+When Turnstile is enabled:
+- All routes and API endpoints require Turnstile verification
+- Users are redirected to a verification page when they first visit
+- Verification status is stored in the session
+- Re-verification is required after the timeout period
+- API requests receive a 403 error if not verified
+
+## Customization
+
+The Turnstile verification page uses the same styling as the main application, providing a seamless user experience. You can customize the appearance by modifying `templates/turnstile.html`.
+
+## Troubleshooting
+
+- **Verification Loops**: If users get stuck in verification loops, check that cookies are being properly stored (ensure proper cookie settings and no browser extensions blocking cookies)
+- **API Errors**: If API clients receive 403 errors, they need to implement Turnstile verification
+- **Missing Environment Variables**: Ensure all required environment variables are set correctly 

admin.py

@@ -0,0 +1,401 @@
+from flask import Blueprint, render_template, current_app, jsonify, request, redirect, url_for, flash
+from models import db, User, Model, Vote, EloHistory, ModelType
+from auth import admin_required
+from sqlalchemy import func, desc, extract
+from datetime import datetime, timedelta
+import json
+import os
+
+admin = Blueprint("admin", __name__, url_prefix="/admin")
+
+@admin.route("/")
+@admin_required
+def index():
+    """Admin dashboard homepage"""
+    # Get count statistics
+    stats = {
+        "total_users": User.query.count(),
+        "total_votes": Vote.query.count(),
+        "tts_votes": Vote.query.filter_by(model_type=ModelType.TTS).count(),
+        "conversational_votes": Vote.query.filter_by(model_type=ModelType.CONVERSATIONAL).count(),
+        "tts_models": Model.query.filter_by(model_type=ModelType.TTS).count(),
+        "conversational_models": Model.query.filter_by(model_type=ModelType.CONVERSATIONAL).count(),
+    }
+    
+    # Get recent votes
+    recent_votes = Vote.query.order_by(Vote.vote_date.desc()).limit(10).all()
+    
+    # Get recent users
+    recent_users = User.query.order_by(User.join_date.desc()).limit(10).all()
+    
+    # Get daily votes for the past 30 days
+    thirty_days_ago = datetime.utcnow().replace(hour=0, minute=0, second=0, microsecond=0) - timedelta(days=30)
+    
+    daily_votes = db.session.query(
+        func.date(Vote.vote_date).label('date'),
+        func.count().label('count')
+    ).filter(Vote.vote_date >= thirty_days_ago).group_by(
+        func.date(Vote.vote_date)
+    ).order_by(func.date(Vote.vote_date)).all()
+    
+    # Generate a complete list of dates for the past 30 days
+    date_list = []
+    current_date = datetime.utcnow()
+    for i in range(30, -1, -1):
+        date_list.append((current_date - timedelta(days=i)).date())
+    
+    # Create a dictionary with actual vote counts
+    vote_counts = {day.date: day.count for day in daily_votes}
+    
+    # Build complete datasets including days with zero votes
+    formatted_dates = [date.strftime("%Y-%m-%d") for date in date_list]
+    vote_counts_list = [vote_counts.get(date, 0) for date in date_list]
+    
+    daily_votes_data = {
+        "labels": formatted_dates,
+        "counts": vote_counts_list
+    }
+    
+    # Get top models
+    top_tts_models = Model.query.filter_by(
+        model_type=ModelType.TTS
+    ).order_by(Model.current_elo.desc()).limit(5).all()
+    
+    top_conversational_models = Model.query.filter_by(
+        model_type=ModelType.CONVERSATIONAL
+    ).order_by(Model.current_elo.desc()).limit(5).all()
+    
+    return render_template(
+        "admin/index.html",
+        stats=stats,
+        recent_votes=recent_votes,
+        recent_users=recent_users,
+        daily_votes_data=json.dumps(daily_votes_data),
+        top_tts_models=top_tts_models,
+        top_conversational_models=top_conversational_models
+    )
+
+@admin.route("/models")
+@admin_required
+def models():
+    """Manage models"""
+    tts_models = Model.query.filter_by(model_type=ModelType.TTS).order_by(Model.name).all()
+    conversational_models = Model.query.filter_by(model_type=ModelType.CONVERSATIONAL).order_by(Model.name).all()
+    
+    return render_template(
+        "admin/models.html",
+        tts_models=tts_models,
+        conversational_models=conversational_models
+    )
+
+
+@admin.route("/model/<model_id>", methods=["GET", "POST"])
+@admin_required
+def edit_model(model_id):
+    """Edit a model"""
+    model = Model.query.get_or_404(model_id)
+    
+    if request.method == "POST":
+        model.name = request.form.get("name")
+        model.is_active = "is_active" in request.form
+        model.is_open = "is_open" in request.form
+        model.model_url = request.form.get("model_url")
+        
+        db.session.commit()
+        flash(f"Model '{model.name}' updated successfully", "success")
+        return redirect(url_for("admin.models"))
+    
+    return render_template("admin/edit_model.html", model=model)
+
+@admin.route("/users")
+@admin_required
+def users():
+    """Manage users"""
+    users = User.query.order_by(User.username).all()
+    admin_users = os.getenv("ADMIN_USERS", "").split(",")
+    admin_users = [username.strip() for username in admin_users]
+    
+    return render_template("admin/users.html", users=users, admin_users=admin_users)
+
+@admin.route("/user/<int:user_id>")
+@admin_required
+def user_detail(user_id):
+    """View user details"""
+    user = User.query.get_or_404(user_id)
+    
+    # Get user votes
+    recent_votes = Vote.query.filter_by(user_id=user_id).order_by(Vote.vote_date.desc()).limit(20).all()
+    
+    # Get vote statistics
+    tts_votes = Vote.query.filter_by(user_id=user_id, model_type=ModelType.TTS).count()
+    conversational_votes = Vote.query.filter_by(user_id=user_id, model_type=ModelType.CONVERSATIONAL).count()
+    
+    # Get favorite models (most chosen)
+    favorite_models = db.session.query(
+        Vote.model_chosen,
+        Model.name,
+        func.count().label('count')
+    ).join(
+        Model, Vote.model_chosen == Model.id
+    ).filter(
+        Vote.user_id == user_id
+    ).group_by(
+        Vote.model_chosen, Model.name
+    ).order_by(
+        desc('count')
+    ).limit(5).all()
+    
+    return render_template(
+        "admin/user_detail.html",
+        user=user,
+        recent_votes=recent_votes,
+        tts_votes=tts_votes,
+        conversational_votes=conversational_votes,
+        favorite_models=favorite_models,
+        total_votes=tts_votes + conversational_votes
+    )
+
+@admin.route("/votes")
+@admin_required
+def votes():
+    """View recent votes"""
+    page = request.args.get('page', 1, type=int)
+    per_page = 50
+    
+    # Get votes with pagination
+    votes_pagination = Vote.query.order_by(
+        Vote.vote_date.desc()
+    ).paginate(page=page, per_page=per_page)
+    
+    return render_template(
+        "admin/votes.html",
+        votes=votes_pagination.items,
+        pagination=votes_pagination
+    )
+
+@admin.route("/statistics")
+@admin_required
+def statistics():
+    """View detailed statistics"""
+    # Get daily votes for the past 30 days by model type
+    thirty_days_ago = datetime.utcnow().replace(hour=0, minute=0, second=0, microsecond=0) - timedelta(days=30)
+    
+    tts_daily_votes = db.session.query(
+        func.date(Vote.vote_date).label('date'),
+        func.count().label('count')
+    ).filter(
+        Vote.vote_date >= thirty_days_ago,
+        Vote.model_type == ModelType.TTS
+    ).group_by(
+        func.date(Vote.vote_date)
+    ).order_by(func.date(Vote.vote_date)).all()
+    
+    conv_daily_votes = db.session.query(
+        func.date(Vote.vote_date).label('date'),
+        func.count().label('count')
+    ).filter(
+        Vote.vote_date >= thirty_days_ago,
+        Vote.model_type == ModelType.CONVERSATIONAL
+    ).group_by(
+        func.date(Vote.vote_date)
+    ).order_by(func.date(Vote.vote_date)).all()
+    
+    # Monthly new users
+    monthly_users = db.session.query(
+        extract('year', User.join_date).label('year'),
+        extract('month', User.join_date).label('month'),
+        func.count().label('count')
+    ).group_by(
+        'year', 'month'
+    ).order_by('year', 'month').all()
+    
+    # Generate a complete list of dates for the past 30 days
+    date_list = []
+    current_date = datetime.utcnow()
+    for i in range(30, -1, -1):
+        date_list.append((current_date - timedelta(days=i)).date())
+    
+    # Create dictionaries with actual vote counts
+    tts_vote_counts = {day.date: day.count for day in tts_daily_votes}
+    conv_vote_counts = {day.date: day.count for day in conv_daily_votes}
+    
+    # Format dates consistently for charts
+    formatted_dates = [date.strftime("%Y-%m-%d") for date in date_list]
+    
+    # Build complete datasets including days with zero votes
+    tts_counts = [tts_vote_counts.get(date, 0) for date in date_list]
+    conv_counts = [conv_vote_counts.get(date, 0) for date in date_list]
+    
+    # Generate all month/year combinations for the past 12 months
+    current_date = datetime.utcnow()
+    month_list = []
+    for i in range(11, -1, -1):
+        past_date = current_date - timedelta(days=i*30)  # Approximate
+        month_list.append((past_date.year, past_date.month))
+    
+    # Create a dictionary with actual user counts
+    user_counts = {(record.year, record.month): record.count for record in monthly_users}
+    
+    # Build complete monthly datasets including months with zero new users
+    monthly_labels = [f"{month}/{year}" for year, month in month_list]
+    monthly_counts = [user_counts.get((year, month), 0) for year, month in month_list]
+    
+    # Model performance over time
+    top_models = Model.query.order_by(Model.match_count.desc()).limit(5).all()
+    
+    # Get first and last timestamp to create a consistent timeline
+    earliest = datetime.utcnow() - timedelta(days=30)  # Default to 30 days ago
+    latest = datetime.utcnow()  # Default to now
+    
+    # Find actual earliest and latest timestamps across all models
+    has_elo_history = False
+    for model in top_models:
+        first = EloHistory.query.filter_by(model_id=model.id).order_by(EloHistory.timestamp).first()
+        last = EloHistory.query.filter_by(model_id=model.id).order_by(EloHistory.timestamp.desc()).first()
+        
+        if first and last:
+            has_elo_history = True
+            if first.timestamp < earliest:
+                earliest = first.timestamp
+            if last.timestamp > latest:
+                latest = last.timestamp
+    
+    # If no history was found, use a default range of the last 30 days
+    if not has_elo_history:
+        earliest = datetime.utcnow() - timedelta(days=30)
+        latest = datetime.utcnow()
+    
+    # Make sure the date range is valid (earliest before latest)
+    if earliest > latest:
+        earliest = latest - timedelta(days=30)
+    
+    # Generate a list of dates for the ELO history timeline
+    # Using 1-day intervals for a smoother chart
+    elo_dates = []
+    current = earliest
+    while current <= latest:
+        elo_dates.append(current.date())
+        current += timedelta(days=1)
+    
+    # Format dates consistently
+    formatted_elo_dates = [date.strftime("%Y-%m-%d") for date in elo_dates]
+    
+    model_history = {}
+    
+    # Initialize empty data for all top models
+    for model in top_models:
+        model_history[model.name] = {
+            "timestamps": formatted_elo_dates,
+            "scores": [None] * len(formatted_elo_dates)  # Initialize with None values
+        }
+        
+        history = EloHistory.query.filter_by(
+            model_id=model.id
+        ).order_by(EloHistory.timestamp).all()
+        
+        if history:
+            # Create a dictionary mapping dates to scores
+            history_dict = {}
+            for h in history:
+                date_key = h.timestamp.date().strftime("%Y-%m-%d")
+                history_dict[date_key] = h.elo_score
+            
+            # Fill in missing dates with the previous score
+            last_score = model.current_elo  # Default to current ELO if no history
+            scores = []
+            
+            for date in formatted_elo_dates:
+                if date in history_dict:
+                    last_score = history_dict[date]
+                scores.append(last_score)
+            
+            model_history[model.name]["scores"] = scores
+        else:
+            # If no history, use the current Elo for all dates
+            model_history[model.name]["scores"] = [model.current_elo] * len(formatted_elo_dates)
+    
+    chart_data = {
+        "dailyVotes": {
+            "labels": formatted_dates,
+            "ttsCounts": tts_counts,
+            "convCounts": conv_counts
+        },
+        "monthlyUsers": {
+            "labels": monthly_labels,
+            "counts": monthly_counts
+        },
+        "modelHistory": model_history
+    }
+    
+    return render_template(
+        "admin/statistics.html",
+        chart_data=json.dumps(chart_data)
+    )
+
+@admin.route("/activity")
+@admin_required
+def activity():
+    """View recent text generations"""
+    # Check if we have any active sessions from app.py
+    tts_session_count = 0
+    conversational_session_count = 0
+    
+    # Access global variables from app.py through current_app
+    if hasattr(current_app, 'tts_sessions'):
+        tts_session_count = len(current_app.tts_sessions)
+    else:  # Try to access through app module
+        from app import tts_sessions
+        tts_session_count = len(tts_sessions)
+    
+    if hasattr(current_app, 'conversational_sessions'):
+        conversational_session_count = len(current_app.conversational_sessions)
+    else:  # Try to access through app module
+        from app import conversational_sessions
+        conversational_session_count = len(conversational_sessions)
+    
+    # Get recent votes which represent completed generations
+    recent_tts_votes = Vote.query.filter_by(
+        model_type=ModelType.TTS
+    ).order_by(Vote.vote_date.desc()).limit(20).all()
+    
+    recent_conv_votes = Vote.query.filter_by(
+        model_type=ModelType.CONVERSATIONAL
+    ).order_by(Vote.vote_date.desc()).limit(20).all()
+    
+    # Get votes per hour for the last 24 hours
+    current_time = datetime.utcnow()
+    last_24h = current_time.replace(minute=0, second=0, microsecond=0) - timedelta(hours=24)
+    
+    # Use SQLite-compatible date formatting
+    hourly_votes = db.session.query(
+        func.strftime('%Y-%m-%d %H:00', Vote.vote_date).label('hour'),
+        func.count().label('count')
+    ).filter(
+        Vote.vote_date >= last_24h
+    ).group_by('hour').order_by('hour').all()
+    
+    # Generate all hours for the past 24 hours with correct hour formatting
+    hour_list = []
+    for i in range(24, -1, -1):
+        # Calculate the hour time and truncate to hour
+        hour_time = current_time - timedelta(hours=i)
+        hour_time = hour_time.replace(minute=0, second=0, microsecond=0)
+        hour_list.append(hour_time.strftime('%Y-%m-%d %H:00'))
+    
+    # Create a dictionary with actual vote counts
+    vote_counts = {hour.hour: hour.count for hour in hourly_votes}
+    
+    # Build complete hourly datasets including hours with zero votes
+    hourly_data = {
+        "labels": hour_list,
+        "counts": [vote_counts.get(hour, 0) for hour in hour_list]
+    }
+    
+    return render_template(
+        "admin/activity.html",
+        tts_session_count=tts_session_count,
+        conversational_session_count=conversational_session_count,
+        recent_tts_votes=recent_tts_votes,
+        recent_conv_votes=recent_conv_votes,
+        hourly_data=json.dumps(hourly_data)
+    ) 

app.py

@@ -1,4 +1,1067 @@
-from app.ui import app
+import os
+from huggingface_hub import HfApi, hf_hub_download
+from apscheduler.schedulers.background import BackgroundScheduler
+from concurrent.futures import ThreadPoolExecutor
+from datetime import datetime
+
+year = datetime.now().year
+month = datetime.now().month
+
+# Check if running in a Huggin Face Space
+IS_SPACES = False
+if os.getenv("SPACE_REPO_NAME"):
+    print("Running in a Hugging Face Space 🤗")
+    IS_SPACES = True
+
+    # Setup database sync for HF Spaces
+    if not os.path.exists("instance/tts_arena.db"):
+        os.makedirs("instance", exist_ok=True)
+        try:
+            print("Database not found, downloading from HF dataset...")
+            hf_hub_download(
+                repo_id="TTS-AGI/database-arena-v2",
+                filename="tts_arena.db",
+                repo_type="dataset",
+                local_dir="instance",
+                token=os.getenv("HF_TOKEN"),
+            )
+            print("Database downloaded successfully ✅")
+        except Exception as e:
+            print(f"Error downloading database from HF dataset: {str(e)} ⚠️")
+
+from flask import (
+    Flask,
+    render_template,
+    g,
+    request,
+    jsonify,
+    send_file,
+    redirect,
+    url_for,
+    session,
+    abort,
+)
+from flask_login import LoginManager, current_user
+from models import *
+from auth import auth, init_oauth, is_admin
+from admin import admin
+import os
+from dotenv import load_dotenv
+from flask_limiter import Limiter
+from flask_limiter.util import get_remote_address
+import uuid
+import tempfile
+import shutil
+from tts import predict_tts
+import random
+import json
+from datetime import datetime, timedelta
+from flask_migrate import Migrate
+import requests
+import functools
+import time # Added for potential retries
+
+
+# Load environment variables
+if not IS_SPACES:
+    load_dotenv()  # Only load .env if not running in a Hugging Face Space
+
+app = Flask(__name__)
+app.config["SECRET_KEY"] = os.getenv("SECRET_KEY", os.urandom(24))
+app.config["SQLALCHEMY_DATABASE_URI"] = os.getenv(
+    "DATABASE_URI", "sqlite:///tts_arena.db"
+)
+app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+app.config["SESSION_COOKIE_SECURE"] = True
+app.config["SESSION_COOKIE_SAMESITE"] = (
+    "None" if IS_SPACES else "Lax"
+)  # HF Spaces uses iframes to load the app, so we need to set SAMESITE to None
+app.config["PERMANENT_SESSION_LIFETIME"] = timedelta(days=30)  # Set to desired duration
+
+# Force HTTPS when running in HuggingFace Spaces
+if IS_SPACES:
+    app.config["PREFERRED_URL_SCHEME"] = "https"
+
+# Cloudflare Turnstile settings
+app.config["TURNSTILE_ENABLED"] = (
+    os.getenv("TURNSTILE_ENABLED", "False").lower() == "true"
+)
+app.config["TURNSTILE_SITE_KEY"] = os.getenv("TURNSTILE_SITE_KEY", "")
+app.config["TURNSTILE_SECRET_KEY"] = os.getenv("TURNSTILE_SECRET_KEY", "")
+app.config["TURNSTILE_VERIFY_URL"] = (
+    "https://challenges.cloudflare.com/turnstile/v0/siteverify"
+)
+
+migrate = Migrate(app, db)
+
+# Initialize extensions
+db.init_app(app)
+login_manager = LoginManager()
+login_manager.init_app(app)
+login_manager.login_view = "auth.login"
+
+# Initialize OAuth
+init_oauth(app)
+
+# Configure rate limits
+limiter = Limiter(
+    app=app,
+    key_func=get_remote_address,
+    default_limits=["200 per day", "50 per hour"],
+    storage_uri="memory://",
+)
+
+# Create temp directory for audio files
+TEMP_AUDIO_DIR = os.path.join(tempfile.gettempdir(), "tts_arena_audio")
+os.makedirs(TEMP_AUDIO_DIR, exist_ok=True)
+
+# Store active TTS sessions
+app.tts_sessions = {}
+tts_sessions = app.tts_sessions
+
+# Store active conversational sessions
+app.conversational_sessions = {}
+conversational_sessions = app.conversational_sessions
+
+# Register blueprints
+app.register_blueprint(auth, url_prefix="/auth")
+app.register_blueprint(admin)
+
+
+@login_manager.user_loader
+def load_user(user_id):
+    return User.query.get(int(user_id))
+
+
+@app.before_request
+def before_request():
+    g.user = current_user
+    g.is_admin = is_admin(current_user)
+
+    # Ensure HTTPS for HuggingFace Spaces environment
+    if IS_SPACES and request.headers.get("X-Forwarded-Proto") == "http":
+        url = request.url.replace("http://", "https://", 1)
+        return redirect(url, code=301)
+
+    # Check if Turnstile verification is required
+    if app.config["TURNSTILE_ENABLED"]:
+        # Exclude verification routes
+        excluded_routes = ["verify_turnstile", "turnstile_page", "static"]
+        if request.endpoint not in excluded_routes:
+            # Check if user is verified
+            if not session.get("turnstile_verified"):
+                # Save original URL for redirect after verification
+                redirect_url = request.url
+                # Force HTTPS in HuggingFace Spaces
+                if IS_SPACES and redirect_url.startswith("http://"):
+                    redirect_url = redirect_url.replace("http://", "https://", 1)
+
+                # If it's an API request, return a JSON response
+                if request.path.startswith("/api/"):
+                    return jsonify({"error": "Turnstile verification required"}), 403
+                # For regular requests, redirect to verification page
+                return redirect(url_for("turnstile_page", redirect_url=redirect_url))
+            else:
+                # Check if verification has expired (default: 24 hours)
+                verification_timeout = (
+                    int(os.getenv("TURNSTILE_TIMEOUT_HOURS", "24")) * 3600
+                )  # Convert hours to seconds
+                verified_at = session.get("turnstile_verified_at", 0)
+                current_time = datetime.utcnow().timestamp()
+
+                if current_time - verified_at > verification_timeout:
+                    # Verification expired, clear status and redirect to verification page
+                    session.pop("turnstile_verified", None)
+                    session.pop("turnstile_verified_at", None)
+
+                    redirect_url = request.url
+                    # Force HTTPS in HuggingFace Spaces
+                    if IS_SPACES and redirect_url.startswith("http://"):
+                        redirect_url = redirect_url.replace("http://", "https://", 1)
+
+                    if request.path.startswith("/api/"):
+                        return jsonify({"error": "Turnstile verification expired"}), 403
+                    return redirect(
+                        url_for("turnstile_page", redirect_url=redirect_url)
+                    )
+
+
+@app.route("/turnstile", methods=["GET"])
+def turnstile_page():
+    """Display Cloudflare Turnstile verification page"""
+    redirect_url = request.args.get("redirect_url", url_for("arena", _external=True))
+
+    # Force HTTPS in HuggingFace Spaces
+    if IS_SPACES and redirect_url.startswith("http://"):
+        redirect_url = redirect_url.replace("http://", "https://", 1)
+
+    return render_template(
+        "turnstile.html",
+        turnstile_site_key=app.config["TURNSTILE_SITE_KEY"],
+        redirect_url=redirect_url,
+    )
+
+
+@app.route("/verify-turnstile", methods=["POST"])
+def verify_turnstile():
+    """Verify Cloudflare Turnstile token"""
+    token = request.form.get("cf-turnstile-response")
+    redirect_url = request.form.get("redirect_url", url_for("arena", _external=True))
+
+    # Force HTTPS in HuggingFace Spaces
+    if IS_SPACES and redirect_url.startswith("http://"):
+        redirect_url = redirect_url.replace("http://", "https://", 1)
+
+    if not token:
+        # If AJAX request, return JSON error
+        if request.headers.get("X-Requested-With") == "XMLHttpRequest":
+            return (
+                jsonify({"success": False, "error": "Missing verification token"}),
+                400,
+            )
+        # Otherwise redirect back to turnstile page
+        return redirect(url_for("turnstile_page", redirect_url=redirect_url))
+
+    # Verify token with Cloudflare
+    data = {
+        "secret": app.config["TURNSTILE_SECRET_KEY"],
+        "response": token,
+        "remoteip": request.remote_addr,
+    }
+
+    try:
+        response = requests.post(app.config["TURNSTILE_VERIFY_URL"], data=data)
+        result = response.json()
+
+        if result.get("success"):
+            # Set verification status in session
+            session["turnstile_verified"] = True
+            session["turnstile_verified_at"] = datetime.utcnow().timestamp()
+
+            # Determine response type based on request
+            is_xhr = request.headers.get("X-Requested-With") == "XMLHttpRequest"
+            accepts_json = "application/json" in request.headers.get("Accept", "")
+
+            # If AJAX or JSON request, return success JSON
+            if is_xhr or accepts_json:
+                return jsonify({"success": True, "redirect": redirect_url})
+
+            # For regular form submissions, redirect to the target URL
+            return redirect(redirect_url)
+        else:
+            # Verification failed
+            app.logger.warning(f"Turnstile verification failed: {result}")
+
+            # If AJAX request, return JSON error
+            if request.headers.get("X-Requested-With") == "XMLHttpRequest":
+                return jsonify({"success": False, "error": "Verification failed"}), 403
+
+            # Otherwise redirect back to turnstile page
+            return redirect(url_for("turnstile_page", redirect_url=redirect_url))
+
+    except Exception as e:
+        app.logger.error(f"Turnstile verification error: {str(e)}")
+
+        # If AJAX request, return JSON error
+        if request.headers.get("X-Requested-With") == "XMLHttpRequest":
+            return (
+                jsonify(
+                    {"success": False, "error": "Server error during verification"}
+                ),
+                500,
+            )
+
+        # Otherwise redirect back to turnstile page
+        return redirect(url_for("turnstile_page", redirect_url=redirect_url))
+
+
+@app.route("/")
+def arena():
+    return render_template("arena.html")
+
+
+@app.route("/leaderboard")
+def leaderboard():
+    tts_leaderboard = get_leaderboard_data(ModelType.TTS)
+    conversational_leaderboard = get_leaderboard_data(ModelType.CONVERSATIONAL)
+    top_voters = get_top_voters(10)  # Get top 10 voters
+
+    # Initialize personal leaderboard data
+    tts_personal_leaderboard = None
+    conversational_personal_leaderboard = None
+    user_leaderboard_visibility = None
+
+    # If user is logged in, get their personal leaderboard and visibility setting
+    if current_user.is_authenticated:
+        tts_personal_leaderboard = get_user_leaderboard(current_user.id, ModelType.TTS)
+        conversational_personal_leaderboard = get_user_leaderboard(
+            current_user.id, ModelType.CONVERSATIONAL
+        )
+        user_leaderboard_visibility = current_user.show_in_leaderboard
+
+    # Get key dates for the timeline
+    tts_key_dates = get_key_historical_dates(ModelType.TTS)
+    conversational_key_dates = get_key_historical_dates(ModelType.CONVERSATIONAL)
+
+    # Format dates for display in the dropdown
+    formatted_tts_dates = [date.strftime("%B %Y") for date in tts_key_dates]
+    formatted_conversational_dates = [
+        date.strftime("%B %Y") for date in conversational_key_dates
+    ]
+
+    return render_template(
+        "leaderboard.html",
+        tts_leaderboard=tts_leaderboard,
+        conversational_leaderboard=conversational_leaderboard,
+        tts_personal_leaderboard=tts_personal_leaderboard,
+        conversational_personal_leaderboard=conversational_personal_leaderboard,
+        tts_key_dates=tts_key_dates,
+        conversational_key_dates=conversational_key_dates,
+        formatted_tts_dates=formatted_tts_dates,
+        formatted_conversational_dates=formatted_conversational_dates,
+        top_voters=top_voters,
+        user_leaderboard_visibility=user_leaderboard_visibility
+    )
+
+
+@app.route("/api/historical-leaderboard/<model_type>")
+def historical_leaderboard(model_type):
+    """Get historical leaderboard data for a specific date"""
+    if model_type not in [ModelType.TTS, ModelType.CONVERSATIONAL]:
+        return jsonify({"error": "Invalid model type"}), 400
+
+    # Get date from query parameter
+    date_str = request.args.get("date")
+    if not date_str:
+        return jsonify({"error": "Date parameter is required"}), 400
+
+    try:
+        # Parse date from URL parameter (format: YYYY-MM-DD)
+        target_date = datetime.strptime(date_str, "%Y-%m-%d")
+
+        # Get historical leaderboard data
+        leaderboard_data = get_historical_leaderboard_data(model_type, target_date)
+
+        return jsonify(
+            {"date": target_date.strftime("%B %d, %Y"), "leaderboard": leaderboard_data}
+        )
+    except ValueError:
+        return jsonify({"error": "Invalid date format. Use YYYY-MM-DD"}), 400
+
+
+@app.route("/about")
+def about():
+    return render_template("about.html")
+
+
+@app.route("/api/tts/generate", methods=["POST"])
+@limiter.limit("10 per minute")
+def generate_tts():
+    # If verification not setup, handle it first
+    if app.config["TURNSTILE_ENABLED"] and not session.get("turnstile_verified"):
+        return jsonify({"error": "Turnstile verification required"}), 403
+
+    data = request.json
+    text = data.get("text")
+
+    if not text or len(text) > 1000:
+        return jsonify({"error": "Invalid or too long text"}), 400
+
+    # Get two random TTS models
+    available_models = Model.query.filter_by(
+        model_type=ModelType.TTS, is_active=True
+    ).all()
+    if len(available_models) < 2:
+        return jsonify({"error": "Not enough TTS models available"}), 500
+
+    selected_models = random.sample(available_models, 2)
+
+    try:
+        # Generate TTS for both models concurrently
+        audio_files = []
+        model_ids = []
+
+        # Function to process a single model
+        def process_model(model):
+            # Call TTS service
+            audio_path = predict_tts(text, model.id)
+
+            # Copy to temp dir with unique name
+            file_uuid = str(uuid.uuid4())
+            dest_path = os.path.join(TEMP_AUDIO_DIR, f"{file_uuid}.wav")
+            shutil.copy(audio_path, dest_path)
+
+            return {"model_id": model.id, "audio_path": dest_path}
+
+        # Use ThreadPoolExecutor to process models concurrently
+        with ThreadPoolExecutor(max_workers=2) as executor:
+            results = list(executor.map(process_model, selected_models))
+
+        # Extract results
+        for result in results:
+            model_ids.append(result["model_id"])
+            audio_files.append(result["audio_path"])
+
+        # Create session
+        session_id = str(uuid.uuid4())
+        app.tts_sessions[session_id] = {
+            "model_a": model_ids[0],
+            "model_b": model_ids[1],
+            "audio_a": audio_files[0],
+            "audio_b": audio_files[1],
+            "text": text,
+            "created_at": datetime.utcnow(),
+            "expires_at": datetime.utcnow() + timedelta(minutes=30),
+            "voted": False,
+        }
+
+        # Return audio file paths and session
+        return jsonify(
+            {
+                "session_id": session_id,
+                "audio_a": f"/api/tts/audio/{session_id}/a",
+                "audio_b": f"/api/tts/audio/{session_id}/b",
+                "expires_in": 1800,  # 30 minutes in seconds
+            }
+        )
+
+    except Exception as e:
+        app.logger.error(f"TTS generation error: {str(e)}")
+        return jsonify({"error": "Failed to generate TTS"}), 500
+
+
+@app.route("/api/tts/audio/<session_id>/<model_key>")
+def get_audio(session_id, model_key):
+    # If verification not setup, handle it first
+    if app.config["TURNSTILE_ENABLED"] and not session.get("turnstile_verified"):
+        return jsonify({"error": "Turnstile verification required"}), 403
+
+    if session_id not in app.tts_sessions:
+        return jsonify({"error": "Invalid or expired session"}), 404
+
+    session_data = app.tts_sessions[session_id]
+
+    # Check if session expired
+    if datetime.utcnow() > session_data["expires_at"]:
+        cleanup_session(session_id)
+        return jsonify({"error": "Session expired"}), 410
+
+    if model_key == "a":
+        audio_path = session_data["audio_a"]
+    elif model_key == "b":
+        audio_path = session_data["audio_b"]
+    else:
+        return jsonify({"error": "Invalid model key"}), 400
+
+    # Check if file exists
+    if not os.path.exists(audio_path):
+        return jsonify({"error": "Audio file not found"}), 404
+
+    return send_file(audio_path, mimetype="audio/wav")
+
+
+@app.route("/api/tts/vote", methods=["POST"])
+@limiter.limit("30 per minute")
+def submit_vote():
+    # If verification not setup, handle it first
+    if app.config["TURNSTILE_ENABLED"] and not session.get("turnstile_verified"):
+        return jsonify({"error": "Turnstile verification required"}), 403
+
+    data = request.json
+    session_id = data.get("session_id")
+    chosen_model_key = data.get("chosen_model")  # "a" or "b"
+
+    if not session_id or session_id not in app.tts_sessions:
+        return jsonify({"error": "Invalid or expired session"}), 404
+
+    if not chosen_model_key or chosen_model_key not in ["a", "b"]:
+        return jsonify({"error": "Invalid chosen model"}), 400
+
+    session_data = app.tts_sessions[session_id]
+
+    # Check if session expired
+    if datetime.utcnow() > session_data["expires_at"]:
+        cleanup_session(session_id)
+        return jsonify({"error": "Session expired"}), 410
+
+    # Check if already voted
+    if session_data["voted"]:
+        return jsonify({"error": "Vote already submitted for this session"}), 400
+
+    # Get model IDs and audio paths
+    chosen_id = (
+        session_data["model_a"] if chosen_model_key == "a" else session_data["model_b"]
+    )
+    rejected_id = (
+        session_data["model_b"] if chosen_model_key == "a" else session_data["model_a"]
+    )
+    chosen_audio_path = (
+        session_data["audio_a"] if chosen_model_key == "a" else session_data["audio_b"]
+    )
+    rejected_audio_path = (
+        session_data["audio_b"] if chosen_model_key == "a" else session_data["audio_a"]
+    )
+
+    # Record vote in database
+    user_id = current_user.id if current_user.is_authenticated else None
+    vote, error = record_vote(
+        user_id, session_data["text"], chosen_id, rejected_id, ModelType.TTS
+    )
+
+    if error:
+        return jsonify({"error": error}), 500
+
+    # --- Save preference data ---
+    try:
+        vote_uuid = str(uuid.uuid4())
+        vote_dir = os.path.join("./votes", vote_uuid)
+        os.makedirs(vote_dir, exist_ok=True)
+
+        # Copy audio files
+        shutil.copy(chosen_audio_path, os.path.join(vote_dir, "chosen.wav"))
+        shutil.copy(rejected_audio_path, os.path.join(vote_dir, "rejected.wav"))
+
+        # Create metadata
+        chosen_model_obj = Model.query.get(chosen_id)
+        rejected_model_obj = Model.query.get(rejected_id)
+        metadata = {
+            "text": session_data["text"],
+            "chosen_model": chosen_model_obj.name if chosen_model_obj else "Unknown",
+            "chosen_model_id": chosen_model_obj.id if chosen_model_obj else "Unknown",
+            "rejected_model": rejected_model_obj.name if rejected_model_obj else "Unknown",
+            "rejected_model_id": rejected_model_obj.id if rejected_model_obj else "Unknown",
+            "session_id": session_id,
+            "timestamp": datetime.utcnow().isoformat(),
+            "username": current_user.username if current_user.is_authenticated else None,
+            "model_type": "TTS"
+        }
+        with open(os.path.join(vote_dir, "metadata.json"), "w") as f:
+            json.dump(metadata, f, indent=2)
+
+    except Exception as e:
+        app.logger.error(f"Error saving preference data for vote {session_id}: {str(e)}")
+        # Continue even if saving preference data fails, vote is already recorded
+
+    # Mark session as voted
+    session_data["voted"] = True
+
+    # Return updated models (use previously fetched objects)
+    return jsonify(
+        {
+            "success": True,
+            "chosen_model": {"id": chosen_id, "name": chosen_model_obj.name if chosen_model_obj else "Unknown"},
+            "rejected_model": {
+                "id": rejected_id,
+                "name": rejected_model_obj.name if rejected_model_obj else "Unknown",
+            },
+            "names": {
+                "a": (
+                    chosen_model_obj.name if chosen_model_key == "a" else rejected_model_obj.name
+                    if chosen_model_obj and rejected_model_obj else "Unknown"
+                ),
+                "b": (
+                    rejected_model_obj.name if chosen_model_key == "a" else chosen_model_obj.name
+                    if chosen_model_obj and rejected_model_obj else "Unknown"
+                ),
+            },
+        }
+    )
+
+
+def cleanup_session(session_id):
+    """Remove session and its audio files"""
+    if session_id in app.tts_sessions:
+        session = app.tts_sessions[session_id]
+
+        # Remove audio files
+        for audio_file in [session["audio_a"], session["audio_b"]]:
+            if os.path.exists(audio_file):
+                try:
+                    os.remove(audio_file)
+                except Exception as e:
+                    app.logger.error(f"Error removing audio file: {str(e)}")
+
+        # Remove session
+        del app.tts_sessions[session_id]
+
+
+@app.route("/api/conversational/generate", methods=["POST"])
+@limiter.limit("5 per minute")
+def generate_podcast():
+    # If verification not setup, handle it first
+    if app.config["TURNSTILE_ENABLED"] and not session.get("turnstile_verified"):
+        return jsonify({"error": "Turnstile verification required"}), 403
+
+    data = request.json
+    script = data.get("script")
+
+    if not script or not isinstance(script, list) or len(script) < 2:
+        return jsonify({"error": "Invalid script format or too short"}), 400
+
+    # Validate script format
+    for line in script:
+        if not isinstance(line, dict) or "text" not in line or "speaker_id" not in line:
+            return (
+                jsonify(
+                    {
+                        "error": "Invalid script line format. Each line must have text and speaker_id"
+                    }
+                ),
+                400,
+            )
+        if (
+            not line["text"]
+            or not isinstance(line["speaker_id"], int)
+            or line["speaker_id"] not in [0, 1]
+        ):
+            return (
+                jsonify({"error": "Invalid script content. Speaker ID must be 0 or 1"}),
+                400,
+            )
+
+    # Get two conversational models (currently only CSM and PlayDialog)
+    available_models = Model.query.filter_by(
+        model_type=ModelType.CONVERSATIONAL, is_active=True
+    ).all()
+
+    if len(available_models) < 2:
+        return jsonify({"error": "Not enough conversational models available"}), 500
+
+    selected_models = random.sample(available_models, 2)
+
+    try:
+        # Generate audio for both models concurrently
+        audio_files = []
+        model_ids = []
+
+        # Function to process a single model
+        def process_model(model):
+            # Call conversational TTS service
+            audio_content = predict_tts(script, model.id)
+
+            # Save to temp file with unique name
+            file_uuid = str(uuid.uuid4())
+            dest_path = os.path.join(TEMP_AUDIO_DIR, f"{file_uuid}.wav")
+
+            with open(dest_path, "wb") as f:
+                f.write(audio_content)
+
+            return {"model_id": model.id, "audio_path": dest_path}
+
+        # Use ThreadPoolExecutor to process models concurrently
+        with ThreadPoolExecutor(max_workers=2) as executor:
+            results = list(executor.map(process_model, selected_models))
+
+        # Extract results
+        for result in results:
+            model_ids.append(result["model_id"])
+            audio_files.append(result["audio_path"])
+
+        # Create session
+        session_id = str(uuid.uuid4())
+        script_text = " ".join([line["text"] for line in script])
+        app.conversational_sessions[session_id] = {
+            "model_a": model_ids[0],
+            "model_b": model_ids[1],
+            "audio_a": audio_files[0],
+            "audio_b": audio_files[1],
+            "text": script_text[:1000],  # Limit text length
+            "created_at": datetime.utcnow(),
+            "expires_at": datetime.utcnow() + timedelta(minutes=30),
+            "voted": False,
+            "script": script,
+        }
+
+        # Return audio file paths and session
+        return jsonify(
+            {
+                "session_id": session_id,
+                "audio_a": f"/api/conversational/audio/{session_id}/a",
+                "audio_b": f"/api/conversational/audio/{session_id}/b",
+                "expires_in": 1800,  # 30 minutes in seconds
+            }
+        )
+
+    except Exception as e:
+        app.logger.error(f"Conversational generation error: {str(e)}")
+        return jsonify({"error": f"Failed to generate podcast: {str(e)}"}), 500
+
+
+@app.route("/api/conversational/audio/<session_id>/<model_key>")
+def get_podcast_audio(session_id, model_key):
+    # If verification not setup, handle it first
+    if app.config["TURNSTILE_ENABLED"] and not session.get("turnstile_verified"):
+        return jsonify({"error": "Turnstile verification required"}), 403
+
+    if session_id not in app.conversational_sessions:
+        return jsonify({"error": "Invalid or expired session"}), 404
+
+    session_data = app.conversational_sessions[session_id]
+
+    # Check if session expired
+    if datetime.utcnow() > session_data["expires_at"]:
+        cleanup_conversational_session(session_id)
+        return jsonify({"error": "Session expired"}), 410
+
+    if model_key == "a":
+        audio_path = session_data["audio_a"]
+    elif model_key == "b":
+        audio_path = session_data["audio_b"]
+    else:
+        return jsonify({"error": "Invalid model key"}), 400
+
+    # Check if file exists
+    if not os.path.exists(audio_path):
+        return jsonify({"error": "Audio file not found"}), 404
+
+    return send_file(audio_path, mimetype="audio/wav")
+
+
+@app.route("/api/conversational/vote", methods=["POST"])
+@limiter.limit("30 per minute")
+def submit_podcast_vote():
+    # If verification not setup, handle it first
+    if app.config["TURNSTILE_ENABLED"] and not session.get("turnstile_verified"):
+        return jsonify({"error": "Turnstile verification required"}), 403
+
+    data = request.json
+    session_id = data.get("session_id")
+    chosen_model_key = data.get("chosen_model")  # "a" or "b"
+
+    if not session_id or session_id not in app.conversational_sessions:
+        return jsonify({"error": "Invalid or expired session"}), 404
+
+    if not chosen_model_key or chosen_model_key not in ["a", "b"]:
+        return jsonify({"error": "Invalid chosen model"}), 400
+
+    session_data = app.conversational_sessions[session_id]
+
+    # Check if session expired
+    if datetime.utcnow() > session_data["expires_at"]:
+        cleanup_conversational_session(session_id)
+        return jsonify({"error": "Session expired"}), 410
+
+    # Check if already voted
+    if session_data["voted"]:
+        return jsonify({"error": "Vote already submitted for this session"}), 400
+
+    # Get model IDs and audio paths
+    chosen_id = (
+        session_data["model_a"] if chosen_model_key == "a" else session_data["model_b"]
+    )
+    rejected_id = (
+        session_data["model_b"] if chosen_model_key == "a" else session_data["model_a"]
+    )
+    chosen_audio_path = (
+        session_data["audio_a"] if chosen_model_key == "a" else session_data["audio_b"]
+    )
+    rejected_audio_path = (
+        session_data["audio_b"] if chosen_model_key == "a" else session_data["audio_a"]
+    )
+
+    # Record vote in database
+    user_id = current_user.id if current_user.is_authenticated else None
+    vote, error = record_vote(
+        user_id, session_data["text"], chosen_id, rejected_id, ModelType.CONVERSATIONAL
+    )
+
+    if error:
+        return jsonify({"error": error}), 500
+
+    # --- Save preference data ---\
+    try:
+        vote_uuid = str(uuid.uuid4())
+        vote_dir = os.path.join("./votes", vote_uuid)
+        os.makedirs(vote_dir, exist_ok=True)
+
+        # Copy audio files
+        shutil.copy(chosen_audio_path, os.path.join(vote_dir, "chosen.wav"))
+        shutil.copy(rejected_audio_path, os.path.join(vote_dir, "rejected.wav"))
+
+        # Create metadata
+        chosen_model_obj = Model.query.get(chosen_id)
+        rejected_model_obj = Model.query.get(rejected_id)
+        metadata = {
+            "script": session_data["script"], # Save the full script
+            "chosen_model": chosen_model_obj.name if chosen_model_obj else "Unknown",
+            "chosen_model_id": chosen_model_obj.id if chosen_model_obj else "Unknown",
+            "rejected_model": rejected_model_obj.name if rejected_model_obj else "Unknown",
+            "rejected_model_id": rejected_model_obj.id if rejected_model_obj else "Unknown",
+            "session_id": session_id,
+            "timestamp": datetime.utcnow().isoformat(),
+            "username": current_user.username if current_user.is_authenticated else None,
+            "model_type": "CONVERSATIONAL"
+        }
+        with open(os.path.join(vote_dir, "metadata.json"), "w") as f:
+            json.dump(metadata, f, indent=2)
+
+    except Exception as e:
+        app.logger.error(f"Error saving preference data for conversational vote {session_id}: {str(e)}")
+        # Continue even if saving preference data fails, vote is already recorded
+
+    # Mark session as voted
+    session_data["voted"] = True
+
+    # Return updated models (use previously fetched objects)
+    return jsonify(
+        {
+            "success": True,
+            "chosen_model": {"id": chosen_id, "name": chosen_model_obj.name if chosen_model_obj else "Unknown"},
+            "rejected_model": {
+                "id": rejected_id,
+                "name": rejected_model_obj.name if rejected_model_obj else "Unknown",
+            },
+            "names": {
+                "a": Model.query.get(session_data["model_a"]).name,
+                "b": Model.query.get(session_data["model_b"]).name,
+            },
+        }
+    )
+
+
+def cleanup_conversational_session(session_id):
+    """Remove conversational session and its audio files"""
+    if session_id in app.conversational_sessions:
+        session = app.conversational_sessions[session_id]
+
+        # Remove audio files
+        for audio_file in [session["audio_a"], session["audio_b"]]:
+            if os.path.exists(audio_file):
+                try:
+                    os.remove(audio_file)
+                except Exception as e:
+                    app.logger.error(
+                        f"Error removing conversational audio file: {str(e)}"
+                    )
+
+        # Remove session
+        del app.conversational_sessions[session_id]
+
+
+# Schedule periodic cleanup
+def setup_cleanup():
+    def cleanup_expired_sessions():
+        with app.app_context(): # Ensure app context for logging
+            current_time = datetime.utcnow()
+            # Cleanup TTS sessions
+            expired_tts_sessions = [
+                sid
+                for sid, session_data in app.tts_sessions.items()
+                if current_time > session_data["expires_at"]
+            ]
+            for sid in expired_tts_sessions:
+                cleanup_session(sid)
+
+            # Cleanup conversational sessions
+            expired_conv_sessions = [
+                sid
+                for sid, session_data in app.conversational_sessions.items()
+                if current_time > session_data["expires_at"]
+            ]
+            for sid in expired_conv_sessions:
+                cleanup_conversational_session(sid)
+            app.logger.info(f"Cleaned up {len(expired_tts_sessions)} TTS and {len(expired_conv_sessions)} conversational sessions.")
+
+
+    # Run cleanup every 15 minutes
+    scheduler = BackgroundScheduler()
+    scheduler.add_job(cleanup_expired_sessions, "interval", minutes=15)
+    scheduler.start()
+    print("Cleanup scheduler started") # Use print for startup messages
+
+
+# Schedule periodic tasks (database sync and preference upload)
+def setup_periodic_tasks():
+    """Setup periodic database synchronization and preference data upload for Spaces"""
+    if not IS_SPACES:
+        return
+
+    db_path = app.config["SQLALCHEMY_DATABASE_URI"].replace("sqlite:///", "instance/") # Get relative path
+    preferences_repo_id = "TTS-AGI/arena-v2-preferences"
+    database_repo_id = "TTS-AGI/database-arena-v2"
+    votes_dir = "./votes"
+
+    def sync_database():
+        """Uploads the database to HF dataset"""
+        with app.app_context(): # Ensure app context for logging
+            try:
+                if not os.path.exists(db_path):
+                    app.logger.warning(f"Database file not found at {db_path}, skipping sync.")
+                    return
+
+                api = HfApi(token=os.getenv("HF_TOKEN"))
+                api.upload_file(
+                    path_or_fileobj=db_path,
+                    path_in_repo="tts_arena.db",
+                    repo_id=database_repo_id,
+                    repo_type="dataset",
+                )
+                app.logger.info(f"Database uploaded to {database_repo_id} at {datetime.utcnow()}")
+            except Exception as e:
+                app.logger.error(f"Error uploading database to {database_repo_id}: {str(e)}")
+
+    def sync_preferences_data():
+        """Zips and uploads preference data folders to HF dataset"""
+        with app.app_context(): # Ensure app context for logging
+            if not os.path.isdir(votes_dir):
+                # app.logger.info(f"Votes directory '{votes_dir}' not found, skipping preference sync.")
+                return # Don't log every 5 mins if dir doesn't exist yet
+
+            try:
+                api = HfApi(token=os.getenv("HF_TOKEN"))
+                vote_uuids = [d for d in os.listdir(votes_dir) if os.path.isdir(os.path.join(votes_dir, d))]
+
+                if not vote_uuids:
+                    # app.logger.info("No new preference data to upload.")
+                    return # Don't log every 5 mins if no new data
+
+                uploaded_count = 0
+                for vote_uuid in vote_uuids:
+                    dir_path = os.path.join(votes_dir, vote_uuid)
+                    zip_base_path = os.path.join(votes_dir, vote_uuid) # Name zip file same as folder
+                    zip_path = f"{zip_base_path}.zip"
+
+                    try:
+                        # Create zip archive
+                        shutil.make_archive(zip_base_path, 'zip', dir_path)
+                        app.logger.info(f"Created zip archive: {zip_path}")
+
+                        # Upload zip file
+                        api.upload_file(
+                            path_or_fileobj=zip_path,
+                            path_in_repo=f"votes/{year}/{month}/{vote_uuid}.zip",
+                            repo_id=preferences_repo_id,
+                            repo_type="dataset",
+                            commit_message=f"Add preference data {vote_uuid}"
+                        )
+                        app.logger.info(f"Successfully uploaded {zip_path} to {preferences_repo_id}")
+                        uploaded_count += 1
+
+                        # Cleanup local files after successful upload
+                        try:
+                            os.remove(zip_path)
+                            shutil.rmtree(dir_path)
+                            app.logger.info(f"Cleaned up local files: {zip_path} and {dir_path}")
+                        except OSError as e:
+                            app.logger.error(f"Error cleaning up files for {vote_uuid}: {str(e)}")
+
+                    except Exception as upload_err:
+                        app.logger.error(f"Error processing or uploading preference data for {vote_uuid}: {str(upload_err)}")
+                        # Optionally remove zip if it exists but upload failed
+                        if os.path.exists(zip_path):
+                             try:
+                                 os.remove(zip_path)
+                             except OSError as e:
+                                 app.logger.error(f"Error removing zip file after failed upload {zip_path}: {str(e)}")
+                        # Keep the original folder for the next attempt
+
+                if uploaded_count > 0:
+                    app.logger.info(f"Finished preference data sync. Uploaded {uploaded_count} new entries.")
+
+            except Exception as e:
+                app.logger.error(f"General error during preference data sync: {str(e)}")
+
+
+    # Schedule periodic tasks
+    scheduler = BackgroundScheduler()
+    # Sync database less frequently if needed, e.g., every 15 minutes
+    scheduler.add_job(sync_database, "interval", minutes=15, id="sync_db_job")
+    # Sync preferences more frequently
+    scheduler.add_job(sync_preferences_data, "interval", minutes=5, id="sync_pref_job")
+    scheduler.start()
+    print("Periodic tasks scheduler started (DB sync and Preferences upload)") # Use print for startup
+
+
+@app.cli.command("init-db")
+def init_db():
+    """Initialize the database."""
+    with app.app_context():
+        db.create_all()
+        print("Database initialized!")
+
+
+@app.route("/api/toggle-leaderboard-visibility", methods=["POST"])
+def toggle_leaderboard_visibility():
+    """Toggle whether the current user appears in the top voters leaderboard"""
+    if not current_user.is_authenticated:
+        return jsonify({"error": "You must be logged in to change this setting"}), 401
+    
+    new_status = toggle_user_leaderboard_visibility(current_user.id)
+    if new_status is None:
+        return jsonify({"error": "User not found"}), 404
+        
+    return jsonify({
+        "success": True, 
+        "visible": new_status,
+        "message": "You are now visible in the voters leaderboard" if new_status else "You are now hidden from the voters leaderboard"
+    })
+
 
 if __name__ == "__main__":
-    app.queue(default_concurrency_limit=50, api_open=False).launch(show_api=False)
+    with app.app_context():
+        # Ensure ./instance and ./votes directories exist
+        os.makedirs("instance", exist_ok=True)
+        os.makedirs("./votes", exist_ok=True) # Create votes directory if it doesn't exist
+
+        # Download database if it doesn't exist (only on initial space start)
+        if IS_SPACES and not os.path.exists(app.config["SQLALCHEMY_DATABASE_URI"].replace("sqlite:///", "")):
+             try:
+                print("Database not found, downloading from HF dataset...")
+                hf_hub_download(
+                    repo_id="TTS-AGI/database-arena-v2",
+                    filename="tts_arena.db",
+                    repo_type="dataset",
+                    local_dir="instance", # download to instance/
+                    token=os.getenv("HF_TOKEN"),
+                )
+                print("Database downloaded successfully ✅")
+             except Exception as e:
+                 print(f"Error downloading database from HF dataset: {str(e)} ⚠️")
+
+
+        db.create_all()  # Create tables if they don't exist
+        insert_initial_models()
+        # Setup background tasks
+        setup_cleanup()
+        setup_periodic_tasks() # Renamed function call
+
+    # Configure Flask to recognize HTTPS when behind a reverse proxy
+    from werkzeug.middleware.proxy_fix import ProxyFix
+
+    # Apply ProxyFix middleware to handle reverse proxy headers
+    # This ensures Flask generates correct URLs with https scheme
+    # X-Forwarded-Proto header will be used to detect the original protocol
+    app.wsgi_app = ProxyFix(app.wsgi_app, x_proto=1, x_host=1)
+
+    # Force Flask to prefer HTTPS for generated URLs
+    app.config["PREFERRED_URL_SCHEME"] = "https"
+
+    from waitress import serve
+
+    # Configuration for 2 vCPUs:
+    # - threads: typically 4-8 threads per CPU core is a good balance
+    # - connection_limit: maximum concurrent connections
+    # - channel_timeout: prevent hanging connections
+    threads = 12  # 6 threads per vCPU is a good balance for mixed IO/CPU workloads
+
+    if IS_SPACES:
+        serve(
+            app,
+            host="0.0.0.0",
+            port=int(os.environ.get("PORT", 7860)),
+            threads=threads,
+            connection_limit=100,
+            channel_timeout=30,
+            url_scheme='https'
+        )
+    else:
+        print(f"Starting Waitress server with {threads} threads")
+        serve(
+            app,
+            host="0.0.0.0",
+            port=5000,
+            threads=threads,
+            connection_limit=100,
+            channel_timeout=30,
+            url_scheme='https' # Keep https for local dev if using proxy/tunnel
+        )

auth.py

@@ -0,0 +1,104 @@
+from flask import Blueprint, redirect, url_for, session, request, current_app, flash
+from flask_login import login_user, logout_user, current_user, login_required
+from authlib.integrations.flask_client import OAuth
+import os
+from models import db, User
+import requests
+from functools import wraps
+
+auth = Blueprint("auth", __name__)
+oauth = OAuth()
+
+
+def init_oauth(app):
+    oauth.init_app(app)
+    oauth.register(
+        name="huggingface",
+        client_id=os.getenv("OAUTH_CLIENT_ID"),
+        client_secret=os.getenv("OAUTH_CLIENT_SECRET"),
+        access_token_url="https://huggingface.co/oauth/token",
+        access_token_params=None,
+        authorize_url="https://huggingface.co/oauth/authorize",
+        authorize_params=None,
+        api_base_url="https://huggingface.co/api/",
+        client_kwargs={},
+    )
+
+
+def is_admin(user):
+    """Check if a user is in the ADMIN_USERS environment variable"""
+    if not user or not user.is_authenticated:
+        return False
+    
+    admin_users = os.getenv("ADMIN_USERS", "").split(",")
+    return user.username in [username.strip() for username in admin_users]
+
+
+def admin_required(f):
+    """Decorator to require admin access for a route"""
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if not current_user.is_authenticated:
+            flash("Please log in to access this page", "error")
+            return redirect(url_for("auth.login", next=request.url))
+        
+        if not is_admin(current_user):
+            flash("You do not have permission to access this page", "error")
+            return redirect(url_for("arena"))
+            
+        return f(*args, **kwargs)
+    return decorated_function
+
+
+@auth.route("/login")
+def login():
+    # Store the next URL to redirect after login
+    next_url = request.args.get("next") or url_for("arena")
+    session["next_url"] = next_url
+
+    redirect_uri = url_for("auth.authorize", _external=True, _scheme="https")
+    return oauth.huggingface.authorize_redirect(redirect_uri)
+
+
+@auth.route("/authorize")
+def authorize():
+    try:
+        # Get token without OpenID verification
+        token = oauth.huggingface.authorize_access_token()
+
+        # Fetch user info manually from HF API
+        headers = {"Authorization": f'Bearer {token["access_token"]}'}
+        resp = requests.get("https://huggingface.co/api/whoami-v2", headers=headers)
+
+        if not resp.ok:
+            flash("Failed to fetch user information from Hugging Face", "error")
+            return redirect(url_for("arena"))
+
+        user_info = resp.json()
+
+        # Check if user exists, otherwise create
+        user = User.query.filter_by(hf_id=user_info["id"]).first()
+        if not user:
+            user = User(username=user_info["name"], hf_id=user_info["id"])
+            db.session.add(user)
+            db.session.commit()
+
+        # Log in the user
+        login_user(user, remember=True)
+
+        # Redirect to the original page or default
+        next_url = session.pop("next_url", url_for("arena"))
+        return redirect(next_url)
+
+    except Exception as e:
+        current_app.logger.error(f"OAuth error: {str(e)}")
+        flash(f"Authentication error: {str(e)}", "error")
+        return redirect(url_for("arena"))
+
+
+@auth.route("/logout")
+@login_required
+def logout():
+    logout_user()
+    flash("You have been logged out", "info")
+    return redirect(url_for("arena"))

models.py

@@ -0,0 +1,575 @@
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import UserMixin
+from datetime import datetime
+import math
+from sqlalchemy import func
+
+db = SQLAlchemy()
+
+
+class User(db.Model, UserMixin):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(100), unique=True, nullable=False)
+    hf_id = db.Column(db.String(100), unique=True, nullable=False)
+    join_date = db.Column(db.DateTime, default=datetime.utcnow)
+    votes = db.relationship("Vote", backref="user", lazy=True)
+    show_in_leaderboard = db.Column(db.Boolean, default=True)
+
+    def __repr__(self):
+        return f"<User {self.username}>"
+
+
+class ModelType:
+    TTS = "tts"
+    CONVERSATIONAL = "conversational"
+
+
+class Model(db.Model):
+    id = db.Column(db.String(100), primary_key=True)
+    name = db.Column(db.String(100), nullable=False)
+    model_type = db.Column(db.String(20), nullable=False)  # 'tts' or 'conversational'
+    # Fix ambiguous foreign keys by specifying which foreign key to use
+    votes = db.relationship(
+        "Vote",
+        primaryjoin="or_(Model.id==Vote.model_chosen, Model.id==Vote.model_rejected)",
+        viewonly=True,
+    )
+    current_elo = db.Column(db.Float, default=1500.0)
+    win_count = db.Column(db.Integer, default=0)
+    match_count = db.Column(db.Integer, default=0)
+    is_open = db.Column(db.Boolean, default=False)
+    is_active = db.Column(
+        db.Boolean, default=True
+    )  # Whether the model is active and can be voted on
+    model_url = db.Column(db.String(255), nullable=True)
+
+    @property
+    def win_rate(self):
+        if self.match_count == 0:
+            return 0
+        return (self.win_count / self.match_count) * 100
+
+    def __repr__(self):
+        return f"<Model {self.name} ({self.model_type})>"
+
+
+class Vote(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, db.ForeignKey("user.id"), nullable=True)
+    text = db.Column(db.String(1000), nullable=False)
+    vote_date = db.Column(db.DateTime, default=datetime.utcnow)
+    model_chosen = db.Column(db.String(100), db.ForeignKey("model.id"), nullable=False)
+    model_rejected = db.Column(
+        db.String(100), db.ForeignKey("model.id"), nullable=False
+    )
+    model_type = db.Column(db.String(20), nullable=False)  # 'tts' or 'conversational'
+
+    chosen = db.relationship(
+        "Model",
+        foreign_keys=[model_chosen],
+        backref=db.backref("chosen_votes", lazy=True),
+    )
+    rejected = db.relationship(
+        "Model",
+        foreign_keys=[model_rejected],
+        backref=db.backref("rejected_votes", lazy=True),
+    )
+
+    def __repr__(self):
+        return f"<Vote {self.id}: {self.model_chosen} over {self.model_rejected} ({self.model_type})>"
+
+
+class EloHistory(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    model_id = db.Column(db.String(100), db.ForeignKey("model.id"), nullable=False)
+    timestamp = db.Column(db.DateTime, default=datetime.utcnow)
+    elo_score = db.Column(db.Float, nullable=False)
+    vote_id = db.Column(db.Integer, db.ForeignKey("vote.id"), nullable=True)
+    model_type = db.Column(db.String(20), nullable=False)  # 'tts' or 'conversational'
+
+    model = db.relationship("Model", backref=db.backref("elo_history", lazy=True))
+    vote = db.relationship("Vote", backref=db.backref("elo_changes", lazy=True))
+
+    def __repr__(self):
+        return f"<EloHistory {self.model_id}: {self.elo_score} at {self.timestamp} ({self.model_type})>"
+
+
+def calculate_elo_change(winner_elo, loser_elo, k_factor=32):
+    """Calculate Elo rating changes for a match."""
+    expected_winner = 1 / (1 + math.pow(10, (loser_elo - winner_elo) / 400))
+    expected_loser = 1 / (1 + math.pow(10, (winner_elo - loser_elo) / 400))
+
+    winner_new_elo = winner_elo + k_factor * (1 - expected_winner)
+    loser_new_elo = loser_elo + k_factor * (0 - expected_loser)
+
+    return winner_new_elo, loser_new_elo
+
+
+def record_vote(user_id, text, chosen_model_id, rejected_model_id, model_type):
+    """Record a vote and update Elo ratings."""
+    # Create the vote
+    vote = Vote(
+        user_id=user_id,  # Can be None for anonymous votes
+        text=text,
+        model_chosen=chosen_model_id,
+        model_rejected=rejected_model_id,
+        model_type=model_type,
+    )
+    db.session.add(vote)
+    db.session.flush()  # Get the vote ID without committing
+
+    # Get the models
+    chosen_model = Model.query.filter_by(
+        id=chosen_model_id, model_type=model_type
+    ).first()
+    rejected_model = Model.query.filter_by(
+        id=rejected_model_id, model_type=model_type
+    ).first()
+
+    if not chosen_model or not rejected_model:
+        db.session.rollback()
+        return None, "One or both models not found for the specified model type"
+
+    # Calculate new Elo ratings
+    new_chosen_elo, new_rejected_elo = calculate_elo_change(
+        chosen_model.current_elo, rejected_model.current_elo
+    )
+
+    # Update model stats
+    chosen_model.current_elo = new_chosen_elo
+    chosen_model.win_count += 1
+    chosen_model.match_count += 1
+
+    rejected_model.current_elo = new_rejected_elo
+    rejected_model.match_count += 1
+
+    # Record Elo history
+    chosen_history = EloHistory(
+        model_id=chosen_model_id,
+        elo_score=new_chosen_elo,
+        vote_id=vote.id,
+        model_type=model_type,
+    )
+
+    rejected_history = EloHistory(
+        model_id=rejected_model_id,
+        elo_score=new_rejected_elo,
+        vote_id=vote.id,
+        model_type=model_type,
+    )
+
+    db.session.add_all([chosen_history, rejected_history])
+    db.session.commit()
+
+    return vote, None
+
+
+def get_leaderboard_data(model_type):
+    """
+    Get leaderboard data for the specified model type.
+
+    Args:
+        model_type (str): The model type ('tts' or 'conversational')
+
+    Returns:
+        list: List of dictionaries containing model data for the leaderboard
+    """
+    query = Model.query.filter_by(model_type=model_type)
+
+    # Get models ordered by ELO score
+    models = query.order_by(Model.current_elo.desc()).all()
+
+    result = []
+    for rank, model in enumerate(models, 1):
+        # Determine tier based on rank
+        if rank <= 2:
+            tier = "tier-s"
+        elif rank <= 4:
+            tier = "tier-a"
+        elif rank <= 7:
+            tier = "tier-b"
+        else:
+            tier = ""
+
+        result.append(
+            {
+                "rank": rank,
+                "id": model.id,
+                "name": model.name,
+                "model_url": model.model_url,
+                "win_rate": f"{model.win_rate:.0f}%",
+                "total_votes": model.match_count,
+                "elo": int(model.current_elo),
+                "tier": tier,
+                "is_open": model.is_open,
+            }
+        )
+
+    return result
+
+
+def get_user_leaderboard(user_id, model_type):
+    """
+    Get personalized leaderboard data for a specific user.
+
+    Args:
+        user_id (int): The user ID
+        model_type (str): The model type ('tts' or 'conversational')
+
+    Returns:
+        list: List of dictionaries containing model data for the user's personal leaderboard
+    """
+    # Get all models of the specified type
+    models = Model.query.filter_by(model_type=model_type).all()
+
+    # Get user's votes
+    user_votes = Vote.query.filter_by(user_id=user_id, model_type=model_type).all()
+
+    # Calculate win counts and match counts for each model based on user's votes
+    model_stats = {model.id: {"wins": 0, "matches": 0} for model in models}
+
+    for vote in user_votes:
+        model_stats[vote.model_chosen]["wins"] += 1
+        model_stats[vote.model_chosen]["matches"] += 1
+        model_stats[vote.model_rejected]["matches"] += 1
+
+    # Calculate win rates and prepare result
+    result = []
+    for model in models:
+        stats = model_stats[model.id]
+        win_rate = (
+            (stats["wins"] / stats["matches"] * 100) if stats["matches"] > 0 else 0
+        )
+
+        # Only include models the user has voted on
+        if stats["matches"] > 0:
+            result.append(
+                {
+                    "id": model.id,
+                    "name": model.name,
+                    "model_url": model.model_url,
+                    "win_rate": f"{win_rate:.0f}%",
+                    "total_votes": stats["matches"],
+                    "wins": stats["wins"],
+                    "is_open": model.is_open,
+                }
+            )
+
+    # Sort by win rate descending
+    result.sort(key=lambda x: float(x["win_rate"].rstrip("%")), reverse=True)
+
+    # Add rank
+    for i, item in enumerate(result, 1):
+        item["rank"] = i
+
+    return result
+
+
+def get_historical_leaderboard_data(model_type, target_date=None):
+    """
+    Get leaderboard data at a specific date in history.
+
+    Args:
+        model_type (str): The model type ('tts' or 'conversational')
+        target_date (datetime): The target date for historical data, defaults to current time
+
+    Returns:
+        list: List of dictionaries containing model data for the historical leaderboard
+    """
+    if not target_date:
+        target_date = datetime.utcnow()
+
+    # Get all models of the specified type
+    models = Model.query.filter_by(model_type=model_type).all()
+
+    # Create a result list for the models
+    result = []
+
+    for model in models:
+        # Get the most recent EloHistory entry for each model before the target date
+        elo_entry = (
+            EloHistory.query.filter(
+                EloHistory.model_id == model.id,
+                EloHistory.model_type == model_type,
+                EloHistory.timestamp <= target_date,
+            )
+            .order_by(EloHistory.timestamp.desc())
+            .first()
+        )
+
+        # Skip models that have no history before the target date
+        if not elo_entry:
+            continue
+
+        # Count wins and matches up to the target date
+        match_count = Vote.query.filter(
+            db.or_(Vote.model_chosen == model.id, Vote.model_rejected == model.id),
+            Vote.model_type == model_type,
+            Vote.vote_date <= target_date,
+        ).count()
+
+        win_count = Vote.query.filter(
+            Vote.model_chosen == model.id,
+            Vote.model_type == model_type,
+            Vote.vote_date <= target_date,
+        ).count()
+
+        # Calculate win rate
+        win_rate = (win_count / match_count * 100) if match_count > 0 else 0
+
+        # Add to result
+        result.append(
+            {
+                "id": model.id,
+                "name": model.name,
+                "model_url": model.model_url,
+                "win_rate": f"{win_rate:.0f}%",
+                "total_votes": match_count,
+                "elo": int(elo_entry.elo_score),
+                "is_open": model.is_open,
+            }
+        )
+
+    # Sort by ELO score descending
+    result.sort(key=lambda x: x["elo"], reverse=True)
+
+    # Add rank and tier
+    for i, item in enumerate(result, 1):
+        item["rank"] = i
+        # Determine tier based on rank
+        if i <= 2:
+            item["tier"] = "tier-s"
+        elif i <= 4:
+            item["tier"] = "tier-a"
+        elif i <= 7:
+            item["tier"] = "tier-b"
+        else:
+            item["tier"] = ""
+
+    return result
+
+
+def get_key_historical_dates(model_type):
+    """
+    Get a list of key dates in the leaderboard history.
+
+    Args:
+        model_type (str): The model type ('tts' or 'conversational')
+
+    Returns:
+        list: List of datetime objects representing key dates
+    """
+    # Get first and most recent vote dates
+    first_vote = (
+        Vote.query.filter_by(model_type=model_type)
+        .order_by(Vote.vote_date.asc())
+        .first()
+    )
+    last_vote = (
+        Vote.query.filter_by(model_type=model_type)
+        .order_by(Vote.vote_date.desc())
+        .first()
+    )
+
+    if not first_vote or not last_vote:
+        return []
+
+    # Generate a list of key dates - first day of each month between the first and last vote
+    dates = []
+    current_date = first_vote.vote_date.replace(day=1)
+    end_date = last_vote.vote_date
+
+    while current_date <= end_date:
+        dates.append(current_date)
+        # Move to next month
+        if current_date.month == 12:
+            current_date = current_date.replace(year=current_date.year + 1, month=1)
+        else:
+            current_date = current_date.replace(month=current_date.month + 1)
+
+    # Add latest date
+    if dates and dates[-1].month != end_date.month or dates[-1].year != end_date.year:
+        dates.append(end_date)
+
+    return dates
+
+
+def insert_initial_models():
+    """Insert initial models into the database."""
+    tts_models = [
+        Model(
+            id="eleven-multilingual-v2",
+            name="Eleven Multilingual v2",
+            model_type=ModelType.TTS,
+            is_open=False,
+            model_url="https://elevenlabs.io/",
+        ),
+        Model(
+            id="eleven-turbo-v2.5",
+            name="Eleven Turbo v2.5",
+            model_type=ModelType.TTS,
+            is_open=False,
+            model_url="https://elevenlabs.io/",
+        ),
+        Model(
+            id="eleven-flash-v2.5",
+            name="Eleven Flash v2.5",
+            model_type=ModelType.TTS,
+            is_open=False,
+            model_url="https://elevenlabs.io/",
+        ),
+        Model(
+            id="cartesia-sonic-2",
+            name="Cartesia Sonic 2",
+            model_type=ModelType.TTS,
+            is_open=False,
+            model_url="https://cartesia.ai/",
+        ),
+        Model(
+            id="spark-tts",
+            name="Spark TTS",
+            model_type=ModelType.TTS,
+            is_open=False,
+            model_url="https://github.com/SparkAudio/Spark-TTS",
+        ),
+        Model(
+            id="playht-2.0",
+            name="PlayHT 2.0",
+            model_type=ModelType.TTS,
+            is_open=False,
+            model_url="https://play.ht/",
+        ),
+        Model(
+            id="styletts2",
+            name="StyleTTS 2",
+            model_type=ModelType.TTS,
+            is_open=True,
+            model_url="https://github.com/yl4579/StyleTTS2",
+        ),
+        Model(
+            id="kokoro-v1",
+            name="Kokoro v1.0",
+            model_type=ModelType.TTS,
+            is_open=True,
+            model_url="https://huggingface.co/hexgrad/Kokoro-82M",
+        ),
+        Model(
+            id="cosyvoice-2.0",
+            name="CosyVoice 2.0",
+            model_type=ModelType.TTS,
+            is_open=True,
+            model_url="https://github.com/FunAudioLLM/CosyVoice",
+        ),
+        Model(
+            id="papla-p1",
+            name="Papla P1",
+            model_type=ModelType.TTS,
+            is_open=False,
+            model_url="https://papla.media/",
+        ),
+        Model(
+            id="hume-octave",
+            name="Hume Octave",
+            model_type=ModelType.TTS,
+            is_open=False,
+            model_url="https://hume.ai/",
+        ),
+        Model(
+            id="megatts3",
+            name="MegaTTS 3",
+            model_type=ModelType.TTS,
+            is_open=True,
+            model_url="https://github.com/bytedance/MegaTTS3",
+        ),
+    ]
+    conversational_models = [
+        Model(
+            id="csm-1b",
+            name="CSM 1B",
+            model_type=ModelType.CONVERSATIONAL,
+            is_open=True,
+            model_url="https://huggingface.co/sesame/csm-1b",
+        ),
+        Model(
+            id="playdialog-1.0",
+            name="PlayDialog 1.0",
+            model_type=ModelType.CONVERSATIONAL,
+            is_open=False,
+            model_url="https://play.ht/",
+        ),
+        Model(
+            id="dia-1.6b",
+            name="Dia 1.6B",
+            model_type=ModelType.CONVERSATIONAL,
+            is_open=True,
+            model_url="https://huggingface.co/nari-labs/Dia-1.6B",
+        ),
+    ]
+
+    all_models = tts_models + conversational_models
+
+    for model in all_models:
+        existing = Model.query.filter_by(
+            id=model.id, model_type=model.model_type
+        ).first()
+        if not existing:
+            db.session.add(model)
+        else:
+            # Update model attributes if they've changed, but preserve other data
+            existing.name = model.name
+            existing.is_open = model.is_open
+            if model.is_active is not None:
+                existing.is_active = model.is_active
+
+    db.session.commit()
+
+
+def get_top_voters(limit=10):
+    """
+    Get the top voters by number of votes.
+    
+    Args:
+        limit (int): Number of users to return
+        
+    Returns:
+        list: List of dictionaries containing user data and vote counts
+    """
+    # Query users who have opted in to the leaderboard and have at least one vote
+    top_users = db.session.query(
+        User, func.count(Vote.id).label('vote_count')
+    ).join(Vote).filter(
+        User.show_in_leaderboard == True
+    ).group_by(User.id).order_by(
+        func.count(Vote.id).desc()
+    ).limit(limit).all()
+    
+    result = []
+    for i, (user, vote_count) in enumerate(top_users, 1):
+        result.append({
+            "rank": i,
+            "username": user.username,
+            "vote_count": vote_count,
+            "join_date": user.join_date.strftime("%b %d, %Y")
+        })
+    
+    return result
+
+
+def toggle_user_leaderboard_visibility(user_id):
+    """
+    Toggle whether a user appears in the voters leaderboard
+    
+    Args:
+        user_id (int): The user ID
+        
+    Returns:
+        bool: New visibility state
+    """
+    user = User.query.get(user_id)
+    if not user:
+        return None
+        
+    user.show_in_leaderboard = not user.show_in_leaderboard
+    db.session.commit()
+    
+    return user.show_in_leaderboard

requirements.txt

@@ -1,8 +1,14 @@
-datasets
-librosa
-soundfile
-gradio-client
-git+https://github.com/unitaryai/detoxify
-pyloudnorm
-langdetect
-pydub
+flask
+flask-login
+flask-sqlalchemy
+python-dotenv
+requests
+authlib
+werkzeug
+flask-limiter
+apscheduler
+flask-migrate
+gunicorn
+waitress
+fal-client
+git+https://github.com/playht/pyht

static/css/waveplayer.css

@@ -0,0 +1,134 @@
+/* WavePlayer Component Styles */
+.waveplayer {
+  position: relative;
+  width: 100%;
+  background-color: var(--light-gray, #f5f5f5);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+/* Hide native audio elements */
+.waveplayer audio {
+  display: none !important;
+}
+
+.waveplayer-controls {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  gap: 12px;
+}
+
+.waveplayer-play-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: var(--primary-color, #5046e5);
+  color: white;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.2s, transform 0.1s;
+  flex-shrink: 0;
+}
+
+.waveplayer-play-btn:hover {
+  background-color: var(--primary-hover, #4038c7);
+}
+
+.waveplayer-play-btn:active {
+  transform: scale(0.95);
+}
+
+.waveplayer-play-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.waveplayer-time {
+  font-size: 14px;
+  color: var(--text-color, #333);
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.waveplayer-waveform {
+  position: relative;
+  width: 100%;
+  height: 80px;
+  cursor: pointer;
+}
+
+.waveplayer-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+  z-index: 10;
+}
+
+.waveplayer-spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid rgba(80, 70, 229, 0.3);
+  border-radius: 50%;
+  border-top-color: var(--primary-color, #5046e5);
+  animation: spin 1s linear infinite;
+  margin-bottom: 8px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Dark mode styles */
+@media (prefers-color-scheme: dark) {
+  .waveplayer {
+    background-color: var(--light-gray, #1e1e24);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+  
+  .waveplayer-time {
+    color: var(--text-color, #e0e0e0);
+  }
+  
+  .waveplayer-loading {
+    background-color: rgba(30, 30, 36, 0.7);
+  }
+} 
+
+/* Mobile optimizations */
+@media (max-width: 768px) {
+  .waveplayer {
+    padding: 12px;
+  }
+  
+  .waveplayer-play-btn {
+    width: 44px;
+    height: 44px;
+  }
+  
+  .waveplayer-waveform {
+    height: 70px;
+    touch-action: none; /* Prevents scroll/zoom on touch */
+  }
+  
+  .waveplayer-time {
+    font-size: 12px;
+  }
+} 

static/js/waveplayer.js

@@ -0,0 +1,310 @@
+class WavePlayer {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      waveColor: '#d1d6e0',
+      progressColor: '#5046e5',
+      cursorColor: '#5046e5',
+      cursorWidth: 2,
+      height: 80,
+      responsive: true,
+      barWidth: 2,
+      barGap: 1,
+      hideScrollbar: true,
+      ...options
+    };
+    
+    this.isPlaying = false;
+    this.wavesurfer = null;
+    this.loadingIndicator = null;
+    this.playButton = null;
+    
+    this.init();
+  }
+  
+  init() {
+    // Create player UI
+    this.buildUI();
+    
+    // Initialize wavesurfer
+    this.initWavesurfer();
+    
+    // Setup event listeners
+    this.setupEvents();
+  }
+  
+  buildUI() {
+    // Clear container
+    this.container.innerHTML = '';
+    this.container.classList.add('waveplayer');
+    
+    // Add style to hide native audio elements that might be rendered by wavesurfer
+    const style = document.createElement('style');
+    style.textContent = `
+      .waveplayer audio {
+        display: none !important;
+      }
+      
+      /* Mobile optimizations */
+      @media (max-width: 768px) {
+        .waveplayer-play-btn {
+          width: 44px;
+          height: 44px;
+          margin-right: 12px;
+        }
+        
+        .waveplayer-waveform {
+          height: 70px;
+          cursor: pointer;
+          touch-action: none; /* Prevents scroll/zoom on touch */
+        }
+      }
+    `;
+    this.container.appendChild(style);
+    
+    // Create elements
+    const waveformContainer = document.createElement('div');
+    waveformContainer.className = 'waveplayer-waveform';
+    
+    const controlsContainer = document.createElement('div');
+    controlsContainer.className = 'waveplayer-controls';
+    
+    // Play button
+    this.playButton = document.createElement('button');
+    this.playButton.className = 'waveplayer-play-btn';
+    this.playButton.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="play-icon">
+        <polygon points="5 3 19 12 5 21 5 3"></polygon>
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pause-icon" style="display: none;">
+        <rect x="6" y="4" width="4" height="16"></rect>
+        <rect x="14" y="4" width="4" height="16"></rect>
+      </svg>
+    `;
+    
+    // Time display
+    this.timeDisplay = document.createElement('div');
+    this.timeDisplay.className = 'waveplayer-time';
+    this.timeDisplay.textContent = '0:00 / 0:00';
+    
+    // Loading indicator
+    this.loadingIndicator = document.createElement('div');
+    this.loadingIndicator.className = 'waveplayer-loading';
+    this.loadingIndicator.innerHTML = `
+      <div class="waveplayer-spinner"></div>
+      <span>Loading...</span>
+    `;
+    
+    // Set up MutationObserver to detect when loading reaches 100%
+    const loadingTextElement = this.loadingIndicator.querySelector('span');
+    if (loadingTextElement) {
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'characterData' || mutation.type === 'childList') {
+            const text = loadingTextElement.textContent;
+            if (text && text.includes('100%')) {
+              // If we see "100%", hide the loading indicator after a short delay
+              setTimeout(() => this.hideLoading(), 300);
+            }
+          }
+        });
+      });
+      
+      observer.observe(loadingTextElement, { 
+        characterData: true, 
+        childList: true,
+        subtree: true
+      });
+    }
+    
+    // Append elements
+    controlsContainer.appendChild(this.playButton);
+    controlsContainer.appendChild(this.timeDisplay);
+    
+    this.container.appendChild(controlsContainer);
+    this.container.appendChild(waveformContainer);
+    this.container.appendChild(this.loadingIndicator);
+    
+    // Store reference to waveform container
+    this.waveformContainer = waveformContainer;
+  }
+  
+  initWavesurfer() {
+    // Initialize WaveSurfer
+    this.wavesurfer = WaveSurfer.create({
+      container: this.waveformContainer,
+      ...this.options,
+      // Add mobile touch support
+      interact: true,
+      dragToSeek: true
+    });
+    
+    // Force reset any loading indicators
+    if (this.loadingIndicator) {
+      this.loadingIndicator.style.display = 'none';
+    }
+  }
+  
+  setupEvents() {
+    // Play/pause button
+    this.playButton.addEventListener('click', () => {
+      this.togglePlayPause();
+    });
+    
+    // Add touch support for mobile
+    this.playButton.addEventListener('touchstart', (e) => {
+      e.preventDefault();
+      this.togglePlayPause();
+    });
+    
+    // Add touch support for waveform container
+    this.waveformContainer.addEventListener('touchstart', (e) => {
+      // This helps ensure the touch events propagate correctly to wavesurfer
+      e.stopPropagation();
+    });
+    
+    // Wavesurfer events
+    this.wavesurfer.on('ready', () => {
+      // Clear loading timeout
+      if (this.loadingTimeout) {
+        clearTimeout(this.loadingTimeout);
+      }
+      
+      // Explicitly ensure loading indicator is hidden
+      this.hideLoading();
+      this.updateTimeDisplay();
+      
+      // Force loading message to be reset
+      if (this.loadingIndicator && this.loadingIndicator.querySelector('span')) {
+        this.loadingIndicator.querySelector('span').textContent = 'Loading...';
+      }
+      
+      console.log('WavePlayer ready event fired');
+    });
+    
+    // Add specific handler for decode event (fired when audio is decoded)
+    this.wavesurfer.on('decode', () => {
+      // Also hide loading indicator after decode
+      this.hideLoading();
+      console.log('WavePlayer decode event fired');
+    });
+    
+    // Add specific handler for loading complete
+    this.wavesurfer.on('loading', (percent) => {
+      this.showLoading(percent);
+      
+      // If loading reaches 100%, make sure to hide the loader after a small delay
+      if (percent === 100) {
+        setTimeout(() => {
+          this.hideLoading();
+          console.log('WavePlayer loading 100% - force hiding loader');
+        }, 500);
+      }
+    });
+    
+    this.wavesurfer.on('play', () => {
+      this.isPlaying = true;
+      this.updatePlayButton();
+    });
+    
+    this.wavesurfer.on('pause', () => {
+      this.isPlaying = false;
+      this.updatePlayButton();
+    });
+    
+    this.wavesurfer.on('finish', () => {
+      this.isPlaying = false;
+      this.updatePlayButton();
+    });
+    
+    this.wavesurfer.on('audioprocess', () => {
+      this.updateTimeDisplay();
+    });
+    
+    this.wavesurfer.on('seek', () => {
+      this.updateTimeDisplay();
+    });
+    
+    this.wavesurfer.on('error', (err) => {
+      console.error('WaveSurfer error:', err);
+      this.hideLoading();
+    });
+  }
+  
+  loadAudio(url) {
+    this.showLoading();
+    this.wavesurfer.load(url);
+    
+    // Safety timeout to ensure loading indicator gets hidden
+    // even if the 'ready' event doesn't fire properly
+    this.loadingTimeout = setTimeout(() => {
+      this.hideLoading();
+    }, 10000); // 10 seconds max loading time
+  }
+  
+  play() {
+    this.wavesurfer.play();
+  }
+  
+  pause() {
+    this.wavesurfer.pause();
+  }
+  
+  togglePlayPause() {
+    this.wavesurfer.playPause();
+  }
+  
+  stop() {
+    this.wavesurfer.stop();
+  }
+  
+  updatePlayButton() {
+    const playIcon = this.playButton.querySelector('.play-icon');
+    const pauseIcon = this.playButton.querySelector('.pause-icon');
+    
+    if (this.isPlaying) {
+      playIcon.style.display = 'none';
+      pauseIcon.style.display = 'block';
+    } else {
+      playIcon.style.display = 'block';
+      pauseIcon.style.display = 'none';
+    }
+  }
+  
+  showLoading(percent) {
+    this.loadingIndicator.style.display = 'flex';
+    if (percent !== undefined) {
+      this.loadingIndicator.querySelector('span').textContent = `Loading: ${Math.round(percent)}%`;
+    }
+  }
+  
+  hideLoading() {
+    if (this.loadingIndicator) {
+      this.loadingIndicator.style.display = 'none';
+      
+      // Reset loading text
+      const loadingText = this.loadingIndicator.querySelector('span');
+      if (loadingText) {
+        loadingText.textContent = 'Loading...';
+      }
+    }
+  }
+  
+  formatTime(seconds) {
+    const minutes = Math.floor(seconds / 60);
+    const secondsRemainder = Math.round(seconds) % 60;
+    const paddedSeconds = secondsRemainder.toString().padStart(2, '0');
+    return `${minutes}:${paddedSeconds}`;
+  }
+  
+  updateTimeDisplay() {
+    if (!this.wavesurfer.isReady) return;
+    
+    const currentTime = this.formatTime(this.wavesurfer.getCurrentTime());
+    const duration = this.formatTime(this.wavesurfer.getDuration());
+    this.timeDisplay.textContent = `${currentTime} / ${duration}`;
+  }
+}
+
+// Allow global access
+window.WavePlayer = WavePlayer; 

templates/about.html

@@ -0,0 +1,415 @@
+{% extends "base.html" %}
+
+{% block title %}About - TTS Arena{% endblock %}
+
+{% block current_page %}About{% endblock %}
+
+{% block extra_head %}
+<style>
+    .about-container {
+        max-width: 800px;
+        margin: 0 auto;
+    }
+
+    .about-section {
+        background: white;
+        border-radius: var(--radius);
+        padding: 24px;
+        margin-bottom: 24px;
+        box-shadow: var(--shadow);
+    }
+
+    .about-section h2 {
+        color: var(--primary-color);
+        margin-bottom: 16px;
+        font-size: 24px;
+    }
+
+    .about-section p {
+        margin-bottom: 16px;
+        line-height: 1.6;
+        color: #444;
+    }
+
+    .about-section p:last-child {
+        margin-bottom: 0;
+    }
+
+    .feature-list {
+        list-style: none;
+        padding: 0;
+    }
+
+    .feature-list li {
+        margin-bottom: 12px;
+        padding-left: 28px;
+        position: relative;
+    }
+
+    .feature-list li::before {
+        content: "•";
+        color: var(--primary-color);
+        font-size: 24px;
+        position: absolute;
+        left: 8px;
+        top: -4px;
+    }
+
+    .credits-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 24px;
+        margin-top: 16px;
+    }
+
+    .credit-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-bottom: 8px;
+        border-bottom: 1px solid var(--border-color);
+    }
+
+    .credit-item a {
+        color: var(--primary-color);
+        text-decoration: none;
+    }
+
+    .credit-item a:hover {
+        text-decoration: underline;
+    }
+
+    .social-links {
+        display: flex;
+        gap: 12px;
+    }
+    
+    .social-icon {
+        width: 20px;
+        height: 20px;
+    }
+
+    .citation-box {
+        background-color: var(--light-gray);
+        border-radius: var(--radius);
+        padding: 16px;
+        margin-top: 16px;
+        position: relative;
+        font-family: monospace;
+        white-space: pre-wrap;
+        word-break: break-word;
+        font-size: 14px;
+        line-height: 1.5;
+    }
+
+    .copy-citation {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        background-color: white;
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius);
+        width: 36px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: background-color 0.2s;
+    }
+
+    .copy-citation:hover {
+        background-color: var(--light-gray);
+    }
+
+    .copy-citation svg {
+        color: var(--text-color);
+    }
+
+    .faq-item {
+        margin-bottom: 20px;
+    }
+
+    .faq-question {
+        font-weight: 600;
+        margin-bottom: 8px;
+        color: var(--primary-color);
+    }
+
+    .faq-answer {
+        line-height: 1.6;
+    }
+    /* Dark mode styles */
+    @media (prefers-color-scheme: dark) {
+        .about-section {
+            background-color: var(--light-gray);
+            border-color: var(--border-color);
+        }
+
+        .about-section p {
+            color: var(--text-color);
+        }
+
+        .citation-box {
+            background-color: var(--secondary-color);
+            border-color: var(--border-color);
+        }
+
+        .copy-citation {
+            background-color: var(--light-gray);
+            border-color: var(--border-color);
+        }
+
+        .copy-citation:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .copy-citation svg {
+            color: var(--text-color);
+        }
+
+        .faq-question {
+            color: var(--primary-color);
+        }
+
+        .social-icon.icon-x {
+            filter: invert(1);
+        }
+    }
+
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="about-container">
+    <div class="about-section">
+        <h2>Welcome to TTS Arena 2.0</h2>
+        <p>
+            TTS Arena evaluates leading speech synthesis models in an interactive, community-driven platform. 
+            Inspired by LMsys's <a href="https://chat.lmsys.org/" target="_blank" rel="noopener">Chatbot Arena</a>, we've created 
+            a space where anyone can compare and rank text-to-speech technologies through direct, side-by-side evaluation.
+        </p>
+        <p>
+            Our second version now supports conversational models for podcast-like content generation, expanding the arena's scope to reflect the diverse applications of modern speech synthesis.
+        </p>
+    </div>
+
+    <div class="about-section">
+        <h2>Motivation</h2>
+        <p>
+            The field of speech synthesis has long lacked reliable methods to measure model quality. Traditional 
+            metrics like WER (word error rate) often fail to capture the nuances of natural speech, while subjective 
+            measures such as MOS (mean opinion score) typically involve small-scale experiments with limited participants.
+        </p>
+        <p>
+            TTS Arena addresses these limitations by inviting the entire community to participate in the evaluation 
+            process, making both the opportunity to rank models and the resulting insights accessible to everyone.
+        </p>
+    </div>
+
+    <div class="about-section">
+        <h2>How The Arena Works</h2>
+        <p>
+            The concept is straightforward: enter text that will be synthesized by two competing models. After 
+            listening to both samples, vote for the one that sounds more natural and engaging. To prevent bias, 
+            model names are revealed only after your vote is submitted.
+        </p>
+        <ul class="feature-list">
+            <li>Enter your own text or select a random sentence</li>
+            <li>Listen to two different TTS models synthesize the same content</li>
+            <li>Compare conversational models for podcast-like content</li>
+            <li>Vote for the model that sounds more natural, clear, and expressive</li>
+            <li>Track model rankings on our leaderboard</li>
+        </ul>
+    </div>
+
+    <div class="about-section">
+        <h2>Frequently Asked Questions</h2>
+        <div class="faq-item">
+            <div class="faq-question">What happened to the TTS Arena V1 leaderboard?</div>
+            <div class="faq-answer">
+                The TTS Arena V1 leaderboard is now deprecated. While you can no longer vote on it, the results and leaderboard are still available for reference at <a href="https://huggingface.co/spaces/TTS-AGI/TTS-Arena" target="_blank" rel="noopener">TTS Arena V1</a>. The leaderboard is static and will not change.
+            </div>
+        </div>
+        <div class="faq-item">
+            <div class="faq-question">How are models ranked in TTS Arena?</div>
+            <div class="faq-answer">
+                Models are ranked using an Elo rating system, similar to chess rankings. When you vote for a model, its rating increases while the other model's rating decreases. The amount of change depends on the current ratings of both models.
+            </div>
+        </div>
+        <div class="faq-item">
+            <div class="faq-question">Is the TTS Arena V2 leaderboard affected by votes from V1?</div>
+            <div class="faq-answer">
+                No, the TTS Arena V2 leaderboard is a completely fresh start. Votes from V1 do not affect the V2 leaderboard in any way. All models in V2 start with a clean slate.
+            </div>
+        </div>
+        <div class="faq-item">
+            <div class="faq-question">Can I suggest a model to be added to the arena?</div>
+            <div class="faq-answer">
+                Yes! We welcome suggestions for new models. Please reach out to us through the Hugging Face community or create an issue in our GitHub repository. If you are developing a new model and wish for it to be added anonymously for pre-release evaluation, please <a href="mailto:[email protected]" target="_blank" rel="noopener">reach out to us to discuss</a>.
+            </div>
+        </div>
+        <div class="faq-item">
+            <div class="faq-question">How can I contribute to the project?</div>
+            <div class="faq-answer">
+                You can contribute by voting on models, suggesting improvements, reporting bugs, or even contributing code. Check our GitHub repository for more information on how to get involved.
+            </div>
+        </div>
+        <div class="faq-item">
+            <div class="faq-question">What's new in TTS Arena 2.0?</div>
+            <div class="faq-answer">
+                TTS Arena 2.0 introduces support for conversational models (for podcast-like content), improved UI/UX, and a more robust backend infrastructure for handling more models and votes.
+            </div>
+        </div>
+        <div class="faq-item">
+            <div class="faq-question">Do I need to login to use TTS Arena?</div>
+            <div class="faq-answer">
+                Login is optional and not required to vote. If you choose to login (with Hugging Face), texts you enter will be associated with your account, and you'll have access to a personal leaderboard showing the models you favor the most.
+            </div>
+        </div>
+    </div>
+
+    <div class="about-section">
+        <h2>Citation</h2>
+        <p>
+            If you use TTS Arena in your research, please cite it as follows:
+        </p>
+        <div class="citation-box" id="citation-text">@misc{tts-arena-v2,
+        title        = {TTS Arena 2.0: Benchmarking Text-to-Speech Models in the Wild},
+        author       = {mrfakename and Srivastav, Vaibhav and Fourrier, Clémentine and Pouget, Lucain and Lacombe, Yoach and main and Gandhi, Sanchit and Passos, Apolinário and Cuenca, Pedro},
+        year         = 2025,
+        publisher    = {Hugging Face},
+        howpublished = "\url{https://huggingface.co/spaces/TTS-AGI/TTS-Arena-V2}"
+}<button class="copy-citation" onclick="copyToClipboard()" title="Copy citation"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button></div>
+        <script>
+            function copyToClipboard() {
+                const text = document.getElementById('citation-text').innerText;
+                navigator.clipboard.writeText(text).then(() => {
+                    const btn = document.querySelector('.copy-citation');
+                    const originalContent = btn.innerHTML;
+                    btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>';
+                    setTimeout(() => {
+                        btn.innerHTML = originalContent;
+                    }, 2000);
+                });
+            }
+        </script>
+    </div>
+
+    <div class="about-section">
+        <h2>Credits</h2>
+        <p>
+            Thank you to the following individuals who helped make this project possible:
+        </p>
+        <div class="credits-list">
+            <div class="credit-item">
+                <span>Vaibhav (VB) Srivastav</span>
+                <div class="social-links">
+                    <a href="https://twitter.com/reach_vb" target="_blank" rel="noopener" title="Twitter">
+                        <img src="{{ url_for('static', filename='twitter.svg') }}" alt="Twitter" class="social-icon icon-x">
+                    </a>
+                    <a href="https://huggingface.co/reach-vb" target="_blank" rel="noopener" title="Hugging Face">
+                        <img src="{{ url_for('static', filename='huggingface.svg') }}" alt="Hugging Face" class="social-icon">
+                    </a>
+                </div>
+            </div>
+            <div class="credit-item">
+                <span>Clémentine Fourrier</span>
+                <div class="social-links">
+                    <a href="https://twitter.com/clefourrier" target="_blank" rel="noopener" title="Twitter">
+                        <img src="{{ url_for('static', filename='twitter.svg') }}" alt="Twitter" class="social-icon icon-x">
+                    </a>
+                    <a href="https://huggingface.co/clefourrier" target="_blank" rel="noopener" title="Hugging Face">
+                        <img src="{{ url_for('static', filename='huggingface.svg') }}" alt="Hugging Face" class="social-icon">
+                    </a>
+                </div>
+            </div>
+            <div class="credit-item">
+                <span>Lucain Pouget</span>
+                <div class="social-links">
+                    <a href="https://twitter.com/Wauplin" target="_blank" rel="noopener" title="Twitter">
+                        <img src="{{ url_for('static', filename='twitter.svg') }}" alt="Twitter" class="social-icon icon-x">
+                    </a>
+                    <a href="https://huggingface.co/Wauplin" target="_blank" rel="noopener" title="Hugging Face">
+                        <img src="{{ url_for('static', filename='huggingface.svg') }}" alt="Hugging Face" class="social-icon">
+                    </a>
+                </div>
+            </div>
+            <div class="credit-item">
+                <span>Yoach Lacombe</span>
+                <div class="social-links">
+                    <a href="https://twitter.com/yoachlacombe" target="_blank" rel="noopener" title="Twitter">
+                        <img src="{{ url_for('static', filename='twitter.svg') }}" alt="Twitter" class="social-icon icon-x">
+                    </a>
+                    <a href="https://huggingface.co/ylacombe" target="_blank" rel="noopener" title="Hugging Face">
+                        <img src="{{ url_for('static', filename='huggingface.svg') }}" alt="Hugging Face" class="social-icon">
+                    </a>
+                </div>
+            </div>
+            <div class="credit-item">
+                <span>Main Horse</span>
+                <div class="social-links">
+                    <a href="https://twitter.com/main_horse" target="_blank" rel="noopener" title="Twitter">
+                        <img src="{{ url_for('static', filename='twitter.svg') }}" alt="Twitter" class="social-icon icon-x">
+                    </a>
+                    <a href="https://huggingface.co/main-horse" target="_blank" rel="noopener" title="Hugging Face">
+                        <img src="{{ url_for('static', filename='huggingface.svg') }}" alt="Hugging Face" class="social-icon">
+                    </a>
+                </div>
+            </div>
+            <div class="credit-item">
+                <span>Sanchit Gandhi</span>
+                <div class="social-links">
+                    <a href="https://twitter.com/sanchitgandhi99" target="_blank" rel="noopener" title="Twitter">
+                        <img src="{{ url_for('static', filename='twitter.svg') }}" alt="Twitter" class="social-icon icon-x">
+                    </a>
+                    <a href="https://huggingface.co/sanchit-gandhi" target="_blank" rel="noopener" title="Hugging Face">
+                        <img src="{{ url_for('static', filename='huggingface.svg') }}" alt="Hugging Face" class="social-icon">
+                    </a>
+                </div>
+            </div>
+            <div class="credit-item">
+                <span>Apolinário Passos</span>
+                <div class="social-links">
+                    <a href="https://twitter.com/multimodalart" target="_blank" rel="noopener" title="Twitter">
+                        <img src="{{ url_for('static', filename='twitter.svg') }}" alt="Twitter" class="social-icon icon-x">
+                    </a>
+                    <a href="https://huggingface.co/multimodalart" target="_blank" rel="noopener" title="Hugging Face">
+                        <img src="{{ url_for('static', filename='huggingface.svg') }}" alt="Hugging Face" class="social-icon">
+                    </a>
+                </div>
+            </div>
+            <div class="credit-item">
+                <span>Pedro Cuenca</span>
+                <div class="social-links">
+                    <a href="https://twitter.com/pcuenq" target="_blank" rel="noopener" title="Twitter">
+                        <img src="{{ url_for('static', filename='twitter.svg') }}" alt="Twitter" class="social-icon icon-x">
+                    </a>
+                    <a href="https://huggingface.co/pcuenq" target="_blank" rel="noopener" title="Hugging Face">
+                        <img src="{{ url_for('static', filename='huggingface.svg') }}" alt="Hugging Face" class="social-icon">
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="about-section">
+        <h2>Privacy Statement</h2>
+        <p>
+            We may store text you enter and generated audio. If you are logged in, we may associate your votes with your Hugging Face username. 
+            You agree that we may collect, share, and/or publish any data you input for research and/or 
+            commercial purposes.
+        </p>
+    </div>
+
+    <div class="about-section">
+        <h2>License</h2>
+        <p>
+            Generated audio clips cannot be redistributed and may be used for personal, non-commercial use only.
+            The code for the Arena is licensed under the Zlib license.
+            Random sentences are sourced from a filtered subset of the 
+            <a href="https://www.cs.columbia.edu/~hgs/audio/harvard.html" target="_blank" rel="noopener">Harvard Sentences</a>.
+        </p>
+    </div>
+</div>
+{% endblock %}

templates/admin/activity.html

@@ -0,0 +1,139 @@
+{% extends "admin/base.html" %}
+
+{% block admin_content %}
+<div class="admin-header">
+    <div class="admin-title">Activity Monitoring</div>
+</div>
+
+<div class="admin-stats">
+    <div class="stat-card">
+        <div class="stat-title">Active TTS Sessions</div>
+        <div class="stat-value">{{ tts_session_count }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="stat-title">Active Conversational Sessions</div>
+        <div class="stat-value">{{ conversational_session_count }}</div>
+    </div>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">Activity Past 24 Hours</div>
+    </div>
+    <canvas id="hourlyActivityChart" height="250"></canvas>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">Recent TTS Votes</div>
+    </div>
+    <div class="table-responsive">
+        <table class="admin-table">
+            <thead>
+                <tr>
+                    <th>Time</th>
+                    <th>User</th>
+                    <th>Chosen Model</th>
+                    <th>Rejected Model</th>
+                    <th>Text</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for vote in recent_tts_votes %}
+                <tr>
+                    <td>{{ vote.vote_date.strftime('%Y-%m-%d %H:%M') }}</td>
+                    <td>
+                        {% if vote.user %}
+                            <a href="{{ url_for('admin.user_detail', user_id=vote.user.id) }}">{{ vote.user.username }}</a>
+                        {% else %}
+                            Anonymous
+                        {% endif %}
+                    </td>
+                    <td>{{ vote.chosen.name }}</td>
+                    <td>{{ vote.rejected.name }}</td>
+                    <td>
+                        <div class="text-truncate" title="{{ vote.text }}">
+                            {{ vote.text }}
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">Recent Conversational Votes</div>
+    </div>
+    <div class="table-responsive">
+        <table class="admin-table">
+            <thead>
+                <tr>
+                    <th>Time</th>
+                    <th>User</th>
+                    <th>Chosen Model</th>
+                    <th>Rejected Model</th>
+                    <th>Text Preview</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for vote in recent_conv_votes %}
+                <tr>
+                    <td>{{ vote.vote_date.strftime('%Y-%m-%d %H:%M') }}</td>
+                    <td>
+                        {% if vote.user %}
+                            <a href="{{ url_for('admin.user_detail', user_id=vote.user.id) }}">{{ vote.user.username }}</a>
+                        {% else %}
+                            Anonymous
+                        {% endif %}
+                    </td>
+                    <td>{{ vote.chosen.name }}</td>
+                    <td>{{ vote.rejected.name }}</td>
+                    <td>
+                        <div class="text-truncate" title="{{ vote.text }}">
+                            {{ vote.text }}
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const hourlyData = {{ hourly_data|safe }};
+    
+    // Hourly activity chart
+    const hourlyActivityCtx = document.getElementById('hourlyActivityChart').getContext('2d');
+    new Chart(hourlyActivityCtx, {
+        type: 'bar',
+        data: {
+            labels: hourlyData.labels,
+            datasets: [{
+                label: 'Votes per Hour',
+                data: hourlyData.counts,
+                backgroundColor: 'rgba(80, 70, 229, 0.7)',
+                borderColor: 'rgba(80, 70, 229, 1)',
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true,
+                        precision: 0
+                    }
+                }]
+            }
+        }
+    });
+});
+</script>
+{% endblock %} 

templates/admin/base.html

@@ -0,0 +1,539 @@
+{% extends "base.html" %}
+
+{% block title %}Admin Panel - TTS Arena{% endblock %}
+
+{% block extra_head %}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
+<style>
+    .admin-container {
+        width: 100%;
+    }
+    
+    /* Horizontal navigation tabs */
+    .admin-nav {
+        display: flex;
+        overflow-x: auto;
+        white-space: nowrap;
+        margin-bottom: 24px;
+        padding-bottom: 8px;
+        border-bottom: 1px solid var(--border-color);
+        -ms-overflow-style: none; /* Hide scrollbar IE and Edge */
+        scrollbar-width: none; /* Hide scrollbar Firefox */
+    }
+    
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .admin-nav::-webkit-scrollbar {
+        display: none;
+    }
+    
+    .admin-nav-item {
+        display: flex;
+        align-items: center;
+        padding: 10px 16px;
+        margin-right: 8px;
+        border-radius: var(--radius);
+        cursor: pointer;
+        transition: all 0.2s;
+        color: var(--text-color);
+        text-decoration: none;
+        font-size: 14px;
+        position: relative;
+    }
+    
+    .admin-nav-item.active {
+        color: var(--primary-color);
+        font-weight: 500;
+    }
+    
+    .admin-nav-item.active::after {
+        content: '';
+        position: absolute;
+        bottom: -9px;
+        left: 0;
+        width: 100%;
+        height: 3px;
+        background-color: var(--primary-color);
+        border-radius: 3px 3px 0 0;
+    }
+    
+    .admin-nav-item:hover:not(.active) {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+    
+    .admin-nav-item svg {
+        margin-right: 8px;
+        width: 16px;
+        height: 16px;
+    }
+    
+    .admin-content {
+        width: 100%;
+        padding: 20px;
+    }
+    
+    .admin-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 24px;
+    }
+    
+    .admin-title {
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--primary-color);
+    }
+    
+    .admin-card {
+        background-color: white;
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+        padding: 20px;
+        margin-bottom: 24px;
+        overflow: auto; /* Add horizontal scrolling for content */
+    }
+    
+    .admin-card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+    }
+    
+    .admin-card-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--text-color);
+    }
+    
+    .admin-stats {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 16px;
+        margin-bottom: 24px;
+    }
+    
+    .stat-card {
+        background-color: white;
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+        padding: 16px;
+        text-align: center;
+    }
+    
+    .stat-title {
+        font-size: 14px;
+        color: #666;
+        margin-bottom: 8px;
+    }
+    
+    .stat-value {
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--primary-color);
+    }
+    
+    /* Improved table styles with responsiveness */
+    .table-responsive {
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        margin-bottom: 1rem;
+    }
+    
+    .admin-table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+        border-radius: var(--radius);
+        overflow: hidden;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+        border: 1px solid var(--border-color);
+        min-width: 600px; /* Ensures table doesn't get too squished */
+    }
+    
+    .admin-table th, .admin-table td {
+        padding: 12px 16px;
+        text-align: left;
+        border-bottom: 1px solid var(--border-color);
+    }
+    
+    .admin-table th {
+        font-weight: 600;
+        background-color: var(--secondary-color);
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        font-size: 13px;
+    }
+
+    .admin-table tr:last-child td {
+        border-bottom: none;
+    }
+    
+    .admin-table tr:hover {
+        background-color: rgba(0, 0, 0, 0.02);
+    }
+    
+    /* Action buttons in tables */
+    .action-btn {
+        display: inline-block;
+        padding: 6px 12px;
+        font-size: 13px;
+        border-radius: var(--radius);
+        text-decoration: none;
+        color: var(--text-color);
+        background-color: var(--secondary-color);
+        border: 1px solid var(--border-color);
+        transition: all 0.2s;
+    }
+    
+    .action-btn:hover {
+        background-color: #e0e0e0;
+    }
+    
+    /* Enhanced form styles */
+    .admin-form {
+        max-width: 700px;
+    }
+    
+    .form-group {
+        margin-bottom: 20px;
+    }
+    
+    .form-group label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 500;
+        color: var(--text-color);
+    }
+
+    .form-group small {
+        display: block;
+        margin-top: 4px;
+        color: #666;
+        font-size: 12px;
+    }
+    
+    .form-control {
+        width: 100%;
+        padding: 12px;
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius);
+        font-family: 'Inter', sans-serif;
+        background-color: white;
+        transition: border-color 0.2s, box-shadow 0.2s;
+    }
+    
+    .form-control:focus {
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 2px rgba(80, 70, 229, 0.25);
+        outline: none;
+    }
+    
+    /* Custom checkbox styles */
+    .form-check {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        position: relative;
+        padding-left: 30px;
+        cursor: pointer;
+    }
+    
+    .form-check input {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+    }
+    
+    .form-check label {
+        margin-bottom: 0;
+        cursor: pointer;
+    }
+    
+    .checkmark {
+        position: absolute;
+        top: 2px;
+        left: 0;
+        height: 18px;
+        width: 18px;
+        background-color: white;
+        border: 1px solid var(--border-color);
+        border-radius: 4px;
+    }
+    
+    .form-check:hover input ~ .checkmark {
+        background-color: #f5f5f5;
+    }
+    
+    .form-check input:checked ~ .checkmark {
+        background-color: var(--primary-color);
+        border-color: var(--primary-color);
+    }
+    
+    .checkmark:after {
+        content: "";
+        position: absolute;
+        display: none;
+    }
+    
+    .form-check input:checked ~ .checkmark:after {
+        display: block;
+    }
+    
+    .form-check .checkmark:after {
+        left: 6px;
+        top: 2px;
+        width: 4px;
+        height: 9px;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+    }
+    
+    .user-info {
+        background-color: var(--light-gray);
+        padding: 16px;
+        border-radius: var(--radius);
+        margin-bottom: 16px;
+        border: 1px solid var(--border-color);
+    }
+    
+    .user-info p {
+        margin-bottom: 8px;
+    }
+    
+    .btn-primary {
+        background-color: var(--primary-color);
+        color: white;
+        border: none;
+        padding: 12px 20px;
+        border-radius: var(--radius);
+        cursor: pointer;
+        font-weight: 500;
+        text-decoration: none;
+        transition: background-color 0.2s;
+    }
+    
+    .btn-primary:hover {
+        background-color: #4038c7;
+    }
+    
+    .btn-secondary {
+        background-color: var(--secondary-color);
+        color: var(--text-color);
+        border: 1px solid var(--border-color);
+        padding: 12px 20px;
+        border-radius: var(--radius);
+        cursor: pointer;
+        font-weight: 500;
+        text-decoration: none;
+        transition: background-color 0.2s;
+    }
+    
+    .btn-secondary:hover {
+        background-color: #e0e0e0;
+    }
+    
+    /* Badge styles */
+    .badge {
+        display: inline-block;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+    }
+    
+    .badge-primary {
+        background-color: var(--primary-color);
+        color: white;
+    }
+    
+    .badge-secondary {
+        background-color: var(--secondary-color);
+        color: var(--text-color);
+    }
+    
+    .pagination {
+        display: flex;
+        justify-content: center;
+        list-style: none;
+        margin-top: 24px;
+    }
+    
+    .pagination li {
+        margin: 0 4px;
+    }
+    
+    .pagination li a {
+        display: block;
+        padding: 8px 12px;
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius);
+        color: var(--text-color);
+        text-decoration: none;
+    }
+    
+    .pagination li.active a {
+        background-color: var(--primary-color);
+        color: white;
+        border-color: var(--primary-color);
+    }
+    
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+        .admin-content {
+            padding: 16px 12px;
+        }
+        
+        .admin-stats {
+            grid-template-columns: 1fr 1fr;
+        }
+        
+        .admin-header {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 12px;
+        }
+        
+        .admin-card {
+            padding: 15px 10px;
+        }
+        
+        .admin-table {
+            font-size: 13px;
+        }
+        
+        .admin-table th, .admin-table td {
+            padding: 8px 10px;
+        }
+        
+        .action-btn {
+            padding: 4px 8px;
+            font-size: 12px;
+        }
+        
+        .btn-primary, .btn-secondary {
+            padding: 8px 16px;
+            font-size: 14px;
+            display: block;
+            width: 100%;
+            text-align: center;
+            margin-bottom: 8px;
+        }
+    }
+    
+    /* Dark mode adjustments */
+    @media (prefers-color-scheme: dark) {
+        .admin-card, .stat-card {
+            background-color: var(--light-gray);
+        }
+        
+        .admin-table th {
+            background-color: rgba(80, 70, 229, 0.1);
+        }
+        
+        .admin-table tr:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+        }
+        
+        .form-control {
+            background-color: var(--light-gray);
+            color: var(--text-color);
+            border-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        .checkmark {
+            background-color: var(--light-gray);
+            border-color: rgba(255, 255, 255, 0.2);
+        }
+        
+        .form-check:hover input ~ .checkmark {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        .action-btn {
+            background-color: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.15);
+        }
+        
+        .action-btn:hover {
+            background-color: rgba(255, 255, 255, 0.15);
+        }
+        
+        .btn-secondary {
+            background-color: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.15);
+        }
+        
+        .btn-secondary:hover {
+            background-color: rgba(255, 255, 255, 0.15);
+        }
+        
+        .btn-primary:hover {
+            background-color: #5d51ff;
+        }
+    }
+    
+    .user-detail-value {
+        flex: 1;
+    }
+    
+    /* Truncation utility class */
+    .text-truncate {
+        max-width: 300px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    
+    @media (max-width: 576px) {
+        .text-truncate {
+            max-width: 150px;
+        }
+        
+        .admin-stats {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="admin-container">
+    <nav class="admin-nav">
+        <a href="{{ url_for('admin.index') }}" class="admin-nav-item {% if request.endpoint == 'admin.index' %}active{% endif %}">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
+            Dashboard
+        </a>
+        <a href="{{ url_for('admin.models') }}" class="admin-nav-item {% if request.endpoint in ['admin.models', 'admin.edit_model', 'admin.add_model'] %}active{% endif %}">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1v3M12 20v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M1 12h3M20 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg>
+            Models
+        </a>
+        <a href="{{ url_for('admin.users') }}" class="admin-nav-item {% if request.endpoint == 'admin.users' or request.endpoint == 'admin.user_detail' %}active{% endif %}">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+            Users
+        </a>
+        <a href="{{ url_for('admin.votes') }}" class="admin-nav-item {% if request.endpoint == 'admin.votes' %}active{% endif %}">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+            Votes
+        </a>
+        <a href="{{ url_for('admin.statistics') }}" class="admin-nav-item {% if request.endpoint == 'admin.statistics' %}active{% endif %}">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M18 12V8"/><path d="M13 12v-2"/><path d="M8 12v-5"/></svg>
+            Statistics
+        </a>
+        <a href="{{ url_for('admin.activity') }}" class="admin-nav-item {% if request.endpoint == 'admin.activity' %}active{% endif %}">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12h-8v8h8v-8z"/><path d="M3 21V3h18v9"/><path d="M12 3v6H3"/></svg>
+            Activity
+        </a>
+    </nav>
+    
+    <div class="admin-content">
+        {% block admin_content %}{% endblock %}
+    </div>
+</div>
+{% endblock %} 

templates/admin/edit_model.html

@@ -0,0 +1,62 @@
+{% extends "admin/base.html" %}
+
+{% block admin_content %}
+<div class="admin-header">
+    <div class="admin-title">Edit Model</div>
+    <a href="{{ url_for('admin.models') }}" class="btn-secondary">Back to Models</a>
+</div>
+
+<div class="admin-card">
+    <form method="POST" class="admin-form">
+        <div class="form-group">
+            <label for="id">Model ID</label>
+            <input type="text" id="id" name="id" class="form-control" value="{{ model.id }}" readonly>
+        </div>
+        
+        <div class="form-group">
+            <label for="name">Model Name</label>
+            <input type="text" id="name" name="name" class="form-control" value="{{ model.name }}" required>
+        </div>
+        
+        <div class="form-group">
+            <label for="model_type">Model Type</label>
+            <input type="text" id="model_type" name="model_type" class="form-control" value="{{ model.model_type }}" readonly>
+        </div>
+        
+        <div class="form-group">
+            <label for="model_url">Model URL</label>
+            <input type="url" id="model_url" name="model_url" class="form-control" value="{{ model.model_url or '' }}">
+            <small>Optional: URL to the model's page/repository</small>
+        </div>
+        
+        <div class="form-group">
+            <label for="current_elo">Current ELO Score</label>
+            <input type="number" id="current_elo" name="current_elo" class="form-control" value="{{ model.current_elo }}" readonly>
+            <small>ELO score is calculated automatically from votes</small>
+        </div>
+        
+        <div class="form-check">
+            <input type="checkbox" id="is_active" name="is_active" {% if model.is_active %}checked{% endif %}>
+            <span class="checkmark"></span>
+            <label for="is_active">Active (available for voting)</label>
+        </div>
+        
+        <div class="form-check">
+            <input type="checkbox" id="is_open" name="is_open" {% if model.is_open %}checked{% endif %}>
+            <span class="checkmark"></span>
+            <label for="is_open">Open Source</label>
+        </div>
+        
+        <div class="form-group">
+            <label>Statistics</label>
+            <div class="user-info">
+                <p><strong>Matches:</strong> {{ model.match_count }}</p>
+                <p><strong>Wins:</strong> {{ model.win_count }}</p>
+                <p><strong>Win Rate:</strong> {{ model.win_rate|round(2) }}%</p>
+            </div>
+        </div>
+        
+        <button type="submit" class="btn-primary">Save Changes</button>
+    </form>
+</div>
+{% endblock %} 

templates/admin/index.html

@@ -0,0 +1,213 @@
+{% extends "admin/base.html" %}
+
+{% block admin_content %}
+<div class="admin-header">
+    <div class="admin-title">Dashboard</div>
+</div>
+
+<div class="admin-stats">
+    <div class="stat-card">
+        <div class="stat-title">Total Users</div>
+        <div class="stat-value">{{ stats.total_users }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="stat-title">Total Votes</div>
+        <div class="stat-value">{{ stats.total_votes }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="stat-title">TTS Votes</div>
+        <div class="stat-value">{{ stats.tts_votes }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="stat-title">Conversational Votes</div>
+        <div class="stat-value">{{ stats.conversational_votes }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="stat-title">TTS Models</div>
+        <div class="stat-value">{{ stats.tts_models }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="stat-title">Conversational Models</div>
+        <div class="stat-value">{{ stats.conversational_models }}</div>
+    </div>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">Daily Votes (Last 30 Days)</div>
+    </div>
+    <canvas id="votesChart" height="200"></canvas>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">Top TTS Models</div>
+    </div>
+    <div class="table-responsive">
+        <table class="admin-table">
+            <thead>
+                <tr>
+                    <th>Rank</th>
+                    <th>Model</th>
+                    <th>ELO Score</th>
+                    <th>Win Rate</th>
+                    <th>Total Matches</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for model in top_tts_models %}
+                <tr>
+                    <td>{{ loop.index }}</td>
+                    <td>{{ model.name }}</td>
+                    <td>{{ model.current_elo|int }}</td>
+                    <td>{{ model.win_rate|round }}%</td>
+                    <td>{{ model.match_count }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">Top Conversational Models</div>
+    </div>
+    <div class="table-responsive">
+        <table class="admin-table">
+            <thead>
+                <tr>
+                    <th>Rank</th>
+                    <th>Model</th>
+                    <th>ELO Score</th>
+                    <th>Win Rate</th>
+                    <th>Total Matches</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for model in top_conversational_models %}
+                <tr>
+                    <td>{{ loop.index }}</td>
+                    <td>{{ model.name }}</td>
+                    <td>{{ model.current_elo|int }}</td>
+                    <td>{{ model.win_rate|round }}%</td>
+                    <td>{{ model.match_count }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="admin-row">
+    <div class="admin-card">
+        <div class="admin-card-header">
+            <div class="admin-card-title">Recent Votes</div>
+            <a href="{{ url_for('admin.votes') }}" class="btn-secondary">View All</a>
+        </div>
+        <div class="table-responsive">
+            <table class="admin-table">
+                <thead>
+                    <tr>
+                        <th>Date</th>
+                        <th>Type</th>
+                        <th>User</th>
+                        <th>Chosen Model</th>
+                        <th>Rejected Model</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for vote in recent_votes %}
+                    <tr>
+                        <td>{{ vote.vote_date.strftime('%Y-%m-%d %H:%M') }}</td>
+                        <td>{{ vote.model_type }}</td>
+                        <td>
+                            {% if vote.user %}
+                                <a href="{{ url_for('admin.user_detail', user_id=vote.user.id) }}">{{ vote.user.username }}</a>
+                            {% else %}
+                                Anonymous
+                            {% endif %}
+                        </td>
+                        <td>{{ vote.chosen.name }}</td>
+                        <td>{{ vote.rejected.name }}</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<div class="admin-row">
+    <div class="admin-card">
+        <div class="admin-card-header">
+            <div class="admin-card-title">Recent Users</div>
+            <a href="{{ url_for('admin.users') }}" class="btn-secondary">View All</a>
+        </div>
+        <div class="table-responsive">
+            <table class="admin-table">
+                <thead>
+                    <tr>
+                        <th>Username</th>
+                        <th>Join Date</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for user in recent_users %}
+                    <tr>
+                        <td>{{ user.username }}</td>
+                        <td>{{ user.join_date.strftime('%Y-%m-%d %H:%M') }}</td>
+                        <td>
+                            <a href="{{ url_for('admin.user_detail', user_id=user.id) }}" class="btn-secondary">View Details</a>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const votesData = {{ daily_votes_data|safe }};
+    
+    // Daily votes chart
+    const votesCtx = document.getElementById('votesChart').getContext('2d');
+    new Chart(votesCtx, {
+        type: 'line',
+        data: {
+            labels: votesData.labels,
+            datasets: [{
+                label: 'Daily Votes',
+                data: votesData.counts,
+                backgroundColor: 'rgba(80, 70, 229, 0.1)',
+                borderColor: 'rgba(80, 70, 229, 1)',
+                borderWidth: 2,
+                tension: 0.3,
+                fill: true,
+                pointRadius: 3,
+                pointBackgroundColor: '#5046e5'
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true,
+                        precision: 0
+                    }
+                }]
+            },
+            tooltips: {
+                mode: 'index',
+                intersect: false
+            }
+        }
+    });
+});
+</script>
+{% endblock %} 

templates/admin/models.html

@@ -0,0 +1,79 @@
+{% extends "admin/base.html" %}
+
+{% block admin_content %}
+<div class="admin-header">
+    <div class="admin-title">Manage Models</div>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">TTS Models</div>
+    </div>
+    <div class="table-responsive">
+        <table class="admin-table">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Name</th>
+                    <th>ELO Score</th>
+                    <th>Matches</th>
+                    <th>Active</th>
+                    <th>Open Source</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for model in tts_models %}
+                <tr>
+                    <td>{{ model.id }}</td>
+                    <td>{{ model.name }}</td>
+                    <td>{{ model.current_elo|int }}</td>
+                    <td>{{ model.match_count }}</td>
+                    <td>{{ "Yes" if model.is_active else "No" }}</td>
+                    <td>{{ "Yes" if model.is_open else "No" }}</td>
+                    <td>
+                        <a href="{{ url_for('admin.edit_model', model_id=model.id) }}" class="action-btn">Edit</a>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">Conversational Models</div>
+    </div>
+    <div class="table-responsive">
+        <table class="admin-table">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Name</th>
+                    <th>ELO Score</th>
+                    <th>Matches</th>
+                    <th>Active</th>
+                    <th>Open Source</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for model in conversational_models %}
+                <tr>
+                    <td>{{ model.id }}</td>
+                    <td>{{ model.name }}</td>
+                    <td>{{ model.current_elo|int }}</td>
+                    <td>{{ model.match_count }}</td>
+                    <td>{{ "Yes" if model.is_active else "No" }}</td>
+                    <td>{{ "Yes" if model.is_open else "No" }}</td>
+                    <td>
+                        <a href="{{ url_for('admin.edit_model', model_id=model.id) }}" class="action-btn">Edit</a>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+{% endblock %} 

templates/admin/statistics.html

@@ -0,0 +1,173 @@
+{% extends "admin/base.html" %}
+
+{% block admin_content %}
+<div class="admin-header">
+    <div class="admin-title">Statistics</div>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">Daily Votes by Model Type (Last 30 Days)</div>
+    </div>
+    <canvas id="dailyVotesChart" height="250"></canvas>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">New Users by Month</div>
+    </div>
+    <canvas id="monthlyUsersChart" height="250"></canvas>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">Model ELO History</div>
+    </div>
+    <canvas id="modelHistoryChart" height="300"></canvas>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const chartData = {{ chart_data|safe }};
+    
+    // Daily votes by model type
+    const dailyVotesCtx = document.getElementById('dailyVotesChart').getContext('2d');
+    new Chart(dailyVotesCtx, {
+        type: 'line',
+        data: {
+            labels: chartData.dailyVotes.labels,
+            datasets: [
+                {
+                    label: 'TTS Votes',
+                    data: chartData.dailyVotes.ttsCounts,
+                    backgroundColor: 'rgba(80, 70, 229, 0.1)',
+                    borderColor: 'rgba(80, 70, 229, 1)',
+                    borderWidth: 2,
+                    tension: 0.3,
+                    fill: true,
+                    pointRadius: 2,
+                    pointBackgroundColor: '#5046e5'
+                },
+                {
+                    label: 'Conversational Votes',
+                    data: chartData.dailyVotes.convCounts,
+                    backgroundColor: 'rgba(236, 72, 153, 0.1)',
+                    borderColor: 'rgba(236, 72, 153, 1)',
+                    borderWidth: 2,
+                    tension: 0.3,
+                    fill: true,
+                    pointRadius: 2,
+                    pointBackgroundColor: '#ec4899'
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true,
+                        precision: 0
+                    }
+                }]
+            },
+            tooltips: {
+                mode: 'index',
+                intersect: false
+            }
+        }
+    });
+    
+    // Monthly users chart
+    const monthlyUsersCtx = document.getElementById('monthlyUsersChart').getContext('2d');
+    new Chart(monthlyUsersCtx, {
+        type: 'bar',
+        data: {
+            labels: chartData.monthlyUsers.labels,
+            datasets: [{
+                label: 'New Users',
+                data: chartData.monthlyUsers.counts,
+                backgroundColor: 'rgba(16, 185, 129, 0.7)',
+                borderColor: 'rgba(16, 185, 129, 1)',
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true,
+                        precision: 0
+                    }
+                }]
+            }
+        }
+    });
+    
+    // Model ELO history chart
+    const modelHistoryCtx = document.getElementById('modelHistoryChart').getContext('2d');
+    
+    // Prepare datasets for each model
+    const modelDatasets = [];
+    const colors = [
+        { backgroundColor: 'rgba(80, 70, 229, 0.1)', borderColor: 'rgba(80, 70, 229, 1)' },
+        { backgroundColor: 'rgba(236, 72, 153, 0.1)', borderColor: 'rgba(236, 72, 153, 1)' },
+        { backgroundColor: 'rgba(16, 185, 129, 0.1)', borderColor: 'rgba(16, 185, 129, 1)' },
+        { backgroundColor: 'rgba(245, 158, 11, 0.1)', borderColor: 'rgba(245, 158, 11, 1)' },
+        { backgroundColor: 'rgba(239, 68, 68, 0.1)', borderColor: 'rgba(239, 68, 68, 1)' }
+    ];
+    
+    let colorIndex = 0;
+    for (const modelName in chartData.modelHistory) {
+        const model = chartData.modelHistory[modelName];
+        modelDatasets.push({
+            label: modelName,
+            data: model.scores,
+            backgroundColor: colors[colorIndex % colors.length].backgroundColor,
+            borderColor: colors[colorIndex % colors.length].borderColor,
+            borderWidth: 2,
+            tension: 0.3,
+            fill: false,
+            pointRadius: 1
+        });
+        colorIndex++;
+    }
+    
+    // If we have any model data, create the chart
+    if (modelDatasets.length > 0) {
+        // Get timestamps from the first model (they should all have the same timepoints)
+        const firstModel = Object.values(chartData.modelHistory)[0];
+        
+        new Chart(modelHistoryCtx, {
+            type: 'line',
+            data: {
+                labels: firstModel.timestamps,
+                datasets: modelDatasets
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    yAxes: [{
+                        ticks: {
+                            beginAtZero: false
+                        }
+                    }]
+                },
+                tooltips: {
+                    mode: 'index',
+                    intersect: false
+                }
+            }
+        });
+    } else {
+        // If no model data, show a message
+        document.getElementById('modelHistoryChart').parentNode.innerHTML = 
+            '<div style="text-align: center; padding: 20px;">No model history data available yet.</div>';
+    }
+});
+</script>
+{% endblock %} 

templates/admin/user_detail.html

@@ -0,0 +1,145 @@
+{% extends "admin/base.html" %}
+
+{% block admin_content %}
+<div class="admin-header">
+    <div class="admin-title">User Details</div>
+    <a href="{{ url_for('admin.users') }}" class="btn-secondary">Back to Users</a>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">User Information</div>
+    </div>
+    <div class="user-info">
+        <div class="user-detail-row">
+            <div class="user-detail-label">Username:</div>
+            <div class="user-detail-value">{{ user.username }}</div>
+        </div>
+        <div class="user-detail-row">
+            <div class="user-detail-label">Hugging Face ID:</div>
+            <div class="user-detail-value">{{ user.hf_id }}</div>
+        </div>
+        <div class="user-detail-row">
+            <div class="user-detail-label">Join Date:</div>
+            <div class="user-detail-value">{{ user.join_date.strftime('%Y-%m-%d %H:%M:%S') }}</div>
+        </div>
+    </div>
+    
+    <div class="user-stats">
+        <div class="stat-card">
+            <div class="stat-title">Total Votes</div>
+            <div class="stat-value">{{ total_votes }}</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-title">TTS Votes</div>
+            <div class="stat-value">{{ tts_votes }}</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-title">Conversational Votes</div>
+            <div class="stat-value">{{ conversational_votes }}</div>
+        </div>
+    </div>
+</div>
+
+{% if favorite_models %}
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">Favorite Models</div>
+    </div>
+    <div class="table-responsive">
+        <table class="admin-table">
+            <thead>
+                <tr>
+                    <th>Model</th>
+                    <th>Votes</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for model in favorite_models %}
+                <tr>
+                    <td>{{ model.name }}</td>
+                    <td>{{ model.count }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+{% endif %}
+
+{% if recent_votes %}
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">Recent Votes</div>
+    </div>
+    <div class="table-responsive">
+        <table class="admin-table">
+            <thead>
+                <tr>
+                    <th>Date</th>
+                    <th>Type</th>
+                    <th>Chosen Model</th>
+                    <th>Rejected Model</th>
+                    <th>Text</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for vote in recent_votes %}
+                <tr>
+                    <td>{{ vote.vote_date.strftime('%Y-%m-%d %H:%M') }}</td>
+                    <td>{{ vote.model_type }}</td>
+                    <td>{{ vote.chosen.name }}</td>
+                    <td>{{ vote.rejected.name }}</td>
+                    <td>
+                        <div class="text-truncate" title="{{ vote.text }}">
+                            {{ vote.text }}
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+{% endif %}
+
+<style>
+    .user-detail-row {
+        display: flex;
+        margin-bottom: 10px;
+    }
+    
+    .user-detail-label {
+        font-weight: 600;
+        min-width: 150px;
+    }
+    
+    .user-detail-value {
+        flex: 1;
+    }
+    
+    .user-stats {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 16px;
+        margin-top: 24px;
+    }
+    
+    .text-truncate {
+        max-width: 300px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    
+    @media (max-width: 576px) {
+        .user-detail-row {
+            flex-direction: column;
+        }
+        
+        .user-detail-label {
+            margin-bottom: 4px;
+        }
+    }
+</style>
+{% endblock %} 

templates/admin/users.html

@@ -0,0 +1,47 @@
+{% extends "admin/base.html" %}
+
+{% block admin_content %}
+<div class="admin-header">
+    <div class="admin-title">Manage Users</div>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">All Users</div>
+    </div>
+    <div class="table-responsive">
+        <table class="admin-table">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Username</th>
+                    <th>HF ID</th>
+                    <th>Join Date</th>
+                    <th>Admin Status</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for user in users %}
+                <tr>
+                    <td>{{ user.id }}</td>
+                    <td>{{ user.username }}</td>
+                    <td>{{ user.hf_id }}</td>
+                    <td>{{ user.join_date.strftime('%Y-%m-%d %H:%M') }}</td>
+                    <td>
+                        {% if g.is_admin and user.username in admin_users %}
+                        <span class="badge badge-primary">Admin</span>
+                        {% else %}
+                        <span class="badge badge-secondary">User</span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        <a href="{{ url_for('admin.user_detail', user_id=user.id) }}" class="action-btn">View Details</a>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+{% endblock %} 

templates/admin/votes.html

@@ -0,0 +1,77 @@
+{% extends "admin/base.html" %}
+
+{% block admin_content %}
+<div class="admin-header">
+    <div class="admin-title">Votes</div>
+</div>
+
+<div class="admin-card">
+    <div class="admin-card-header">
+        <div class="admin-card-title">Recent Votes</div>
+    </div>
+    <div class="table-responsive">
+        <table class="admin-table">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Date</th>
+                    <th>Type</th>
+                    <th>User</th>
+                    <th>Chosen Model</th>
+                    <th>Rejected Model</th>
+                    <th>Text</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for vote in votes %}
+                <tr>
+                    <td>{{ vote.id }}</td>
+                    <td>{{ vote.vote_date.strftime('%Y-%m-%d %H:%M') }}</td>
+                    <td>{{ vote.model_type }}</td>
+                    <td>
+                        {% if vote.user %}
+                            <a href="{{ url_for('admin.user_detail', user_id=vote.user.id) }}">{{ vote.user.username }}</a>
+                        {% else %}
+                            Anonymous
+                        {% endif %}
+                    </td>
+                    <td>{{ vote.chosen.name }}</td>
+                    <td>{{ vote.rejected.name }}</td>
+                    <td>
+                        <div class="text-truncate" title="{{ vote.text }}">
+                            {{ vote.text }}
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    
+    {% if pagination.pages > 1 %}
+    <nav aria-label="Page navigation">
+        <ul class="pagination">
+            {% if pagination.has_prev %}
+            <li><a href="{{ url_for('admin.votes', page=pagination.prev_num) }}">&laquo; Previous</a></li>
+            {% endif %}
+            
+            {% for page_num in pagination.iter_pages(left_edge=2, left_current=2, right_current=3, right_edge=2) %}
+                {% if page_num %}
+                    {% if page_num == pagination.page %}
+                    <li class="active"><a href="#">{{ page_num }}</a></li>
+                    {% else %}
+                    <li><a href="{{ url_for('admin.votes', page=page_num) }}">{{ page_num }}</a></li>
+                    {% endif %}
+                {% else %}
+                    <li class="disabled"><a href="#">...</a></li>
+                {% endif %}
+            {% endfor %}
+            
+            {% if pagination.has_next %}
+            <li><a href="{{ url_for('admin.votes', page=pagination.next_num) }}">Next &raquo;</a></li>
+            {% endif %}
+        </ul>
+    </nav>
+    {% endif %}
+</div>
+{% endblock %} 

templates/arena.html

@@ -0,0 +1,1959 @@
+{% extends "base.html" %}
+
+{% block title %}Arena - TTS Arena{% endblock %}
+
+{% block current_page %}Arena{% endblock %}
+
+{% block content %}
+<div class="tabs">
+    <div class="tab active" data-tab="tts">TTS</div>
+    <div class="tab" data-tab="conversational">Conversational</div>
+</div>
+
+<div id="tts-tab" class="tab-content active">
+    <form class="input-container">
+        <div class="input-group">
+            <button type="button" class="segmented-btn random-btn" title="Roll random text">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shuffle-icon lucide-shuffle">
+                    <path d="m18 14 4 4-4 4" />
+                    <path d="m18 2 4 4-4 4" />
+                    <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" />
+                    <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2" />
+                    <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" />
+                </svg>
+            </button>
+            <input type="text" class="text-input" placeholder="Enter text to synthesize...">
+            <button type="submit" class="segmented-btn synth-btn">Synthesize</button>
+        </div>
+        <button type="submit" class="mobile-synth-btn">Synthesize</button>
+    </form>
+
+    <div class="loading-container" style="display: none;">
+        <div class="loader-wrapper">
+            <div class="loader-animation">
+                <div class="sound-wave">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+            </div>
+            <div class="loader-text">Generating audio samples...</div>
+            <div class="loader-subtext">This may take up to 30 seconds</div>
+        </div>
+    </div>
+
+    <div class="players-container" style="display: none;">
+        <div class="players-row">
+            <div class="player">
+                <div class="player-label">Model A <span class="model-name-display"></span></div>
+                <div class="wave-player-container" data-model="a"></div>
+                <button class="vote-btn" data-model="a" disabled>
+                    Vote for A
+                    <span class="shortcut-key">A</span>
+                    <span class="vote-loader" style="display: none;">
+                        <div class="vote-spinner"></div>
+                    </span>
+                </button>
+            </div>
+    
+            <div class="player">
+                <div class="player-label">Model B <span class="model-name-display"></span></div>
+                <div class="wave-player-container" data-model="b"></div>
+                <button class="vote-btn" data-model="b" disabled>
+                    Vote for B
+                    <span class="shortcut-key">B</span>
+                    <span class="vote-loader" style="display: none;">
+                        <div class="vote-spinner"></div>
+                    </span>
+                </button>
+            </div>
+        </div>
+
+        <div class="keyboard-hint">
+            Press <kbd>Space</kbd> to play/pause audio, <kbd>A</kbd> or <kbd>B</kbd> to vote after listening
+        </div>
+    </div>
+
+    <div class="vote-results" style="display: none;">
+        <h3 class="results-heading">Vote Recorded!</h3>
+        <div class="results-content">
+            <div class="chosen-model">
+                <strong>You chose:</strong> <span class="chosen-model-name"></span>
+            </div>
+            <div class="rejected-model">
+                <strong>Over:</strong> <span class="rejected-model-name"></span>
+            </div>
+        </div>
+    </div>
+
+    <div class="next-round-container" style="display: none;">
+        <button class="next-round-btn">Next Round <span class="shortcut-key">N</span></button>
+    </div>
+</div>
+
+<div id="conversational-tab" class="tab-content">
+    <div class="podcast-container">
+        <div class="podcast-controls">
+            <button type="button" class="segmented-btn random-script-btn" title="Load random script">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shuffle-icon lucide-shuffle">
+                    <path d="m18 14 4 4-4 4" />
+                    <path d="m18 2 4 4-4 4" />
+                    <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" />
+                    <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2" />
+                    <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" />
+                </svg>
+                Random Script
+            </button>
+            <button type="button" class="podcast-synth-btn">Generate Podcast</button>
+        </div>
+        
+        <div class="podcast-script-container">
+            <div class="podcast-lines">
+                <!-- Script lines will be added here -->
+            </div>
+            
+            <button type="button" class="add-line-btn">+ Add Line</button>
+            
+            <div class="keyboard-hint podcast-keyboard-hint">
+                Press <kbd>Ctrl</kbd>+<kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Enter</kbd> to add a new line
+            </div>
+        </div>
+        
+        <div class="podcast-loading-container" style="display: none;">
+            <div class="loader-wrapper">
+                <div class="loader-animation">
+                    <div class="sound-wave">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                </div>
+                <div class="loader-text">Generating podcast...</div>
+                <div class="loader-subtext">This may take up to a minute</div>
+            </div>
+        </div>
+
+        <div class="podcast-player-container" style="display: none;">
+            <div class="players-row">
+                <div class="player">
+                    <div class="player-label">Model A <span class="model-name-display"></span></div>
+                    <div class="podcast-wave-player-a"></div>
+                    <button class="vote-btn" data-model="a" disabled>
+                        Vote for A
+                        <span class="shortcut-key">A</span>
+                        <span class="vote-loader" style="display: none;">
+                            <div class="vote-spinner"></div>
+                        </span>
+                    </button>
+                </div>
+        
+                <div class="player">
+                    <div class="player-label">Model B <span class="model-name-display"></span></div>
+                    <div class="podcast-wave-player-b"></div>
+                    <button class="vote-btn" data-model="b" disabled>
+                        Vote for B
+                        <span class="shortcut-key">B</span>
+                        <span class="vote-loader" style="display: none;">
+                            <div class="vote-spinner"></div>
+                        </span>
+                    </button>
+                </div>
+            </div>
+
+            <div class="keyboard-hint">
+                Press <kbd>Space</kbd> to play/pause audio, <kbd>A</kbd> or <kbd>B</kbd> to vote after listening
+            </div>
+            
+            <div class="podcast-vote-results vote-results" style="display: none;">
+                <h3 class="results-heading">Vote Recorded!</h3>
+                <div class="results-content">
+                    <div class="chosen-model">
+                        <strong>You chose:</strong> <span class="chosen-model-name"></span>
+                    </div>
+                    <div class="rejected-model">
+                        <strong>Over:</strong> <span class="rejected-model-name"></span>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="podcast-next-round-container next-round-container" style="display: none;">
+                <button class="podcast-next-round-btn next-round-btn">Next Round <span class="shortcut-key">N</span></button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/waveplayer.css') }}">
+<script src="https://unpkg.com/wavesurfer.js@6/dist/wavesurfer.min.js"></script>
+<style>
+    .input-container {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 24px;
+    }
+    
+    .input-group {
+        display: flex;
+        width: 100%;
+        border-radius: var(--radius);
+        border: 1px solid var(--border-color);
+        overflow: hidden;
+    }
+    
+    /* Override base styles to remove duplicate borders */
+    .input-group .text-input {
+        flex: 1;
+        padding: 12px 16px;
+        border: none;
+        border-radius: 0;
+        font-size: 16px;
+        outline: none;
+        height: 48px;
+        transition: none;
+    }
+    
+    .input-group .text-input:focus {
+        border: none;
+        outline: none;
+        background-color: rgba(80, 70, 229, 0.03);
+    }
+    
+    .segmented-btn {
+        background-color: white;
+        border: none;
+        height: 48px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: background-color 0.2s;
+    }
+    
+    .random-btn {
+        width: 48px;
+        border-right: 1px solid var(--border-color);
+    }
+
+    .random-btn svg {
+        color: var(--primary-color);
+    }
+    
+    .synth-btn {
+        padding: 0 24px;
+        font-weight: 500;
+        border-left: 1px solid var(--border-color);
+        background-color: var(--primary-color);
+        color: white;
+        font-size: 1em;
+    }
+    
+    .synth-btn:hover {
+        background-color: #4038c7;
+    }
+    
+    .random-btn:hover {
+        background-color: var(--light-gray);
+    }
+    
+    .mobile-synth-btn {
+        display: none;
+        width: 100%;
+        padding: 12px;
+        margin-top: 12px;
+        background-color: var(--primary-color);
+        color: white;
+        border: none;
+        border-radius: var(--radius);
+        font-weight: 500;
+        cursor: pointer;
+        font-size: 1em;
+    }
+    
+    .loading-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 40px 0;
+    }
+    
+    .loader-wrapper {
+        text-align: center;
+    }
+    
+    .loader-animation {
+        margin-bottom: 24px;
+    }
+    
+    .loader-text {
+        font-size: 18px;
+        font-weight: 600;
+        margin-bottom: 8px;
+        color: var(--text-color);
+    }
+    
+    .loader-subtext {
+        font-size: 14px;
+        color: #666;
+    }
+    
+    .sound-wave {
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+    }
+    
+    .sound-wave span {
+        display: block;
+        width: 6px;
+        height: 20px;
+        background-color: var(--primary-color);
+        border-radius: 8px;
+        animation: sound-wave-animation 1.2s infinite ease-in-out;
+    }
+    
+    .sound-wave span:nth-child(2) {
+        animation-delay: 0.2s;
+    }
+    
+    .sound-wave span:nth-child(3) {
+        animation-delay: 0.4s;
+    }
+    
+    .sound-wave span:nth-child(4) {
+        animation-delay: 0.6s;
+    }
+    
+    .sound-wave span:nth-child(5) {
+        animation-delay: 0.8s;
+    }
+    
+    .sound-wave span:nth-child(6) {
+        animation-delay: 1s;
+    }
+    
+    @keyframes sound-wave-animation {
+        0%, 100% {
+            height: 20px;
+        }
+        50% {
+            height: 50px;
+        }
+    }
+    
+    .vote-btn {
+        position: relative;
+        color: black;
+        font-size: 1rem;
+    }
+    
+    .vote-btn.selected {
+        background-color: var(--primary-color);
+        color: white;
+    }
+    
+    .vote-btn:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
+    }
+    
+    .vote-loader {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(255, 255, 255, 0.8);
+    }
+    
+    .vote-spinner {
+        width: 20px;
+        height: 20px;
+        border: 2px solid rgba(80, 70, 229, 0.3);
+        border-radius: 50%;
+        border-top-color: var(--primary-color);
+        animation: spin 1s linear infinite;
+    }
+    
+    .next-round-container {
+        margin-top: 24px;
+        text-align: center;
+    }
+    
+    .next-round-btn {
+        padding: 12px 24px;
+        background-color: var(--primary-color);
+        color: white;
+        border: none;
+        border-radius: var(--radius);
+        font-weight: 500;
+        cursor: pointer;
+        position: relative;
+        width: 100%;
+        font-size: 1rem;
+        transition: background-color 0.2s;
+    }
+    
+    .next-round-btn:hover {
+        background-color: #4038c7;
+    }
+    
+    /* Vote results styling */
+    .vote-results {
+        background-color: #f0f4ff;
+        border: 1px solid #d0d7f7;
+        border-radius: var(--radius);
+        padding: 16px;
+        margin: 24px 0;
+    }
+    
+    .results-heading {
+        color: var(--primary-color);
+        margin-bottom: 12px;
+        font-size: 18px;
+    }
+    
+    .results-content {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+    
+    /* Tab styling */
+    .tabs {
+        display: flex;
+        border-bottom: 1px solid var(--border-color);
+        margin-bottom: 24px;
+    }
+    
+    .tab {
+        padding: 12px 24px;
+        cursor: pointer;
+        position: relative;
+        font-weight: 500;
+    }
+    
+    .tab.active {
+        color: var(--primary-color);
+    }
+    
+    .tab.active::after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: var(--primary-color);
+    }
+    
+    .tab-content {
+        display: none;
+    }
+    
+    .tab-content.active {
+        display: block;
+    }
+    
+    /* Coming soon styling */
+    .coming-soon-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 60px 20px;
+        background-color: var(--light-gray);
+        border-radius: var(--radius);
+        margin: 20px 0;
+    }
+    
+    .coming-soon-icon {
+        color: var(--primary-color);
+        margin-bottom: 20px;
+    }
+    
+    .coming-soon-title {
+        font-size: 24px;
+        font-weight: 600;
+        margin-bottom: 16px;
+        color: var(--text-color);
+    }
+    
+    .coming-soon-text {
+        font-size: 16px;
+        color: #666;
+        max-width: 500px;
+        line-height: 1.5;
+    }
+    
+    .model-name-display {
+        font-size: 0.9em;
+        color: #666;
+        font-style: italic;
+    }
+
+    /* WaveSurfer Custom Styles */
+    .player {
+        padding-bottom: 20px;
+    }
+
+    .wave-player-container {
+        margin-bottom: 16px;
+    }
+
+    /* Keyboard shortcut hint */
+    .keyboard-hint {
+        text-align: center;
+        margin-top: 8px;
+        font-size: 13px;
+        color: #888;
+    }
+
+    .keyboard-hint kbd {
+        display: inline-block;
+        padding: 3px 5px;
+        font-size: 11px;
+        line-height: 10px;
+        color: #444;
+        vertical-align: middle;
+        background-color: #fafafa;
+        border: 1px solid #ccc;
+        border-radius: 3px;
+        box-shadow: 0 1px 0 rgba(0,0,0,0.2);
+        margin: 0 2px;
+    }
+    
+    @media (max-width: 768px) {
+        .input-group {
+            border-radius: var(--radius);
+        }
+        
+        .synth-btn {
+            display: none;
+        }
+        
+        .mobile-synth-btn {
+            display: block;
+        }
+        
+        /* Stack players vertically on mobile */
+        .players-row {
+            flex-direction: column;
+            gap: 16px;
+        }
+    }
+    /* Dark mode styles */
+    @media (prefers-color-scheme: dark) {
+        .coming-soon-container {
+            background-color: var(--light-gray);
+        }
+        
+        .coming-soon-text {
+            color: #aaa;
+        }
+        
+        .model-name-display {
+            color: #aaa;
+        }
+        
+        /* Fix vote recorded section in dark mode */
+        .vote-results {
+            background-color: var(--light-gray);
+            border-color: var(--border-color);
+        }
+        
+        .results-heading {
+            color: var(--primary-color);
+        }
+        
+        .results-content {
+            color: var(--text-color);
+        }
+        
+        .chosen-model,
+        .rejected-model {
+            color: var(--text-color);
+        }
+        
+        .chosen-model strong,
+        .rejected-model strong {
+            color: var(--text-color);
+        }
+        
+        .chosen-model-name,
+        .rejected-model-name {
+            color: var(--text-color);
+        }
+        
+        .vote-btn {
+            background-color: var(--light-gray);
+            color: var(--text-color);
+            border-color: var(--border-color);
+        }
+        
+        .vote-btn:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+            border-color: var(--border-color);
+        }
+        
+        .vote-btn.selected {
+            background-color: var(--primary-color);
+            color: white;
+            border-color: var(--primary-color);
+        }
+        
+        .shortcut-key {
+            background-color: rgba(255, 255, 255, 0.1);
+            color: var(--text-color);
+            border-color: var(--border-color);
+        }
+        
+        .vote-btn.selected .shortcut-key {
+            background-color: rgba(255, 255, 255, 0.2);
+            color: white;
+            border-color: transparent;
+        }
+        
+        .random-btn {
+            background-color: var(--light-gray);
+            color: var(--text-color);
+            border-color: var(--border-color);
+        }
+        
+        .random-btn:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        .vote-recorded {
+            background-color: var(--light-gray);
+            border-color: var(--border-color);
+        }
+        
+        /* Ensure border-radius is maintained during loading state */
+        .vote-btn.loading {
+            border-radius: var(--radius);
+        }
+
+        /* Dark mode keyboard hint */
+        .keyboard-hint {
+            color: #aaa;
+        }
+
+        .keyboard-hint kbd {
+            color: #ddd;
+            background-color: #333;
+            border-color: #555;
+            box-shadow: 0 1px 0 rgba(255,255,255,0.1);
+        }
+    }
+    
+    /* Podcast UI styles */
+    .podcast-container {
+        width: 100%;
+    }
+    
+    .podcast-controls {
+        display: flex;
+        gap: 12px;
+        margin-bottom: 24px;
+    }
+    
+    .random-script-btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 16px;
+        height: 40px;
+        background-color: white;
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius);
+        cursor: pointer;
+        transition: background-color 0.2s;
+    }
+    
+    .random-script-btn:hover {
+        background-color: var(--light-gray);
+    }
+    
+    .podcast-synth-btn {
+        padding: 0 24px;
+        height: 40px;
+        background-color: var(--primary-color);
+        color: white;
+        border: none;
+        border-radius: var(--radius);
+        font-weight: 500;
+        cursor: pointer;
+        transition: background-color 0.2s;
+    }
+    
+    .podcast-synth-btn:hover {
+        background-color: #4038c7;
+    }
+    
+    .podcast-script-container {
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius);
+        overflow: hidden;
+        margin-bottom: 24px;
+    }
+    
+    .podcast-lines {
+        max-height: 500px;
+        overflow-y: auto;
+    }
+    
+    .podcast-line {
+        display: flex;
+        border-bottom: 1px solid var(--border-color);
+    }
+    
+    .speaker-label {
+        width: 120px;
+        padding: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 500;
+        border-right: 1px solid var(--border-color);
+        background-color: var(--light-gray);
+        white-space: nowrap;
+    }
+    
+    .speaker-1 {
+        color: #3b82f6;
+    }
+    
+    .speaker-2 {
+        color: #ef4444;
+    }
+    
+    .line-input {
+        flex: 1;
+        padding: 12px;
+        border: none;
+        outline: none;
+        font-size: 1em;
+    }
+    
+    .line-input:focus {
+        background-color: rgba(80, 70, 229, 0.03);
+    }
+    
+    .remove-line-btn {
+        width: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        border: none;
+        border-left: 1px solid var(--border-color);
+        cursor: pointer;
+        color: #888;
+        transition: color 0.2s, background-color 0.2s;
+    }
+    
+    .remove-line-btn:hover {
+        color: #ef4444;
+        background-color: rgba(239, 68, 68, 0.1);
+    }
+    
+    .add-line-btn {
+        width: 100%;
+        padding: 12px;
+        border: none;
+        background-color: var(--light-gray);
+        cursor: pointer;
+        font-weight: 500;
+        transition: background-color 0.2s;
+        margin-bottom: 0;
+        border-bottom: 1px solid var(--border-color);
+    }
+    
+    .add-line-btn:hover {
+        background-color: rgba(80, 70, 229, 0.1);
+    }
+    
+    .podcast-keyboard-hint {
+        padding: 10px;
+        text-align: center;
+        background-color: var(--light-gray);
+        border-top: 1px solid var(--border-color);
+        margin-top: 0;
+        font-size: 13px;
+    }
+    
+    .podcast-player {
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius);
+        padding: 20px;
+        margin-bottom: 24px;
+    }
+    
+    .podcast-wave-player {
+        margin: 20px 0;
+    }
+    
+    .podcast-transcript-container {
+        margin-top: 20px;
+        padding-top: 20px;
+        border-top: 1px solid var(--border-color);
+    }
+    
+    .podcast-transcript {
+        margin-top: 12px;
+        line-height: 1.6;
+    }
+    
+    .transcript-line {
+        margin-bottom: 12px;
+    }
+    
+    .transcript-speaker {
+        font-weight: 600;
+        margin-right: 8px;
+    }
+    
+    .transcript-speaker.speaker-1 {
+        color: #3b82f6;
+    }
+    
+    .transcript-speaker.speaker-2 {
+        color: #ef4444;
+    }
+    
+    /* Responsive styles for podcast UI */
+    @media (max-width: 768px) {
+        .podcast-controls {
+            flex-direction: column;
+        }
+        
+        .random-script-btn,
+        .podcast-synth-btn {
+            width: 100%;
+            height: 48px;
+        }
+        
+        /* Stack podcast players vertically on mobile */
+        .podcast-player-container .players-row {
+            flex-direction: column;
+            gap: 16px;
+        }
+        
+        .podcast-line {
+            flex-direction: column;
+            padding-bottom: 0;
+            margin-bottom: 0;
+        }
+        
+        .speaker-label {
+            width: 100%;
+            border-right: none;
+            border-bottom: 1px solid var(--border-color);
+            padding: 8px 10px;
+            justify-content: flex-start;
+        }
+        
+        .line-input {
+            width: 100%;
+            padding: 8px 10px;
+        }
+        
+        .remove-line-btn {
+            position: absolute;
+            top: 6px;
+            right: 10px;
+            border-left: none;
+            background-color: rgba(255, 255, 255, 0.5);
+            border-radius: 4px;
+            width: 30px;
+            height: 30px;
+        }
+        
+        .podcast-line {
+            position: relative;
+        }
+        
+        /* Dark mode adjustments for mobile */
+        @media (prefers-color-scheme: dark) {
+            .remove-line-btn {
+                background-color: rgba(50, 50, 60, 0.7);
+            }
+        }
+    }
+    
+    /* Dark mode styles for podcast UI */
+    @media (prefers-color-scheme: dark) {
+        .random-script-btn {
+            background-color: var(--light-gray);
+            color: var(--text-color);
+            border-color: var(--border-color);
+        }
+
+        .add-line-btn {
+            background-color: var(--light-gray);
+            color: var(--text-color);
+            border-color: var(--border-color);
+        }
+        
+        .random-script-btn:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        .line-input {
+            background-color: var(--light-gray);
+            color: var(--text-color);
+        }
+        
+        .line-input:focus {
+            background-color: rgba(108, 99, 255, 0.1);
+        }
+    }
+
+    .podcast-loading-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100vh;
+        background-color: rgba(255, 255, 255, 0.9);
+        z-index: 1000;
+    }
+    
+    @media (prefers-color-scheme: dark) {
+        .podcast-loading-container {
+            background-color: rgba(18, 18, 24, 0.9);
+        }
+    }
+
+    .podcast-vote-results {
+        background-color: #f0f4ff;
+        border: 1px solid #d0d7f7;
+        border-radius: var(--radius);
+        padding: 16px;
+        margin: 24px 0;
+    }
+    
+    .podcast-next-round-container {
+        margin-top: 24px;
+        text-align: center;
+    }
+    
+    .podcast-next-round-btn {
+        padding: 12px 24px;
+        background-color: var(--primary-color);
+        color: white;
+        border: none;
+        border-radius: var(--radius);
+        font-weight: 500;
+        cursor: pointer;
+        position: relative;
+        width: 100%;
+        font-size: 1rem;
+        transition: background-color 0.2s;
+    }
+    
+    .podcast-next-round-btn:hover {
+        background-color: #4038c7;
+    }
+    
+    /* Dark mode adjustments */
+    @media (prefers-color-scheme: dark) {
+        .podcast-vote-results {
+            background-color: var(--light-gray);
+            border-color: var(--border-color);
+        }
+    }
+</style>
+{% endblock %} 
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', filename='js/waveplayer.js') }}"></script>
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const synthForm = document.querySelector('.input-container');
+        const synthBtn = document.querySelector('.synth-btn');
+        const mobileSynthBtn = document.querySelector('.mobile-synth-btn');
+        const loadingContainer = document.querySelector('.loading-container');
+        const playersContainer = document.querySelector('.players-container');
+        const voteButtons = document.querySelectorAll('.vote-btn');
+        const textInput = document.querySelector('.text-input');
+        const nextRoundBtn = document.querySelector('.next-round-btn');
+        const nextRoundContainer = document.querySelector('.next-round-container');
+        const randomBtn = document.querySelector('.random-btn');
+        const tabs = document.querySelectorAll('.tab');
+        const tabContents = document.querySelectorAll('.tab-content');
+        const voteResultsContainer = document.querySelector('.vote-results');
+        const chosenModelNameElement = document.querySelector('.chosen-model-name');
+        const rejectedModelNameElement = document.querySelector('.rejected-model-name');
+        const modelNameDisplays = document.querySelectorAll('.model-name-display');
+        const wavePlayerContainers = document.querySelectorAll('.wave-player-container');
+        
+        let bothSamplesPlayed = false;
+        let currentSessionId = null;
+        let modelNames = { a: '', b: '' };
+        let wavePlayers = { a: null, b: null };
+        
+        // Initialize WavePlayers with mobile settings
+        wavePlayerContainers.forEach(container => {
+            const model = container.dataset.model;
+            wavePlayers[model] = new WavePlayer(container, {
+                // Add mobile-friendly options but hide native controls
+                backend: 'MediaElement',
+                mediaControls: false // Hide native audio controls
+            });
+        });
+        
+        // Random text options
+        const randomTexts = [
+            "The quick brown fox jumps over the lazy dog.",
+            "To be or not to be, that is the question.",
+            "Life is like a box of chocolates, you never know what you're going to get.",
+            "In a world where technology and humanity intertwine, the voice is our most natural interface.",
+            "Artificial intelligence will transform how we interact with computers and each other.",
+            "The sunset painted the sky with hues of orange and purple.",
+            "I can't believe it's not butter!",
+            "Four score and seven years ago, our forefathers brought forth upon this continent a new nation.",
+            "Houston, we have a problem.",
+            "May the force be with you.",
+            "The early bird catches the worm, but the second mouse gets the cheese.",
+            "All that glitters is not gold; all who wander are not lost.",
+            "Be yourself; everyone else is already taken.",
+            "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.",
+            "So many books, so little time.",
+            "You only live once, but if you do it right, once is enough.",
+            "In three words I can sum up everything I've learned about life: it goes on.",
+            "The future belongs to those who believe in the beauty of their dreams.",
+            "Yesterday is history, tomorrow is a mystery, but today is a gift. That's why it's called the present.",
+            "The only way to do great work is to love what you do.",
+            "Life is what happens when you're busy making other plans.",
+            "The greatest glory in living lies not in never falling, but in rising every time we fall.",
+            "The way to get started is to quit talking and begin doing.",
+            "If life were predictable it would cease to be life, and be without flavor.",
+            "If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success.",
+            "Life is either a daring adventure or nothing at all.",
+            "Many of life's failures are people who did not realize how close they were to success when they gave up.",
+            "You have brains in your head. You have feet in your shoes. You can steer yourself any direction you choose.",
+            "It is during our darkest moments that we must focus to see the light.",
+            "Don't judge each day by the harvest you reap but by the seeds that you plant.",
+            "The future belongs to those who believe in the beauty of their dreams.",
+            "Tell me and I forget. Teach me and I remember. Involve me and I learn.",
+            "The best and most beautiful things in the world cannot be seen or even touched — they must be felt with the heart.",
+            "It is better to fail in originality than to succeed in imitation.",
+            "Darkness cannot drive out darkness: only light can do that. Hate cannot drive out hate: only love can do that.",
+            "Do not go where the path may lead, go instead where there is no path and leave a trail.",
+            "You will face many defeats in life, but never let yourself be defeated.",
+            "In the end, it's not the years in your life that count. It's the life in your years.",
+            "Never let the fear of striking out keep you from playing the game.",
+            "Life is never fair, and perhaps it is a good thing for most of us that it is not.",
+        ];
+        
+        // Check URL hash for direct tab access
+        function checkHashAndSetTab() {
+            const hash = window.location.hash.toLowerCase();
+            if (hash === '#conversational') {
+                // Switch to conversational tab
+                tabs.forEach(t => t.classList.remove('active'));
+                tabContents.forEach(c => c.classList.remove('active'));
+                
+                document.querySelector('.tab[data-tab="conversational"]').classList.add('active');
+                document.getElementById('conversational-tab').classList.add('active');
+            } else if (hash === '#tts') {
+                // Switch to TTS tab (explicit)
+                tabs.forEach(t => t.classList.remove('active'));
+                tabContents.forEach(c => c.classList.remove('active'));
+                
+                document.querySelector('.tab[data-tab="tts"]').classList.add('active');
+                document.getElementById('tts-tab').classList.add('active');
+            }
+        }
+        
+        // Check hash on page load
+        checkHashAndSetTab();
+        
+        // Listen for hash changes
+        window.addEventListener('hashchange', checkHashAndSetTab);
+        
+        // Tab switching functionality
+        tabs.forEach(tab => {
+            tab.addEventListener('click', function() {
+                const tabId = this.dataset.tab;
+                
+                // Update URL hash without page reload
+                history.replaceState(null, null, `#${tabId}`);
+                
+                // Remove active class from all tabs and contents
+                tabs.forEach(t => t.classList.remove('active'));
+                tabContents.forEach(c => c.classList.remove('active'));
+                
+                // Add active class to clicked tab and corresponding content
+                this.classList.add('active');
+                document.getElementById(`${tabId}-tab`).classList.add('active');
+                
+                // Reset TTS tab state if switching away from it
+                if (tabId !== 'tts') {
+                    resetToInitialState();
+                }
+            });
+        });
+        
+        function handleSynthesize(e) {
+            if (e) {
+                e.preventDefault();
+            }
+
+            const text = textInput.value.trim();
+            if (!text) {
+                openToast("Please enter some text to synthesize", "warning");
+                return;
+            }
+            
+            if (text.length > 1000) {
+                openToast("Text is too long. Please keep it under 1000 characters.", "warning");
+                return;
+            }
+
+            textInput.blur();
+            
+            // Show loading animation
+            loadingContainer.style.display = 'flex';
+            playersContainer.style.display = 'none';
+            voteResultsContainer.style.display = 'none';
+            nextRoundContainer.style.display = 'none';
+            
+            // Reset vote buttons
+            voteButtons.forEach(btn => {
+                btn.disabled = true;
+                btn.classList.remove('selected');
+                btn.querySelector('.vote-loader').style.display = 'none';
+            });
+            
+            // Clear model name displays
+            modelNameDisplays.forEach(display => {
+                display.textContent = '';
+            });
+            
+            // Reset the flag for both samples played
+            bothSamplesPlayed = false;
+            
+            // Call the API to generate TTS
+            fetch('/api/tts/generate', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ text: text }),
+            })
+            .then(response => {
+                if (!response.ok) {
+                    return response.json().then(err => {
+                        throw new Error(err.error || 'Failed to generate TTS');
+                    });
+                }
+                return response.json();
+            })
+            .then(data => {
+                currentSessionId = data.session_id;
+                
+                // Load audio in waveplayers
+                wavePlayers.a.loadAudio(data.audio_a);
+                wavePlayers.b.loadAudio(data.audio_b);
+                
+                // Show players
+                loadingContainer.style.display = 'none';
+                playersContainer.style.display = 'flex';
+                
+                // Setup automatic sequential playback
+                wavePlayers.a.wavesurfer.once('ready', function() {
+                    wavePlayers.a.play();
+                    
+                    // When audio A ends, play audio B
+                    wavePlayers.a.wavesurfer.once('finish', function() {
+                        // Wait a short moment before playing B
+                        setTimeout(() => {
+                            wavePlayers.b.play();
+                            
+                            // When audio B ends, enable voting
+                            wavePlayers.b.wavesurfer.once('finish', function() {
+                                bothSamplesPlayed = true;
+                                voteButtons.forEach(btn => {
+                                    btn.disabled = false;
+                                });
+                            });
+                        }, 500);
+                    });
+                });
+            })
+            .catch(error => {
+                loadingContainer.style.display = 'none';
+                openToast(error.message, "error");
+                console.error('Error:', error);
+            });
+        }
+        
+        function handleVote(model) {
+            // Disable both vote buttons
+            voteButtons.forEach(btn => {
+                btn.disabled = true;
+                if (btn.dataset.model === model) {
+                    btn.querySelector('.vote-loader').style.display = 'flex';
+                }
+            });
+            
+            // Send vote to server
+            fetch('/api/tts/vote', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    session_id: currentSessionId,
+                    chosen_model: model
+                }),
+            })
+            .then(response => {
+                if (!response.ok) {
+                    return response.json().then(err => {
+                        throw new Error(err.error || 'Failed to submit vote');
+                    });
+                }
+                return response.json();
+            })
+            .then(data => {
+                // Hide loaders
+                voteButtons.forEach(btn => {
+                    btn.querySelector('.vote-loader').style.display = 'none';
+                    
+                    // Highlight the selected button
+                    if (btn.dataset.model === model) {
+                        btn.classList.add('selected');
+                    }
+                });
+
+
+                // Store model names from vote response
+                if (data.chosen_model && data.chosen_model.name) {
+                    modelNames.a = data.names.a;
+                    modelNames.b = data.names.b;
+                }
+                
+                // Now display model names after voting
+                modelNameDisplays[0].textContent = modelNames.a ? `(${modelNames.a})` : '';
+                modelNameDisplays[1].textContent = modelNames.b ? `(${modelNames.b})` : '';
+                
+                // Show vote results
+                chosenModelNameElement.textContent = data.chosen_model.name;
+                rejectedModelNameElement.textContent = data.rejected_model.name;
+                voteResultsContainer.style.display = 'block';
+                
+                // Show next round button
+                nextRoundContainer.style.display = 'block';
+                
+                // Show success toast
+                openToast("Vote recorded successfully!", "success");
+            })
+            .catch(error => {
+                // Re-enable vote buttons
+                voteButtons.forEach(btn => {
+                    btn.disabled = false;
+                    btn.querySelector('.vote-loader').style.display = 'none';
+                });
+                
+                openToast(error.message, "error");
+                console.error('Error:', error);
+            });
+        }
+        
+        function resetToInitialState() {
+            // Hide players, results, and next round button
+            playersContainer.style.display = 'none';
+            voteResultsContainer.style.display = 'none';
+            nextRoundContainer.style.display = 'none';
+            
+            // Reset vote buttons
+            voteButtons.forEach(btn => {
+                btn.disabled = true;
+                btn.classList.remove('selected');
+                btn.querySelector('.vote-loader').style.display = 'none';
+            });
+            
+            // Clear model name displays
+            modelNameDisplays.forEach(display => {
+                display.textContent = '';
+            });
+            
+            // Reset model names
+            modelNames = { a: '', b: '' };
+            
+            // Clear text input
+            textInput.value = '';
+            
+            // Stop any playing audio and destroy wavesurfers
+            for (const model in wavePlayers) {
+                if (wavePlayers[model]) {
+                    wavePlayers[model].stop();
+                }
+            }
+            
+            // Reset session
+            currentSessionId = null;
+            
+            // Reset the flag for both samples played
+            bothSamplesPlayed = false;
+        }
+        
+        function handleRandom() {
+            // Select a random text from the array
+            const randomText = randomTexts[Math.floor(Math.random() * randomTexts.length)];
+            textInput.value = randomText;
+            textInput.focus();
+        }
+        
+        function showListenToastMessage() {
+            openToast("Please listen to both audio samples before voting", "info");
+        }
+        
+        // Add submit event listener to form
+        synthForm.addEventListener('submit', handleSynthesize);
+        
+        // Add click event listeners to vote buttons
+        voteButtons.forEach(btn => {
+            btn.addEventListener('click', function() {
+                if (bothSamplesPlayed) {
+                    const model = this.dataset.model;
+                    handleVote(model);
+                } else {
+                    showListenToastMessage();
+                }
+            });
+        });
+        
+        // Add keyboard shortcut listeners
+        document.addEventListener('keydown', function(e) {
+            // Check if TTS tab is active
+            const ttsTab = document.getElementById('tts-tab');
+            if (!ttsTab.classList.contains('active')) return;
+            
+            // Only process keyboard shortcuts if text input is not focused
+            if (document.activeElement === textInput) {
+                return;
+            }
+            
+            if (e.key.toLowerCase() === 'a') {
+                if (bothSamplesPlayed && !voteButtons[0].disabled) {
+                    handleVote('a');
+                } else if (playersContainer.style.display !== 'none' && !bothSamplesPlayed) {
+                    showListenToastMessage();
+                }
+            } else if (e.key.toLowerCase() === 'b') {
+                if (bothSamplesPlayed && !voteButtons[1].disabled) {
+                    handleVote('b');
+                } else if (playersContainer.style.display !== 'none' && !bothSamplesPlayed) {
+                    showListenToastMessage();
+                }
+            } else if (e.key.toLowerCase() === 'n') {
+                if (nextRoundContainer.style.display === 'block') {
+                    if (!e.ctrlKey && !e.metaKey) {
+                        e.preventDefault();
+                    }
+                    resetToInitialState();
+                }
+            } else if (e.key.toLowerCase() === 'r') {
+                // Only trigger random if not trying to reload (Ctrl+R or Cmd+R)
+                if (!e.ctrlKey && !e.metaKey) {
+                    e.preventDefault();
+                    handleRandom();
+                }
+            } else if (e.key === ' ') {
+                // Space to play/pause current audio
+                if (playersContainer.style.display !== 'none') {
+                    e.preventDefault();
+                    // If A is playing, toggle A, else if B is playing, toggle B, else play A
+                    if (wavePlayers.a.isPlaying) {
+                        wavePlayers.a.togglePlayPause();
+                    } else if (wavePlayers.b.isPlaying) {
+                        wavePlayers.b.togglePlayPause();
+                    } else {
+                        wavePlayers.a.play();
+                    }
+                }
+            }
+        });
+        
+        // Add event listener for random button
+        randomBtn.addEventListener('click', handleRandom);
+        
+        // Add event listener for next round button
+        nextRoundBtn.addEventListener('click', resetToInitialState);
+    });
+</script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Variables for podcast UI
+        const podcastContainer = document.querySelector('.podcast-container');
+        const podcastLinesContainer = document.querySelector('.podcast-lines');
+        const addLineBtn = document.querySelector('.add-line-btn');
+        const randomScriptBtn = document.querySelector('.random-script-btn');
+        const podcastSynthBtn = document.querySelector('.podcast-synth-btn');
+        const podcastLoadingContainer = document.querySelector('.podcast-loading-container');
+        const podcastPlayerContainer = document.querySelector('.podcast-player-container');
+        const podcastWavePlayerA = document.querySelector('.podcast-wave-player-a');
+        const podcastWavePlayerB = document.querySelector('.podcast-wave-player-b');
+        const podcastVoteButtons = podcastPlayerContainer.querySelectorAll('.vote-btn');
+        const podcastVoteResults = podcastPlayerContainer.querySelector('.vote-results');
+        const podcastNextRoundContainer = podcastPlayerContainer.querySelector('.next-round-container');
+        const podcastNextRoundBtn = podcastPlayerContainer.querySelector('.next-round-btn');
+        const chosenModelNameElement = podcastVoteResults.querySelector('.chosen-model-name');
+        const rejectedModelNameElement = podcastVoteResults.querySelector('.rejected-model-name');
+        
+        let podcastWavePlayers = { a: null, b: null };
+        let bothPodcastSamplesPlayed = false;
+        let currentPodcastSessionId = null;
+        let podcastModelNames = { a: 'Model A', b: 'Model B' };
+        
+        // Sample random scripts for the podcast
+        const randomScripts = [
+            [
+                { speaker: 1, text: "Welcome to our podcast about artificial intelligence. Today we're discussing the latest advances in text-to-speech technology." },
+                { speaker: 2, text: "That's right! Text-to-speech has come a long way in recent years. The voices sound increasingly natural." },
+                { speaker: 1, text: "What do you think are the most impressive recent developments?" },
+                { speaker: 2, text: "I'd say the emotion and inflection that modern TTS systems can convey is truly remarkable." }
+            ],
+            [
+                { speaker: 1, text: "So today we're talking about climate change and its effects on our planet." },
+                { speaker: 2, text: "It's such an important topic. We're seeing more extreme weather events every year." },
+                { speaker: 1, text: "Absolutely. And the science is clear that human activity is the primary driver." },
+                { speaker: 2, text: "What can individuals do to help address this global challenge?" }
+            ],
+            [
+                { speaker: 1, text: "In today's episode, we're exploring the world of modern cinema." },
+                { speaker: 2, text: "Film has evolved so much since its early days. What's your favorite era of movies?" },
+                { speaker: 1, text: "I'm particularly fond of the 1970s New Hollywood movement. Films like The Godfather and Taxi Driver really pushed boundaries." },
+                { speaker: 2, text: "Interesting choice! I'm more drawn to contemporary international cinema, especially from directors like Bong Joon-ho and Park Chan-wook." }
+            ],
+            [
+                { speaker: 1, text: "Today we're discussing the future of remote work. How do you think it's changed the workplace?" },
+                { speaker: 2, text: "I believe it's revolutionized how we think about productivity and work-life balance." },
+                { speaker: 1, text: "Do you think companies will continue to offer remote options post-pandemic?" },
+                { speaker: 2, text: "Absolutely. Companies that don't embrace flexibility will struggle to attract top talent." }
+            ],
+            [
+                { speaker: 1, text: "Let's talk about the latest developments in renewable energy." },
+                { speaker: 2, text: "Solar and wind have become increasingly cost-effective in recent years." },
+                { speaker: 1, text: "What about emerging technologies like green hydrogen?" },
+                { speaker: 2, text: "That's a fascinating area with huge potential, especially for industries that are difficult to electrify." }
+            ],
+            [
+                { speaker: 1, text: "The world of cryptocurrency has seen massive changes lately. What's your take?" },
+                { speaker: 2, text: "It's certainly volatile, but I think blockchain technology has applications beyond just digital currency." },
+                { speaker: 1, text: "Do you see it becoming mainstream in the financial sector?" },
+                { speaker: 2, text: "Parts of it already are. Central banks are exploring digital currencies, and major companies are investing in blockchain." }
+            ],
+            [
+                { speaker: 1, text: "Mental health awareness has grown significantly in recent years." },
+                { speaker: 2, text: "Yes, and it's about time. The stigma around seeking help is finally starting to diminish." },
+                { speaker: 1, text: "What do you think has driven this change?" },
+                { speaker: 2, text: "I think social media has played a role, with more people openly sharing their experiences." }
+            ],
+            [
+                { speaker: 1, text: "Space exploration is entering an exciting new era with private companies leading the charge." },
+                { speaker: 2, text: "The commercialization of space has definitely accelerated innovation in the field." },
+                { speaker: 1, text: "Do you think we'll see humans on Mars in our lifetime?" },
+                { speaker: 2, text: "I'm optimistic. The technology is advancing rapidly, and there's strong motivation from both public and private sectors." }
+            ],
+            [
+                { speaker: 1, text: "Today's topic is sustainable fashion. How can consumers make more ethical choices?" },
+                { speaker: 2, text: "It starts with buying less and choosing quality items that last longer." },
+                { speaker: 1, text: "What about the responsibility of fashion brands themselves?" },
+                { speaker: 2, text: "They need to be transparent about their supply chains and commit to reducing their environmental impact." }
+            ],
+            [
+                { speaker: 1, text: "Let's discuss the evolution of social media and its impact on society." },
+                { speaker: 2, text: "It's transformed how we connect, but also created new challenges like misinformation and privacy concerns." },
+                { speaker: 1, text: "Do you think regulation is the answer?" },
+                { speaker: 2, text: "Partly, but digital literacy education is equally important so people can navigate these platforms responsibly." }
+            ],
+            [
+                { speaker: 1, text: "The field of genomics has seen remarkable progress. What excites you most about it?" },
+                { speaker: 2, text: "Personalized medicine is fascinating - the idea that treatments can be tailored to an individual's genetic makeup." },
+                { speaker: 1, text: "What about the ethical considerations?" },
+                { speaker: 2, text: "Those are crucial. We need robust frameworks to ensure these technologies are used responsibly." }
+            ],
+            [
+                { speaker: 1, text: "Urban planning is facing new challenges in the 21st century. What trends are you seeing?" },
+                { speaker: 2, text: "There's a growing focus on creating walkable, mixed-use neighborhoods that reduce car dependency." },
+                { speaker: 1, text: "How are cities adapting to climate change?" },
+                { speaker: 2, text: "Many are implementing green infrastructure like parks and permeable surfaces to manage flooding and reduce heat islands." }
+            ],
+            [
+                { speaker: 1, text: "The gaming industry has grown enormously in recent years. What's driving this expansion?" },
+                { speaker: 2, text: "Gaming has become much more accessible across different platforms, and the pandemic certainly accelerated adoption." },
+                { speaker: 1, text: "What do you think about the rise of esports?" },
+                { speaker: 2, text: "It's fascinating to see competitive gaming achieve mainstream recognition and create new career opportunities." }
+            ],
+            [
+                { speaker: 1, text: "Let's talk about the future of transportation. How will we get around in 20 years?" },
+                { speaker: 2, text: "Electric vehicles will be dominant, and autonomous driving technology will be much more widespread." },
+                { speaker: 1, text: "What about public transit and alternative modes?" },
+                { speaker: 2, text: "I think we'll see more integrated systems where bikes, scooters, and public transit work seamlessly together." }
+            ]
+        ];
+        
+        // Initialize with 2 empty lines
+        function initializePodcastLines() {
+            podcastLinesContainer.innerHTML = '';
+            addPodcastLine(1);
+            addPodcastLine(2);
+        }
+        
+        // Add a new podcast line
+        function addPodcastLine(speakerNum = null) {
+            const lineCount = podcastLinesContainer.querySelectorAll('.podcast-line').length;
+            
+            // If speaker number isn't specified, alternate between 1 and 2
+            if (speakerNum === null) {
+                speakerNum = (lineCount % 2) + 1;
+            }
+            
+            const lineElement = document.createElement('div');
+            lineElement.className = 'podcast-line';
+            
+            lineElement.innerHTML = `
+                <div class="speaker-label speaker-${speakerNum}">Speaker ${speakerNum}</div>
+                <input type="text" class="line-input" placeholder="Enter dialog...">
+                <button type="button" class="remove-line-btn" tabindex="-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" 
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            `;
+            
+            podcastLinesContainer.appendChild(lineElement);
+            
+            // Add event listener to remove button
+            const removeBtn = lineElement.querySelector('.remove-line-btn');
+            removeBtn.addEventListener('click', function() {
+                // Don't allow removing if there are only 2 lines
+                if (podcastLinesContainer.querySelectorAll('.podcast-line').length > 2) {
+                    lineElement.remove();
+                } else {
+                    openToast("At least 2 lines are required", "warning");
+                }
+            });
+            
+            // Add event listener for keyboard navigation in the input field
+            const inputField = lineElement.querySelector('.line-input');
+            inputField.addEventListener('keydown', function(e) {
+                // Alt+Enter or Ctrl+Enter to add new line
+                if (e.key === 'Enter' && (e.altKey || e.ctrlKey)) {
+                    e.preventDefault();
+                    addPodcastLine();
+                    
+                    // Focus the new line's input field
+                    setTimeout(() => {
+                        const inputs = podcastLinesContainer.querySelectorAll('.line-input');
+                        inputs[inputs.length - 1].focus();
+                    }, 10);
+                }
+            });
+            
+            return lineElement;
+        }
+        
+        // Load a random script
+        function loadRandomScript() {
+            // Clear existing lines
+            podcastLinesContainer.innerHTML = '';
+            
+            // Select a random script
+            const randomScript = randomScripts[Math.floor(Math.random() * randomScripts.length)];
+            
+            // Add each line from the script
+            randomScript.forEach(line => {
+                const lineElement = addPodcastLine(line.speaker);
+                lineElement.querySelector('.line-input').value = line.text;
+            });
+        }
+        
+        // Generate podcast (mock functionality)
+        function generatePodcast() {
+            // Get all lines
+            const lines = [];
+            podcastLinesContainer.querySelectorAll('.podcast-line').forEach(line => {
+                const speaker_id = line.querySelector('.speaker-label').textContent.includes('1') ? 0 : 1;
+                const text = line.querySelector('.line-input').value.trim();
+                
+                if (text) {
+                    lines.push({ speaker_id, text });
+                }
+            });
+            
+            // Validate that we have at least 2 lines with content
+            if (lines.length < 2) {
+                openToast("Please enter at least 2 lines of dialog", "warning");
+                return;
+            }
+            
+            // Reset vote buttons and hide results
+            podcastVoteButtons.forEach(btn => {
+                btn.disabled = true;
+                btn.classList.remove('selected');
+                btn.querySelector('.vote-loader').style.display = 'none';
+            });
+            
+            // Clear model name displays
+            const modelNameDisplays = podcastPlayerContainer.querySelectorAll('.model-name-display');
+            modelNameDisplays.forEach(display => {
+                display.textContent = '';
+            });
+
+            podcastVoteResults.style.display = 'none';
+            podcastNextRoundContainer.style.display = 'none';
+            
+            // Reset the flag for both samples played
+            bothPodcastSamplesPlayed = false;
+            
+            // Show loading animation
+            podcastLoadingContainer.style.display = 'flex';
+            podcastPlayerContainer.style.display = 'none';
+            
+            // Call API to generate podcast
+            fetch('/api/conversational/generate', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ script: lines }),
+            })
+            .then(response => {
+                if (!response.ok) {
+                    return response.json().then(err => {
+                        throw new Error(err.error || 'Failed to generate podcast');
+                    });
+                }
+                return response.json();
+            })
+            .then(data => {
+                currentPodcastSessionId = data.session_id;
+                
+                // Hide loading
+                podcastLoadingContainer.style.display = 'none';
+                
+                // Show player
+                podcastPlayerContainer.style.display = 'block';
+                
+                // Initialize WavePlayers if not already done
+                if (!podcastWavePlayers.a) {
+                    podcastWavePlayers.a = new WavePlayer(podcastWavePlayerA, {
+                        // Add mobile-friendly options but hide native controls
+                        backend: 'MediaElement',
+                        mediaControls: false // Hide native audio controls
+                    });
+                    podcastWavePlayers.b = new WavePlayer(podcastWavePlayerB, {
+                        // Add mobile-friendly options but hide native controls
+                        backend: 'MediaElement',
+                        mediaControls: false // Hide native audio controls
+                    });
+                    
+                    // Load audio in waveplayers
+                    podcastWavePlayers.a.loadAudio(data.audio_a);
+                    podcastWavePlayers.b.loadAudio(data.audio_b);
+                    
+                    // Force hide loading indicators after 5 seconds as a fallback
+                    setTimeout(() => {
+                        if (podcastWavePlayers.a && podcastWavePlayers.a.hideLoading) {
+                            podcastWavePlayers.a.hideLoading();
+                        }
+                        if (podcastWavePlayers.b && podcastWavePlayers.b.hideLoading) {
+                            podcastWavePlayers.b.hideLoading();
+                        }
+                        console.log('Forced hiding of podcast loading indicators (safety timeout - existing players)');
+                    }, 5000);
+                } else {
+                    // Reset and reload for existing players
+                    try {
+                        podcastWavePlayers.a.wavesurfer.empty();
+                        podcastWavePlayers.b.wavesurfer.empty();
+                        
+                        // Make sure loading indicators are reset
+                        podcastWavePlayers.a.hideLoading();
+                        podcastWavePlayers.b.hideLoading();
+                        
+                        podcastWavePlayers.a.loadAudio(data.audio_a);
+                        podcastWavePlayers.b.loadAudio(data.audio_b);
+                        
+                        // Force hide loading indicators after 5 seconds as a fallback
+                        setTimeout(() => {
+                            if (podcastWavePlayers.a && podcastWavePlayers.a.hideLoading) {
+                                podcastWavePlayers.a.hideLoading();
+                            }
+                            if (podcastWavePlayers.b && podcastWavePlayers.b.hideLoading) {
+                                podcastWavePlayers.b.hideLoading();
+                            }
+                            console.log('Forced hiding of podcast loading indicators (safety timeout - existing players)');
+                        }, 5000);
+                    } catch (err) {
+                        console.error('Error resetting podcast waveplayers:', err);
+                        
+                        // Recreate the players if there was an error
+                        podcastWavePlayers.a = new WavePlayer(podcastWavePlayerA, {
+                            backend: 'MediaElement',
+                            mediaControls: false
+                        });
+                        podcastWavePlayers.b = new WavePlayer(podcastWavePlayerB, {
+                            backend: 'MediaElement',
+                            mediaControls: false
+                        });
+                        
+                        podcastWavePlayers.a.loadAudio(data.audio_a);
+                        podcastWavePlayers.b.loadAudio(data.audio_b);
+
+                        // Force hide loading indicators after 5 seconds as a fallback
+                        setTimeout(() => {
+                            if (podcastWavePlayers.a && podcastWavePlayers.a.hideLoading) {
+                                podcastWavePlayers.a.hideLoading();
+                            }
+                            if (podcastWavePlayers.b && podcastWavePlayers.b.hideLoading) {
+                                podcastWavePlayers.b.hideLoading();
+                            }
+                            console.log('Forced hiding of podcast loading indicators (fallback case)');
+                        }, 5000);
+                    }
+                }
+                
+                // Setup automatic sequential playback
+                podcastWavePlayers.a.wavesurfer.once('ready', function() {
+                    podcastWavePlayers.a.play();
+                    
+                    // When audio A ends, play audio B
+                    podcastWavePlayers.a.wavesurfer.once('finish', function() {
+                        // Wait a short moment before playing B
+                        setTimeout(() => {
+                            podcastWavePlayers.b.play();
+                            
+                            // When audio B ends, enable voting
+                            podcastWavePlayers.b.wavesurfer.once('finish', function() {
+                                bothPodcastSamplesPlayed = true;
+                                podcastVoteButtons.forEach(btn => {
+                                    btn.disabled = false;
+                                });
+                            });
+                        }, 500);
+                    });
+                });
+            })
+            .catch(error => {
+                podcastLoadingContainer.style.display = 'none';
+                openToast(error.message, "error");
+                console.error('Error:', error);
+            });
+        }
+        
+        // Handle vote for a podcast model
+        function handlePodcastVote(model) {
+            // Disable both vote buttons
+            podcastVoteButtons.forEach(btn => {
+                btn.disabled = true;
+                if (btn.dataset.model === model) {
+                    btn.querySelector('.vote-loader').style.display = 'flex';
+                }
+            });
+            
+            // Send vote to server
+            fetch('/api/conversational/vote', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    session_id: currentPodcastSessionId,
+                    chosen_model: model
+                }),
+            })
+            .then(response => {
+                if (!response.ok) {
+                    return response.json().then(err => {
+                        throw new Error(err.error || 'Failed to submit vote');
+                    });
+                }
+                return response.json();
+            })
+            .then(data => {
+                // Hide loaders
+                podcastVoteButtons.forEach(btn => {
+                    btn.querySelector('.vote-loader').style.display = 'none';
+                    
+                    // Highlight the selected button
+                    if (btn.dataset.model === model) {
+                        btn.classList.add('selected');
+                    }
+                });
+                
+                // Store model names from vote response
+                podcastModelNames.a = data.names.a;
+                podcastModelNames.b = data.names.b;
+                
+                // Show model names after voting
+                const modelNameDisplays = podcastPlayerContainer.querySelectorAll('.model-name-display');
+                modelNameDisplays[0].textContent = data.names.a ? `(${data.names.a})` : '';
+                modelNameDisplays[1].textContent = data.names.b ? `(${data.names.b})` : '';
+                
+                // Show vote results
+                chosenModelNameElement.textContent = data.chosen_model.name;
+                rejectedModelNameElement.textContent = data.rejected_model.name;
+                podcastVoteResults.style.display = 'block';
+                
+                // Show next round button
+                podcastNextRoundContainer.style.display = 'block';
+                
+                // Show success toast
+                openToast("Vote recorded successfully!", "success");
+            })
+            .catch(error => {
+                // Re-enable vote buttons
+                podcastVoteButtons.forEach(btn => {
+                    btn.disabled = false;
+                    btn.querySelector('.vote-loader').style.display = 'none';
+                });
+                
+                openToast(error.message, "error");
+                console.error('Error:', error);
+            });
+        }
+        
+        // Reset podcast UI to initial state
+        function resetPodcastState() {
+            // Hide players, results, and next round button
+            podcastPlayerContainer.style.display = 'none';
+            podcastVoteResults.style.display = 'none';
+            podcastNextRoundContainer.style.display = 'none';
+            
+            // Reset vote buttons
+            podcastVoteButtons.forEach(btn => {
+                btn.disabled = true;
+                btn.classList.remove('selected');
+                btn.querySelector('.vote-loader').style.display = 'none';
+            });
+            
+            // Clear model name displays
+            const modelNameDisplays = podcastPlayerContainer.querySelectorAll('.model-name-display');
+            modelNameDisplays.forEach(display => {
+                display.textContent = '';
+            });
+            
+            // Stop any playing audio
+            if (podcastWavePlayers.a) podcastWavePlayers.a.stop();
+            if (podcastWavePlayers.b) podcastWavePlayers.b.stop();
+            
+            // Reset session
+            currentPodcastSessionId = null;
+            
+            // Reset the flag for both samples played
+            bothPodcastSamplesPlayed = false;
+        }
+        
+        // Add keyboard shortcut listeners for podcast voting
+        document.addEventListener('keydown', function(e) {
+            // Check if we're in the podcast tab and it's active
+            const podcastTab = document.getElementById('conversational-tab');
+            if (!podcastTab.classList.contains('active')) return;
+            
+            // Only process if input fields are not focused
+            if (document.activeElement.tagName === 'INPUT' || 
+                document.activeElement.tagName === 'TEXTAREA') {
+                return;
+            }
+            
+            if (e.key.toLowerCase() === 'a') {
+                if (bothPodcastSamplesPlayed && !podcastVoteButtons[0].disabled) {
+                    handlePodcastVote('a');
+                } else if (podcastPlayerContainer.style.display !== 'none' && !bothPodcastSamplesPlayed) {
+                    openToast("Please listen to both audio samples before voting", "info");
+                }
+            } else if (e.key.toLowerCase() === 'b') {
+                if (bothPodcastSamplesPlayed && !podcastVoteButtons[1].disabled) {
+                    handlePodcastVote('b');
+                } else if (podcastPlayerContainer.style.display !== 'none' && !bothPodcastSamplesPlayed) {
+                    openToast("Please listen to both audio samples before voting", "info");
+                }
+            } else if (e.key.toLowerCase() === 'n') {
+                if (podcastNextRoundContainer.style.display === 'block') {
+                    if (!e.ctrlKey && !e.metaKey) {
+                        e.preventDefault();
+                    }
+                    resetPodcastState();
+                }
+            } else if (e.key === ' ') {
+                // Space to play/pause current audio
+                if (podcastPlayerContainer.style.display !== 'none') {
+                    e.preventDefault();
+                    // If A is playing, toggle A, else if B is playing, toggle B, else play A
+                    if (podcastWavePlayers.a && podcastWavePlayers.a.isPlaying) {
+                        podcastWavePlayers.a.togglePlayPause();
+                    } else if (podcastWavePlayers.b && podcastWavePlayers.b.isPlaying) {
+                        podcastWavePlayers.b.togglePlayPause();
+                    } else if (podcastWavePlayers.a) {
+                        podcastWavePlayers.a.play();
+                    }
+                }
+            }
+        });
+        
+        // Event listeners
+        addLineBtn.addEventListener('click', function() {
+            addPodcastLine();
+        });
+        
+        randomScriptBtn.addEventListener('click', function() {
+            loadRandomScript();
+        });
+        
+        podcastSynthBtn.addEventListener('click', function() {
+            generatePodcast();
+        });
+        
+        // Add event listeners to vote buttons
+        podcastVoteButtons.forEach(btn => {
+            btn.addEventListener('click', function() {
+                if (bothPodcastSamplesPlayed) {
+                    const model = this.dataset.model;
+                    handlePodcastVote(model);
+                } else {
+                    openToast("Please listen to both audio samples before voting", "info");
+                }
+            });
+        });
+        
+        // Add event listener for next round button
+        podcastNextRoundBtn.addEventListener('click', resetPodcastState);
+        
+        // Initialize with 2 empty lines
+        initializePodcastLines();
+    });
+</script>
+{% endblock %}

templates/base.html

@@ -0,0 +1,1446 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}TTS Arena{% endblock %}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    {% block extra_head %}{% endblock %}
+    <style>
+        :root {
+            --primary-color: #5046e5;
+            --secondary-color: #f0f0f0;
+            --text-color: #333;
+            --light-gray: #f5f5f5;
+            --border-color: #e0e0e0;
+            --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            --radius: 8px;
+            --success-color: #10b981;
+            --info-color: #3b82f6;
+            --warning-color: #f59e0b;
+            --error-color: #ef4444;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Inter', sans-serif;
+        }
+
+        body {
+            color: var(--text-color);
+            display: flex;
+            min-height: 100vh;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        a {
+            color: var(--primary-color);
+        }
+
+        .sidebar {
+            width: 240px;
+            background-color: var(--light-gray);
+            padding: 24px 16px;
+            border-right: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            z-index: 1000;
+            transition: transform 0.3s ease-in-out;
+            flex-shrink: 0;
+        }
+
+        .logo {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 32px;
+            color: var(--primary-color);
+        }
+
+        .nav-item {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            margin-bottom: 8px;
+            border-radius: var(--radius);
+            cursor: pointer;
+            transition: background-color 0.2s;
+            color: var(--text-color);
+            text-decoration: none;
+        }
+
+        .nav-item.active {
+            background-color: rgba(80, 70, 229, 0.1);
+            color: var(--primary-color);
+            font-weight: 500;
+        }
+
+        .nav-item:hover:not(.active) {
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+
+        .nav-item svg {
+            margin-right: 12px;
+        }
+
+        .main-content {
+            flex: 1;
+            padding: 32px;
+            width: 100%;
+            margin: 0 auto;
+            overflow-y: auto;
+            height: 100vh;
+        }
+
+        .main-content-inner {
+            max-width: 1200px;
+            width: 100%;
+            margin: 0 auto;
+        }
+
+        .tabs {
+            display: flex;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 24px;
+        }
+
+        .tab {
+            padding: 12px 24px;
+            cursor: pointer;
+            position: relative;
+            font-weight: 500;
+        }
+
+        .tab.active {
+            color: var(--primary-color);
+        }
+
+        .tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: -1px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background-color: var(--primary-color);
+        }
+
+        .input-container {
+            display: flex;
+            margin-bottom: 24px;
+            align-items: center;
+        }
+
+        .text-input {
+            flex: 1;
+            padding: 12px 16px;
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius);
+            font-family: 'Inter', sans-serif;
+            font-size: 1em;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+
+        .text-input:focus {
+            border-color: var(--primary-color);
+        }
+
+        .btn {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: var(--radius);
+            padding: 12px 24px;
+            margin-left: 12px;
+            cursor: pointer;
+            font-weight: 500;
+            transition: background-color 0.2s;
+        }
+
+        .btn:hover {
+            background-color: #4038c7;
+        }
+
+        .icon-btn {
+            background-color: white;
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius);
+            width: 42px;
+            height: 42px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 12px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+
+        .icon-btn:hover {
+            background-color: var(--light-gray);
+        }
+
+        .players-container {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .players-row {
+            display: flex;
+            gap: 24px;
+            margin-bottom: 24px;
+        }
+
+        .player {
+            flex: 1;
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius);
+            padding: 16px;
+            box-shadow: var(--shadow);
+        }
+
+        .player-label {
+            font-weight: 600;
+            margin-bottom: 12px;
+        }
+
+        .audio-player {
+            width: 100%;
+            margin-bottom: 16px;
+        }
+
+        .vote-btn {
+            width: 100%;
+            padding: 12px;
+            background-color: white;
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius);
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            position: relative;
+        }
+
+        .vote-btn:hover {
+            background-color: var(--light-gray);
+            border-color: #ccc;
+        }
+
+        .vote-btn.selected {
+            background-color: var(--primary-color);
+            color: white;
+            border-color: var(--primary-color);
+        }
+
+        .shortcut-key {
+            position: absolute;
+            right: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            background-color: var(--light-gray);
+            color: var(--text-color);
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            padding: 2px 6px;
+            font-size: 12px;
+            font-weight: 600;
+        }
+
+        .vote-btn.selected .shortcut-key {
+            background-color: rgba(255, 255, 255, 0.2);
+            color: white;
+            border-color: transparent;
+        }
+
+        .user-auth {
+            margin-top: auto;
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            border-top: 1px solid var(--border-color);
+            cursor: pointer;
+            position: relative;
+        }
+
+        .user-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background-color: var(--primary-color);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: 600;
+            margin-right: 12px;
+        }
+
+        .user-name {
+            font-weight: 500;
+            flex: 1;
+        }
+
+        .user-dropdown {
+            position: absolute;
+            bottom: 100%;
+            left: 0;
+            right: 0;
+            margin: 0 16px;
+            background-color: white;
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            z-index: 1000;
+            display: none;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+
+        .user-dropdown.active {
+            display: block;
+        }
+
+        .dropdown-item {
+            padding: 12px 16px;
+            display: flex;
+            align-items: center;
+            transition: background-color 0.2s;
+            text-decoration: none;
+            color: var(--text-color);
+        }
+
+        .dropdown-item:hover {
+            background-color: var(--light-gray);
+        }
+
+        .dropdown-item svg {
+            margin-right: 12px;
+        }
+
+        .dropdown-divider {
+            height: 1px;
+            background-color: var(--border-color);
+            margin: 4px 0;
+        }
+
+        .user-auth-arrow {
+            transition: transform 0.2s;
+        }
+
+        .user-auth.active .user-auth-arrow {
+            transform: rotate(180deg);
+        }
+
+        .login-link {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            border-top: 1px solid var(--border-color);
+            text-decoration: none;
+            color: var(--text-color);
+        }
+
+        .login-link:hover {
+            background-color: var(--light-gray);
+        }
+
+        .login-link img {
+            width: 24px;
+            height: 24px;
+            margin-right: 12px;
+        }
+
+        .discord-link {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            border-top: 1px solid var(--border-color);
+            text-decoration: none;
+            color: var(--text-color);
+        }
+
+        .discord-link:hover {
+            background-color: var(--light-gray);
+            color: #5865F2;
+        }
+
+        .discord-link svg {
+            margin-right: 12px;
+        }
+
+        .sidebar-footer {
+            margin-top: auto;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .mobile-header {
+            display: none;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .hamburger-menu {
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+        }
+
+        .current-page {
+            font-weight: 600;
+            font-size: 18px;
+        }
+
+        .backdrop {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            -webkit-backdrop-filter: blur(3px);
+            backdrop-filter: blur(3px);
+            z-index: 999;
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out;
+        }
+
+        .backdrop.active {
+            display: block;
+            opacity: 1;
+        }
+
+        .close-sidebar {
+            position: absolute;
+            top: 16px;
+            right: 16px;
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+            display: none;
+        }
+
+        /* Toast styles */
+        .toast-container {
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            z-index: 9999;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            max-width: 350px;
+        }
+
+        .toast {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            border-radius: 8px;
+            background-color: white;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+            animation: slideIn 0.3s ease-out forwards;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .toast.slide-out {
+            animation: slideOut 0.3s ease-in forwards;
+        }
+
+        .toast-icon {
+            margin-right: 10px;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .toast-content {
+            flex: 1;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 1.4;
+        }
+
+        .toast-close {
+            margin-left: 10px;
+            cursor: pointer;
+            opacity: 0.5;
+            transition: opacity 0.2s;
+            flex-shrink: 0;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .toast-close:hover {
+            opacity: 1;
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+
+        .toast-progress {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            height: 2px;
+            width: 100%;
+            transform-origin: left;
+        }
+
+        .toast.info {
+            border-left-color: var(--info-color);
+        }
+
+        .toast.info .toast-icon {
+            color: var(--info-color);
+        }
+
+        .toast.info .toast-progress {
+            background-color: var(--info-color);
+        }
+
+        .toast.success .toast-icon {
+            color: var(--success-color);
+        }
+
+        .toast.success .toast-progress {
+            background-color: var(--success-color);
+        }
+
+        .toast.warning .toast-icon {
+            color: var(--warning-color);
+        }
+
+        .toast.warning .toast-progress {
+            background-color: var(--warning-color);
+        }
+
+        .toast.error .toast-icon {
+            color: var(--error-color);
+        }
+
+        .toast.error .toast-progress {
+            background-color: var(--error-color);
+        }
+
+        @keyframes slideIn {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+
+        @keyframes slideOut {
+            from {
+                transform: translateX(0);
+                opacity: 1;
+            }
+
+            to {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+        }
+
+        @keyframes shrink {
+            from {
+                transform: scaleX(1);
+            }
+            to {
+                transform: scaleX(0);
+            }
+        }
+
+        @media (max-width: 768px) {
+            body {
+                flex-direction: column;
+            }
+
+            .mobile-header {
+                display: flex;
+                flex-shrink: 0;
+            }
+
+            .sidebar {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 280px;
+                border-right: 1px solid var(--border-color);
+                padding: 24px 16px;
+                height: 100vh;
+                transform: translateX(-100%);
+            }
+
+            .sidebar.active {
+                transform: translateX(0);
+            }
+
+            .close-sidebar {
+                display: block;
+            }
+
+            .logo {
+                display: block;
+            }
+
+            .players-container {
+                flex-direction: column;
+            }
+
+            .main-content {
+                height: calc(100vh - 57px);
+                overflow-y: auto;
+            }
+
+            .toast-container {
+                bottom: auto;
+                top: 16px;
+                right: 16px;
+                left: 16px;
+                max-width: none;
+            }
+            
+            @keyframes slideIn {
+                from {
+                    transform: translateY(-100%);
+                    opacity: 0;
+                }
+            
+                to {
+                    transform: translateY(0);
+                    opacity: 1;
+                }
+            }
+            
+            @keyframes slideOut {
+                from {
+                    transform: translateY(0);
+                    opacity: 1;
+                }
+            
+                to {
+                    transform: translateY(-100%);
+                    opacity: 0;
+                }
+            }
+        }
+
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: var(--light-gray);
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: rgba(120, 120, 120, 0.5);
+            border-radius: 4px;
+            transition: background 0.2s ease;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(100, 100, 100, 0.7);
+        }
+
+        /* Firefox scrollbar */
+        * {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(120, 120, 120, 0.5) var(--light-gray);
+        }
+
+        /* For Edge and other browsers */
+        ::-webkit-scrollbar-corner {
+            background: var(--light-gray);
+        }
+
+        /* Ensure smooth scrolling */
+        html {
+            scroll-behavior: smooth;
+        }
+
+        /* Dark mode styles */
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --primary-color: #6c63ff;
+                --secondary-color: #2d2b38;
+                --text-color: #e0e0e0;
+                --light-gray: #1e1e24;
+                --border-color: #3a3a45;
+                --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+                --success-color: #10b981;
+                --info-color: #60a5fa;
+                --warning-color: #f59e0b;
+                --error-color: #ef4444;
+            }
+
+            body {
+                background-color: #121218;
+                color: var(--text-color);
+            }
+
+            .sidebar {
+                background-color: var(--light-gray);
+                border-right-color: var(--border-color);
+            }
+
+            .nav-item.active {
+                background-color: rgba(108, 99, 255, 0.2);
+            }
+
+            .nav-item:hover:not(.active) {
+                background-color: rgba(255, 255, 255, 0.05);
+            }
+
+            .text-input,
+            .select-input,
+            .textarea {
+                background-color: var(--light-gray);
+                color: var(--text-color);
+                border-color: var(--border-color);
+            }
+
+            .card {
+                background-color: var(--light-gray);
+                border-color: var(--border-color);
+            }
+
+            .tab.active::after {
+                background-color: var(--primary-color);
+            }
+
+            /* Fix vote buttons in dark mode */
+            .vote-btn {
+                background-color: var(--light-gray);
+                color: var(--text-color);
+                border-color: var(--border-color);
+                border-radius: var(--radius);
+            }
+
+            .vote-btn:hover {
+                background-color: rgba(255, 255, 255, 0.1);
+                border-color: var(--border-color);
+            }
+
+            .vote-btn.selected {
+                background-color: var(--primary-color);
+                color: white;
+                border-color: var(--primary-color);
+            }
+
+            .shortcut-key {
+                background-color: rgba(255, 255, 255, 0.1);
+                color: var(--text-color);
+                border-color: var(--border-color);
+            }
+
+            .vote-btn.selected .shortcut-key {
+                background-color: rgba(255, 255, 255, 0.2);
+                color: white;
+                border-color: transparent;
+            }
+
+            /* Fix loading state in dark mode */
+            .vote-btn:disabled,
+            .vote-btn.loading {
+                background-color: var(--light-gray);
+                border-radius: var(--radius);
+            }
+
+            .vote-loader {
+                background-color: var(--light-gray);
+                border-radius: var(--radius);
+            }
+
+            .vote-spinner {
+                border-color: rgba(108, 99, 255, 0.3);
+                border-top-color: var(--primary-color);
+            }
+
+            .toast {
+                background-color: var(--light-gray);
+                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+            }
+
+            .toast-close:hover {
+                background-color: rgba(255, 255, 255, 0.1);
+            }
+
+            ::-webkit-scrollbar-track {
+                background: var(--secondary-color);
+            }
+
+            ::-webkit-scrollbar-thumb {
+                background: rgba(180, 180, 180, 0.5);
+            }
+
+            ::-webkit-scrollbar-thumb:hover {
+                background: rgba(200, 200, 200, 0.7);
+            }
+
+            * {
+                scrollbar-color: rgba(180, 180, 180, 0.5) var(--secondary-color);
+            }
+
+            ::-webkit-scrollbar-corner {
+                background: var(--secondary-color);
+            }
+
+            /* Dark mode loading overlay */
+            .loading-overlay {
+                background-color: rgba(18, 18, 24, 0.8);
+            }
+
+            /* Dark mode spinner */
+            .loader-spinner {
+                border-color: rgba(108, 99, 255, 0.2);
+                border-top-color: var(--primary-color);
+            }
+
+            /* Dark mode user dropdown */
+            .user-dropdown {
+                background-color: var(--light-gray);
+                border-color: var(--border-color);
+            }
+
+            .dropdown-item {
+                color: var(--text-color);
+            }
+
+            .dropdown-item:hover {
+                background-color: rgba(108, 99, 255, 0.1);
+            }
+
+            .dropdown-divider {
+                background-color: var(--border-color);
+            }
+
+            .user-avatar {
+                background-color: var(--primary-color);
+            }
+        }
+
+        /* Loading Overlay */
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(255, 255, 255, 0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 9999;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s ease, visibility 0.3s ease;
+        }
+
+        .loading-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .loader-spinner {
+            width: 50px;
+            height: 50px;
+            border: 3px solid rgba(80, 70, 229, 0.3);
+            border-radius: 50%;
+            border-top-color: var(--primary-color);
+            animation: spin 1s ease-in-out infinite;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        /* Login tip overlay */
+        .login-tip-overlay {
+            position: absolute;
+            background-color: white;
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            padding: 16px;
+            z-index: 1000;
+            width: 280px;
+            display: none;
+        }
+
+        .login-tip-overlay.show {
+            display: block;
+        }
+
+        .login-tip-content {
+            font-size: 14px;
+            margin-bottom: 12px;
+        }
+
+        .login-tip-actions {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .login-tip-close {
+            font-size: 13px;
+            color: var(--text-color);
+            opacity: 0.7;
+            cursor: pointer;
+            background: none;
+            border: none;
+            padding: 0;
+        }
+
+        .login-now-btn {
+            font-size: 13px;
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 4px;
+            padding: 6px 12px;
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        .login-tip-overlay[data-popper-placement^='top'] .login-tip-caret {
+            position: absolute;
+            bottom: -8px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 16px;
+            height: 8px;
+            overflow: hidden;
+        }
+
+        .login-tip-overlay[data-popper-placement^='top'] .login-tip-caret:after {
+            content: '';
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            background: white;
+            border-right: 1px solid var(--border-color);
+            border-bottom: 1px solid var(--border-color);
+            top: -6px;
+            left: 2px;
+            transform: rotate(45deg);
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .login-tip-overlay {
+                background-color: var(--light-gray);
+                border-color: var(--border-color);
+            }
+            
+            .login-tip-overlay[data-popper-placement^='top'] .login-tip-caret:after {
+                background: var(--light-gray);
+                border-color: var(--border-color);
+            }
+            
+            .login-tip-close {
+                color: var(--text-color);
+            }
+        }
+
+        /* Mobile login banner */
+        .login-banner {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 85%;
+            max-width: 320px;
+            background-color: white;
+            color: var(--text-color);
+            border-radius: var(--radius);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+            padding: 20px;
+            display: none;
+            z-index: 9998;
+            text-align: center;
+            border: 1px solid var(--border-color);
+        }
+
+        .login-banner-content {
+            margin-bottom: 16px;
+            font-size: 15px;
+            font-weight: 500;
+        }
+
+        .login-banner-actions {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            gap: 12px;
+            align-items: center;
+            margin-top: 20px;
+        }
+
+        .login-banner-close {
+            background: none;
+            border: 1px solid var(--border-color);
+            color: var(--text-color);
+            font-size: 14px;
+            cursor: pointer;
+            padding: 10px 16px;
+            border-radius: var(--radius);
+            flex: 1;
+            font-weight: 500;
+        }
+
+        .login-banner-btn {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: var(--radius);
+            padding: 10px 16px;
+            cursor: pointer;
+            font-weight: 500;
+            text-decoration: none;
+            flex: 1;
+            text-align: center;
+        }
+        
+        @media (prefers-color-scheme: dark) {
+            .login-banner {
+                background-color: var(--light-gray);
+                border-color: var(--border-color);
+            }
+            
+            .login-banner-close {
+                border-color: var(--border-color);
+                background-color: rgba(255, 255, 255, 0.05);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Loading Overlay -->
+    <div id="loading-overlay" class="loading-overlay">
+        <div class="loader-spinner"></div>
+    </div>
+
+    <div class="mobile-header">
+        <div class="hamburger-menu" onclick="toggleSidebar()">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+        </div>
+        <div class="current-page">{% block current_page %}Arena{% endblock %}</div>
+    </div>
+
+    <div class="backdrop" onclick="toggleSidebar()"></div>
+
+    <div class="sidebar">
+        <div class="close-sidebar" onclick="toggleSidebar()">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+        </div>
+        <div class="logo">TTS Arena</div>
+        <nav>
+            <a href="{{ url_for('arena') }}" class="nav-item {% if request.path == '/' %}active{% endif %}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dices"><rect width="12" height="12" x="2" y="10" rx="2" ry="2"/><path d="m17.92 14 3.5-3.5a2.24 2.24 0 0 0 0-3l-5-4.92a2.24 2.24 0 0 0-3 0L10 6"/><path d="M6 18h.01"/><path d="M10 14h.01"/><path d="M15 6h.01"/><path d="M18 9h.01"/></svg>
+                Arena
+            </a>
+            <a href="{{ url_for('leaderboard') }}" class="nav-item {% if request.path == '/leaderboard' %}active{% endif %}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trophy"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>
+                Leaderboard
+            </a>
+            <a href="{{ url_for('about') }}" class="nav-item {% if request.path == '/about' %}active{% endif %}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+                About
+            </a>
+            
+            <!-- Admin Panel Link - Only visible to admin users -->
+            {% if g.is_admin %}
+            <a href="{{ url_for('admin.index') }}" class="nav-item {% if '/admin' in request.path %}active{% endif %}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/></svg>
+                Admin Panel
+            </a>
+            {% endif %}
+        </nav>
+
+        <div class="sidebar-footer">
+            <a href="https://discord.gg/HB8fMR6GTr" target="_blank" rel="noopener noreferrer" class="discord-link">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 127.14 96.36" fill="currentColor">
+                    <path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
+                </svg>
+                Join our Discord
+            </a>
+
+            {% if current_user.is_authenticated %}
+            <div class="user-auth" onclick="toggleUserDropdown(event)">
+                <div class="user-name">{{ current_user.username }}</div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="user-auth-arrow">
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+
+                <div class="user-dropdown">
+                    <a href="{{ url_for('auth.logout') }}" class="dropdown-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                            <polyline points="16 17 21 12 16 7"></polyline>
+                            <line x1="21" y1="12" x2="9" y2="12"></line>
+                        </svg>
+                        Logout
+                    </a>
+                </div>
+            </div>
+            {% else %}
+            <a href="{{ url_for('auth.login', next=request.path) }}" class="login-link">
+                <img src="{{ url_for('static', filename='huggingface.svg') }}" alt="Hugging Face">
+                Login
+            </a>
+            <!-- Login tip overlay -->
+            <div id="login-tip-overlay" class="login-tip-overlay">
+                <div class="login-tip-content">
+                    Log in to track your votes, see personalized leaderboards, and more!
+                </div>
+                <div class="login-tip-actions">
+                    <button class="login-tip-close" onclick="dismissLoginTip()">Don't show again</button>
+                    <a href="{{ url_for('auth.login', next=request.path) }}" class="login-now-btn">Login now</a>
+                </div>
+                <div class="login-tip-caret"></div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <div class="main-content">
+        <!-- Flash messages -->
+        {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+        <div class="flash-messages">
+            {% for category, message in messages %}
+            <script>
+                document.addEventListener('DOMContentLoaded', function () {
+                    openToast('{{ message }}', '{{ category }}');
+                });
+            </script>
+            {% endfor %}
+        </div>
+        {% endif %}
+        {% endwith %}
+
+        <div class="main-content-inner">
+            {% block content %}{% endblock %}
+        </div>
+    </div>
+
+    <!-- Toast container -->
+    <div class="toast-container" id="toast-container"></div>
+
+    {% if not current_user.is_authenticated %}
+    <!-- Mobile login banner -->
+    <div id="login-banner" class="login-banner">
+        <div class="login-banner-content">
+            Log in to track your votes and see personalized leaderboards!
+        </div>
+        <div class="login-banner-actions">
+            <button class="login-banner-close" onclick="dismissLoginTip()">No thanks</button>
+            <a href="{{ url_for('auth.login', next=request.path) }}" class="login-banner-btn">Login</a>
+        </div>
+    </div>
+    {% endif %}
+
+    {% block extra_scripts %}{% endblock %}
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
+    <script>
+        function toggleSidebar() {
+            const sidebar = document.querySelector('.sidebar');
+            const backdrop = document.querySelector('.backdrop');
+            sidebar.classList.toggle('active');
+            backdrop.classList.toggle('active');
+        }
+
+        function toggleUserDropdown(event) {
+            event.stopPropagation();
+            const userAuth = document.querySelector('.user-auth');
+            const userDropdown = document.querySelector('.user-dropdown');
+            userAuth.classList.toggle('active');
+            userDropdown.classList.toggle('active');
+        }
+
+        // Function to check if the login tip has been dismissed
+        function isLoginTipDismissed() {
+            try {
+                return localStorage.getItem('login_tip_dismissed') === 'true';
+            } catch (error) {
+                // Fallback if localStorage is blocked
+                console.warn('localStorage access failed:', error);
+                return false;
+            }
+        }
+
+        // Function to set localStorage when login tip is dismissed
+        function dismissLoginTip() {
+            try {
+                // Store the preference in localStorage
+                localStorage.setItem('login_tip_dismissed', 'true');
+                
+                // Hide all login notifications
+                const loginTip = document.getElementById('login-tip-overlay');
+                const loginBanner = document.getElementById('login-banner');
+                const backdrop = document.querySelector('.login-backdrop');
+                
+                if (loginTip) {
+                    loginTip.classList.remove('show');
+                }
+                
+                if (loginBanner) {
+                    loginBanner.style.display = 'none';
+                }
+                
+                if (backdrop) {
+                    backdrop.style.display = 'none';
+                }
+            } catch (error) {
+                console.warn('localStorage write failed:', error);
+                // Still hide the tips even if localStorage fails
+                const loginTip = document.getElementById('login-tip-overlay');
+                const loginBanner = document.getElementById('login-banner');
+                const backdrop = document.querySelector('.login-backdrop');
+                
+                if (loginTip) {
+                    loginTip.classList.remove('show');
+                }
+                
+                if (loginBanner) {
+                    loginBanner.style.display = 'none';
+                }
+                
+                if (backdrop) {
+                    backdrop.style.display = 'none';
+                }
+            }
+        }
+
+        // Loading overlay functionality
+        document.addEventListener('DOMContentLoaded', function () {
+            // Show login tip if user is not logged in and hasn't dismissed it
+            const loginTipOverlay = document.getElementById('login-tip-overlay');
+            const loginBanner = document.getElementById('login-banner');
+            const loginLink = document.querySelector('.login-link');
+            
+            if (loginLink && !isLoginTipDismissed()) {
+                // Check screen width to determine which login notification to show
+                if (window.innerWidth <= 768) {
+                    // Create and add a backdrop for the login banner
+                    const backdrop = document.createElement('div');
+                    backdrop.className = 'login-backdrop';
+                    backdrop.style.position = 'fixed';
+                    backdrop.style.top = '0';
+                    backdrop.style.left = '0';
+                    backdrop.style.width = '100%';
+                    backdrop.style.height = '100%';
+                    backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+                    backdrop.style.zIndex = '9997';
+                    backdrop.style.display = 'none';
+                    document.body.appendChild(backdrop);
+                    
+                    // Show mobile banner with backdrop
+                    if (loginBanner) {
+                        loginBanner.style.display = 'block';
+                        backdrop.style.display = 'block';
+                        
+                        // Add event listener to close banner when clicking backdrop
+                        backdrop.addEventListener('click', function() {
+                            dismissLoginTip();
+                        });
+                    }
+                } else {
+                    // Show desktop popover
+                    if (loginTipOverlay) {
+                        // Position the overlay with Popper.js
+                        const popperInstance = Popper.createPopper(loginLink, loginTipOverlay, {
+                            placement: 'top',
+                            modifiers: [
+                                {
+                                    name: 'offset',
+                                    options: {
+                                        offset: [0, 10],
+                                    },
+                                },
+                            ],
+                        });
+                        
+                        loginTipOverlay.classList.add('show');
+                        popperInstance.update();
+                    }
+                }
+            }
+            
+            // Handle resize events to switch between banner and popover
+            window.addEventListener('resize', function() {
+                if (isLoginTipDismissed()) return;
+                
+                const backdrop = document.querySelector('.login-backdrop');
+                
+                if (window.innerWidth <= 768) {
+                    // Switch to mobile banner
+                    if (loginTipOverlay) {
+                        loginTipOverlay.classList.remove('show');
+                    }
+                    if (loginBanner && backdrop) {
+                        loginBanner.style.display = 'block';
+                        backdrop.style.display = 'block';
+                    }
+                } else {
+                    // Switch to desktop popover
+                    if (loginBanner && backdrop) {
+                        loginBanner.style.display = 'none';
+                        backdrop.style.display = 'none';
+                    }
+                    if (loginTipOverlay && loginLink) {
+                        const popperInstance = Popper.createPopper(loginLink, loginTipOverlay, {
+                            placement: 'top',
+                            modifiers: [
+                                {
+                                    name: 'offset',
+                                    options: {
+                                        offset: [0, 10],
+                                    },
+                                },
+                            ],
+                        });
+                        
+                        loginTipOverlay.classList.add('show');
+                        popperInstance.update();
+                    }
+                }
+            });
+            
+            // Hide the loading overlay when page has loaded
+            const loadingOverlay = document.getElementById('loading-overlay');
+            loadingOverlay.classList.remove('active');
+
+            // Override fetch to handle Turnstile verification errors
+            const originalFetch = window.fetch;
+            window.fetch = async function (url, options) {
+                try {
+                    const response = await originalFetch(url, options);
+
+                    // If we get a 403 error with a specific error message, handle verification
+                    if (response.status === 403) {
+                        const data = await response.clone().json();
+                        if (data && (data.error === "Turnstile verification required" || data.error === "Turnstile verification expired")) {
+                            // Redirect to Turnstile verification page with the current URL as the redirect target
+                            window.location.href = "/turnstile?redirect_url=" + encodeURIComponent(window.location.href);
+                            return new Response(JSON.stringify({ redirecting: true }), {
+                                status: 200,
+                                headers: { 'Content-Type': 'application/json' }
+                            });
+                        }
+                    }
+
+                    return response;
+                } catch (error) {
+                    return Promise.reject(error);
+                }
+            };
+        });
+
+        // Close dropdown when clicking outside
+        document.addEventListener('click', function (event) {
+            const userDropdown = document.querySelector('.user-dropdown');
+            const userAuth = document.querySelector('.user-auth');
+            if (userDropdown && userAuth && userDropdown.classList.contains('active') && !userAuth.contains(event.target)) {
+                userAuth.classList.remove('active');
+                userDropdown.classList.remove('active');
+            }
+        });
+
+        // Toast functionality
+        function openToast(message, type = 'info', duration = 5000) {
+            const toastContainer = document.getElementById('toast-container');
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+
+            // Generate icon based on type
+            let iconSvg = '';
+            if (type === 'info') {
+                iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>';
+            } else if (type === 'success') {
+                iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>';
+            } else if (type === 'warning') {
+                iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12" y2="17"/></svg>';
+            } else if (type === 'error') {
+                iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>';
+            }
+
+            toast.innerHTML = `
+                <div class="toast-icon">${iconSvg}</div>
+                <div class="toast-content">${message}</div>
+                <div class="toast-close" onclick="closeToast(this.parentNode)">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </div>
+                <div class="toast-progress"></div>
+            `;
+
+            toastContainer.appendChild(toast);
+
+            // Animate progress bar
+            const progressBar = toast.querySelector('.toast-progress');
+            progressBar.style.animation = `shrink ${duration / 1000}s linear forwards`;
+            progressBar.style.transformOrigin = 'left';
+            progressBar.style.transform = 'scaleX(1)';
+
+            // Auto-remove toast after duration
+            const timeoutId = setTimeout(() => {
+                closeToast(toast);
+            }, duration);
+
+            // Store timeout ID on the toast element
+            toast.dataset.timeoutId = timeoutId;
+
+            return toast;
+        }
+
+        function closeToast(toast) {
+            // Clear the timeout to prevent duplicate removal attempts
+            if (toast.dataset.timeoutId) {
+                clearTimeout(parseInt(toast.dataset.timeoutId));
+            }
+
+            // Add slide-out animation
+            toast.classList.add('slide-out');
+
+            // Remove toast after animation completes
+            setTimeout(() => {
+                if (toast.parentNode) {
+                    toast.parentNode.removeChild(toast);
+                }
+            }, 300);
+        }
+    </script>
+</body>
+
+</html>

templates/email.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Email Preferences - TTS Arena</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #5046e5;
+            --secondary-color: #f0f0f0;
+            --text-color: #333;
+            --light-gray: #f5f5f5;
+            --border-color: #e0e0e0;
+            --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            --radius: 8px;
+            --success-color: #10b981;
+            --info-color: #3b82f6;
+            --warning-color: #f59e0b;
+            --error-color: #ef4444;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Inter', sans-serif;
+        }
+
+        body {
+            color: var(--text-color);
+            background-color: var(--light-gray);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 600px;
+            width: 100%;
+            background-color: white;
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            padding: 40px;
+        }
+
+        .logo {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 24px;
+            color: var(--primary-color);
+            text-align: center;
+        }
+
+        h1 {
+            font-size: 24px;
+            margin-bottom: 16px;
+            text-align: center;
+        }
+
+        p {
+            margin-bottom: 24px;
+            line-height: 1.6;
+        }
+
+        .btn-container {
+            display: flex;
+            gap: 16px;
+            margin-top: 32px;
+        }
+
+        .btn {
+            flex: 1;
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: var(--radius);
+            padding: 12px 24px;
+            cursor: pointer;
+            font-weight: 500;
+            transition: background-color 0.2s;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+        }
+
+        .btn:hover {
+            background-color: #4038c7;
+        }
+
+        .btn-secondary {
+            background-color: white;
+            color: var(--text-color);
+            border: 1px solid var(--border-color);
+        }
+
+        .btn-secondary:hover {
+            background-color: var(--light-gray);
+        }
+
+        .footer {
+            margin-top: 40px;
+            text-align: center;
+            font-size: 14px;
+            color: #666;
+        }
+
+        .footer a {
+            color: var(--primary-color);
+            text-decoration: none;
+        }
+
+        /* Responsive styles */
+        @media (max-width: 768px) {
+            .container {
+                padding: 30px 20px;
+            }
+
+            h1 {
+                font-size: 22px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .btn-container {
+                flex-direction: column;
+                gap: 12px;
+            }
+
+            .btn {
+                width: 100%;
+            }
+
+            .container {
+                padding: 25px 15px;
+            }
+
+            h1 {
+                font-size: 20px;
+            }
+
+            .logo {
+                font-size: 22px;
+                margin-bottom: 20px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="logo">TTS Arena</div>
+        <h1>Email Updates</h1>
+        <p>
+            Would you mind receiving occasional email updates about TTS Arena? We'll keep you informed about new models, 
+            improvements, and important announcements.
+        </p>
+        <p>
+            We respect your privacy and promise not to spam your inbox. You can unsubscribe at any time. If you choose not to receive updates, we won't ask you again.
+        </p>
+        <div class="btn-container">
+            <a href="{{ url_for('subscribe_email', choice='yes') }}" class="btn">Yes, I'd like updates</a>
+            <a href="{{ url_for('subscribe_email', choice='no') }}" class="btn btn-secondary">No, thanks</a>
+        </div>
+    </div>
+</body>
+
+</html>
+

templates/leaderboard.html

@@ -0,0 +1,1413 @@
+{% extends "base.html" %}
+
+{% block title %}Leaderboard - TTS Arena{% endblock %}
+
+{% block current_page %}Leaderboard{% endblock %}
+
+{% block extra_head %}
+<style>
+    .leaderboard-container {
+        background: white;
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+        overflow: hidden;
+        width: 100%;
+        overflow-x: auto; /* Allow horizontal scrolling on small screens */
+    }
+
+    .leaderboard-header {
+        display: grid;
+        grid-template-columns: 80px 1fr 120px 120px 120px;
+        padding: 16px;
+        background-color: var(--light-gray);
+        border-bottom: 1px solid var(--border-color);
+        font-weight: 600;
+        min-width: 600px; /* Ensure minimum width for the grid */
+    }
+
+    .leaderboard-row {
+        display: grid;
+        grid-template-columns: 80px 1fr 120px 120px 120px;
+        padding: 16px;
+        border-bottom: 1px solid var(--border-color);
+        align-items: center;
+        min-width: 600px; /* Ensure minimum width for the grid */
+    }
+
+    .leaderboard-row:last-child {
+        border-bottom: none;
+    }
+
+    .rank {
+        font-weight: 600;
+        color: var(--primary-color);
+    }
+
+    .model-name {
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .model-name-link {
+        text-decoration: none;
+        color: var(--text-color);
+    }
+
+    .model-name-link:hover {
+        text-decoration: underline;
+    }
+    
+    .license-icon {
+        width: 12px;
+        height: 12px;
+        cursor: help;
+        position: relative;
+        opacity: 0.7;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .license-icon img {
+        width: 12px;
+        height: 12px;
+        vertical-align: middle;
+    }
+    
+    .tooltip {
+        visibility: hidden;
+        background-color: rgba(0, 0, 0, 0.8);
+        color: white;
+        text-align: center;
+        border-radius: 4px;
+        padding: 5px 10px;
+        position: absolute;
+        z-index: 1;
+        bottom: 125%;
+        left: 50%;
+        transform: translateX(-50%);
+        opacity: 0;
+        transition: opacity 0.3s;
+        font-weight: normal;
+        font-size: 12px;
+        white-space: nowrap;
+    }
+    
+    .license-icon:hover .tooltip {
+        visibility: visible;
+        opacity: 1;
+    }
+
+    .win-rate, .total-votes, .elo-score {
+        text-align: right;
+        color: #666;
+    }
+    
+    .elo-score {
+        font-weight: 600;
+    }
+    
+    .tier-s {
+        background-color: rgba(255, 215, 0, 0.1);
+    }
+    
+    .tier-a {
+        background-color: rgba(80, 200, 120, 0.1);
+    }
+    
+    .tier-b {
+        background-color: rgba(80, 70, 229, 0.1);
+    }
+    
+    .filter-controls {
+        display: flex;
+        margin-bottom: 24px;
+        align-items: center;
+        gap: 16px;
+    }
+    
+    .tabs {
+        display: flex;
+        border-bottom: 1px solid var(--border-color);
+        margin-bottom: 24px;
+    }
+
+    .tab {
+        padding: 12px 24px;
+        cursor: pointer;
+        position: relative;
+        font-weight: 500;
+    }
+
+    .tab.active {
+        color: var(--primary-color);
+    }
+
+    .tab.active::after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: var(--primary-color);
+    }
+
+    .coming-soon {
+        text-align: center;
+        padding: 60px 0;
+        color: #666;
+        font-size: 18px;
+        font-weight: 500;
+    }
+    
+    .no-data {
+        text-align: center;
+        padding: 40px 0;
+        color: #666;
+    }
+    
+    .no-data h3 {
+        margin-bottom: 12px;
+        color: #333;
+    }
+    
+    .no-data p {
+        margin-bottom: 20px;
+        max-width: 500px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    
+    .view-toggle {
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+    }
+    
+    .segmented-control {
+        position: relative;
+        display: inline-flex;
+        background-color: var(--light-gray);
+        border-radius: 8px;
+        padding: 4px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        -webkit-user-select: none;
+        user-select: none;
+    }
+    
+    .segmented-control input[type="radio"] {
+        display: none;
+    }
+    
+    .segmented-control label {
+        position: relative;
+        z-index: 2;
+        padding: 8px 20px;
+        font-size: 14px;
+        font-weight: 500;
+        text-align: center;
+        cursor: pointer;
+        transition: color 0.2s ease;
+        color: #666;
+        border-radius: 6px;
+    }
+    
+    .segmented-control label:hover {
+        color: #333;
+    }
+    
+    .segmented-control input[type="radio"]:checked + label {
+        color: #fff;
+    }
+    
+    .slider {
+        position: absolute;
+        z-index: 1;
+        top: 4px;
+        left: 4px;
+        height: calc(100% - 8px);
+        border-radius: 6px;
+        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
+        background-color: var(--primary-color);
+    }
+    
+    .login-prompt {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0,0,0,0.7);
+        z-index: 9999;
+        justify-content: center;
+        align-items: center;
+    }
+    
+    .login-prompt-content {
+        background-color: var(--light-gray);
+        padding: 24px;
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+        text-align: center;
+        max-width: 400px;
+        position: relative;
+    }
+    
+    .login-prompt-content h3 {
+        margin-bottom: 16px;
+    }
+    
+    .login-prompt-content p {
+        margin-bottom: 24px;
+    }
+    
+    .login-prompt-close {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        font-size: 20px;
+        cursor: pointer;
+        color: #999;
+    }
+    
+    .btn {
+        display: inline-block;
+        background-color: var(--primary-color);
+        color: white;
+        padding: 8px 16px;
+        border-radius: 4px;
+        text-decoration: none;
+        font-weight: 500;
+    }
+
+    /* Timeline styles */
+    .timeline-container {
+        margin-bottom: 24px;
+        position: relative;
+    }
+    
+    .timeline-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+    }
+    
+    .timeline-title {
+        font-weight: 600;
+        color: var(--text-color);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+    
+    .timeline-title svg {
+        opacity: 0.7;
+    }
+    
+    .timeline-controls {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+    
+    .timeline-select {
+        padding: 8px 12px;
+        border-radius: 4px;
+        border: 1px solid var(--border-color);
+        background-color: white;
+        color: var(--text-color);
+        font-size: 14px;
+        appearance: none;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right 8px center;
+        background-size: 16px;
+        padding-right: 36px;
+        cursor: pointer;
+    }
+    
+    .timeline-button {
+        padding: 8px 12px;
+        border-radius: 4px;
+        border: 1px solid var(--border-color);
+        background-color: white;
+        color: var(--text-color);
+        font-size: 14px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+    
+    .timeline-button:hover {
+        background-color: var(--light-gray);
+    }
+    
+    .timeline-track {
+        height: 8px;
+        background-color: var(--light-gray);
+        border-radius: 4px;
+        position: relative;
+        margin: 20px 0;
+    }
+    
+    .timeline-progress {
+        position: absolute;
+        height: 100%;
+        background-color: var(--primary-color);
+        border-radius: 4px;
+        transition: width 0.3s ease;
+    }
+    
+    .timeline-marker {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        background-color: white;
+        border: 3px solid var(--primary-color);
+        border-radius: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        cursor: pointer;
+        z-index: 2;
+        transition: left 0.3s ease;
+    }
+    
+    .timeline-dates {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 8px;
+        color: #666;
+        font-size: 12px;
+    }
+    
+    .historical-indicator {
+        display: none;
+        background-color: var(--primary-color);
+        color: white;
+        padding: 4px 10px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 500;
+        margin-bottom: 16px;
+        align-items: center;
+        gap: 6px;
+    }
+    
+    .historical-indicator.active {
+        display: inline-flex;
+    }
+    
+    .loading-spinner {
+        display: none;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        border-top-color: white;
+        animation: spin 1s linear infinite;
+    }
+    
+    .loading.loading-spinner {
+        display: inline-block;
+    }
+    
+    @keyframes spin {
+        to { transform: rotate(360deg); }
+    }
+
+    @media (max-width: 768px) {
+        .leaderboard-header, .leaderboard-row {
+            grid-template-columns: 60px 1fr 80px 80px;
+            min-width: 400px; /* Reduced minimum width for mobile */
+        }
+
+        .total-votes {
+            display: none;
+        }
+
+        .leaderboard-header .total-votes-header {
+            display: none;
+        }
+        
+        .filter-controls {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        
+        .timeline-header {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 12px;
+        }
+        
+        .timeline-controls {
+            width: 100%;
+        }
+        
+        .timeline-select {
+            flex-grow: 1;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .leaderboard-header, .leaderboard-row {
+            grid-template-columns: 50px 1fr 70px;
+            min-width: 300px; /* Further reduced for very small screens */
+            font-size: 14px;
+            padding: 12px 8px;
+        }
+
+        .elo-score {
+            font-size: 14px;
+        }
+
+        .total-votes, .win-rate {
+            display: none;
+        }
+
+        .leaderboard-header .total-votes-header,
+        .leaderboard-header div:nth-child(3) {
+            display: none;
+        }
+
+        .tab {
+            padding: 10px 16px;
+            font-size: 14px;
+        }
+    }
+
+    /* Dark mode styles */
+    @media (prefers-color-scheme: dark) {
+        .no-data {
+            color: var(--text-color);
+        }
+
+        .no-data h3 {
+            color: var(--text-color);
+        }
+        
+        
+        .leaderboard-container {
+            background-color: var(--light-gray);
+            border-color: var(--border-color);
+        }
+        
+        .leaderboard-header {
+            background-color: rgba(80, 70, 229, 0.1);
+            border-color: var(--border-color);
+        }
+        
+        .leaderboard-row {
+            border-color: var(--border-color);
+        }
+        
+        .leaderboard-row:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+        }
+        
+        .tier-s {
+            background-color: rgba(255, 215, 0, 0.1);
+        }
+        
+        .tier-a {
+            background-color: rgba(192, 192, 192, 0.1);
+        }
+        
+        .tier-b {
+            background-color: rgba(205, 127, 50, 0.1);
+        }
+        
+        .segmented-control {
+            background-color: var(--light-gray);
+            border-color: var(--border-color);
+        }
+        
+        .segmented-control label {
+            color: var(--text-color);
+        }
+
+        .segmented-control label:hover {
+            color: var(--text-color);
+        }
+        
+        .segmented-control .slider {
+            background-color: var(--primary-color);
+        }
+        
+        .tooltip {
+            background-color: var(--light-gray);
+            color: var(--text-color);
+            border-color: var(--border-color);
+        }
+        .license-icon img {
+            filter: invert(1);
+        }
+        
+        .timeline-select, .timeline-button {
+            background-color: var(--light-gray);
+            border-color: var(--border-color);
+            color: var(--text-color);
+        }
+        
+        .timeline-button:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        .timeline-track {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        .timeline-marker {
+            background-color: var(--light-gray);
+        }
+    }
+
+    /* Top voters leaderboard styles */
+    .voters-leaderboard {
+        margin-top: 32px;
+    }
+
+    .voters-leaderboard-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+    }
+
+    .visibility-toggle {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .toggle-switch {
+        position: relative;
+        display: inline-block;
+        width: 48px;
+        height: 24px;
+    }
+
+    .toggle-switch input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .toggle-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #ccc;
+        transition: .4s;
+        border-radius: 24px;
+    }
+
+    .toggle-slider:before {
+        position: absolute;
+        content: "";
+        height: 18px;
+        width: 18px;
+        left: 3px;
+        bottom: 3px;
+        background-color: white;
+        transition: .4s;
+        border-radius: 50%;
+    }
+
+    input:checked + .toggle-slider {
+        background-color: var(--primary-color);
+    }
+
+    input:checked + .toggle-slider:before {
+        transform: translateX(24px);
+    }
+
+    .toggle-label {
+        font-size: 14px;
+        color: var(--text-color);
+    }
+
+    .voters-table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    .voters-table th, .voters-table td {
+        padding: 12px 16px;
+        text-align: left;
+        border-bottom: 1px solid var(--border-color);
+    }
+    
+    .voters-table tr:last-child td {
+        border-bottom: none;
+    }
+    
+    .voters-table tr.current-user {
+        background-color: rgba(80, 70, 229, 0.1);
+    }
+    
+    .voters-table tr.current-user td {
+        font-weight: 500;
+    }
+    
+    .thank-you-message {
+        /* text-align: center; */
+        margin-top: 24px;
+        padding: 16px;
+        background-color: rgba(80, 200, 120, 0.1);
+        border-radius: var(--radius);
+        font-size: 16px;
+    }
+    
+    @media (prefers-color-scheme: dark) {
+        .thank-you-message {
+            background-color: rgba(80, 200, 120, 0.2);
+        }
+    }
+
+    .voters-table th {
+        font-weight: 600;
+        color: var(--text-color);
+        background-color: var(--light-gray);
+    }
+
+    .voters-table tbody tr:hover {
+        background-color: var(--light-gray);
+    }
+
+    .login-prompt {
+        text-align: center;
+        padding: 24px;
+        background-color: var(--light-gray);
+        border-radius: var(--radius);
+        margin-top: 16px;
+    }
+
+    .no-voters-msg {
+        text-align: center;
+        padding: 24px;
+        color: var(--text-color);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="tabs">
+    <div class="tab active" data-tab="tts">TTS</div>
+    <div class="tab" data-tab="conversational">Conversational</div>
+    <div class="tab" data-tab="voters">Top Voters</div>
+</div>
+
+<div id="tts-tab" class="tab-content">
+    <div class="view-toggle">
+        <div class="segmented-control">
+            <input type="radio" id="tts-public" name="tts-view" checked>
+            <label for="tts-public">Public</label>
+            <input type="radio" id="tts-personal" name="tts-view">
+            <label for="tts-personal">Personal</label>
+            <div class="slider"></div>
+        </div>
+    </div>
+
+    <!-- Historical timeline for TTS models - temporarily disabled -->
+    <div id="tts-timeline-container" class="timeline-container" style="display: none;">
+        <div class="timeline-header">
+            <div class="timeline-title">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <polyline points="12 6 12 12 16 14"></polyline>
+                </svg>
+                Leaderboard History
+            </div>
+            
+            <div class="timeline-controls">
+                <select id="tts-date-select" class="timeline-select">
+                    {% if formatted_tts_dates %}
+                        {% for date in formatted_tts_dates %}
+                            <option value="{{ tts_key_dates[loop.index0].strftime('%Y-%m-%d') }}">{{ date }}</option>
+                        {% endfor %}
+                    {% else %}
+                        <option value="">No historical data</option>
+                    {% endif %}
+                </select>
+                
+                <button id="tts-load-historical" class="timeline-button">
+                    <span>Load</span>
+                    <span id="tts-loading-spinner" class="loading-spinner"></span>
+                </button>
+            </div>
+        </div>
+        
+        {% if tts_key_dates and tts_key_dates|length > 1 %}
+        <div class="timeline-track">
+            <div id="tts-timeline-progress" class="timeline-progress" style="width: 0%"></div>
+            <div id="tts-timeline-marker" class="timeline-marker" style="left: 0%"></div>
+        </div>
+        <div class="timeline-dates">
+            <div>{{ tts_key_dates[0].strftime('%b %Y') }}</div>
+            <div>{{ tts_key_dates[-1].strftime('%b %Y') }}</div>
+        </div>
+        {% else %}
+        <div class="no-data">
+            <p>Not enough historical data available to show timeline.</p>
+        </div>
+        {% endif %}
+    </div>
+    
+    <!-- Historical indicator - temporarily disabled -->
+    <div class="historical-indicator" id="tts-historical-indicator" style="display: none;">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 6 12 12 16 14"></polyline>
+        </svg>
+        <span id="tts-historical-date">Historical view</span>
+    </div>
+
+    <div id="tts-public-leaderboard" class="leaderboard-view active">
+        {% if tts_leaderboard and tts_leaderboard|length > 0 %}
+        <div class="leaderboard-container">
+            <div class="leaderboard-header">
+                <div>Rank</div>
+                <div>Model</div>
+                <div style="text-align: right">Win Rate</div>
+                <div style="text-align: right" class="total-votes-header">Total Votes</div>
+                <div style="text-align: right">ELO</div>
+            </div>
+            
+            {% for model in tts_leaderboard %}
+            <div class="leaderboard-row {{ model.tier }}">
+                <div class="rank">#{{ model.rank }}</div>
+                <div class="model-name">
+                    <a href="{{ model.model_url }}" target="_blank" class="model-name-link">{{ model.name }}</a>
+                    <div class="license-icon">
+                        {% if model.is_open %}
+                        <img src="{{ url_for('static', filename='open.svg') }}" alt="Open">
+                        <span class="tooltip">Open model</span>
+                        {% else %}
+                        <img src="{{ url_for('static', filename='closed.svg') }}" alt="Proprietary">
+                        <span class="tooltip">Proprietary model</span>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="win-rate">{{ model.win_rate }}</div>
+                <div class="total-votes">{{ model.total_votes }}</div>
+                <div class="elo-score">{{ model.elo }}</div>
+            </div>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="no-data">
+            <h3>No data available yet</h3>
+            <p>Be the first to vote and help build the leaderboard! Compare models in the arena to see how they stack up.</p>
+            <a href="{{ url_for('arena') }}" class="btn">Go to Arena</a>
+        </div>
+        {% endif %}
+    </div>
+    
+    <div id="tts-personal-leaderboard" class="leaderboard-view" style="display: none;">
+        {% if current_user.is_authenticated and tts_personal_leaderboard and tts_personal_leaderboard|length > 0 %}
+        <div class="leaderboard-container">
+            <div class="leaderboard-header">
+                <div>Rank</div>
+                <div>Model</div>
+                <div style="text-align: right">Win Rate</div>
+                <div style="text-align: right" class="total-votes-header">Total Votes</div>
+                <div style="text-align: right">Wins</div>
+            </div>
+            
+            {% for model in tts_personal_leaderboard %}
+            <div class="leaderboard-row">
+                <div class="rank">#{{ model.rank }}</div>
+                <div class="model-name">
+                    <a href="{{ model.model_url }}" target="_blank" class="model-name-link">{{ model.name }}</a>
+                    <div class="license-icon">
+                        {% if model.is_open %}
+                        <img src="{{ url_for('static', filename='open.svg') }}" alt="Open">
+                        <span class="tooltip">Open model</span>
+                        {% else %}
+                        <img src="{{ url_for('static', filename='closed.svg') }}" alt="Proprietary">
+                        <span class="tooltip">Proprietary model</span>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="win-rate">{{ model.win_rate }}</div>
+                <div class="total-votes">{{ model.total_votes }}</div>
+                <div class="elo-score">{{ model.wins }}</div>
+            </div>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="no-data">
+            <h3>No personal data yet</h3>
+            <p>You haven't voted on any TTS models yet. Visit the arena to compare models and build your personal leaderboard.</p>
+            <a href="{{ url_for('arena') }}" class="btn">Go to Arena</a>
+        </div>
+        {% endif %}
+    </div>
+    
+    <!-- Historical TTS leaderboard - temporarily disabled -->
+    <div id="tts-historical-leaderboard" class="leaderboard-view" style="display: none;">
+        <!-- This will be populated dynamically with JavaScript -->
+        <div class="leaderboard-container">
+            <div class="leaderboard-header">
+                <div>Rank</div>
+                <div>Model</div>
+                <div style="text-align: right">Win Rate</div>
+                <div style="text-align: right" class="total-votes-header">Total Votes</div>
+                <div style="text-align: right">ELO</div>
+            </div>
+            <div id="tts-historical-rows">
+                <!-- Historical rows will be inserted here -->
+                <div class="no-data">
+                    <p>Select a date and click "Load" to view historical data.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="conversational-tab" class="tab-content" style="display: none;">
+    <div class="view-toggle">
+        <div class="segmented-control">
+            <input type="radio" id="conversational-public" name="conversational-view" checked>
+            <label for="conversational-public">Public</label>
+            <input type="radio" id="conversational-personal" name="conversational-view">
+            <label for="conversational-personal">Personal</label>
+            <div class="slider"></div>
+        </div>
+    </div>
+
+    <!-- Historical timeline for Conversational models - temporarily disabled -->
+    <div id="conversational-timeline-container" class="timeline-container" style="display: none;">
+        <div class="timeline-header">
+            <div class="timeline-title">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <polyline points="12 6 12 12 16 14"></polyline>
+                </svg>
+                Leaderboard History
+            </div>
+            
+            <div class="timeline-controls">
+                <select id="conversational-date-select" class="timeline-select">
+                    {% if formatted_conversational_dates %}
+                        {% for date in formatted_conversational_dates %}
+                            <option value="{{ conversational_key_dates[loop.index0].strftime('%Y-%m-%d') }}">{{ date }}</option>
+                        {% endfor %}
+                    {% else %}
+                        <option value="">No historical data</option>
+                    {% endif %}
+                </select>
+                
+                <button id="conversational-load-historical" class="timeline-button">
+                    <span>Load</span>
+                    <span id="conversational-loading-spinner" class="loading-spinner"></span>
+                </button>
+            </div>
+        </div>
+        
+        {% if conversational_key_dates and conversational_key_dates|length > 1 %}
+        <div class="timeline-track">
+            <div id="conversational-timeline-progress" class="timeline-progress" style="width: 0%"></div>
+            <div id="conversational-timeline-marker" class="timeline-marker" style="left: 0%"></div>
+        </div>
+        <div class="timeline-dates">
+            <div>{{ conversational_key_dates[0].strftime('%b %Y') }}</div>
+            <div>{{ conversational_key_dates[-1].strftime('%b %Y') }}</div>
+        </div>
+        {% else %}
+        <div class="no-data">
+            <p>Not enough historical data available to show timeline.</p>
+        </div>
+        {% endif %}
+    </div>
+    
+    <!-- Historical indicator - temporarily disabled -->
+    <div class="historical-indicator" id="conversational-historical-indicator" style="display: none;">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 6 12 12 16 14"></polyline>
+        </svg>
+        <span id="conversational-historical-date">Historical view</span>
+    </div>
+
+    <div id="conversational-public-leaderboard" class="leaderboard-view active">
+        {% if conversational_leaderboard and conversational_leaderboard|length > 0 %}
+        <div class="leaderboard-container">
+            <div class="leaderboard-header">
+                <div>Rank</div>
+                <div>Model</div>
+                <div style="text-align: right">Win Rate</div>
+                <div style="text-align: right" class="total-votes-header">Total Votes</div>
+                <div style="text-align: right">ELO</div>
+            </div>
+            
+            {% for model in conversational_leaderboard %}
+            <div class="leaderboard-row {{ model.tier }}">
+                <div class="rank">#{{ model.rank }}</div>
+                <div class="model-name">
+                    {{ model.name }}
+                    <div class="license-icon">
+                        {% if model.is_open %}
+                        <img src="{{ url_for('static', filename='open.svg') }}" alt="Open">
+                        <span class="tooltip">Open model</span>
+                        {% else %}
+                        <img src="{{ url_for('static', filename='closed.svg') }}" alt="Proprietary">
+                        <span class="tooltip">Proprietary model</span>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="win-rate">{{ model.win_rate }}</div>
+                <div class="total-votes">{{ model.total_votes }}</div>
+                <div class="elo-score">{{ model.elo }}</div>
+            </div>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="no-data">
+            <h3>No data available yet</h3>
+            <p>Be the first to vote and help build the conversational leaderboard! Compare models in the arena to see how they stack up.</p>
+            <a href="{{ url_for('arena') }}#conversational" class="btn">Go to Arena</a>
+        </div>
+        {% endif %}
+    </div>
+    
+    <div id="conversational-personal-leaderboard" class="leaderboard-view" style="display: none;">
+        {% if current_user.is_authenticated and conversational_personal_leaderboard and conversational_personal_leaderboard|length > 0 %}
+        <div class="leaderboard-container">
+            <div class="leaderboard-header">
+                <div>Rank</div>
+                <div>Model</div>
+                <div style="text-align: right">Win Rate</div>
+                <div style="text-align: right" class="total-votes-header">Total Votes</div>
+                <div style="text-align: right">Wins</div>
+            </div>
+            
+            {% for model in conversational_personal_leaderboard %}
+            <div class="leaderboard-row">
+                <div class="rank">#{{ model.rank }}</div>
+                <div class="model-name">
+                    {{ model.name }}
+                    <div class="license-icon">
+                        {% if model.is_open %}
+                        <img src="{{ url_for('static', filename='open.svg') }}" alt="Open">
+                        <span class="tooltip">Open model</span>
+                        {% else %}
+                        <img src="{{ url_for('static', filename='closed.svg') }}" alt="Proprietary">
+                        <span class="tooltip">Proprietary model</span>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="win-rate">{{ model.win_rate }}</div>
+                <div class="total-votes">{{ model.total_votes }}</div>
+                <div class="elo-score">{{ model.wins }}</div>
+            </div>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="no-data">
+            <h3>No personal data yet</h3>
+            <p>You haven't voted on any conversational models yet. Visit the arena to compare models and build your personal leaderboard.</p>
+            <a href="{{ url_for('arena') }}#conversational" class="btn">Go to Arena</a>
+        </div>
+        {% endif %}
+    </div>
+    
+    <!-- Historical Conversational leaderboard - temporarily disabled -->
+    <div id="conversational-historical-leaderboard" class="leaderboard-view" style="display: none;">
+        <!-- This will be populated dynamically with JavaScript -->
+        <div class="leaderboard-container">
+            <div class="leaderboard-header">
+                <div>Rank</div>
+                <div>Model</div>
+                <div style="text-align: right">Win Rate</div>
+                <div style="text-align: right" class="total-votes-header">Total Votes</div>
+                <div style="text-align: right">ELO</div>
+            </div>
+            <div id="conversational-historical-rows">
+                <!-- Historical rows will be inserted here -->
+                <div class="no-data">
+                    <p>Select a date and click "Load" to view historical data.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Add Top Voters Tab -->
+<div id="voters-tab" class="tab-content" style="display: none;">
+    <div class="voters-leaderboard">
+        <div class="voters-leaderboard-header">
+            <h2>Top Voters</h2>
+            {% if current_user.is_authenticated %}
+            <div class="visibility-toggle">
+                <span class="toggle-label">Show me in leaderboard</span>
+                <label class="toggle-switch">
+                    <input type="checkbox" id="visibility-toggle" {% if user_leaderboard_visibility %}checked{% endif %}>
+                    <span class="toggle-slider"></span>
+                </label>
+            </div>
+            {% endif %}
+        </div>
+        
+        {% if top_voters %}
+        <div class="leaderboard-container">
+            <table class="voters-table">
+                <thead>
+                    <tr>
+                        <th>Rank</th>
+                        <th>Username</th>
+                        <th>Total Votes</th>
+                        <th>Joined</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for voter in top_voters %}
+                    <tr{% if current_user.is_authenticated and current_user.username == voter.username %} class="current-user"{% endif %}>
+                        <td>{{ voter.rank }}</td>
+                        <td><a href="https://huggingface.co/{{ voter.username }}" target="_blank" rel="noopener">{{ voter.username }}</a></td>
+                        <td>{{ voter.vote_count }}</td>
+                        <td>{{ voter.join_date }}</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% else %}
+        <div class="no-data">
+            <p>No voters data available yet. Start voting to appear on the leaderboard!</p>
+        </div>
+        {% endif %}
+        
+        {% if top_voters %}
+        <div class="thank-you-message">
+            <p>Thank you to all our voters for helping improve TTS Arena! Your contributions make this community better.</p>
+        </div>
+        {% endif %}
+        
+        {% if not current_user.is_authenticated %}
+        <div class="login-prompt">
+            <p>Log in to appear on the leaderboard and track your voting stats!</p>
+            <div class="button-container" style="margin-top: 16px;">
+                <a href="{{ url_for('auth.login') }}" class="btn">Log In</a>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</div>
+
+<div class="login-prompt">
+    <div class="login-prompt-content">
+        <div class="login-prompt-close">&times;</div>
+        <h3>Login Required</h3>
+        <p>You need to be logged in to view your personal leaderboard.</p>
+        <a href="{{ url_for('auth.login', next=request.path) }}" class="btn">Login with Hugging Face</a>
+    </div>
+</div>
+
+<!-- Pass auth status via data attribute -->
+<div id="auth-data" data-is-logged-in="{% if current_user.is_authenticated %}true{% else %}false{% endif %}"></div>
+
+<script>
+    // Set auth status from server-side
+    var isLoggedIn = document.getElementById('auth-data').dataset.isLoggedIn === 'true';
+</script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Initialize slider positions
+        const ttsSlider = document.querySelector('#tts-tab .slider');
+        const convSlider = document.querySelector('#conversational-tab .slider');
+        
+        // Function to position sliders based on selected radio
+        function positionSliders() {
+            // Position TTS slider
+            if (ttsSlider) {
+                const ttsSelectedRadio = document.querySelector('#tts-tab input[name="tts-view"]:checked');
+                if (ttsSelectedRadio) {
+                    const ttsSelectedLabel = document.querySelector(`label[for="${ttsSelectedRadio.id}"]`);
+                    ttsSlider.style.width = `${ttsSelectedLabel.offsetWidth}px`;
+                    ttsSlider.style.transform = `translateX(${ttsSelectedLabel.offsetLeft - 4}px)`;
+                }
+            }
+            
+            // Position Conversational slider
+            if (convSlider) {
+                const convSelectedRadio = document.querySelector('#conversational-tab input[name="conversational-view"]:checked');
+                if (convSelectedRadio) {
+                    const convSelectedLabel = document.querySelector(`label[for="${convSelectedRadio.id}"]`);
+                    convSlider.style.width = `${convSelectedLabel.offsetWidth}px`;
+                    convSlider.style.transform = `translateX(${convSelectedLabel.offsetLeft - 4}px)`;
+                }
+            }
+        }
+        
+        // Position sliders on load
+        positionSliders();
+        
+        // Tab switching
+        const tabs = document.querySelectorAll('.tab');
+        const tabContents = document.querySelectorAll('.tab-content');
+        
+        // Check URL hash for direct tab access
+        function checkHashAndSetTab() {
+            const hash = window.location.hash.toLowerCase();
+            if (hash === '#conversational') {
+                // Switch to conversational tab
+                tabs.forEach(t => t.classList.remove('active'));
+                tabContents.forEach(c => c.style.display = 'none');
+                
+                document.querySelector('.tab[data-tab="conversational"]').classList.add('active');
+                document.getElementById('conversational-tab').style.display = 'block';
+                
+                // Ensure sliders are positioned correctly
+                setTimeout(positionSliders, 50);
+            } else if (hash === '#tts' || hash === '') {
+                // Switch to TTS tab (default)
+                tabs.forEach(t => t.classList.remove('active'));
+                tabContents.forEach(c => c.style.display = 'none');
+                
+                document.querySelector('.tab[data-tab="tts"]').classList.add('active');
+                document.getElementById('tts-tab').style.display = 'block';
+                
+                // Ensure sliders are positioned correctly
+                setTimeout(positionSliders, 50);
+            }
+        }
+        
+        // Check hash on page load
+        checkHashAndSetTab();
+        
+        // Listen for hash changes
+        window.addEventListener('hashchange', checkHashAndSetTab);
+        
+        tabs.forEach(tab => {
+            tab.addEventListener('click', function() {
+                const tabId = this.dataset.tab;
+                
+                // Update URL hash without page reload
+                history.replaceState(null, null, `#${tabId}`);
+                
+                // Remove active class from all tabs and hide all contents
+                tabs.forEach(t => t.classList.remove('active'));
+                tabContents.forEach(c => c.style.display = 'none');
+                
+                // Add active class to clicked tab and show corresponding content
+                this.classList.add('active');
+                document.getElementById(tabId + '-tab').style.display = 'block';
+                
+                // Position sliders after tab switch
+                setTimeout(positionSliders, 0);
+            });
+        });
+        
+        // View toggle functionality
+        const viewToggles = document.querySelectorAll('.segmented-control input[type="radio"]');
+        const loginPrompt = document.querySelector('.login-prompt');
+        const loginPromptClose = document.querySelector('.login-prompt-close');
+        
+        viewToggles.forEach(toggle => {
+            toggle.addEventListener('change', function() {
+                const view = this.id.split('-')[1]; // 'public', 'personal', or 'historical'
+                const tabId = this.closest('.tab-content').id.split('-')[0]; // 'tts' or 'conversational'
+                
+                if (view === 'personal' && !isLoggedIn) {
+                    // Show login prompt
+                    loginPrompt.style.display = 'flex';
+                    // Reset the radio button to public
+                    document.getElementById(`${tabId}-public`).checked = true;
+                    return;
+                }
+                
+                // Position the slider using our function
+                positionSliders();
+                
+                // Show corresponding leaderboard
+                const leaderboardViews = document.querySelectorAll(`#${tabId}-tab .leaderboard-view`);
+                leaderboardViews.forEach(v => {
+                    v.style.display = 'none';
+                    v.classList.remove('active');
+                });
+                const activeView = document.getElementById(`${tabId}-${view}-leaderboard`);
+                activeView.style.display = 'block';
+                activeView.classList.add('active');
+                
+                // Toggle timeline visibility - temporarily disabled
+                /* 
+                const timelineContainer = document.getElementById(`${tabId}-timeline-container`);
+                if (timelineContainer) {
+                    timelineContainer.style.display = view === 'historical' ? 'block' : 'none';
+                }
+                */
+            });
+        });
+        
+        // Close login prompt
+        if (loginPromptClose) {
+            loginPromptClose.addEventListener('click', function() {
+                loginPrompt.style.display = 'none';
+            });
+        }
+        
+        // Historical data functionality - temporarily disabled
+        /* 
+        function setupHistoricalView(modelType) {
+            const loadButton = document.getElementById(`${modelType}-load-historical`);
+            const dateSelect = document.getElementById(`${modelType}-date-select`);
+            const historicalRows = document.getElementById(`${modelType}-historical-rows`);
+            const loadingSpinner = document.getElementById(`${modelType}-loading-spinner`);
+            const historicalIndicator = document.getElementById(`${modelType}-historical-indicator`);
+            const historicalDate = document.getElementById(`${modelType}-historical-date`);
+            const timelineMarker = document.getElementById(`${modelType}-timeline-marker`);
+            const timelineProgress = document.getElementById(`${modelType}-timeline-progress`);
+            
+            if (!loadButton || !dateSelect || !historicalRows) return;
+            
+            loadButton.addEventListener('click', function() {
+                const selectedDate = dateSelect.value;
+                if (!selectedDate) return;
+                
+                // Show loading state
+                loadingSpinner.classList.add('loading');
+                
+                // Fetch historical data
+                fetch(`/api/historical-leaderboard/${modelType}?date=${selectedDate}`)
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Network response was not ok');
+                        }
+                        return response.json();
+                    })
+                    .then(data => {
+                        // Update historical indicator
+                        historicalIndicator.classList.add('active');
+                        historicalDate.textContent = data.date;
+                        
+                        // Clear existing rows
+                        historicalRows.innerHTML = '';
+                        
+                        if (data.leaderboard && data.leaderboard.length > 0) {
+                            // Add new rows
+                            data.leaderboard.forEach(model => {
+                                const row = document.createElement('div');
+                                row.className = `leaderboard-row ${model.tier || ''}`;
+                                
+                                row.innerHTML = `
+                                    <div class="rank">#${model.rank}</div>
+                                    <div class="model-name">
+                                        ${model.model_url ? 
+                                            `<a href="${model.model_url}" target="_blank" class="model-name-link">${model.name}</a>` : 
+                                            model.name
+                                        }
+                                        <div class="license-icon">
+                                            <img src="${model.is_open ? '/static/open.svg' : '/static/closed.svg'}" alt="${model.is_open ? 'Open' : 'Proprietary'}">
+                                            <span class="tooltip">${model.is_open ? 'Open model' : 'Proprietary model'}</span>
+                                        </div>
+                                    </div>
+                                    <div class="win-rate">${model.win_rate}</div>
+                                    <div class="total-votes">${model.total_votes}</div>
+                                    <div class="elo-score">${model.elo}</div>
+                                `;
+                                
+                                historicalRows.appendChild(row);
+                            });
+                        } else {
+                            // Show no data message
+                            historicalRows.innerHTML = `
+                                <div class="no-data">
+                                    <p>No data available for this date.</p>
+                                </div>
+                            `;
+                        }
+                        
+                        // Update timeline marker position based on selected date
+                        updateTimelinePosition(modelType, selectedDate);
+                    })
+                    .catch(error => {
+                        console.error('Error fetching historical data:', error);
+                        historicalRows.innerHTML = `
+                            <div class="no-data">
+                                <p>Error loading data. Please try again.</p>
+                            </div>
+                        `;
+                    })
+                    .finally(() => {
+                        // Hide loading state
+                        loadingSpinner.classList.remove('loading');
+                    });
+            });
+            
+            // Update the timeline marker position
+            function updateTimelinePosition(modelType, selectedDate) {
+                const timeline = document.querySelector(`#${modelType}-timeline-container .timeline-track`);
+                if (!timeline || !timelineMarker || !timelineProgress) return;
+                
+                // Get all the dates
+                const options = Array.from(dateSelect.options);
+                const dateValues = options.map(option => option.value);
+                const selectedIndex = dateValues.indexOf(selectedDate);
+                
+                if (selectedIndex >= 0 && dateValues.length > 1) {
+                    // Calculate percentage position (0 to 100)
+                    const position = (selectedIndex / (dateValues.length - 1)) * 100;
+                    
+                    // Update marker and progress
+                    timelineMarker.style.left = `${position}%`;
+                    timelineProgress.style.width = `${position}%`;
+                }
+            }
+        }
+        
+        // Setup historical view for both model types
+        setupHistoricalView('tts');
+        setupHistoricalView('conversational');
+        */
+        
+        // Final positioning after all DOM operations are complete
+        setTimeout(positionSliders, 100);
+        
+        // Reposition sliders on window resize
+        window.addEventListener('resize', function() {
+            positionSliders();
+        });
+
+        // Add to the end of the script section  
+        document.getElementById('visibility-toggle')?.addEventListener('change', function() {
+            // Send request to toggle visibility
+            fetch('/api/toggle-leaderboard-visibility', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                credentials: 'same-origin'
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    // Use the toast function from base.html
+                    openToast(data.message, 'success');
+                } else {
+                    openToast(data.error || 'Failed to update visibility', 'error');
+                    // Revert the toggle state if there was an error
+                    this.checked = !this.checked;
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                openToast('Failed to update visibility', 'error');
+                // Revert the toggle state if there was an error
+                this.checked = !this.checked;
+            });
+        });
+    });
+</script>
+{% endblock %} 

templates/turnstile.html

@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Verification Required - TTS Arena</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
+    <style>
+        :root {
+            --primary-color: #5046e5;
+            --secondary-color: #f0f0f0;
+            --text-color: #333;
+            --light-gray: #f5f5f5;
+            --border-color: #e0e0e0;
+            --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            --radius: 8px;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Inter', sans-serif;
+        }
+
+        body {
+            color: var(--text-color);
+            display: flex;
+            min-height: 100vh;
+            justify-content: center;
+            align-items: center;
+            background-color: var(--light-gray);
+        }
+
+        .verification-container {
+            background-color: white;
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            padding: 32px;
+            width: 100%;
+            max-width: 450px;
+            text-align: center;
+        }
+
+        .logo {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 24px;
+            color: var(--primary-color);
+        }
+
+        h1 {
+            font-size: 20px;
+            margin-bottom: 16px;
+            color: var(--text-color);
+        }
+
+        p {
+            margin-bottom: 24px;
+            color: #666;
+            line-height: 1.5;
+        }
+
+        .turnstile-container {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 24px;
+        }
+
+        .btn {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: var(--radius);
+            padding: 12px 24px;
+            font-weight: 500;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background-color 0.2s;
+            width: 100%;
+        }
+
+        .btn:hover {
+            background-color: #4038c7;
+        }
+
+        .btn:disabled {
+            background-color: #a8a4e0;
+            cursor: not-allowed;
+        }
+
+        .loader {
+            display: none;
+            width: 24px;
+            height: 24px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease infinite;
+            margin: 0 auto;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        .btn.loading .btn-text {
+            display: none;
+            font-size: 1rem;
+        }
+
+        .btn.loading .loader {
+            display: inline-block;
+        }
+
+        .status-message {
+            margin-top: 16px;
+            font-size: 14px;
+            color: #666;
+            display: none;
+        }
+
+        /* Dark mode styles */
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --primary-color: #6c63ff;
+                --secondary-color: #2d2b38;
+                --text-color: #e0e0e0;
+                --light-gray: #1e1e24;
+                --border-color: #3a3a45;
+                --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+            }
+            
+            body {
+                background-color: #121218;
+            }
+            
+            .verification-container {
+                background-color: var(--light-gray);
+                border: 1px solid var(--border-color);
+            }
+            
+            p {
+                color: #aaa;
+            }
+
+            .status-message {
+                color: #aaa;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="verification-container">
+        <div class="logo">TTS Arena</div>
+        <h1>Verification Required</h1>
+        <p>Please complete the verification below to access TTS Arena.</p>
+        
+        <div id="turnstile-form">
+            <div class="turnstile-container">
+                <div id="cf-turnstile" class="cf-turnstile"></div>
+            </div>
+            <button type="button" class="btn" id="submit-btn" disabled onclick="submitVerification()">
+                <span class="btn-text">Continue to TTS Arena</span>
+                <span class="loader"></span>
+            </button>
+            <div id="status-message" class="status-message"></div>
+        </div>
+    </div>
+
+    <script>
+        // Store the token and redirect URL
+        let turnstileToken = '';
+        const redirectUrl = '{{ redirect_url }}';
+        // Make sure the redirect URL uses HTTPS for HuggingFace Spaces
+        const secureRedirectUrl = redirectUrl.replace(/^http:\/\//i, 'https://');
+        const verifyEndpoint = '{{ url_for("verify_turnstile") }}';
+        const statusMessage = document.getElementById('status-message');
+        const submitButton = document.getElementById('submit-btn');
+
+        // Function to enable the button when verification is successful
+        function onTurnstileSuccess(token) {
+            turnstileToken = token;
+            submitButton.disabled = false;
+            console.log("Turnstile verification successful");
+        }
+
+        // Function to handle verification errors
+        function onTurnstileError(error) {
+            console.error("Turnstile error:", error);
+            statusMessage.textContent = "Verification error. Please try again.";
+            statusMessage.style.display = "block";
+        }
+
+        // Function to submit the verification via AJAX to handle iframe issues
+        function submitVerification() {
+            if (!turnstileToken) {
+                statusMessage.textContent = "Please complete the verification first.";
+                statusMessage.style.display = "block";
+                return;
+            }
+
+            // Show loading state
+            submitButton.classList.add('loading');
+            submitButton.disabled = true;
+            
+            // Create form data
+            const formData = new FormData();
+            formData.append('cf-turnstile-response', turnstileToken);
+            formData.append('redirect_url', secureRedirectUrl);
+            
+            // Send verification request
+            fetch(verifyEndpoint, {
+                method: 'POST',
+                body: formData,
+                credentials: 'same-origin', // Important for cookies
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'Accept': 'application/json'
+                }
+            })
+            .then(response => {
+                if (response.redirected) {
+                    // Handle redirect from the response
+                    window.location.href = response.url;
+                } else {
+                    return response.json().then(data => {
+                        if (data.success) {
+                            // If we got a JSON success response, redirect
+                            window.location.href = secureRedirectUrl;
+                        } else {
+                            throw new Error("Verification failed");
+                        }
+                    });
+                }
+            })
+            .catch(error => {
+                console.error("Verification error:", error);
+                statusMessage.textContent = "Verification failed. Please try again.";
+                statusMessage.style.display = "block";
+                submitButton.classList.remove('loading');
+                submitButton.disabled = false;
+                
+                // Reset Turnstile if something goes wrong
+                if (typeof turnstile !== 'undefined') {
+                    turnstile.reset('#cf-turnstile');
+                }
+            });
+        }
+
+        // Initialize Turnstile when the page is loaded
+        document.addEventListener('DOMContentLoaded', function() {
+            // Check for Turnstile script readiness
+            function waitForTurnstile() {
+                if (typeof turnstile !== 'undefined') {
+                    // Render the Turnstile widget
+                    turnstile.render('#cf-turnstile', {
+                        sitekey: '{{ turnstile_site_key }}',
+                        callback: onTurnstileSuccess,
+                        'error-callback': onTurnstileError
+                    });
+                } else {
+                    // If not ready yet, wait and try again
+                    setTimeout(waitForTurnstile, 100);
+                }
+            }
+            
+            waitForTurnstile();
+        });
+    </script>
+</body>
+</html> 

tts.old.py

@@ -0,0 +1,117 @@
+# TODO: V2 of TTS Router
+# Currently just use current TTS router.
+from gradio_client import Client
+import os
+from dotenv import load_dotenv
+import fal_client
+import requests
+import time
+import io
+from pyht import Client as PyhtClient
+from pyht.client import TTSOptions
+
+load_dotenv()
+
+try:
+    client = Client("TTS-AGI/tts-router", hf_token=os.getenv("HF_TOKEN"))
+except Exception as e:
+    print(f"Error initializing client: {e}")
+    client = None
+
+model_mapping = {
+    "eleven-multilingual-v2": "eleven",
+    "playht-2.0": "playht",
+    "styletts2": "styletts2",
+    "kokoro-v1": "kokorov1",
+    "cosyvoice-2.0": "cosyvoice",
+    "playht-3.0-mini": "playht3",
+    "papla-p1": "papla",
+    "hume-octave": "hume",
+}
+
+
+def predict_csm(script):
+    result = fal_client.subscribe(
+        "fal-ai/csm-1b",
+        arguments={
+            # "scene": [{
+            #     "text": "Hey how are you doing.",
+            #     "speaker_id": 0
+            # }, {
+            #     "text": "Pretty good, pretty good.",
+            #     "speaker_id": 1
+            # }, {
+            #     "text": "I'm great, so happy to be speaking to you.",
+            #     "speaker_id": 0
+            # }]
+            "scene": script
+        },
+        with_logs=True,
+    )
+    return requests.get(result["audio"]["url"]).content
+
+
+def predict_playdialog(script):
+    # Initialize the PyHT client
+    pyht_client = PyhtClient(
+        user_id=os.getenv("PLAY_USERID"),
+        api_key=os.getenv("PLAY_SECRETKEY"),
+    )
+
+    # Define the voices
+    voice_1 = "s3://voice-cloning-zero-shot/baf1ef41-36b6-428c-9bdf-50ba54682bd8/original/manifest.json"
+    voice_2 = "s3://voice-cloning-zero-shot/e040bd1b-f190-4bdb-83f0-75ef85b18f84/original/manifest.json"
+
+    # Convert script format from CSM to PlayDialog format
+    if isinstance(script, list):
+        # Process script in CSM format (list of dictionaries)
+        text = ""
+        for turn in script:
+            speaker_id = turn.get("speaker_id", 0)
+            prefix = "Host 1:" if speaker_id == 0 else "Host 2:"
+            text += f"{prefix} {turn['text']}\n"
+    else:
+        # If it's already a string, use as is
+        text = script
+
+    # Set up TTSOptions
+    options = TTSOptions(
+        voice=voice_1, voice_2=voice_2, turn_prefix="Host 1:", turn_prefix_2="Host 2:"
+    )
+
+    # Generate audio using PlayDialog
+    audio_chunks = []
+    for chunk in pyht_client.tts(text, options, voice_engine="PlayDialog"):
+        audio_chunks.append(chunk)
+
+    # Combine all chunks into a single audio file
+    return b"".join(audio_chunks)
+
+
+def predict_tts(text, model):
+    global client
+    # Exceptions: special models that shouldn't be passed to the router
+    if model == "csm-1b":
+        return predict_csm(text)
+    elif model == "playdialog-1.0":
+        return predict_playdialog(text)
+
+    if not model in model_mapping:
+        raise ValueError(f"Model {model} not found")
+    result = client.predict(
+        text=text, model=model_mapping[model], api_name="/synthesize"
+    )  # returns path to audio file
+    return result
+
+
+if __name__ == "__main__":
+    print("Predicting PlayDialog")
+    print(
+        predict_playdialog(
+            [
+                {"text": "Hey how are you doing.", "speaker_id": 0},
+                {"text": "Pretty good, pretty good.", "speaker_id": 1},
+                {"text": "I'm great, so happy to be speaking to you.", "speaker_id": 0},
+            ]
+        )
+    )

tts.py

@@ -0,0 +1,245 @@
+# TODO: V2 of TTS Router
+# Currently just use current TTS router.
+import os
+import json
+from dotenv import load_dotenv
+import fal_client
+import requests
+import time
+import io
+from pyht import Client as PyhtClient
+from pyht.client import TTSOptions
+import base64
+import tempfile
+import random
+
+load_dotenv()
+
+ZEROGPU_TOKENS = os.getenv("ZEROGPU_TOKENS", "").split(",")
+
+
+def get_zerogpu_token():
+    return random.choice(ZEROGPU_TOKENS)
+
+
+model_mapping = {
+    "eleven-multilingual-v2": {
+        "provider": "elevenlabs",
+        "model": "eleven_multilingual_v2",
+    },
+    "eleven-turbo-v2.5": {
+        "provider": "elevenlabs",
+        "model": "eleven_turbo_v2_5",
+    },
+    "eleven-flash-v2.5": {
+        "provider": "elevenlabs",
+        "model": "eleven_flash_v2_5",
+    },
+    "cartesia-sonic-2": {
+        "provider": "cartesia",
+        "model": "sonic-2",
+    },
+    "spark-tts": {
+        "provider": "spark",
+        "model": "spark-tts",
+    },
+    "playht-2.0": {
+        "provider": "playht",
+        "model": "PlayHT2.0",
+    },
+    "styletts2": {
+        "provider": "styletts",
+        "model": "styletts2",
+    },
+    "kokoro-v1": {
+        "provider": "kokoro",
+        "model": "kokoro_v1",
+    },
+    "cosyvoice-2.0": {
+        "provider": "cosyvoice",
+        "model": "cosyvoice_2_0",
+    },
+    "papla-p1": {
+        "provider": "papla",
+        "model": "papla_p1",
+    },
+    "hume-octave": {
+        "provider": "hume",
+        "model": "octave",
+    },
+    "megatts3": {
+        "provider": "megatts3",
+        "model": "megatts3",
+    },
+}
+
+url = "https://tts-agi-tts-router-v2.hf.space/tts"
+headers = {
+    "accept": "application/json",
+    "Content-Type": "application/json",
+    "Authorization": f'Bearer {os.getenv("HF_TOKEN")}',
+}
+data = {"text": "string", "provider": "string", "model": "string"}
+
+
+def predict_csm(script):
+    result = fal_client.subscribe(
+        "fal-ai/csm-1b",
+        arguments={
+            # "scene": [{
+            #     "text": "Hey how are you doing.",
+            #     "speaker_id": 0
+            # }, {
+            #     "text": "Pretty good, pretty good.",
+            #     "speaker_id": 1
+            # }, {
+            #     "text": "I'm great, so happy to be speaking to you.",
+            #     "speaker_id": 0
+            # }]
+            "scene": script
+        },
+        with_logs=True,
+    )
+    return requests.get(result["audio"]["url"]).content
+
+
+def predict_playdialog(script):
+    # Initialize the PyHT client
+    pyht_client = PyhtClient(
+        user_id=os.getenv("PLAY_USERID"),
+        api_key=os.getenv("PLAY_SECRETKEY"),
+    )
+
+    # Define the voices
+    voice_1 = "s3://voice-cloning-zero-shot/baf1ef41-36b6-428c-9bdf-50ba54682bd8/original/manifest.json"
+    voice_2 = "s3://voice-cloning-zero-shot/e040bd1b-f190-4bdb-83f0-75ef85b18f84/original/manifest.json"
+
+    # Convert script format from CSM to PlayDialog format
+    if isinstance(script, list):
+        # Process script in CSM format (list of dictionaries)
+        text = ""
+        for turn in script:
+            speaker_id = turn.get("speaker_id", 0)
+            prefix = "Host 1:" if speaker_id == 0 else "Host 2:"
+            text += f"{prefix} {turn['text']}\n"
+    else:
+        # If it's already a string, use as is
+        text = script
+
+    # Set up TTSOptions
+    options = TTSOptions(
+        voice=voice_1, voice_2=voice_2, turn_prefix="Host 1:", turn_prefix_2="Host 2:"
+    )
+
+    # Generate audio using PlayDialog
+    audio_chunks = []
+    for chunk in pyht_client.tts(text, options, voice_engine="PlayDialog"):
+        audio_chunks.append(chunk)
+
+    # Combine all chunks into a single audio file
+    return b"".join(audio_chunks)
+
+
+def predict_dia(script):
+    # Convert script to the required format for Dia
+    if isinstance(script, list):
+        # Convert from list of dictionaries to formatted string
+        formatted_text = ""
+        for turn in script:
+            speaker_id = turn.get("speaker_id", 0)
+            speaker_tag = "[S1]" if speaker_id == 0 else "[S2]"
+            text = turn.get("text", "").strip().replace("[S1]", "").replace("[S2]", "")
+            formatted_text += f"{speaker_tag} {text} "
+        text = formatted_text.strip()
+    else:
+        # If it's already a string, use as is
+        text = script
+    print(text)
+    # Make a POST request to initiate the dialogue generation
+    headers = {
+        # "Content-Type": "application/json",
+        "Authorization": f"Bearer {get_zerogpu_token()}"
+    }
+
+    response = requests.post(
+        "https://mrfakename-dia-1-6b.hf.space/gradio_api/call/generate_dialogue",
+        headers=headers,
+        json={"data": [text]},
+    )
+
+    # Extract the event ID from the response
+    event_id = response.json()["event_id"]
+
+    # Make a streaming request to get the generated dialogue
+    stream_url = f"https://mrfakename-dia-1-6b.hf.space/gradio_api/call/generate_dialogue/{event_id}"
+
+    # Use a streaming request to get the audio data
+    with requests.get(stream_url, headers=headers, stream=True) as stream_response:
+        # Process the streaming response
+        for line in stream_response.iter_lines():
+            if line:
+                if line.startswith(b"data: ") and not line.startswith(b"data: null"):
+                    audio_data = line[6:]
+                    return requests.get(json.loads(audio_data)[0]["url"]).content
+
+
+def predict_tts(text, model):
+    global client
+    print(f"Predicting TTS for {model}")
+    # Exceptions: special models that shouldn't be passed to the router
+    if model == "csm-1b":
+        return predict_csm(text)
+    elif model == "playdialog-1.0":
+        return predict_playdialog(text)
+    elif model == "dia-1.6b":
+        return predict_dia(text)
+
+    if not model in model_mapping:
+        raise ValueError(f"Model {model} not found")
+
+    result = requests.post(
+        url,
+        headers=headers,
+        data=json.dumps(
+            {
+                "text": text,
+                "provider": model_mapping[model]["provider"],
+                "model": model_mapping[model]["model"],
+            }
+        ),
+    )
+
+    response_json = result.json()
+
+    audio_data = response_json["audio_data"]  # base64 encoded audio data
+    extension = response_json["extension"]
+    # Decode the base64 audio data
+    audio_bytes = base64.b64decode(audio_data)
+
+    # Create a temporary file to store the audio data
+    with tempfile.NamedTemporaryFile(delete=False, suffix=f".{extension}") as temp_file:
+        temp_file.write(audio_bytes)
+        temp_path = temp_file.name
+
+    return temp_path
+
+
+if __name__ == "__main__":
+    print(
+        predict_dia(
+            [
+                {"text": "Hello, how are you?", "speaker_id": 0},
+                {"text": "I'm great, thank you!", "speaker_id": 1},
+            ]
+        )
+    )
+    # print("Predicting PlayDialog")
+    # print(
+    #     predict_playdialog(
+    #         [
+    #             {"text": "Hey how are you doing.", "speaker_id": 0},
+    #             {"text": "Pretty good, pretty good.", "speaker_id": 1},
+    #             {"text": "I'm great, so happy to be speaking to you.", "speaker_id": 0},
+    #         ]
+    #     )
+    # )