Implement feature X to enhance user experience and fix bug Y in module Z

app.py

@@ -36,19 +36,19 @@ def get_nlp(model_name: str):
         logger.error(f"Error loading model {model_name}: {e}")
         raise gr.Error(f"ไม่สามารถโหลดโมเดล {model_name} ได้: {str(e)}")
 
-# Enhanced label mapping with modern styling
+# Enhanced label mapping with modern styling for dark blue theme
 LABEL_MAPPINGS = {
-    "LABEL_0": {"code": 0, "name": "question", "emoji": "🤔", "color": "#6366f1", "bg": "rgba(99, 102, 241, 0.1)", "description": "คำถาม"},
-    "LABEL_1": {"code": 1, "name": "negative", "emoji": "😢", "color": "#ef4444", "bg": "rgba(239, 68, 68, 0.1)", "description": "เชิงลบ"},
-    "LABEL_2": {"code": 2, "name": "neutral", "emoji": "😐", "color": "#f59e0b", "bg": "rgba(245, 158, 11, 0.1)", "description": "เป็นกลาง"},
-    "LABEL_3": {"code": 3, "name": "positive", "emoji": "😊", "color": "#10b981", "bg": "rgba(16, 185, 129, 0.1)", "description": "เชิงบวก"},
+    "LABEL_0": {"code": 0, "name": "question", "emoji": "🤔", "color": "#60a5fa", "bg": "rgba(96, 165, 250, 0.2)", "description": "คำถาม"},
+    "LABEL_1": {"code": 1, "name": "negative", "emoji": "😢", "color": "#f87171", "bg": "rgba(248, 113, 113, 0.2)", "description": "เชิงลบ"},
+    "LABEL_2": {"code": 2, "name": "neutral", "emoji": "😐", "color": "#facc15", "bg": "rgba(250, 204, 21, 0.2)", "description": "เป็นกลาง"},
+    "LABEL_3": {"code": 3, "name": "positive", "emoji": "😊", "color": "#34d399", "bg": "rgba(52, 211, 153, 0.2)", "description": "เชิงบวก"},
     
-    "POSITIVE": {"code": 3, "name": "positive", "emoji": "😊", "color": "#10b981", "bg": "rgba(16, 185, 129, 0.1)", "description": "เชิงบวก"},
-    "NEGATIVE": {"code": 1, "name": "negative", "emoji": "😢", "color": "#ef4444", "bg": "rgba(239, 68, 68, 0.1)", "description": "เชิงลบ"},
-    "NEUTRAL": {"code": 2, "name": "neutral", "emoji": "😐", "color": "#f59e0b", "bg": "rgba(245, 158, 11, 0.1)", "description": "เป็นกลาง"},
+    "POSITIVE": {"code": 3, "name": "positive", "emoji": "😊", "color": "#34d399", "bg": "rgba(52, 211, 153, 0.2)", "description": "เชิงบวก"},
+    "NEGATIVE": {"code": 1, "name": "negative", "emoji": "😢", "color": "#f87171", "bg": "rgba(248, 113, 113, 0.2)", "description": "เชิงลบ"},
+    "NEUTRAL": {"code": 2, "name": "neutral", "emoji": "😐", "color": "#facc15", "bg": "rgba(250, 204, 21, 0.2)", "description": "เป็นกลาง"},
     
-    "0": {"code": 0, "name": "negative", "emoji": "😢", "color": "#ef4444", "bg": "rgba(239, 68, 68, 0.1)", "description": "เชิงลบ"},
-    "1": {"code": 1, "name": "positive", "emoji": "😊", "color": "#10b981", "bg": "rgba(16, 185, 129, 0.1)", "description": "เชิงบวก"},
+    "0": {"code": 0, "name": "negative", "emoji": "😢", "color": "#f87171", "bg": "rgba(248, 113, 113, 0.2)", "description": "เชิงลบ"},
+    "1": {"code": 1, "name": "positive", "emoji": "😊", "color": "#34d399", "bg": "rgba(52, 211, 153, 0.2)", "description": "เชิงบวก"},
 }
 
 def get_label_info(label: str) -> Dict:
@@ -57,8 +57,8 @@ def get_label_info(label: str) -> Dict:
         "code": -1, 
         "name": label.lower(), 
         "emoji": "🔍", 
-        "color": "#6b7280", 
-        "bg": "rgba(107, 114, 128, 0.1)",
+        "color": "#64748b", 
+        "bg": "rgba(100, 116, 139, 0.2)",
         "description": "ไม่ทราบ"
     })
 
