Add ttstoy cog

This commit is contained in:
2026-06-05 16:41:55 -05:00
parent 0e9f4a5224
commit 6739b2d6f1
975 changed files with 8216 additions and 0 deletions
+247
View File
@@ -0,0 +1,247 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}TtsToy{% endblock %}</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #060d1a; color: #c8daf0; font-family: 'Segoe UI', Tahoma, Geneva, sans-serif; min-height: 100vh; }
canvas#bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.rain-layer { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.rain-layer.far { filter: blur(10px); opacity: 0.45; }
.rain-layer.mid { filter: blur(4px); opacity: 0.65; }
.rain-layer.near { filter: blur(1px); opacity: 0.85; }
.spark-layer { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.frost-pane { position: fixed; inset: 0; z-index: 2; background: rgba(6,13,26,0.25); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: none; }
nav, .container { position: relative; z-index: 3; }
a { color: rgba(80,160,255,0.7); text-decoration: none; }
a:hover { color: rgba(120,190,255,0.9); text-decoration: underline; }
.glass {
background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.03) 55%, rgba(0,0,0,0.08) 100%);
border: 1px solid rgba(255,255,255,0.15);
box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.10);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-radius: 6px;
}
nav {
background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 45%, rgba(0,0,0,0.03) 55%, rgba(0,0,0,0.08) 100%);
border-bottom: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(14px);
padding: 0 1.5rem;
display: flex; align-items: center; gap: 0.25rem; height: 48px;
box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
nav .brand { font-weight: 200; font-size: 1rem; color: #e0ecff; margin-right: auto; letter-spacing: 3px; text-shadow: 0 0 16px rgba(80,150,255,0.2); }
nav a.nav-link { color: rgba(200,220,255,0.5); padding: 0.3rem 0.75rem; border-radius: 3px; font-size: 0.85rem; border: 1px solid transparent; transition: all 0.12s; font-weight: 400; }
nav a.nav-link:hover { background: rgba(255,255,255,0.06); color: rgba(200,220,255,0.8); text-decoration: none; border-color: rgba(255,255,255,0.08); }
nav a.nav-link.active { background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.03) 55%, rgba(0,0,0,0.06) 100%); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.15); }
nav .user-chip { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: rgba(140,180,230,0.5); margin-left: 0.5rem; }
nav .user-chip img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); }
nav .user-chip a { color: rgba(140,180,230,0.4); font-size: 0.75rem; }
nav .user-chip a:hover { color: rgba(255,140,140,0.8); }
.container { max-width: 960px; margin: 0 auto; padding: 1.5rem 1.25rem; }
.card {
background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.03) 55%, rgba(0,0,0,0.08) 100%);
border: 1px solid rgba(255,255,255,0.15);
box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.10);
backdrop-filter: blur(14px); border-radius: 6px; padding: 1.25rem; margin-bottom: 1.25rem;
}
.card h2 { font-size: 0.85rem; font-weight: 300; color: #e0ecff; margin-bottom: 0.9rem; text-shadow: 0 0 16px rgba(80,150,255,0.2); text-transform: uppercase; letter-spacing: 2px; }
label { display: block; font-size: 0.8rem; color: rgba(200,220,255,0.6); margin-bottom: 0.3rem; font-weight: 500; }
input[type=text], input[type=password], input[type=number], input[type=file], textarea, select {
width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #c8daf0;
padding: 0.45rem 0.7rem; border-radius: 3px; font-size: 0.85rem; outline: none;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); font-family: inherit;
}
input:focus, textarea:focus, select:focus { border-color: rgba(255,255,255,0.25); box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 6px rgba(80,150,240,0.2); }
input[type=range] { background: none; border: none; box-shadow: none; padding: 0; accent-color: rgba(80,160,255,0.7); }
textarea { resize: vertical; min-height: 72px; }
.form-group { margin-bottom: 0.9rem; }
select option { background: #0a1220; }
.btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 1rem; border-radius: 3px; cursor: pointer; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.5px; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; border: none; }
.btn-primary { background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 45%, rgba(0,0,0,0.04) 55%, rgba(0,0,0,0.10) 100%); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(14px); box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.10); }
.btn-primary:hover { background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.10) 45%, rgba(0,0,0,0.02) 55%, rgba(0,0,0,0.08) 100%); border-color: rgba(255,255,255,0.25); box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15); }
.btn-secondary { background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.03) 55%, rgba(0,0,0,0.06) 100%); color: rgba(200,220,255,0.6); border: 1px solid rgba(255,255,255,0.10); }
.btn-secondary:hover { background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.06) 45%, rgba(0,0,0,0.02) 55%, rgba(0,0,0,0.05) 100%); color: rgba(200,220,255,0.8); border-color: rgba(255,255,255,0.15); }
.btn-danger { background: linear-gradient(180deg, rgba(255,100,100,0.20) 0%, rgba(200,60,60,0.10) 45%, rgba(140,30,30,0.08) 55%, rgba(100,20,20,0.12) 100%); color: rgba(255,200,200,0.8); border: 1px solid rgba(255,100,100,0.20); }
.btn-danger:hover { background: linear-gradient(180deg, rgba(255,100,100,0.30) 0%, rgba(200,60,60,0.15) 45%, rgba(140,30,30,0.10) 55%, rgba(100,20,20,0.15) 100%); border-color: rgba(255,100,100,0.30); }
.btn-sm { padding: 0.28rem 0.65rem; font-size: 0.78rem; }
.alert { padding: 0.65rem 0.9rem; border-radius: 4px; margin-bottom: 0.9rem; font-size: 0.85rem; }
.alert-error { background: rgba(255,80,80,0.08); border: 1px solid rgba(255,80,80,0.15); color: #ff8888; }
.alert-success { background: rgba(80,200,100,0.08); border: 1px solid rgba(80,200,100,0.15); color: #5ab87a; }
.alert-info { background: rgba(80,160,255,0.06); border: 1px solid rgba(80,160,255,0.12); color: rgba(140,200,255,0.8); }
.muted { color: rgba(140,180,230,0.4); font-size: 0.8rem; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.col { flex: 1; min-width: 180px; }
audio { width: 100%; margin-top: 0.5rem; filter: invert(0.8) hue-rotate(180deg); }
.badge { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 3px; font-size: 0.72rem; font-weight: 500; }
.badge-mode { background: rgba(80,160,255,0.08); color: rgba(140,200,255,0.8); border: 1px solid rgba(80,160,255,0.15); }
.badge-active { background: rgba(80,200,100,0.08); color: #5ab87a; border: 1px solid rgba(80,200,100,0.15); }
.voice-list { list-style: none; }
.voice-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.voice-list li:last-child { border-bottom: none; }
.voice-list .name { flex: 1; font-size: 0.85rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(80,160,255,0.15); border-top-color: rgba(80,160,255,0.7); border-radius: 50%; animation: spin 0.6s linear infinite; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th { color: rgba(140,180,230,0.5); text-align: left; padding: 0.35rem 0.5rem; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
td { padding: 0.4rem 0.5rem; border-top: 1px solid rgba(255,255,255,0.06); color: #c8daf0; }
code { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 3px; padding: 0.1rem 0.4rem; font-size: 0.82rem; color: rgba(140,200,255,0.8); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 2px; }
</style>
{% block head %}{% endblock %}
</head>
<body>
<canvas class="rain-layer far" id="rainFar"></canvas>
<canvas class="rain-layer mid" id="rainMid"></canvas>
<canvas class="rain-layer near" id="rainNear"></canvas>
<canvas class="spark-layer" id="sparkCanvas"></canvas>
<div class="frost-pane"></div>
{% if session.get('user_id') %}
<nav>
<span class="brand">TTSTOY</span>
<a href="{{ url_for('dashboard') }}" class="nav-link {% if request.endpoint == 'dashboard' %}active{% endif %}">Dashboard</a>
<a href="{{ url_for('page_chatterbox') }}" class="nav-link {% if request.endpoint == 'page_chatterbox' %}active{% endif %}">Chatterbox</a>
<a href="{{ url_for('page_minimax') }}" class="nav-link {% if request.endpoint == 'page_minimax' %}active{% endif %}">MiniMax</a>
<a href="{{ url_for('page_dectalk') }}" class="nav-link {% if request.endpoint == 'page_dectalk' %}active{% endif %}">DECTalk</a>
<a href="{{ url_for('page_vox') }}" class="nav-link {% if request.endpoint == 'page_vox' %}active{% endif %}">VOX</a>
{% if session.get('is_owner') %}
<a href="{{ url_for('page_sfx') }}" class="nav-link {% if request.endpoint == 'page_sfx' %}active{% endif %}">SFX</a>
{% endif %}
<a href="{{ url_for('page_profile') }}" class="nav-link {% if request.endpoint == 'page_profile' %}active{% endif %}">Profile</a>
<div class="user-chip">
{% if session.get('avatar_url') %}<img src="{{ session.avatar_url }}" alt="">{% endif %}
<span>{{ session.get('discord_name', '') }}</span>
<a href="{{ url_for('logout') }}">logout</a>
</div>
</nav>
{% endif %}
<div class="container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% for cat, msg in messages %}
<div class="alert alert-{{ cat }}">{{ msg }}</div>
{% endfor %}
{% endwith %}
{% block content %}{% endblock %}
</div>
<script>
/* Rain effect — depth layers behind the frost pane */
(function() {
const layerConfigs = [
{ id: 'rainFar', count: 70, sMin: 2, sMax: 4, lMin: 25, lMax: 50, wMin: 1.5, wMax: 3.0, aMin: 0.25, aMax: 0.50, wind: 0.2 },
{ id: 'rainMid', count: 50, sMin: 4, sMax: 8, lMin: 18, lMax: 40, wMin: 1.2, wMax: 2.5, aMin: 0.30, aMax: 0.55, wind: 0.5 },
{ id: 'rainNear', count: 35, sMin: 8, sMax: 14, lMin: 14, lMax: 35, wMin: 1.0, wMax: 2.0, aMin: 0.35, aMax: 0.60, wind: 0.8 },
];
const depthLayers = layerConfigs.map(cfg => {
const c = document.getElementById(cfg.id);
const ctx = c.getContext('2d');
return { c, ctx, cfg, drops: [] };
});
let W, H;
function makeDepthDrop(cfg, startTop) {
return {
x: Math.random() * (W + 80) - 40,
y: startTop ? -(Math.random() * H * 0.5 + 20) : Math.random() * H,
speed: cfg.sMin + Math.random() * (cfg.sMax - cfg.sMin),
len: cfg.lMin + Math.random() * (cfg.lMax - cfg.lMin),
width: cfg.wMin + Math.random() * (cfg.wMax - cfg.wMin),
alpha: cfg.aMin + Math.random() * (cfg.aMax - cfg.aMin),
wind: cfg.wind + (Math.random() - 0.5) * 0.25,
};
}
function resize() {
W = window.innerWidth; H = window.innerHeight;
for (const layer of depthLayers) {
layer.c.width = W; layer.c.height = H;
layer.drops = [];
for (let i = 0; i < layer.cfg.count; i++) layer.drops.push(makeDepthDrop(layer.cfg, false));
}
}
function drawDepthLayers() {
for (const layer of depthLayers) {
const { ctx, cfg, drops } = layer;
ctx.clearRect(0, 0, W, H);
for (let i = 0; i < drops.length; i++) {
const d = drops[i];
d.y += d.speed; d.x += d.wind;
if (d.y > H + d.len || d.x > W + 60) { drops[i] = makeDepthDrop(cfg, true); continue; }
const x2 = d.x + d.wind * (d.len / d.speed) * 0.3;
const grad = ctx.createLinearGradient(d.x, d.y - d.len, x2, d.y);
grad.addColorStop(0, 'rgba(160,200,240,0)');
grad.addColorStop(0.5, 'rgba(160,200,240,' + (d.alpha * 0.4) + ')');
grad.addColorStop(1, 'rgba(160,200,240,' + d.alpha + ')');
ctx.beginPath(); ctx.moveTo(d.x, d.y - d.len); ctx.lineTo(x2, d.y);
ctx.strokeStyle = grad; ctx.lineWidth = d.width; ctx.lineCap = 'round'; ctx.stroke();
}
}
}
resize(); window.addEventListener('resize', resize);
(function frame() { drawDepthLayers(); requestAnimationFrame(frame); })();
})();
/* PS2-style sparks — 4 persistent, orbit in/out of view */
(function() {
const canvas = document.getElementById('sparkCanvas');
const ctx = canvas.getContext('2d');
let W, H;
const COLORS = [
{ r: 255, g: 60, b: 60 },
{ r: 60, g: 255, b: 100 },
{ r: 80, g: 140, b: 255 },
{ r: 255, g: 220, b: 60 },
];
function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
resize(); window.addEventListener('resize', resize);
const sparks = COLORS.map((color, i) => {
const phase = i * Math.PI * 0.5;
return { color, cx:0, cy:0, rx:0, ry:0,
speedX: 0.12 + Math.random() * 0.08, speedY: 0.07 + Math.random() * 0.06,
phaseX: phase + Math.random() * 2, phaseY: phase * 1.3 + Math.random() * 2,
trail: [], maxTrail: 35, size: 2.5 + Math.random() * 1.5 };
});
function updateOrbits() {
sparks.forEach((s, i) => { s.cx = W*0.5; s.cy = H*0.5; s.rx = W*(1.2+i*0.15); s.ry = H*(1.0+i*0.12); });
}
updateOrbits(); window.addEventListener('resize', updateOrbits);
function draw() {
ctx.clearRect(0, 0, W, H);
const now = performance.now() / 1000;
for (const s of sparks) {
const x = s.cx + Math.sin(now * s.speedX + s.phaseX) * s.rx;
const y = s.cy + Math.cos(now * s.speedY + s.phaseY) * s.ry;
s.trail.push({ x, y }); if (s.trail.length > s.maxTrail) s.trail.shift();
const margin = 60;
if (!s.trail.some(p => p.x > -margin && p.x < W+margin && p.y > -margin && p.y < H+margin)) continue;
const { r, g, b } = s.color;
if (s.trail.length > 1) {
for (let t = 1; t < s.trail.length; t++) {
const frac = t / s.trail.length;
ctx.beginPath(); ctx.moveTo(s.trail[t-1].x, s.trail[t-1].y); ctx.lineTo(s.trail[t].x, s.trail[t].y);
ctx.strokeStyle = 'rgba('+r+','+g+','+b+','+(frac*0.55)+')';
ctx.lineWidth = s.size * frac; ctx.lineCap = 'round'; ctx.stroke();
}
}
ctx.beginPath(); ctx.arc(x, y, s.size, 0, Math.PI*2);
ctx.fillStyle = 'rgba('+r+','+g+','+b+',0.9)'; ctx.fill();
const glow = ctx.createRadialGradient(x, y, 0, x, y, s.size*6);
glow.addColorStop(0, 'rgba('+r+','+g+','+b+',0.25)');
glow.addColorStop(1, 'rgba('+r+','+g+','+b+',0)');
ctx.beginPath(); ctx.arc(x, y, s.size*6, 0, Math.PI*2);
ctx.fillStyle = glow; ctx.fill();
}
requestAnimationFrame(draw);
}
draw();
})();
</script>
<script>
function apiFetch(url, opts={}) {
return fetch(url, {headers: {'Content-Type': 'application/json'}, ...opts});
}
</script>
{% block scripts %}{% endblock %}
</body>
</html>
+194
View File
@@ -0,0 +1,194 @@
{% extends "base.html" %}
{% block title %}Chatterbox — TtsToy{% endblock %}
{% block content %}
<div style="margin-bottom:1.25rem;">
<h1 style="font-size:1rem;font-weight:300;color:#e0ecff;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 16px rgba(80,150,255,0.2);">Chatterbox Voices</h1>
</div>
<div class="card">
<h2>Upload New Voice</h2>
<div class="muted" style="margin-bottom:0.9rem;">Upload a 5–15 second .wav or .mp3 clip of a single speaker. Short clips are auto-looped.</div>
<div class="row">
<div class="col form-group">
<label>Voice Name</label>
<input type="text" id="upload-name" placeholder="e.g. MyVoice">
</div>
<div class="col form-group">
<label>Audio File (.wav / .mp3)</label>
<input type="file" id="upload-file" accept=".wav,.mp3">
</div>
</div>
<div style="display:flex;gap:0.5rem;align-items:center;">
<button class="btn btn-primary btn-sm" onclick="uploadVoice()">Upload</button>
<span id="upload-status" class="muted"></span>
</div>
</div>
<div class="card">
<h2>Your Voices</h2>
<ul class="voice-list" id="voice-list"><li class="muted">Loading...</li></ul>
</div>
<div class="card" id="edit-card" style="display:none;">
<h2>Edit Voice: <span id="edit-voice-name" style="color:#c8daf0;font-weight:300;"></span></h2>
<input type="hidden" id="edit-voice-filename">
<div class="row">
<div class="col form-group">
<label>Temperature (0.0–1.5)</label>
<input type="number" id="edit-temp" step="0.05" min="0" max="1.5" placeholder="server default">
</div>
<div class="col form-group">
<label>Exaggeration (0.25–2.0)</label>
<input type="number" id="edit-exag" step="0.05" min="0.25" max="2.0" placeholder="server default">
</div>
<div class="col form-group">
<label>Volume dB (-20–+20)</label>
<input type="number" id="edit-vol" step="0.5" min="-20" max="20" placeholder="0">
</div>
<div class="col form-group">
<label>Speed (0.25–4.0)</label>
<input type="number" id="edit-speed" step="0.05" min="0.25" max="4.0" placeholder="1.0">
</div>
</div>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;">
<button class="btn btn-primary btn-sm" id="save-btn">Save</button>
<button class="btn btn-secondary btn-sm" onclick="setActiveVoice()">Set as Active</button>
<button class="btn btn-danger btn-sm" onclick="deleteVoice()">Delete</button>
<button class="btn btn-secondary btn-sm" onclick="closeEdit()">Cancel</button>
<span id="edit-status" class="muted"></span>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
let voices = [];
let settings = {};
async function loadVoices() {
const [vr, sr] = await Promise.all([apiFetch('/api/chatterbox/voices'), apiFetch('/api/settings')]);
voices = await vr.json();
settings = await sr.json();
renderVoices();
}
function renderVoices() {
const ul = document.getElementById('voice-list');
if (!voices.length) { ul.innerHTML = '<li class="muted">No voices uploaded yet.</li>'; return; }
ul.innerHTML = voices.map(v => {
const active = v.filename === settings.user_voice;
return `<li>
<span class="name">${v.display} ${active ? '<span class="badge badge-active">active</span>' : ''}</span>
<button class="btn btn-secondary btn-sm" onclick="openEdit('${v.filename}','${v.display}')">Edit</button>
</li>`;
}).join('');
}
function openEdit(filename, display) {
const alreadyOpen = document.getElementById('edit-card').style.display !== 'none'
&& document.getElementById('edit-voice-filename').value === filename;
document.getElementById('edit-card').style.display = 'block';
document.getElementById('edit-voice-name').textContent = display;
document.getElementById('edit-voice-filename').value = filename;
// Don't overwrite fields if this voice is already open (e.g. after a save re-render)
if (!alreadyOpen) {
document.getElementById('edit-status').textContent = '';
document.getElementById('edit-temp').value = settings.chatterbox_temperature_offsets?.[filename] ?? '';
document.getElementById('edit-exag').value = settings.chatterbox_exaggeration_offsets?.[filename] ?? '';
document.getElementById('edit-vol').value = settings.chatterbox_volume_offsets?.[filename] ?? '';
document.getElementById('edit-speed').value = settings.chatterbox_speed_offsets?.[filename] ?? '';
document.getElementById('edit-card').scrollIntoView({behavior:'smooth'});
}
}
function closeEdit() { document.getElementById('edit-card').style.display = 'none'; }
// Capture input values on mousedown, before the button click causes blur+snap on number inputs
let _pendingSave = null;
document.getElementById('save-btn').addEventListener('mousedown', () => {
_pendingSave = {
t: document.getElementById('edit-temp').value,
e: document.getElementById('edit-exag').value,
v: document.getElementById('edit-vol').value,
s: document.getElementById('edit-speed').value,
};
});
document.getElementById('save-btn').addEventListener('click', saveVoiceParams);
async function saveVoiceParams() {
const filename = document.getElementById('edit-voice-filename').value;
// Use values captured on mousedown (before blur snapped them), fall back to current
const raw = _pendingSave || {
t: document.getElementById('edit-temp').value,
e: document.getElementById('edit-exag').value,
v: document.getElementById('edit-vol').value,
s: document.getElementById('edit-speed').value,
};
_pendingSave = null;
const params = {};
if (raw.t !== '') params.temperature = parseFloat(raw.t);
if (raw.e !== '') params.exaggeration = parseFloat(raw.e);
if (raw.v !== '') params.volume_db = parseFloat(raw.v);
if (raw.s !== '') params.speed = parseFloat(raw.s);
const r = await apiFetch('/api/settings/chatterbox_params', {method:'POST', body: JSON.stringify({voice: filename, params})});
const d = await r.json();
if (d.ok) {
// Update local settings cache so re-render doesn't clobber the form with stale disk values
if (!settings.chatterbox_temperature_offsets) settings.chatterbox_temperature_offsets = {};
if (!settings.chatterbox_exaggeration_offsets) settings.chatterbox_exaggeration_offsets = {};
if (!settings.chatterbox_volume_offsets) settings.chatterbox_volume_offsets = {};
if (!settings.chatterbox_speed_offsets) settings.chatterbox_speed_offsets = {};
if (params.temperature !== undefined) settings.chatterbox_temperature_offsets[filename] = params.temperature;
if (params.exaggeration !== undefined) settings.chatterbox_exaggeration_offsets[filename] = params.exaggeration;
if (params.volume_db !== undefined) settings.chatterbox_volume_offsets[filename] = params.volume_db;
if (params.speed !== undefined) settings.chatterbox_speed_offsets[filename] = params.speed;
// Restore field values to what was actually saved (blur may have snapped them)
if (raw.t !== '') document.getElementById('edit-temp').value = raw.t;
if (raw.e !== '') document.getElementById('edit-exag').value = raw.e;
if (raw.v !== '') document.getElementById('edit-vol').value = raw.v;
if (raw.s !== '') document.getElementById('edit-speed').value = raw.s;
document.getElementById('edit-status').textContent = 'Saved.';
} else {
document.getElementById('edit-status').textContent = 'Error: ' + d.error;
}
}
async function setActiveVoice() {
const filename = document.getElementById('edit-voice-filename').value;
const r = await apiFetch('/api/settings/voice', {method:'POST', body: JSON.stringify({voice: filename})});
const d = await r.json();
document.getElementById('edit-status').textContent = d.ok ? 'Set as active voice.' : 'Error: ' + d.error;
if (d.ok) await loadVoices();
}
async function deleteVoice() {
const filename = document.getElementById('edit-voice-filename').value;
if (!confirm('Delete this voice? This cannot be undone.')) return;
const r = await fetch(`/api/chatterbox/voices/${encodeURIComponent(filename)}`, {method:'DELETE'});
const d = await r.json();
if (d.ok) { closeEdit(); await loadVoices(); }
else document.getElementById('edit-status').textContent = 'Error: ' + d.error;
}
async function uploadVoice() {
const name = document.getElementById('upload-name').value.trim();
const file = document.getElementById('upload-file').files[0];
if (!file) { document.getElementById('upload-status').textContent = 'Select a file first.'; return; }
const fd = new FormData();
fd.append('file', file);
if (name) fd.append('name', name);
document.getElementById('upload-status').textContent = 'Uploading...';
const r = await fetch('/api/chatterbox/voices/upload', {method:'POST', body: fd});
const d = await r.json();
if (d.ok) {
document.getElementById('upload-status').textContent = 'Uploaded.';
document.getElementById('upload-name').value = '';
document.getElementById('upload-file').value = '';
await loadVoices();
} else {
document.getElementById('upload-status').textContent = 'Error: ' + d.error;
}
}
loadVoices();
</script>
{% endblock %}
+399
View File
@@ -0,0 +1,399 @@
{% extends "base.html" %}
{% block title %}Dashboard — TtsToy{% endblock %}
{% block content %}
<div style="margin-bottom:1.25rem;display:flex;align-items:baseline;gap:1rem;">
<h1 style="font-size:1rem;font-weight:300;color:#e0ecff;text-shadow:0 0 16px rgba(80,150,255,0.2);text-transform:uppercase;letter-spacing:2px;">Dashboard</h1>
<span class="muted">{{ session.get('discord_name','') }}</span>
</div>
<div class="row">
<div class="col">
<div class="card">
<h2>Active Mode</h2>
<div style="font-size:1rem;margin-bottom:0.4rem;color:#c8daf0;">
<span class="badge badge-mode">{{ mode.upper() }}</span>
</div>
<div class="muted">Global bot mode: <strong style="color:rgba(200,220,255,0.7);">{{ global_mode }}</strong></div>
</div>
</div>
<div class="col">
<div class="card">
<h2>Active Voice</h2>
<div style="font-size:0.95rem;margin-bottom:0.4rem;color:#c8daf0;" id="active-voice-display">{{ active_voice_display }}</div>
<div class="muted">
{% if mode == "chatterbox" %}<a href="{{ url_for('page_chatterbox') }}">Manage voices</a>
{% elif mode == "minimax" %}<a href="{{ url_for('page_minimax') }}">Browse voices</a>
{% elif mode == "dectalk" %}<a href="{{ url_for('page_dectalk') }}">Voice commands</a>
{% elif mode == "vox" %}<a href="{{ url_for('page_vox') }}">Word list</a>
{% endif %}
</div>
</div>
</div>
</div>
<div class="card">
<h2>Submit TTS Message</h2>
<div class="muted" style="margin-bottom:1rem;"><strong>Speak in VC</strong> plays in your voice channel. <strong>Generate Only</strong> creates the audio for playback here — no VC needed.</div>
<div class="row" style="margin-bottom:0.75rem;">
<div class="col form-group" style="max-width:180px;">
<label>Mode</label>
<select id="tts-mode-select" onchange="onModeChange()">
{% for m in ["minimax","chatterbox","dectalk","morshu","vox"] %}
<option value="{{ m }}" {% if m == mode %}selected{% endif %}>{{ m }}</option>
{% endfor %}
</select>
</div>
<div class="col form-group" id="voice-select-group">
<label>Voice</label>
<select id="tts-voice-select" onchange="onVoiceChange()">
<option value="">— use my saved voice —</option>
</select>
</div>
</div>
<!-- Chatterbox knobs -->
<div id="cb-knobs" style="display:none;margin-bottom:1rem;">
<div style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:4px;padding:0.9rem;">
<div style="font-size:0.72rem;color:rgba(140,180,230,0.4);margin-bottom:0.75rem;text-transform:uppercase;letter-spacing:.05em;">Voice Settings</div>
<div class="row">
<div class="col form-group">
<label>Temperature <span class="muted">0–1.5</span></label>
<input type="range" id="cb-temp" min="0" max="1.5" step="0.05" style="width:100%;" oninput="updateKnobLabel('cb-temp','cb-temp-val')">
<div style="display:flex;justify-content:space-between;font-size:0.72rem;color:rgba(140,180,230,0.4);margin-top:2px;">
<span>consistent</span><span id="cb-temp-val" style="color:rgba(200,220,255,0.7);">—</span><span>varied</span>
</div>
</div>
<div class="col form-group">
<label>Exaggeration <span class="muted">0.25–2.0</span></label>
<input type="range" id="cb-exag" min="0.25" max="2.0" step="0.05" style="width:100%;" oninput="updateKnobLabel('cb-exag','cb-exag-val')">
<div style="display:flex;justify-content:space-between;font-size:0.72rem;color:rgba(140,180,230,0.4);margin-top:2px;">
<span>flat</span><span id="cb-exag-val" style="color:rgba(200,220,255,0.7);">—</span><span>dramatic</span>
</div>
</div>
<div class="col form-group">
<label>Volume dB <span class="muted">-20–+20</span></label>
<input type="range" id="cb-vol" min="-20" max="20" step="0.5" style="width:100%;" oninput="updateKnobLabel('cb-vol','cb-vol-val')">
<div style="display:flex;justify-content:space-between;font-size:0.72rem;color:rgba(140,180,230,0.4);margin-top:2px;">
<span>-20</span><span id="cb-vol-val" style="color:rgba(200,220,255,0.7);">0</span><span>+20</span>
</div>
</div>
<div class="col form-group">
<label>Speed <span class="muted">0.25–4.0</span></label>
<input type="range" id="cb-speed" min="0.25" max="4.0" step="0.05" style="width:100%;" oninput="updateKnobLabel('cb-speed','cb-speed-val')">
<div style="display:flex;justify-content:space-between;font-size:0.72rem;color:rgba(140,180,230,0.4);margin-top:2px;">
<span>slow</span><span id="cb-speed-val" style="color:rgba(200,220,255,0.7);">1.0</span><span>fast</span>
</div>
</div>
</div>
<div style="display:flex;gap:0.5rem;align-items:center;margin-top:0.25rem;">
<button class="btn btn-secondary btn-sm" onclick="saveKnobs()">Save for this voice</button>
<button class="btn btn-secondary btn-sm" onclick="resetKnobs()">Reset</button>
<span id="knob-status" class="muted"></span>
</div>
</div>
</div>
<div class="form-group">
<label for="tts-text">Message</label>
<div style="position:relative;">
<textarea id="tts-text" placeholder="Type something to say..." style="padding-right:2.5rem;"></textarea>
<button type="button" id="sfx-toggle-btn" onclick="toggleSfxDrawer()" title="Insert SFX emoji"
style="position:absolute;right:6px;top:6px;background:none;border:1px solid rgba(255,255,255,0.12);
border-radius:4px;padding:2px 6px;cursor:pointer;font-size:1.1rem;line-height:1;
color:rgba(200,220,255,0.6);transition:background 0.12s;"
onmouseenter="this.style.background='rgba(255,255,255,0.06)'" onmouseleave="this.style.background='none'">🔊</button>
</div>
<div id="sfx-drawer" style="display:none;margin-top:0.5rem;background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.10);border-radius:4px;padding:0.6rem 0.75rem;">
<div style="font-size:0.72rem;color:rgba(140,180,230,0.4);text-transform:uppercase;letter-spacing:.05em;margin-bottom:0.5rem;">Sound Effects — click to insert</div>
<div id="sfx-grid" style="display:flex;flex-wrap:wrap;gap:0.35rem;"></div>
</div>
</div>
<div style="display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap;">
<button class="btn btn-primary" onclick="submitTTS()">
<span id="spinner" class="spin" style="display:none;"></span> Speak in VC
</button>
<button class="btn btn-secondary" id="gen-only-btn" onclick="generateOnly()" style="display:none;">
<span id="gen-spinner" class="spin" style="display:none;"></span> Generate Only
</button>
<span id="tts-status" class="muted"></span>
</div>
<div id="tts-result" style="margin-top:0.75rem;display:none;">
<audio id="tts-audio" controls></audio>
</div>
</div>
<div class="card">
<h2>Mode Preference</h2>
<div class="muted" style="margin-bottom:0.75rem;">Your personal mode override — does not affect other users.</div>
<div style="display:flex;gap:0.5rem;align-items:center;">
<button class="btn btn-secondary btn-sm" onclick="saveMode()">Save current mode selection</button>
<span id="mode-status" class="muted"></span>
</div>
</div>
<div class="card">
<h2>TTS Tips</h2>
<table>
<tr>
<td style="color:rgba(140,180,230,0.4);width:35%;vertical-align:top;">Voice switching</td>
<td>Use <code>[mode|voice]</code> tags to change voice mid-message. Everything after the tag uses that voice until the next tag. The voice part is optional for modes that don't need it.<br>
<span class="muted" style="font-size:0.78rem;">Example: <code>[minimax|robotnik] I am the eggman [dectalk] [:nh]now I'm Harry</code></span>
</td>
</tr>
<tr>
<td style="color:rgba(140,180,230,0.4);vertical-align:top;">Available modes</td>
<td>
<code>minimax</code> · <code>chatterbox</code> · <code>dectalk</code> · <code>morshu</code> · <code>vox</code>
</td>
</tr>
<tr>
<td style="color:rgba(140,180,230,0.4);vertical-align:top;">Voice names</td>
<td>
MiniMax: <code>[minimax|Robotnik]</code>, <code>[minimax|Gnome]</code>, etc.<br>
Chatterbox: <code>[chatterbox|YourVoiceName]</code> (uploaded filename)<br>
DECTalk: just <code>[dectalk]</code> — control voices in the text with <code>[:np]</code> Paul, <code>[:nb]</code> Betty, <code>[:nh]</code> Harry, etc.<br>
Morshu / VOX: <code>[morshu]</code> or <code>[vox]</code> — no voice selection needed
</td>
</tr>
<tr>
<td style="color:rgba(140,180,230,0.4);vertical-align:top;">Sound effects</td>
<td>Insert SFX emoji anywhere in your text — click the 🔊 button on the message box to browse available sounds.</td>
</tr>
<tr>
<td style="color:rgba(140,180,230,0.4);vertical-align:top;">Chatterbox tokens</td>
<td><code>[laugh]</code> <code>[chuckle]</code> <code>[sigh]</code> <code>[gasp]</code> <code>[cough]</code> <code>[clear throat]</code> <code>[sniff]</code> <code>[groan]</code> <code>[shush]</code></td>
</tr>
</table>
</div>
{% endblock %}
{% block scripts %}
<script>
let settings = {};
async function loadSettings() {
// Remember current voice selection so it survives the re-render
const prevVoice = document.getElementById('tts-voice-select')?.value || null;
const r = await apiFetch('/api/settings');
settings = await r.json();
populateVoiceSelect(document.getElementById('tts-mode-select').value, prevVoice);
}
function updateKnobLabel(sliderId, labelId) {
document.getElementById(labelId).textContent = parseFloat(document.getElementById(sliderId).value).toFixed(2);
}
function loadKnobsForVoice(filename) {
const t = settings.chatterbox_temperature_offsets?.[filename];
const e = settings.chatterbox_exaggeration_offsets?.[filename];
const v = settings.chatterbox_volume_offsets?.[filename] ?? 0;
const s = settings.chatterbox_speed_offsets?.[filename] ?? 1.0;
document.getElementById('cb-temp').value = t ?? 0.5;
document.getElementById('cb-exag').value = e ?? 1.0;
document.getElementById('cb-vol').value = v;
document.getElementById('cb-speed').value = s;
document.getElementById('cb-temp-val').textContent = t != null ? parseFloat(t).toFixed(2) : '—';
document.getElementById('cb-exag-val').textContent = e != null ? parseFloat(e).toFixed(2) : '—';
document.getElementById('cb-vol-val').textContent = parseFloat(v).toFixed(1);
document.getElementById('cb-speed-val').textContent = parseFloat(s).toFixed(2);
document.getElementById('knob-status').textContent = '';
}
function populateVoiceSelect(mode, restoreVoice) {
const sel = document.getElementById('tts-voice-select');
const group = document.getElementById('voice-select-group');
const knobs = document.getElementById('cb-knobs');
sel.innerHTML = '<option value="">— use my saved voice —</option>';
knobs.style.display = 'none';
if (mode === 'chatterbox') {
group.style.display = '';
(settings.chatterbox_voices || []).forEach(filename => {
const parts = filename.split('_');
const display = parts.length > 1 ? parts.slice(1).join('_').replace(/\.[^.]+$/, '') : filename;
const opt = document.createElement('option');
opt.value = filename; opt.textContent = display;
sel.appendChild(opt);
});
// Restore previous selection, fall back to saved active voice
const target = restoreVoice || settings.user_voice || '';
if (target) sel.value = target;
// If the target wasn't in the list, sel.value will be "" (default option) — that's fine
const active = sel.value || settings.user_voice;
if (active) { knobs.style.display = ''; loadKnobsForVoice(active); }
if (settings.user_voice) {
const parts = settings.user_voice.split('_');
document.getElementById('active-voice-display').textContent =
parts.length > 1 ? parts.slice(1).join('_').replace(/\.[^.]+$/, '') : settings.user_voice;
}
} else if (mode === 'minimax') {
group.style.display = '';
const voices = settings.minimax_voices || {};
Object.entries(voices).forEach(([name, id]) => {
const opt = document.createElement('option');
opt.value = id; opt.textContent = name;
sel.appendChild(opt);
});
const target = restoreVoice || settings.user_voice || '';
if (target) sel.value = target;
} else {
group.style.display = 'none';
}
}
function onVoiceChange() {
const mode = document.getElementById('tts-mode-select').value;
const voice = document.getElementById('tts-voice-select').value;
const knobs = document.getElementById('cb-knobs');
if (mode === 'chatterbox' && voice) { knobs.style.display = ''; loadKnobsForVoice(voice); }
else knobs.style.display = 'none';
}
function onModeChange() {
populateVoiceSelect(document.getElementById('tts-mode-select').value);
document.getElementById('gen-only-btn').style.display =
document.getElementById('tts-mode-select').value === 'chatterbox' ? '' : 'none';
}
async function saveKnobs() {
const voice = document.getElementById('tts-voice-select').value || settings.user_voice;
if (!voice) return;
const params = {
temperature: parseFloat(document.getElementById('cb-temp').value),
exaggeration: parseFloat(document.getElementById('cb-exag').value),
volume_db: parseFloat(document.getElementById('cb-vol').value),
speed: parseFloat(document.getElementById('cb-speed').value),
};
const r = await apiFetch('/api/settings/chatterbox_params', {method:'POST', body: JSON.stringify({voice, params})});
const d = await r.json();
document.getElementById('knob-status').textContent = d.ok ? 'Saved.' : 'Error: ' + d.error;
if (d.ok) await loadSettings();
}
async function resetKnobs() {
const voice = document.getElementById('tts-voice-select').value || settings.user_voice;
if (!voice) return;
const r = await apiFetch('/api/settings/chatterbox_params', {method:'POST', body: JSON.stringify({voice, params:{temperature:null,exaggeration:null,volume_db:0,speed:1.0}})});
const d = await r.json();
document.getElementById('knob-status').textContent = d.ok ? 'Reset to defaults.' : 'Error: ' + d.error;
if (d.ok) await loadSettings();
}
async function submitTTS() {
const text = document.getElementById('tts-text').value.trim();
if (!text) return;
const mode = document.getElementById('tts-mode-select').value;
const voice = document.getElementById('tts-voice-select').value || null;
const spinner = document.getElementById('spinner');
const status = document.getElementById('tts-status');
const result = document.getElementById('tts-result');
spinner.style.display = 'inline-block';
status.textContent = 'Sending to bot...';
result.style.display = 'none';
const r = await apiFetch('/api/tts', {method:'POST', body: JSON.stringify({text, mode, voice})});
const {job_id, error} = await r.json();
if (error) { spinner.style.display='none'; status.textContent = 'Error: ' + error; return; }
const poll = setInterval(async () => {
const s = await apiFetch(`/api/tts/${job_id}/status`);
const job = await s.json();
if (job.status === 'done') {
clearInterval(poll);
spinner.style.display = 'none';
status.textContent = 'Playing in VC — posted to Discord channel.';
document.getElementById('tts-audio').src = `/api/tts/${job_id}/audio`;
result.style.display = 'block';
} else if (job.status === 'error') {
clearInterval(poll);
spinner.style.display = 'none';
status.textContent = 'Error: ' + job.error;
}
}, 800);
}
async function generateOnly() {
const text = document.getElementById('tts-text').value.trim();
if (!text) return;
const mode = document.getElementById('tts-mode-select').value;
const voice = document.getElementById('tts-voice-select').value || null;
const spinner = document.getElementById('gen-spinner');
const status = document.getElementById('tts-status');
const result = document.getElementById('tts-result');
spinner.style.display = 'inline-block';
status.textContent = 'Generating audio...';
result.style.display = 'none';
const r = await apiFetch('/api/tts/generate', {method:'POST', body: JSON.stringify({text, mode, voice})});
const {job_id, error} = await r.json();
if (error) { spinner.style.display='none'; status.textContent = 'Error: ' + error; return; }
const poll = setInterval(async () => {
const s = await apiFetch(`/api/tts/${job_id}/status`);
const job = await s.json();
if (job.status === 'done') {
clearInterval(poll);
spinner.style.display = 'none';
status.textContent = 'Audio ready — posted to Discord channel.';
document.getElementById('tts-audio').src = `/api/tts/${job_id}/audio`;
result.style.display = 'block';
} else if (job.status === 'error') {
clearInterval(poll);
spinner.style.display = 'none';
status.textContent = 'Error: ' + job.error;
}
}, 800);
}
async function saveMode() {
const mode = document.getElementById('tts-mode-select').value;
const r = await apiFetch('/api/settings/mode', {method:'POST', body: JSON.stringify({mode})});
const d = await r.json();
document.getElementById('mode-status').textContent = d.ok ? 'Saved: ' + mode : 'Error: ' + d.error;
}
loadSettings();
loadSfxEmojis();
// Show generate-only button if initial mode is chatterbox
document.getElementById('gen-only-btn').style.display =
document.getElementById('tts-mode-select').value === 'chatterbox' ? '' : 'none';
let sfxEmojis = [];
let sfxDrawerOpen = false;
async function loadSfxEmojis() {
try {
const r = await apiFetch('/api/sfx_emojis');
sfxEmojis = await r.json();
renderSfxGrid();
} catch(e) { console.warn('Could not load SFX emojis', e); }
}
function renderSfxGrid() {
const grid = document.getElementById('sfx-grid');
if (!sfxEmojis.length) { grid.innerHTML = '<span class="muted">No SFX available.</span>'; return; }
grid.innerHTML = sfxEmojis.map(s =>
`<button type="button" onclick="insertSfx('${s.emoji}')" title="${s.name}"
style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:4px;
padding:0.3rem 0.5rem;cursor:pointer;font-size:1rem;line-height:1.2;display:flex;
flex-direction:column;align-items:center;gap:2px;min-width:52px;transition:background 0.12s;"
onmouseenter="this.style.background='rgba(255,255,255,0.08)'" onmouseleave="this.style.background='rgba(255,255,255,0.04)'">
<span style="font-size:1.25rem;">${s.emoji}</span>
<span style="font-size:0.62rem;color:rgba(140,180,230,0.4);">${s.name}</span>
</button>`
).join('');
}
function toggleSfxDrawer() {
sfxDrawerOpen = !sfxDrawerOpen;
document.getElementById('sfx-drawer').style.display = sfxDrawerOpen ? '' : 'none';
}
function insertSfx(emoji) {
const ta = document.getElementById('tts-text');
const start = ta.selectionStart;
const end = ta.selectionEnd;
ta.value = ta.value.substring(0, start) + emoji + ta.value.substring(end);
ta.selectionStart = ta.selectionEnd = start + emoji.length;
ta.focus();
}
loadSfxEmojis();
</script>
{% endblock %}
+50
View File
@@ -0,0 +1,50 @@
{% extends "base.html" %}
{% block title %}DECTalk — TtsToy{% endblock %}
{% block content %}
<div style="margin-bottom:1.25rem;">
<h1 style="font-size:1rem;font-weight:300;color:#e0ecff;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 16px rgba(80,150,255,0.2);">DECTalk</h1>
</div>
<div class="card">
<h2>About</h2>
<div style="font-size:0.85rem;color:#b0c8e0;margin-bottom:0.5rem;">Classic 1980s robotic speech synthesizer. Voices are controlled inline using commands embedded in your text.</div>
<div class="muted">Server URL: <code>{{ gcfg.get('dectalk_api_url', 'http://127.0.0.1:3001') }}</code></div>
</div>
<div class="card">
<h2>Voice Commands</h2>
<div class="muted" style="margin-bottom:0.9rem;">Embed these in your TTS text to switch voices mid-sentence.</div>
<table>
<thead><tr><th>Command</th><th>Voice</th><th>Description</th></tr></thead>
<tbody>
{% for cmd, name, desc in [
("[:np]","Paul","Perfect Paul — default male"),
("[:nb]","Betty","Beautiful Betty — female"),
("[:nh]","Harry","Huge Harry — deep male"),
("[:nf]","Frank","Frail Frank — male"),
("[:nd]","Dennis","Doctor Dennis — male"),
("[:nk]","Kit","Kit the Kid — child"),
("[:nu]","Ursula","Uppity Ursula — female"),
("[:nr]","Rita","Rough Rita — female"),
("[:nw]","Wendy","Whispering Wendy — female"),
] %}
<tr>
<td><code>{{ cmd }}</code></td>
<td style="color:#c8daf0;font-weight:300;">{{ name }}</td>
<td>{{ desc }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="card">
<h2>Example</h2>
<code style="display:block;padding:0.75rem;font-size:0.85rem;line-height:1.5;">
[:np]Hello, I am Paul. [:nb]And I am Betty. [:nh]I am Harry, the big one.
</code>
<div class="muted" style="margin-top:0.75rem;">
See the <a href="https://theflameofhope.co/DECTALK.pdf" target="_blank">DECTalk manual</a> for advanced rate, pitch, and phoneme control.
</div>
</div>
{% endblock %}
+32
View File
@@ -0,0 +1,32 @@
{% extends "base.html" %}
{% block title %}Login — TtsToy{% endblock %}
{% block content %}
<div style="max-width:380px;margin:5rem auto;">
<div class="card">
<div style="text-align:center;margin-bottom:1.25rem;">
<div style="font-size:1.3rem;font-weight:200;color:#e0ecff;letter-spacing:3px;text-shadow:0 0 20px rgba(80,160,255,0.2);">TTSTOY</div>
<div class="muted" style="margin-top:0.3rem;">Web Interface</div>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% for cat, msg in messages %}
<div class="alert alert-{{ cat }}">{{ msg }}</div>
{% endfor %}
{% endwith %}
<div class="alert alert-info" style="margin-bottom:1.25rem;font-size:0.8rem;line-height:1.5;">
Run <code>[p]login</code> in Discord.<br>
The bot will DM you a one-time key.<br>
Paste it below and click Login.
</div>
<form method="POST" action="{{ url_for('login_submit') }}">
<div class="form-group">
<label for="token">One-time login key</label>
<input type="text" id="token" name="token" placeholder="Paste your key here" autocomplete="off" autofocus>
</div>
<button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;padding:0.6rem;">Login</button>
</form>
</div>
</div>
{% endblock %}
+53
View File
@@ -0,0 +1,53 @@
{% extends "base.html" %}
{% block title %}MiniMax — TtsToy{% endblock %}
{% block content %}
<div style="margin-bottom:1.25rem;">
<h1 style="font-size:1rem;font-weight:300;color:#e0ecff;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 16px rgba(80,150,255,0.2);">MiniMax</h1>
</div>
<div class="card">
<h2>About</h2>
<div style="font-size:0.85rem;color:#b0c8e0;margin-bottom:0.5rem;">MiniMax is a cloud TTS API with natural-sounding voices. Requires an API key set by the bot owner.</div>
<div class="muted">Current model: <code>{{ gcfg.get('minimax_model', 'speech-01-turbo') }}</code></div>
</div>
<div class="card">
<h2>Available Voices</h2>
<div class="muted" style="margin-bottom:0.9rem;">Click a voice to set it as your personal voice.</div>
<table>
<thead><tr><th>Name</th><th>Voice ID</th><th></th></tr></thead>
<tbody>
{% for name, vid in voices.items() %}
<tr>
<td style="color:#c8daf0;font-weight:300;">{{ name }}</td>
<td><code>{{ vid }}</code></td>
<td><button class="btn btn-secondary btn-sm" onclick="setVoice('{{ vid }}','{{ name }}')">Use</button></td>
</tr>
{% endfor %}
</tbody>
</table>
<div id="voice-status" class="muted" style="margin-top:0.75rem;"></div>
</div>
<div class="card">
<h2>Models</h2>
<table>
<thead><tr><th>Model</th><th>Description</th></tr></thead>
<tbody>
{% for m, desc in [("speech-01-turbo","Fast and cheap"),("speech-01-hd","Higher quality, slower"),("speech-02-turbo","Newer fast model"),("speech-02-hd","Newer high quality model")] %}
<tr><td><code>{{ m }}</code></td><td>{{ desc }}</td></tr>
{% endfor %}
</tbody>
</table>
<div class="muted" style="margin-top:0.75rem;">Model can only be changed by the bot owner via <code>[p]ttstoy model</code>.</div>
</div>
{% endblock %}
{% block scripts %}
<script>
async function setVoice(vid, name) {
const r = await apiFetch('/api/settings/voice', {method:'POST', body: JSON.stringify({voice: vid})});
const d = await r.json();
document.getElementById('voice-status').textContent = d.ok ? 'Voice set to ' + name + '.' : 'Error: ' + d.error;
}
</script>
{% endblock %}
+83
View File
@@ -0,0 +1,83 @@
{% extends "base.html" %}
{% block title %}Profile — TtsToy{% endblock %}
{% block content %}
<div style="margin-bottom:1.25rem;">
<h1 style="font-size:1rem;font-weight:300;color:#e0ecff;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 16px rgba(80,150,255,0.2);">Profile</h1>
</div>
<div class="card">
<h2>Discord</h2>
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1rem;">
{% if session.get('avatar_url') %}
<img src="{{ session.avatar_url }}" style="width:52px;height:52px;border-radius:50%;border:2px solid rgba(80,120,180,0.3);">
{% endif %}
<div>
<div style="font-size:1rem;font-weight:300;color:#c8daf0;">{{ session.get('discord_name', 'Unknown') }}</div>
<div class="muted">ID: {{ session.get('user_id') }}</div>
</div>
</div>
{% if user_info %}
<table>
{% for k, v in user_info.items() %}
<tr><td style="color:rgba(140,180,230,0.4);width:40%;">{{ k }}</td><td>{{ v }}</td></tr>
{% endfor %}
</table>
{% else %}
<div class="muted">No additional info available from the bot yet.</div>
{% endif %}
</div>
<div class="card">
<h2>TtsToy Settings</h2>
<table>
<tr>
<td style="color:rgba(140,180,230,0.4);width:40%;">Active Voice</td>
<td>
{% if ucfg.get('minimax_voice') %}
{% set v = ucfg.minimax_voice %}
{{ v.split('_',1)[1].rsplit('.',1)[0] if '_' in v else v }}
{% else %}
<span class="muted">Global default</span>
{% endif %}
</td>
</tr>
<tr>
<td style="color:rgba(140,180,230,0.4);">Uploaded Voices</td>
<td>{{ ucfg.get('chatterbox_voices', []) | length }}</td>
</tr>
<tr>
<td style="color:rgba(140,180,230,0.4);">Global TTS Mode</td>
<td><span class="badge badge-mode">{{ gcfg.get('tts_mode','minimax').upper() }}</span></td>
</tr>
<tr>
<td style="color:rgba(140,180,230,0.4);">SFX Volume</td>
<td>{{ gcfg.get('sfx_volume', 100) }}%</td>
</tr>
<tr>
<td style="color:rgba(140,180,230,0.4);">Accessibility Mode</td>
<td>{{ 'On' if gcfg.get('accessibility_mode') else 'Off' }}</td>
</tr>
</table>
</div>
{% if ucfg.get('chatterbox_voices') %}
<div class="card">
<h2>Per-Voice Settings</h2>
<table>
<thead><tr><th>Voice</th><th>Temp</th><th>Exag</th><th>Vol dB</th><th>Speed</th></tr></thead>
<tbody>
{% for v in ucfg.get('chatterbox_voices', []) %}
{% set display = v.split('_',1)[1].rsplit('.',1)[0] if '_' in v else v %}
<tr>
<td style="color:#c8daf0;">{{ display }}</td>
<td>{{ ucfg.get('chatterbox_temperature_offsets',{}).get(v, '—') }}</td>
<td>{{ ucfg.get('chatterbox_exaggeration_offsets',{}).get(v, '—') }}</td>
<td>{{ ucfg.get('chatterbox_volume_offsets',{}).get(v, '—') }}</td>
<td>{{ ucfg.get('chatterbox_speed_offsets',{}).get(v, '—') }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% endblock %}
+107
View File
@@ -0,0 +1,107 @@
{% extends "base.html" %}
{% block title %}SFX Manager — TtsToy{% endblock %}
{% block content %}
<div style="margin-bottom:1.25rem;">
<h1 style="font-size:1rem;font-weight:300;color:#e0ecff;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 16px rgba(80,150,255,0.2);">Sound Effects Manager</h1>
<div class="muted" style="margin-top:0.3rem;">Each SFX has one emoji trigger and one audio file. Users insert the emoji in their TTS text to play the sound.</div>
</div>
<div class="card">
<h2>Add New SFX</h2>
<div class="row">
<div class="col form-group" style="max-width:180px;">
<label>Name</label>
<input type="text" id="new-name" placeholder="e.g. airhorn">
</div>
<div class="col form-group" style="max-width:80px;">
<label>Emoji</label>
<input type="text" id="new-emoji" placeholder="📢" style="font-size:1.1rem;text-align:center;">
</div>
<div class="col form-group">
<label>Audio File (.mp3 / .wav / .ogg)</label>
<input type="file" id="new-file" accept=".mp3,.wav,.ogg">
</div>
</div>
<div style="display:flex;gap:0.5rem;align-items:center;">
<button class="btn btn-primary btn-sm" onclick="addSfx()">Add SFX</button>
<span id="add-status" class="muted"></span>
</div>
</div>
<div class="card">
<h2>SFX Library</h2>
<table id="sfx-table">
<thead><tr><th>Emoji</th><th>Name</th><th>File</th><th></th></tr></thead>
<tbody id="sfx-body"><tr><td colspan="4" class="muted">Loading...</td></tr></tbody>
</table>
</div>
{% endblock %}
{% block scripts %}
<script>
let sfxData = [];
async function loadSfx() {
const r = await apiFetch('/api/sfx');
sfxData = await r.json();
render();
}
function render() {
const tb = document.getElementById('sfx-body');
if (!sfxData.length) { tb.innerHTML = '<tr><td colspan="4" class="muted">No SFX yet.</td></tr>'; return; }
tb.innerHTML = sfxData.map(s => {
const emoji = s.emoji || '';
const file = s.file || '';
return `<tr>
<td style="font-size:1.3rem;text-align:center;width:50px;">
<input type="text" value="${emoji}" style="width:40px;font-size:1.2rem;text-align:center;padding:2px;"
onchange="setEmoji('${s.name}', this.value)">
</td>
<td style="color:#c8daf0;">${s.name}</td>
<td>${file ? `<span style="font-size:0.82rem;color:#b0c8e0;">${file}</span>` : '<span class="muted">none</span>'}</td>
<td style="text-align:right;">
<button class="btn btn-danger btn-sm" onclick="deleteSfx('${s.name}')">Delete</button>
</td>
</tr>`;
}).join('');
}
async function setEmoji(name, emoji) {
emoji = emoji.trim();
const r = await apiFetch('/api/sfx/emoji_map', {method:'POST', body: JSON.stringify({emoji, folder: emoji ? name : '', name})});
const d = await r.json();
if (!d.ok) alert('Error: ' + (d.error || 'unknown'));
await loadSfx();
}
async function addSfx() {
const name = document.getElementById('new-name').value.trim().toLowerCase().replace(/[^a-z0-9_-]/g, '');
const emoji = document.getElementById('new-emoji').value.trim();
const file = document.getElementById('new-file').files[0];
const status = document.getElementById('add-status');
if (!name) { status.textContent = 'Enter a name.'; return; }
if (!emoji) { status.textContent = 'Enter an emoji.'; return; }
if (!file) { status.textContent = 'Select an audio file.'; return; }
status.textContent = 'Uploading...';
const fd = new FormData();
fd.append('file', file);
const r = await fetch('/api/sfx/' + encodeURIComponent(name) + '/upload', {method:'POST', body: fd});
const d = await r.json();
if (!d.ok) { status.textContent = 'Error: ' + d.error; return; }
await apiFetch('/api/sfx/emoji_map', {method:'POST', body: JSON.stringify({emoji, folder: name})});
status.textContent = 'Added.';
document.getElementById('new-name').value = '';
document.getElementById('new-emoji').value = '';
document.getElementById('new-file').value = '';
await loadSfx();
}
async function deleteSfx(name) {
if (!confirm('Delete SFX "' + name + '"?')) return;
await fetch('/api/sfx/' + encodeURIComponent(name), {method:'DELETE'});
await loadSfx();
}
loadSfx();
</script>
{% endblock %}
+35
View File
@@ -0,0 +1,35 @@
{% extends "base.html" %}
{% block title %}VOX — TtsToy{% endblock %}
{% block content %}
<div style="margin-bottom:1.25rem;">
<h1 style="font-size:1rem;font-weight:300;color:#e0ecff;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 16px rgba(80,150,255,0.2);">VOX Announcer</h1>
</div>
<div class="card">
<h2>About</h2>
<div style="font-size:0.85rem;color:#b0c8e0;margin-bottom:0.5rem;">Black Mesa / Half-Life VOX announcer. Only words in the dictionary are spoken — unknown words are silently skipped.</div>
<div class="muted">Current pack: <code>{{ current_pack }}</code> &nbsp;|&nbsp; Available: {{ packs | join(', ') }}</div>
</div>
<div class="card">
<h2>Available Words ({{ words | length }})</h2>
<div class="form-group" style="margin-bottom:0.9rem;">
<input type="text" id="word-filter" placeholder="Filter words..." oninput="filterWords()">
</div>
<div id="word-grid" style="display:flex;flex-wrap:wrap;gap:0.35rem;max-height:380px;overflow-y:auto;padding-right:4px;">
{% for w in words %}
<span style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:3px;padding:0.15rem 0.45rem;font-size:0.78rem;color:rgba(140,200,255,0.8);" data-word="{{ w }}">{{ w }}</span>
{% endfor %}
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
function filterWords() {
const q = document.getElementById('word-filter').value.toLowerCase();
document.querySelectorAll('#word-grid [data-word]').forEach(el => {
el.style.display = el.dataset.word.includes(q) ? '' : 'none';
});
}
</script>
{% endblock %}