Hugging Face's logo

Spaces:
Ins0mn1a
/
tts-v1
Paused

App Files Community
Ins0mn1a commited on
Commit
526c9f3
·
verified ·
1 Parent(s): 75267b6

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +213 -0
index.html ADDED
@@ -0,0 +1,213 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Kokoro-FastAPI Docker Deployment</title>
7
+ <link rel="icon" type="image/svg+xml" href="favicon.svg">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ :root {
13
+ --fg-color: #6366f1;
14
+ --bg-color: #0f172a;
15
+ --surface: #1e293b;
16
+ --border: rgba(99, 102, 241, 0.2);
17
+ --text: #f1f5f9;
18
+ --text-light: #94a3b8;
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ }
26
+
27
+ body {
28
+ font-family: 'Inter', sans-serif;
29
+ background: var(--bg-color);
30
+ color: var(--text);
31
+ line-height: 1.6;
32
+ min-height: 100vh;
33
+ }
34
+
35
+ .container {
36
+ max-width: 1200px;
37
+ margin: 0 auto;
38
+ padding: 2rem;
39
+ }
40
+
41
+ header {
42
+ text-align: center;
43
+ margin-bottom: 3rem;
44
+ }
45
+
46
+ h1 {
47
+ font-size: 2.5rem;
48
+ font-weight: 700;
49
+ margin-bottom: 1rem;
50
+ background: linear-gradient(135deg, var(--fg-color), #8b5cf6);
51
+ -webkit-background-clip: text;
52
+ -webkit-text-fill-color: transparent;
53
+ }
54
+
55
+ .subtitle {
56
+ color: var(--text-light);
57
+ font-size: 1.1rem;
58
+ }
59
+
60
+ .section {
61
+ background: var(--surface);
62
+ border: 1px solid var(--border);
63
+ border-radius: 0.75rem;
64
+ padding: 2rem;
65
+ margin-bottom: 2rem;
66
+ }
67
+
68
+ h2 {
69
+ font-size: 1.5rem;
70
+ margin-bottom: 1rem;
71
+ color: var(--fg-color);
72
+ }
73
+
74
+ h3 {
75
+ font-size: 1.2rem;
76
+ margin-bottom: 0.5rem;
77
+ color: var(--text);
78
+ }
79
+
80
+ pre {
81
+ background: rgba(0, 0, 0, 0.3);
82
+ border: 1px solid var(--border);
83
+ border-radius: 0.5rem;
84
+ padding: 1rem;
85
+ overflow-x: auto;
86
+ margin: 1rem 0;
87
+ }
88
+
89
+ code {
90
+ background: rgba(99, 102, 241, 0.1);
91
+ color: var(--fg-color);
92
+ padding: 0.2rem 0.4rem;
93
+ border-radius: 0.25rem;
94
+ font-family: 'Monaco', 'Menlo', monospace;
95
+ font-size: 0.9rem;
96
+ }
97
+
98
+ pre code {
99
+ background: none;
100
+ padding: 0;
101
+ color: var(--text);
102
+ }
103
+
104
+ .api-endpoint {
105
+ background: rgba(99, 102, 241, 0.1);
106
+ border-left: 4px solid var(--fg-color);
107
+ padding: 1rem;
108
+ margin: 1rem 0;
109
+ border-radius: 0.5rem;
110
+ }
111
+
112
+ .feature-list {
113
+ list-style: none;
114
+ padding: 0;
115
+ }
116
+
117
+ .feature-list li {
118
+ padding: 0.5rem 0;
119
+ border-bottom: 1px solid var(--border);
120
+ }
121
+
122
+ .feature-list li:before {
123
+ content: "→";
124
+ color: var(--fg-color);
125
+ font-weight: bold;
126
+ margin-right: 0.5rem;
127
+ }
128
+
129
+ .feature-list li:last-child {
130
+ border-bottom: none;
131
+ }
132
+
133
+ @media (max-width: 768px) {
134
+ .container {
135
+ padding: 1rem;
136
+ }
137
+
138
+ h1 {
139
+ font-size: 2rem;
140
+ }
141
+
142
+ .section {
143
+ padding: 1.5rem;
144
+ }
145
+ }
146
+ </style>
147
+ </head>
148
+ <body>
149
+ <div class="container">
150
+ <header>
151
+ <h1>Kokoro-FastAPI</h1>
152
+ <p class="subtitle">Dockerized FastAPI wrapper for Kokoro-82M text-to-speech model</p>
153
+ </header>
154
+
155
+ <section class="section">
156
+ <h2>📖 Overview</h2>
157
+ <p>This repository contains a simple Dockerfile for deploying the Kokoro-FastAPI text-to-speech service using the pre-built CPU image.</p>
158
+ </section>
159
+
160
+ <section class="section">
161
+ <h2>🚀 Quick Start</h2>
162
+ <h3>Build and run the container</h3>
163
+ <pre><code>docker build -t kokoro-tts .
164
+ docker run -p 8880:8880 kokoro-tts</code></pre>
165
+ </section>
166
+
167
+ <section class="section">
168
+ <h2>🔌 API Usage</h2>
169
+ <p>Once running, the API is available at <code>http://localhost:8880</code> with OpenAI-compatible endpoints:</p>
170
+
171
+ <div class="api-endpoint">
172
+ <h3>Python Example</h3>
173
+ <pre><code>from openai import OpenAI
174
+
175
+ client = OpenAI(
176
+ base_url="http://localhost:8880/v1",
177
+ api_key="not-needed"
178
+ )
179
+
180
+ with client.audio.speech.with_streaming_response.create(
181
+ model="kokoro",
182
+ voice="af_bella",
183
+ input="Hello world!",
184
+ response_format="mp3"
185
+ ) as response:
186
+ response.stream_to_file("output.mp3")</code></pre>
187
+ </div>
188
+ </section>
189
+
190
+ <section class="section">
191
+ <h2>📚 Documentation</h2>
192
+ <p>For comprehensive documentation including:</p>
193
+ <ul class="feature-list">
194
+ <li>All available features and endpoints</li>
195
+ <li>Voice combination options</li>
196
+ <li>GPU deployment</li>
197
+ <li>Configuration options</li>
198
+ <li>Troubleshooting</li>
199
+ </ul>
200
+ <p>Please refer to the main <code>README.md</code> in the repository.</p>
201
+ </section>
202
+
203
+ <section class="section">
204
+ <h2>🌐 Access Points</h2>
205
+ <div class="api-endpoint">
206
+ <strong>API Base URL:</strong> <code>http://localhost:8880</code><br>
207
+ <strong>API Documentation:</strong> <code>http://localhost:8880/docs</code><br>
208
+ <strong>Web Interface:</strong> <code>http://localhost:8880/web</code>
209
+ </div>
210
+ </section>
211
+ </div>
212
+ </body>
213
+ </html>