refactor: move webui out of cog, use shared-state pending queue
- drop bundled Flask webui (now lives in scrapyard-website TtsToy) - _take_pending_state_updates: pop pending commands/posts + refresh user info under cross-process lock, matching the webui-side producer
This commit is contained in:
owen
+137
-267
@@ -12,6 +12,11 @@ from pathlib import Path
|
||||
import lavalink
|
||||
from typing import Optional
|
||||
|
||||
try:
|
||||
import fcntl as _fcntl
|
||||
except ImportError: # pragma: no cover - Windows
|
||||
_fcntl = None
|
||||
|
||||
import discord
|
||||
from discord.ext import tasks
|
||||
import requests
|
||||
@@ -384,7 +389,6 @@ class TtsToy(Cog):
|
||||
|
||||
self._health_server: HTTPServer | None = None
|
||||
self._health_thread: threading.Thread | None = None
|
||||
self._webui_process = None # subprocess for the Flask web UI
|
||||
|
||||
self.config: Config = Config.get_conf(
|
||||
self, identifier=0x0A0A0A0A, force_registration=True
|
||||
@@ -437,7 +441,7 @@ class TtsToy(Cog):
|
||||
self.clear_old_tts.stop()
|
||||
if self._webui_state_processor.is_running():
|
||||
self._webui_state_processor.stop()
|
||||
await self._stop_webui()
|
||||
self._kill_leftover_webui()
|
||||
await self._stop_dectalk_server()
|
||||
await self._stop_morshu_server()
|
||||
await self._stop_vox_server()
|
||||
@@ -455,6 +459,20 @@ class TtsToy(Cog):
|
||||
if self.tts_processors:
|
||||
await asyncio.gather(*self.tts_processors.values(), return_exceptions=True)
|
||||
|
||||
def _kill_leftover_webui(self):
|
||||
"""Terminate any web UI subprocess left over from before the web UI
|
||||
moved out of the bot. It ran from <cog_dir>/webui/app.py, which no
|
||||
longer exists — so a matching process is guaranteed stale."""
|
||||
try:
|
||||
pattern = str(Path(__file__).resolve().parent / "webui" / "app.py")
|
||||
result = subprocess.run(
|
||||
["pkill", "-f", pattern], capture_output=True, text=True
|
||||
)
|
||||
if result.returncode == 0:
|
||||
log.info("[WebUI] Killed leftover web UI subprocess")
|
||||
except Exception as e:
|
||||
log.warning(f"[WebUI] Could not kill leftover web UI subprocess: {e}")
|
||||
|
||||
# -----------------------------------------
|
||||
async def _get_minimax_settings(self):
|
||||
return (
|
||||
@@ -3088,40 +3106,31 @@ class TtsToy(Cog):
|
||||
@ttstoy_group.command(name="webuistatus")
|
||||
@commands.is_owner()
|
||||
async def webui_status_cmd(self, ctx: commands.Context):
|
||||
"""Check the status of the TtsToy web UI."""
|
||||
"""Check the status of the TtsToy web UI (now a scrapyard service)."""
|
||||
webui_url = self._get_webui_url()
|
||||
process_running = self._webui_process and self._webui_process.poll() is None
|
||||
pid = self._webui_process.pid if process_running else None
|
||||
|
||||
# Try to hit the login page
|
||||
reachable = False
|
||||
try:
|
||||
r = await asyncio.to_thread(requests.get, f"{webui_url}/login", timeout=3)
|
||||
r = await asyncio.to_thread(requests.get, f"{webui_url.rstrip('/')}/login", timeout=3)
|
||||
reachable = r.status_code == 200
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
lines = [
|
||||
"**TtsToy Web UI Status**",
|
||||
f"Process running: {'✅ Yes' if process_running else '❌ No'}{f' (pid {pid})' if pid else ''}",
|
||||
f"Reachable at URL: {'✅ Yes' if reachable else '❌ No'}",
|
||||
f"URL: {webui_url}",
|
||||
"The web UI now runs as a scrapyard service (not a bot subprocess).",
|
||||
f"Restart with: `sudo systemctl restart scrapyard`",
|
||||
]
|
||||
if not process_running:
|
||||
lines.append(f"\nRestart with: `{ctx.clean_prefix}ttstoy webuirestart`")
|
||||
await ctx.send("\n".join(lines))
|
||||
|
||||
@ttstoy_group.command(name="webuirestart")
|
||||
@commands.is_owner()
|
||||
async def webui_restart_cmd(self, ctx: commands.Context):
|
||||
"""Restart the TtsToy web UI."""
|
||||
await ctx.send("🔄 Restarting web UI...")
|
||||
await self._stop_webui()
|
||||
success = await self._start_webui()
|
||||
if success:
|
||||
await ctx.send(f"✅ Web UI restarted at {self._get_webui_url()}")
|
||||
else:
|
||||
await ctx.send("❌ Failed to start web UI. Check bot logs.")
|
||||
"""Restart the TtsToy web UI (now a scrapyard service)."""
|
||||
await ctx.send("🔄 The web UI is now a scrapyard service.\nRestart it with: `sudo systemctl restart scrapyard`")
|
||||
|
||||
# -------------------------------------------------------------------------
|
||||
# Background task — poll shared state for pending commands and posts
|
||||
@@ -3131,38 +3140,13 @@ class TtsToy(Cog):
|
||||
async def _webui_state_processor(self):
|
||||
"""Poll the shared state file and execute pending commands/posts from the web UI."""
|
||||
try:
|
||||
state = self._read_shared_state()
|
||||
changed = False
|
||||
pending_cmds, pending_posts = await asyncio.to_thread(self._take_pending_state_updates)
|
||||
|
||||
# --- Process pending commands (voice/mode changes from web UI) ---
|
||||
pending_cmds = state.pop("pending_commands", [])
|
||||
if pending_cmds:
|
||||
changed = True
|
||||
for cmd in pending_cmds:
|
||||
await self._handle_webui_command(cmd)
|
||||
for cmd in pending_cmds:
|
||||
await self._handle_webui_command(cmd)
|
||||
|
||||
# --- Process pending posts (TTS audio to post to Discord channel) ---
|
||||
pending_posts = state.pop("pending_posts", [])
|
||||
if pending_posts:
|
||||
changed = True
|
||||
for post in pending_posts:
|
||||
await self._handle_webui_post(post)
|
||||
|
||||
# --- Write updated user info so the profile page stays fresh ---
|
||||
users_info = state.get("users", {})
|
||||
for guild in self.bot.guilds:
|
||||
for member in guild.members:
|
||||
uid = str(member.id)
|
||||
if uid not in users_info:
|
||||
users_info[uid] = {}
|
||||
users_info[uid]["display_name"] = member.display_name
|
||||
users_info[uid]["username"] = str(member)
|
||||
users_info[uid]["joined_at"] = str(member.joined_at)[:10] if member.joined_at else "unknown"
|
||||
users_info[uid]["roles"] = ", ".join(r.name for r in member.roles if r.name != "@everyone")
|
||||
state["users"] = users_info
|
||||
|
||||
if changed or True: # always write to keep user info fresh
|
||||
self._write_shared_state(state)
|
||||
for post in pending_posts:
|
||||
await self._handle_webui_post(post)
|
||||
|
||||
# Reload emoji→SFX mapping in case it was changed via the web UI
|
||||
_reload_emoji_sfx_map()
|
||||
@@ -3170,6 +3154,40 @@ class TtsToy(Cog):
|
||||
except Exception as e:
|
||||
log.exception("[WebUI] State processor error: %s", e)
|
||||
|
||||
def _take_pending_state_updates(self):
|
||||
"""Under a cross-process lock: pop pending commands/posts and refresh user info.
|
||||
|
||||
Returns (pending_cmds, pending_posts). Runs in a worker thread — the
|
||||
lock matches the one the web UI uses when appending, so no updates are
|
||||
lost between the read and the write.
|
||||
"""
|
||||
lock_file = Path(os.environ.get("TTSTOY_SHARED_STATE_LOCK", "/tmp/ttstoy_webui_state.lock"))
|
||||
with open(lock_file, "w") as lf:
|
||||
if _fcntl is not None:
|
||||
_fcntl.flock(lf, _fcntl.LOCK_EX)
|
||||
try:
|
||||
state = self._read_shared_state()
|
||||
pending_cmds = state.pop("pending_commands", [])
|
||||
pending_posts = state.pop("pending_posts", [])
|
||||
|
||||
# Refresh user info so the profile page stays current
|
||||
users_info = state.get("users", {})
|
||||
for guild in self.bot.guilds:
|
||||
for member in guild.members:
|
||||
uid = str(member.id)
|
||||
info = users_info.setdefault(uid, {})
|
||||
info["display_name"] = member.display_name
|
||||
info["username"] = str(member)
|
||||
info["joined_at"] = str(member.joined_at)[:10] if member.joined_at else "unknown"
|
||||
info["roles"] = ", ".join(r.name for r in member.roles if r.name != "@everyone")
|
||||
state["users"] = users_info
|
||||
|
||||
self._write_shared_state(state)
|
||||
finally:
|
||||
if _fcntl is not None:
|
||||
_fcntl.flock(lf, _fcntl.LOCK_UN)
|
||||
return pending_cmds, pending_posts
|
||||
|
||||
async def _handle_webui_command(self, cmd: dict):
|
||||
"""Execute a command queued by the web UI."""
|
||||
user_id = int(cmd.get("user_id", 0))
|
||||
@@ -3182,10 +3200,7 @@ class TtsToy(Cog):
|
||||
return
|
||||
|
||||
try:
|
||||
if action == "speak_in_vc":
|
||||
await self._webui_speak_in_vc(user, payload)
|
||||
|
||||
elif action == "set_voice":
|
||||
if action == "set_voice":
|
||||
voice = payload.get("voice", "")
|
||||
await self.config.user(user).minimax_voice.set(voice)
|
||||
log.info(f"[WebUI] Set voice for {user} → {voice}")
|
||||
@@ -3245,159 +3260,40 @@ class TtsToy(Cog):
|
||||
except Exception as e:
|
||||
log.exception(f"[WebUI] Error handling command {action} for user {user_id}: {e}")
|
||||
|
||||
async def _webui_speak_in_vc(self, user: discord.User, payload: dict):
|
||||
"""Generate TTS from a web UI request and play it in the user's current VC."""
|
||||
job_id = payload.get("job_id")
|
||||
text = payload.get("text", "")
|
||||
discord_name = payload.get("user", str(user))
|
||||
mode_override = payload.get("mode_override") # per-request mode from web UI
|
||||
voice_override = payload.get("voice_override") # per-request voice from web UI
|
||||
skip_vc = payload.get("skip_vc", False)
|
||||
skip_post = payload.get("skip_post", False)
|
||||
guild_id_str = payload.get("guild_id", "")
|
||||
log.info(f"[WebUI] speak_in_vc: user={user} job={job_id} guild={guild_id_str} mode_override={mode_override} voice_override={voice_override} skip_vc={skip_vc} skip_post={skip_post} text={text[:60]!r}")
|
||||
|
||||
webui_url = self._get_webui_internal_url()
|
||||
secret = self._get_internal_secret()
|
||||
|
||||
def _update_job(status, **kwargs):
|
||||
try:
|
||||
requests.post(
|
||||
f"{webui_url.rstrip('/')}/api/tts/{job_id}/update",
|
||||
headers={"X-Internal-Secret": secret, "Content-Type": "application/json"},
|
||||
json={"status": status, **kwargs},
|
||||
timeout=5,
|
||||
)
|
||||
log.debug(f"[WebUI] Job {job_id} updated → {status}")
|
||||
except Exception as e:
|
||||
log.warning(f"[WebUI] Could not update job {job_id}: {e}")
|
||||
|
||||
# Find which guild/VC the user is currently in
|
||||
# Prefer the guild they logged in from
|
||||
member_vc = None
|
||||
member_guild = None
|
||||
target_guild_id = int(guild_id_str) if guild_id_str else None
|
||||
if target_guild_id:
|
||||
guild = self.bot.get_guild(target_guild_id)
|
||||
if guild:
|
||||
member_guild = guild
|
||||
member = guild.get_member(user.id)
|
||||
if member and member.voice and member.voice.channel:
|
||||
member_vc = member.voice.channel
|
||||
# Fallback: search all guilds for VC presence
|
||||
if not member_vc:
|
||||
for guild in self.bot.guilds:
|
||||
member = guild.get_member(user.id)
|
||||
if member and member.voice and member.voice.channel:
|
||||
member_vc = member.voice.channel
|
||||
if not member_guild:
|
||||
member_guild = guild
|
||||
break
|
||||
|
||||
if not member_vc:
|
||||
log.info(f"[WebUI] {user} is not in a VC — will generate audio only")
|
||||
|
||||
log.info(f"[WebUI] Target VC: {member_vc} in {member_guild}")
|
||||
|
||||
# Gather TTS settings — respect web UI overrides
|
||||
mode = mode_override if mode_override else await self._get_tts_mode()
|
||||
chatterbox_url = await self._get_chatterbox_api_url()
|
||||
dectalk_url = await self._get_dectalk_api_url()
|
||||
api_key, model, _ = await self._get_minimax_settings()
|
||||
# Voice: use override if provided, otherwise user's saved voice
|
||||
if voice_override:
|
||||
voice_id = voice_override
|
||||
else:
|
||||
voice_id = await self._get_effective_minimax_voice(user)
|
||||
sfx_volume = await self.config.sfx_volume()
|
||||
vox_pack = await self.config.vox_pack()
|
||||
cb_temp = cb_exag = cb_speed = None
|
||||
cb_vol_db = 0.0
|
||||
if mode == "chatterbox":
|
||||
cb_temp = (await self.config.user(user).chatterbox_temperature_offsets()).get(voice_id)
|
||||
cb_exag = (await self.config.user(user).chatterbox_exaggeration_offsets()).get(voice_id)
|
||||
cb_vol_db = (await self.config.user(user).chatterbox_volume_offsets()).get(voice_id, 0.0)
|
||||
cb_speed = (await self.config.user(user).chatterbox_speed_offsets()).get(voice_id)
|
||||
|
||||
log.debug(f"[WebUI] TTS params: mode={mode} voice={voice_id} temp={cb_temp} exag={cb_exag}")
|
||||
|
||||
self.tts_storage.mkdir(parents=True, exist_ok=True)
|
||||
audio_path = str(self.tts_storage / f"webui_{job_id}.mp3")
|
||||
|
||||
all_cb_voices = await self._get_all_chatterbox_voices()
|
||||
|
||||
try:
|
||||
await asyncio.to_thread(
|
||||
self._save_prompt_audio,
|
||||
api_key, model, voice_id, text, audio_path,
|
||||
sfx_volume, mode, dectalk_url, vox_pack,
|
||||
chatterbox_url, cb_temp, cb_exag, cb_vol_db, cb_speed,
|
||||
all_cb_voices,
|
||||
)
|
||||
log.info(f"[WebUI] Audio generated: {audio_path}")
|
||||
except Exception as e:
|
||||
log.exception(f"[WebUI] TTS generation failed for job {job_id}: {e}")
|
||||
await asyncio.to_thread(_update_job, "error", error=str(e))
|
||||
return
|
||||
|
||||
# Queue for VC playback only if user is in a voice channel and skip_vc is not set
|
||||
if member_vc and member_guild and not skip_vc:
|
||||
try:
|
||||
audio_cog: Optional[Audio] = self.bot.get_cog("Audio")
|
||||
if audio_cog:
|
||||
text_channel = member_guild.system_channel or next(
|
||||
(c for c in member_guild.text_channels
|
||||
if c.permissions_for(member_guild.me).send_messages), None
|
||||
)
|
||||
if text_channel:
|
||||
if not member_guild.me.voice or member_guild.me.voice.channel != member_vc:
|
||||
await member_vc.connect()
|
||||
|
||||
class _FakeCtx:
|
||||
guild = member_guild
|
||||
channel = text_channel
|
||||
author = member_guild.get_member(user.id) or user
|
||||
interaction = None
|
||||
async def react_quietly(self, *a, **kw): pass
|
||||
|
||||
queue = self._get_or_create_tts_queue(member_guild.id)
|
||||
await queue.put((_FakeCtx(), audio_path))
|
||||
log.info(f"[WebUI] Queued audio for VC playback: job={job_id}")
|
||||
except Exception as e:
|
||||
log.exception(f"[WebUI] VC playback failed for job {job_id}: {e}")
|
||||
|
||||
# Post transcript to Discord channel and mark job done
|
||||
# Resolve the best guild ID for posting: login guild > VC guild > empty
|
||||
post_guild_id = guild_id_str or (str(member_guild.id) if member_guild else "")
|
||||
if not skip_post:
|
||||
await self._handle_webui_post({
|
||||
"job_id": job_id, "path": audio_path,
|
||||
"text": text, "user": discord_name, "engine": mode,
|
||||
"guild_id": post_guild_id,
|
||||
})
|
||||
await asyncio.to_thread(_update_job, "done", path=audio_path)
|
||||
|
||||
async def _handle_webui_post(self, post: dict):
|
||||
"""Post a TTS audio file to the configured bot channel."""
|
||||
"""Deliver a pre-generated TTS file queued by the web UI.
|
||||
|
||||
If `play_vc` is set and the user is in a voice channel, the audio is
|
||||
queued for VC playback (via the standard ttstoy queue). Either way it is
|
||||
also posted as a message to the configured TTS channel.
|
||||
"""
|
||||
try:
|
||||
audio_path = post.get("path")
|
||||
text = post.get("text", "")
|
||||
user = post.get("user", "Unknown")
|
||||
engine = post.get("engine", "tts")
|
||||
guild_id_str = post.get("guild_id", "")
|
||||
user_id_str = post.get("user_id", "")
|
||||
play_vc = bool(post.get("play_vc", False))
|
||||
|
||||
if not audio_path or not os.path.exists(audio_path):
|
||||
log.warning(f"[WebUI] Audio file not found: {audio_path}")
|
||||
return
|
||||
|
||||
# Find the designated TTS channel in the user's login guild
|
||||
target_guild_id = int(guild_id_str) if guild_id_str else None
|
||||
|
||||
# --- VC playback (optional) ---
|
||||
if play_vc and user_id_str:
|
||||
await self._play_webui_audio_in_vc(user_id_str, audio_path, target_guild_id)
|
||||
|
||||
# --- Post transcript to the configured TTS channel ---
|
||||
channel = await self._get_webui_tts_channel(target_guild_id)
|
||||
if not channel:
|
||||
log.warning("[WebUI] No TTS channel configured. Set TTSTOY_WEBUI_CHANNEL_ID env var.")
|
||||
return
|
||||
|
||||
filename = f"webui-{engine}-tts.mp3"
|
||||
suffix = Path(audio_path).suffix or ".mp3"
|
||||
filename = f"webui-{engine}-tts{suffix}"
|
||||
content = f"🗣 **{discord.utils.escape_markdown(user)}** via web UI [{engine}]\n> {discord.utils.escape_markdown(text[:200])}"
|
||||
await channel.send(content=content, file=discord.File(audio_path, filename=filename))
|
||||
log.info(f"[WebUI] Posted TTS from {user} to channel {channel.id}")
|
||||
@@ -3405,6 +3301,61 @@ class TtsToy(Cog):
|
||||
except Exception as e:
|
||||
log.exception(f"[WebUI] Error posting TTS: {e}")
|
||||
|
||||
async def _play_webui_audio_in_vc(self, user_id_str: str, audio_path: str, target_guild_id: int = None):
|
||||
"""Queue a pre-generated audio file for VC playback in the user's current VC."""
|
||||
try:
|
||||
user_id = int(user_id_str)
|
||||
member_vc = None
|
||||
member_guild = None
|
||||
|
||||
if target_guild_id:
|
||||
guild = self.bot.get_guild(target_guild_id)
|
||||
if guild:
|
||||
member_guild = guild
|
||||
member = guild.get_member(user_id)
|
||||
if member and member.voice and member.voice.channel:
|
||||
member_vc = member.voice.channel
|
||||
if not member_vc:
|
||||
for guild in self.bot.guilds:
|
||||
member = guild.get_member(user_id)
|
||||
if member and member.voice and member.voice.channel:
|
||||
member_vc = member.voice.channel
|
||||
if not member_guild:
|
||||
member_guild = guild
|
||||
break
|
||||
|
||||
if not member_vc or not member_guild:
|
||||
log.info(f"[WebUI] {user_id} is not in a VC — skipping playback")
|
||||
return
|
||||
|
||||
member = member_guild.get_member(user_id)
|
||||
audio_cog: Optional[Audio] = self.bot.get_cog("Audio")
|
||||
if not audio_cog:
|
||||
log.warning("[WebUI] Audio cog not loaded — skipping VC playback")
|
||||
return
|
||||
text_channel = member_guild.system_channel or next(
|
||||
(c for c in member_guild.text_channels
|
||||
if c.permissions_for(member_guild.me).send_messages), None
|
||||
)
|
||||
if not text_channel:
|
||||
log.warning("[WebUI] No text channel available for VC playback")
|
||||
return
|
||||
if not member_guild.me.voice or member_guild.me.voice.channel != member_vc:
|
||||
await member_vc.connect()
|
||||
|
||||
class _FakeCtx:
|
||||
guild = member_guild
|
||||
channel = text_channel
|
||||
author = member or user_id
|
||||
interaction = None
|
||||
async def react_quietly(self, *a, **kw): pass
|
||||
|
||||
queue = self._get_or_create_tts_queue(member_guild.id)
|
||||
await queue.put((_FakeCtx(), audio_path))
|
||||
log.info(f"[WebUI] Queued audio for VC playback (user={user_id} guild={member_guild.id})")
|
||||
except Exception as e:
|
||||
log.exception(f"[WebUI] VC playback failed: {e}")
|
||||
|
||||
async def _get_webui_tts_channel(self, guild_id: int = None) -> Optional[discord.TextChannel]:
|
||||
"""Get the channel to post web UI TTS messages to.
|
||||
|
||||
@@ -3468,84 +3419,6 @@ class TtsToy(Cog):
|
||||
await self.config.guild(ctx.guild).webui_tts_channel_id.set(channel.id)
|
||||
await ctx.send(f"✅ Web UI TTS audio will be posted to {channel.mention} in this server")
|
||||
|
||||
# -------------------------------------------------------------------------
|
||||
# Web UI subprocess management
|
||||
# -------------------------------------------------------------------------
|
||||
|
||||
def _webui_app_path(self) -> Path:
|
||||
return Path(__file__).resolve().parent / "webui" / "app.py"
|
||||
|
||||
async def _start_webui(self):
|
||||
"""Launch the Flask web UI as a subprocess."""
|
||||
if self._webui_process and self._webui_process.poll() is None:
|
||||
log.info("[WebUI] Already running")
|
||||
return True
|
||||
|
||||
app_path = self._webui_app_path()
|
||||
if not app_path.exists():
|
||||
log.error(f"[WebUI] app.py not found at {app_path}")
|
||||
return False
|
||||
|
||||
env = os.environ.copy()
|
||||
env.setdefault("WEBUI_PORT", "8098")
|
||||
env.setdefault("WEBUI_URL", f"http://localhost:{env['WEBUI_PORT']}")
|
||||
env.setdefault("TTSTOY_SHARED_STATE", str(self.WEBUI_SHARED_STATE))
|
||||
if "BOT_INSTANCE" not in env:
|
||||
try:
|
||||
from redbot.core.data_manager import instance_name
|
||||
env["BOT_INSTANCE"] = instance_name()
|
||||
except Exception:
|
||||
env.setdefault("BOT_INSTANCE", "redbot")
|
||||
|
||||
try:
|
||||
import sys
|
||||
python = sys.executable
|
||||
req_file = app_path.parent / "requirements.txt"
|
||||
if req_file.exists():
|
||||
subprocess.run(
|
||||
[python, "-m", "pip", "install", "-q", "-r", str(req_file)],
|
||||
check=True, capture_output=True,
|
||||
)
|
||||
self._webui_process = subprocess.Popen(
|
||||
[python, str(app_path)],
|
||||
env=env,
|
||||
stdout=subprocess.PIPE,
|
||||
stderr=subprocess.STDOUT,
|
||||
text=True,
|
||||
)
|
||||
await asyncio.sleep(2)
|
||||
if self._webui_process.poll() is not None:
|
||||
out = self._webui_process.stdout.read(500) if self._webui_process.stdout else ""
|
||||
log.error(f"[WebUI] Process exited immediately: {out}")
|
||||
return False
|
||||
log.info(f"[WebUI] Started on port {env['WEBUI_PORT']} (pid {self._webui_process.pid})")
|
||||
|
||||
# Pipe subprocess stdout → RedBot logger in a background thread
|
||||
def _pipe_logs(proc):
|
||||
for line in proc.stdout:
|
||||
line = line.rstrip()
|
||||
if line:
|
||||
log.info(f"[WebUI] {line}")
|
||||
threading.Thread(target=_pipe_logs, args=(self._webui_process,), daemon=True).start()
|
||||
|
||||
return True
|
||||
except Exception as e:
|
||||
log.exception(f"[WebUI] Failed to start: {e}")
|
||||
return False
|
||||
|
||||
async def _stop_webui(self):
|
||||
"""Stop the Flask web UI subprocess."""
|
||||
if self._webui_process and self._webui_process.poll() is None:
|
||||
try:
|
||||
self._webui_process.terminate()
|
||||
await asyncio.sleep(1)
|
||||
if self._webui_process.poll() is None:
|
||||
self._webui_process.kill()
|
||||
log.info("[WebUI] Stopped")
|
||||
except Exception as e:
|
||||
log.exception(f"[WebUI] Error stopping: {e}")
|
||||
self._webui_process = None
|
||||
|
||||
# -------------------------------------------------------------------------
|
||||
# Cog lifecycle
|
||||
# -------------------------------------------------------------------------
|
||||
@@ -3576,9 +3449,6 @@ class TtsToy(Cog):
|
||||
except Exception:
|
||||
log.exception("Failed to start TtsToy health server")
|
||||
|
||||
# Start web UI subprocess
|
||||
await self._start_webui()
|
||||
|
||||
# Start web UI state processor
|
||||
self._webui_state_processor.start()
|
||||
log.info("[WebUI] State processor started")
|
||||
|
||||
-1279
File diff suppressed because it is too large
Load Diff
@@ -1,4 +0,0 @@
|
||||
flask>=3.0
|
||||
requests>=2.31
|
||||
pydub>=0.25
|
||||
gunicorn
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"homepage": "/home/owen/Desktop/Homepage",
|
||||
"webtable": "/home/owen/Desktop/WebTable",
|
||||
"porgupicker": "/home/owen/Desktop/PorguPicker",
|
||||
"galaxy": "/home/owen/Desktop/Something",
|
||||
"ttstoy": "/home/owen/Desktop/ttstoy",
|
||||
"ttstoy_webui": "/home/owen/Desktop/ttstoy/webui",
|
||||
"cookie_domain": ".kingstons-scrapyard.net",
|
||||
"session_secret": "scrapyard-shared-session-k8x7m2p4q9w1"
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
# Start the TtsToy Web UI
|
||||
# Edit these or export them before running
|
||||
|
||||
# Path to your RedBot data directory
|
||||
export REDBOT_DATA_PATH="${REDBOT_DATA_PATH:-$HOME/.local/share/Red-DiscordBot/data}"
|
||||
|
||||
# Your RedBot instance name (the name you used when creating it)
|
||||
export BOT_INSTANCE="${BOT_INSTANCE:-redbot}"
|
||||
|
||||
# Port the web UI listens on
|
||||
export WEBUI_PORT="${WEBUI_PORT:-8098}"
|
||||
|
||||
# Public URL users will visit.
|
||||
# Kept in sync with the hardcoded value in webui/app.py for the Discord login links.
|
||||
export WEBUI_URL="https://ttstoy.kingstons-scrapyard.net"
|
||||
|
||||
# Discord channel ID to post TTS messages to (get it by right-clicking a channel)
|
||||
export TTSTOY_WEBUI_CHANNEL_ID="${TTSTOY_WEBUI_CHANNEL_ID:-0}"
|
||||
|
||||
# Shared state file path (must match TTSTOY_SHARED_STATE in the bot env if changed)
|
||||
export TTSTOY_SHARED_STATE="${TTSTOY_SHARED_STATE:-/tmp/ttstoy_webui_state.json}"
|
||||
|
||||
cd "$(dirname "$0")"
|
||||
|
||||
# ── Setup venv ──
|
||||
if [ ! -d "venv" ]; then
|
||||
echo "[setup] Creating ttstoy webui venv..."
|
||||
python3 -m venv venv
|
||||
fi
|
||||
source venv/bin/activate
|
||||
pip install -q -r requirements.txt
|
||||
|
||||
exec gunicorn "app:app" \
|
||||
--workers 1 \
|
||||
--bind "0.0.0.0:${WEBUI_PORT}" \
|
||||
--log-level info
|
||||
@@ -1,247 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,194 +0,0 @@
|
||||
{% 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 %}
|
||||
@@ -1,442 +0,0 @@
|
||||
{% 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;">
|
||||
<div style="display:inline-flex;">
|
||||
<button id="vc-lock-btn" onclick="toggleVcLock()" style="border:none;background:#e67e22;padding:0.4rem 0.6rem;cursor:pointer;border-top-left-radius:4px;border-bottom-left-radius:4px;font-size:0.85rem;display:inline-flex;align-items:center;" title="Click to unlock"><span style="filter:grayscale(1) brightness(10);">🔒</span></button><button class="btn btn-primary" id="vc-btn" onclick="submitTTS()" disabled style="opacity:0.5;border-top-left-radius:0;border-bottom-left-radius:0;">
|
||||
<span id="spinner" class="spin" style="display:none;"></span> Speak in VC
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
<label style="display:inline-flex;align-items:center;gap:0.3rem;cursor:pointer;">
|
||||
<input type="checkbox" id="post-to-discord" checked> <span class="muted" style="font-size:0.85rem;">Post to Discord</span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="tts-status" class="muted" style="margin-top:0.5rem;"></div>
|
||||
<div id="tts-result" style="margin-top:0.75rem;display:none;align-items:center;gap:0.75rem;">
|
||||
<audio id="tts-audio" controls style="flex:1;"></audio>
|
||||
<a id="tts-download" class="btn btn-secondary" href="#" download="ttstoy.mp3" style="font-size:0.85rem;padding:0.4rem 0.75rem;">Download</a>
|
||||
</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 if (mode === 'dectalk') {
|
||||
group.style.display = '';
|
||||
const dectalkVoices = [
|
||||
{id: '[:np]', name: 'Paul (default)'},
|
||||
{id: '[:nb]', name: 'Betty'},
|
||||
{id: '[:nh]', name: 'Harry'},
|
||||
{id: '[:nf]', name: 'Frank'},
|
||||
{id: '[:nd]', name: 'Dennis'},
|
||||
{id: '[:nk]', name: 'Kit'},
|
||||
{id: '[:nu]', name: 'Ursula'},
|
||||
{id: '[:nr]', name: 'Rita'},
|
||||
{id: '[:nw]', name: 'Wendy'},
|
||||
];
|
||||
sel.innerHTML = '<option value="">— Paul (default) —</option>';
|
||||
dectalkVoices.forEach(v => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = v.id; opt.textContent = v.name;
|
||||
sel.appendChild(opt);
|
||||
});
|
||||
} 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 = '';
|
||||
}
|
||||
|
||||
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`;
|
||||
document.getElementById('tts-download').href = `/api/tts/${job_id}/audio`;
|
||||
result.style.display = 'flex';
|
||||
} 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 post_to_discord = document.getElementById('post-to-discord').checked;
|
||||
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, post_to_discord})});
|
||||
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 = post_to_discord ? 'Audio ready — posted to Discord channel.' : 'Audio ready.';
|
||||
document.getElementById('tts-audio').src = `/api/tts/${job_id}/audio`;
|
||||
document.getElementById('tts-download').href = `/api/tts/${job_id}/audio`;
|
||||
result.style.display = 'flex';
|
||||
} 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 for all modes
|
||||
document.getElementById('gen-only-btn').style.display = '';
|
||||
|
||||
// VC lock toggle
|
||||
function toggleVcLock() {
|
||||
const btn = document.getElementById('vc-btn');
|
||||
const lock = document.getElementById('vc-lock-btn');
|
||||
if (btn.disabled) {
|
||||
btn.disabled = false;
|
||||
btn.style.opacity = '1';
|
||||
lock.innerHTML = '<span style="filter:grayscale(1) brightness(10);">\u{1F513}</span>';
|
||||
lock.title = 'Click to lock';
|
||||
} else {
|
||||
btn.disabled = true;
|
||||
btn.style.opacity = '0.5';
|
||||
lock.innerHTML = '<span style="filter:grayscale(1) brightness(10);">\u{1F512}</span>';
|
||||
lock.title = 'Click to unlock';
|
||||
}
|
||||
}
|
||||
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 %}
|
||||
@@ -1,50 +0,0 @@
|
||||
{% 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:33001') }}</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 %}
|
||||
@@ -1,32 +0,0 @@
|
||||
{% 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 %}
|
||||
@@ -1,53 +0,0 @@
|
||||
{% 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 %}
|
||||
@@ -1,83 +0,0 @@
|
||||
{% 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 %}
|
||||
@@ -1,107 +0,0 @@
|
||||
{% 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 %}
|
||||
@@ -1,35 +0,0 @@
|
||||
{% 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> | 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 %}
|
||||
@@ -1,25 +0,0 @@
|
||||
"""Shared constants mirrored from ttstoy.py — no RedBot import needed."""
|
||||
|
||||
MINIMAX_VOICES = {
|
||||
"BigMan": "moss_audio_54f969bf-12c1-11f1-93de-a6f4120d2cc7",
|
||||
"BlueGnome": "moss_audio_166dfe7c-1390-11f1-b6f2-729162d0a8d2",
|
||||
"Dracafow": "moss_audio_13cb66d2-12c7-11f1-b6f2-729162d0a8d2",
|
||||
"Gaben": "moss_audio_5239ca93-115b-11f1-b9c4-4ea5324904c7",
|
||||
"Gregori": "moss_audio_63a397aa-24c9-11f1-918f-5a2de67f838a",
|
||||
"Gnome": "moss_audio_b304011b-11b2-11f1-90fe-36953c023630",
|
||||
"King": "moss_audio_39c16b2c-1158-11f1-995d-b25e2f30d3fa",
|
||||
"Peppa": "moss_audio_d656489f-114b-11f1-995d-b25e2f30d3fa",
|
||||
"Robotnik": "moss_audio_123443a8-11b4-11f1-bfa6-763108879732",
|
||||
}
|
||||
|
||||
DECTALK_VOICES = {
|
||||
"paul": ("[:np]", "Perfect Paul — default male"),
|
||||
"betty": ("[:nb]", "Beautiful Betty — female"),
|
||||
"harry": ("[:nh]", "Huge Harry — deep male"),
|
||||
"frank": ("[:nf]", "Frail Frank — male"),
|
||||
"dennis": ("[:nd]", "Doctor Dennis — male"),
|
||||
"kit": ("[:nk]", "Kit the Kid — child"),
|
||||
"ursula": ("[:nu]", "Uppity Ursula — female"),
|
||||
"rita": ("[:nr]", "Rough Rita — female"),
|
||||
"wendy": ("[:nw]", "Whispering Wendy — female"),
|
||||
}
|
||||
Reference in New Issue
Block a user