ui_assets.py

"""
VoxCPM UI静态资源管理
包含JavaScript代码和CSS样式
"""

# 基础JavaScript代码
GRADIO_JS = """
function(){
    console.log('🎯 VoxCPM 正在加载前端脚本...');

    // 动态加载外部JavaScript文件
    const script = document.createElement('script');
    script.src = '/gradio_api/file=static/voxcpm_frontend.js';
    script.type = 'text/javascript';
    script.onload = function() {
        console.log('✅ VoxCPM frontend script loaded successfully');
        // 确保DOM加载完成后初始化
        if (typeof initializeVoxCPM === 'function') {
            console.log('🚀 正在初始化VoxCPM前端功能...');
            setTimeout(initializeVoxCPM, 500);
        } else {
            console.log('⚠️ initializeVoxCPM 函数未找到，将在DOM加载完成后重试');
            // 如果函数还没加载完成，等待一下再试
            setTimeout(() => {
                if (typeof initializeVoxCPM === 'function') {
                    console.log('🚀 延迟初始化VoxCPM前端功能...');
                    initializeVoxCPM();
                }
            }, 1000);
        }
    };
    script.onerror = function() {
        console.error('❌ Failed to load VoxCPM frontend script');
        alert('前端脚本加载失败，部分功能可能不可用');
    };
    document.head.appendChild(script);
    return null;
}
"""

# CSS样式
GRADIO_CSS = """
.logo-container {
    text-align: center;
    margin: 0.5rem 0 1rem 0;
}
.logo-container img {
    height: 80px;
    width: auto;
    max-width: 200px;
    display: inline-block;
}
/* Bold accordion labels */
#acc_quick details > summary,
#acc_tips details > summary,
#acc_presets details > summary,
#acc_extractor details > summary {
    font-weight: 600 !important;
    font-size: 1.1em !important;
}
/* Bold labels for specific checkboxes */
#chk_denoise label,
#chk_denoise span,
#chk_normalize label,
#chk_normalize span {
    font-weight: 600;
}
/* 连接状态提示样式 */
.connection-status {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: 600;
    z-index: 1000;
    display: none;
}
.connection-status.connected {
    background-color: #4ade80;
    color: #065f46;
    display: block;
}
.connection-status.disconnected {
    background-color: #f87171;
    color: #991b1b;
    display: block;
}
/* 保存状态按钮样式 */
.save-state-btn {
    margin-top: 10px;
    font-size: 0.9em;
    padding: 5px 10px;
}
/* 使用播放进度按钮样式 - 减少间距 */
#use_current_start, #use_current_end {
    position: relative;
    left: 15px;
    top: -25px;
    margin-top: 2px !important;
    margin-bottom: 0px !important;
}
/* 时间输入框容器样式 - 减少底部间距 */
#start_time, #end_time {
    margin-bottom: 2px !important;
}
/* 保存按钮初始隐藏 */
#save_preset_btn {
    display: none;
}
/* 隐藏保存配置用的辅助组件 */
#preset_name_hidden,
#preset_description_hidden,
#refresh_presets_hidden,
#save_trigger_hidden {
    display: none;
}

/* 修复手机端下拉菜单层级问题 */
.gradio-dropdown {
    z-index: 1000 !important;
}
.gradio-dropdown .dropdown {
    z-index: 1001 !important;
}
/* 音色下拉菜单特殊优化 */
#preset {
    z-index: 1002 !important;
    position: relative !important;
}
#preset .gradio-dropdown {
    z-index: 1003 !important;
}
#preset .gradio-dropdown .dropdown {
    z-index: 1004 !important;
}
/* 降低折叠面板层级，避免覆盖下拉菜单 */
.gr-accordion {
    z-index: 1 !important;
}
/* 防止背景元素接收点击事件，但不影响下拉菜单 */
.gr-accordion details[open] {
    pointer-events: none !important;
}
.gr-accordion details[open] > summary {
    pointer-events: auto !important;
}
/* 确保音色下拉菜单不受折叠面板规则影响 */
#preset {
    pointer-events: auto !important;
}
/* 手机端布局优化 */
@media (max-width: 768px) {
    /* 确保下拉菜单在最上层 */
    #preset {
        z-index: 9999 !important;
        position: relative !important;
    }

    /* 快速入门等折叠面板层级降低 */
    .gr-accordion {
        z-index: 1 !important;
    }

    /* 所有折叠面板内容都降低层级 */
    .gr-accordion details,
    .gr-accordion .gr-panel {
        z-index: 1 !important;
    }

    /* Generate Speech按钮在手机端突出显示 */
    .generate-speech-mobile {
        margin: 1rem 0 !important;
        padding: 12px 24px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        width: 100% !important;
    }

    /* 手机端音色下拉菜单最高优先级 */
    #preset .gradio-dropdown,
    #preset .gradio-dropdown-wrapper,
    #preset .gradio-dropdown-container {
        z-index: 10000 !important;
        position: relative !important;
    }

    /* 下拉菜单按钮 */
    #preset .gradio-dropdown .gradio-dropdown-button,
    #preset .gradio-dropdown input,
    #preset .gradio-dropdown button {
        z-index: 10001 !important;
        position: relative !important;
    }

    /* 下拉菜单选项列表 */
    #preset .gradio-dropdown .gradio-dropdown-options,
    #preset .gradio-dropdown .gradio-dropdown-menu,
    #preset .gradio-dropdown .gradio-dropdown-list {
        z-index: 10002 !important;
        position: fixed !important;
        background: white !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }

    /* 手机端下拉菜单交互优化 */
    #preset,
    #preset .gradio-dropdown {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* 阻止背景元素的交互 */
    .gr-accordion details[open] {
        pointer-events: none !important;
    }

    .gr-accordion details[open] > summary {
        pointer-events: auto !important;
    }
}
"""