rename voices, implement better UI to search voices (#4)

* rename voices, implement better UI to search voices
* add output format param to UI, clarify when streaming is (not) available
* fixes #2 docker: ensure non-root user owns /app dir to preventing permission errors

Dockerfile

@@ -44,8 +44,8 @@ COPY --chown=pockettts:pockettts templates/ ./templates/
 COPY --chown=pockettts:pockettts voices/ ./voices/
 COPY --chown=pockettts:pockettts server.py ./
 
-# Create logs directory
-RUN mkdir -p /app/logs && chown pockettts:pockettts /app/logs
+# Create logs directory, and ensure app directory is owned by user
+RUN chown pockettts:pockettts /app && mkdir -p /app/logs && chown pockettts:pockettts /app/logs
 
 # Create HuggingFace cache directory (for volume mount)
 RUN mkdir -p /home/pockettts/.cache/huggingface && \

app/routes.py

@@ -75,7 +75,15 @@ def list_voices():
     return jsonify(
         {
             'object': 'list',
-            'data': [{'id': v['id'], 'name': v['name'], 'object': 'voice'} for v in voices],
+            'data': [
+                {
+                    'id': v['id'],
+                    'name': v['name'],
+                    'object': 'voice',
+                    'type': v.get('type', 'builtin'),
+                }
+                for v in voices
+            ],
         }
     )
 

app/services/tts.py

@@ -289,24 +289,37 @@ class TTSService:
         """
         voices = []
 
-        # Built-in voices
-        for voice in Config.BUILTIN_VOICES:
+        # Built-in voices (sorted alphabetically)
+        builtin_sorted = sorted(Config.BUILTIN_VOICES)
+        for voice in builtin_sorted:
             voices.append({'id': voice, 'name': voice.capitalize(), 'type': 'builtin'})
 
         # Custom voices from directory
+        custom_voices = []
         if self.voices_dir and os.path.isdir(self.voices_dir):
+            voice_dir = Path(self.voices_dir)
+
+            # Collect all valid files
+            voice_files = []
             for ext in Config.VOICE_EXTENSIONS:
-                pattern = f'*{ext}'
-                voice_dir = Path(self.voices_dir)
-                for voice_file in voice_dir.glob(pattern):
-                    voices.append(
-                        {
-                            'id': voice_file.name,
-                            'name': f'Custom: {voice_file.stem}',
-                            'type': 'custom',
-                        }
-                    )
+                voice_files.extend(voice_dir.glob(f'*{ext}'))
+
+            # Sort alphabetically by filename
+            voice_files.sort(key=lambda f: f.name.lower())
+
+            for voice_file in voice_files:
+                # Format name: "bobby_mcfern" -> "Bobby Mcfern"
+                clean_name = voice_file.stem.replace('_', ' ').replace('-', ' ').title()
+
+                custom_voices.append(
+                    {
+                        'id': voice_file.name,
+                        'name': clean_name,
+                        'type': 'custom',
+                    }
+                )
 
+        voices.extend(custom_voices)
         return voices
 
 

pyproject.toml

@@ -4,7 +4,7 @@ license = {text = "MIT"}
 name = "pocket-tts-openai-server"
 readme = "README.md"
 requires-python = ">=3.10"
-version = "2.1.0"
+version = "2.2.0"
 
 dependencies = [
   "flask>=3.0.0",

static/css/style.css

@@ -1,419 +1,639 @@
 :root {
-  --bg-color: #0d1117;
-  --card-bg: #161b22;
-  --accent-color: #58a6ff;
-  --accent-hover: #1f6feb;
-  --text-primary: #c9d1d9;
-  --text-secondary: #8b949e;
-  --border-color: #30363d;
-  --input-bg: #0d1117;
-  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-  --glass-bg: rgba(22, 27, 34, 0.7);
-  --glass-border: rgba(48, 54, 61, 0.5);
+	--bg-color: #0d1117;
+	--card-bg: #161b22;
+	--accent-color: #58a6ff;
+	--accent-hover: #1f6feb;
+	--text-primary: #c9d1d9;
+	--text-secondary: #8b949e;
+	--border-color: #30363d;
+	--input-bg: #0d1117;
+	--font-family:
+		'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+		sans-serif;
+	--glass-bg: rgba(22, 27, 34, 0.7);
+	--glass-border: rgba(48, 54, 61, 0.5);
 }
 
 * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
 }
 
 body {
-  font-family: var(--font-family);
-  background-color: var(--bg-color);
-  color: var(--text-primary);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  background-image: radial-gradient(circle at 50% 0%, #1f2530 0%, #0d1117 100%);
+	font-family: var(--font-family);
+	background-color: var(--bg-color);
+	color: var(--text-primary);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 100vh;
+	background-image: radial-gradient(circle at 50% 0%, #1f2530 0%, #0d1117 100%);
 }
 
 .container {
-  width: 100%;
-  max-width: 800px;
-  padding: 2rem;
-  background: var(--glass-bg);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--glass-border);
-  border-radius: 16px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  animation: fadeIn 0.5s ease-out;
+	width: 100%;
+	max-width: 800px;
+	padding: 2rem;
+	background: var(--glass-bg);
+	backdrop-filter: blur(12px);
+	border: 1px solid var(--glass-border);
+	border-radius: 16px;
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+	animation: fadeIn 0.5s ease-out;
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
+	from {
+		opacity: 0;
+		transform: translateY(20px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
 }
 
 header {
-  text-align: center;
-  margin-bottom: 2rem;
+	text-align: center;
+	margin-bottom: 2rem;
 }
 
 .logo {
-  max-width: 120px;
-  margin-bottom: 1rem;
-  filter: drop-shadow(0 0 10px rgba(88, 166, 255, 0.3));
+	max-width: 120px;
+	margin-bottom: 1rem;
+	filter: drop-shadow(0 0 10px rgba(88, 166, 255, 0.3));
 }
 
 h1 {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin-bottom: 0.5rem;
-  background: linear-gradient(90deg, #58a6ff, #a371f7);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+	font-size: 2rem;
+	font-weight: 700;
+	color: var(--text-primary);
+	margin-bottom: 0.5rem;
+	background: linear-gradient(90deg, #58a6ff, #a371f7);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
 }
 
 .subtitle {
-  color: var(--text-secondary);
-  font-size: 0.95rem;
+	color: var(--text-secondary);
+	font-size: 0.95rem;
 }
 
 .control-group {
-  margin-bottom: 1.5rem;
+	margin-bottom: 1.5rem;
+	position: relative;
 }
 
 label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  font-size: 0.9rem;
+	display: block;
+	margin-bottom: 0.5rem;
+	font-weight: 500;
+	color: var(--text-secondary);
+	font-size: 0.9rem;
 }
 
-input[type="text"],
+input[type='text'],
 textarea,
 select {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  background-color: var(--input-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  color: var(--text-primary);
-  font-family: inherit;
-  font-size: 1rem;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-input[type="file"] {
-  width: 100%;
-  padding: 0.5rem;
-  background-color: var(--input-bg);
-  border: 1px dashed var(--border-color);
-  border-radius: 8px;
-  color: var(--text-secondary);
-  cursor: pointer;
+	width: 100%;
+	padding: 0.75rem 1rem;
+	background-color: var(--input-bg);
+	border: 1px solid var(--border-color);
+	border-radius: 8px;
+	color: var(--text-primary);
+	font-family: inherit;
+	font-size: 1rem;
+	transition:
+		border-color 0.2s,
+		box-shadow 0.2s;
+}
+
+input[type='file'] {
+	width: 100%;
+	padding: 0.5rem;
+	background-color: var(--input-bg);
+	border: 1px dashed var(--border-color);
+	border-radius: 8px;
+	color: var(--text-secondary);
+	cursor: pointer;
 }
 
 input:focus,
 textarea:focus,
 select:focus {
-  outline: none;
-  border-color: var(--accent-color);
-  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
+	outline: none;
+	border-color: var(--accent-color);
+	box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
 }
 
 textarea {
-  min-height: 120px;
-  resize: vertical;
+	min-height: 120px;
+	resize: vertical;
+}
+
+.input-with-action {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.input-with-action input[type='text'] {
+	width: 100%;
+	padding-right: 2.5rem;
+}
+
+.clear-btn {
+	position: absolute;
+	right: 0.5rem;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 1.8rem;
+	height: 1.8rem;
+	padding: 0;
+	background: transparent;
+	color: var(--text-secondary);
+	border: none;
+	border-radius: 50%;
+	font-size: 0.85rem;
+	font-weight: 600;
+	line-height: 1;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition:
+		background-color 0.2s,
+		color 0.2s;
+}
+
+.clear-btn:hover {
+	color: var(--text-primary);
+	background-color: rgba(255, 255, 255, 0.1);
+}
+
+.clear-btn:disabled {
+	cursor: default;
+	opacity: 0;
+	pointer-events: none;
+}
+
+.voice-list {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 100%;
+	z-index: 100;
+	list-style: none;
+	margin-top: 4px;
+	padding: 0;
+	background: var(--card-bg);
+	border: 1px solid var(--border-color);
+	border-radius: 8px;
+	max-height: 250px;
+	overflow-y: auto;
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
+	display: none; /* Changed from just being in flow */
+}
+
+.voice-list.show {
+	display: block;
+}
+
+.voice-list li {
+	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+.voice-list li:last-child {
+	border-bottom: none;
+}
+
+.voice-list-item {
+	width: 100%;
+	text-align: left;
+	background: transparent;
+	border: none;
+	border-radius: 0;
+	color: var(--text-primary);
+	padding: 0.75rem 1rem;
+	font-size: 0.95rem;
+	cursor: pointer;
+	transition: background-color 0.1s;
+	display: grid;
+	grid-template-columns: 1fr auto;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.voice-list-item .voice-info {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	overflow: hidden;
+}
+
+.voice-list-item .voice-name {
+	font-weight: 500;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.voice-list-item .voice-sub {
+	font-size: 0.75rem;
+	color: var(--text-secondary);
+	font-family: 'SF Mono', 'Consolas', monospace;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	opacity: 0.7;
+}
+
+.voice-list-item span.voice-badge {
+	font-size: 0.7rem;
+	font-weight: 600;
+	padding: 2px 8px;
+	border-radius: 12px;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	white-space: nowrap;
+}
+
+.voice-list-item span.voice-badge.badge-builtin {
+	color: var(--text-secondary);
+	background: rgba(255, 255, 255, 0.1);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.voice-list-item span.voice-badge.badge-custom {
+	color: #7ee787; /* Greenish for custom */
+	background: rgba(46, 160, 67, 0.15);
+	border: 1px solid rgba(46, 160, 67, 0.2);
+}
+
+.voice-list-item:hover,
+.voice-list-item:focus {
+	outline: none;
+	background: rgba(88, 166, 255, 0.15);
+	color: var(--accent-color);
+}
+
+.voice-list-empty {
+	color: var(--text-secondary);
+	padding: 1rem;
+	text-align: center;
+	font-size: 0.9rem;
 }
 
 .btn-primary {
-  display: block;
-  width: 100%;
-  padding: 1rem;
-  border: none;
-  border-radius: 8px;
-  background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
-  color: white;
-  font-weight: 600;
-  font-size: 1.1rem;
-  cursor: pointer;
-  transition: transform 0.1s, opacity 0.2s;
-  box-shadow: 0 4px 12px rgba(31, 111, 235, 0.3);
+	display: block;
+	width: 100%;
+	padding: 1rem;
+	border: none;
+	border-radius: 8px;
+	background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
+	color: white;
+	font-weight: 600;
+	font-size: 1.1rem;
+	cursor: pointer;
+	transition:
+		transform 0.1s,
+		opacity 0.2s;
+	box-shadow: 0 4px 12px rgba(31, 111, 235, 0.3);
 }
 
 .btn-primary:hover {
-  opacity: 0.9;
+	opacity: 0.9;
 }
 
 .btn-primary:active {
-  transform: scale(0.98);
+	transform: scale(0.98);
 }
 
 .btn-primary:disabled {
-  background: var(--border-color);
-  cursor: not-allowed;
-  opacity: 0.7;
-  box-shadow: none;
+	background: var(--border-color);
+	cursor: not-allowed;
+	opacity: 0.7;
+	box-shadow: none;
 }
 
 .output-section {
-  margin-top: 2rem;
-  padding-top: 2rem;
-  border-top: 1px solid var(--border-color);
-  text-align: center;
-  display: none; /* Hidden by default */
+	margin-top: 2rem;
+	padding-top: 2rem;
+	border-top: 1px solid var(--border-color);
+	text-align: center;
+	display: none; /* Hidden by default */
 }
 
 .output-section.active {
-  display: block;
-  animation: slideDown 0.3s ease-out;
+	display: block;
+	animation: slideDown 0.3s ease-out;
 }
 
 @keyframes slideDown {
-  from { opacity: 0; transform: translateY(-10px); }
-  to { opacity: 1; transform: translateY(0); }
+	from {
+		opacity: 0;
+		transform: translateY(-10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
 }
 
 audio {
-  width: 100%;
-  margin-bottom: 1rem;
-  border-radius: 8px;
+	width: 100%;
+	margin-bottom: 1rem;
+	border-radius: 8px;
 }
 
 .download-link {
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  color: var(--accent-color);
-  text-decoration: none;
-  border: 1px solid var(--accent-color);
-  border-radius: 6px;
-  font-size: 0.9rem;
-  transition: all 0.2s;
+	display: inline-block;
+	padding: 0.5rem 1rem;
+	color: var(--accent-color);
+	text-decoration: none;
+	border: 1px solid var(--accent-color);
+	border-radius: 6px;
+	font-size: 0.9rem;
+	transition: all 0.2s;
 }
 
 .download-link:hover {
-  background: rgba(88, 166, 255, 0.1);
+	background: rgba(88, 166, 255, 0.1);
 }
 
 /* Spinner */
 .spinner {
-  display: inline-block;
-  width: 1.5rem;
-  height: 1.5rem;
-  border: 3px solid rgba(255,255,255,0.3);
-  border-radius: 50%;
-  border-top-color: #fff;
-  animation: spin 1s ease-in-out infinite;
-  margin-left: 0.5rem;
-  vertical-align: middle;
-  display: none;
+	display: inline-block;
+	width: 1.5rem;
+	height: 1.5rem;
+	border: 3px solid rgba(255, 255, 255, 0.3);
+	border-radius: 50%;
+	border-top-color: #fff;
+	animation: spin 1s ease-in-out infinite;
+	margin-left: 0.5rem;
+	vertical-align: middle;
+	display: none;
 }
 
 .btn-primary.loading .spinner {
-  display: inline-block;
+	display: inline-block;
 }
 
 .btn-primary.loading span {
-  display: none;
+	display: none;
 }
 
 @keyframes spin {
-  to { transform: rotate(360deg); }
+	to {
+		transform: rotate(360deg);
+	}
 }
 
 .hidden {
-    display: none;
+	display: none;
 }
 
 /* API Documentation Styles */
 .api-docs {
-    margin-top: 3rem;
-    padding-top: 2rem;
-    border-top: 1px solid var(--border-color);
+	margin-top: 3rem;
+	padding-top: 2rem;
+	border-top: 1px solid var(--border-color);
 }
 
 .api-docs h2 {
-    font-size: 1.5rem;
-    margin-bottom: 0.5rem;
-    color: var(--text-primary);
+	font-size: 1.5rem;
+	margin-bottom: 0.5rem;
+	color: var(--text-primary);
 }
 
 .api-intro {
-    color: var(--text-secondary);
-    margin-bottom: 2rem;
-    font-size: 0.95rem;
+	color: var(--text-secondary);
+	margin-bottom: 2rem;
+	font-size: 0.95rem;
 }
 
 .endpoint {
-    background: var(--input-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 12px;
-    padding: 1.5rem;
-    margin-bottom: 1.5rem;
+	background: var(--input-bg);
+	border: 1px solid var(--border-color);
+	border-radius: 12px;
+	padding: 1.5rem;
+	margin-bottom: 1.5rem;
 }
 
 .endpoint-header {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	margin-bottom: 1rem;
 }
 
 .method {
-    padding: 0.25rem 0.75rem;
-    border-radius: 4px;
-    font-weight: 600;
-    font-size: 0.8rem;
-    text-transform: uppercase;
+	padding: 0.25rem 0.75rem;
+	border-radius: 4px;
+	font-weight: 600;
+	font-size: 0.8rem;
+	text-transform: uppercase;
 }
 
 .method.get {
-    background: rgba(46, 160, 67, 0.2);
-    color: #3fb950;
-    border: 1px solid rgba(46, 160, 67, 0.4);
+	background: rgba(46, 160, 67, 0.2);
+	color: #3fb950;
+	border: 1px solid rgba(46, 160, 67, 0.4);
 }
 
 .method.post {
-    background: rgba(88, 166, 255, 0.2);
-    color: #58a6ff;
-    border: 1px solid rgba(88, 166, 255, 0.4);
+	background: rgba(88, 166, 255, 0.2);
+	color: #58a6ff;
+	border: 1px solid rgba(88, 166, 255, 0.4);
 }
 
 .path {
-    font-family: 'SF Mono', 'Consolas', monospace;
-    font-size: 1rem;
-    color: var(--text-primary);
-    background: none;
-    padding: 0;
+	font-family: 'SF Mono', 'Consolas', monospace;
+	font-size: 1rem;
+	color: var(--text-primary);
+	background: none;
+	padding: 0;
 }
 
 .endpoint-desc {
-    color: var(--text-secondary);
-    margin-bottom: 1rem;
-    font-size: 0.9rem;
+	color: var(--text-secondary);
+	margin-bottom: 1rem;
+	font-size: 0.9rem;
 }
 
 .params-section,
 .example-section,
 .response-example,
 .error-section {
-    margin-top: 1rem;
+	margin-top: 1rem;
 }
 
 .params-section strong,
 .example-section strong,
 .response-example strong,
 .error-section strong {
-    display: block;
-    color: var(--text-secondary);
-    font-size: 0.85rem;
-    margin-bottom: 0.5rem;
+	display: block;
+	color: var(--text-secondary);
+	font-size: 0.85rem;
+	margin-bottom: 0.5rem;
 }
 
 .params-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 0.85rem;
-    margin-top: 0.5rem;
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 0.85rem;
+	margin-top: 0.5rem;
 }
 
 .params-table th,
 .params-table td {
-    padding: 0.6rem 0.75rem;
-    text-align: left;
-    border-bottom: 1px solid var(--border-color);
+	padding: 0.6rem 0.75rem;
+	text-align: left;
+	border-bottom: 1px solid var(--border-color);
 }
 
 .params-table th {
-    color: var(--text-secondary);
-    font-weight: 500;
-    background: rgba(0, 0, 0, 0.2);
+	color: var(--text-secondary);
+	font-weight: 500;
+	background: rgba(0, 0, 0, 0.2);
 }
 
 .params-table td {
-    color: var(--text-primary);
+	color: var(--text-primary);
 }
 
 .params-table code {
-    background: rgba(88, 166, 255, 0.1);
-    color: var(--accent-color);
-    padding: 0.15rem 0.4rem;
-    border-radius: 4px;
-    font-size: 0.85em;
+	background: rgba(88, 166, 255, 0.1);
+	color: var(--accent-color);
+	padding: 0.15rem 0.4rem;
+	border-radius: 4px;
+	font-size: 0.85em;
 }
 
 .api-docs pre {
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 1rem;
-    overflow-x: auto;
-    font-family: 'SF Mono', 'Consolas', monospace;
-    font-size: 0.85rem;
-    color: var(--text-primary);
-    line-height: 1.5;
+	background: rgba(0, 0, 0, 0.3);
+	border: 1px solid var(--border-color);
+	border-radius: 8px;
+	padding: 1rem;
+	overflow-x: auto;
+	font-family: 'SF Mono', 'Consolas', monospace;
+	font-size: 0.85rem;
+	color: var(--text-primary);
+	line-height: 1.5;
 }
 
 .voices-reference {
-    margin-top: 2rem;
-    padding: 1.5rem;
-    background: var(--input-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 12px;
+	margin-top: 2rem;
+	padding: 1.5rem;
+	background: var(--input-bg);
+	border: 1px solid var(--border-color);
+	border-radius: 12px;
 }
 
 .voices-reference h3 {
-    font-size: 1.1rem;
-    margin-bottom: 0.5rem;
-    color: var(--text-primary);
+	font-size: 1.1rem;
+	margin-bottom: 0.5rem;
+	color: var(--text-primary);
 }
 
 .voices-reference p {
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-    margin-bottom: 1rem;
+	color: var(--text-secondary);
+	font-size: 0.9rem;
+	margin-bottom: 1rem;
 }
 
 .voice-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+	margin-bottom: 1rem;
 }
 
 .voice-chip {
-    background: rgba(88, 166, 255, 0.15);
-    color: var(--accent-color);
-    padding: 0.4rem 0.8rem;
-    border-radius: 20px;
-    font-size: 0.85rem;
-    font-family: 'SF Mono', 'Consolas', monospace;
-    border: 1px solid rgba(88, 166, 255, 0.3);
+	background: rgba(88, 166, 255, 0.15);
+	color: var(--accent-color);
+	padding: 0.4rem 0.8rem;
+	border-radius: 20px;
+	font-size: 0.85rem;
+	font-family: 'SF Mono', 'Consolas', monospace;
+	border: 1px solid rgba(88, 166, 255, 0.3);
 }
 
 .voice-note {
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    margin-top: 1rem;
-    margin-bottom: 0;
+	font-size: 0.85rem;
+	color: var(--text-secondary);
+	margin-top: 1rem;
+	margin-bottom: 0;
 }
 
 .voice-note a {
-    color: var(--accent-color);
-    text-decoration: none;
+	color: var(--accent-color);
+	text-decoration: none;
 }
 
 .voice-note a:hover {
-    text-decoration: underline;
+	text-decoration: underline;
+}
+
+/* ID Helper */
+.voice-id-helper {
+	margin-top: 0.5rem;
+	font-size: 0.8rem;
+	color: var(--text-secondary);
+	font-family: 'SF Mono', 'Consolas', monospace;
+	display: flex;
+	align-items: center;
+	padding-left: 2px;
+	animation: fadeIn 0.3s ease-out;
+}
+
+.voice-id-helper span {
+	color: var(--accent-color);
+	margin-left: 0.5rem;
+	background: rgba(88, 166, 255, 0.1);
+	padding: 2px 6px;
+	border-radius: 4px;
+	user-select: all;
+	cursor: text;
+}
+
+.copy-btn {
+	background: transparent;
+	border: none;
+	color: var(--text-secondary);
+	cursor: pointer;
+	padding: 4px;
+	margin-left: 0.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 4px;
+	transition:
+		background-color 0.2s,
+		color 0.2s;
+}
+
+.copy-btn:hover {
+	background: rgba(255, 255, 255, 0.1);
+	color: var(--text-primary);
+}
+
+.copy-btn:active {
+	transform: translateY(1px);
 }
 
 /* Responsive adjustments */
 @media (max-width: 600px) {
-    .params-table {
-        font-size: 0.75rem;
-    }
-
-    .params-table th,
-    .params-table td {
-        padding: 0.4rem 0.5rem;
-    }
-
-    .endpoint-header {
-        flex-wrap: wrap;
-    }
+	.params-table {
+		font-size: 0.75rem;
+	}
+
+	.params-table th,
+	.params-table td {
+		padding: 0.4rem 0.5rem;
+	}
+
+	.endpoint-header {
+		flex-wrap: wrap;
+	}
 }

static/js/app.js

@@ -1,5 +1,7 @@
 document.addEventListener('DOMContentLoaded', async () => {
-	const voiceSelect = document.getElementById('voice-select');
+	const voiceInput = document.getElementById('voice-input');
+	const voiceList = document.getElementById('voice-list');
+	const voiceClearBtn = document.getElementById('voice-clear-btn');
 	const customVoiceGroup = document.getElementById('custom-voice-group');
 	const generateBtn = document.getElementById('generate-btn');
 	const textInput = document.getElementById('text-input');
@@ -8,34 +10,78 @@ document.addEventListener('DOMContentLoaded', async () => {
 	const audioPlayer = document.getElementById('audio-player');
 	const downloadBtn = document.getElementById('download-btn');
 	const streamToggle = document.getElementById('stream-toggle');
+	const formatSelect = document.getElementById('format-select');
+
+	let availableVoices = [];
+	let selectedVoiceId = null; // The actual value used for generation
+
+	// Format & Streaming Logic
+	function updateStreamingAvailability() {
+		const fmt = formatSelect.value;
+		// Server only supports streaming for PCM and WAV currently
+		const supportsStreaming = ['wav', 'pcm'].includes(fmt);
+		const infoLabel = document.getElementById('format-info');
+
+		if (supportsStreaming) {
+			streamToggle.disabled = false;
+			streamToggle.parentElement.title = '';
+
+			if (fmt === 'pcm') {
+				infoLabel.textContent =
+					"Streaming is available for Raw PCM. Note: This format creates a specialized raw stream that will not play in the browser's audio player.";
+			} else {
+				// WAV
+				infoLabel.textContent =
+					'Streaming is available for WAV. The server streams audio chunks for lower latency.';
+			}
+		} else {
+			streamToggle.disabled = true;
+			streamToggle.checked = false;
+			streamToggle.parentElement.title =
+				'Streaming is only available for WAV and PCM formats';
+
+			if (fmt === 'mp3') {
+				infoLabel.textContent =
+					'Streaming is not available for MP3 (Server limitation). A full file will be generated and played.';
+			} else {
+				infoLabel.textContent = 'Streaming is not available for this format.';
+			}
+		}
+	}
+
+	formatSelect.addEventListener('change', updateStreamingAvailability);
+	// Initialize state
+	updateStreamingAvailability();
 
 	// 1. Load Voices
 	async function loadVoices() {
 		try {
 			const res = await fetch('/v1/voices');
 			const data = await res.json();
-
-			// Clear existing
-			voiceSelect.innerHTML = '';
+			availableVoices = [];
 
 			if (data.data) {
-				// Add voices in order (built-in first, then custom)
 				data.data.forEach((voice) => {
-					const opt = document.createElement('option');
-					opt.value = voice.id;
-					opt.textContent = voice.name || voice.id;
-					voiceSelect.appendChild(opt);
+					availableVoices.push({
+						id: voice.id,
+						label: voice.name || voice.id,
+						display: voice.name || voice.id, // For search
+						type: voice.type || 'builtin',
+					});
 				});
 
-				// Add custom upload option at the end
-				const customOpt = document.createElement('option');
-				customOpt.value = 'custom';
-				customOpt.textContent = 'Custom (Upload .wav, .mp3, .flac)...';
-				voiceSelect.appendChild(customOpt);
+				// Custom option
+				availableVoices.push({
+					id: 'custom',
+					label: 'Custom Voice',
+					display: 'Custom (Upload .wav, .mp3, .flac)...',
+					type: 'manual',
+				});
 
-				// Select first (alba) by default
-				if (voiceSelect.options.length > 0) {
-					voiceSelect.selectedIndex = 0;
+				// Default selection: Prefer first non-custom voice
+				const defaultVoice = availableVoices.find((v) => v.id !== 'custom');
+				if (defaultVoice) {
+					selectVoice(defaultVoice.id, false);
 				}
 			}
 		} catch (e) {
@@ -43,43 +89,351 @@ document.addEventListener('DOMContentLoaded', async () => {
 		}
 	}
 
-	await loadVoices();
+	// 2. Core Search & Selection Logic
 
-	// 2. Handle Voice Selection Change (hide custom option in Docker mode)
-	const isDocker = window.POCKET_TTS_CONFIG?.isDocker || false;
+	function selectVoice(id, closeList = true) {
+		const voice = availableVoices.find((v) => v.id === id);
+		if (!voice) return;
 
-	// Remove the "Custom" option when running in Docker (paths won't work)
-	if (isDocker) {
-		const customOption = voiceSelect.querySelector('option[value="custom"]');
-		if (customOption) customOption.remove();
-	}
+		selectedVoiceId = voice.id;
+		voiceInput.value = voice.label; // Display nice name
 
-	voiceSelect.addEventListener('change', (e) => {
-		if (e.target.value === 'custom' && !isDocker) {
-			// Setup for Custom Path (only for native/exe mode)
+		// Update ID Display helper
+		const idDisplay = document.getElementById('voice-id-display');
+		if (idDisplay) {
+			if (id !== 'custom') {
+				const idSpan = idDisplay.querySelector('.voice-id-text');
+				if (idSpan) {
+					// Clean extension from ID for cleaner display/copying
+					const cleanId = voice.id.replace(
+						/\.(wav|mp3|flac|safetensors)$/i,
+						'',
+					);
+					idSpan.textContent = cleanId;
+				}
+				idDisplay.classList.remove('hidden');
+			} else {
+				idDisplay.classList.add('hidden');
+			}
+		}
+
+		// Handle UI state
+		voiceClearBtn.disabled = false;
+		if (closeList) hideVoiceList();
+
+		// Handle Custom
+		if (id === 'custom') {
+			const isDocker = window.POCKET_TTS_CONFIG?.isDocker || false;
+			if (isDocker) {
+				alert('Custom voices are not available in Docker mode.');
+				// Fallback to the first non-custom voice if available
+				const fallbackVoice = availableVoices.find((v) => v.id !== 'custom');
+				if (fallbackVoice) {
+					selectVoice(fallbackVoice.id || '');
+				} else {
+					// No valid fallback; clear selection and hide custom UI
+					selectedVoiceId = null;
+					voiceInput.value = '';
+					voiceClearBtn.disabled = true;
+					customVoiceGroup.classList.add('hidden');
+				}
+				return;
+			}
+			customVoiceGroup.classList.remove('hidden');
 			document.querySelector('#custom-voice-group label').textContent =
 				'Absolute Path to Audio File:';
 			voiceFile.type = 'text';
 			voiceFile.placeholder = 'C:\\path\\to\\voice.wav';
-			customVoiceGroup.classList.remove('hidden');
 		} else {
 			customVoiceGroup.classList.add('hidden');
 		}
+	}
+
+	function renderVoiceList(filterText = '') {
+		const normalizedFilter = filterText.trim().toLowerCase();
+		const fragment = document.createDocumentFragment();
+
+		let matchCount = 0;
+		let firstMatchId = null;
+
+		const isDocker = window.POCKET_TTS_CONFIG?.isDocker || false;
+		const filtered = availableVoices.filter((v) => {
+			if (v.id === 'custom' && isDocker) return false;
+			if (!normalizedFilter) return true;
+			return (
+				v.id.toLowerCase().includes(normalizedFilter) ||
+				v.label.toLowerCase().includes(normalizedFilter) ||
+				(v.display && v.display.toLowerCase().includes(normalizedFilter))
+			);
+		});
+
+		voiceList.innerHTML = '';
+
+		if (filtered.length === 0) {
+			const emptyItem = document.createElement('li');
+			emptyItem.className = 'voice-list-empty';
+			emptyItem.textContent = 'No matching voices';
+			voiceList.appendChild(emptyItem);
+		} else {
+			filtered.forEach((voice) => {
+				matchCount++;
+				if (matchCount === 1) firstMatchId = voice.id;
+
+				const item = document.createElement('li');
+				const btn = document.createElement('button');
+				btn.type = 'button';
+				btn.className = 'voice-list-item';
+				btn.dataset.voiceId = voice.id;
+
+				// Better content structure
+				const infoDiv = document.createElement('div');
+				infoDiv.className = 'voice-info';
+
+				const nameSpan = document.createElement('span');
+				nameSpan.className = 'voice-name';
+				nameSpan.textContent = voice.display || voice.label;
+
+				const subSpan = document.createElement('span');
+				subSpan.className = 'voice-sub';
+				if (voice.id === 'custom') {
+					subSpan.textContent = ''; // No ID for the upload button itself
+				} else {
+					subSpan.textContent = voice.id;
+				}
+
+				infoDiv.appendChild(nameSpan);
+				if (subSpan.textContent) infoDiv.appendChild(subSpan);
+
+				const badgeSpan = document.createElement('span');
+				badgeSpan.className = 'voice-badge';
+
+				// Format badge text: "builtin" -> "Default", "custom" -> "Custom"
+				let badgeText = 'Default';
+				if (voice.type === 'custom') badgeText = 'Custom';
+				if (voice.type === 'manual') badgeText = 'Upload';
+
+				badgeSpan.textContent = badgeText;
+
+				// Add specific class for styling if needed
+				badgeSpan.classList.add(
+					voice.type === 'builtin' ? 'badge-builtin' : 'badge-custom',
+				);
+
+				btn.appendChild(infoDiv);
+				btn.appendChild(badgeSpan);
+
+				item.appendChild(btn);
+				fragment.appendChild(item);
+			});
+			voiceList.appendChild(fragment);
+		}
+
+		return { count: matchCount, firstId: firstMatchId };
+	}
+
+	function showVoiceList() {
+		voiceList.classList.add('show');
+		renderVoiceList(
+			voiceInput.value === getSelectedVoiceLabel() ? '' : voiceInput.value,
+		);
+	}
+
+	function hideVoiceList() {
+		// Small delay to allow click events to propagate
+		setTimeout(() => {
+			voiceList.classList.remove('show');
+		}, 150);
+	}
+
+	function getSelectedVoiceLabel() {
+		const v = availableVoices.find((v) => v.id === selectedVoiceId);
+		return v ? v.label : '';
+	}
+
+	// Smart Input Handling
+	voiceInput.addEventListener('focus', () => {
+		// On focus, if the input value matches the current selection, wipe it to allow fresh search?
+		// Or keep it? Standard combobox keeps it but selects text.
+		// Let's select text so user can type over immediately.
+		voiceInput.select();
+		showVoiceList();
+	});
+
+	voiceInput.addEventListener('input', () => {
+		voiceClearBtn.disabled = voiceInput.value.length === 0;
+		// If user types, we conceptually deselect until they pick or we auto-match
+		// But strictly clearing selectedVoiceId might be annoying if they just made a typo.
+		// Let's keep selectedVoiceId as fallback, but filter.
+		renderVoiceList(voiceInput.value);
+		voiceList.classList.add('show');
+	});
+
+	voiceInput.addEventListener('keydown', (e) => {
+		if (e.key === 'Escape') {
+			voiceInput.value = getSelectedVoiceLabel();
+			hideVoiceList();
+			voiceInput.blur();
+		} else if (e.key === 'Enter') {
+			e.preventDefault();
+			// Auto-select if 1 result
+			const { count, firstId } = renderVoiceList(voiceInput.value);
+			if (count === 1 && firstId) {
+				selectVoice(firstId);
+				voiceInput.blur();
+			} else if (count > 0 && firstId) {
+				// If multiple, maybe select first? Or do nothing?
+				// User asked: "If I filter so much that there is just 1 result, I still have to select it"
+				// implies standard Enter behavior triggers selection of top result usually.
+				selectVoice(firstId);
+				voiceInput.blur();
+			}
+		}
+	});
+
+	// Handle Blur: Auto-select if logic dictates
+	voiceInput.addEventListener('blur', () => {
+		// Delay logic slightly to allow Click to happen first
+		setTimeout(() => {
+			if (!document.activeElement.classList.contains('voice-list-item')) {
+				// Validate: Is text a partial match for exactly one voice?
+				const val = voiceInput.value.trim();
+				if (!val) {
+					// Cleared -> maybe clear selection? Or revert?
+					// Let's revert to last selected for safety unless user explicitly cleared?
+					// If they cleared, they probably want to clear.
+					// But we need a voice to generate?
+					// Let's revert if empty.
+					voiceInput.value = getSelectedVoiceLabel();
+					hideVoiceList();
+					return;
+				}
+
+				// If the text matches the currently selected label, do nothing
+				if (val === getSelectedVoiceLabel()) {
+					hideVoiceList();
+					return;
+				}
+
+				// Try to find a match
+				// 1. Exact Name Match
+				const exact = availableVoices.find(
+					(v) =>
+						v.label.toLowerCase() === val.toLowerCase() ||
+						v.id.toLowerCase() === val.toLowerCase(),
+				);
+				if (exact) {
+					selectVoice(exact.id);
+				} else {
+					// 2. Single Filter Match
+					const { count, firstId } = renderVoiceList(val);
+					if (count === 1) {
+						selectVoice(firstId);
+					} else {
+						// 3. No clean match (0 or >1). Revert to last valid.
+						// User said "get an error because the value from the search field is taken"
+						// So passing the raw text is bad. We must force valid selection.
+						voiceInput.value = getSelectedVoiceLabel();
+					}
+				}
+				hideVoiceList();
+			}
+		}, 200);
 	});
 
+	// List Click Handling
+	voiceList.addEventListener('mousedown', (e) => {
+		// Use mousedown to trigger before blur
+		const btn = e.target.closest('.voice-list-item');
+		if (btn) {
+			const id = btn.dataset.voiceId;
+			selectVoice(id);
+		}
+	});
+
+	voiceClearBtn.addEventListener('mousedown', (e) => {
+		e.preventDefault(); // Prevent blur on input
+		selectedVoiceId = null;
+		voiceInput.value = '';
+		voiceInput.focus();
+		renderVoiceList('');
+		showVoiceList();
+		voiceClearBtn.disabled = true;
+
+		const idDisplay = document.getElementById('voice-id-display');
+		if (idDisplay) idDisplay.classList.add('hidden');
+	});
+
+	// Copy Button Logic
+	const copyBtn = document.getElementById('voice-id-copy-btn');
+	if (copyBtn) {
+		copyBtn.addEventListener('click', async () => {
+			const idText = document.querySelector('.voice-id-text')?.textContent;
+			if (idText) {
+				try {
+					await navigator.clipboard.writeText(idText);
+					const originalHTML = copyBtn.innerHTML;
+					// Show checkmark
+					copyBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#2ea043" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+					copyBtn.classList.add('copied');
+
+					setTimeout(() => {
+						copyBtn.innerHTML = originalHTML;
+						copyBtn.classList.remove('copied');
+					}, 1500);
+				} catch (err) {
+					console.error('Failed to copy: ', err);
+					// Fallback for non-secure contexts (optional but good for localhost sometimes)
+					const input = document.createElement('textarea');
+					input.value = idText;
+					document.body.appendChild(input);
+					input.select();
+					document.execCommand('copy');
+					document.body.removeChild(input);
+				}
+			}
+		});
+	}
+
 	// 3. Generate Logic
 	generateBtn.addEventListener('click', async () => {
 		const text = textInput.value.trim();
 		if (!text) return alert('Please enter text');
 
-		const stream = streamToggle.checked;
+		// Use the ID, not the Input Value
+		let voice = selectedVoiceId;
+
+		// Fallback: If for some reason ID is null but text exists (shouldn't happen with our blur logic), try to resolve
+		if (!voice) {
+			// Try to find by name from input
+			const val = voiceInput.value.trim();
+			const isDocker = window.POCKET_TTS_CONFIG?.isDocker || false;
+			const match = availableVoices.find(
+				(v) =>
+					(v.label === val || v.id === val) &&
+					// In Docker mode, do not allow resolving the special "custom" voice
+					!(isDocker && v.id === 'custom'),
+			);
+			if (match) voice = match.id;
+		}
+
+		if (!voice) return alert('Please choose a valid voice from the list');
+
+		const isDocker = window.POCKET_TTS_CONFIG?.isDocker || false;
+		if (isDocker && voice === 'custom') {
+			return alert(
+				'The custom voice is not available in Docker mode. Please choose another voice.',
+			);
+		}
 
-		let voice = voiceSelect.value;
 		if (voice === 'custom') {
 			voice = voiceFile.value.trim();
 			if (!voice) return alert('Please enter the path to the voice file.');
 		}
 
+		// ... rest of generation logic ...
+		const stream = streamToggle.checked;
+		const fmt = formatSelect.value;
+
 		generateBtn.classList.add('loading');
 		generateBtn.disabled = true;
 		outputSection.classList.remove('active');
@@ -92,7 +446,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 					model: 'pocket-tts',
 					input: text,
 					voice: voice,
-					response_format: 'wav',
+					response_format: fmt,
 					stream: stream,
 				}),
 			});
@@ -102,13 +456,21 @@ document.addEventListener('DOMContentLoaded', async () => {
 				throw new Error(err.error || response.statusText);
 			}
 
+			// Currently we always fetch the full blob and play it once ready.
+			// The `stream` flag is still sent to the server, but client playback
+			// uses a single blob path for robustness.
 			const blob = await response.blob();
 			const url = URL.createObjectURL(blob);
 			audioPlayer.src = url;
 			downloadBtn.href = url;
-			downloadBtn.download = 'generated_speech.wav';
+			downloadBtn.download = `generated_speech.${fmt}`;
 
-			audioPlayer.play();
+			// PCM raw audio usually won't play in standard <audio> elements
+			if (fmt !== 'pcm') {
+				audioPlayer
+					.play()
+					.catch((e) => console.warn('Auto-play blocked or failed:', e));
+			}
 			outputSection.classList.add('active');
 		} catch (e) {
 			alert('Error generating speech: ' + e.message);
@@ -117,4 +479,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 			generateBtn.disabled = false;
 		}
 	});
+
+	// Initial load
+	await loadVoices();
 });

templates/index.html

@@ -43,13 +43,66 @@ Hello! I am Pocket TTS, running locally on your machine. I can clone voices and
 				</div>
 
 				<div class="control-group">
-					<label for="voice-select">Voice Selection</label>
-					<select id="voice-select">
-						<!-- Populated by JS -->
-						<option value="custom">
-							Custom (Upload .wav, .mp3, or .flac)...
-						</option>
-					</select>
+					<label for="voice-input">Voice Selection</label>
+					<div class="input-with-action">
+						<input
+							id="voice-input"
+							type="text"
+							autocomplete="off"
+							placeholder="Select a voice..."
+						/>
+						<button
+							type="button"
+							class="clear-btn"
+							id="voice-clear-btn"
+							aria-label="Clear voice search"
+						>
+							<svg
+								width="14"
+								height="14"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<line x1="18" y1="6" x2="6" y2="18"></line>
+								<line x1="6" y1="6" x2="18" y2="18"></line>
+							</svg>
+						</button>
+						<ul
+							id="voice-list"
+							class="voice-list"
+							aria-label="Available voices"
+						>
+							<!-- Populated by JS -->
+						</ul>
+					</div>
+					<div id="voice-id-display" class="voice-id-helper hidden">
+						ID: <span class="voice-id-text"></span>
+						<button
+							class="copy-btn"
+							id="voice-id-copy-btn"
+							title="Copy to clipboard"
+						>
+							<svg
+								width="12"
+								height="12"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+								<path
+									d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+								></path>
+							</svg>
+						</button>
+					</div>
 				</div>
 
 				<div class="control-group hidden" id="custom-voice-group">
@@ -59,6 +112,25 @@ Hello! I am Pocket TTS, running locally on your machine. I can clone voices and
 					<input type="file" id="voice-file" accept=".wav,.mp3,.flac" />
 				</div>
 
+				<div class="control-group">
+					<label for="format-select">Output Format</label>
+					<select
+						id="format-select"
+						style="
+							width: 100%;
+							padding: 8px;
+							border-radius: 4px;
+							border: 1px solid var(--border-color);
+							background: var(--input-bg);
+							color: var(--text-color);
+						"
+					>
+						<option value="mp3">MP3</option>
+						<option value="wav" selected>WAV</option>
+						<option value="pcm">PCM (Raw)</option>
+					</select>
+				</div>
+
 				<div class="control-group">
 					<label
 						for="stream-toggle"
@@ -72,6 +144,15 @@ Hello! I am Pocket TTS, running locally on your machine. I can clone voices and
 						/>
 						Enable Streaming Response
 					</label>
+					<p
+						id="format-info"
+						style="
+							font-size: 0.85em;
+							color: var(--text-secondary);
+							margin-top: 8px;
+							line-height: 1.4;
+						"
+					></p>
 				</div>
 
 				<button id="generate-btn" class="btn-primary">