@@ -73,10 +73,10 @@ def create_confidence_bar(score: float) -> str:
     percentage = int(score * 100)
     return f"""
     <div style="display: flex; align-items: center; gap: 10px; margin: 8px 0;">
-        <div style="flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden;">
-            <div style="width: {percentage}%; height: 100%; background: linear-gradient(90deg, #10b981, #059669); transition: all 0.3s ease;"></div>
+        <div style="flex: 1; height: 8px; background: #334155; border-radius: 4px; overflow: hidden;">
+            <div style="width: {percentage}%; height: 100%; background: linear-gradient(90deg, #60a5fa, #3b82f6); transition: all 0.3s ease;"></div>
         </div>
-        <span style="font-weight: 600; color: #374151; min-width: 50px;">{percentage}%</span>
+        <span style="font-weight: 600; color: #cbd5e1; min-width: 50px;">{percentage}%</span>
     </div>
     """
 
@@ -84,8 +84,8 @@ def analyze_text(text: str, model_name: str) -> str:
     """Enhanced text analysis with modern HTML formatting"""
     if not text or not text.strip():
         return """
-        <div style="padding: 20px; background: rgba(239, 68, 68, 0.1); border-radius: 12px; border-left: 4px solid #ef4444;">
-            <div style="color: #dc2626; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+        <div style="padding: 20px; background: rgba(248, 113, 113, 0.2); border-radius: 12px; border-left: 4px solid #f87171;">
+            <div style="color: #f87171; font-weight: 600; display: flex; align-items: center; gap: 8px;">
                 <span style="font-size: 20px;">⚠️</span>
                 กรุณาใส่ข้อความที่ต้องการวิเคราะห์
             </div>
@@ -96,8 +96,8 @@ def analyze_text(text: str, model_name: str) -> str:
     
     if not sentences:
         return """
-        <div style="padding: 20px; background: rgba(239, 68, 68, 0.1); border-radius: 12px; border-left: 4px solid #ef4444;">
-            <div style="color: #dc2626; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+        <div style="padding: 20px; background: rgba(248, 113, 113, 0.2); border-radius: 12px; border-left: 4px solid #f87171;">
+            <div style="color: #f87171; font-weight: 600; display: flex; align-items: center; gap: 8px;">
                 <span style="font-size: 20px;">⚠️</span>
                 ไม่พบประโยคที่สามารถวิเคราะห์ได้ กรุณาใส่ข้อความที่ยาวกว่านี้
             </div>
@@ -108,8 +108,8 @@ def analyze_text(text: str, model_name: str) -> str:
         nlp = get_nlp(model_name)
     except Exception as e:
         return f"""
-        <div style="padding: 20px; background: rgba(239, 68, 68, 0.1); border-radius: 12px; border-left: 4px solid #ef4444;">
-            <div style="color: #dc2626; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+        <div style="padding: 20px; background: rgba(248, 113, 113, 0.2); border-radius: 12px; border-left: 4px solid #f87171;">
+            <div style="color: #f87171; font-weight: 600; display: flex; align-items: center; gap: 8px;">
                 <span style="font-size: 20px;">❌</span>
                 เกิดข้อผิดพลาดในการโหลดโมเดล: {str(e)}
             </div>
@@ -118,7 +118,7 @@ def analyze_text(text: str, model_name: str) -> str:
     
     # Header
     html_parts = ["""
-    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 24px; border-radius: 16px 16px 0 0; margin-bottom: 0;">
+    <div style="background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: #f8fafc; padding: 24px; border-radius: 16px 16px 0 0; margin-bottom: 0;">
         <h2 style="margin: 0; font-size: 24px; font-weight: 700; display: flex; align-items: center; gap: 12px;">
             <span style="font-size: 28px;">🧠</span>
             ผลการวิเคราะห์ความรู้สึก
@@ -166,19 +166,19 @@ def analyze_text(text: str, model_name: str) -> str:
     
     # Results container
     html_parts.append("""
-    <div style="background: white; padding: 0; border-radius: 0 0 16px 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden;">
+    <div style="background: #0f172a; padding: 0; border-radius: 0 0 16px 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); overflow: hidden;">
     """)
     
     # Individual sentence results
     for result in sentence_results:
         if 'error' in result:
             html_parts.append(f"""
-            <div style="padding: 20px; border-bottom: 1px solid #f3f4f6;">
-                <div style="color: #dc2626; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+            <div style="padding: 20px; border-bottom: 1px solid #1e293b;">
+                <div style="color: #f87171; font-weight: 600; display: flex; align-items: center; gap: 8px;">
                     <span style="font-size: 18px;">❌</span>
                     เกิดข้อผิดพลาดในการวิเคราะห์ประโยคที่ {result['index']}
                 </div>
-                <p style="color: #6b7280; margin: 8px 0 0 0; font-size: 14px;">{result['error']}</p>
+                <p style="color: #94a3b8; margin: 8px 0 0 0; font-size: 14px;">{result['error']}</p>
             </div>
             """)
         else:
