acdf098c41
Mirrors the ASR backend pattern exactly: a BACKENDS dict in
tts/router.py maps a backend name to its worker URL, so adding the
next backend is just a new worker file + venv + supervisord entry +
one dict line. XTTS-v2 runs in its own venv (--system-site-packages,
inherits base image torch/CUDA) as a new supervisord program on
port 8005.
XTTS is zero-shot voice cloning, so a reference-voice library was
added (/tts/voices CRUD, stored under /srv/tts/voices) — synthesis
requires picking a previously uploaded voice. Results and model
cache live under /srv/tts/{results,models-cache}, new quadlet
volumes, owned by the same 983:983 user as the existing /srv/asr
dirs.
Fixed two environment issues uncovered while getting XTTS to
actually run inside the container (non-root user, root-built venvs):
- coqui-tts only pins transformers>=4.57 with no ceiling, so pip
installed an incompatible 5.x; pinned to the last 4.x release.
- HOME defaults to /app (owned by root) for the container's runtime
user, so numba/matplotlib/torch cache writes failed; HOME is now
forced to /tmp in all three workers (faster_whisper, qwen3, xtts)
before any of those libraries get imported.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
320 lines
7.5 KiB
CSS
320 lines
7.5 KiB
CSS
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
background: #0b1020;
|
|
color: #e7ebf3;
|
|
}
|
|
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
|
|
.page-header { margin-bottom: 8px; }
|
|
.page-header h1 { margin: 0 0 4px; }
|
|
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
|
.logout-link { text-decoration: none; flex-shrink: 0; display: inline-block; }
|
|
.muted { color: #aab3cf; margin: 0; }
|
|
.small { font-size: 0.87em; }
|
|
.mono { font-family: monospace; }
|
|
.hint { display: block; color: #7a85a8; font-size: 0.78em; margin-top: 3px; font-weight: 400; }
|
|
|
|
/* Tabs */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid #273056;
|
|
padding-bottom: 0;
|
|
}
|
|
.tab-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: #7a85a8;
|
|
padding: 10px 20px;
|
|
font-size: 1em;
|
|
cursor: pointer;
|
|
border-bottom: 3px solid transparent;
|
|
border-radius: 0;
|
|
margin-bottom: -1px;
|
|
transition: color 0.15s, border-color 0.15s;
|
|
}
|
|
.tab-btn:hover { color: #e7ebf3; }
|
|
.tab-btn.active { color: #e7ebf3; border-bottom-color: #3d63ff; }
|
|
|
|
/* Top-level tab group (ASR / TTS) gets a bolder, larger look */
|
|
.tab-group--top { margin-bottom: 8px; }
|
|
.tab-group--top > .tabs { margin-bottom: 24px; border-bottom: 2px solid #273056; }
|
|
.tab-group--top > .tabs > .tab-btn {
|
|
font-size: 1.15em;
|
|
font-weight: 700;
|
|
padding: 14px 28px;
|
|
border-bottom-width: 4px;
|
|
}
|
|
|
|
/* Card */
|
|
.card {
|
|
background: #121933;
|
|
border: 1px solid #273056;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.card h2 { margin-top: 0; font-size: 1.05em; }
|
|
|
|
/* Form elements */
|
|
label {
|
|
display: block;
|
|
margin-bottom: 14px;
|
|
font-weight: 600;
|
|
font-size: 0.93em;
|
|
}
|
|
input[type="text"],
|
|
input[type="number"],
|
|
select,
|
|
textarea,
|
|
input[type="file"] {
|
|
width: 100%;
|
|
margin-top: 5px;
|
|
padding: 9px 12px;
|
|
border: 1px solid #3a446d;
|
|
border-radius: 10px;
|
|
background: #0f1530;
|
|
color: #e7ebf3;
|
|
font-size: 0.95em;
|
|
}
|
|
textarea { width: 100%; resize: vertical; }
|
|
.inline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
}
|
|
.inline input[type="checkbox"] { width: auto; margin-top: 0; }
|
|
|
|
/* Grids */
|
|
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
|
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
|
|
|
|
/* Buttons */
|
|
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
|
|
button {
|
|
border: 0;
|
|
border-radius: 10px;
|
|
padding: 10px 16px;
|
|
background: #3d63ff;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 0.93em;
|
|
}
|
|
button:hover:not(:disabled) { opacity: 0.88; }
|
|
button:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
.btn-secondary {
|
|
background: #1a2244;
|
|
color: #aab3cf;
|
|
border: 1px solid #3a446d;
|
|
}
|
|
.btn-secondary:hover:not(:disabled) { color: #e7ebf3; opacity: 1; background: #222d55; }
|
|
.btn-danger { background: #7a1e1e; }
|
|
.btn-danger:hover:not(:disabled) { background: #9e2626; opacity: 1; }
|
|
|
|
/* Section toggle */
|
|
.section-toggle { margin: 10px 0 0; }
|
|
.toggle-btn {
|
|
background: #1a2244;
|
|
color: #aab3cf;
|
|
padding: 7px 14px;
|
|
font-size: 0.88em;
|
|
border: 1px solid #3a446d;
|
|
}
|
|
.toggle-btn:hover { color: #e7ebf3; }
|
|
.chevron { display: inline-block; transition: transform 0.2s; }
|
|
.collapsible { margin-top: 12px; padding: 14px; background: #0f1530; border: 1px solid #273056; border-radius: 10px; }
|
|
|
|
/* Divider */
|
|
.divider { border-top: 1px solid #273056; margin: 14px 0; }
|
|
|
|
/* Badges */
|
|
.badge-green {
|
|
background: #1a4a2a;
|
|
color: #5cd68a;
|
|
border-radius: 6px;
|
|
padding: 2px 8px;
|
|
font-size: 0.78em;
|
|
font-weight: 600;
|
|
margin-left: 6px;
|
|
}
|
|
.badge-backend {
|
|
background: #1a2a4a;
|
|
color: #5ab4e0;
|
|
border-radius: 6px;
|
|
padding: 2px 8px;
|
|
font-size: 0.8em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Pre / JSON */
|
|
pre {
|
|
background: #0f1530;
|
|
border: 1px solid #3a446d;
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
overflow: auto;
|
|
margin: 0;
|
|
font-size: 0.88em;
|
|
}
|
|
.result-json { max-height: 400px; }
|
|
|
|
/* Speaker blocks */
|
|
.speaker-block {
|
|
margin-bottom: 12px;
|
|
padding: 12px 14px;
|
|
background: #0f1530;
|
|
border: 1px solid #3a446d;
|
|
border-radius: 10px;
|
|
}
|
|
.speaker-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 700;
|
|
font-size: 0.9em;
|
|
margin-bottom: 6px;
|
|
}
|
|
.speaker-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
|
.speaker-time { color: #7a85a8; font-weight: 400; font-size: 0.85em; }
|
|
.speaker-text { color: #e7ebf3; line-height: 1.7; }
|
|
|
|
/* Realtime */
|
|
.mic-row { display: flex; gap: 12px; margin-bottom: 12px; }
|
|
.mic-btn { font-size: 1em; padding: 12px 24px; border-radius: 12px; background: #3d63ff; }
|
|
.stop-btn { background: #c0392b; }
|
|
.rt-indicator {
|
|
font-size: 0.88em;
|
|
padding: 6px 12px;
|
|
border-radius: 8px;
|
|
display: inline-block;
|
|
font-weight: 600;
|
|
}
|
|
.rt-indicator.idle { background: #1a2244; color: #7a85a8; }
|
|
.rt-indicator.recording { background: #3a1a1a; color: #e05a5a; animation: blink 1.2s infinite; }
|
|
.rt-indicator.processing { background: #2a2a1a; color: #e0c44f; }
|
|
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
|
|
|
|
.live-box {
|
|
min-height: 120px;
|
|
padding: 14px;
|
|
background: #0f1530;
|
|
border: 1px solid #3a446d;
|
|
border-radius: 10px;
|
|
line-height: 1.75;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
font-size: 0.97em;
|
|
}
|
|
.live-partial { color: #aab3cf; }
|
|
.live-confirmed { color: #e7ebf3; }
|
|
|
|
/* History */
|
|
.history-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.history-table-wrap {
|
|
overflow-x: auto;
|
|
padding: 0 20px 20px;
|
|
}
|
|
.history-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.9em;
|
|
}
|
|
.history-table th {
|
|
text-align: left;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid #273056;
|
|
color: #7a85a8;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
.history-table td {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid #1a2244;
|
|
vertical-align: top;
|
|
}
|
|
.history-row:hover td { background: #131c38; }
|
|
.preview-cell {
|
|
max-width: 280px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: #aab3cf;
|
|
}
|
|
.btn-view {
|
|
background: #1a2a4a;
|
|
color: #5ab4e0;
|
|
border: 1px solid #3a446d;
|
|
padding: 5px 12px;
|
|
font-size: 0.85em;
|
|
border-radius: 8px;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-view:hover { background: #1e3560; opacity: 1; }
|
|
|
|
/* Detail view */
|
|
.detail-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.detail-title {
|
|
flex: 1;
|
|
font-weight: 700;
|
|
font-size: 1em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.meta-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.meta-item {
|
|
background: #0f1530;
|
|
border: 1px solid #273056;
|
|
border-radius: 10px;
|
|
padding: 10px 14px;
|
|
}
|
|
.meta-key { display: block; color: #7a85a8; font-size: 0.78em; font-weight: 600; margin-bottom: 4px; }
|
|
.meta-val { display: block; font-size: 0.95em; word-break: break-all; }
|
|
|
|
/* Media player */
|
|
.media-player {
|
|
width: 100%;
|
|
border-radius: 10px;
|
|
background: #0f1530;
|
|
}
|
|
|
|
/* Voice list (TTS) */
|
|
.voice-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 14px;
|
|
margin-bottom: 8px;
|
|
background: #0f1530;
|
|
border: 1px solid #3a446d;
|
|
border-radius: 10px;
|
|
}
|
|
.voice-row .voice-name { font-weight: 600; flex-shrink: 0; min-width: 120px; }
|
|
.voice-row audio { flex: 1; height: 32px; }
|
|
|
|
@media (max-width: 720px) {
|
|
.grid2, .grid3 { grid-template-columns: 1fr; }
|
|
.mic-row { flex-direction: column; }
|
|
.detail-header { flex-wrap: wrap; }
|
|
.history-table th:nth-child(4),
|
|
.history-table td:nth-child(4) { display: none; }
|
|
}
|