refactor: update Gradio UI theme and custom CSS to light Google Gemini style

app.py

@@ -141,87 +141,132 @@ def chat_response(
 
 
 # ==============================================================================
-# TÙY BIẾN GIAO DIỆN THEME GOOGLE GEMINI
+# TÙY BIẾN GIAO DIỆN THEME GOOGLE GEMINI (SÁNG - TINH TẾ - DỄ ĐỌC)
 # ==============================================================================
+DEFAULT_SYSTEM_PROMPT = (
+    "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."
+)
+
+# Khởi tạo theme chuẩn Google (màu xanh dương dịu mắt, tương phản cao)
+custom_theme = gr.themes.Soft(
+    primary_hue="blue",
+    secondary_hue="indigo",
+    neutral_hue="slate",
+    font=[gr.themes.GoogleFont("Inter"), "sans-serif"],
+)
+
 CUSTOM_CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');
-
-:root {
-    --bg-primary: #131314;
-    --bg-secondary: #1e1f20;
-    --bg-bubble-user: #282a2c;
-    --text-primary: #e3e3e3;
-    --text-muted: #9aa0a6;
-    --border-color: #3c4043;
-}
+@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');
 
+/* Toàn bộ nền trang sáng sủa, sạch sẽ phong cách Google */
 body, .gradio-container {
-    background-color: var(--bg-primary) !important;
-    color: var(--text-primary) !important;
+    background-color: #f8fafd !important;
+    color: #1f2937 !important;
     font-family: 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    max-width: 960px !important;
+    margin: 0 auto !important;
 }
 
-/* Tiêu đề phong cách Gemini Sparkle */
-.gemini-title {
-    text-align: center;
-    margin: 1.5rem 0 0.5rem 0;
-    font-size: 2.2rem;
-    font-weight: 700;
-    background: linear-gradient(135deg, #4285f4 0%, #9b72cb 50%, #d96570 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    letter-spacing: -0.5px;
+/* Tiêu đề phong cách Gemini Sparkle Gradient */
+h1 {
+    text-align: center !important;
+    font-size: 2.2rem !important;
+    font-weight: 700 !important;
+    background: linear-gradient(135deg, #1a73e8 0%, #8b5cf6 50%, #ec4899 100%) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    letter-spacing: -0.5px !important;
+    margin-bottom: 0.25rem !important;
 }
 
-.gemini-subtitle {
-    text-align: center;
-    color: var(--text-muted);
-    font-size: 0.95rem;
-    margin-bottom: 1.5rem;
+/* Mô tả phụ bên dưới tiêu đề */
+.description, p.description {
+    text-align: center !important;
+    color: #5f6368 !important;
+    font-size: 0.95rem !important;
+    margin-bottom: 1.25rem !important;
 }
 
-/* Chat container & Message styling */
-.bubble-wrap {
-    background-color: var(--bg-primary) !important;
+/* Khung Chatbot chính: Nền trắng, bo tròn mềm mại, đổ bóng nhẹ */
+[data-testid="chatbot"], .chatbot {
+    background-color: #ffffff !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 20px !important;
+    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
+    min-height: 520px !important;
 }
 
-.message.user, [data-testid="user"] {
-    background-color: var(--bg-bubble-user) !important;
-    border: 1px solid var(--border-color) !important;
+/* Tin nhắn Người dùng: Nền xanh nhạt dịu mắt (Google Blue tint), chữ xanh đậm rõ nét */
+[data-testid="user"], .message.user, .user-row .message {
+    background-color: #e8f0fe !important;
+    border: 1px solid #d2e3fc !important;
+    color: #174ea6 !important;
     border-radius: 20px 20px 4px 20px !important;
-    color: #f1f3f4 !important;
     padding: 12px 18px !important;
     font-size: 15px !important;
+    font-weight: 500 !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
 }
 
-.message.bot, [data-testid="bot"] {
+[data-testid="user"] *, .message.user * {
+    color: #174ea6 !important;
+}
+
+/* Tin nhắn Trợ lý Bot: Chữ tối rõ nét trên nền trắng, dễ đọc */
+[data-testid="bot"], .message.bot, .bot-row .message {
     background-color: transparent !important;
+    color: #1f2937 !important;
     border: none !important;
-    border-radius: 20px 20px 20px 4px !important;
-    color: var(--text-primary) !important;
-    padding: 12px 18px !important;
     font-size: 15px !important;
-    line-height: 1.65 !important;
+    line-height: 1.7 !important;
+    padding: 12px 18px !important;
+}
+
+[data-testid="bot"] *, .message.bot * {
+    color: #1f2937 !important;
+}
+
+/* Code block hiển thị đẹp mắt và tương phản chuẩn */
+pre {
+    background-color: #1e293b !important;
+    border-radius: 10px !important;
+    padding: 14px 16px !important;
+    color: #f8fafc !important;
+}
+
+pre code, pre span {
+    color: #f8fafc !important;
 }
 
-/* Khối nhập liệu bo tròn m���m mại */
+/* Ô nhập câu hỏi dạng viên thuốc (Pill shape) chuẩn Google */
 input[type="text"], textarea {
-    background-color: var(--bg-secondary) !important;
-    border: 1px solid var(--border-color) !important;
-    border-radius: 16px !important;
-    color: #ffffff !important;
+    background-color: #ffffff !important;
+    border: 1.5px solid #dadce0 !important;
+    border-radius: 26px !important;
+    color: #1f2937 !important;
+    padding: 12px 20px !important;
+    font-size: 15px !important;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
 }
 
 input[type="text"]:focus, textarea:focus {
-    border-color: #4285f4 !important;
-    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.25) !important;
+    border-color: #1a73e8 !important;
+    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15) !important;
+}
+
+/* Khối Accordion cài đặt: Thu gọn, nền trắng, tinh gọn */
+details, .gr-accordion {
+    background-color: #ffffff !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 14px !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
+    margin-top: 0.75rem !important;
 }
 
-/* Accordion cài đặt */
-.gr-accordion {
-    background-color: var(--bg-secondary) !important;
-    border: 1px solid var(--border-color) !important;
-    border-radius: 12px !important;
+label, span.label-text {
+    color: #374151 !important;
+    font-weight: 500 !important;
 }
 
 footer {
@@ -229,100 +274,86 @@ footer {
 }
 """
 
-DEFAULT_SYSTEM_PROMPT = (
-    "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."
-)
-
-custom_theme = gr.themes.Base(
-    primary_hue="blue",
-    neutral_hue="neutral",
-)
-
 # ==============================================================================
-# KHỞI TẠO GIAO DIỆN GRADIO VỚI THEME & CUSTOM CSS
+# KHỞI TẠO GIAO DIỆN CHAT INTERFACE
 # ==============================================================================
-with gr.Blocks(title="✨ Google Gemma Assistant") as demo:
-    # Nhúng CSS trực tiếp đảm bảo tương thích 100% mọi phiên bản Gradio
-    gr.HTML(f"<style>{CUSTOM_CSS}</style>")
-
-    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,
+demo = gr.ChatInterface(
+    fn=chat_response,
+    title="✨ Google Gemma Assistant",
+    description="Trải nghiệm đối thoại AI phong cách Google 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=DEFAULT_SYSTEM_PROMPT,
+            lines=2,
         ),
-        additional_inputs=[
-            gr.Textbox(
-                label="Chỉ dẫn hệ thống (System Prompt)",
-                value=DEFAULT_SYSTEM_PROMPT,
-                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,
+        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.",
         ),
-        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.",
-                DEFAULT_SYSTEM_PROMPT,
-                0.7,
-                1536,
-                0.9,
-            ],
-            [
-                "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.",
-                DEFAULT_SYSTEM_PROMPT,
-                0.7,
-                1536,
-                0.9,
-            ],
-            [
-                "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.",
-                DEFAULT_SYSTEM_PROMPT,
-                0.7,
-                1536,
-                0.9,
-            ],
-            [
-                "So sánh ưu điểm và nhược điểm giữa cấu trúc Dense Model và Mixture-of-Experts (MoE).",
-                DEFAULT_SYSTEM_PROMPT,
-                0.7,
-                1536,
-                0.9,
-            ],
+        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.",
+            DEFAULT_SYSTEM_PROMPT,
+            0.7,
+            1536,
+            0.9,
         ],
-        cache_examples=False,
-    )
+        [
+            "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.",
+            DEFAULT_SYSTEM_PROMPT,
+            0.7,
+            1536,
+            0.9,
+        ],
+        [
+            "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.",
+            DEFAULT_SYSTEM_PROMPT,
+            0.7,
+            1536,
+            0.9,
+        ],
+        [
+            "So sánh ưu điểm và nhược điểm giữa cấu trúc Dense Model và Mixture-of-Experts (MoE).",
+            DEFAULT_SYSTEM_PROMPT,
+            0.7,
+            1536,
+            0.9,
+        ],
+    ],
+    cache_examples=False,
+)
 
 if __name__ == "__main__":
     demo.queue().launch(theme=custom_theme, css=CUSTOM_CSS)