@@ -186,22 +186,22 @@ def analyze_text(text: str, model_name: str) -> str:
             confidence_bar = create_confidence_bar(result['score'])
             
             html_parts.append(f"""
-            <div style="padding: 20px; border-bottom: 1px solid #f3f4f6; transition: all 0.2s ease;" onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background='white'">
+            <div style="padding: 20px; border-bottom: 1px solid #1e293b; transition: all 0.2s ease;" onmouseover="this.style.background='#1e293b'" onmouseout="this.style.background='#0f172a'">
                 <div style="display: flex; align-items: flex-start; gap: 16px;">
                     <div style="background: {label_info['bg']}; padding: 12px; border-radius: 50%; min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
                         <span style="font-size: 20px;">{label_info['emoji']}</span>
                     </div>
                     <div style="flex: 1;">
                         <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
-                            <span style="background: {label_info['color']}; color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;">
+                            <span style="background: {label_info['color']}; color: #f8fafc; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;">
                                 {label_info['description']}
                             </span>
-                            <span style="color: #6b7280; font-size: 14px;">ประโยคที่ {result['index']}</span>
+                            <span style="color: #94a3b8; font-size: 14px;">ประโยคที่ {result['index']}</span>
                         </div>
-                        <p style="color: #374151; margin: 0 0 12px 0; font-size: 16px; line-height: 1.5;">
+                        <p style="color: #f8fafc; margin: 0 0 12px 0; font-size: 16px; line-height: 1.5;">
                             "{result['sentence'][:150]}{'...' if len(result['sentence']) > 150 else ''}"
                         </p>
-                        <div style="color: #6b7280; font-size: 14px; margin-bottom: 8px;">ความมั่นใจ:</div>
+                        <div style="color: #94a3b8; font-size: 14px; margin-bottom: 8px;">ความมั่นใจ:</div>
                         {confidence_bar}
                     </div>
                 </div>
@@ -214,40 +214,40 @@ def analyze_text(text: str, model_name: str) -> str:
     
     # Create chart data for summary
     chart_items = []
-    colors = {"positive": "#10b981", "negative": "#ef4444", "neutral": "#f59e0b", "question": "#6366f1", "other": "#6b7280"}
+    colors = {"positive": "#34d399", "negative": "#f87171", "neutral": "#facc15", "question": "#60a5fa", "other": "#64748b"}
     emojis = {"positive": "😊", "negative": "😢", "neutral": "😐", "question": "🤔", "other": "🔍"}
     
     for sentiment, count in sentiment_counts.items():
         if count > 0:
             percentage = (count / total_sentences) * 100
             chart_items.append(f"""
-            <div style="display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(99, 102, 241, 0.02); border-radius: 8px;">
+            <div style="display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(59, 130, 246, 0.1); border-radius: 8px;">
                 <span style="font-size: 24px;">{emojis.get(sentiment, '🔍')}</span>
                 <div style="flex: 1;">
-                    <div style="font-weight: 600; color: #374151; text-transform: capitalize;">{sentiment}</div>
-                    <div style="color: #6b7280; font-size: 14px;">{count} ประโยค ({percentage:.1f}%)</div>
+                    <div style="font-weight: 600; color: #f8fafc; text-transform: capitalize;">{sentiment}</div>
+                    <div style="color: #94a3b8; font-size: 14px;">{count} ประโยค ({percentage:.1f}%)</div>
                 </div>
-                <div style="width: 60px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden;">
-                    <div style="width: {percentage}%; height: 100%; background: {colors.get(sentiment, '#6b7280')}; transition: all 0.3s ease;"></div>
+                <div style="width: 60px; height: 6px; background: #334155; border-radius: 3px; overflow: hidden;">
+                    <div style="width: {percentage}%; height: 100%; background: {colors.get(sentiment, '#64748b')}; transition: all 0.3s ease;"></div>
                 </div>
             </div>
             """)
     
     html_parts.append(f"""
-    <div style="padding: 24px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);">
-        <h3 style="color: #1e293b; margin: 0 0 20px 0; font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px;">
+    <div style="padding: 24px; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
+        <h3 style="color: #f8fafc; margin: 0 0 20px 0; font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px;">
             <span style="font-size: 24px;">📊</span>
             สรุปผลการวิเคราะห์
         </h3>
         
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px;">
-            <div style="background: white; padding: 20px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
-                <div style="font-size: 32px; font-weight: 700; color: #6366f1; margin-bottom: 4px;">{total_sentences}</div>
-                <div style="color: #6b7280; font-size: 14px;">ประโยคทั้งหมด</div>
+            <div style="background: #1e293b; padding: 20px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3);">
+                <div style="font-size: 32px; font-weight: 700; color: #60a5fa; margin-bottom: 4px;">{total_sentences}</div>
+                <div style="color: #94a3b8; font-size: 14px;">ประโยคทั้งหมด</div>
             </div>
-            <div style="background: white; padding: 20px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
-                <div style="font-size: 32px; font-weight: 700; color: #10b981; margin-bottom: 4px;">{avg_confidence*100:.0f}%</div>
-                <div style="color: #6b7280; font-size: 14px;">ความมั่นใจเฉลี่ย</div>
+            <div style="background: #1e293b; padding: 20px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3);">
+                <div style="font-size: 32px; font-weight: 700; color: #34d399; margin-bottom: 4px;">{avg_confidence*100:.0f}%</div>
+                <div style="color: #94a3b8; font-size: 14px;">ความมั่นใจเฉลี่ย</div>
             </div>
         </div>
         
@@ -261,7 +261,7 @@ def analyze_text(text: str, model_name: str) -> str:
     
     return "".join(html_parts)
 
-# Modern CSS with glassmorphism and smooth animations
+# Modern CSS with dark blue theme
 CUSTOM_CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
@@ -272,36 +272,36 @@ CUSTOM_CSS = """
 .gradio-container {
     max-width: 1200px !important;
     margin: 0 auto !important;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%) !important;
     min-height: 100vh;
     padding: 20px;
 }
 
 .main-content {
-    background: rgba(255, 255, 255, 0.95) !important;
+    background: rgba(15, 23, 42, 0.95) !important;
     backdrop-filter: blur(20px) !important;
     border-radius: 24px !important;
-    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37) !important;
-    border: 1px solid rgba(255, 255, 255, 0.18) !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
+    border: 1px solid rgba(59, 130, 246, 0.2) !important;
     overflow: hidden;
 }
 
 .glass-card {
-    background: rgba(255, 255, 255, 0.9) !important;
-    backdrop-filter: blur(10px) !important;
+    background: rgba(30, 58, 138, 0.9) !important;
+    backdrop-filter: blur(12px) !important;
     border-radius: 16px !important;
-    border: 1px solid rgba(255, 255, 255, 0.2) !important;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
+    border: 1px solid rgba(59, 130, 246, 0.3) !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
     transition: all 0.3s ease !important;
 }
 
 .glass-card:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
 }
 
 .gr-button {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%) !important;
     border: none !important;
     border-radius: 12px !important;
     padding: 12px 24px !important;
@@ -309,47 +309,50 @@ CUSTOM_CSS = """
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
     transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
+    color: #f8fafc !important;
 }
 
 .gr-button:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
