Update app

app.py

@@ -1,97 +1,82 @@
 import gradio as gr
+import datetime
 
-# 自定义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();
-    }
+def update_content():
+    current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+    return f"�����Ѹ��£���ǰʱ��: {current_time}"
 
-    // 监听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;
-                }
-            });
-        });
+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>
 
-        var config = { childList: true, subtree: true };
-        observer.observe(outputElement, config);
-    });
-</script>
+    <div class="container">
+        <h1>��̬���½���ʾ��</h1>
+        <button id="custom-button" onclick="update()">���½���</button>
+        <div id="update-area">
+            �����ť���������������
+        </div>
+    </div>
+    """)
 
-<!-- Gradio组件将被插入到这里 -->
-<div id="gradio-app"></div>
-"""
+    output = gr.Textbox(label="��������")
+    update_button = gr.Button("����", visible=False)
+    
+    update_button.click(fn=update_content, inputs=[], outputs=[output])
 
-# Gradio函数
-def update_content():
-    import datetime
-    current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-    return f"界面已更新，当前时间: {current_time}"
+    gr.HTML("""
+    <script>
+        function update() {
+            document.querySelector('button.gr-button').click();
+        }
 
-# 创建Gradio界面
-iface = gr.Interface(
-    fn=update_content,
-    inputs=[],
-    outputs="text",
-    title=None,
-    description=None,
-    article=None,
-    #layout="vertical"
-)
+        // ����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>
+    """)
 
-iface.launch(inline=False, share=True, html=custom_html)
+demo.launch()