feat: replace sentiment analysis demo with Gemma 4 chat assistant application

.gitignore

@@ -0,0 +1,3 @@
+__pycache__/
+*.pyc
+.env

README.md

@@ -1,8 +1,8 @@
 ---
-title: Code
-emoji: 😻
-colorFrom: yellow
-colorTo: indigo
+title: Gemma 4 Chat Assistant
+emoji: ✨
+colorFrom: blue
+colorTo: purple
 sdk: gradio
 sdk_version: 6.27.0
 python_version: '3.12'

app.py

@@ -1,34 +1,298 @@
-import gradio as gr
+import os
 import spaces
-from transformers import pipeline
+import torch
+from threading import Thread
+from transformers import (
+    AutoModelForCausalLM,
+    AutoTokenizer,
+    TextIteratorStreamer,
+    BitsAndBytesConfig,
+)
+import gradio as gr
+
+# ==============================================================================
+# CẤU HÌNH MÔ HÌNH VÀ TOKEN
+# ==============================================================================
+# Bạn có thể đổi sang 'google/gemma-4-31B-it', 'google/gemma-2-9b-it' hoặc mô hình khác
+# qua biến môi trường MODEL_ID trên Hugging Face Space Settings.
+MODEL_ID = os.getenv("MODEL_ID", "google/gemma-4-31B-it")
+HF_TOKEN = os.getenv("HF_TOKEN", None)
+
+print(f"[*] Khởi tạo cấu hình cho mô hình: {MODEL_ID}")
+
+# Cấu hình lượng tử hóa 4-bit (BitsAndBytes NF4) để tối ưu VRAM trên ZeroGPU
+bnb_config = BitsAndBytesConfig(
+    load_in_4bit=True,
+    bnb_4bit_quant_type="nf4",
+    bnb_4bit_compute_dtype=torch.bfloat16,
+    bnb_4bit_use_double_quant=True,
+)
+
+# Tải Tokenizer và Model
+print("[*] Đang tải Tokenizer...")
+tokenizer = AutoTokenizer.from_pretrained(
+    MODEL_ID,
+    token=HF_TOKEN,
+    trust_remote_code=True,
+)
 