+    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6) !important;
 }
 
 .gr-button.secondary {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
-    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4) !important;
+    background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%) !important;
+    box-shadow: 0 4px 15px rgba(96, 165, 250, 0.4) !important;
 }
 
 .gr-button.secondary:hover {
-    box-shadow: 0 6px 20px rgba(240, 147, 251, 0.6) !important;
+    box-shadow: 0 6px 20px rgba(96, 165, 250, 0.6) !important;
 }
 
 .gr-textbox textarea, .gr-textbox input {
     border-radius: 12px !important;
-    border: 2px solid rgba(102, 126, 234, 0.2) !important;
+    border: 2px solid rgba(59, 130, 246, 0.3) !important;
     font-size: 16px !important;
     padding: 16px !important;
     transition: all 0.3s ease !important;
-    background: rgba(255, 255, 255, 0.9) !important;
+    background: rgba(30, 41, 59, 0.9) !important;
+    color: #f8fafc !important;
 }
 
 .gr-textbox textarea:focus, .gr-textbox input:focus {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+    border-color: #3b82f6 !important;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
     transform: scale(1.01) !important;
 }
 
 .gr-dropdown > div {
     border-radius: 12px !important;
-    border: 2px solid rgba(102, 126, 234, 0.2) !important;
-    background: rgba(255, 255, 255, 0.9) !important;
+    border: 2px solid rgba(59, 130, 246, 0.3) !important;
+    background: rgba(30, 41, 59, 0.9) !important;
+    color: #f8fafc !important;
 }
 
 .gr-dropdown > div:focus-within {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+    border-color: #3b82f6 !important;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
 }
 
 .gr-panel {
@@ -374,17 +377,17 @@ CUSTOM_CSS = """
 }
 
 ::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(15, 23, 42, 0.3);
     border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: rgba(102, 126, 234, 0.6);
+    background: rgba(59, 130, 246, 0.6);
     border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: rgba(102, 126, 234, 0.8);
+    background: rgba(59, 130, 246, 0.8);
 }
 
 /* Animation for content */
@@ -410,16 +413,17 @@ CUSTOM_CSS = """
 }
 
 .gr-examples .gr-button {
-    background: rgba(255, 255, 255, 0.1) !important;
-    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    background: rgba(59, 130, 246, 0.2) !important;
+    border: 1px solid rgba(59, 130, 246, 0.4) !important;
     margin: 4px !important;
     font-size: 14px !important;
     text-transform: none !important;
     letter-spacing: normal !important;
+    color: #f8fafc !important;
 }
 
 .gr-examples .gr-button:hover {
-    background: rgba(255, 255, 255, 0.2) !important;
+    background: rgba(59, 130, 246, 0.4) !important;
     transform: scale(1.02) !important;
 }
 """
@@ -428,7 +432,7 @@ CUSTOM_CSS = """
 with gr.Blocks(
     theme=gr.themes.Glass(
         primary_hue="blue",
-        secondary_hue="purple",
+        secondary_hue="indigo",
         neutral_hue="slate",
         font=["Inter", "Noto Sans Thai", "sans-serif"]
     ),
@@ -436,15 +440,15 @@ with gr.Blocks(
     title="🧠 AI Thai Sentiment Analyzer - วิเคราะห์ความรู้สึกภาษาไทย"
 ) as demo:
     
-    # Header with modern design
+    # Header with dark blue design
     gr.HTML("""
     <div style="text-align: center; padding: 40px 0 30px 0;">
-        <div style="display: inline-block; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); padding: 20px 40px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 20px;">
-            <h1 style="font-size: 3.5em; margin: 0; color: white; font-weight: 800; text-shadow: 0 4px 8px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; gap: 20px;">
+        <div style="display: inline-block; background: rgba(30, 58, 138, 0.9); backdrop-filter: blur(10px); padding: 20px 40px; border-radius: 20px; border: 1px solid rgba(59, 130, 246, 0.3); margin-bottom: 20px;">
+            <h1 style="font-size: 3.5em; margin: 0; color: #f8fafc; font-weight: 800; text-shadow: 0 4px 8px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; gap: 20px;">
                 <span style="font-size: 1.2em;">🧠</span>
                 Thai Sentiment AI
             </h1>
-            <p style="font-size: 1.4em; color: rgba(255,255,255,0.9); margin: 10px 0 0 0; font-weight: 300; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">
+            <p style="font-size: 1.4em; color: #cbd5e1; margin: 10px 0 0 0; font-weight: 300; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">
                 ระบบวิเคราะห์ความรู้สึกภาษาไทยด้วย AI ที่ทันสมัยและแม่นยำ
             </p>
         </div>
@@ -457,7 +461,7 @@ with gr.Blocks(
             # Model Selection Card
             with gr.Group():
                 gr.HTML("""
-                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 16px 16px 0 0; margin: -20px -20px 20px -20px;">
+                <div style="background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: #f8fafc; padding: 20px; border-radius: 16px 16px 0 0; margin: -20px -20px 20px -20px;">
                     <h3 style="margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px;">
                         <span style="font-size: 20px;">🤖</span>
                         เลือกโมเดล AI
@@ -477,26 +481,26 @@ with gr.Blocks(
             # Tips Card
             with gr.Group():
                 gr.HTML("""
-                <div style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); padding: 20px; border-radius: 16px;">
-                    <h4 style="color: #8b4513; margin: 0 0 16px 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px;">
+                <div style="background: linear-gradient(135deg, #1e40af 0%, #1e293b 100%); padding: 20px; border-radius: 16px;">
+                    <h4 style="color: #f8fafc; margin: 0 0 16px 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px;">
                         <span style="font-size: 18px;">💡</span>
                         เคล็ดลับการใช้งาน
                     </h4>
-                    <div style="color: #8b4513; font-size: 14px; line-height: 1.6;">
+                    <div style="color: #cbd5e1; font-size: 14px; line-height: 1.6;">
                         <div style="margin-bottom: 12px; display: flex; align-items: flex-start; gap: 8px;">
-                            <span style="color: #ff6b35; font-weight: 600;">•</span>
+                            <span style="color: #60a5fa; font-weight: 600;">•</span>
                             <span>พิมพ์ข้อความภาษาไทยที่ต้องการวิเคราะห์</span>
                         </div>
                         <div style="margin-bottom: 12px; display: flex; align-items: flex-start; gap: 8px;">
-                            <span style="color: #ff6b35; font-weight: 600;">•</span>
+                            <span style="color: #60a5fa; font-weight: 600;">•</span>
                             <span>แยกประโยคด้วยจุด (.) หรือขึ้นบรรทัดใหม่</span>
                         </div>
                         <div style="margin-bottom: 12px; display: flex; align-items: flex-start; gap: 8px;">
-                            <span style="color: #ff6b35; font-weight: 600;">•</span>
+                            <span style="color: #60a5fa; font-weight: 600;">•</span>
                             <span>สามารถวิเคราะห์หลายประโยคพร้อมกันได้</span>
                         </div>
                         <div style="display: flex; align-items: flex-start; gap: 8px;">
-                            <span style="color: #ff6b35; font-weight: 600;">•</span>
+                            <span style="color: #60a5fa; font-weight: 600;">•</span>
                             <span>ผลลัพธ์จะแสดงความมั่นใจและสรุปภาพรวม</span>
                         </div>
                     </div>
@@ -508,8 +512,8 @@ with gr.Blocks(
             # Input Section
             with gr.Group():
                 gr.HTML("""
-                <div style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); padding: 20px; border-radius: 16px 16px 0 0; margin: -20px -20px 20px -20px;">
-                    <h3 style="color: #2d3748; margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px;">
+                <div style="background: linear-gradient(135deg, #1e40af 0%, #1e293b 100%); padding: 20px; border-radius: 16px 16px 0 0; margin: -20px -20px 20px -20px;">
+                    <h3 style="color: #f8fafc; margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px;">
                         <span style="font-size: 20px;">✍️</span>
                         ข้อความที่ต้องการวิเคราะห์
                     </h3>
@@ -543,9 +547,9 @@ with gr.Blocks(
             output_box = gr.HTML(
                 label="📊 ผลการวิเคราะห์",
                 value="""
-                <div style="padding: 60px 20px; text-align: center; color: #6b7280; background: rgba(255, 255, 255, 0.5); border-radius: 16px; border: 2px dashed #d1d5db;">
+                <div style="padding: 60px 20px; text-align: center; color: #94a3b8; background: rgba(30, 41, 59, 0.9); border-radius: 16px; border: 2px dashed #334155;">
                     <div style="font-size: 48px; margin-bottom: 16px;">🤖</div>
-                    <h3 style="color: #374151; margin: 0 0 8px 0;">พร้อมวิเคราะห์ความรู้สึก</h3>
+                    <h3 style="color: #f8fafc; margin: 0 0 8px 0;">พร้อมวิเคราะห์ความรู้สึก</h3>
                     <p style="margin: 0; font-size: 14px;">ใส่ข้อความด้านบนแล้วกดปุ่ม "วิเคราะห์ข้อความ"</p>
                 </div>
                 """
@@ -554,7 +558,7 @@ with gr.Blocks(
     # Examples Section
     gr.HTML("""
     <div style="margin: 40px 0 20px 0;">
-        <h3 style="color: white; text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">
+        <h3 style="color: #f8fafc; text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0,0,0,0.4);">
             ✨ ตัวอย่างการใช้งาน
         </h3>
     </div>
@@ -575,30 +579,30 @@ with gr.Blocks(
     
     # Legend Section
     gr.HTML("""
-    <div style="margin: 40px 0 20px 0; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.2);">
-        <h3 style="color: white; text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 25px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">
+    <div style="margin: 40px 0 20px 0; background: rgba(30, 58, 138, 0.9); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; border: 1px solid rgba(59, 130, 246, 0.3);">
+        <h3 style="color: #f8fafc; text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 25px; text-shadow: 0 2px 4px rgba(0,0,0,0.4);">
             🎯 คำอธิบายผลการวิเคราะห์
         </h3>
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;">
-            <div style="background: rgba(16, 185, 129, 0.15); backdrop-filter: blur(10px); border-radius: 16px; padding: 20px; text-align: center; border: 1px solid rgba(16, 185, 129, 0.3); transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 25px rgba(16, 185, 129, 0.2)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
+            <div style="background: rgba(52, 211, 153, 0.2); backdrop-filter: blur(10px); border-radius: 16px; padding: 20px; text-align: center; border: 1px solid rgba(52, 211, 153, 0.3); transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 25px rgba(52, 211, 153, 0.3)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
                 <div style="font-size: 36px; margin-bottom: 12px;">😊</div>
-                <h4 style="color: #10b981; margin: 0 0 8px 0; font-size: 16px; font-weight: 700;">POSITIVE</h4>
-                <p style="color: rgba(255,255,255,0.8); margin: 0; font-size: 13px; line-height: 1.4;">ความรู้สึกเชิงบวก<br>ดี, สุข, ชอบ, ยินดี</p>
+                <h4 style="color: #34d399; margin: 0 0 8px 0; font-size: 16px; font-weight: 700;">POSITIVE</h4>
+                <p style="color: #cbd5e1; margin: 0; font-size: 13px; line-height: 1.4;">ความรู้สึกเชิงบวก<br>ดี, สุข, ชอบ, ยินดี</p>
             </div>
-            <div style="background: rgba(239, 68, 68, 0.15); backdrop-filter: blur(10px); border-radius: 16px; padding: 20px; text-align: center; border: 1px solid rgba(239, 68, 68, 0.3); transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 25px rgba(239, 68, 68, 0.2)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
+            <div style="background: rgba(248, 113, 113, 0.2); backdrop-filter: blur(10px); border-radius: 16px; padding: 20px; text-align: center; border: 1px solid rgba(248, 113, 113, 0.3); transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 25px rgba(248, 113, 113, 0.3)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
                 <div style="font-size: 36px; margin-bottom: 12px;">😢</div>
-                <h4 style="color: #ef4444; margin: 0 0 8px 0; font-size: 16px; font-weight: 700;">NEGATIVE</h4>
-                <p style="color: rgba(255,255,255,0.8); margin: 0; font-size: 13px; line-height: 1.4;">ความรู้สึกเชิงลบ<br>เศร้า, โกรธ, ไม่ชอบ</p>
+                <h4 style="color: #f87171; margin: 0 0 8px 0; font-size: 16px; font-weight: 700;">NEGATIVE</h4>
+                <p style="color: #cbd5e1; margin: 0; font-size: 13px; line-height: 1.4;">ความรู้สึกเชิงลบ<br>เศร้า, โกรธ, ไม่ชอบ</p>
             </div>
-            <div style="background: rgba(245, 158, 11, 0.15); backdrop-filter: blur(10px); border-radius: 16px; padding: 20px; text-align: center; border: 1px solid rgba(245, 158, 11, 0.3); transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 25px rgba(245, 158, 11, 0.2)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
+            <div style="background: rgba(250, 204, 21, 0.2); backdrop-filter: blur(10px); border-radius: 16px; padding: 20px; text-align: center; border: 1px solid rgba(250, 204, 21, 0.3); transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 25px rgba(250, 204, 21, 0.3)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
                 <div style="font-size: 36px; margin-bottom: 12px;">😐</div>
-                <h4 style="color: #f59e0b; margin: 0 0 8px 0; font-size: 16px; font-weight: 700;">NEUTRAL</h4>
-                <p style="color: rgba(255,255,255,0.8); margin: 0; font-size: 13px; line-height: 1.4;">ความรู้สึกเป็นกลาง<br>ปกติ, พอใช้ได้, ธรรมดา</p>
+                <h4 style="color: #facc15; margin: 0 0 8px 0; font-size: 16px; font-weight: 700;">NEUTRAL</h4>
+                <p style="color: #cbd5e1; margin: 0; font-size: 13px; line-height: 1.4;">ความรู้สึกเป็นกลาง<br>ปกติ, พอใช้ได้, ธรรมดา</p>
             </div>
-            <div style="background: rgba(99, 102, 241, 0.15); backdrop-filter: blur(10px); border-radius: 16px; padding: 20px; text-align: center; border: 1px solid rgba(99, 102, 241, 0.3); transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 25px rgba(99, 102, 241, 0.2)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
+            <div style="background: rgba(96, 165, 250, 0.2); backdrop-filter: blur(10px); border-radius: 16px; padding: 20px; text-align: center; border: 1px solid rgba(96, 165, 250, 0.3); transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 25px rgba(96, 165, 250, 0.3)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
                 <div style="font-size: 36px; margin-bottom: 12px;">🤔</div>
-                <h4 style="color: #6366f1; margin: 0 0 8px 0; font-size: 16px; font-weight: 700;">QUESTION</h4>
-                <p style="color: rgba(255,255,255,0.8); margin: 0; font-size: 13px; line-height: 1.4;">ประโยคคำถาม<br>อะไร, ไหน, เมื่อไหร่</p>
+                <h4 style="color: #60a5fa; margin: 0 0 8px 0; font-size: 16px; font-weight: 700;">QUESTION</h4>
+                <p style="color: #cbd5e1; margin: 0; font-size: 13px; line-height: 1.4;">ประโยคคำถาม<br>อะไร, ไหน, เมื่อไหร่</p>
             </div>
         </div>
     </div>
@@ -607,7 +611,7 @@ with gr.Blocks(
     # Footer
     gr.HTML("""
     <div style="text-align: center; padding: 30px 0 10px 0;">
-        <p style="color: rgba(255,255,255,0.7); font-size: 14px; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.3);">
+        <p style="color: #cbd5e1; font-size: 14px; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.4);">
             พัฒนาด้วย ❤️ โดยใช้ Transformers และ Gradio | รองรับโมเดล AI หลากหลาย
         </p>
     </div>
@@ -617,9 +621,9 @@ with gr.Blocks(
     def analyze_wrapper(text, model_display_name):
         if not text.strip():
             return """
-            <div style="padding: 60px 20px; text-align: center; color: #6b7280; background: rgba(255, 255, 255, 0.5); border-radius: 16px; border: 2px dashed #d1d5db;">
+            <div style="padding: 60px 20px; text-align: center; color: #94a3b8; background: rgba(30, 41, 59, 0.9); border-radius: 16px; border: 2px dashed #334155;">
                 <div style="font-size: 48px; margin-bottom: 16px;">⚠️</div>
-                <h3 style="color: #ef4444; margin: 0 0 8px 0;">กรุณาใส่ข้อความ</h3>
+                <h3 style="color: #f87171; margin: 0 0 8px 0;">กรุณาใส่ข้อความ</h3>
                 <p style="margin: 0; font-size: 14px;">ใส่ข้อความที่ต้องการวิเคราะห์ในช่องด้านบน</p>
             </div>
             """
@@ -638,9 +642,9 @@ with gr.Blocks(
     
     def clear_text():
         return "", """
-        <div style="padding: 60px 20px; text-align: center; color: #6b7280; background: rgba(255, 255, 255, 0.5); border-radius: 16px; border: 2px dashed #d1d5db;">
+        <div style="padding: 60px 20px; text-align: center; color: #94a3b8; background: rgba(30, 41, 59, 0.9); border-radius: 16px; border: 2px dashed #334155;">
             <div style="font-size: 48px; margin-bottom: 16px;">🤖</div>
-            <h3 style="color: #374151; margin: 0 0 8px 0;">พร้อมวิเคราะห์ความรู้สึก</h3>
+            <h3 style="color: #f8fafc; margin: 0 0 8px 0;">พร้อมวิเคราะห์ความรู้สึก</h3>
             <p style="margin: 0; font-size: 14px;">ใส่ข้อความด้านบนแล้วกดปุ่ม "วิเคราะห์ข้อความ"</p>
         </div>
         """
@@ -649,9 +653,9 @@ with gr.Blocks(
         if text.strip():
             return analyze_wrapper(text, model_display_name)
         return """
-        <div style="padding: 60px 20px; text-align: center; color: #6b7280; background: rgba(255, 255, 255, 0.5); border-radius: 16px; border: 2px dashed #d1d5db;">
+        <div style="padding: 60px 20px; text-align: center; color: #94a3b8; background: rgba(30, 41, 59, 0.9); border-radius: 16px; border: 2px dashed #334155;">
             <div style="font-size: 48px; margin-bottom: 16px;">🤖</div>
-            <h3 style="color: #374151; margin: 0 0 8px 0;">พร้อมวิเคราะห์ความรู้สึก</h3>
+            <h3 style="color: #f8fafc; margin: 0 0 8px 0;">พร้อมวิเคราะห์ความรู้สึก</h3>
             <p style="margin: 0; font-size: 14px;">ใส่ข้อความด้านบนแล้วกดปุ่ม "วิเคราะห์ข้อความ"</p>
         </div>
         """
@@ -690,7 +694,7 @@ if __name__ == "__main__":
     ).launch(
         server_name="0.0.0.0",
         server_port=7860,
-        share=True,  # Set to True for public sharing
+        share=True,
         show_error=True,
         show_api=False,
         quiet=False,