Update app theme colors and styles for improved UI consistency and aesthetics

app.py

@@ -62,10 +62,11 @@ CUSTOM_CSS = """
 }
 
 :root {
-    --primary: #0ea5e9;
-    --primary-light: #7dd3fc;
-    --secondary: #10b981;
-    --accent: #f59e0b;
+    /* Hurricane theme: storm blue + amber */
+    --primary: #3b82f6;
+    --primary-light: #60a5fa;
+    --secondary: #f59e0b;
+    --accent: #f97316;
     --success: #22c55e;
     --error: #ef4444;
     --warning: #eab308;
@@ -73,7 +74,7 @@ CUSTOM_CSS = """
     --bg-card: rgba(30, 41, 59, 0.9);
     --bg-card-hover: rgba(51, 65, 85, 0.9);
     --text-white: #ffffff;
-    --text-bright: #f8fafc;
+    --text-bright: #f1f5f9;
     --text-light: #e2e8f0;
     --text-muted: #94a3b8;
     --border: rgba(71, 85, 105, 0.8);
@@ -119,7 +120,7 @@ CUSTOM_CSS = """
     font-family: 'Kanit', sans-serif;
     font-size: 3.5rem;
     font-weight: 700;
-    background: linear-gradient(135deg, #0ea5e9 0%, #10b981 50%, #f59e0b 100%);
+    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #f59e0b 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -128,7 +129,7 @@ CUSTOM_CSS = """
 }
 
 .main-title p {
-    color: #94a3b8;
+    color: #cbd5e1;
     font-size: 1.15rem;
     font-weight: 500;
 }
@@ -183,7 +184,7 @@ CUSTOM_CSS = """
 
 /* Primary Button */
 .primary-btn {
-    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
+    background: linear-gradient(135deg, var(--primary) 0%, #2563eb 50%, var(--secondary) 100%) !important;
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
     border-radius: 12px !important;
     padding: 14px 36px !important;
@@ -191,7 +192,7 @@ CUSTOM_CSS = """
     font-size: 1.05rem !important;
     color: white !important;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
     text-transform: none !important;
     backdrop-filter: blur(5px) !important;
     -webkit-backdrop-filter: blur(5px) !important;
@@ -199,7 +200,7 @@ CUSTOM_CSS = """
 
 .primary-btn:hover {
     transform: translateY(-3px) !important;
-    box-shadow: 0 8px 30px rgba(14, 165, 233, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
+    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
 }
 
 /* Extract Button - Different color */
@@ -226,7 +227,7 @@ CUSTOM_CSS = """
 .edit-field input,
 .edit-field textarea {
     background: rgba(30, 41, 59, 0.95) !important;
-    border: 2px solid rgba(14, 165, 233, 0.4) !important;
+    border: 2px solid rgba(59, 130, 246, 0.4) !important;
     color: #ffffff !important;
     font-size: 1.1rem !important;
     font-weight: 500 !important;
@@ -266,8 +267,8 @@ CUSTOM_CSS = """
     margin: 1rem 0 !important;
     border-radius: 12px !important;
     overflow: hidden !important;
-    border: 2px solid rgba(16, 185, 129, 0.6) !important;
-    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4) !important;
+    border: 2px solid rgba(59, 130, 246, 0.6) !important;
+    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) !important;
     background: rgba(30, 41, 59, 0.9) !important;
     backdrop-filter: blur(10px) !important;
     -webkit-backdrop-filter: blur(10px) !important;
@@ -282,7 +283,7 @@ CUSTOM_CSS = """
 }
 
 .cropped-plate label {
-    color: #10b981 !important;
+    color: #60a5fa !important;
     font-weight: 600 !important;
     margin-bottom: 0.5rem !important;
 }
