Implement Gradio Blocks interface with modern UX/UI for Thai sentiment analysis

app.py

@@ -388,6 +388,70 @@ body, .gradio-container {
 }
 """
 
+# Gradio Blocks app definition
+with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Base()) as demo:
+    with gr.Column(elem_classes="main-uxui-card"):
+        with gr.Row():
+            gr.HTML("""
+            <div class='main-uxui-header'>
+                <h1>Thai Sentiment Analysis (SpaceThai-e5)</h1>
+                <p>วิเคราะห์ความรู้สึกภาษาไทย/อังกฤษ รองรับหลายโมเดล | Modern UX/UI</p>
+            </div>
+            """)
+        with gr.Row():
+            model_dropdown = gr.Dropdown(
+                choices=[(desc, name) for name, desc in MODEL_LIST],
+                value=MODEL_LIST[0][0],
+                label="เลือกโมเดล (Model)",
+                elem_classes="main-uxui-dropdown"
+            )
+        with gr.Row():
+            input_box = gr.Textbox(
+                lines=4,
+                placeholder="พิมพ์ข้อความภาษาไทยหรืออังกฤษ (รองรับหลายประโยค)",
+                label="ข้อความที่ต้องการวิเคราะห์",
+                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")
+        with gr.Row():
+            output_html = gr.HTML(label="ผลลัพธ์", elem_classes="main-uxui-output")
+        with gr.Row():
+            gr.Examples([
+                ["วันนี้อากาศดีมากๆ รู้สึกสดชื่นและมีความสุขมาก!"],
+                ["เศร้ามากเลยวันนี้ งานเยอะเกินไป"],
+                ["อาหารอร่อยดี แต่บริการช้ามาก"],
+                ["คุณคิดอย่างไรกับเศรษฐกิจไทย?"],
+                ["I love this product! It's amazing."],
+                ["This is the worst experience I've ever had."]
+            ],
+                inputs=input_box,
+                label="ตัวอย่างข้อความ",
+            )
+        with gr.Row():
+            gr.HTML("""
+            <div class='main-uxui-legend'>
+                <div class='main-uxui-section-title'>
+                    <span>🗂️</span> คำอธิบายผลลัพธ์
+                </div>
+                <div class='legend-row'>
+                    <div class='legend-item'><strong>😊 เชิงบวก</strong><br><small>Positive</small></div>
+                    <div class='legend-item'><strong>😢 เชิงลบ</strong><br><small>Negative</small></div>
+                    <div class='legend-item'><strong>😐 เป็นกลาง</strong><br><small>Neutral</small></div>
+                    <div class='legend-item'><strong>🤔 คำถาม</strong><br><small>Question</small></div>
+                </div>
+            </div>
+            """)
+
+    def on_analyze(text, model):
+        return analyze_text(text, model)
+
+    analyze_btn.click(on_analyze, [input_box, model_dropdown], output_html)
+    input_box.submit(on_analyze, [input_box, model_dropdown], output_html)
+    model_dropdown.change(on_analyze, [input_box, model_dropdown], output_html)
+    clear_btn.click(lambda: (""), None, output_html)
+
 # Launch configuration
 if __name__ == "__main__":
     demo.queue(