File size: 2,643 Bytes
89a31dd 92e38f5 63b2df0 92e38f5 89a31dd 92e38f5 89a31dd 92e38f5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
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)
|