import gradio as gr

# 自定义HTML/CSS/JavaScript
custom_html = """
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }
    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    h1 {
        color: #333;
    }
    #custom-button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
    #update-area {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ddd;
    }
</style>

<div class="container">
    <h1>动态更新界面示例</h1>
    <button id="custom-button" onclick="updateInterface()">更新界面</button>
    <div id="update-area">
        点击按钮来更新这里的内容
    </div>
</div>

<script>
    function updateInterface() {
        // 调用Gradio函数
        var gradioApp = document.querySelector("gradio-app");
        if (gradioApp == null) gradioApp = document.querySelector("body > gradio-app");
        gradioApp.querySelector("#component-0").querySelector("button").click();
    }

    // 监听Gradio输出的变化
    document.addEventListener('DOMContentLoaded', (event) => {
        var gradioApp = document.querySelector("gradio-app");
        if (gradioApp == null) gradioApp = document.querySelector("body > gradio-app");
        var outputElement = gradioApp.querySelector("#component-2");
        
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === "childList") {
                    document.getElementById("update-area").innerHTML = outputElement.textContent;
                }
            });
        });

        var config = { childList: true, subtree: true };
        observer.observe(outputElement, config);
    });
</script>

<!-- Gradio组件将被插入到这里 -->
<div id="gradio-app"></div>
"""

# Gradio函数
def update_content():
    import datetime
    current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    return f"界面已更新，当前时间: {current_time}"

# 创建Gradio界面
iface = gr.Interface(
    fn=update_content,
    inputs=[],
    outputs="text",
    title=None,
    description=None,
    article=None,
    layout="vertical"
)


iface.launch(inline=False, share=True, html=custom_html)