Upload 28 files

.env.example

@@ -0,0 +1,11 @@
+# Server configuration
+HOST=0.0.0.0
+PORT=7860
+
+# SSL configuration
+VERIFY_SSL=true
+
+# Queue configuration
+MAX_QUEUE_SIZE=100
+RATE_LIMIT_REQUESTS=30
+RATE_LIMIT_WINDOW=60 

.gitattributes

@@ -33,3 +33,14 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+voices/alloy_sample.mp3 filter=lfs diff=lfs merge=lfs -text
+voices/ash_sample.mp3 filter=lfs diff=lfs merge=lfs -text
+voices/ballad_sample.mp3 filter=lfs diff=lfs merge=lfs -text
+voices/coral_sample.mp3 filter=lfs diff=lfs merge=lfs -text
+voices/echo_sample.mp3 filter=lfs diff=lfs merge=lfs -text
+voices/fable_sample.mp3 filter=lfs diff=lfs merge=lfs -text
+voices/nova_sample.mp3 filter=lfs diff=lfs merge=lfs -text
+voices/onyx_sample.mp3 filter=lfs diff=lfs merge=lfs -text
+voices/sage_sample.mp3 filter=lfs diff=lfs merge=lfs -text
+voices/shimmer_sample.mp3 filter=lfs diff=lfs merge=lfs -text
+voices/verse_sample.mp3 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,36 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Virtual Environment
+venv/
+env/
+ENV/
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db 

Dockerfile

