|
|
|
|
|
import os |
|
import gradio as gr |
|
import datetime |
|
|
|
def update_content(): |
|
current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S") |
|
return f"Update: {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>Update Example</h1> |
|
<button id="custom-button" onclick="update()">Update button</button> |
|
<div id="update-area"> |
|
press here to update |
|
</div> |
|
</div> |
|
""") |
|
output = gr.Textbox(label="Update the content") |
|
update_button = gr.Button("UUpdate", visible=False) |
|
|
|
update_button.click(fn=update_content, inputs=[], outputs=[output]) |
|
|
|
gr.HTML(""" |
|
<script> |
|
function update() { |
|
document.querySelector('button.gr-button').click(); |
|
} |
|
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() |
|
|
