refactor: wrap ChatInterface in gr.Blocks to support custom theme and CSS

app.py

@@ -230,65 +230,68 @@ footer {
 """
 
 # ==============================================================================
-# KHỞI TẠO GIAO DIỆN GRADIO CHAT INTERFACE
+# KHỞI TẠO GIAO DIỆN GRADIO VỚI THEME & CUSTOM CSS
 # ==============================================================================
-demo = gr.ChatInterface(
-    fn=chat_response,
-    title="✨ Google Gemma Assistant",
-    description="Trải nghiệm đối thoại AI phong cách Gemini • Tải trực tiếp mô hình Gemma 4 31B (4-bit ZeroGPU)",
-    textbox=gr.Textbox(
-        placeholder="Hỏi Gemma bất kỳ điều gì (nhấn Enter để gửi)...",
-        lines=1,
-        max_lines=6,
-        container=False,
-        scale=7,
-    ),
-    additional_inputs=[
-        gr.Textbox(
-            label="Chỉ dẫn hệ thống (System Prompt)",
-            value="Bạn là Gemma, một trợ lý trí tuệ nhân tạo thông minh, am hiểu và thân thiện. Hãy trả lời súc tích, chính xác, định dạng câu trả lời bằng Markdown đẹp mắt.",
-            lines=2,
-        ),
-        gr.Slider(
-            minimum=0.0,
-            maximum=1.0,
-            value=0.7,
-            step=0.05,
-            label="Độ sáng tạo (Temperature)",
-            info="Giá trị thấp trả lời chuẩn xác hơn; giá trị cao trả lời phong phú và sáng tạo hơn.",
-        ),
-        gr.Slider(
-            minimum=128,
-            maximum=4096,
-            value=1536,
-            step=128,
-            label="Độ dài tối đa (Max New Tokens)",
-            info="Số lượng token tối đa mô hình tạo ra trong mỗi lượt trả lời.",
-        ),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.9,
-            step=0.05,
-            label="Top-P (Nucleus Sampling)",
-        ),
-    ],
-    additional_inputs_accordion=gr.Accordion(
-        label="⚙️ Cài đặt tham số mô hình & System Prompt",
-        open=False,
-    ),
-    examples=[
-        "Giải thích ngắn gọn cách hoạt động của cơ chế Multi-Head Attention trong mô hình Transformer.",
-        "Viết một kịch bản ngắn giới thiệu vẻ đẹp thiên nhiên và văn hóa cồng chiêng của vùng đất Gia Lai.",
-        "Tạo một hàm Python đọc tệp CSV, làm sạch dữ liệu thiếu và vẽ biểu đồ xu hướng bằng Matplotlib.",
-        "So sánh ưu điểm và nhược điểm giữa cấu trúc Dense Model và Mixture-of-Experts (MoE).",
-    ],
+with gr.Blocks(
     css=CUSTOM_CSS,
     theme=gr.themes.Base(
         primary_hue="blue",
         neutral_hue="neutral",
     ),
-)
+    title="✨ Google Gemma Assistant",
+) as demo:
+    gr.ChatInterface(
+        fn=chat_response,
+        title="✨ Google Gemma Assistant",
+        description="Trải nghiệm đối thoại AI phong cách Gemini • Tải trực tiếp mô hình Gemma 4 31B (4-bit ZeroGPU)",
+        textbox=gr.Textbox(
+            placeholder="Hỏi Gemma bất kỳ điều gì (nhấn Enter để gửi)...",
+            lines=1,
+            max_lines=6,
+            container=False,
+            scale=7,
+        ),
+        additional_inputs=[
+            gr.Textbox(
+                label="Chỉ dẫn hệ thống (System Prompt)",
+                value="Bạn là Gemma, một trợ lý trí tuệ nhân tạo thông minh, am hiểu và thân thiện. Hãy trả lời súc tích, chính xác, định dạng câu trả lời bằng Markdown đẹp mắt.",
+                lines=2,
+            ),
+            gr.Slider(
+                minimum=0.0,
+                maximum=1.0,
+                value=0.7,
+                step=0.05,
+                label="Độ sáng tạo (Temperature)",
+                info="Giá trị thấp trả lời chuẩn xác hơn; giá trị cao trả lời phong phú và sáng tạo hơn.",
+            ),
+            gr.Slider(
+                minimum=128,
+                maximum=4096,
+                value=1536,
+                step=128,
+                label="Độ dài tối đa (Max New Tokens)",
+                info="Số lượng token tối đa mô hình tạo ra trong mỗi lượt trả lời.",
+            ),
+            gr.Slider(
+                minimum=0.1,
+                maximum=1.0,
+                value=0.9,
+                step=0.05,
+                label="Top-P (Nucleus Sampling)",
+            ),
+        ],
+        additional_inputs_accordion=gr.Accordion(
+            label="⚙️ Cài đặt tham số mô hình & System Prompt",
+            open=False,
+        ),
+        examples=[
+            "Giải thích ngắn gọn cách hoạt động của cơ chế Multi-Head Attention trong mô hình Transformer.",
+            "Viết một kịch bản ngắn giới thiệu vẻ đẹp thiên nhiên và văn hóa cồng chiêng của vùng đất Gia Lai.",
+            "Tạo một hàm Python đọc tệp CSV, làm sạch dữ liệu thiếu và vẽ biểu đồ xu hướng bằng Matplotlib.",
+            "So sánh ưu điểm và nhược điểm giữa cấu trúc Dense Model và Mixture-of-Experts (MoE).",
+        ],
+    )
 
 if __name__ == "__main__":
     demo.queue().launch()