ChatTTS WebUI 界面定制化：修改主题、添加快捷键、导出配置模板

2.2 进阶：注入自定义 CSS，实现品牌化 UI

如果你有企业 VI 色（比如科技蓝#2563eb）或想微调细节（如让文本输入框圆角更大、按钮 hover 效果更明显），可直接注入 CSS：

在 demo = gr.Interface(...) 或 gr.Blocks() 定义后、launch() 前，添加：

demo = gr.Blocks(css="""
/* 全局字体统一为更清晰的系统字体 */
:root { --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
/* 输入框：加大圆角，加内阴影 */
.gr-input { border-radius: 12px !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
/* 生成按钮：用品牌蓝，hover 时亮度提升 */
.gr-button-primary { background-color: #2563eb !important; border-color: #1d4ed8 !important; }
.gr-button-primary:hover { background-color: #1d4ed8 !important; transform: translateY(-1px); }
/* 日志区域：加浅灰背景，更好区分 */
.gr-output { background-color: #1e293b !important; border-radius: 8px; }
""")

保存后重启 WebUI，你会看到一个既有专业感又符合个人审美的界面——不是套模板，而是亲手调校出来的工具。

3. 添加快捷键：告别鼠标，用键盘掌控语音生成

每次生成都要挪手点按钮？完全没必要。Gradio 支持全局快捷键绑定，我们为 ChatTTS WebUI 加上三组最实用的快捷操作：

3.1 核心快捷键映射表

3.2 实现方式：在 Gradio Blocks 中注入 JavaScript

在你的 app.py 中，找到 with gr.Blocks() as demo: 块的末尾（demo.launch() 之前），添加以下代码：

with gr.Blocks() as demo:
    # ... 原有的输入组件、按钮、输出组件定义 ...
    # 👇 新增：快捷键监听逻辑
    gr.HTML("""
    <script>
        document.addEventListener('keydown', function(e) {
            // Ctrl+Enter 触发生成
            if (e.ctrlKey && e.key === 'Enter') {
                e.preventDefault();
                document.querySelector('button[aria-label="Run"]').click();
            }
            // Ctrl+R 清空输入和日志
            if (e.ctrlKey && e.key === 'r') {
                e.preventDefault();
                document.querySelector('textarea[aria-label="Text"]').value = '';
                document.querySelector('div[aria-label="Log"]').textContent = '';
            }
            // Ctrl+S 导出配置
            if (e.ctrlKey && e.key === 's') {
                e.preventDefault();
                const text = document.querySelector('textarea[aria-label="Text"]').value || '';
                const speed = document.querySelector('input[aria-label="Speed"]').value || '5';
                const mode = document.querySelector('input[name="mode"]:checked')?.value || 'random';
                const seed = document.querySelector('input[aria-label="Seed"]').value || '';
                const config = {
                    text: text,
                    speed: parseInt(speed),
                    mode: mode,
                    seed: mode === 'fixed' ? parseInt(seed) : null
                };
                const blob = new Blob([JSON.stringify(config, null, 2)], {type: 'application/json'});
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'chattts_config_' + new Date().toISOString().slice(0,10) + '.json';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }
        });
    </script>
    """)

效果：输入完文字，按 Ctrl+Enter，秒出语音；按 Ctrl+R，输入框和日志区瞬间清空；按 Ctrl+S，当前所有设置（文本、语速、模式、Seed）自动打包成 JSON 文件下载，命名含日期，方便归档。
注意：确保你的 Gradio 版本 ≥ 4.20.0，旧版本需升级 pip install --upgrade gradio。

4. 导出与导入配置模板：让好声音'可复制、可传播'

ChatTTS 的 Seed 机制本质是随机数种子，同一 Seed 在相同模型下必然生成同一音色。但手动记 Seed、再输 Seed 太原始。我们把它变成'配置模板'——一个包含文本、语速、模式、Seed 的完整快照。

4.1 导出：一键生成可分享的 JSON 模板

上一节的 Ctrl+S 已实现导出功能。生成的 JSON 示例长这样：

