Refactor CSS for modern minimal design and improved responsiveness in Gradio app

app.py

@@ -157,48 +157,82 @@ def analyze_text(text: str, model_name: str) -> str:
     
     return "\n".join(results)
 
-# Enhanced CSS with better responsiveness
+# Modern minimal CSS
 CUSTOM_CSS = """
-    .gradio-container {
-        max-width: 900px !important;
-        margin: auto !important;
-        background: #f4f7fa !important;
-        border-radius: 24px !important;
-        box-shadow: 0 8px 32px 0 #bdbdbd33;
-        border: 1.5px solid #e3e3e3;
-        min-height: 100vh;
-        padding-bottom: 32px;
-    }
+body, .gradio-container {
+    background: #f7faff !important;
+}
+.gradio-container {
+    max-width: 1100px !important;
+    margin: 32px auto 32px auto !important;
+    border-radius: 22px !important;
+    box-shadow: 0 8px 32px 0 #bdbdbd33;
+    border: 1.5px solid #e3e3e3;
+    min-height: 96vh;
+    padding-bottom: 32px;
+}
 .main-card {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 16px;
-    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
-    padding: 24px;
-    margin: 16px 0;
-    backdrop-filter: blur(10px);
+    background: #fff;
+    border-radius: 18px;
+    box-shadow: 0 2px 12px 0 #bdbdbd22;
+    padding: 28px 24px 20px 24px;
+    margin: 18px 0;
+    border: 1px solid #e6e6e6;
+    transition: box-shadow 0.2s;
+}
+.main-card:hover {
+    box-shadow: 0 6px 24px 0 #bdbdbd44;
 }
 .output-markdown {
     font-family: 'Segoe UI', 'Noto Sans Thai', sans-serif !important;
-    line-height: 1.6;
+    line-height: 1.7;
+    font-size: 1.08em;
 }
 .gr-button {
-    font-size: 1.1em;
-    padding: 0.8em 2.5em;
-    border-radius: 12px;
+    font-size: 1.13em;
+    padding: 0.9em 2.7em;
+    border-radius: 13px;
     font-weight: 600;
-    transition: all 0.3s ease;
+    transition: all 0.2s;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+    border: none;
+    box-shadow: 0 2px 8px #bdbdbd22;
+}
+.gr-button.secondary, .gr-button[variant="secondary"] {
+    background: #f3f3f3;
+    color: #4a4a7d;
+    border: 1px solid #e0e0e0;
 }
 .gr-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px) scale(1.03);
+    box-shadow: 0 6px 18px #bdbdbd33;
+    filter: brightness(1.04);
 }
 .gr-textbox textarea {
-    font-size: 1.1em;
-    min-height: 140px;
+    font-size: 1.13em;
+    min-height: 150px;
     font-family: 'Segoe UI', 'Noto Sans Thai', sans-serif;
+    background: #fafdff;
+    border-radius: 10px;
+    border: 1.2px solid #e0e0e0;
+    padding: 14px;
 }
 .gr-dropdown input {
     font-size: 1.1em;
+    border-radius: 8px;
+    background: #fafdff;
+    border: 1.2px solid #e0e0e0;
+}
+.gr-markdown h1, .gr-markdown h3 {
+    color: #3b3b6d !important;
+}
+.gr-markdown ul {
+    margin-left: 1.2em;
+}
+@media (max-width: 900px) {
+    .gradio-container { max-width: 99vw !important; padding: 0 2vw; }
+    .main-card { padding: 16px 6px; }
 }
 """
 
