Update app.py

app.py

@@ -335,7 +335,6 @@ body, .gradio-container {
     font-size: 1.1rem;
     font-weight: 500;
 }
-
 .dark #subtitle p { color: #DAB2FF; }
 
 /* Glassmorphism Cards */
@@ -359,6 +358,51 @@ body, .gradio-container {
     border-color: rgba(168, 85, 247, 0.3) !important;
 }
 
+/* Custom Upload Area styling */
+#custom-upload-zone {
+    border: 2px dashed #A855F7;
+    border-radius: 12px;
+    padding: 40px 20px;
+    text-align: center;
+    cursor: pointer;
+    background: rgba(168, 85, 247, 0.05);
+    transition: all 0.3s ease;
+    color: #A855F7;
+}
+
+#custom-upload-zone:hover {
+    background: rgba(168, 85, 247, 0.1);
+    border-color: #9333EA;
+}
+
+#custom-upload-zone h3 { margin: 0; font-weight: 600; color: #6B21A8; }
+.dark #custom-upload-zone h3 { color: #DAB2FF; }
+
+/* Global Drag Overlay */
+#global-drag-overlay {
+    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
+    background: rgba(168, 85, 247, 0.85);
+    z-index: 9999; display: flex; justify-content: center; align-items: center;
+    color: white; font-size: 3em; font-weight: bold; font-family: 'Outfit', sans-serif;
+    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
+    backdrop-filter: blur(5px);
+}
+
+#global-drag-overlay.active {
+    opacity: 1; pointer-events: auto;
+}
+
+/* Hide Default Gradio File Upload */
+.hidden-upload { display: none !important; }
+
+/* Height Alignment & Stretching */
+.stretch-col { display: flex !important; flex-direction: column !important; }
+.stretch-group { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; }
+.stretch-group > .tabs { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; }
+.stretch-group .tabitem { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; }
+.stretch-group .log-box { flex-grow: 1 !important; }
+.stretch-group .log-box textarea { height: 100% !important; min-height: 400px; }
+
 /* Terminal Log Style */
 .log-box textarea {
     font-family: 'IBM Plex Mono', Consolas, monospace !important; 
@@ -378,9 +422,7 @@ body, .gradio-container {
     color: #6B21A8 !important;
 }
 
-.dark .status-text textarea {
-    color: #C084FC !important;
-}
+.dark .status-text textarea { color: #C084FC !important; }
 
 /* Custom Scrollbars */
 ::-webkit-scrollbar { width: 8px; height: 8px; }
@@ -389,14 +431,68 @@ body, .gradio-container {
 ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #9333EA, #A855F7); }
 """
 
+# ==========================================
+# --- 🖱️ JS for Global Drag & Drop Injection
+# ==========================================
+drag_drop_js = """
+() => {
+    // 1. Create global overlay element
+    const overlay = document.createElement('div');
+    overlay.id = 'global-drag-overlay';
+    overlay.innerHTML = '<h2>📥 Drop PDF Anywhere to Upload</h2>';
+    document.body.appendChild(overlay);
+    
+    // Helper to find the hidden Gradio file input
+    const getFi = () => document.querySelector('#pdf-upload input[type="file"]');
+    
+    // 2. Click anywhere in the custom zone to trigger file selector
+    setTimeout(() => {
+        const zone = document.getElementById('custom-upload-zone');
+        if(zone) {
+            zone.addEventListener('click', () => {
+                const fi = getFi();
+                if(fi) fi.click();
+            });
+        }
+    }, 500); // Small delay to ensure DOM is rendered
+
+    // 3. Global Drag & Drop events
+    let dragTimer;
+    document.body.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        overlay.classList.add('active');
+        clearTimeout(dragTimer);
+    });
+    
+    document.body.addEventListener('dragleave', (e) => {
+        e.preventDefault();
+        dragTimer = setTimeout(() => overlay.classList.remove('active'), 100);
+    });
+    
+    document.body.addEventListener('drop', (e) => {
+        e.preventDefault();
+        overlay.classList.remove('active');
+        if(e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            const fi = getFi();
+            if(fi) {
+                fi.files = e.dataTransfer.files;
+                fi.dispatchEvent(new Event('change', {bubbles: true}));
+            }
+        }
+    });
+}
+"""
+
 with gr.Blocks(theme=purple_theme, css=custom_css) as demo:
     with gr.Column(elem_id="col-container"):
         gr.Markdown("# **PaperX / Mineru Parsing Platform**", elem_id="main-title")
         gr.Markdown("One-click parsing of academic PDFs, DAG structuring, and multi-modal asset generation.", elem_id="subtitle")
         
-        with gr.Row():
-            # ================= LEFT COLUMN: SETTINGS & ACTIONS =================
-            with gr.Column(scale=1):
+        # equal_height=True ensures both columns stretch identically
+        with gr.Row(equal_height=True):
+            
+            # ================= LEFT COLUMN =================
+            with gr.Column(scale=1, elem_classes="stretch-col"):
                 
                 # 1. API Configuration
                 with gr.Accordion("⚙️ 1. Global API Configuration", open=False, elem_classes="gradio-group"):
@@ -408,9 +504,20 @@ with gr.Blocks(theme=purple_theme, css=custom_css) as demo:
                 # 2. Document Parsing
                 with gr.Group(elem_classes="gradio-group"):
                     gr.Markdown("### 📄 2. Document Parsing")
-                    pdf_input = gr.File(label="Drag and drop or click to upload PDF", file_types=[".pdf"])
                     
-                    parse_btn = gr.Button("🚀 Start Mineru & DAG Extraction", variant="primary", size="lg")
+                    # Custom Clickable HTML Area
+                    gr.HTML("""
+                    <div id="custom-upload-zone">
+                        <svg viewBox="0 0 24 24" fill="none" style="height: 60px; margin-bottom: 10px; margin: auto;">
+                            <path d="M7 10V9C7 6.23858 9.23858 4 12 4C14.7614 4 17 6.23858 17 9V10C19.2091 10 21 11.7909 21 14C21 15.4806 20.1956 16.8084 19 17.5M7 10C4.79086 10 3 11.7909 3 14C3 15.4806 3.8044 16.8084 5 17.5M7 10C7.43285 10 7.84965 10.0688 8.24006 10.1959M12 12V21M12 12L15 15M12 12L9 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                        </svg>
+                        <h3>Click to Select PDF</h3>
+                        <p style="margin-top: 5px; opacity: 0.8;">Or drop a file anywhere on this window to upload</p>
+                    </div>
+                    """)
+                    
+                    # Hidden Gradio Input Target
+                    pdf_input = gr.File(label="Upload PDF", file_types=[".pdf"], elem_id="pdf-upload", elem_classes="hidden-upload")
                     
                     parse_status = gr.Textbox(
                         show_label=False, 
@@ -419,21 +526,23 @@ with gr.Blocks(theme=purple_theme, css=custom_css) as demo:
                         interactive=False, 
                         elem_classes="status-text"
                     )
+                    parse_btn = gr.Button("🚀 Start Mineru & DAG Extraction", variant="primary", size="lg")
 
                 # 3. Asset Generation
                 with gr.Group(elem_classes="gradio-group"):
                     gr.Markdown("### 🎯 3. Asset Generation")
                     gr.Markdown("Generate final formats based on DAG structure:")
                     
+                    # Scale=1 and min_width force identically sized buttons
                     with gr.Row():
-                        gen_ppt_btn = gr.Button("📊 Generate PPT")
-                        gen_poster_btn = gr.Button("🖼️ Generate Poster")
-                        gen_pr_btn = gr.Button("📰 Generate PR Article")
+                        gen_ppt_btn = gr.Button("📊 Generate PPT", scale=1, min_width=1)
+                        gen_poster_btn = gr.Button("🖼️ Generate Poster", scale=1, min_width=1)
+                        gen_pr_btn = gr.Button("📰 Generate PR Article", scale=1, min_width=1)
                     
                     gen_all_btn = gr.Button("✨ Generate All Assets (ALL)", variant="primary")
 
-            # ================= RIGHT COLUMN: OUTPUTS & LOGS =================
-            with gr.Column(scale=1):
+            # ================= RIGHT COLUMN =================
+            with gr.Column(scale=1, elem_classes="stretch-col"):
                 
                 # 4. Results & Downloads
                 with gr.Group(elem_classes="gradio-group"):
@@ -447,15 +556,15 @@ with gr.Blocks(theme=purple_theme, css=custom_css) as demo:
                     )
                     download_file = gr.File(label="📥 Get Final Zip Archive", interactive=False, visible=False)
 
-                # 5. Debugging & Terminal
-                with gr.Group(elem_classes="gradio-group"):
+                # 5. Debugging & Terminal (Stretches to fill height)
+                with gr.Group(elem_classes="gradio-group stretch-group"):
                     gr.Markdown("### 🛠️ Developer Monitoring (Debug Only)")
                     with gr.Tabs():
                         with gr.Tab("📜 Terminal Stream"):
                             cmd_logs = gr.Textbox(
                                 label="Stdout / Stderr", 
                                 placeholder="Waiting for task to start...", 
-                                lines=14, 
+                                lines=20, 
                                 interactive=False,
                                 elem_classes="log-box" 
                             )
@@ -464,13 +573,16 @@ with gr.Blocks(theme=purple_theme, css=custom_css) as demo:
                             refresh_btn = gr.Button("🔄 Refresh Directory Tree") 
                             debug_view = gr.Textbox(
                                 label="Workspace Files", 
-                                lines=13, 
+                                lines=19, 
                                 interactive=False, 
                                 value=get_debug_info(),
                                 elem_classes="log-box"
                             )
 
     # ================= LOGIC BINDINGS =================
+    # Load custom JS to handle the drag overlay and click triggers
+    demo.load(js=drag_drop_js)
+
     key_btn.click(fn=save_api_settings, inputs=[key_input, api_base_url_input], outputs=[parse_status, debug_view])
     
     pdf_input.upload(fn=save_pdf, inputs=pdf_input, outputs=[parse_status, debug_view])