{
  "text": "今天天气真好，咱们去公园散步吧～哈哈哈！",
  "speed": 4,
  "mode": "fixed",
  "seed": 11451
}

这个文件可以直接发给同事，或存入项目文档库。它比截图更精准，比口头描述更可靠。

4.2 导入：双击加载，秒变同款语音

导出只是半程。我们还要让同事能'一键还原'。在 WebUI 中新增一个'导入配置'按钮：

在 gr.Blocks() 内，添加如下组件（放在控制区下方）：

with gr.Row():
    import_btn = gr.UploadButton(" 导入配置模板", file_types=[".json"], scale=1)
    import_status = gr.Textbox(label="导入状态", interactive=False)

def load_config(file_obj):
    import json
    if not file_obj:
        return "❌ 未选择文件"
    try:
        with open(file_obj.name, 'r', encoding='utf-8') as f:
            config = json.load(f)
        # 自动填充到对应组件
        text_input.value = config.get("text", "")
        speed_slider.value = config.get("speed", 5)
        if config.get("mode") == "fixed":
            mode_radio.value = "fixed"
            seed_input.value = config.get("seed", "")
        else:
            mode_radio.value = "random"
        return f" 已加载：{len(config.get('text', ''))}字文本，音色 Seed={config.get('seed', '随机')}"
    except Exception as e:
        return f"❌ 导入失败：{str(e)}"

import_btn.upload(load_config, inputs=import_btn, outputs=import_status)

效果：同事下载你的 JSON，点击' 导入配置模板'，选择文件，所有参数自动填入——连标点符号和笑声都一模一样。
进阶提示：你还可以把常用配置存成多个 JSON（如 客服音色.json、新闻播报.json、儿童故事.json），形成自己的'音色资产库'。

5. 配置固化：让定制永久生效，重启不丢失

以上所有修改（主题、快捷键、导入导出）都是代码级的。但你肯定不想每次更新 ChatTTS 源码后，都要重新打补丁。最佳实践是：将定制逻辑封装为独立模块，通过配置文件驱动。

5.1 创建 ui_config.py 配置文件

在项目根目录新建 ui_config.py：

# ui_config.py
UI_THEME = {
    "primary_hue": "emerald",
    "secondary_hue": "slate",
    "neutral_hue": "stone",
    "radius_size": "lg"
}
KEYBINDINGS = {
    "generate": "Ctrl+Enter",
    "clear": "Ctrl+R",
    "export": "Ctrl+S"
}
DEFAULT_SPEED = 4
ENABLE_IMPORT_EXPORT = True

5.2 在主程序中动态加载

修改 app.py，在顶部导入并读取：

import ui_config
# ... 其他导入 ...
# 应用主题
theme = gr.themes.Default(**ui_config.UI_THEME)
# 启动时传入配置
demo = gr.Blocks(theme=theme)
# ... 组件定义 ...
demo.launch(
    server_name="0.0.0.0",
    server_port=7860,
    favicon_path="favicon.ico" # 可选：加个图标
)

优势：更新 ChatTTS 官方代码时，只需保留你的 ui_config.py 和少量胶水代码；团队成员只需改 ui_config.py 就能统一 UI 风格；未来加新功能（如夜间模式开关），只改配置文件，不碰核心逻辑。

6. 总结：你的 AI 语音工具，本该由你定义

我们没改动 ChatTTS 模型的一行权重，却让它从一个'能用的 Demo'，变成了一个'顺手的生产力工具'：

• 主题定制，不是为了好看，而是让眼睛在连续调试中保持清醒；
• 快捷键绑定，不是炫技，而是把'思考→输入→生成'的链路压缩到一次按键；
• 配置模板导出导入，不是堆功能，而是把偶然发现的'好声音'变成可沉淀、可复用、可传承的数字资产；
• 配置固化，不是追求复杂，而是让每一次优化都能长期生效，不随重启而消失。

技术的价值，从来不在参数多高、指标多炫，而在于它是否真正贴合人的工作流。当你不再为界面分心，当语音生成成为呼吸般自然的动作——那一刻，ChatTTS 才真正属于你。