feat: chatterbox TTS via madcat-tts daemon, Web Speech API STT, styled persona picker

- tts.py: replace piper subprocess with HTTP POST to madcat-tts /v1/audio/speech (chatterbox voice cloning)
- chat.js: replace whisper server upload with browser Web Speech API (webkitSpeechRecognition)
- chat.css: style persona picker — appearance:none select, themed with CSS vars, mobile responsive
- main.py: default TTS voice → bt7274-en
This commit is contained in:
marauder-actual
2026-05-29 16:43:41 +02:00
parent f3c35eba72
commit ae384fe618
4 changed files with 165 additions and 131 deletions
+70
View File
@@ -242,6 +242,76 @@ body {
.sigil:hover { opacity: 0.85; }
.sigil img { width: 100%; height: 100%; display: block; }
/* ---------- persona picker (inline in topnav) ---------- */
.topnav__persona-wrap {
display: flex;
align-items: center;
gap: 0.45rem;
}
.topnav__persona-label {
font-family: var(--sans);
font-size: 0.58rem;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-faint);
opacity: 0.45;
cursor: default;
user-select: none;
}
.topnav__persona-select {
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--ink-faint);
border-radius: 3px;
background: var(--bg-soft);
color: var(--ink-muted);
font-family: var(--sans);
font-size: 0.62rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.2rem 1.3rem 0.2rem 0.45rem;
cursor: pointer;
outline: none;
opacity: 0.55;
transition: opacity 400ms ease, color 400ms ease, border-color 400ms ease;
/* custom dropdown arrow */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%236a6a6f' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.4rem center;
}
.topnav__persona-select:hover {
opacity: 1;
color: var(--ink);
border-color: var(--ink-muted);
}
.topnav__persona-select:focus-visible {
opacity: 1;
color: var(--ink);
border-color: var(--coral);
}
.topnav__persona-status {
font-family: var(--sans);
font-size: 0.58rem;
font-weight: 400;
letter-spacing: 0.12em;
color: var(--coral);
opacity: 0.7;
transition: opacity 400ms ease;
user-select: none;
}
.topnav__persona-status:empty { display: none; }
@media (max-width: 600px) {
.topnav__persona-label { display: none; }
.topnav__persona-select { font-size: 0.58rem; padding: 0.15rem 1.1rem 0.15rem 0.35rem; }
}
/* ===================== CONVERSATION ===================== */
.conversation {
flex: 1 0 auto;