CC

app.py

@@ -263,152 +263,228 @@ def analyze_text(text: str, model_name: str) -> str:
 
 # 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');
-* {
-    font-family: 'Inter', 'Noto Sans Thai', sans-serif !important;
-}
-.gradio-container {
-    max-width: 1200px !important;
-    margin: 0 auto !important;
-    background: linear-gradient(135deg, #e0f7fa 0%, #b2f7ef 100%) !important;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+* { font-family: 'Inter', 'Noto Sans Thai', sans-serif !important; }
+body, .gradio-container {
+    background: linear-gradient(135deg, #181f2a 0%, #232e3c 100%) !important;
     min-height: 100vh;
-    padding: 20px;
-}
-.main-content, .glass-card {
-    background: rgba(255,255,255,0.95) !important;
-    backdrop-filter: blur(12px) !important;
-    border-radius: 24px !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
-    border: 1.5px solid #b2dfdb !important;
-    overflow: hidden;
-    color: #1a3c3d !important;
-}
-.glass-card:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
 }
-.gr-button {
-    background: linear-gradient(90deg, #26c6da 0%, #43e97b 100%) !important;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 12px 24px !important;
-    font-weight: 600 !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.5px !important;
-    transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(38, 198, 218, 0.13) !important;
-    color: #fff !important;
+.main-uxui-card {
+    background: #232e3c !important;
+    border-radius: 20px;
+    box-shadow: 0 6px 32px rgba(0,0,0,0.22);
+    border: 1.5px solid #2d3a4d;
+    padding: 32px 28px 28px 28px;
+    margin: 0 0 32px 0;
+    color: #e3e8ef !important;
+    transition: box-shadow 0.2s;
 }
-.gr-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(38, 198, 218, 0.18) !important;
+.main-uxui-card:hover {
+    box-shadow: 0 12px 36px rgba(0,0,0,0.28);
 }
-.gr-button.secondary {
-    background: linear-gradient(90deg, #b2f7ef 0%, #e0f7fa 100%) !important;
-    color: #1a3c3d !important;
-    box-shadow: 0 4px 15px rgba(178, 247, 239, 0.13) !important;
+.main-uxui-header {
+    text-align: center;
+    margin-bottom: 32px;
 }
-.gr-button.secondary:hover {
-    box-shadow: 0 6px 20px rgba(178, 247, 239, 0.18) !important;
+.main-uxui-header h1 {
+    font-size: 2.8em;
+    color: #e3e8ef;
+    font-weight: 800;
+    margin-bottom: 0.2em;
+    letter-spacing: 0.5px;
 }
-.gr-textbox textarea, .gr-textbox input {
-    border-radius: 12px !important;
-    border: 2px solid #b2dfdb !important;
-    font-size: 16px !important;
-    padding: 16px !important;
-    transition: all 0.3s ease !important;
-    background: #f8fffe !important;
-    color: #1a3c3d !important;
+.main-uxui-header p {
+    color: #7da2e3;
+    font-size: 1.25em;
+    margin-top: 0;
+    margin-bottom: 0.5em;
 }
-.gr-textbox textarea:focus, .gr-textbox input:focus {
-    border-color: #26c6da !important;
-    box-shadow: 0 0 0 3px rgba(38, 198, 218, 0.13) !important;
-    transform: scale(1.01) !important;
+.main-uxui-section-title {
+    font-size: 1.18em;
+    color: #7da2e3;
+    font-weight: 700;
+    margin-bottom: 12px;
+    letter-spacing: 0.2px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
-.gr-dropdown > div {
-    border-radius: 12px !important;
-    border: 2px solid #b2dfdb !important;
-    background: #f8fffe !important;
-    color: #1a3c3d !important;
+.main-uxui-btn {
+    font-size: 1.13em;
+    padding: 0.9em 2.7em;
+    border-radius: 13px;
+    font-weight: 600;
+    background: linear-gradient(90deg, #2563eb 0%, #1e293b 100%);
+    color: #f8fafc !important;
+    border: none;
+    box-shadow: 0 2px 8px #1e253355;
+    transition: all 0.2s;
 }
-.gr-dropdown > div:focus-within {
-    border-color: #26c6da !important;
-    box-shadow: 0 0 0 3px rgba(38, 198, 218, 0.13) !important;
+.main-uxui-btn:hover {
+    filter: brightness(1.08);
+    box-shadow: 0 6px 18px #1e253377;
+    transform: translateY(-2px) scale(1.03);
 }
-.gr-panel, .gr-form, .gr-box {
-    border-radius: 16px !important;
-    border: none !important;
-    background: transparent !important;
+.main-uxui-btn.secondary {
+    background: #232e3c;
+    color: #7da2e3 !important;
+    border: 1.5px solid #2d3a4d;
 }
-::-webkit-scrollbar {
-    width: 8px;
+.main-uxui-input, .main-uxui-dropdown {
+    font-size: 1.13em;
+    border-radius: 10px;
+    border: 1.5px solid #2d3a4d;
+    background: #1e2533;
+    color: #e3e8ef;
+    padding: 14px;
+    margin-bottom: 10px;
 }
-::-webkit-scrollbar-track {
-    background: #e0f7fa;
-    border-radius: 4px;
+.main-uxui-dropdown { min-width: 220px; }
+.main-uxui-output {
+    background: #1e2533;
+    border-radius: 14px;
+    border: 1.5px solid #2d3a4d;
+    color: #e3e8ef;
+    padding: 22px 18px;
+    font-size: 1.08em;
+    min-height: 180px;
+    margin-bottom: 0;
 }
-::-webkit-scrollbar-thumb {
-    background: #26c6da;
-    border-radius: 4px;
+.main-uxui-legend {
+    background: #232e3c;
+    border-radius: 16px;
+    border: 1.5px solid #2d3a4d;
+    color: #7da2e3;
+    padding: 24px 18px;
+    margin-top: 32px;
+    font-size: 1.05em;
 }
-::-webkit-scrollbar-thumb:hover {
-    background: #43e97b;
+.main-uxui-legend .legend-row {
+    display: flex;
+    gap: 24px;
+    flex-wrap: wrap;
+    margin-top: 12px;
 }
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.main-uxui-legend .legend-item {
+    flex: 1 1 180px;
+    background: #1e2533;
+    border-radius: 10px;
+    padding: 16px 10px;
+    margin-bottom: 10px;
+    text-align: center;
+    border: 1px solid #2d3a4d;
 }
-.gr-column, .gr-row {
-    animation: slideIn 0.6s ease-out !important;
+.main-uxui-legend .legend-item strong {
+    color: #e3e8ef;
+    font-size: 1.08em;
 }
-.gr-examples {
-    border-radius: 16px !important;
-    overflow: hidden !important;
+.main-uxui-legend .legend-item small {
+    color: #7da2e3;
 }
-.gr-examples .gr-button {
-    background: #e0f7fa !important;
-    border: 1px solid #b2dfdb !important;
-    margin: 4px !important;
-    font-size: 14px !important;
-    text-transform: none !important;
-    letter-spacing: normal !important;
-    color: #1a3c3d !important;
-}
-.gr-examples .gr-button:hover {
-    background: #b2f7ef !important;
-    transform: scale(1.02) !important;
+@media (max-width: 900px) {
+    .main-uxui-card { padding: 16px 6px; }
+    .main-uxui-header h1 { font-size: 2em; }
+    .main-uxui-section-title { font-size: 1em; }
 }
 """
 
 # Create the modern Gradio interface
-with gr.Blocks(
-    theme=gr.themes.Glass(
-        primary_hue="blue",
-        secondary_hue="indigo",
-        neutral_hue="slate",
-        font=["Inter", "Noto Sans Thai", "sans-serif"]
-    ),
-    css=CUSTOM_CSS,
-    title="🧠 AI Thai Sentiment Analyzer - วิเคราะห์ความรู้สึกภาษาไทย"
-) as demo:
-    
-    # Header with dark blue design
+with gr.Blocks(css=CUSTOM_CSS, title="🧠 AI Thai Sentiment Analyzer - วิเคราะห์ความรู้สึกภาษาไทย") as demo:
     gr.HTML("""
-    <div style="text-align: center; padding: 40px 0 30px 0;">
-        <div style="display: inline-block; background: #e0f7fa; padding: 20px 40px; border-radius: 20px; border: 1.5px solid #b2dfdb; margin-bottom: 20px; box-shadow: 0 4px 16px #b2dfdb55;">
-            <h1 style="font-size: 3.5em; margin: 0; color: #1a3c3d; font-weight: 800; text-shadow: 0 4px 8px #b2dfdb55; 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: #26c6da; margin: 10px 0 0 0; font-weight: 400; text-shadow: 0 2px 4px #b2dfdb33;">
-                ระบบวิเคราะห์ความรู้สึกภาษาไทยด้วย AI ที่ทันสมัยและแม่นยำ
-            </p>
+    <div class='main-uxui-header'>
+        <h1>🧠 Thai Sentiment Analyzer</h1>
+        <p>AI วิเคราะห์ความรู้สึกภาษาไทยและหลายภาษา <br>ใช้งานง่าย รองรับหลายโมเดล</p>
+    </div>
+    """)
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.HTML("""
+            <div class='main-uxui-card'>
+                <div class='main-uxui-section-title'>
+                    <span>🤖</span> เลือกโมเดล AI
+                </div>
+            """)
+            model_dropdown = gr.Dropdown(
+                choices=[choice[1] for choice in MODEL_LIST],
+                value="🏆 MultiSent E5 Pro - แนะนำ (ความแม่นยำสูงสุด)",
+                label="",
+                show_label=False,
+                elem_classes=["main-uxui-dropdown"]
+            )
+            gr.HTML("""
+                <div class='main-uxui-section-title' style='margin-top:28px;'>
+                    <span>💡</span> วิธีใช้งาน
+                </div>
+                <ul style='color:#7da2e3; font-size:1em; line-height:1.7; margin-bottom:0; padding-left:18px;'>
+                    <li>พิมพ์ข้อความภาษาไทยหรือภาษาอื่นที่ต้องการวิเคราะห์</li>
+                    <li>แยกประโยคด้วยจุด (.) หรือขึ้นบรรทัดใหม่</li>
+                    <li>รองรับการวิเคราะห์หลายประโยคพร้อมกัน</li>
+                    <li>ผลลัพธ์จะแสดงความม���่นใจและสรุปภาพรวม</li>
+                </ul>
+            </div>
+            """)
+        with gr.Column(scale=2):
+            gr.HTML("""
+            <div class='main-uxui-card'>
+                <div class='main-uxui-section-title'>
+                    <span>✍️</span> ข้อความที่ต้องการวิเคราะห์
+                </div>
+            """)
+            text_input = gr.Textbox(
+                lines=7,
+                placeholder="ตัวอย่าง: วันนี้อากาศดีมาก ฉันรู้สึกมีความสุขมาก สีฟ้าสวยจริงๆ\nแต่การจราจรติดมาก น่าเบื่อจริงๆ\nโดยรวมแล้วก็โอเคนะ",
+                label="",
+                show_label=False,
+                elem_classes=["main-uxui-input"]
+            )
+            with gr.Row():
+                analyze_btn = gr.Button("🔍 วิเคราะห์ข้อความ", elem_classes=["main-uxui-btn"])
+                clear_btn = gr.Button("🗑️ ล้างข้อความ", elem_classes=["main-uxui-btn", "secondary"])
+            output_box = gr.HTML("""
+                <div class='main-uxui-output'>
+                    <div style='text-align:center; color:#7da2e3; font-size:1.2em;'>
+                        <div style='font-size:2.5em; margin-bottom:10px;'>🤖</div>
+                        พร้อมวิเคราะห์ความรู้สึก<br>ใส่ข้อความแล้วกดปุ่ม "วิเคราะห์ข้อความ"
+                    </div>
+                </div>
+            """)
+    gr.HTML("""
+    <div class='main-uxui-card' style='margin-top:0;'>
+        <div class='main-uxui-section-title'><span>✨</span> ตัวอย่างข้อความ</div>
+    </div>
+    """)
+    examples = gr.Examples(
+        examples=[
+            ["วันนี้อากาศดีมาก ฉันรู้สึกมีความสุขมาก สีฟ้าสวยจริงๆ"],
+            ["ฉันไม่ชอบอาหารนี้เลย รสชาติแปลกมาก เค็มเกินไป"],
+            ["วันนี้เป็นยังไงบ้าง?\nเรียนหนังสือกันไหม?\nมีงานอะไรให้ช่วยไหม?"],
+            ["บริการดีมาก พนักงานใจดีและเป็นกันเอง\nแต่ของมีราคาแพงไปหน่อย\nโดยรวมแล้วพอใจครับ แนะนำให้เพื่อนมาลอง"],
+            ["เมื่อไหร่จะได้เจอกันอีก คิดถึงมากเลย\nแต่ตอนนี้ต้องทำงานหนักก่อน เพื่ออนาคตที่ดี"]
+        ],
+        inputs=[text_input],
+        label="",
+        examples_per_page=5
+    )
+    gr.HTML("""
+    <div class='main-uxui-legend'>
+        <div class='main-uxui-section-title'><span>🎯</span> คำอธิบายผลการวิเคราะห์</div>
+        <div class='legend-row'>
+            <div class='legend-item'>
+                <div style='font-size:28px;'>😊</div>
+                <strong>Positive</strong><br><small>ความรู้สึกเชิงบวก<br>ดี, สุข, ชอบ</small>
+            </div>
+            <div class='legend-item'>
+                <div style='font-size:28px;'>😢</div>
+                <strong>Negative</strong><br><small>ความรู้สึกเชิงลบ<br>เศร้า, โกรธ, ไม่ชอบ</small>
+            </div>
+            <div class='legend-item'>
+                <div style='font-size:28px;'>😐</div>
+                <strong>Neutral</strong><br><small>ความรู้สึกเป็นกลาง<br>ปกติ, พอใช้ได้</small>
+            </div>
+            <div class='legend-item'>
+                <div style='font-size:28px;'>🤔</div>
+                <strong>Question</strong><br><small>ประโยคคำถาม<br>อะไร, ไหน, เมื่อไหร่</small>
+            </div>
         </div>
     </div>
     """)