Revamp Gradio interface with modern styling and improved user experience

app.py

@@ -388,338 +388,6 @@ body, .gradio-container {
 }
 """
 
-# Create the modern Gradio interface
-with gr.Blocks(css=CUSTOM_CSS, title="🧠 AI Thai Sentiment Analyzer - วิเคราะห์ความรู้สึกภาษาไทย") as demo:
-    gr.HTML("""
-    <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>
-    """)
-    
-    with gr.Row(equal_height=False):
-        # Left Column - Controls
-        with gr.Column(scale=1):
-            # Model Selection Card
-            with gr.Group():
-                gr.HTML("""
-                <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
-                    </h3>
-                    <p style="margin: 8px 0 0 0; opacity: 0.9; font-size: 14px;">เลือกโมเดลที่ต้องการใช้ในการวิเคราะห์</p>
-                </div>
-                """)
-                
-                model_dropdown = gr.Dropdown(
-                    choices=[choice[1] for choice in MODEL_LIST],
-                    value="🏆 MultiSent E5 Pro - แนะนำ (ความแม่นยำสูงสุด)",
-                    label="",
-                    show_label=False,
-                    container=False
-                )
-            
-            # Tips Card
-            with gr.Group():
-                gr.HTML("""
-                <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: #cbd5e1; font-size: 14px; line-height: 1.6;">
-                        <div style="margin-bottom: 12px; display: flex; align-items: flex-start; gap: 8px;">
-                            <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: #60a5fa; font-weight: 600;">•</span>
-                            <span>แยกประโยคด้วยจุด (.) หรือขึ้นบรรทัดใหม่</span>
-                        </div>
-                        <div style="margin-bottom: 12px; display: flex; align-items: flex-start; gap: 8px;">
-                            <span style="color: #60a5fa; font-weight: 600;">•</span>
-                            <span>สามารถวิเคราะห์หลายประโยคพร้อมกันได้</span>
-                        </div>
-                        <div style="display: flex; align-items: flex-start; gap: 8px;">
-                            <span style="color: #60a5fa; font-weight: 600;">•</span>
-                            <span>ผลลัพธ์จะแสดงความมั่นใจและสรุปภาพรวม</span>
-                        </div>
-                    </div>
-                </div>
-                """)
-        
-        # Right Column - Main Interface
-        with gr.Column(scale=2):
-            # Input Section
-            with gr.Group():
-                gr.HTML("""
-                <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>
-                </div>
-                """)
-                
-                text_input = gr.Textbox(
-                    lines=6,
-                    placeholder="💭 ลองพิมพ์ข้อความที่ต้องการวิเคราะห์...\n\nตัวอย่าง:\nวันนี้อากาศดีมาก ฉันรู้สึกมีความสุข ☀️\nแต่การจราจรติดมาก น่าเบื่อจริงๆ 😤\nโดยรวมแล้วก็โอเคนะ 😊",
-                    label="",
-                    show_label=False,
-                    container=False
-                )
-                
-                with gr.Row():
-                    analyze_btn = gr.Button(
-                        "🔍 วิเคราะห์ข้อความ", 
-                        variant="primary", 
-                        size="lg",
-                        scale=2
-                    )
-                    clear_btn = gr.Button(
-                        "🗑️ ล้าง", 
-                        variant="secondary",
-                        scale=1
-                    )
-    
-    # Output Section
-    with gr.Row():
-        with gr.Column():
-            output_box = gr.HTML(
-                label="📊 ผลการวิเคราะห์",
-                value="""
-                <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: #f8fafc; margin: 0 0 8px 0;">พร้อมวิเคราะห์ความรู้สึก</h3>
-                    <p style="margin: 0; font-size: 14px;">ใส่ข้อความด้านบนแล้วกดปุ่ม "วิเคราะห์ข้อความ"</p>
-                </div>
-                """
-            )
-    
-    # Examples Section
-    gr.HTML("""
-    <div style="margin: 40px 0 20px 0;">
-        <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>
-    """)
-    
-    examples = gr.Examples(
-        examples=[
-            ["วันนี้อากาศดีมาก ฉันรู้สึกมีความสุขมาก ☀️ สีฟ้าสวยจริงๆ น่ามองจัง"],
-            ["ฉันไม่ชอบอาหารนี้เลย 😤 รสชาติแปลกมาก เค็มเกินไป ไม่อร่อยเลย"],
-            ["วันนี้เป็นยังไงบ้าง? 🤔\nเรียนหนังสือกันไหม? 📚\nมีงานอะไรให้ช่วยไหม? 💪"],
-            ["บริการดีมาก 👍 พนักงานใจดีและเป็นกันเอง\nแต่ของมีราคาแพงไปหน่อย 💸\nโดยรวมแล้วพอใจครับ แนะนำให้เพื่อนมาลอง ⭐"],
-            ["เมื่อไหร่จะได้เจอกันอีก 😢 คิดถึงมากเลย\nแต่ตอนนี้ต้องทำงานหนักก่อน 💪 เพื่ออนาคตที่ดี ✨"]
-        ],
-        inputs=[text_input],
-        label="",
-        examples_per_page=5
-    )
-    
-    # Legend Section
-    gr.HTML("""
-    <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(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: #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(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: #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(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: #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(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: #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>
-    """)
-    
-    # Footer
-    gr.HTML("""
-    <div style="text-align: center; padding: 30px 0 10px 0;">
-        <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>
-    """)
-
-    # Event handlers with enhanced functionality
-    def analyze_wrapper(text, model_display_name):
-        if not text.strip():
-            return """
-            <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: #f87171; margin: 0 0 8px 0;">กรุณาใส่ข้อความ</h3>
-                <p style="margin: 0; font-size: 14px;">ใส่ข้อความที่ต้องการวิเคราะห์ในช่องด้านบน</p>
-            </div>
-            """
-        
-        # Find actual model name from display name
-        model_name = None
-        for model_tuple in MODEL_LIST:
-            if model_tuple[1] == model_display_name:
-                model_name = model_tuple[0]
-                break
-        
-        if not model_name:
-            model_name = "ZombitX64/MultiSent-E5-Pro"  # fallback
-        
-        return analyze_text(text, model_name)
-    
-    def clear_text():
-        return "", """
-        <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: #f8fafc; margin: 0 0 8px 0;">��ร้อมวิเคราะห์ความรู้สึก</h3>
-            <p style="margin: 0; font-size: 14px;">ใส่ข้อความด้านบนแล้วกดปุ่ม "วิเคราะห์ข้อความ"</p>
-        </div>
-        """
-    
-    def auto_analyze(text, model_display_name):
-        if text.strip():
-            return analyze_wrapper(text, model_display_name)
-        return """
-        <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: #f8fafc; margin: 0 0 8px 0;">พร้อมวิเคราะห์ความรู้สึก</h3>
-            <p style="margin: 0; font-size: 14px;">ใส่ข้อความด้านบนแล้วกดปุ่ม "วิเคราะห์ข้อความ"</p>
-        </div>
-        """
-    
-    # Connect events
-    analyze_btn.click(
-        analyze_wrapper, 
-        inputs=[text_input, model_dropdown], 
-        outputs=output_box,
-        show_progress=True
-    )
-    
-    text_input.submit(
-        analyze_wrapper, 
-        inputs=[text_input, model_dropdown], 
-        outputs=output_box,
-        show_progress=True
-    )
-    
-    model_dropdown.change(
-        auto_analyze, 
-        inputs=[text_input, model_dropdown], 
-        outputs=output_box
-    )
-    
-    clear_btn.click(
-        clear_text, 
-        outputs=[text_input, output_box]
-    )
-
 # Launch configuration
 if __name__ == "__main__":
     demo.queue(