Refine image upload area styles to improve layout and visibility, ensuring full frame display without scrollbars, and update label styles for better aesthetics in the AI License Plate Recognition System.

app.py

@@ -314,19 +314,42 @@ CUSTOM_CSS = """
     margin-bottom: 0.5rem !important;
 }
 
-/* Image upload area */
+/* Image upload area - แสดงเต็มกรอบ ไม่ตัด ไม่มี scrollbar */
+.image-upload,
+.image-upload .contain,
+.block:has(.image-upload) > div,
+.block:has(.image-upload) {
+    min-height: 300px !important;
+    max-height: none !important;
+    overflow: visible !important;
+    height: auto !important;
+}
 .image-upload {
     display: flex;
-    color: #60a5fa !important;
+    flex-direction: column;
     border: 2px dashed rgba(100, 116, 139, 0.6) !important;
     border-radius: 16px !important;
     background: rgba(30, 41, 59, 0.8) !important;
     backdrop-filter: blur(10px) !important;
     -webkit-backdrop-filter: blur(10px) !important;
     transition: all 0.3s ease !important;
-    min-height: 280px !important;
+    min-height: 300px !important;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
 }
+.image-upload label {
+    color: #60a5fa !important;
+    font-weight: 600 !important;
+    margin-bottom: 0.5rem !important;
+}
+/* Drop zone ภายใน Image component - ให้เต็มกรอบ */
+.image-upload [class*="preview"],
+.image-upload [class*="drop"],
+.image-upload .overflow-hidden,
+.image-upload > div {
+    min-height: 280px !important;
+    max-height: none !important;
+    overflow: visible !important;
+}
 
 .image-upload:hover {
     border-color: var(--primary) !important;
@@ -334,15 +357,11 @@ CUSTOM_CSS = """
     box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2) !important;
 }
 
-/* Image upload label - สีน้ำเงิน */
-.block:has(.image-upload) label,
-.image-upload label,
-.image-upload + [class*="label"] {
-    color: #3b82f6 !important;
-}
-.image-upload .label-wrap,
-.block:has(.image-upload) .label-wrap {
-    color: #3b82f6 !important;
+/* Column อัพโหลด - ไม่ตัด Drop zone ไม่มี scrollbar */
+.column-upload,
+.column-upload .contain {
+    overflow: visible !important;
+    max-height: none !important;
 }
 
 /* Textbox / Textarea styling */
@@ -1196,14 +1215,14 @@ def create_demo_interface() -> gr.Blocks:
         # Main content area
         with gr.Row():
             # Left column - Image upload
-            with gr.Column(scale=1):
+            with gr.Column(scale=1, elem_classes=["column-upload"]):
                 gr.HTML("<h3 class='section-header'>📷 อัพโหลดรูปป้ายทะเบียน</h3>")
                 
                 image_input = gr.Image(
                     label="อัพโหลดรูปภาพ",
                     type="pil",
                     elem_classes=["image-upload"],
-                    height=300
+                    height=320
                 )
                 
                 with gr.Accordion("⚙️ ตั้งค่าเพิ่มเติม", open=False):