import gradio as gr
import datetime

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

with gr.Blocks() as demo:
    gr.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="update()">更新界面</button>
        <div id="update-area">
            点击按钮来更新这里的内容
        </div>
    </div>
    """)

    output = gr.Textbox(label="更新内容")
    update_button = gr.Button("更新", visible=False)
    
    update_button.click(fn=update_content, inputs=[], outputs=[output])

    gr.HTML("""
    <script>
        function update() {
            document.querySelector('button.gr-button').click();
        }

        // 监听Gradio输出的变化
        document.addEventListener('DOMContentLoaded', (event) => {
            const outputElement = document.querySelector('.gr-textbox-output');
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.type === "childList") {
                        document.getElementById("update-area").innerHTML = outputElement.value;
                    }
                });
            });

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

demo.launch()