Upload folder using huggingface_hub

test.py

@@ -1,8 +1,10 @@
 import gradio as gr
 
-def create_policy_image_modal_app():
+def create_policy_modal_app():
+    image_paths = [f"policy_page{i+1}.png" for i in range(5)]  # Adjust page count!
+
     modal_css = """
-    .img-modal {
+    .policy-modal {
         display: none;
         position: fixed;
         z-index: 1000;
@@ -12,20 +14,18 @@ def create_policy_image_modal_app():
         height: 100%;
         background-color: rgba(0,0,0,0.7);
         overflow: auto;
+        justify-content: center;
+        align-items: center;
     }
-
-    .img-modal-content {
+    .policy-modal-content {
         background-color: white;
         margin: 2% auto;
         padding: 20px;
         width: 90%;
         max-width: 900px;
-        height: 90%;
-        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
         border-radius: 8px;
         position: relative;
     }
-
     .close-btn {
         position: absolute;
         right: 15px;
@@ -37,64 +37,51 @@ def create_policy_image_modal_app():
         border: none;
         border-radius: 4px;
         padding: 5px 15px;
-        z-index: 1001;
-    }
-
-    .img-container {
-        width: 100%;
-        height: calc(100% - 40px);
-        margin-top: 40px;
-        text-align: center;
-    }
-
-    .img-container img {
-        max-width: 100%;
-        max-height: 100%;
-        border: 1px solid #ddd;
-        border-radius: 6px;
-    }
-
-    .open-policy-btn {
-        background-color: #FCA539;
-        color: #000;
-        font-weight: bold;
-        padding: 10px 20px;
-        border: none;
-        border-radius: 6px;
-        font-size: 16px;
-        cursor: pointer;
     }
     """
 
-    modal_html = """
-    <div id="imgModal" class="img-modal">
-        <div class="img-modal-content">
-            <button class="close-btn" onclick="document.getElementById('imgModal').style.display='none'; document.body.style.overflow='auto';">×</button>
-            <div class="img-container">
-                <img src="file=policy_page1.png" alt="Policy Page">
-            </div>
+    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>
-
-    <button class="open-policy-btn" onclick="document.getElementById('imgModal').style.display='block'; document.body.style.overflow='hidden';">📄 View Hate Speech Policy</button>
-
-    <script>
-    document.addEventListener('click', function(e) {
-        const modal = document.getElementById('imgModal');
-        if (modal && e.target === modal) {
-            modal.style.display = 'none';
-            document.body.style.overflow = 'auto';
-        }
-    });
-    </script>
     """
 
     with gr.Blocks(css=modal_css) as app:
-        gr.Markdown("# Policy Viewer Demo")
         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_image_modal_app()
+    app = create_policy_modal_app()
     app.launch()