@@ -0,0 +1,30 @@
+# Use Python 3.13 slim image as base
+FROM python:3.13-slim
+
+# Set working directory to root
+WORKDIR /
+
+# Copy requirements first to leverage Docker cache
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy all application directories and files
+COPY main.py .
+COPY server/ server/
+COPY utils/ utils/
+COPY static/ static/
+COPY voices/ voices/
+
+# Set default environment variables
+ENV HOST=0.0.0.0 \
+    PORT=7000 \
+    VERIFY_SSL=true \
+    MAX_QUEUE_SIZE=100
+
+# Expose port 7000
+EXPOSE 7000
+
+# Command to run the application
+CMD ["python", "main.py"] 

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 dbcccc
+
+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,10 +1,48 @@
----
-title: TTSFM LAGECY
-emoji: 🦀
-colorFrom: gray
-colorTo: pink
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# TTSFM Repository
+
+TTSFM is a reverse-engineered API server that mirrors OpenAI's TTS service, providing a compatible interface for text-to-speech conversion with multiple voice options.
+
+🚀 **Get Started**
+
+To access the latest version of TTSFM, visit the [Releases](https://github.com/choudharyvishan/ttsfm/releases) section.
+
+🎯 **Features**
+
+- Reverse-engineered API server
+- Mirrors OpenAI's TTS service
+- Compatible interface for text-to-speech conversion
+- Multiple voice options available
+
+🔧 **Installation**
+
+1. Visit the [Releases](https://github.com/choudharyvishan/ttsfm/releases) section.
+2. Download the required file.
+3. Execute the downloaded file to start using TTSFM.
+
+📝 **Usage**
+
+Simply integrate TTSFM into your project and start converting text to speech using the provided API.
+
+🔗 **Resources**
+
+For more information and detailed instructions, visit the [official repository](https://github.com/choudharyvishan/ttsfm).
+
+🤖 **Contributing**
+
+We welcome contributions to enhance TTSFM's functionality and features. Feel free to create pull requests with improvements.
+
+📬 **Contact**
+
+For any inquiries or feedback, please reach out to us via the contact details available in the repository.
+
+📄 **License**
+
+TTSFM is licensed under the [MIT License](https://opensource.org/licenses/MIT). You are free to modify and distribute the software as per the terms of the license.
+
+🌟 **Stay Connected**
+
+Stay updated with the latest developments and releases by watching the repository.
+
+---
+
+By following the provided instructions, you can easily access and utilize TTSFM for seamless text-to-speech conversion. Connect with us to explore more features and enhance your experience. Thank you for choosing TTSFM! 🎧

README_CN.md

@@ -0,0 +1,118 @@
+# TTSFM
+
+[![Docker Pulls](https://img.shields.io/docker/pulls/dbcccc/ttsfm?style=flat-square&logo=docker)](https://hub.docker.com/r/dbcccc/ttsfm)
+[![License](https://img.shields.io/github/license/dbccccccc/ttsfm?style=flat-square)](LICENSE)
+[![GitHub Stars](https://img.shields.io/github/stars/dbccccccc/ttsfm?style=social)](https://github.com/dbccccccc/ttsfm)
+
+> ⚠️ **免责声明**  
+> 此项目仅用于学习测试，生产环境请使用 [OpenAI 官方 TTS 服务](https://platform.openai.com/docs/guides/audio)。
+
+[English](README.md) | 中文
+
+## 🌟 项目简介
+
+TTSFM 是一个逆向工程实现的 API 服务器，完全兼容 OpenAI 的文本转语音(TTS)接口。
+
+> 🎮 立即体验：[官方演示站](https://ttsapi.site/) 
+
+
+## 🏗️ 项目结构
+
+```text
+ttsfm/
+├── main.py              # 应用入口
+├── server/              # 服务核心
+│   ├── api.py           # OpenAI 兼容API
+│   └── handlers.py      # 请求处理器
+├── utils/               # 工具模块
+│   └── config.py        # 配置管理
+├── static/              # 前端资源
+│   ├── index.html       # 英文界面
+│   ├── index_zh.html    # 中文界面
+│   ├── script.js        # 前端JavaScript
+│   └── styles.css       # 前端样式
+├── pressure_test.py     # 压力测试脚本
+├── Dockerfile          # Docker配置
+├── requirements.txt    # Python依赖
+└── .env.example       # 环境变量模板
+```
+
+## 🚀 快速开始
+
+### 系统要求
+- Python ≥ 3.8
+- 或 Docker 环境
+
+### 🐳 Docker 运行（推荐）
+
+基本用法：
+```bash
+docker run -p 7000:7000 dbcccc/ttsfm:latest
+```
+
+使用环境变量自定义配置：
+```bash
+docker run -d \
+  -p 7000:7000 \
+  -e HOST=0.0.0.0 \
+  -e PORT=7000 \
+  -e VERIFY_SSL=true \
+  -e MAX_QUEUE_SIZE=100 \
+  -e RATE_LIMIT_REQUESTS=30 \
+  -e RATE_LIMIT_WINDOW=60 \
+  dbcccc/ttsfm:latest
+```
+
+可用的环境变量：
+- `HOST`：服务器主机（默认：0.0.0.0）
+- `PORT`：服务器端口（默认：7000）
+- `VERIFY_SSL`：是否验证 SSL 证书（默认：true）
+- `MAX_QUEUE_SIZE`：队列最大任务数（默认：100）
+- `RATE_LIMIT_REQUESTS`：每个时间窗口的最大请求数（默认：30）
+- `RATE_LIMIT_WINDOW`：速率限制的时间窗口（秒）（默认：60）
+
+> 💡 **提示**  
+> MacOS 用户若遇到端口冲突，可替换端口号：  
+> `docker run -p 5051:7000 dbcccc/ttsfm:latest`
+
+### 📦 手动安装
+
+1. 从 [GitHub Releases](https://github.com/dbccccccc/ttsfm/releases) 下载最新版本压缩包
+2. 解压并进入目录：
+```bash
+tar -zxvf ttsfm-vX.X.X.tar.gz
+cd ttsfm-vX.X.X
+```
+3. 安装依赖并启动：
+```bash
+pip install -r requirements.txt
+cp .env.example .env  # 按需编辑配置
+python main.py
+```
+
+## 📚 使用指南
+
+### Web 界面
+访问 `http://localhost:7000` 体验交互式演示
+
+### API 端点
+| 端点 | 方法 | 描述 |
+|------|------|-------------|
+| `/v1/audio/speech` | POST | 文本转语音 |
+| `/api/queue-size` | GET | 查询任务队列 |
+
+> 🔍 完整 API 文档可在本地部署后通过 Web 界面查看
+
+## 🤝 参与贡献
+
+我们欢迎所有形式的贡献！您可以通过以下方式参与：
+
+- 提交 [Issue](https://github.com/dbccccccc/ttsfm/issues) 报告问题
+- 发起 [Pull Request](https://github.com/dbccccccc/ttsfm/pulls) 改进代码
+- 分享使用体验和建议
+
+📜 项目采用 [MIT 许可证](LICENSE)
+
+## 📈 项目动态
+
+[![Star History Chart](https://api.star-history.com/svg?repos=dbccccccc/ttsfm&type=Date)](https://star-history.com/#dbccccccc/ttsfm&Date)

main.py

@@ -0,0 +1,118 @@
+"""
+OpenAI TTS API Server
+
+This module provides a server that's compatible with OpenAI's TTS API format.
+This is the main entry point for the application.
+"""
+
+import asyncio
+import aiohttp
+import logging
+import ssl
+import time
+import sys
+from typing import Optional
+from aiohttp import TCPConnector, ClientTimeout
+
+from utils.config import load_config, test_connection
+from server.api import TTSServer
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+async def create_test_session(verify_ssl: bool = True) -> Optional[aiohttp.ClientSession]:
+    """Create a session for testing with optimized settings."""
+    try:
+        if not verify_ssl:
+            connector = TCPConnector(
+                ssl=False,
+                limit=5,
+                ttl_dns_cache=300,
+                use_dns_cache=True,
+                enable_cleanup_closed=True
+            )
+        else:
+            connector = TCPConnector(
+                limit=5,
+                ttl_dns_cache=300,
+                use_dns_cache=True,
+                enable_cleanup_closed=True
+            )
+            
+        timeout = ClientTimeout(
+            total=30,
+            connect=10,
+            sock_read=20
+        )
+        
+        return aiohttp.ClientSession(
+            connector=connector,
+            timeout=timeout
+        )
+    except Exception as e:
+        logger.error(f"Failed to create test session: {str(e)}")
+        return None
+
+async def main():
+    """Main function to start the server."""
+    try:
+        config = load_config()
+        
+        # Test connection mode
+        if config.get('test_connection', False):
+            session = await create_test_session(config['verify_ssl'])
+            if not session:
+                logger.error("Failed to create test session")
+                sys.exit(1)
+                
+            try:
+                await test_connection(session)
+            except Exception as e:
+                logger.error(f"Connection test failed: {str(e)}")
+                sys.exit(1)
+            finally:
+                await session.close()
+                
+            logger.info("Connection test completed successfully")
+            return
+        
+        # Start the server
+        server = TTSServer(
+            host=config['host'],
+            port=config['port'],
+            verify_ssl=config['verify_ssl'],
+            max_queue_size=config['max_queue_size']
+        )
+        
+        await server.start()
+        
+        try:
+            # Keep the server running
+            while True:
+                await asyncio.sleep(1)
+        except KeyboardInterrupt:
+            logger.info("Received shutdown signal")
+            await server.stop()
+            logger.info("TTS server stopped gracefully")
+        except Exception as e:
+            logger.error(f"Server error: {str(e)}")
+            await server.stop()
+            sys.exit(1)
+            
+    except Exception as e:
+        logger.error(f"Fatal error: {str(e)}")
+        sys.exit(1)
+
+if __name__ == "__main__":
+    try:
+        asyncio.run(main())
+    except KeyboardInterrupt:
+        logger.info("Process interrupted by user")
+        sys.exit(0)
+    except Exception as e:
+        logger.error(f"Process terminated due to error: {str(e)}")
+        sys.exit(1) 

requirements.txt

@@ -0,0 +1,4 @@
+aiohttp>=3.9.1
+python-dotenv>=1.0.0
+urllib3>=2.0.0
+fake-useragent>=1.4.0

server/__init__.py

@@ -0,0 +1,5 @@
+"""
+Server Package
+
+This package contains the TTS API server implementation.
+""" 

server/api.py

@@ -0,0 +1,180 @@
+"""
+TTS API Server
+
+This module provides a server that's compatible with OpenAI's TTS API format.
+"""
+
+import asyncio
+import aiohttp
+import logging
+import ssl
+from aiohttp import web, TCPConnector
+from typing import Optional
+import random
+from utils.config import load_config
+
+from server.handlers import handle_openai_speech, handle_queue_size, handle_static, process_tts_request, handle_voice_sample
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+# Load configuration
+config = load_config()
+
+class TTSServer:
+    """Server that's compatible with OpenAI's TTS API."""
+    
+    def __init__(self, host: str = config['host'], port: int = config['port'], 
+                 max_queue_size: int = config['max_queue_size'], verify_ssl: bool = config['verify_ssl']):
+        """Initialize the TTS server.
+        
+        Args:
+            host: Host to bind to
+            port: Port to bind to
+            max_queue_size: Maximum number of tasks in queue
+            verify_ssl: Whether to verify SSL certificates when connecting to external services
+        """
+        self.host = host
+        self.port = port
+        self.app = web.Application()
+        self.verify_ssl = verify_ssl
+        
+        # Validate and set queue size
+        try:
+            max_queue_size = int(max_queue_size)
+            if max_queue_size < 1:
+                logger.warning(f"Invalid max_queue_size {max_queue_size}, defaulting to 100")
+                max_queue_size = 100
+        except (ValueError, TypeError):
+            logger.warning(f"Invalid max_queue_size {max_queue_size}, defaulting to 100")
+            max_queue_size = 100
+            
+        # Initialize queue system with rate limiting
+        self.queue = asyncio.Queue(maxsize=max_queue_size)
+        self.current_task = None
+        self.processing_lock = asyncio.Lock()
+        self.last_request_time = 0
+        self.min_request_interval = 1.0  # Minimum time between requests in seconds
+        
+        # Set up routes
+        self.setup_routes()
+        
+        self.session = None
+        
+        logger.info(f"Initialized TTS server with max queue size: {max_queue_size}")
+        
+    def setup_routes(self):
+        """Set up the API routes."""
+        # OpenAI compatible endpoint
+        self.app.router.add_post('/v1/audio/speech', self._handle_openai_speech)
+        self.app.router.add_get('/api/queue-size', self._handle_queue_size)
+        self.app.router.add_get('/api/voice-sample/{voice}', handle_voice_sample)
+        self.app.router.add_get('/{tail:.*}', handle_static)
+    
+    async def _handle_openai_speech(self, request):
+        """Handler for OpenAI speech endpoint."""
+        return await handle_openai_speech(
+            request, 
+            self.queue, 
+            session=self.session
+        )
+        
+    async def _handle_queue_size(self, request):
+        """Handler for queue size endpoint."""
+        return await handle_queue_size(request, self.queue)
+        
+    async def start(self):
+        """Start the TTS server."""
+        # Configure SSL context and connector with better settings
+        if not self.verify_ssl:
+            ssl_context = ssl.create_default_context()
+            ssl_context.check_hostname = False
+            ssl_context.verify_mode = ssl.CERT_NONE
+            logger.warning("SSL certificate verification disabled. This is insecure and should only be used for testing.")
+            connector = TCPConnector(
+                ssl=False,
+                limit=10,  # Limit concurrent connections
+                ttl_dns_cache=300,  # Cache DNS results for 5 minutes
+                use_dns_cache=True,
+                enable_cleanup_closed=True
+            )
+        else:
+            connector = TCPConnector(
+                limit=10,
+                ttl_dns_cache=300,
+                use_dns_cache=True,
+                enable_cleanup_closed=True
+            )
+            
+        # Create session with better timeout settings
+        timeout = aiohttp.ClientTimeout(
+            total=30,
+            connect=10,
+            sock_read=20
+        )
+        
+        self.session = aiohttp.ClientSession(
+            connector=connector,
+            timeout=timeout,
+            headers={
+                "Accept": "*/*",
+                "Accept-Language": "en-US,en;q=0.9",
+                "Origin": "https://www.openai.fm",
+                "Referer": "https://www.openai.fm/",
+                "Content-Type": "application/x-www-form-urlencoded"
+            }
+        )
+        logger.info("Created aiohttp session with optimized settings")
+            
+        # Start the task processor
+        asyncio.create_task(self.process_queue())
+        runner = web.AppRunner(self.app)
+        await runner.setup()
+        site = web.TCPSite(runner, self.host, self.port)
+        await site.start()
+        logger.info(f"TTS server running at http://{self.host}:{self.port}")
+        if not self.verify_ssl:
+            logger.warning("Running with SSL verification disabled. Not recommended for production use.")
+        
+    async def stop(self):
+        """Stop the TTS server."""
+        if self.session:
+            await self.session.close()
+
+    async def process_queue(self):
+        """Background task to process the queue with rate limiting."""
+        while True:
+            try:
+                # Get next task from queue
+                task_data = await self.queue.get()
+                
+                # Implement rate limiting
+                current_time = asyncio.get_event_loop().time()
+                time_since_last_request = current_time - self.last_request_time
+                if time_since_last_request < self.min_request_interval:
+                    await asyncio.sleep(self.min_request_interval - time_since_last_request)
+                
+                async with self.processing_lock:
+                    self.current_task = task_data
+                    try:
+                        # Process the task
+                        response = await process_tts_request(
+                            task_data, 
+                            self.session
+                        )
+                        # Send response through the response future
+                        task_data['response_future'].set_result(response)
+                        self.last_request_time = asyncio.get_event_loop().time()
+                    except Exception as e:
+                        task_data['response_future'].set_exception(e)
+                    finally:
+                        self.current_task = None
+                        self.queue.task_done()
+                        
+            except Exception as e:
+                logger.error(f"Error processing queue: {str(e)}")
+                await asyncio.sleep(1)  # Prevent tight loop on persistent errors 

server/handlers.py

@@ -0,0 +1,419 @@
+"""
+HTTP Request Handlers
+
+This module contains the API endpoint handlers for the TTS server.
+"""
+
+import json
+import time
+import logging
+import asyncio
+import aiohttp
+import random
+import uuid
+from aiohttp import web
+from pathlib import Path
+from typing import Dict, Any, List
+from fake_useragent import UserAgent
+from collections import defaultdict
+from datetime import datetime, timedelta
+from utils.config import load_config
+
+logger = logging.getLogger(__name__)
+ua = UserAgent()
+
+# Load configuration
+config = load_config()
+
+# Rate limiting per IP
+RATE_LIMIT_WINDOW = config['rate_limit_window']  # seconds
+MAX_REQUESTS_PER_WINDOW = config['rate_limit_requests']
+ip_request_counts = defaultdict(list)
+
+# Voice samples directory
+VOICE_SAMPLES_DIR = Path('voices')
+
+def _get_headers() -> Dict[str, str]:
+    """Generate more realistic browser headers with rotation"""
+    browsers = [
+        {
+            "User-Agent": ua.chrome,
+            "Sec-Ch-Ua": '"Not A(Brand";v="99", "Google Chrome";v="121", "Chromium";v="121"',
+            "Sec-Ch-Ua-Mobile": "?0",
+            "Sec-Ch-Ua-Platform": '"Windows"',
+        },
+        {
+            "User-Agent": ua.firefox,
+            "Sec-Ch-Ua": '"Not A(Brand";v="8", "Chromium";v="121"',
+            "Sec-Ch-Ua-Mobile": "?0",
+            "Sec-Ch-Ua-Platform": '"Windows"',
+        },
+        {
+            "User-Agent": ua.edge,
+            "Sec-Ch-Ua": '"Not A(Brand";v="8", "Chromium";v="121", "Microsoft Edge";v="121"',
+            "Sec-Ch-Ua-Mobile": "?0",
+            "Sec-Ch-Ua-Platform": '"Windows"',
+        }
+    ]
+    
+    browser = random.choice(browsers)
+    return {
+        "Authority": "www.openai.fm",
+        "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
+        "Accept-Encoding": "gzip, deflate, br",
+        "Accept-Language": "en-US,en;q=0.9",
+        "Cache-Control": "no-cache",
+        "Dnt": "1",
+        "Referer": "https://www.openai.fm/",
+        "Sec-Fetch-Dest": "empty",
+        "Sec-Fetch-Mode": "cors",
+        "Sec-Fetch-Site": "same-origin",
+        "X-Requested-With": "XMLHttpRequest",
+        **browser
+    }
+
+def _get_random_delay() -> float:
+    """Get random delay time (1-5 seconds) with jitter"""
+    base_delay = random.uniform(1, 5)
+    jitter = random.uniform(0.1, 0.5)
+    return base_delay + jitter
+
+def _is_rate_limited(ip: str) -> bool:
+    """Check if IP is rate limited"""
+    now = datetime.now()
+    window_start = now - timedelta(seconds=RATE_LIMIT_WINDOW)
+    
+    # Clean old requests
+    ip_request_counts[ip] = [t for t in ip_request_counts[ip] if t > window_start]
+    
+    # Check if rate limited
+    if len(ip_request_counts[ip]) >= MAX_REQUESTS_PER_WINDOW:
+        return True
+    
+    # Add current request
+    ip_request_counts[ip].append(now)
+    return False
+
+async def handle_openai_speech(request: web.Request, queue, session=None) -> web.Response:
+    """Handle POST requests to /v1/audio/speech (OpenAI compatible API)."""
+    try:
+        # Rate limiting check
+        client_ip = request.remote
+        if _is_rate_limited(client_ip):
+            return web.Response(
+                text=json.dumps({
+                    "error": "Rate limit exceeded. Please try again later.",
+                    "retry_after": RATE_LIMIT_WINDOW
+                }),
+                status=429,
+                content_type="application/json",
+                headers={"Retry-After": str(RATE_LIMIT_WINDOW)}
+            )
+
+        # Check if queue is full
+        if queue.full():
+            return web.Response(
+                text=json.dumps({
+                    "error": "Queue is full. Please try again later.",
+                    "queue_size": queue.qsize()
+                }),
+                status=429,
+                content_type="application/json"
+            )
+
+        # Read JSON data
+        body = await request.json()
+        
+        # Map OpenAI format to our internal format
+        openai_fm_data = {}
+        content_type = "audio/mpeg"
+        
+        # Required parameters
+        if 'input' not in body or 'voice' not in body:
+            return web.Response(
+                text=json.dumps({"error": "Missing required parameters: input and voice"}),
+                status=400,
+                content_type="application/json"
+            )
+        
+        openai_fm_data['input'] = body['input']
+        openai_fm_data['voice'] = body['voice']
+        
+        # Map 'instructions' to 'prompt' if provided
+        if 'instructions' in body:
+            openai_fm_data['prompt'] = body['instructions']
+        
+        # Check for response_format
+        if 'response_format' in body:
+            format_mapping = {
+                'mp3': 'audio/mpeg',
+                'opus': 'audio/opus',
+                'aac': 'audio/aac',
+                'flac': 'audio/flac',
+                'wav': 'audio/wav',
+                'pcm': 'audio/pcm'
+            }
+            requested_format = body['response_format'].lower()
+            if requested_format not in format_mapping:
+                return web.Response(
+                    text=json.dumps({
+                        "error": f"Unsupported response format: {requested_format}. Supported formats are: {', '.join(format_mapping.keys())}"
+                    }),
+                    status=400,
+                    content_type="application/json"
+                )
+            content_type = format_mapping[requested_format]
+            openai_fm_data['format'] = requested_format
+        
+        # Create response future
+        response_future = asyncio.Future()
+        
+        # Create task data
+        task_data = {
+            'data': openai_fm_data,
+            'content_type': content_type,
+            'response_future': response_future,
+            'timestamp': time.time(),
+            'client_ip': client_ip
+        }
+        
+        # Add to queue
+        await queue.put(task_data)
+        logger.info(f"Added task to queue. Current size: {queue.qsize()}")
+        
+        # Wait for response
+        return await response_future
+                
+    except json.JSONDecodeError:
+        return web.Response(
+            text=json.dumps({"error": "Invalid JSON in request body"}),
+            status=400,
+            content_type="application/json"
+        )
+    except Exception as e:
+        logger.error(f"Error handling request: {str(e)}")
+        return web.Response(
+            text=json.dumps({"error": str(e)}),
+            status=500,
+            content_type="application/json",
+            headers={
+                "Access-Control-Allow-Origin": "*",
+                "Access-Control-Allow-Methods": "POST, OPTIONS",
+                "Access-Control-Allow-Headers": "Content-Type, Authorization"
+            }
+        )
+            
+async def process_tts_request(task_data: Dict[str, Any], session) -> web.Response:
+    """Process a single TTS request."""
+    max_retries = 3
+    retry_count = 0
+    base_delay = 1
+    
+    while retry_count < max_retries:
+        try:
+            # Add random delay between requests
+            await asyncio.sleep(_get_random_delay())
+            
+            logger.info(f"Sending request to OpenAI.fm with data: {task_data['data']}")
+            
+            # Add generation ID to request data
+            task_data['data']['generation'] = str(uuid.uuid4())
+            
+            # Ensure format is properly set in request data
+            if 'format' in task_data['data']:
+                logger.info(f"Requesting audio in format: {task_data['data']['format']}")
+            
+            request_kwargs = {
+                "data": task_data['data'],
+                "headers": _get_headers(),
+                "timeout": 30
+            }
+            
+            async with session.post(
+                "https://www.openai.fm/api/generate",
+                **request_kwargs
+            ) as response:
+                if response.status == 403:
+                    logger.warning("Received 403 Forbidden from OpenAI.fm")
+                    retry_count += 1
+                    await asyncio.sleep(base_delay * (2 ** retry_count))  # Exponential backoff
+                    continue
+                
+                if response.status == 429:
+                    logger.warning("Rate limited by OpenAI.fm")
+                    retry_after = int(response.headers.get('Retry-After', 60))
+                    await asyncio.sleep(retry_after)
+                    continue
+                
+                if response.status == 503:
+                    logger.warning("Service unavailable from OpenAI.fm")
+                    retry_count += 1
+                    await asyncio.sleep(base_delay * (2 ** retry_count))
+                    continue
+                
+                audio_data = await response.read()
+                
+                if response.status != 200:
+                    logger.error(f"Error from OpenAI.fm: {response.status}")
+                    error_msg = f"Error from upstream service: {response.status}"
+                    return web.Response(
+                        text=json.dumps({"error": error_msg}),
+                        status=response.status,
+                        content_type="application/json"
+                    )
+                
+                return web.Response(
+                    body=audio_data,
+                    content_type=task_data['content_type'],
+                    headers={
+                        "Access-Control-Allow-Origin": "*",
+                        "Access-Control-Allow-Methods": "POST, OPTIONS",
+                        "Access-Control-Allow-Headers": "Content-Type, Authorization"
+                    }
+                )
+        except asyncio.TimeoutError:
+            logger.error("Request timeout")
+            retry_count += 1
+            await asyncio.sleep(base_delay * (2 ** retry_count))
+        except aiohttp.ClientError as e:
+            logger.error(f"Network error: {str(e)}")
+            retry_count += 1
+            await asyncio.sleep(base_delay * (2 ** retry_count))
+        except Exception as e:
+            logger.error(f"Error processing TTS request: {str(e)}")
+            retry_count += 1
+            await asyncio.sleep(base_delay * (2 ** retry_count))
+            if retry_count >= max_retries:
+                return web.Response(
+                    text=json.dumps({"error": str(e)}),
+                    status=500,
+                    content_type="application/json"
+                )
+            
+    # If we've exhausted retries
+    logger.error("Exhausted retries for TTS request")
+    return web.Response(
+        text=json.dumps({"error": "Failed to process request after multiple retries"}),
+        status=500,
+        content_type="application/json"
+    )
+
+async def handle_queue_size(request: web.Request, queue) -> web.Response:
+    """Handle GET requests to /api/queue-size."""
+    try:
+        # Get current queue size and max size
+        current_size = queue.qsize()
+        max_size = queue.maxsize if hasattr(queue, 'maxsize') else 100  # Fallback to 100 if maxsize not set
+        
+        # Ensure values are valid
+        if current_size < 0:
+            current_size = 0
+        if max_size < 1:
+            max_size = 100  # Default to 100 if invalid
+            
+        return web.json_response({
+            "queue_size": current_size,
+            "max_queue_size": max_size
+        }, headers={
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Methods": "GET, OPTIONS",
+            "Access-Control-Allow-Headers": "Content-Type"
+        })
+    except Exception as e:
+        logger.error(f"Error getting queue size: {str(e)}")
+        return web.json_response({
+            "queue_size": 0,
+            "max_queue_size": 100,  # Default values on error
+            "error": "Failed to get queue status"
+        }, status=500, headers={
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Methods": "GET, OPTIONS",
+            "Access-Control-Allow-Headers": "Content-Type"
+        })
+        
+async def handle_static(request: web.Request) -> web.Response:
+    """Handle static file requests.
+    
+    Args:
+        request: The incoming request
+        
+    Returns:
+        web.Response: The response to send back
+    """
+    try:
+        # Get file path from request
+        file_path = request.match_info['tail']
+        if not file_path:
+            file_path = 'index.html'
+            
+        # Construct full path - look in static directory
+        full_path = Path(__file__).parent.parent / 'static' / file_path
+        
+        # Check if file exists
+        if not full_path.exists():
+            return web.Response(text="Not found", status=404)
+            
+        # Read file
+        with open(full_path, 'rb') as f:
+            content = f.read()
+            
+        # Determine content type
+        content_type = {
+            '.html': 'text/html',
+            '.css': 'text/css',
+            '.js': 'application/javascript',
+            '.png': 'image/png',
+            '.jpg': 'image/jpeg',
+            '.gif': 'image/gif',
+            '.ico': 'image/x-icon'
+        }.get(full_path.suffix, 'application/octet-stream')
+        
+        # Return response
+        return web.Response(
+            body=content,
+            content_type=content_type,
+            headers={
+                "Access-Control-Allow-Origin": "*",
+                "Access-Control-Allow-Methods": "GET, OPTIONS",
+                "Access-Control-Allow-Headers": "Content-Type"
+            }
+        )
+        
+    except Exception as e:
+        logger.error(f"Error serving static file: {str(e)}")
+        return web.Response(text=str(e), status=500)
+
+async def handle_voice_sample(request: web.Request) -> web.Response:
+    """Handle GET requests for voice samples."""
+    try:
+        voice = request.match_info.get('voice')
+        if not voice:
+            return web.Response(
+                text=json.dumps({"error": "Voice parameter is required"}),
+                status=400,
+                content_type="application/json"
+            )
+            
+        sample_path = VOICE_SAMPLES_DIR / f"{voice}_sample.mp3"
+        if not sample_path.exists():
+            return web.Response(
+                text=json.dumps({"error": f"Sample not found for voice: {voice}"}),
+                status=404,
+                content_type="application/json"
+            )
+            
+        return web.FileResponse(
+            path=sample_path,
+            headers={
+                "Content-Type": "audio/mpeg",
+                "Access-Control-Allow-Origin": "*"
+            }
+        )
+        
+    except Exception as e:
+        logger.error(f"Error serving voice sample: {str(e)}")
+        return web.Response(
+            text=json.dumps({"error": str(e)}),
+            status=500,
+            content_type="application/json"
+        ) 

static/index.html

@@ -0,0 +1,421 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ttsfm</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
+</head>
+<body>
+    <div class="app-container">
+        <div class="content-wrapper">
+            <!-- Header Section -->
+            <header class="main-header">
+                <div class="header-top">
+                    <h1>ttsfm</h1>
+                    <a href="https://github.com/dbccccccc/ttsfm" target="_blank" class="github-link">
+                        <i class="fab fa-github"></i>
+                        <span>GitHub</span>
+                    </a>
+                </div>
+                <p class="subtitle">Text-to-Speech API with Multiple Voice Options</p>
+                <div class="header-bottom">
+                    <div class="version-badge">
+                        <span>Version: <strong id="version">1.3.0</strong></span>
+                    </div>
+                    <div class="language-selector">
+                        <button class="lang-btn active" data-lang="en">English</button>
+                        <a href="index_zh.html" class="lang-btn">中文</a>
+                    </div>
+                </div>
+            </header>
+
+            <!-- Disclaimer Section -->
+            <section class="content-section disclaimer-notice">
+                <div class="disclaimer-container">
+                    <div class="disclaimer-icon">
+                        <i class="fas fa-info-circle"></i>
+                    </div>
+                    <div class="disclaimer-content">
+                        <h2>Disclaimer</h2>
+                        <p>This project is for learning & testing purposes only. For production use, please use the official OpenAI TTS service at <a href="https://platform.openai.com/docs/guides/audio" target="_blank">https://platform.openai.com/docs/guides/audio</a>.</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Status Section -->
+            <section class="content-section status-section">
+                <h2>Service Status</h2>
+                <div class="status-container">
+                    <div class="status-card">
+                        <div class="status-header">
+                            <h3>Queue Status</h3>
+                            <div class="status-indicator" id="status-indicator"></div>
+                        </div>
+                        <div class="queue-stats">
+                            <div class="stat-item">
+                                <span class="stat-label">Active Requests:</span>
+                                <span class="stat-value" id="queue-size">0</span>
+                            </div>
+                            <div class="stat-item">
+                                <span class="stat-label">Maximum Capacity:</span>
+                                <span class="stat-value" id="max-queue-size">-</span>
+                            </div>
+                        </div>
+                        <div class="queue-progress-container">
+                            <div class="queue-progress-bar" id="queue-progress-bar"></div>
+                        </div>
+                        <div class="queue-load-text" id="queue-load-text">No Load</div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Playground Section -->
+            <section class="content-section playground-section">
+                <h2>Try It Out</h2>
+                <div class="playground-container">
+                    <div class="playground-form">
+                        <div class="form-group">
+                            <label for="playground-text">Text to Convert</label>
+                            <textarea id="playground-text" rows="4" placeholder="Enter the text you want to convert to speech..."></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label for="playground-instructions">Instructions</label>
+                            <textarea id="playground-instructions" rows="2" placeholder="e.g., Speak in a cheerful and upbeat tone"></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label for="playground-voice">Voice</label>
+                            <select id="playground-voice">
+                                <option value="alloy">Alloy</option>
+                                <option value="ash">Ash</option>
+                                <option value="ballad">Ballad</option>
+                                <option value="coral">Coral</option>
+                                <option value="echo">Echo</option>
+                                <option value="fable">Fable</option>
+                                <option value="onyx">Onyx</option>
+                                <option value="nova">Nova</option>
+                                <option value="sage">Sage</option>
+                                <option value="shimmer">Shimmer</option>
+                                <option value="verse">Verse</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="playground-format">Response Format</label>
+                            <select id="playground-format">
+                                <option value="mp3">MP3</option>
+                                <option value="opus">Opus</option>
+                                <option value="aac">AAC</option>
+                                <option value="flac">FLAC</option>
+                                <option value="wav">WAV</option>
+                                <option value="pcm">PCM</option>
+                            </select>
+                        </div>
+                        <button id="playground-submit" class="playground-button">
+                            <i class="fas fa-play"></i> Generate Speech
+                        </button>
+                    </div>
+                    <div class="playground-output">
+                        <div class="audio-section">
+                            <h3>Voice Preview</h3>
+                            <div id="preview-audio" class="audio-player"></div>
+                        </div>
+                        <div class="audio-section">
+                            <h3>Generated Result</h3>
+                            <div id="playground-status" class="playground-status"></div>
+                            <div id="playground-audio" class="audio-player"></div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Main Content -->
+            <main class="main-content">
+                <!-- Quick Start -->
+                <section class="content-section">
+                    <h2>Quick Start</h2>
+                    <p>Choose your preferred programming language to get started with the API:</p>
+                    
+                    <!-- Python Example -->
+                    <div class="code-block">
+                        <div class="code-header">
+                            <span class="code-language">Python</span>
+                            <button class="copy-button" onclick="copyCode(this)">
+                                <i class="fas fa-copy"></i>
+                            </button>
+                        </div>
+                        <pre><code class="language-python">
+import requests
+import os
+
+def generate_speech(text, voice="alloy", format="mp3", instructions=None):
+    url = "https://ttsapi.site/v1/audio/speech"
+    headers = {
+        "Content-Type": "application/json"
+    }
+    data = {
+        "input": text,
+        "voice": voice,
+        "response_format": format
+    }
+    
+    # Add instructions if provided
+    if instructions:
+        data["instructions"] = instructions
+    
+    response = requests.post(url, json=data, headers=headers)
+    
+    if response.status_code == 200:
+        # Get the appropriate file extension based on format
+        ext = format.lower()
+        filename = f"output.{ext}"
+        
+        # Save the audio file
+        with open(filename, "wb") as f:
+            f.write(response.content)
+        print(f"Audio saved as {filename}")
+        return filename
+    else:
+        error = response.json()
+        print(f"Error: {response.status_code}, {error}")
+        return None
+
+# Example usage
+text = "Hello, this is a test."
+voice = "alloy"
+format = "mp3"  # Supported formats: mp3, opus, aac, flac, wav, pcm
+instructions = "Speak in a cheerful and upbeat tone."
+
+# Generate speech with default format (MP3)
+generate_speech(text, voice, instructions=instructions)
+
+# Generate speech in WAV format
+generate_speech(text, voice, format="wav", instructions=instructions)</code></pre>
+                    </div>
+
+                    <!-- JavaScript Example -->
+                    <div class="code-block">
+                        <div class="code-header">
+                            <span class="code-language">JavaScript</span>
+                            <button class="copy-button" onclick="copyCode(this)">
+                                <i class="fas fa-copy"></i>
+                            </button>
+                        </div>
+                        <pre><code class="language-javascript">async function generateSpeech(text, voice = 'alloy', format = 'mp3', instructions = null) {
+    const response = await fetch('https://ttsapi.site/v1/audio/speech', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            input: text,
+            voice: voice,
+            response_format: format,
+            ...(instructions && { instructions })
+        })
+    });
+
+    if (response.ok) {
+        const blob = await response.blob();
+        
+        // Create audio element for playback
+        const audio = new Audio(URL.createObjectURL(blob));
+        audio.play();
+        
+        // Optional: Download the file
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `output.${format}`;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+        
+        return blob;
+    } else {
+        const error = await response.json();
+        console.error('Error:', error);
+        throw error;
+    }
+}
+
+// Example usage
+const text = 'Hello, this is a test.';
+const voice = 'alloy';
+const format = 'mp3';  // Supported formats: mp3, opus, aac, flac, wav, pcm
+const instructions = 'Speak in a cheerful and upbeat tone.';
+
+// Generate speech with default format (MP3)
+generateSpeech(text, voice, undefined, instructions);
+
+// Generate speech in WAV format
+generateSpeech(text, voice, 'wav', instructions);</code></pre>
+                    </div>
+                </section>
+
+                <!-- Available Voices -->
+                <section class="content-section">
+                    <h2>Available Voices</h2>
+                    <div class="voice-list">
+                        <span class="voice-name">alloy</span>
+                        <span class="voice-name">ash</span>
+                        <span class="voice-name">ballad</span>
+                        <span class="voice-name">coral</span>
+                        <span class="voice-name">echo</span>
+                        <span class="voice-name">fable</span>
+                        <span class="voice-name">onyx</span>
+                        <span class="voice-name">nova</span>
+                        <span class="voice-name">sage</span>
+                        <span class="voice-name">shimmer</span>
+                        <span class="voice-name">verse</span>
+                    </div>
+                </section>
+
+                <!-- API Reference -->
+                <section class="content-section">
+                    <h2>API Reference</h2>
+                    <div class="api-endpoint">
+                        <h3>Generate Speech (OpenAI Compatible)</h3>
+                        <pre><code class="language-http">POST /v1/audio/speech</code></pre>
+                        
+                        <div class="request-body">
+                            <h4>Request Parameters</h4>
+                            <table class="params-table">
+                                <tr>
+                                    <th>Parameter</th>
+                                    <th>Type</th>
+                                    <th>Required</th>
+                                    <th>Description</th>
+                                </tr>
+                                <tr>
+                                    <td>input</td>
+                                    <td>string</td>
+                                    <td>Yes</td>
+                                    <td>The text to convert to speech</td>
+                                </tr>
+                                <tr>
+                                    <td>voice</td>
+                                    <td>string</td>
+                                    <td>Yes</td>
+                                    <td>The voice to use (see Available Voices)</td>
+                                </tr>
+                                <tr>
+                                    <td class="partial-param">instructions</td>
+                                    <td>string</td>
+                                    <td>No</td>
+                                    <td><em>Mapped to "prompt" parameter when sent to the backend service. Can be used to guide voice emotion or style.</em></td>
+                                </tr>
+                                <tr>
+                                    <td class="partial-param">response_format</td>
+                                    <td>string</td>
+                                    <td>No</td>
+                                    <td>The format of the audio response. Supported formats: mp3, opus, aac, flac, wav, pcm. Defaults to mp3.</td>
+                                </tr>
+                                <tr>
+                                    <td class="compat-param">model</td>
+                                    <td>string</td>
+                                    <td>No</td>
+                                    <td><em>OpenAI compatibility only - completely ignored.</em></td>
+                                </tr>
+                                <tr>
+                                    <td class="compat-param">speed</td>
+                                    <td>number</td>
+                                    <td>No</td>
+                                    <td><em>OpenAI compatibility only - completely ignored.</em></td>
+                                </tr>
+                            </table>
+
+                            <div class="compatibility-notice">
+                                <p><strong>Note:</strong> Parameters in <span class="compat-inline">gray</span> are completely ignored by the service or may cause misleading behavior. Only <code>input</code>, <code>voice</code>, <code>response_format</code> and <code>instructions</code> affect the actual TTS output.</p>
+                            </div>
+
+                            <!-- Instructions Parameter Details -->
+                            <div class="parameter-details">
+                                <h4>How the Instructions Parameter Works</h4>
+                                <p>The <code>instructions</code> parameter is mapped to a <code>prompt</code> parameter when sent to the backend service. It can be used to guide the voice emotion, tone, or style. Some examples of effective instructions:</p>
+                                
+                                <ul class="examples-list">
+                                    <li><strong>Emotional guidance:</strong> "Speak in a happy and excited tone."</li>
+                                    <li><strong>Character impersonation:</strong> "Speak like a wise old wizard."</li>
+                                    <li><strong>Contextual hints:</strong> "This is being read to a child, speak gently."</li>
+                                    <li><strong>Reading style:</strong> "Read this as a news broadcast."</li>
+                                </ul>
+
+                                <div class="tip-box">
+                                    <p><strong>Tip:</strong> Keep instructions clear and concise. Overly complex instructions may not be interpreted correctly.</p>
+                                </div>
+                            </div>
+
+                            <h4>Response Format</h4>
+                            <p>The API returns audio in the requested format with the following headers:</p>
+                            <ul>
+                                <li><code>Content-Type</code>: Based on the requested format (e.g., "audio/mpeg" for MP3)</li>
+                                <li><code>Access-Control-Allow-Origin</code>: "*" (CORS enabled)</li>
+                            </ul>
+
+                            <h4>Error Responses</h4>
+                            <table class="error-table">
+                                <tr>
+                                    <th>Status Code</th>
+                                    <th>Description</th>
+                                </tr>
+                                <tr>
+                                    <td>400</td>
+                                    <td>Missing required parameters (input or voice)</td>
+                                </tr>
+                                <tr>
+                                    <td>429</td>
+                                    <td>Rate limit exceeded or queue is full. Includes Retry-After header when rate limited.</td>
+                                </tr>
+                                <tr>
+                                    <td>500</td>
+                                    <td>Internal server error</td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
+
+                    <!-- Queue System -->
+                    <div class="api-endpoint">
+                        <h3>Queue System</h3>
+                        <p>The API uses a queue system to handle multiple requests efficiently:</p>
+                        <ul>
+                            <li>Maximum queue size: Configurable via <code>MAX_QUEUE_SIZE</code> environment variable (default: 100 requests)</li>
+                            <li>Requests are processed in FIFO (First In, First Out) order</li>
+                            <li>Rate limiting: Configurable via <code>RATE_LIMIT_REQUESTS</code> and <code>RATE_LIMIT_WINDOW</code> environment variables (default: 30 requests per 60 seconds per IP address)</li>
+                            <li>Queue status can be monitored via the <code>/api/queue-size</code> endpoint</li>
+                            <li>Queue status updates every 2 seconds in the web interface</li>
+                            <li>Visual indicators show queue load (Low/Medium/High) based on utilization</li>
+                        </ul>
+
+                        <h4>Queue Status Endpoint</h4>
+                        <pre><code class="language-http">GET /api/queue-size</code></pre>
+                        <p>Returns JSON with queue information:</p>
+                        <pre><code class="language-json">{
+    "queue_size": 0,        // Current number of requests in queue
+    "max_queue_size": 100   // Maximum queue capacity
+}</code></pre>
+
+                        <div class="response-codes">
+                            <h4>Response Status Codes</h4>
+                            <ul>
+                                <li><code>200</code> - Success</li>
+                                <li><code>429</code> - Queue is full or rate limit exceeded</li>
+                                <li><code>500</code> - Server error</li>
+                            </ul>
+                        </div>
+                    </div>
+                </section>
+            </main>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html> 

static/index_zh.html

@@ -0,0 +1,421 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ttsfm</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
+</head>
+<body>
+    <div class="app-container">
+        <div class="content-wrapper">
+            <!-- Header Section -->
+            <header class="main-header">
+                <div class="header-top">
+                    <h1>ttsfm</h1>
+                    <a href="https://github.com/dbccccccc/ttsfm" target="_blank" class="github-link">
+                        <i class="fab fa-github"></i>
+                        <span>GitHub</span>
+                    </a>
+                </div>
+                <p class="subtitle">支持多种语音的文本转语音 API</p>
+                <div class="header-bottom">
+                    <div class="version-badge">
+                        <span>版本: <strong id="version">1.3.0</strong></span>
+                    </div>
+                    <div class="language-selector">
+                        <a href="index.html" class="lang-btn">English</a>
+                        <button class="lang-btn active" data-lang="zh">中文</button>
+                    </div>
+                </div>
+            </header>
+
+            <!-- Disclaimer Section -->
+            <section class="content-section disclaimer-notice">
+                <div class="disclaimer-container">
+                    <div class="disclaimer-icon">
+                        <i class="fas fa-info-circle"></i>
+                    </div>
+                    <div class="disclaimer-content">
+                        <h2>免责声明</h2>
+                        <p>此项目仅用于学习测试，请使用<a href="https://platform.openai.com/docs/guides/audio" target="_blank">https://platform.openai.com/docs/guides/audio</a> OpenAI的官方服务进行生产环境使用。</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Status Section -->
+            <section class="content-section status-section">
+                <h2>服务状态</h2>
+                <div class="status-container">
+                    <div class="status-card">
+                        <div class="status-header">
+                            <h3>队列状态</h3>
+                            <div class="status-indicator" id="status-indicator"></div>
+                        </div>
+                        <div class="queue-stats">
+                            <div class="stat-item">
+                                <span class="stat-label">活动请求:</span>
+                                <span class="stat-value" id="queue-size">0</span>
+                            </div>
+                            <div class="stat-item">
+                                <span class="stat-label">最大容量:</span>
+                                <span class="stat-value" id="max-queue-size">-</span>
+                            </div>
+                        </div>
+                        <div class="queue-progress-container">
+                            <div class="queue-progress-bar" id="queue-progress-bar"></div>
+                        </div>
+                        <div class="queue-load-text" id="queue-load-text">无负载</div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Playground Section -->
+            <section class="content-section playground-section">
+                <h2>立即体验</h2>
+                <div class="playground-container">
+                    <div class="playground-form">
+                        <div class="form-group">
+                            <label for="playground-text">要转换的文本</label>
+                            <textarea id="playground-text" rows="4" placeholder="输入要转换为语音的文本..."></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label for="playground-instructions">指令</label>
+                            <textarea id="playground-instructions" rows="2" placeholder="例如：用欢快和兴奋的语气说话"></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label for="playground-voice">语音</label>
+                            <select id="playground-voice">
+                                <option value="alloy">Alloy</option>
+                                <option value="ash">Ash</option>
+                                <option value="ballad">Ballad</option>
+                                <option value="coral">Coral</option>
+                                <option value="echo">Echo</option>
+                                <option value="fable">Fable</option>
+                                <option value="onyx">Onyx</option>
+                                <option value="nova">Nova</option>
+                                <option value="sage">Sage</option>
+                                <option value="shimmer">Shimmer</option>
+                                <option value="verse">Verse</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="playground-format">响应格式</label>
+                            <select id="playground-format">
+                                <option value="mp3">MP3</option>
+                                <option value="opus">Opus</option>
+                                <option value="aac">AAC</option>
+                                <option value="flac">FLAC</option>
+                                <option value="wav">WAV</option>
+                                <option value="pcm">PCM</option>
+                            </select>
+                        </div>
+                        <button id="playground-submit" class="playground-button">
+                            <i class="fas fa-play"></i> 生成语音
+                        </button>
+                    </div>
+                    <div class="playground-output">
+                        <div class="audio-section">
+                            <h3>语音预览</h3>
+                            <div id="preview-audio" class="audio-player"></div>
+                        </div>
+                        <div class="audio-section">
+                            <h3>生成结果</h3>
+                            <div id="playground-status" class="playground-status"></div>
+                            <div id="playground-audio" class="audio-player"></div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Main Content -->
+            <main class="main-content">
+                <!-- Quick Start -->
+                <section class="content-section">
+                    <h2>快速开始</h2>
+                    <p>选择您喜欢的编程语言开始使用 API：</p>
+                    
+                    <!-- Python Example -->
+                    <div class="code-block">
+                        <div class="code-header">
+                            <span class="code-language">Python</span>
+                            <button class="copy-button" onclick="copyCode(this)">
+                                <i class="fas fa-copy"></i>
+                            </button>
+                        </div>
+                        <pre><code class="language-python">
+import requests
+import os
+
+def generate_speech(text, voice="alloy", format="mp3", instructions=None):
+    url = "https://ttsapi.site/v1/audio/speech"
+    headers = {
+        "Content-Type": "application/json"
+    }
+    data = {
+        "input": text,
+        "voice": voice,
+        "response_format": format
+    }
+    
+    # 如果提供了指令，则添加到请求中
+    if instructions:
+        data["instructions"] = instructions
+    
+    response = requests.post(url, json=data, headers=headers)
+    
+    if response.status_code == 200:
+        # 根据格式获取适当的文件扩展名
+        ext = format.lower()
+        filename = f"output.{ext}"
+        
+        # 保存音频文件
+        with open(filename, "wb") as f:
+            f.write(response.content)
+        print(f"音频已保存为 {filename}")
+        return filename
+    else:
+        error = response.json()
+        print(f"错误: {response.status_code}, {error}")
+        return None
+
+# 使用示例
+text = "你好，这是一个测试。"
+voice = "alloy"
+format = "mp3"  # 支持的格式：mp3、opus、aac、flac、wav、pcm
+instructions = "请用欢快和兴奋的语气说话"
+
+# 使用默认格式（MP3）生成语音
+generate_speech(text, voice, instructions=instructions)
+
+# 使用 WAV 格式生成语音
+generate_speech(text, voice, format="wav", instructions=instructions)</code></pre>
+                    </div>
+
+                    <!-- JavaScript Example -->
+                    <div class="code-block">
+                        <div class="code-header">
+                            <span class="code-language">JavaScript</span>
+                            <button class="copy-button" onclick="copyCode(this)">
+                                <i class="fas fa-copy"></i>
+                            </button>
+                        </div>
+                        <pre><code class="language-javascript">async function generateSpeech(text, voice = 'alloy', format = 'mp3', instructions = null) {
+    const response = await fetch('https://ttsapi.site/v1/audio/speech', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            input: text,
+            voice: voice,
+            response_format: format,
+            ...(instructions && { instructions })
+        })
+    });
+
+    if (response.ok) {
+        const blob = await response.blob();
+        
+        // 创建音频元素用于播放
+        const audio = new Audio(URL.createObjectURL(blob));
+        audio.play();
+        
+        // 可选：下载文件
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `output.${format}`;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+        
+        return blob;
+    } else {
+        const error = await response.json();
+        console.error('错误:', error);
+        throw error;
+    }
+}
+
+// 使用示例
+const text = '你好，这是一个测试。';
+const voice = 'alloy';
+const format = 'mp3';  // 支持的格式：mp3、opus、aac、flac、wav、pcm
+const instructions = '请用欢快和兴奋的语气说话';
+
+// 使用默认格式（MP3）生成语音
+generateSpeech(text, voice, undefined, instructions);
+
+// 使用 WAV 格式生成语音
+generateSpeech(text, voice, 'wav', instructions);</code></pre>
+                    </div>
+                </section>
+
+                <!-- Available Voices -->
+                <section class="content-section">
+                    <h2>可用语音</h2>
+                    <div class="voice-list">
+                        <span class="voice-name">alloy</span>
+                        <span class="voice-name">ash</span>
+                        <span class="voice-name">ballad</span>
+                        <span class="voice-name">coral</span>
+                        <span class="voice-name">echo</span>
+                        <span class="voice-name">fable</span>
+                        <span class="voice-name">onyx</span>
+                        <span class="voice-name">nova</span>
+                        <span class="voice-name">sage</span>
+                        <span class="voice-name">shimmer</span>
+                        <span class="voice-name">verse</span>
+                    </div>
+                </section>
+
+                <!-- API Reference -->
+                <section class="content-section">
+                    <h2>API 参考</h2>
+                    <div class="api-endpoint">
+                        <h3>生成语音（OpenAI 兼容）</h3>
+                        <pre><code class="language-http">POST /v1/audio/speech</code></pre>
+                        
+                        <div class="request-body">
+                            <h4>请求参数</h4>
+                            <table class="params-table">
+                                <tr>
+                                    <th>参数</th>
+                                    <th>类型</th>
+                                    <th>必需</th>
+                                    <th>描述</th>
+                                </tr>
+                                <tr>
+                                    <td>input</td>
+                                    <td>string</td>
+                                    <td>是</td>
+                                    <td>要转换为语音的文本</td>
+                                </tr>
+                                <tr>
+                                    <td>voice</td>
+                                    <td>string</td>
+                                    <td>是</td>
+                                    <td>要使用的语音（见可用语音）</td>
+                                </tr>
+                                <tr>
+                                    <td class="partial-param">instructions</td>
+                                    <td>string</td>
+                                    <td>否</td>
+                                    <td><em>发送到后端服务时映射为 "prompt" 参数。可用于指导语音情感或风格。</em></td>
+                                </tr>
+                                <tr>
+                                    <td class="partial-param">response_format</td>
+                                    <td>string</td>
+                                    <td>否</td>
+                                    <td>音频响应的格式。支持的格式：mp3、opus、aac、flac、wav、pcm。默认为 mp3。</td>
+                                </tr>
+                                <tr>
+                                    <td class="compat-param">model</td>
+                                    <td>string</td>
+                                    <td>否</td>
+                                    <td><em>仅用于 OpenAI 兼容性 - 完全忽略。</em></td>
+                                </tr>
+                                <tr>
+                                    <td class="compat-param">speed</td>
+                                    <td>number</td>
+                                    <td>否</td>
+                                    <td><em>仅用于 OpenAI 兼容性 - 完全忽略。</em></td>
+                                </tr>
+                            </table>
+
+                            <div class="compatibility-notice">
+                                <p><strong>注意：</strong> <span class="compat-inline">灰色</span> 的参数完全被服务忽略或可能导致误导行为。只有 <code>input</code>、<code>voice</code> <code>response_format</code> 和 <code>instructions</code> 会影响实际的 TTS 输出。</p>
+                            </div>
+
+                            <!-- Instructions Parameter Details -->
+                            <div class="parameter-details">
+                                <h4>指令参数的工作原理</h4>
+                                <p><code>instructions</code> 参数在发送到后端服务时映射为 <code>prompt</code> 参数。它可用于指导语音情感、语气或风格。以下是一些有效的指令示例：</p>
+                                
+                                <ul class="examples-list">
+                                    <li><strong>情感指导：</strong> "请用欢快和兴奋的语气说话"</li>
+                                    <li><strong>角色模仿：</strong> "请模仿一位睿智的老巫师说话"</li>
+                                    <li><strong>上下文提示：</strong> "这是读给孩子的，请用温柔的语气"</li>
+                                    <li><strong>朗读风格：</strong> "请以新闻广播的风格朗读"</li>
+                                </ul>
+
+                                <div class="tip-box">
+                                    <p><strong>提示：</strong> 请保持指令清晰简洁。过于复杂的指令可能无法被正确解释。</p>
+                                </div>
+                            </div>
+
+                            <h4>响应格式</h4>
+                            <p>API 以请求的格式返回音频，具有以下标头：</p>
+                            <ul>
+                                <li><code>Content-Type</code>：根据请求的格式（例如，MP3 为 "audio/mpeg"）</li>
+                                <li><code>Access-Control-Allow-Origin</code>：*（启用 CORS）</li>
+                            </ul>
+
+                            <h4>错误响应</h4>
+                            <table class="error-table">
+                                <tr>
+                                    <th>状态码</th>
+                                    <th>描述</th>
+                                </tr>
+                                <tr>
+                                    <td>400</td>
+                                    <td>缺少必需参数（input 或 voice）</td>
+                                </tr>
+                                <tr>
+                                    <td>429</td>
+                                    <td>速率限制超出或队列已满。速率限制时包含 Retry-After 标头。</td>
+                                </tr>
+                                <tr>
+                                    <td>500</td>
+                                    <td>内部服务器错误</td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
+
+                    <!-- Queue System -->
+                    <div class="api-endpoint">
+                        <h3>队列系统</h3>
+                        <p>API 使用队列系统高效处理多个请求：</p>
+                        <ul>
+                            <li>最大队列大小：可通过 <code>MAX_QUEUE_SIZE</code> 环境变量配置（默认：100 个请求）</li>
+                            <li>请求按 FIFO（先进先出）顺序处理</li>
+                            <li>速率限制：可通过 <code>RATE_LIMIT_REQUESTS</code> 和 <code>RATE_LIMIT_WINDOW</code> 环境变量配置（默认：每个 IP 地址 60 秒内最多 30 个请求）</li>
+                            <li>可以通过 <code>/api/queue-size</code> 端点监控队列状态</li>
+                            <li>Web 界面每 2 秒更新一次队列状态</li>
+                            <li>根据使用率显示队列负载状态（低/���/高）</li>
+                        </ul>
+
+                        <h4>队列状态端点</h4>
+                        <pre><code class="language-http">GET /api/queue-size</code></pre>
+                        <p>返回包含队列信息的 JSON：</p>
+                        <pre><code class="language-json">{
+    "queue_size": 0,        // 当前队列中的请求数
+    "max_queue_size": 100   // 队列最大容量
+}</code></pre>
+
+                        <div class="response-codes">
+                            <h4>响应状态码</h4>
+                            <ul>
+                                <li><code>200</code> - 成功</li>
+                                <li><code>429</code> - 队列已满或超出速率限制</li>
+                                <li><code>500</code> - 服务器错误</li>
+                            </ul>
+                        </div>
+                    </div>
+                </section>
+            </main>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html> 

static/script.js

@@ -0,0 +1,370 @@
+// Use the current host for API requests
+const OPENAI_API_URL = `${window.location.protocol}//${window.location.host}/v1/audio/speech`;
+const processingStatus = document.getElementById('processing-status');
+const activeRequests = document.getElementById('queue-size');
+const lastUpdate = document.getElementById('last-update');
+const maxQueueSize = document.getElementById('max-queue-size');
+const queueProgressBar = document.getElementById('queue-progress-bar');
+const statusIndicator = document.getElementById('status-indicator');
+const queueLoadText = document.getElementById('queue-load-text');
+
+// Track active requests
+let currentActiveRequests = 0;
+
+// Initialize current language
+let currentLang = 'en';
+
+// Language translations
+const translations = {
+    en: {
+        title: "OpenAI TTS API Documentation",
+        subtitle: "Text-to-Speech API with Multiple Voice Options",
+        tryItOut: "Try It Out",
+        textToConvert: "Text to Convert",
+        voice: "Voice",
+        instructions: "Instructions (Optional)",
+        generateSpeech: "Generate Speech",
+        quickStart: "Quick Start",
+        availableVoices: "Available Voices",
+        apiReference: "API Reference",
+        queueStatus: "Queue Status",
+        activeRequests: "Active Requests",
+        maxCapacity: "Maximum Capacity",
+        noLoad: "No Load",
+        lowLoad: "Low Load",
+        mediumLoad: "Medium Load",
+        highLoad: "High Load"
+    },
+    zh: {
+        title: "OpenAI TTS API 文档",
+        subtitle: "支持多种语音的文本转语音 API",
+        tryItOut: "立即体验",
+        textToConvert: "要转换的文本",
+        voice: "语音",
+        instructions: "指令（可选）",
+        generateSpeech: "生成语音",
+        quickStart: "快速开始",
+        availableVoices: "可用语音",
+        apiReference: "API 参考",
+        queueStatus: "队列状态",
+        activeRequests: "活动请求",
+        maxCapacity: "最大容量",
+        noLoad: "无负载",
+        lowLoad: "低负载",
+        mediumLoad: "中负载",
+        highLoad: "高负载"
+    }
+};
+
+// Language switching functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const langButtons = document.querySelectorAll('.lang-btn');
+    
+    // Set initial language based on current page
+    const isChinesePage = window.location.pathname.includes('_zh.html');
+    currentLang = isChinesePage ? 'zh' : 'en';
+    
+    // Update active state of language buttons
+    langButtons.forEach(btn => {
+        if (btn.getAttribute('data-lang') === currentLang) {
+            btn.classList.add('active');
+        } else {
+            btn.classList.remove('active');
+        }
+    });
+    
+    // Initial queue size update
+    updateQueueSize();
+});
+
+function updateProcessingStatus(requestCount) {
+    if (requestCount > 0) {
+        processingStatus.textContent = 'Processing';
+        processingStatus.className = 'processing';
+    } else {
+        processingStatus.textContent = 'Idle';
+        processingStatus.className = 'idle';
+    }
+}
+
+function updateLastUpdate() {
+    const now = new Date();
+    if (lastUpdate) {
+        lastUpdate.textContent = now.toLocaleTimeString();
+    }
+}
+
+// Function to update queue size with visual indicators
+async function updateQueueSize() {
+    try {
+        const response = await fetch('/api/queue-size');
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        
+        // Update text values
+        document.getElementById('queue-size').textContent = data.queue_size;
+        document.getElementById('max-queue-size').textContent = data.max_queue_size;
+        
+        // Calculate load percentage
+        const loadPercentage = (data.queue_size / data.max_queue_size) * 100;
+        
+        // Update progress bar width
+        queueProgressBar.style.width = `${Math.min(loadPercentage, 100)}%`;
+        
+        // Update status indicators based on load
+        updateLoadStatus(loadPercentage);
+        
+    } catch (error) {
+        console.error('Error fetching queue size:', error);
+        // Show error state in UI
+        document.getElementById('queue-size').textContent = '?';
+        document.getElementById('max-queue-size').textContent = '?';
+        queueProgressBar.style.width = '0%';
+        statusIndicator.classList.remove('indicator-low', 'indicator-medium', 'indicator-high');
+        statusIndicator.classList.add('indicator-error');
+        queueProgressBar.classList.remove('progress-low', 'progress-medium', 'progress-high');
+        queueLoadText.classList.remove('low-load', 'medium-load', 'high-load');
+        queueLoadText.textContent = 'Error';
+    }
+}
+
+// Function to update load status indicators
+function updateLoadStatus(loadPercentage) {
+    // Remove all existing classes
+    statusIndicator.classList.remove('indicator-low', 'indicator-medium', 'indicator-high');
+    queueProgressBar.classList.remove('progress-low', 'progress-medium', 'progress-high');
+    queueLoadText.classList.remove('low-load', 'medium-load', 'high-load');
+    
+    // Apply appropriate classes based on load percentage
+    if (loadPercentage >= 75) {
+        // High load (75-100%)
+        statusIndicator.classList.add('indicator-high');
+        queueProgressBar.classList.add('progress-high');
+        queueLoadText.classList.add('high-load');
+        queueLoadText.textContent = translations[currentLang].highLoad;
+    } else if (loadPercentage >= 40) {
+        // Medium load (40-75%)
+        statusIndicator.classList.add('indicator-medium');
+        queueProgressBar.classList.add('progress-medium');
+        queueLoadText.classList.add('medium-load');
+        queueLoadText.textContent = translations[currentLang].mediumLoad;
+    } else {
+        // Low load (0-40%)
+        statusIndicator.classList.add('indicator-low');
+        queueProgressBar.classList.add('progress-low');
+        queueLoadText.classList.add('low-load');
+        queueLoadText.textContent = loadPercentage > 0 ? translations[currentLang].lowLoad : translations[currentLang].noLoad;
+    }
+}
+
+// Update queue size every 2 seconds
+setInterval(updateQueueSize, 2000);
+
+// Initial update
+updateQueueSize();
+
+// Function to copy code blocks
+function copyCode(button) {
+    const codeBlock = button.closest('.code-block').querySelector('code');
+    const text = codeBlock.textContent;
+    
+    navigator.clipboard.writeText(text).then(() => {
+        // Visual feedback
+        const originalIcon = button.innerHTML;
+        button.innerHTML = '<i class="fas fa-check"></i>';
+        button.style.color = '#4CAF50';
+        
+        // Reset after 2 seconds
+        setTimeout(() => {
+            button.innerHTML = originalIcon;
+            button.style.color = '';
+        }, 2000);
+    }).catch(err => {
+        console.error('Failed to copy text:', err);
+        // Visual feedback for error
+        button.style.color = '#f44336';
+        setTimeout(() => {
+            button.style.color = '';
+        }, 2000);
+    });
+}
+
+// Playground functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const submitButton = document.getElementById('playground-submit');
+    const textInput = document.getElementById('playground-text');
+    const voiceSelect = document.getElementById('playground-voice');
+    const instructionsInput = document.getElementById('playground-instructions');
+    const formatSelect = document.getElementById('playground-format');
+    const statusDiv = document.getElementById('playground-status');
+    const audioDiv = document.getElementById('playground-audio');
+
+    submitButton.addEventListener('click', async function() {
+        const text = textInput.value.trim();
+        const voice = voiceSelect.value;
+        const instructions = instructionsInput.value.trim();
+        const format = formatSelect.value;
+
+        if (!text) {
+            showStatus('Please enter some text to convert', 'error');
+            return;
+        }
+
+        // Disable the submit button and show loading state
+        submitButton.disabled = true;
+        submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
+        showStatus('Generating speech...', 'success');
+        audioDiv.innerHTML = '';
+
+        try {
+            const response = await fetch(OPENAI_API_URL, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    input: text,
+                    voice: voice,
+                    instructions: instructions || undefined,
+                    response_format: format
+                })
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.error || 'Failed to generate speech');
+            }
+
+            const blob = await response.blob();
+            const audioUrl = URL.createObjectURL(blob);
+            
+            // Create audio element
+            const audio = document.createElement('audio');
+            audio.controls = true;
+            audio.src = audioUrl;
+            
+            // Clear previous audio and add new one
+            audioDiv.innerHTML = '';
+            audioDiv.appendChild(audio);
+            
+            showStatus('Speech generated successfully!', 'success');
+        } catch (error) {
+            showStatus(error.message || 'Failed to generate speech', 'error');
+        } finally {
+            // Re-enable the submit button and restore original text
+            submitButton.disabled = false;
+            submitButton.innerHTML = '<i class="fas fa-play"></i> Generate Speech';
+        }
+    });
+
+    function showStatus(message, type) {
+        statusDiv.textContent = message;
+        statusDiv.className = `playground-status ${type}`;
+    }
+});
+
+// Voice sample functionality
+let currentSampleAudio = null;
+
+// Function to load and play voice sample
+async function loadVoiceSample(voice) {
+    const previewAudioDiv = document.getElementById('preview-audio');
+    
+    try {
+        // Create new audio element
+        const response = await fetch(`/api/voice-sample/${voice}`);
+        if (!response.ok) {
+            throw new Error(`Failed to load voice sample: ${response.statusText}`);
+        }
+        
+        const blob = await response.blob();
+        const audioUrl = URL.createObjectURL(blob);
+        
+        // Create and configure audio element
+        currentSampleAudio = document.createElement('audio');
+        currentSampleAudio.controls = true;
+        currentSampleAudio.src = audioUrl;
+        
+        // Clear previous audio and add new one
+        previewAudioDiv.innerHTML = '';
+        previewAudioDiv.appendChild(currentSampleAudio);
+        
+    } catch (error) {
+        console.error('Error loading voice sample:', error);
+        // Show error in status
+        const statusDiv = document.getElementById('playground-status');
+        statusDiv.innerHTML = `<div class="error-message">Error loading voice sample: ${error.message}</div>`;
+    }
+}
+
+// Add voice selection change handler
+document.getElementById('playground-voice').addEventListener('change', function() {
+    loadVoiceSample(this.value);
+});
+
+// Load initial voice sample when page loads
+document.addEventListener('DOMContentLoaded', function() {
+    const voiceSelect = document.getElementById('playground-voice');
+    if (voiceSelect) {
+        loadVoiceSample(voiceSelect.value);
+    }
+});
+
+// Update the example code blocks
+document.addEventListener('DOMContentLoaded', function() {
+    // Update Python example
+    const pythonExample = document.querySelector('.language-python');
+    if (pythonExample) {
+        pythonExample.textContent = `import requests
+
+url = "https://ttsapi.site/v1/audio/speech"
+headers = {
+    "Content-Type": "application/json"
+}
+data = {
+    "input": "Hello, this is a test.",
+    "voice": "alloy",
+    "instructions": "Speak in a cheerful and upbeat tone.",  # Optional
+    "response_format": "mp3"  # Optional, supported formats: mp3, opus, aac, flac, wav, pcm
+}
+
+response = requests.post(url, json=data, headers=headers)
+if response.status_code == 200:
+    # Save the audio file in the requested format
+    with open("output.${format}", "wb") as f:
+        f.write(response.content)
+    print(f"Audio saved as output.${format}")
+else:
+    print(f"Error: {response.status_code}, {response.json()}")`;
+    }
+
+    // Update JavaScript example
+    const javascriptExample = document.querySelector('.language-javascript');
+    if (javascriptExample) {
+        javascriptExample.textContent = `async function generateSpeech() {
+    const response = await fetch('https://ttsapi.site/v1/audio/speech', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            input: 'Hello, this is a test.',
+            voice: 'alloy',
+            instructions: 'Speak in a cheerful and upbeat tone.',  // Optional
+            response_format: 'mp3'  // Optional, supported formats: mp3, opus, aac, flac, wav, pcm
+        })
+    });
+
+    if (response.ok) {
+        const blob = await response.blob();
+        const audio = new Audio(URL.createObjectURL(blob));
+        audio.play();
+    } else {
+        const error = await response.json();
+        console.error('Error:', error);
+    }
+}`;
+    }
+}); 

static/styles.css

@@ -0,0 +1,1218 @@
+:root {
+    --primary-color: #2563eb;
+    --secondary-color: #1e40af;
+    --background-color: #0f172a;
+    --text-color: #e2e8f0;
+    --border-color: #1e293b;
+    --success-color: #10b981;
+    --error-color: #ef4444;
+    --card-bg: #1e293b;
+    --card-hover: #334155;
+    --code-bg: #1e293b;
+    --header-bg: #0f172a;
+    --panel-bg: #ffffff;
+    --docs-bg: #1a1a1a;
+    --docs-text: #e5e7eb;
+    --gradient-start: #60a5fa;
+    --gradient-end: #34d399;
+    --disclaimer-bg: #eef2ff;
+    --disclaimer-border: #c7d2fe;
+    --disclaimer-text: #4f46e5;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    color: #333;
+    background-color: #f5f5f5;
+}
+
+.app-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.content-wrapper {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 2rem;
+}
+
+/* Header */
+.main-header {
+    margin-bottom: 3rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #eee;
+}
+
+.header-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.github-link {
+    color: #333;
+    font-size: 1.5rem;
+    transition: all 0.2s ease;
+    background-color: #f8fafc;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    border: 1px solid #e2e8f0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+}
+
+.github-link i {
+    font-size: 1.5rem;
+}
+
+.github-link:hover {
+    color: #2563eb;
+    background-color: #eff6ff;
+    border-color: #2563eb;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.1);
+}
+
+.header-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 1rem;
+}
+
+.language-selector {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.lang-btn {
+    padding: 0.5rem 1rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+    background: white;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+}
+
+.lang-btn:hover {
+    border-color: #2563eb;
+    color: #2563eb;
+}
+
+.lang-btn.active {
+    background: #2563eb;
+    color: white;
+    border-color: #2563eb;
+}
+
+.main-header h1 {
+    margin: 0;
+    color: #2c3e50;
+    font-size: 2.5rem;
+}
+
+.subtitle {
+    color: #666;
+    margin: 0.5rem 0 0;
+}
+
+/* Disclaimer Section */
+.disclaimer-notice {
+    background-color: var(--disclaimer-bg);
+    border: 1px solid var(--disclaimer-border);
+    border-radius: 8px;
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+}
+
+.disclaimer-container {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+.disclaimer-icon {
+    color: var(--disclaimer-text);
+    font-size: 1.5rem;
+    padding: 0.5rem;
+    background-color: rgba(79, 70, 229, 0.1);
+    border-radius: 50%;
+}
+
+.disclaimer-content {
+    flex: 1;
+}
+
+.disclaimer-content h2 {
+    color: var(--disclaimer-text);
+    margin-bottom: 0.5rem;
+    font-size: 1.5rem;
+}
+
+.disclaimer-content p {
+    color: #4b5563;
+    margin-bottom: 0;
+}
+
+.disclaimer-content a {
+    color: var(--disclaimer-text);
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.disclaimer-content a:hover {
+    text-decoration: underline;
+}
+
+/* Content sections */
+.content-section {
+    margin-bottom: 3rem;
+}
+
+.content-section h2 {
+    color: #2c3e50;
+    margin-bottom: 1.5rem;
+    font-size: 1.8rem;
+}
+
+/* Code blocks */
+.code-block {
+    background: #1e1e1e;
+    border-radius: 6px;
+    overflow: hidden;
+    margin: 1rem 0;
+}
+
+.code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background: #2d2d2d;
+    border-bottom: 1px solid #3d3d3d;
+}
+
+.code-language {
+    color: #fff;
+    font-size: 0.9rem;
+}
+
+.copy-button {
+    background: none;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.9rem;
+}
+
+.copy-button:hover {
+    color: #4CAF50;
+}
+
+/* Voice table */
+.voice-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+}
+
+.voice-table th,
+.voice-table td {
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid #eee;
+}
+
+.voice-table th {
+    background-color: #f8f9fa;
+    font-weight: 600;
+    color: #2c3e50;
+}
+
+.voice-table tr:hover {
+    background-color: #f8f9fa;
+}
+
+/* API endpoint */
+.api-endpoint {
+    margin-bottom: 2rem;
+}
+
+.api-endpoint h3 {
+    color: #2c3e50;
+    margin-bottom: 1rem;
+}
+
+.api-endpoint h4 {
+    color: #666;
+    margin: 1.5rem 0 1rem;
+}
+
+/* Code syntax highlighting overrides */
+pre[class*="language-"] {
+    margin: 0;
+    border-radius: 0;
+}
+
+code[class*="language-"] {
+    font-size: 0.9rem;
+    padding: 1rem;
+}
+
+/* Status Section */
+.status-section {
+    margin-bottom: 2rem;
+}
+
+.status-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.status-card {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 1.5rem;
+    width: 100%;
+    max-width: 600px;
+}
+
+.status-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.status-header h3 {
+    margin: 0;
+    color: #2c3e50;
+    font-size: 1.3rem;
+}
+
+.status-indicator {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 8px;
+    background-color: var(--success-color);
+}
+
+.queue-stats {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.stat-label {
+    font-size: 0.9rem;
+    color: #64748b;
+    margin-bottom: 0.25rem;
+}
+
+.stat-value {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #2c3e50;
+}
+
+.queue-progress-container {
+    height: 8px;
+    background-color: #e2e8f0;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 0.75rem;
+}
+
+.queue-progress-bar {
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(to right, #10b981, #3b82f6);
+    transition: width 0.5s ease, background-color 0.5s ease;
+}
+
+.queue-load-text {
+    text-align: center;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: #10b981; /* Default green */
+}
+
+/* Load status colors */
+.low-load {
+    color: #10b981 !important; /* Green */
+}
+
+.medium-load {
+    color: #f59e0b !important; /* Yellow/Orange */
+}
+
+.high-load {
+    color: #ef4444 !important; /* Red */
+}
+
+.indicator-low {
+    background-color: #10b981 !important;
+}
+
+.indicator-medium {
+    background-color: #f59e0b !important;
+}
+
+.indicator-high {
+    background-color: #ef4444 !important;
+}
+
+.progress-low {
+    background: linear-gradient(to right, #10b981, #34d399) !important;
+}
+
+.progress-medium {
+    background: linear-gradient(to right, #f59e0b, #fbbf24) !important;
+}
+
+.progress-high {
+    background: linear-gradient(to right, #ef4444, #f87171) !important;
+}
+
+/* Voice Grid */
+.voice-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.voice-card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 1.25rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+}
+
+.voice-card::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
+    transform: translateX(-100%);
+    transition: transform 0.6s ease;
+}
+
+.voice-card:hover::after {
+    transform: translateX(100%);
+}
+
+.voice-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    border-color: var(--primary-color);
+}
+
+.voice-name {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 0.25rem;
+    text-transform: capitalize;
+    position: relative;
+    display: inline-block;
+}
+
+.voice-name::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
+    transition: width 0.3s ease;
+}
+
+.voice-card:hover .voice-name::after {
+    width: 100%;
+}
+
+.voice-description {
+    font-size: 0.8rem;
+    color: #94a3b8;
+}
+
+/* Processing Status */
+#processing-status {
+    font-weight: 500;
+}
+
+#processing-status.processing {
+    color: #60a5fa;
+}
+
+#processing-status.idle {
+    color: #34d399;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .app-container {
+        padding: 1rem;
+    }
+
+    .main-header {
+        padding: 2rem 1rem;
+    }
+
+    .main-header h1 {
+        font-size: 2rem;
+    }
+
+    .queue-status {
+        grid-template-columns: 1fr;
+    }
+
+    .voice-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .content-section {
+        margin-bottom: 2rem;
+    }
+
+    .status-card, .voice-card {
+        padding: 1.25rem;
+    }
+
+    .status-icon {
+        width: 2.5rem;
+        height: 2.5rem;
+        font-size: 1.25rem;
+    }
+
+    .status-value {
+        font-size: 1.25rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .main-header h1 {
+        font-size: 1.75rem;
+    }
+
+    .subtitle {
+        font-size: 1rem;
+    }
+
+    .content-section h2 {
+        font-size: 1.5rem;
+    }
+
+    .api-endpoint {
+        padding: 1rem;
+    }
+
+    pre {
+        padding: 1rem;
+    }
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--background-color);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--card-hover);
+}
+
+/* Audio Container */
+.audio-container {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.audio-wrapper {
+    background: #2a2a2a;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.voice-label {
+    font-size: 14px;
+    color: #888;
+    margin-bottom: 8px;
+    text-transform: capitalize;
+}
+
+.audio-player {
+    width: 100%;
+    height: 40px;
+    background: #1a1a1a;
+    border-radius: 4px;
+    padding: 5px;
+}
+
+.audio-player::-webkit-media-controls-panel {
+    background: #1a1a1a;
+}
+
+.audio-player::-webkit-media-controls-play-button {
+    background-color: #4CAF50;
+    border-radius: 50%;
+}
+
+.audio-player::-webkit-media-controls-timeline {
+    background-color: #4CAF50;
+    border-radius: 2px;
+}
+
+.audio-player::-webkit-media-controls-volume-slider {
+    background-color: #4CAF50;
+    border-radius: 2px;
+}
+
+/* Header Decoration */
+.header-decoration {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 200px;
+    height: 200px;
+    pointer-events: none;
+}
+
+.decoration-circle {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.1;
+}
+
+.decoration-circle:nth-child(1) {
+    width: 100px;
+    height: 100px;
+    background: var(--gradient-start);
+    top: 20px;
+    right: 20px;
+}
+
+.decoration-circle:nth-child(2) {
+    width: 60px;
+    height: 60px;
+    background: var(--gradient-end);
+    top: 60px;
+    right: 60px;
+}
+
+.decoration-circle:nth-child(3) {
+    width: 40px;
+    height: 40px;
+    background: var(--primary-color);
+    top: 100px;
+    right: 100px;
+}
+
+/* Voice Icon */
+.voice-icon {
+    width: 40px;
+    height: 40px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1rem;
+    transition: all 0.3s ease;
+}
+
+.voice-icon i {
+    font-size: 1.25rem;
+    color: var(--text-color);
+}
+
+.voice-card:hover .voice-icon {
+    background: var(--primary-color);
+    transform: scale(1.1);
+}
+
+/* Section Headers */
+.content-section h2 {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+}
+
+.content-section h2 i {
+    color: var(--primary-color);
+    font-size: 1.5rem;
+}
+
+.api-endpoint h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.api-endpoint h3 i {
+    color: var(--primary-color);
+    font-size: 1.25rem;
+}
+
+/* Loading Animation */
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+.status-card.processing {
+    animation: pulse 2s infinite;
+}
+
+.status-card.processing .status-icon {
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* Parameter and Error Tables */
+.params-table,
+.error-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+    background-color: #fff;
+    border: 1px solid #eee;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.params-table th,
+.params-table td,
+.error-table th,
+.error-table td {
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid #eee;
+}
+
+.params-table th,
+.error-table th {
+    background-color: #f8f9fa;
+    font-weight: 600;
+    color: #2c3e50;
+    text-transform: uppercase;
+    font-size: 0.85rem;
+}
+
+.params-table td:nth-child(2),
+.params-table td:nth-child(3) {
+    font-family: 'Fira Code', monospace;
+    font-size: 0.9rem;
+}
+
+.params-table td:nth-child(3) {
+    color: #2563eb;
+    font-weight: 500;
+}
+
+.error-table td:first-child {
+    font-family: 'Fira Code', monospace;
+    font-weight: 500;
+    color: #ef4444;
+}
+
+/* Response Format Section */
+.api-endpoint ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 1rem 0;
+}
+
+.api-endpoint ul li {
+    margin: 0.5rem 0;
+    padding-left: 1.5rem;
+    position: relative;
+}
+
+.api-endpoint ul li::before {
+    content: '•';
+    position: absolute;
+    left: 0.5rem;
+    color: #2563eb;
+}
+
+.api-endpoint ul li code {
+    background-color: #f1f5f9;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-family: 'Fira Code', monospace;
+    font-size: 0.9rem;
+    color: #2563eb;
+}
+
+/* Queue System Section */
+.api-endpoint p {
+    margin: 1rem 0;
+    line-height: 1.6;
+    color: #4a5568;
+}
+
+/* Language Tabs */
+.language-tabs {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.language-tab {
+    padding: 0.5rem 1rem;
+    background-color: #f1f5f9;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 500;
+    color: #4a5568;
+    transition: all 0.2s ease;
+}
+
+.language-tab:hover,
+.language-tab.active {
+    background-color: #2563eb;
+    color: #fff;
+}
+
+/* Best Used For Column */
+.voice-table td:last-child {
+    color: #4a5568;
+    font-style: italic;
+}
+
+/* Mobile Responsiveness for New Elements */
+@media (max-width: 768px) {
+    .params-table,
+    .error-table {
+        display: block;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+    
+    .params-table th,
+    .params-table td,
+    .error-table th,
+    .error-table td {
+        min-width: 120px;
+    }
+}
+
+/* Compatibility Parameters */
+.compat-param {
+    color: #94a3b8 !important;
+    font-style: italic;
+}
+
+/* Partially Supported Parameters */
+.partial-param {
+    color: #3b82f6 !important;
+    font-style: italic;
+}
+
+.compatibility-notice {
+    margin: 1rem 0;
+    padding: 1rem;
+    background-color: #f8fafc;
+    border-left: 4px solid #94a3b8;
+    border-radius: 0 4px 4px 0;
+}
+
+.compatibility-notice p {
+    margin: 0;
+    color: #64748b;
+    font-size: 0.9rem;
+}
+
+.compatibility-notice strong {
+    color: #475569;
+}
+
+.compat-inline {
+    color: #94a3b8;
+    font-style: italic;
+    padding: 0 2px;
+}
+
+.partial-inline {
+    color: #3b82f6;
+    font-style: italic;
+    padding: 0 2px;
+}
+
+/* Update code examples to reflect actual usage */
+.code-block pre code {
+    line-height: 1.5;
+}
+
+/* Parameter Details Section */
+.parameter-details {
+    margin: 1.5rem 0;
+    padding: 1rem;
+    background-color: #f0f9ff;
+    border-radius: 6px;
+    border: 1px solid #e0f2fe;
+}
+
+.parameter-details h4 {
+    color: #0369a1;
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
+
+.parameter-details p {
+    margin-bottom: 1rem;
+    color: #334155;
+}
+
+.parameter-details code {
+    background-color: #e0f2fe;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-family: 'Fira Code', monospace;
+    font-size: 0.9rem;
+    color: #0369a1;
+}
+
+/* Examples List */
+.examples-list {
+    list-style: none;
+    padding-left: 0;
+    margin: 1rem 0;
+}
+
+.examples-list li {
+    margin: 0.75rem 0;
+    padding: 0.5rem 0.75rem;
+    background-color: #fff;
+    border-left: 3px solid #3b82f6;
+    border-radius: 0 4px 4px 0;
+}
+
+.examples-list li strong {
+    color: #1e40af;
+    margin-right: 0.25rem;
+}
+
+/* Tip Box */
+.tip-box {
+    margin-top: 1.5rem;
+    padding: 0.75rem 1rem;
+    background-color: #fffbeb;
+    border-left: 3px solid #f59e0b;
+    border-radius: 0 4px 4px 0;
+}
+
+.tip-box p {
+    margin: 0;
+    color: #92400e;
+    font-size: 0.9rem;
+}
+
+.tip-box strong {
+    color: #78350f;
+}
+
+/* Warning Box */
+.warning-box {
+    margin: 1rem 0;
+    padding: 0.75rem 1rem;
+    background-color: #fef2f2;
+    border-left: 3px solid #ef4444;
+    border-radius: 0 4px 4px 0;
+}
+
+.warning-box p {
+    margin: 0;
+    color: #b91c1c;
+    font-size: 0.9rem;
+}
+
+.warning-box strong {
+    color: #991b1b;
+}
+
+/* Voice List */
+.voice-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin: 1rem 0;
+}
+
+.voice-list .voice-name {
+    background-color: #f1f5f9;
+    border-radius: 4px;
+    padding: 0.5rem 1rem;
+    font-family: 'Fira Code', monospace;
+    font-size: 0.9rem;
+    color: #2563eb;
+    border: 1px solid #e2e8f0;
+    transition: all 0.2s ease;
+    cursor: default;
+}
+
+.voice-list .voice-name:hover {
+    background-color: #e0f2fe;
+    transform: translateY(-2px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.version-badge {
+    background-color: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 8px 16px;
+    margin-left: 12px;
+    display: inline-flex;
+    align-items: center;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.version-badge:hover {
+    border-color: var(--primary-color);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.version-badge span {
+    color: #64748b;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.version-badge strong {
+    color: var(--primary-color);
+    font-weight: 600;
+    font-family: 'Fira Code', monospace;
+    letter-spacing: 0.5px;
+}
+
+/* Playground Section */
+.playground-section {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.playground-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin-top: 1.5rem;
+}
+
+.playground-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.form-group label {
+    font-weight: 500;
+    color: #2c3e50;
+}
+
+.form-group textarea,
+.form-group select {
+    padding: 0.75rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    font-size: 1rem;
+    font-family: inherit;
+    resize: vertical;
+    transition: border-color 0.2s ease;
+}
+
+.form-group textarea:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: #2563eb;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.playground-button {
+    background-color: #2563eb;
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 6px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    transition: background-color 0.2s ease;
+    margin-top: 1rem;
+}
+
+.playground-button:hover {
+    background-color: #1d4ed8;
+}
+
+.playground-button:disabled {
+    background-color: #94a3b8;
+    cursor: not-allowed;
+}
+
+.playground-output {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.audio-section {
+    background-color: #f8fafc;
+    border-radius: 8px;
+    padding: 1.5rem;
+}
+
+.audio-section h3 {
+    color: #2c3e50;
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+}
+
+.audio-player {
+    background-color: white;
+    border-radius: 6px;
+    padding: 1rem;
+    min-height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #e2e8f0;
+}
+
+.audio-player audio {
+    width: 100%;
+}
+
+.playground-status {
+    padding: 0.75rem;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+}
+
+.playground-status.error {
+    background-color: #fef2f2;
+    color: #b91c1c;
+    border: 1px solid #fee2e2;
+}
+
+.playground-status.success {
+    background-color: #f0fdf4;
+    color: #166534;
+    border: 1px solid #dcfce7;
+}
+
+.voice-select-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.voice-select-container select {
+    flex: 1;
+}
+
+.sample-button {
+    background-color: #4a90e2;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.sample-button:hover {
+    background-color: #357abd;
+}
+
+.sample-button:active {
+    background-color: #2d6da3;
+}
+
+.sample-button i {
+    font-size: 14px;
+}
+
+@media (max-width: 768px) {
+    .playground-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .playground-output {
+        gap: 1.5rem;
+    }
+} 

utils/__init__.py

@@ -0,0 +1,5 @@
+"""
+Utils Package
+
+This package contains utility functions and helper classes.
+""" 

utils/config.py

@@ -0,0 +1,101 @@
+"""
+Configuration Utilities
+
+This module provides utilities for loading and managing configuration settings.
+"""
+
+import os
+import argparse
+import logging
+from dotenv import load_dotenv
+
+logger = logging.getLogger(__name__)
+
+def load_config():
+    """Load configuration from environment variables and command line arguments.
+    
+    Returns:
+        argparse.Namespace: The configuration settings
+    """
+    # Load environment variables
+    load_dotenv()
+    
+    # Get default values from environment variables
+    default_host = os.getenv("HOST", "localhost")
+    default_port = int(os.getenv("PORT", "7000"))
+    default_verify_ssl = os.getenv("VERIFY_SSL", "true").lower() != "false"
+    default_max_queue_size = int(os.getenv("MAX_QUEUE_SIZE", "100"))
+    default_rate_limit_requests = int(os.getenv("RATE_LIMIT_REQUESTS", "30"))
+    default_rate_limit_window = int(os.getenv("RATE_LIMIT_WINDOW", "60"))
+    
+    parser = argparse.ArgumentParser(description="Run the TTS API server")
+    parser.add_argument("--host", type=str, default=default_host, help="Host to bind to")
+    parser.add_argument("--port", type=int, default=default_port, help="Port to bind to")
+    parser.add_argument("--no-verify-ssl", action="store_true", help="Disable SSL certificate verification (insecure, use only for testing)")
+    parser.add_argument("--max-queue-size", type=int, default=default_max_queue_size, help="Maximum number of tasks in queue")
+    parser.add_argument("--test-connection", action="store_true", help="Test connection to OpenAI.fm and exit")
+    
+    args = parser.parse_args()
+    
+    # Apply global SSL settings if needed
+    if args.no_verify_ssl or not default_verify_ssl:
+        import ssl
+        # Disable SSL verification globally in Python
+        ssl._create_default_https_context = ssl._create_unverified_context
+        logger.warning("SSL certificate verification disabled GLOBALLY. This is insecure!")
+    
+    return {
+        'host': args.host,
+        'port': args.port,
+        'verify_ssl': not args.no_verify_ssl,
+        'max_queue_size': args.max_queue_size,
+        'rate_limit_requests': default_rate_limit_requests,
+        'rate_limit_window': default_rate_limit_window,
+        'test_connection': args.test_connection
+    }
+
+async def test_connection(session):
+    """Test connection to OpenAI.fm.
+    
+    Args:
+        session: aiohttp.ClientSession to use for requests
+    """
+    logger.info("Testing connection to OpenAI.fm...")
+    
+    try:
+        logger.info("Sending GET request to OpenAI.fm homepage")
+        async with session.get("https://www.openai.fm") as response:
+            logger.info(f"Homepage status: {response.status}")
+            if response.status == 200:
+                logger.info("Successfully connected to OpenAI.fm homepage")
+            else:
+                logger.error(f"Failed to connect to OpenAI.fm homepage: {response.status}")
+                
+        logger.info("Testing API endpoint with minimal request")
+        test_data = {"input": "Test", "voice": "alloy"}
+        import urllib.parse
+        url_encoded_data = urllib.parse.urlencode(test_data)
+        
+        async with session.post(
+            "https://www.openai.fm/api/generate",
+            data=url_encoded_data,
+            headers={
+                "Accept": "*/*",
+                "Accept-Language": "en-US,en;q=0.9",
+                "Origin": "https://www.openai.fm",
+                "Referer": "https://www.openai.fm/",
+                "Content-Type": "application/x-www-form-urlencoded"
+            }
+        ) as response:
+            logger.info(f"API endpoint status: {response.status}")
+            if response.status == 200:
+                data = await response.read()
+                logger.info(f"Successfully received {len(data)} bytes from API")
+            else:
+                text = await response.text()
+                logger.error(f"API request failed: {response.status}, {text}")
+                
+    except Exception as e:
+        logger.error(f"Connection test failed with error: {str(e)}")
+        import traceback
+        logger.error(traceback.format_exc()) 

voices/alloy_sample.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ef4d35b248c6d3de5801e878b92655ea9bea6a41647d09e918ab5261192aaf0
+size 149805

voices/ash_sample.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:82be24cc5dd15c78fd01809fcec17ba4543297ab4ddb74219d46b0ab63593691
+size 180909

voices/ballad_sample.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fc9893354cfe3316351f43b0e615f9415dc2cf7a5aecdac57176dea72758af46
+size 585644

voices/coral_sample.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5a71aad37e82a1fc5f990464465413baa0883855f8d51839c5e6865d2106560b
+size 165165

voices/echo_sample.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2c72fd90e8bcd80bf6fe036e60c3ffb2eb41a042d69807cde343e30ec6f79c0c
+size 492044

voices/fable_sample.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a084c93e186d6ab02491e92d3409b677f9f31d344d5b232f3154c7138cdd396a
+size 484844

voices/nova_sample.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:46a6cc46066abb9250a72a8e1d6c92d778563dbe8d25a525cce72ef62a103865
+size 463244

voices/onyx_sample.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5fd4d12245706c97f4e4adf6b56ebd00f123c24f417e6ef2ffa2b29673532d49
+size 164013

voices/sage_sample.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:104037cfc2829b35a2ce181b296448ac9aa0b7685122eb3595619eb688033ec9
+size 520844

voices/shimmer_sample.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0407851edc226a3f8ced874ff223d173a489f86d41c5c6c89de7d636e545de1d
+size 160173

voices/verse_sample.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:acf26a3f25f4625afedd6f2d2710e64f886ba7a8627adc7b7ca260061d029963
+size 556844