Upload folder using huggingface_hub

test.py

@@ -1,10 +1,12 @@
 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!
+def create_policy_popup_app():
+    # Your Google Drive file ID
+    pdf_id = "1WZCQpIWfelbxgBr8dNiW2rqVGaDyf-Gi"
+    embed_url = f"https://drive.google.com/file/d/{pdf_id}/preview"
 
-    modal_css = """
-    .policy-modal {
+    custom_css = """
+    .pdf-modal {
         display: none;
         position: fixed;
         z-index: 1000;
@@ -14,18 +16,20 @@ def create_policy_modal_app():
         height: 100%;
         background-color: rgba(0,0,0,0.7);
         overflow: auto;
-        justify-content: center;
-        align-items: center;
     }
-    .policy-modal-content {
+
+    .pdf-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,51 +41,56 @@ def create_policy_modal_app():
         border: none;
         border-radius: 4px;
         padding: 5px 15px;
+        z-index: 1001;
+    }
+
+    .pdf-container {
+        width: 100%;
+        height: calc(100% - 40px);
+        margin-top: 40px;
     }
-    """
 
-    images_html = "".join(
-        f"<img src='file={path}' style='width:100%; margin-bottom:20px;' />" for path in image_paths
-    )
+    .pdf-embed {
+        width: 100%;
+        height: 100%;
+        border: 1px solid #ddd;
+    }
+    """
 
     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 id="pdfModal" class="pdf-modal">
+        <div class="pdf-modal-content">
+            <button class="close-btn" onclick="document.getElementById('pdfModal').style.display='none';document.body.style.overflow='auto';">×</button>
+            <div class="pdf-container">
+                <iframe class="pdf-embed" src="{embed_url}" type="application/pdf"></iframe>
+            </div>
         </div>
     </div>
     """
 
-    with gr.Blocks(css=modal_css) as app:
+    with gr.Blocks(css=custom_css) as app:
+        gr.Markdown("## View Hate Speech Policy")
         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 [];
-            }
-        """)
+        open_button = gr.Button("📄 Open Policy Document")
 
-        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>
-        """)
+        open_button.click(
+            fn=lambda: None,
+            inputs=None,
+            outputs=None,
+            js="""
+                () => {
+                    const modal = document.getElementById('pdfModal');
+                    if (modal) {
+                        modal.style.display = 'block';
+                        document.body.style.overflow = 'hidden';
+                    }
+                }
+            """
+        )
 
     return app
 
 if __name__ == "__main__":
-    app = create_policy_modal_app()
+    app = create_policy_popup_app()
     app.launch()