@@ -210,9 +244,9 @@ with gr.Blocks(
 ) as demo:
     
     gr.Markdown("""
-    <div style="text-align: center; padding: 40px 0 20px 0;">
-        <h1 style="font-size:3em; margin-bottom: 0.3em; color:white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">🧠 Thai Sentiment Analyzer</h1>
-        <div style="font-size:1.3em; color:rgba(255,255,255,0.9); text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">
+    <div style="text-align: center; padding: 38px 0 18px 0;">
+        <h1 style="font-size:2.7em; margin-bottom: 0.18em; color:#3b3b6d; letter-spacing:0.5px;">🧠 Thai Sentiment Analyzer</h1>
+        <div style="font-size:1.18em; color:#4a4a7d; opacity:0.92;">
             AI วิเคราะห์ความรู้สึกในข้อความภาษาไทย รองรับหลายโมเดลและหลายประโยค
         </div>
     </div>
@@ -222,8 +256,8 @@ with gr.Blocks(
         with gr.Column(scale=1):
             gr.Markdown("""
             <div class='main-card'>
-                <h3 style='color:#4a4a7d; margin-bottom:15px; font-size:1.2em;'>🤖 เลือกโมเดลวิเคราะห์</h3>
-                <p style='color:#666; font-size:0.95em; margin-bottom:10px;'>เลือกโมเดล AI ที่ต้องการใช้ในการวิเคราะห์ความรู้สึก</p>
+                <h3 style='color:#3b3b6d; margin-bottom:15px; font-size:1.18em;'>🤖 เลือกโมเดลวิเคราะห์</h3>
+                <p style='color:#666; font-size:0.97em; margin-bottom:10px;'>เลือกโมเดล AI ที่ต้องการใช้ในการวิเคราะห์ความรู้สึก</p>
             </div>
             """)
             
@@ -236,8 +270,8 @@ with gr.Blocks(
             
             gr.Markdown("""
             <div class='main-card' style='margin-top:20px;'>
-                <h3 style='color:#4a4a7d; margin-bottom:15px; font-size:1.2em;'>📖 คำแนะนำการใช้งาน</h3>
-                <ul style='color:#666; font-size:0.95em; line-height:1.6;'>
+                <h3 style='color:#3b3b6d; margin-bottom:15px; font-size:1.13em;'>📖 คำแนะนำการใช้งาน</h3>
+                <ul style='color:#555; font-size:1em; line-height:1.7; margin-bottom:0;'>
                     <li>พิมพ์ข้อความภาษาไทยที่ต้องการวิเคราะห์</li>
                     <li>แยกประโยคด้วยจุด (.) หรือขึ้นบรรทัดใหม่</li>
                     <li>รองรับการวิเคราะห์หลายประโยคพร้อมกัน</li>
@@ -249,7 +283,7 @@ with gr.Blocks(
         with gr.Column(scale=2):
             gr.Markdown("""
             <div class='main-card'>
-                <h3 style='color:#4a4a7d; margin-bottom:15px; font-size:1.2em;'>📝 ข้อความที่ต้องการวิเคราะห์</h3>
+                <h3 style='color:#3b3b6d; margin-bottom:15px; font-size:1.15em;'>📝 ข้อความที่ต้องการวิเคราะห์</h3>
             </div>
             """)
             
@@ -286,27 +320,27 @@ with gr.Blocks(
     
     # Sentiment legend with enhanced styling
     gr.Markdown("""
-    <div class='main-card' style='margin-top:30px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);'>
-        <h3 style='color:#4a4a7d; text-align:center; margin-bottom:20px;'>🎯 คำอธิบายผลการวิเคราะห์</h3>
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 15px 0;">
-            <div style="text-align: center; padding: 15px; background: rgba(76, 175, 80, 0.1); border-radius: 12px;">
-                <div style="font-size: 28px; margin-bottom: 8px;">😊</div>
-                <strong style="color: #4CAF50; font-size: 1.1em;">Positive</strong><br>
+    <div class='main-card' style='margin-top:30px; background: #fafdff;'>
+        <h3 style='color:#3b3b6d; text-align:center; margin-bottom:20px;'>🎯 คำอธิบายผลการวิเคราะห์</h3>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; padding: 12px 0;">
+            <div style="text-align: center; padding: 13px; background: rgba(76, 175, 80, 0.08); border-radius: 11px;">
+                <div style="font-size: 26px; margin-bottom: 7px;">😊</div>
+                <strong style="color: #4CAF50; font-size: 1.08em;">Positive</strong><br>
                 <small style="color: #666;">ความรู้สึกเชิงบวก<br>ดี, สุข, ชอบ</small>
             </div>
-            <div style="text-align: center; padding: 15px; background: rgba(244, 67, 54, 0.1); border-radius: 12px;">
-                <div style="font-size: 28px; margin-bottom: 8px;">😔</div>
-                <strong style="color: #F44336; font-size: 1.1em;">Negative</strong><br>
+            <div style="text-align: center; padding: 13px; background: rgba(244, 67, 54, 0.08); border-radius: 11px;">
+                <div style="font-size: 26px; margin-bottom: 7px;">😔</div>
+                <strong style="color: #F44336; font-size: 1.08em;">Negative</strong><br>
                 <small style="color: #666;">ความรู้สึกเชิงลบ<br>เศร้า, โกรธ, ไม่ชอบ</small>
             </div>
-            <div style="text-align: center; padding: 15px; background: rgba(255, 152, 0, 0.1); border-radius: 12px;">
-                <div style="font-size: 28px; margin-bottom: 8px;">😐</div>
-                <strong style="color: #FF9800; font-size: 1.1em;">Neutral</strong><br>
+            <div style="text-align: center; padding: 13px; background: rgba(255, 152, 0, 0.08); border-radius: 11px;">
+                <div style="font-size: 26px; margin-bottom: 7px;">😐</div>
+                <strong style="color: #FF9800; font-size: 1.08em;">Neutral</strong><br>
                 <small style="color: #666;">ความรู้สึกเป็นกลาง<br>ปกติ, พอใช้ได้</small>
             </div>
-            <div style="text-align: center; padding: 15px; background: rgba(33, 150, 243, 0.1); border-radius: 12px;">
-                <div style="font-size: 28px; margin-bottom: 8px;">❓</div>
-                <strong style="color: #2196F3; font-size: 1.1em;">Question</strong><br>
+            <div style="text-align: center; padding: 13px; background: rgba(33, 150, 243, 0.08); border-radius: 11px;">
+                <div style="font-size: 26px; margin-bottom: 7px;">❓</div>
+                <strong style="color: #2196F3; font-size: 1.08em;">Question</strong><br>
                 <small style="color: #666;">ประโยคคำถาม<br>อะไร, ไหน, เมื่อไหร่</small>
             </div>
         </div>