Update how app is served to accomodate adding middleware to edit metatags in head

pyproject.toml

@@ -6,7 +6,8 @@ readme = "README.md"
 requires-python = ">=3.11"
 dependencies = [
     "anthropic>=0.45.2",
-    "asyncpg>=0.28.0", 
+    "asyncpg>=0.28.0",
+    "bs4>=0.0.2",
     "elevenlabs>=1.50.7",
     "gradio>=5.18.0",
     "greenlet>=2.0.0",
@@ -82,6 +83,7 @@ select = [
     "TID",
     "W",
 ]
+per-file-ignores = { "src/constants.py" = ["E501"] }
 
 [tool.ruff.lint.pycodestyle]
 max-line-length = 120

src/assets/styles.css

@@ -25,7 +25,7 @@ footer.svelte-1byz9vf {
 .social-links {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   margin: 0px 8px;
   overflow: visible !important;
 }
@@ -34,8 +34,8 @@ footer.svelte-1byz9vf {
 #github-link, 
 #discord-link {
   display: inline-block !important;
-  width: 32px !important;
-  height: 32px !important;
+  width: 30px !important;
+  height: 30px !important;
   background-size: cover !important;
   background-position: center !important;
   background-repeat: no-repeat !important;

src/config.py

@@ -24,7 +24,7 @@ from dotenv import load_dotenv
 if TYPE_CHECKING:
     from src.integrations import AnthropicConfig, ElevenLabsConfig, HumeConfig
 
-logger: logging.Logger = logging.getLogger("tts_arena")
+logger: logging.Logger = logging.getLogger("expressive_tts_arena")
 
 
 @dataclass(frozen=True)
@@ -40,11 +40,12 @@ class Config:
 
     @classmethod
     def get(cls) -> "Config":
-        if cls._config is None:
-            _config = Config._init()
-            cls._config = _config
-            return _config
-        return cls._config
+        if cls._config:
+            return cls._config
+
+        _config = Config._init()
+        cls._config = _config
+        return _config
 
     @staticmethod
     def _init():

src/constants.py

@@ -5,7 +5,7 @@ This module defines global constants used throughout the project.
 """
 
 # Standard Library Imports
-from typing import List
+from typing import Dict, List
 
 # Third-Party Library Imports
 from src.custom_types import ComparisonType, OptionKey, OptionLabel, TTSProviderName
@@ -75,3 +75,64 @@ SAMPLE_CHARACTER_DESCRIPTIONS: dict = {
         "sarcasm and self-effacing humor."
     ),
 }
+
+
+# HTML and social media metadata for the Gradio application
+# These tags define SEO-friendly content and provide rich previews when shared on social platforms
+META_TAGS: List[Dict[str, str]] = [
+    # HTML Meta Tags (description)
+    {
+        'name': 'description',
+        'content': 'An open-source web application for comparing and evaluating the expressiveness of different text-to-speech models, including Hume AI and ElevenLabs.'
+    },
+    # Facebook Meta Tags
+    {
+        'property': 'og:url',
+        'content': 'https://hume.ai'
+    },
+    {
+        'property': 'og:type',
+        'content': 'website'
+    },
+    {
+        'property': 'og:title',
+        'content': 'Expressive TTS Arena'
+    },
+    {
+        'property': 'og:description',
+        'content': 'An open-source web application for comparing and evaluating the expressiveness of different text-to-speech models, including Hume AI and ElevenLabs.'
+    },
+    {
+        'property': 'og:image',
+        'content': 'https://opengraph.b-cdn.net/production/images/7990b8b3-f8ef-4ece-afce-70ca30795f5c.png?token=Ge7_YHHoQRRifYmbBOjex67tCoj3ZoPe_ty5ffWm-n8&height=630&width=1200&expires=33277213515'
+    },
+    # Twitter Meta Tags
+    {
+        'name': 'twitter:card',
+        'content': 'summary_large_image'
+    },
+    {
+        'property': 'twitter:domain',
+        'content': 'hume.ai'
+    },
+    {
+        'property': 'twitter:url',
+        'content': 'https://hume.ai'
+    },
+    {
+        'name': 'twitter:creator',
+        'content': '@hume_ai'
+    },
+    {
+        'name': 'twitter:title',
+        'content': 'Expressive TTS Arena'
+    },
+    {
+        'name': 'twitter:description',
+        'content': 'An open-source web application for comparing and evaluating the expressiveness of different text-to-speech models, including Hume AI and ElevenLabs.'
+    },
+    {
+        'name': 'twitter:image',
+        'content': 'https://opengraph.b-cdn.net/production/images/7990b8b3-f8ef-4ece-afce-70ca30795f5c.png?token=Ge7_YHHoQRRifYmbBOjex67tCoj3ZoPe_ty5ffWm-n8&height=630&width=1200&expires=33277213515'
+    }
+]

src/main.py

@@ -6,28 +6,101 @@ This module is the entry point for the app. It loads configuration and starts th
 
 # Standard Library Imports
 import asyncio
+from typing import Awaitable, Callable
+
+# Third-Party Library Imports
+import gradio as gr
+from fastapi import FastAPI, Request
+from fastapi.responses import Response
+from starlette.middleware.base import BaseHTTPMiddleware
 
-# Local Application Imports
-from src.app import App
 from src.config import Config, logger
+from src.constants import META_TAGS
 from src.database import init_db
 
+# Local Application Imports
+from src.frontend import Frontend
+from src.utils import update_meta_tags
+
+
+class ResponseModifierMiddleware(BaseHTTPMiddleware):
+    """
+    FastAPI middleware that safely intercepts and modifies the HTML response from the root endpoint
+    to inject custom meta tags into the document head.
+
+    This middleware specifically targets the root path ('/') and leaves all other endpoint
+    responses unmodified. It uses BeautifulSoup to properly parse and modify the HTML,
+    ensuring that JavaScript functionality remains intact.
+    """
+    async def dispatch(
+        self,
+        request: Request,
+        call_next: Callable[[Request], Awaitable[Response]]
+    ) -> Response:
+        # Process the request and get the response
+        response = await call_next(request)
+
+        # Only intercept responses from the root endpoint and HTML content
+        if request.url.path == "/" and response.headers.get("content-type", "").startswith("text/html"):
+            # Get the response body
+            response_body = b""
+            async for chunk in response.body_iterator:
+                response_body += chunk
+
+            try:
+                # Decode, modify, and re-encode the content
+                content = response_body.decode("utf-8")
+                modified_content = update_meta_tags(content, META_TAGS).encode("utf-8")
+
+                # Update content-length header to reflect modified content size
+                headers = dict(response.headers)
+                headers["content-length"] = str(len(modified_content))
+
+                # Create a new response with the modified content
+                return Response(
+                    content=modified_content,
+                    status_code=response.status_code,
+                    headers=headers,
+                    media_type=response.media_type
+                )
+            except Exception:
+                # If there's an error, return the original response
+                return Response(
+                    content=response_body,
+                    status_code=response.status_code,
+                    headers=dict(response.headers),
+                    media_type=response.media_type
+                )
+
+        return response
+
 
 async def main():
     """
     Asynchronous main function to initialize the application.
     """
-    config = Config.get()
     logger.info("Launching TTS Arena Gradio app...")
+    config = Config.get()
     db_session_maker = init_db(config)
-    app = App(config, db_session_maker)
-    demo = app.build_gradio_interface()
-    demo.launch(
-        server_name="0.0.0.0",
-        allowed_paths=[str(config.audio_dir)],
-        ssl_verify= False,
+
+    frontend = Frontend(config, db_session_maker)
+    demo = frontend.build_gradio_interface()
+
+    app = FastAPI()
+    app.add_middleware(ResponseModifierMiddleware)
+
+    gr.mount_gradio_app(
+        app=app,
+        blocks=demo,
+        path="/",
+        allowed_paths=[str(config.audio_dir)]
     )
 
+    import uvicorn
+    config = uvicorn.Config(app, host="0.0.0.0", port=7860, log_level="info")
+    server = uvicorn.Server(config)
+    await server.serve()
+
 
 if __name__ == "__main__":
     asyncio.run(main())

src/utils.py

@@ -12,9 +12,10 @@ import os
 import random
 import time
 from pathlib import Path
-from typing import Tuple, cast
+from typing import Dict, List, Tuple, cast
 
 # Third-Party Library Imports
+from bs4 import BeautifulSoup
 from sqlalchemy.ext.asyncio import AsyncSession
 
 # Local Application Imports
@@ -256,9 +257,7 @@ def create_shuffled_tts_options(option_a: Option, option_b: Option) -> OptionMap
     }
 
 
-def determine_selected_option(
-    selected_option_button: str,
-) -> Tuple[OptionKey, OptionKey]:
+def determine_selected_option(selected_option_button: str) -> Tuple[OptionKey, OptionKey]:
     """
     Determines the selected option and the alternative option based on the user's selection.
 
@@ -315,11 +314,7 @@ def _log_voting_results(voting_results: VotingResults) -> None:
     logger.info("Voting results:\n%s", json.dumps(voting_results, indent=4))
 
 
-async def _persist_vote(
-    db_session_maker: AsyncDBSessionMaker,
-    voting_results: VotingResults,
-    config: Config
-) -> None:
+async def _persist_vote(db_session_maker: AsyncDBSessionMaker, voting_results: VotingResults, config: Config) -> None:
     """
     Asynchronously persist a vote record in the database and handle potential failures.
     Designed to work safely in a background task context.
@@ -349,8 +344,7 @@ async def _persist_vote(
             _log_voting_results(voting_results)
     except Exception as e:
         # Log the error with traceback in production, without traceback in dev
-        logger.error(f"Failed to create vote record: {e}",
-                     exc_info=(config.app_env == "prod"))
+        logger.error(f"Failed to create vote record: {e}", exc_info=(config.app_env == "prod"))
         _log_voting_results(voting_results)
     finally:
         # Always ensure the session is closed
@@ -403,9 +397,8 @@ async def submit_voting_results(
 
         await _persist_vote(db_session_maker, voting_results, config)
 
+    # Catch exceptions at the top level of the background task to prevent unhandled exceptions in background tasks
     except Exception as e:
-        # Catch all exceptions at the top level of the background task
-        # to prevent unhandled exceptions in background tasks
         logger.error(f"Background task error in submit_voting_results: {e}", exc_info=True)
 
 
@@ -421,19 +414,45 @@ def validate_env_var(var_name: str) -> str:
 
     Raises:
         ValueError: If the environment variable is not set.
-
-    Examples:
-        >>> import os
-        >>> os.environ["EXAMPLE_VAR"] = "example_value"
-        >>> validate_env_var("EXAMPLE_VAR")
-        'example_value'
-
-        >>> validate_env_var("MISSING_VAR")
-        Traceback (most recent call last):
-          ...
-        ValueError: MISSING_VAR is not set. Please ensure it is defined in your environment variables.
     """
     value = os.environ.get(var_name, "")
     if not value:
         raise ValueError(f"{var_name} is not set. Please ensure it is defined in your environment variables.")
     return value
+
+
+def update_meta_tags(html_content: str, meta_tags: List[Dict[str, str]]) -> str:
+    """
+    Safely updates the HTML content by adding or replacing meta tags in the head section
+    without affecting other elements, especially scripts and event handlers.
+
+    Args:
+        html_content: The original HTML content as a string
+        meta_tags: A list of dictionaries with meta tag attributes to add
+
+    Returns:
+        The modified HTML content with updated meta tags
+    """
+    # Parse the HTML
+    soup = BeautifulSoup(html_content, 'html.parser')
+    head = soup.head
+
+    # Remove existing meta tags that would conflict with our new ones
+    for meta_tag in meta_tags:
+        # Determine if we're looking for 'name' or 'property' attribute
+        attr_type = 'name' if 'name' in meta_tag else 'property'
+        attr_value = meta_tag.get(attr_type)
+
+        # Find and remove existing meta tags with the same name/property
+        existing_tags = head.find_all('meta', attrs={attr_type: attr_value})
+        for tag in existing_tags:
+            tag.decompose()
+
+    # Add the new meta tags to the head section
+    for meta_info in meta_tags:
+        new_meta = soup.new_tag('meta')
+        for attr, value in meta_info.items():
+            new_meta[attr] = value
+        head.append(new_meta)
+
+    return str(soup)

uv.lock

@@ -131,6 +131,31 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/5d/35/be73b6015511aa0173ec595fc579133b797ad532996f2998fd6b8d1bbe6b/audioop_lts-0.2.1-cp313-cp313t-win_arm64.whl", hash = "sha256:78bfb3703388c780edf900be66e07de5a3d4105ca8e8720c5c4d67927e0b15d0", size = 23918 },
 ]
 
+[[package]]
+name = "beautifulsoup4"
+version = "4.13.3"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "soupsieve" },
+    { name = "typing-extensions" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/f0/3c/adaf39ce1fb4afdd21b611e3d530b183bb7759c9b673d60db0e347fd4439/beautifulsoup4-4.13.3.tar.gz", hash = "sha256:1bd32405dacc920b42b83ba01644747ed77456a65760e285fbc47633ceddaf8b", size = 619516 }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/f9/49/6abb616eb3cbab6a7cca303dc02fdf3836de2e0b834bf966a7f5271a34d8/beautifulsoup4-4.13.3-py3-none-any.whl", hash = "sha256:99045d7d3f08f91f0d656bc9b7efbae189426cd913d830294a15eefa0ea4df16", size = 186015 },
+]
+
+[[package]]
+name = "bs4"
+version = "0.0.2"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "beautifulsoup4" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/c9/aa/4acaf814ff901145da37332e05bb510452ebed97bc9602695059dd46ef39/bs4-0.0.2.tar.gz", hash = "sha256:a48685c58f50fe127722417bae83fe6badf500d54b55f7e39ffe43b798653925", size = 698 }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/51/bb/bf7aab772a159614954d84aa832c129624ba6c32faa559dfb200a534e50b/bs4-0.0.2-py2.py3-none-any.whl", hash = "sha256:abf8742c0805ef7f662dce4b51cca104cffe52b835238afc169142ab9b3fbccc", size = 1189 },
+]
+
 [[package]]
 name = "certifi"
 version = "2025.1.31"
