Update app.py

app.py

@@ -228,11 +228,12 @@ def extract_text_from_image(
 def create_gradio_interface():
     """Create the Gradio interface for AIN OCR."""
     
-    # Custom CSS
+    # Custom CSS for better UI
     css = """
     .main-container {
-        max-width: 1200px;
+        max-width: 1400px;
         margin: 0 auto;
+        padding: 20px;
     }
     
     .header-text {
@@ -248,6 +249,8 @@ def create_gradio_interface():
         font-weight: bold !important;
         font-size: 1.1em !important;
         padding: 12px 24px !important;
+        width: 100% !important;
+        margin-top: 10px !important;
     }
     
     .process-button:hover {
@@ -255,15 +258,27 @@ def create_gradio_interface():
         box-shadow: 0 6px 12px rgba(0,0,0,0.2) !important;
     }
     
-    .output-text {
-        background: #f8f9fa;
-        border: 2px solid #dee2e6;
+    /* Larger font for extracted text */
+    .output-textbox textarea {
+        font-size: 20px !important;
+        line-height: 2.0 !important;
+        font-family: 'Segoe UI', 'Tahoma', 'Traditional Arabic', 'Arabic Typesetting', sans-serif !important;
+        padding: 24px !important;
+        direction: auto !important;
+        text-align: start !important;
+    }
+    
+    .output-textbox {
+        background: #ffffff;
+        border: 2px solid #e0e0e0;
         border-radius: 8px;
-        padding: 20px;
-        min-height: 300px;
-        font-family: 'Courier New', monospace;
-        white-space: pre-wrap;
-        direction: auto;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    
+    /* Better Arabic text support */
+    .output-textbox textarea[dir="rtl"] {
+        text-align: right !important;
+        direction: rtl !important;
     }
     
     .info-box {
@@ -273,6 +288,63 @@ def create_gradio_interface():
         margin: 10px 0;
         border-radius: 4px;
     }
+    
+    /* Status box styling */
+    .status-box {
+        background: #f0f4f8;
+        border: 1px solid #d0dae6;
+        border-radius: 6px;
+        padding: 12px;
+        margin-top: 10px;
+        text-align: center;
+        font-size: 14px;
+    }
+    
+    /* Better spacing for rows and columns */
+    .gradio-container {
+        gap: 20px !important;
+    }
+    
+    .contain {
+        gap: 15px !important;
+    }
+    
+    /* Image preview styling */
+    .image-preview {
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    
+    /* Accordion styling */
+    .accordion {
+        background: #f8f9fa;
+        border-radius: 8px;
+        margin-top: 15px;
+        padding: 5px;
+    }
+    
+    /* Clear button */
+    button[variant="secondary"] {
+        width: 100% !important;
+        margin-top: 10px !important;
+    }
+    
+    /* Label styling */
+    label {
+        font-weight: 600 !important;
+        margin-bottom: 8px !important;
+    }
+    
+    /* Better component spacing */
+    .gr-form {
+        gap: 12px !important;
+    }
+    
+    /* Example images styling */
+    .gr-examples {
+        margin-top: 15px;
+    }
     """
     
     with gr.Blocks(theme=gr.themes.Soft(), css=css, title="AIN VLM OCR") as demo:
@@ -299,22 +371,23 @@ def create_gradio_interface():
         """)
         
         # Main interface
-        with gr.Row():
+        with gr.Row(equal_height=False):
             # Left column - Input
-            with gr.Column(scale=1):
+            with gr.Column(scale=1, min_width=400):
                 # Image input
                 image_input = gr.Image(
                     label="📸 Upload Image",
                     type="pil",
-                    height=400
+                    height=400,
+                    elem_classes=["image-preview"]
                 )
                 
                 # Advanced settings
-                with gr.Accordion("⚙️ Advanced Settings", open=False):
+                with gr.Accordion("⚙️ Advanced Settings", open=False, elem_classes=["accordion"]):
                     custom_prompt = gr.Textbox(
                         label="Custom Prompt (Optional)",
                         placeholder="Leave empty to use default OCR prompt...",
-                        lines=4,
+                        lines=3,
                         info="Customize the prompt if you want specific extraction behavior"
                     )
                     
@@ -327,22 +400,24 @@ def create_gradio_interface():
                         info="Maximum length of extracted text"
                     )
                     
-                    gr.Markdown("**Image Resolution Settings**")
-                    gr.Markdown("*Controls the range of visual tokens (4-16384) for balancing quality and speed*")
+                    gr.Markdown("**📐 Image Resolution Settings**")
+                    gr.Markdown("*Controls visual token range (4-16384) - balance quality vs speed*")
                     
                     with gr.Row():
                         min_pixels_input = gr.Number(
                             value=MIN_PIXELS,
                             label="Min Pixels",
-                            info=f"Default: {MIN_PIXELS:,} (~{MIN_PIXELS//1000}k)"
+                            info=f"Default: {MIN_PIXELS:,} (~{MIN_PIXELS//1000}k)",
+                            precision=0
                         )
                         max_pixels_input = gr.Number(
                             value=MAX_PIXELS,
                             label="Max Pixels",
-                            info=f"Default: {MAX_PIXELS:,} (~{MAX_PIXELS//1000}k)"
+                            info=f"Default: {MAX_PIXELS:,} (~{MAX_PIXELS//1000}k)",
+                            precision=0
                         )
                     
-                    show_prompt_btn = gr.Button("👁️ Show Default Prompt", size="sm")
+                    show_prompt_btn = gr.Button("👁️ Show Default Prompt", size="sm", variant="secondary")
                 
                 # Process button
                 process_btn = gr.Button(
@@ -356,35 +431,40 @@ def create_gradio_interface():
                 clear_btn = gr.Button("🗑️ Clear All", variant="secondary", size="lg")
             
             # Right column - Output
-            with gr.Column(scale=1):
-                # Text output
+            with gr.Column(scale=1, min_width=500):
+                # Text output with larger font
                 text_output = gr.Textbox(
                     label="📝 Extracted Text",
                     placeholder="Extracted text will appear here...",
-                    lines=20,
-                    max_lines=25,
+                    lines=18,
+                    max_lines=22,
                     show_copy_button=True,
                     interactive=False,
-                    elem_classes=["output-text"]
+                    elem_classes=["output-textbox"],
+                    container=True,
                 )
                 
                 # Status/info
                 status_output = gr.Markdown(
-                    value="*Ready to process images*",
-                    elem_classes=["info-box"]
+                    value="✨ *Ready to process images*",
+                    elem_classes=["status-box"]
                 )
         
-        # Examples
-        gr.Markdown("### 📚 Example Images")
-        gr.Examples(
-            examples=[
-                ["image/app/1762329983969.png"],
-                ["image/app/1762330009302.png"],
-                ["image/app/1762330020168.png"],
-            ],
-            inputs=image_input,
-            label="Try these examples"
-        )
+        # Examples section
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown("### 📚 Example Images")
+                gr.Markdown("*Click on any example below to load it*")
+                gr.Examples(
+                    examples=[
+                        ["image/app/1762329983969.png"],
+                        ["image/app/1762330009302.png"],
+                        ["image/app/1762330020168.png"],
+                    ],
+                    inputs=image_input,
+                    label="",
+                    examples_per_page=3
+                )
         
         # Default prompt display
         default_prompt_display = gr.Textbox(