| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Kokoro-FastAPI Docker Deployment</title> |
| <link rel="icon" type="image/svg+xml" href="favicon.svg"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --fg-color: #6366f1; |
| --bg-color: #0f172a; |
| --surface: #1e293b; |
| --border: rgba(99, 102, 241, 0.2); |
| --text: #f1f5f9; |
| --text-light: #94a3b8; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background: var(--bg-color); |
| color: var(--text); |
| line-height: 1.6; |
| min-height: 100vh; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 2rem; |
| } |
| |
| header { |
| text-align: center; |
| margin-bottom: 3rem; |
| } |
| |
| h1 { |
| font-size: 2.5rem; |
| font-weight: 700; |
| margin-bottom: 1rem; |
| background: linear-gradient(135deg, var(--fg-color), #8b5cf6); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .subtitle { |
| color: var(--text-light); |
| font-size: 1.1rem; |
| } |
| |
| .section { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 0.75rem; |
| padding: 2rem; |
| margin-bottom: 2rem; |
| } |
| |
| h2 { |
| font-size: 1.5rem; |
| margin-bottom: 1rem; |
| color: var(--fg-color); |
| } |
| |
| h3 { |
| font-size: 1.2rem; |
| margin-bottom: 0.5rem; |
| color: var(--text); |
| } |
| |
| pre { |
| background: rgba(0, 0, 0, 0.3); |
| border: 1px solid var(--border); |
| border-radius: 0.5rem; |
| padding: 1rem; |
| overflow-x: auto; |
| margin: 1rem 0; |
| } |
| |
| code { |
| background: rgba(99, 102, 241, 0.1); |
| color: var(--fg-color); |
| padding: 0.2rem 0.4rem; |
| border-radius: 0.25rem; |
| font-family: 'Monaco', 'Menlo', monospace; |
| font-size: 0.9rem; |
| } |
| |
| pre code { |
| background: none; |
| padding: 0; |
| color: var(--text); |
| } |
| |
| .api-endpoint { |
| background: rgba(99, 102, 241, 0.1); |
| border-left: 4px solid var(--fg-color); |
| padding: 1rem; |
| margin: 1rem 0; |
| border-radius: 0.5rem; |
| } |
| |
| .feature-list { |
| list-style: none; |
| padding: 0; |
| } |
| |
| .feature-list li { |
| padding: 0.5rem 0; |
| border-bottom: 1px solid var(--border); |
| } |
| |
| .feature-list li:before { |
| content: "→"; |
| color: var(--fg-color); |
| font-weight: bold; |
| margin-right: 0.5rem; |
| } |
| |
| .feature-list li:last-child { |
| border-bottom: none; |
| } |
| |
| @media (max-width: 768px) { |
| .container { |
| padding: 1rem; |
| } |
| |
| h1 { |
| font-size: 2rem; |
| } |
| |
| .section { |
| padding: 1.5rem; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <header> |
| <h1>Kokoro-FastAPI</h1> |
| <p class="subtitle">Dockerized FastAPI wrapper for Kokoro-82M text-to-speech model</p> |
| </header> |
| |
| <section class="section"> |
| <h2>📖 Overview</h2> |
| <p>This repository contains a simple Dockerfile for deploying the Kokoro-FastAPI text-to-speech service using the pre-built CPU image.</p> |
| </section> |
| |
| <section class="section"> |
| <h2>🚀 Quick Start</h2> |
| <h3>Build and run the container</h3> |
| <pre><code>docker build -t kokoro-tts . |
| docker run -p 8880:8880 kokoro-tts</code></pre> |
| </section> |
| |
| <section class="section"> |
| <h2>🔌 API Usage</h2> |
| <p>Once running, the API is available at <code>http://localhost:8880</code> with OpenAI-compatible endpoints:</p> |
| |
| <div class="api-endpoint"> |
| <h3>Python Example</h3> |
| <pre><code>from openai import OpenAI |
| |
| client = OpenAI( |
| base_url="http://localhost:8880/v1", |
| api_key="not-needed" |
| ) |
| |
| with client.audio.speech.with_streaming_response.create( |
| model="kokoro", |
| voice="af_bella", |
| input="Hello world!", |
| response_format="mp3" |
| ) as response: |
| response.stream_to_file("output.mp3")</code></pre> |
| </div> |
| </section> |
| |
| <section class="section"> |
| <h2>📚 Documentation</h2> |
| <p>For comprehensive documentation including:</p> |
| <ul class="feature-list"> |
| <li>All available features and endpoints</li> |
| <li>Voice combination options</li> |
| <li>GPU deployment</li> |
| <li>Configuration options</li> |
| <li>Troubleshooting</li> |
| </ul> |
| <p>Please refer to the main <code>README.md</code> in the repository.</p> |
| </section> |
| |
| <section class="section"> |
| <h2>🌐 Access Points</h2> |
| <div class="api-endpoint"> |
| <strong>API Base URL:</strong> <code>http://localhost:8880</code><br> |
| <strong>API Documentation:</strong> <code>http://localhost:8880/docs</code><br> |
| <strong>Web Interface:</strong> <code>http://localhost:8880/web</code> |
| </div> |
| </section> |
| </div> |
| </body> |
| </html> |
