Update app.py

app.py

@@ -535,54 +535,107 @@ def export_json(image_name, result_text):
     except Exception as e:
         return "", f"[Export JSON Failed]: {e}"
 
+# --- 10. Gradio UI ---
+# with gr.Blocks(title="Camel-Doc-OCR") as demo:
+#     gr.Markdown("Camel-Doc-OCR (Qwen2.5-VL, 4-bit)")
+
+#     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])
+
+#     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)
+
+#     gr.Markdown("Chọn mẫu prompt:")
+#     with gr.Row():
+#         # for key in prompt_templates:
+#         #     btn = gr.Button(f"Mẫu {key}")
+#         #     btn.click(fn=insert_template, inputs=[gr.State(key)], outputs=config_input)
+#         for key in prompt_templates:
+#             gr.Button(f"Mẫu {key}").click(
+#                 fn=lambda k=key: insert_template(k),
+#                 outputs=config_input
+#             )
+
+
+#     run_btn = gr.Button("Chạy OCR")
+#     export_btn = gr.Button("Xuất JSON", visible=False)
+
+#     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]
+#     )
+
+#     # Update memory status
+#     run_btn.click(fn=lambda: 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
+#     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])
 # --- 10. Gradio UI ---
 with gr.Blocks(title="Camel-Doc-OCR") as demo:
-    gr.Markdown("Camel-Doc-OCR (Qwen2.5-VL, 4-bit)")
-
-    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])
-
-    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)
-
-    gr.Markdown("Chọn mẫu prompt:")
-    with gr.Row():
-        # for key in prompt_templates:
-        #     btn = gr.Button(f"Mẫu {key}")
-        #     btn.click(fn=insert_template, inputs=[gr.State(key)], outputs=config_input)
-        for key in prompt_templates:
-            gr.Button(f"Mẫu {key}").click(
-                fn=lambda k=key: insert_template(k),
-                outputs=config_input
-            )
-
-
-    run_btn = gr.Button("Chạy OCR")
-    export_btn = gr.Button("Xuất JSON", visible=False)
-
-    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]
-    )
+    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]
+        )
 
-    # Update memory status
-    run_btn.click(fn=lambda: 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])
+        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
-    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 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])
 
 if __name__ == "__main__":
     demo.launch()