@@ -269,6 +294,7 @@ source = { virtual = "." }
 dependencies = [
     { name = "anthropic" },
     { name = "asyncpg" },
+    { name = "bs4" },
     { name = "elevenlabs" },
     { name = "gradio" },
     { name = "greenlet" },
@@ -293,6 +319,7 @@ dev = [
 requires-dist = [
     { name = "anthropic", specifier = ">=0.45.2" },
     { name = "asyncpg", specifier = ">=0.28.0" },
+    { name = "bs4", specifier = ">=0.0.2" },
     { name = "elevenlabs", specifier = ">=1.50.7" },
     { name = "gradio", specifier = ">=5.18.0" },
     { name = "greenlet", specifier = ">=2.0.0" },
@@ -1224,6 +1251,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/e9/44/75a9c9421471a6c4805dbf2356f7c181a29c1879239abab1ea2cc8f38b40/sniffio-1.3.1-py3-none-any.whl", hash = "sha256:2f6da418d1f1e0fddd844478f41680e794e6051915791a034ff65e5f100525a2", size = 10235 },
 ]
 
+[[package]]
+name = "soupsieve"
+version = "2.6"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/d7/ce/fbaeed4f9fb8b2daa961f90591662df6a86c1abf25c548329a86920aedfb/soupsieve-2.6.tar.gz", hash = "sha256:e2e68417777af359ec65daac1057404a3c8a5455bb8abc36f1a9866ab1a51abb", size = 101569 }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/d1/c2/fe97d779f3ef3b15f05c94a2f1e3d21732574ed441687474db9d342a7315/soupsieve-2.6-py3-none-any.whl", hash = "sha256:e72c4ff06e4fb6e4b5a9f0f55fe6e81514581fca1515028625d0f299c602ccc9", size = 36186 },
+]
+
 [[package]]
 name = "sqlalchemy"
 version = "2.0.38"