File size: 2,340 Bytes
72058bd 9d72800 f673b0c 9d72800 f673b0c f760d0f 9d72800 f673b0c 9d72800 f673b0c f760d0f f673b0c f760d0f 5cecac5 f673b0c f760d0f f673b0c 97ea893 f673b0c 06545b7 9d72800 f673b0c 2577b84 06545b7 f673b0c 9d72800 2577b84 72058bd 9d72800 72058bd |
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 |
import gradio as gr
def create_policy_modal_app():
image_paths = [f"policy_page{i+1}.png" for i in range(5)] # Adjust page count!
modal_css = """
.policy-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
overflow: auto;
justify-content: center;
align-items: center;
}
.policy-modal-content {
background-color: white;
margin: 2% auto;
padding: 20px;
width: 90%;
max-width: 900px;
border-radius: 8px;
position: relative;
}
.close-btn {
position: absolute;
right: 15px;
top: 15px;
font-size: 24px;
cursor: pointer;
background: #222;
color: white;
border: none;
border-radius: 4px;
padding: 5px 15px;
}
"""
images_html = "".join(
f"<img src='file={path}' style='width:100%; margin-bottom:20px;' />" for path in image_paths
)
modal_html = f"""
<div id="policyModal" class="policy-modal">
<div class="policy-modal-content">
<button class="close-btn" onclick="document.getElementById('policyModal').style.display='none';">×</button>
{images_html}
</div>
</div>
"""
with gr.Blocks(css=modal_css) as app:
gr.HTML(modal_html)
button = gr.Button("View Hate Speech Policy")
button.click(fn=None, inputs=None, outputs=None, _js="""
function() {
const modal = document.getElementById('policyModal');
if (modal) {
modal.style.display = 'flex';
document.body.style.overflow = 'hidden';
}
return [];
}
""")
gr.HTML("""
<script>
document.addEventListener('click', function(e) {
const modal = document.getElementById('policyModal');
if (modal && e.target === modal) {
modal.style.display = 'none';
document.body.style.overflow = 'auto';
}
});
</script>
""")
return app
if __name__ == "__main__":
app = create_policy_modal_app()
app.launch() |