@@ -301,8 +302,8 @@ CUSTOM_CSS = """
 
 .image-upload:hover {
     border-color: var(--primary) !important;
-    background: rgba(14, 165, 233, 0.15) !important;
-    box-shadow: 0 8px 30px rgba(14, 165, 233, 0.2) !important;
+    background: rgba(59, 130, 246, 0.15) !important;
+    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2) !important;
 }
 
 /* Textbox / Textarea styling */
@@ -320,7 +321,7 @@ textarea, input[type="text"] {
 
 textarea:focus, input[type="text"]:focus {
     border-color: var(--primary) !important;
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25) !important;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
     outline: none !important;
 }
 
@@ -379,7 +380,7 @@ table {
 }
 
 th {
-    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
     color: #ffffff !important;
     font-weight: 700 !important;
     padding: 14px 16px !important;
@@ -481,9 +482,9 @@ button[role="tab"]:hover {
 }
 
 button[role="tab"][aria-selected="true"] {
-    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
+    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
     color: #ffffff !important;
-    border-color: #0ea5e9 !important;
+    border-color: #3b82f6 !important;
     font-weight: 700 !important;
     box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4) !important;
 }
@@ -528,7 +529,7 @@ button[role="tab"][aria-selected="true"] {
 }
 
 .footer a {
-    color: #0ea5e9;
+    color: #3b82f6;
     text-decoration: none;
     font-weight: 600;
     transition: color 0.2s ease;
@@ -596,7 +597,7 @@ hr {
 }
 
 .how-to-use strong {
-    color: #0ea5e9 !important;
+    color: #3b82f6 !important;
     font-weight: 600 !important;
 }
 
@@ -1065,8 +1066,8 @@ def create_demo_interface() -> gr.Blocks:
         title="AI OCR - Thai License Plate Recognition",
         css=CUSTOM_CSS,
         theme=gr.themes.Base(
-            primary_hue="sky",
-            secondary_hue="emerald",
+            primary_hue="blue",
+            secondary_hue="amber",
             neutral_hue="slate",
         ).set(
             body_background_fill="transparent",
@@ -1075,8 +1076,8 @@ def create_demo_interface() -> gr.Blocks:
             block_background_fill_dark="rgba(30, 41, 59, 0.9)",
             input_background_fill="rgba(30, 41, 59, 0.95)",
             input_background_fill_dark="rgba(30, 41, 59, 0.95)",
-            button_primary_background_fill="linear-gradient(135deg, #0ea5e9, #10b981)",
-            button_primary_background_fill_hover="linear-gradient(135deg, #38bdf8, #34d399)",
+            button_primary_background_fill="linear-gradient(135deg, #3b82f6, #f59e0b)",
+            button_primary_background_fill_hover="linear-gradient(135deg, #60a5fa, #fbbf24)",
         ),
     ) as demo:
         
@@ -1258,7 +1259,7 @@ def create_demo_interface() -> gr.Blocks:
             <div class="how-to-use">
                 <h3>💡 วิธีใช้งาน (Pipeline)</h3>
                 <div style="background: rgba(15, 23, 42, 0.6); padding: 1rem; border-radius: 8px; margin-bottom: 1rem;">
-                    <p style="color: #0ea5e9; font-weight: 600; margin-bottom: 0.5rem;">📋 Process Flow:</p>
+                    <p style="color: #60a5fa; font-weight: 600; margin-bottom: 0.5rem;">📋 Process Flow:</p>
                     <ol style="color: #94a3b8; line-height: 2;">
                         <li>📤 <strong style="color: #f1f5f9;">อัพโหลดรูปภาพ</strong> - รูปรถที่มีป้ายทะเบียน</li>
                         <li>🔍 <strong style="color: #f1f5f9;">กด "อ่านทะเบียน"</strong>
@@ -1282,7 +1283,7 @@ def create_demo_interface() -> gr.Blocks:
                 <p style="margin-top: 1rem; color: #22c55e; font-size: 0.9rem;">
                     ✅ <strong>ระบบใหม่:</strong> บันทึกเฉพาะรูป Cropped + JSON ที่ตรวจสอบแล้ว (เหมาะสำหรับ Training)
                 </p>
-                <p style="margin-top: 0.5rem; color: #10b981; font-size: 0.9rem;">
+                <p style="margin-top: 0.5rem; color: #60a5fa; font-size: 0.9rem;">
                     📝 <strong>Training Data:</strong> ไฟล์ที่บันทึกพร้อมใช้เป็น training data ทันที
                 </p>
                 <p style="margin-top: 0.5rem; color: #94a3b8; font-size: 0.9rem;">
@@ -1318,7 +1319,7 @@ def create_demo_interface() -> gr.Blocks:
                             <li><strong>Step 2:</strong> Hurricane OCR v1 อ่านข้อความจากป้ายที่ crop แล้ว</li>
                             <li><strong>Step 3:</strong> Extractor ดึงข้อมูลเป็น structured format (JSON/DataFrame)</li>
                         </ol>
-                        <p style="margin-top: 0.5rem; color: #10b981; font-size: 0.85rem;">
+                        <p style="margin-top: 0.5rem; color: #60a5fa; font-size: 0.85rem;">
                             ✅ <strong>Optimized:</strong> ตรวจจับป้ายครั้งเดียว แล้วส่ง cropped image ไปให้ OCR (ไม่ซ้ำซ้อน)
                         </p>
                     </li>
@@ -1337,10 +1338,10 @@ def create_demo_interface() -> gr.Blocks:
                     <li>ป้ายทะเบียนรถแท็กซี่ / รถสาธารณะ</li>
                     <li>รองรับทุกจังหวัดในประเทศไทย (77 จังหวัด)</li>
                 </ul>
-                <p style="margin-top: 1rem; color: #10b981; font-size: 0.9rem;">
+                <p style="margin-top: 1rem; color: #60a5fa; font-size: 0.9rem;">
                     ✅ <strong>Detection:</strong> HurricaneOD_beta สามารถตรวจจับป้ายทะเบียนจากรูปภาพรถได้อัตโนมัติ
                 </p>
-                <p style="margin-top: 0.5rem; color: #10b981; font-size: 0.9rem;">
+                <p style="margin-top: 0.5rem; color: #60a5fa; font-size: 0.9rem;">
                     ✅ <strong>OCR:</strong> Hurricane OCR อ่านข้อความได้แม่นยำสูง รองรับตัวอักษรไทยและตัวเลข
                 </p>
             </div>