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

ttstoy/ttstoy.py

@@ -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."""
+        """Restart the TtsToy web UI (now a scrapyard service)."""
-        await ctx.send("🔄 Restarting web UI...")
+        await ctx.send("🔄 The web UI is now a scrapyard service.\nRestart it with: `sudo systemctl restart scrapyard`")
-        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.")
 
     # -------------------------------------------------------------------------
     # 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()
+            pending_cmds, pending_posts = await asyncio.to_thread(self._take_pending_state_updates)
-            changed = False
 
-            # --- Process pending commands (voice/mode changes from web UI) ---
+            for cmd in pending_cmds:
-            pending_cmds = state.pop("pending_commands", [])
+                await self._handle_webui_command(cmd)
-            if pending_cmds:
-                changed = True
-                for cmd in pending_cmds:
-                    await self._handle_webui_command(cmd)
 
-            # --- Process pending posts (TTS audio to post to Discord channel) ---
+            for post in pending_posts:
-            pending_posts = state.pop("pending_posts", [])
+                await self._handle_webui_post(post)
-            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)
 
             # 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":
+            if action == "set_voice":
-                await self._webui_speak_in_vc(user, payload)
-
-            elif 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")

ttstoy/webui/requirements.txt

@@ -1,4 +0,0 @@
-flask>=3.0
-requests>=2.31
-pydub>=0.25
-gunicorn

ttstoy/webui/stack.json

@@ -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"
-}

ttstoy/webui/start.sh

@@ -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

ttstoy/webui/templates/base.html

@@ -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>

ttstoy/webui/templates/chatterbox.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 %}

ttstoy/webui/templates/dashboard.html

@@ -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);">&#x1F512;</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 %}

ttstoy/webui/templates/dectalk.html

@@ -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 %}

ttstoy/webui/templates/login.html

@@ -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 %}

ttstoy/webui/templates/minimax.html

@@ -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 %}

ttstoy/webui/templates/profile.html

@@ -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 %}

ttstoy/webui/templates/sfx.html

@@ -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 %}

ttstoy/webui/templates/vox.html

@@ -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> &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 %}

ttstoy/webui/ttstoy_constants.py

@@ -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"),
-}