Update app.py

app.py

@@ -585,67 +585,156 @@ def export_json(image_name, result_text):
 #     export_btn.click(fn=lambda: gr.update(visible=True), outputs=[json_file])
 # --- 10. Gradio UI ---
 css = """
-html, body {
-    height: 100% !important;
-    overflow-y: auto !important;
+.gradio-textbox textarea {
+    font-size: 13px !important;
+    line-height: 1.3 !important;
+    padding: 6px 8px !important;
 }
-.gradio-container {
-    height: 100vh !important;
-    overflow-y: auto !important;
+.gradio-textbox label {
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    margin-bottom: 4px !important;
+}
+.gradio-button {
+    font-size: 12px !important;
+    padding: 4px 8px !important;
+    height: 28px !important;
+    min-height: 28px !important;
+    margin: 2px !important;
+}
+.gradio-button[data-variant="primary"] {
+    height: 36px !important;
+    font-size: 13px !important;
+    padding: 8px 16px !important;
+}
+.gradio-file {
+    font-size: 13px !important;
+}
+.gradio-file .file-upload {
+    padding: 8px !important;
+    min-height: 80px !important;
+}
+.gradio-markdown h3 {
+    font-size: 14px !important;
+    margin: 8px 0 4px 0 !important;
+}
+.gradio-markdown h2 {
+    font-size: 18px !important;
+    margin: 8px 0 !important;
+}
+.gradio-code {
+    font-size: 12px !important;
 }
 """
-with gr.Blocks(title="Camel-Doc-OCR") as demo:
-    gr.Markdown("## 🧾 Camel-Doc-OCR (Qwen2.5-VL, 4-bit)")
-    gr.Markdown(" ")  # Tạo khoảng cách đầu trang để tránh lỗi scroll
-
-    with gr.Column():  # 👈 Bao toàn bộ layout bên trong để đảm bảo bố cục không bị vỡ
-
-        # --- Status Bar ---
-        with gr.Row():
-            status_txt = gr.Textbox(label="Status & Memory", interactive=False)
-            cache_txt = gr.Textbox(label="Cache Stats", interactive=False)
-            clear_btn = gr.Button("Clear Cache")
-            clear_btn.click(fn=lambda: (cache_clear(), f"Cache: {len(_mru_cache)}/{CACHE_MAX_SIZE}"), outputs=[cache_txt])
-
-        # --- Input Fields ---
-        file_input = gr.File(label="📤 Tải ảnh hoặc PDF", file_types=[".jpg", ".jpeg", ".png", ".pdf"])
-        prompt_input = gr.Textbox(label="Prompt thuần", lines=2)
-        config_input = gr.Textbox(label="JSON Prompt", lines=12)
-
-        # --- Prompt Templates ---
-        gr.Markdown("### 📑 Chọn mẫu prompt:")
-        with gr.Row():
-            for key in prompt_templates:
-                gr.Button(f"Mẫu {key}").click(
-                    fn=lambda _, k=key: insert_template(k),
-                    inputs=[],
-                    outputs=config_input
-                )
-
-        # --- Run & Export Buttons ---
-        run_btn = gr.Button("🚀 Chạy OCR")
-        export_btn = gr.Button("📦 Xuất JSON", visible=False)
-
-        # --- Hidden & Output ---
-        hidden_name = gr.Textbox(visible=False)
-        result_output = gr.Textbox(label="Kết quả trích xuất", lines=20)
-        json_file = gr.File(label="File JSON", visible=False, file_types=[".json"])
-        json_text = gr.Code(label="JSON Output", language="json", lines=20)
-
-        # --- Run Inference ---
-        run_btn.click(
-            fn=handle_file,
-            inputs=[file_input, prompt_input, config_input],
-            outputs=[hidden_name, result_output]
-        )
-
-        run_btn.click(fn=get_memory_info, outputs=[status_txt])
-        run_btn.click(fn=lambda: f"Cache: {len(_mru_cache)}/{CACHE_MAX_SIZE}", outputs=[cache_txt])
-        run_btn.click(fn=lambda: gr.update(visible=True), outputs=[export_btn])
 
