Upload folder using huggingface_hub

test.py

@@ -1,27 +1,9 @@
 import gradio as gr
-import base64
 import os
 
-def create_pdf_popup_app():
-    def get_pdf_base64():
-        pdf_path = "Hate Speech Policy.pdf"
-        if not os.path.exists(pdf_path):
-            print(f"Error: PDF file not found at {os.path.abspath(pdf_path)}")
-            return None
-        
-        try:
-            with open(pdf_path, "rb") as pdf_file:
-                pdf_data = pdf_file.read()
-                base64_pdf = base64.b64encode(pdf_data).decode('utf-8')
-                return base64_pdf
-        except Exception as e:
-            print(f"Error reading PDF file: {str(e)}")
-            return None
-
-    pdf_base64 = get_pdf_base64()
-
+def create_policy_image_modal_app():
     modal_css = """
-    .pdf-modal {
+    .img-modal {
         display: none;
         position: fixed;
         z-index: 1000;
@@ -32,8 +14,8 @@ def create_pdf_popup_app():
         background-color: rgba(0,0,0,0.7);
         overflow: auto;
     }
-    
-    .pdf-modal-content {
+
+    .img-modal-content {
         background-color: white;
         margin: 2% auto;
         padding: 20px;
@@ -44,7 +26,7 @@ def create_pdf_popup_app():
         border-radius: 8px;
         position: relative;
     }
-    
+
     .close-btn {
         position: absolute;
         right: 15px;
@@ -56,79 +38,66 @@ def create_pdf_popup_app():
         border: none;
         border-radius: 4px;
         padding: 5px 15px;
-        z-index: 1001;
     }
-    
-    .pdf-container {
+
+    .img-container {
         width: 100%;
         height: calc(100% - 40px);
         margin-top: 40px;
+        text-align: center;
     }
-    
-    .pdf-embed {
-        width: 100%;
-        height: 100%;
+
+    .img-container img {
+        max-width: 100%;
+        max-height: 100%;
         border: 1px solid #ddd;
-    }
-    
-    .pdf-error {
-        text-align: center;
-        margin-top: 100px;
-        color: red;
-        font-size: 18px;
+        border-radius: 6px;
     }
     """
 
-    if pdf_base64:
-        modal_html = f"""
-        <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="data:application/pdf;base64,{pdf_base64}#toolbar=0&navpanes=0" type="application/pdf"></iframe>
-                </div>
+    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>
         </div>
-        """
-    else:
-        modal_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">
-                    <p class="pdf-error">Error: Could not load the PDF file.</p>
-                </div>
-            </div>
-        </div>
-        """
+    </div>
+
+    <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';
+        }
+    });
+
+    function showPolicyModal() {
+        const modal = document.getElementById('imgModal');
+        if (modal) {
+            modal.style.display = 'block';
+            document.body.style.overflow = 'hidden';
+        }
+    }
+    </script>
+    """
 
     with gr.Blocks(css=modal_css) as app:
-        gr.Markdown("# PDF Modal Popup Demo")
+        gr.Markdown("## Hate Speech Policy Viewer (Image-based Modal)")
         gr.HTML(modal_html)
-        gr.Button("View Hate Speech Policy", elem_id="open-modal-button")
-        gr.HTML("""
-        <script>
-        document.addEventListener('DOMContentLoaded', function () {
-            const button = document.getElementById('open-modal-button');
-            const modal = document.getElementById('pdfModal');
-            if (button && modal) {
-                button.addEventListener('click', () => {
-                    modal.style.display = 'block';
-                    document.body.style.overflow = 'hidden';
-                });
-                window.addEventListener('click', function(e) {
-                    if (e.target === modal) {
-                        modal.style.display = 'none';
-                        document.body.style.overflow = 'auto';
-                    }
-                });
-            }
-        });
-        </script>
-        """)
+
+        open_button = gr.Button("📄 View Policy (Image Popup)")
+        open_button.click(
+            fn=None,
+            inputs=None,
+            outputs=None,
+            _js="showPolicyModal"
+        )
 
     return app
 
 if __name__ == "__main__":
-    app = create_pdf_popup_app()
+    app = create_policy_image_modal_app()
     app.launch()