File size: 2,360 Bytes
d68b548 9b777c5 89a31dd 684f45f 89a31dd 684f45f b46c5d6 92e38f5 684f45f 92e38f5 684f45f 898f4bc 684f45f 898f4bc 684f45f 36e902c 684f45f 89a31dd 684f45f 89a31dd 684f45f d535eff 684f45f |
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 |
#!/usr/bin/python
# -*- coding: UTF-8 -*-
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()
|