-        # --- Export JSON ---
-        export_btn.click(fn=export_json, inputs=[hidden_name, result_output], outputs=[json_file, json_text])
-        export_btn.click(fn=lambda: gr.update(visible=True), outputs=[json_file])
+with gr.Blocks(title="Camel-Doc-OCR", css=css) as demo:
+    gr.Markdown("## 🧾 Camel-Doc-OCR (Qwen2.5-VL, 4-bit)")
+    
+    # --- Status Bar (Full width) ---
+    with gr.Row():
+        status_txt = gr.Textbox(label="Status & Memory", interactive=False, scale=2)
+        cache_txt = gr.Textbox(label="Cache Stats", interactive=False, scale=1)
+        clear_btn = gr.Button("Clear Cache", scale=1)
+        clear_btn.click(fn=lambda: (cache_clear(), f"Cache: {len(_mru_cache)}/{CACHE_MAX_SIZE}"), outputs=[cache_txt])
+    
+    # --- Main Layout: 2 Columns ---
+    with gr.Row():
+        # === LEFT COLUMN: Input ===
+        with gr.Column(scale=1):
+            gr.Markdown("### 📥 INPUT")
+            
+            # File Input
+            file_input = gr.File(
+                label="📤 Tải ảnh hoặc PDF", 
+                file_types=[".jpg", ".jpeg", ".png", ".pdf"],
+                height=100
+            )
+            
+            # Prompt Input
+            prompt_input = gr.Textbox(
+                label="Prompt thuần", 
+                lines=2,
+                placeholder="Nhập prompt tùy chỉnh...",
+                max_lines=3
+            )
+            
+            # JSON Config
+            config_input = gr.Textbox(
+                label="JSON Prompt", 
+                lines=6,
+                placeholder="Cấu hình JSON sẽ xuất hiện ở đây...",
+                max_lines=8
+            )
+            
+            # Prompt Templates
+            gr.Markdown("### 📑 Mẫu:")
+            with gr.Row():
+                for key in list(prompt_templates.keys()):  # All buttons in one row
+                    gr.Button(f"{key}", size="sm", scale=1).click(
+                        fn=lambda *, k=key: insert_template(k),
+                        inputs=[],
+                        outputs=config_input
+                    )
+            
+            # Run Button
+            run_btn = gr.Button("🚀 Chạy OCR", variant="primary")
+            
+        # === RIGHT COLUMN: Output ===
+        with gr.Column(scale=1):
+            gr.Markdown("### 📤 OUTPUT")
+            
+            # Result Output
+            result_output = gr.Textbox(
+                label="Kết quả trích xuất", 
+                lines=10,
+                placeholder="Kết quả sẽ hiển thị ở đây sau khi chạy OCR...",
+                max_lines=12
+            )
+            
+            # Export Section
+            with gr.Row():
+                export_btn = gr.Button("📦 Xuất JSON", visible=False, variant="secondary", size="sm")
+                
+            # JSON Output
+            json_text = gr.Code(
+                label="JSON Output", 
+                language="json", 
+                lines=6,
+                visible=False
+            )
+            
+            # Download File
+            json_file = gr.File(
+                label="File JSON để tải", 
+                visible=False, 
+                file_types=[".json"]
+            )
+    
+    # --- Hidden Fields ---
+    hidden_name = gr.Textbox(visible=False)
+    
+    # --- Event Handlers ---
+    
+    # Run Inference
+    run_btn.click(
+        fn=handle_file,
+        inputs=[file_input, prompt_input, config_input],
+        outputs=[hidden_name, result_output]
+    )
+    
+    run_btn.click(fn=get_memory_info, outputs=[status_txt])
+    run_btn.click(fn=lambda: f"Cache: {len(_mru_cache)}/{CACHE_MAX_SIZE}", outputs=[cache_txt])
+    run_btn.click(fn=lambda: gr.update(visible=True), outputs=[export_btn])
+    
+    # Export JSON
+    export_btn.click(
+        fn=export_json,
+        inputs=[hidden_name, result_output],
+        outputs=[json_file, json_text]
+    )
+    
+    export_btn.click(fn=lambda: gr.update(visible=True), outputs=[json_file])
+    export_btn.click(fn=lambda: gr.update(visible=True), outputs=[json_text])
 
 if __name__ == "__main__":
     demo.launch()