-# Load pipeline mô hình (ví dụ: mô hình phân loại cảm xúc văn bản)
-classifier = pipeline(
-    "sentiment-analysis",
-    model="distilbert-base-uncased-finetuned-sst-2-english",
+print("[*] Đang tải Model với 4-bit Quantization...")
+model = AutoModelForCausalLM.from_pretrained(
+    MODEL_ID,
+    quantization_config=bnb_config,
+    device_map="auto",
+    token=HF_TOKEN,
+    trust_remote_code=True,
 )
+print("[+] Mô hình đã sẵn sàng hoạt động!")
+
+# ==============================================================================
+# HÀM SUY LUẬN & STREAMING KẾT QUẢ VỚI ZERO-GPU
+# ==============================================================================
+@spaces.GPU(duration=120)
+def chat_response(
+    message,
+    history,
+    system_prompt,
+    temperature,
+    max_new_tokens,
+    top_p,
+):
+    if not message or not message.strip():
+        yield ""
+        return
+
+    # Xây dựng danh sách tin nhắn theo chuẩn hội thoại
+    conversation = []
+
+    # 1. Thêm system prompt nếu có
+    if system_prompt and system_prompt.strip():
+        conversation.append({"role": "system", "content": system_prompt.strip()})
+
+    # 2. Đọc lại lịch sử chat (tương thích cả dict messages và tuple)
+    for item in history:
+        if isinstance(item, dict):
+            role = item.get("role", "user")
+            # Gemma chat template quy ước role là 'user' và 'model'
+            if role == "assistant":
+                role = "model"
+            conversation.append({"role": role, "content": item.get("content", "")})
+        elif isinstance(item, (list, tuple)) and len(item) == 2:
+            user_text, bot_text = item
+            if user_text:
+                conversation.append({"role": "user", "content": str(user_text)})
+            if bot_text:
+                conversation.append({"role": "model", "content": str(bot_text)})
+
+    # 3. Thêm tin nhắn hiện tại của người dùng
+    conversation.append({"role": "user", "content": message.strip()})
+
+    # 4. Tạo prompt qua chat template của Gemma
+    try:
+        prompt = tokenizer.apply_chat_template(
+            conversation,
+            tokenize=False,
+            add_generation_prompt=True,
+        )
+    except Exception:
+        # Fallback nếu tokenizer không hỗ trợ role 'system' riêng rẽ
+        fallback_conv = []
+        for idx, item in enumerate(conversation):
+            if item["role"] == "system":
+                continue
+            content = item["content"]
+            if idx == (1 if system_prompt else 0):
+                content = f"[Hướng dẫn hệ thống: {system_prompt}]\n\n{content}"
+            fallback_conv.append({"role": item["role"], "content": content})
+        prompt = tokenizer.apply_chat_template(
+            fallback_conv,
+            tokenize=False,
+            add_generation_prompt=True,
+        )
+
+    # 5. Tokenize và đưa vào thiết bị của model
+    model_inputs = tokenizer([prompt], return_tensors="pt").to(model.device)
 
+    # 6. Thiết lập Streamer để bắn từng token ra ngoài màn hình
+    streamer = TextIteratorStreamer(
+        tokenizer,
+        skip_prompt=True,
+        skip_special_tokens=True,
+    )
 
-@spaces.GPU
-def analyze_text(text):
-    if not text.strip():
-        return "Vui lòng nhập văn bản cần phân tích."
-    result = classifier(text)[0]
-    label = result["label"]
-    score = round(result["score"], 4)
-    return f"Kết quả: {label} (Độ tin cậy: {score})"
+    generation_kwargs = dict(
+        model_inputs,
+        streamer=streamer,
+        max_new_tokens=int(max_new_tokens),
+        temperature=float(max(temperature, 0.01)),
+        top_p=float(top_p),
+        do_sample=True if temperature > 0.0 else False,
+    )
 
+    # Chạy model.generate trên luồng nền (background thread)
+    thread = Thread(target=model.generate, kwargs=generation_kwargs)
+    thread.start()
 
-# Tạo giao diện người dùng
-demo = gr.Interface(
-    fn=analyze_text,
-    inputs=gr.Textbox(
-        lines=3, placeholder="Nhập câu tiếng Anh cần kiểm tra..."
+    # 7. Nhận từng token và yield về giao diện theo thời gian thực
+    partial_text = ""
+    for token in streamer:
+        partial_text += token
+        yield partial_text
+
+
+# ==============================================================================
+# TÙY BIẾN GIAO DIỆN THEME GOOGLE GEMINI
+# ==============================================================================
+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;
+}
+
+body, .gradio-container {
+    background-color: var(--bg-primary) !important;
+    color: var(--text-primary) !important;
+    font-family: 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !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;
+}
+
+.gemini-subtitle {
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    margin-bottom: 1.5rem;
+}
+
+/* Chat container & Message styling */
+.bubble-wrap {
+    background-color: var(--bg-primary) !important;
+}
+
+.message.user, [data-testid="user"] {
+    background-color: var(--bg-bubble-user) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 20px 20px 4px 20px !important;
+    color: #f1f3f4 !important;
+    padding: 12px 18px !important;
+    font-size: 15px !important;
+}
+
+.message.bot, [data-testid="bot"] {
+    background-color: transparent !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;
+}
+
+/* Khối nhập liệu bo tròn mềm mại */
+input[type="text"], textarea {
+    background-color: var(--bg-secondary) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 16px !important;
+    color: #ffffff !important;
+}
+
+input[type="text"]:focus, textarea:focus {
+    border-color: #4285f4 !important;
+    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.25) !important;
+}
+
+/* Accordion cài đặt */
+.gr-accordion {
+    background-color: var(--bg-secondary) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 12px !important;
+}
+
+footer {
+    display: none !important;
+}
+"""
+
+# ==============================================================================
+# KHỞI TẠO GIAO DIỆN GRADIO CHAT INTERFACE
+# ==============================================================================
+demo = gr.ChatInterface(
+    fn=chat_response,
+    type="messages",
+    title=None,
+    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).",
+    ],
+    css=CUSTOM_CSS,
+    theme=gr.themes.Base(
+        primary_hue="blue",
+        neutral_hue="neutral",
     ),
-    outputs="text",
-    title="Sentiment Analysis Demo",
-    description="Ứng dụng phân tích cảm xúc sử dụng mô hình Hugging Face Transformers.",
+    head="""
+    <div class="gemini-title">✨ Google Gemma Assistant</div>
+    <div class="gemini-subtitle">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)</div>
+    """,
 )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.queue().launch()

requirements.txt

@@ -1,2 +1,4 @@
-transformers
+transformers>=4.45.0
 torch
+accelerate>=0.34.0
+bitsandbytes>=0.43.0