Update app.py

app.py

@@ -1,4 +1,4 @@
-# app.py (Phiên bản cuối cùng: Sửa lỗi cảnh báo và thêm tin nhắn "Thinking...")
+# app.py 
 
 import gradio as gr
 import torch
@@ -32,8 +32,6 @@ def process_vqa(image: Image.Image, question: str):
     prompt_text = processor.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
     model_inputs = processor(text=[prompt_text], images=[image], return_tensors="pt").to(model.device)
     
-    # SỬA LỖI 1: Ghi đè `temperature` để tắt cảnh báo.
-    # Đặt là 1.0 (trung tính) vì do_sample=False nên nó sẽ không được sử dụng.
     generated_ids = model.generate(
         **model_inputs,
         max_new_tokens=1024,
@@ -48,6 +46,44 @@ def process_vqa(image: Image.Image, question: str):
     return response
 
 # --- 3. Logic Chatbot ---
+# ### THAY ĐỔI MỚI 1: Định nghĩa HTML và CSS cho hiệu ứng động ###
+# HTML cho hiệu ứng "đang gõ"
+THINKING_HTML = """
+<div class="typing-indicator">
+    <span></span>
+    <span></span>
+    <span></span>
+</div>
+"""
+# CSS để tạo hiệu ứng
+CUSTOM_CSS = """
+@keyframes blink {
+    0% { opacity: .2; }
+    20% { opacity: 1; }
+    100% { opacity: .2; }
+}
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start; /* Căn trái */
+    padding: 8px 0; /* Thêm chút khoảng đệm */
+}
+.typing-indicator span {
+    height: 10px;
+    width: 10px;
+    margin: 0 2px;
+    background-color: #9E9E9E; /* Màu xám */
+    border-radius: 50%;
+    animation: blink 1.4s infinite both;
+}
+.typing-indicator span:nth-child(2) {
+    animation-delay: .2s;
+}
+.typing-indicator span:nth-child(3) {
+    animation-delay: .4s;
+}
+"""
+
 # Hàm dành cho việc người dùng tự nhập câu hỏi
 def manual_chat_responder(user_question: str, chat_history: list, uploaded_image: Image.Image):
     if uploaded_image is None:
@@ -57,46 +93,41 @@ def manual_chat_responder(user_question: str, chat_history: list, uploaded_image
         gr.Warning("Vui lòng nhập một câu hỏi.")
         return "", chat_history
     
-    # THÊM TÍNH NĂNG 2: Hiển thị tin nhắn chờ
     chat_history.append({"role": "user", "content": user_question})
-    chat_history.append({"role": "assistant", "content": "🤔 Thinking..."})
+    # ### THAY ĐỔI MỚI 2: Sử dụng HTML động thay cho text tĩnh ###
+    chat_history.append({"role": "assistant", "content": THINKING_HTML})
     yield "", chat_history
 
     bot_response = process_vqa(uploaded_image, user_question)
     
-    # THÊM TÍNH NĂNG 2: Cập nhật tin nhắn chờ bằng câu trả lời thật
     chat_history[-1]["content"] = bot_response
     yield "", chat_history
 
 # Hàm dành riêng cho việc xử lý khi nhấn vào ví dụ
 def run_example(evt: SelectData):
-    # Dùng list toàn cục đã được định nghĩa trong khối `with`
     selected_example = example_list[evt.index]
     image_path, question = selected_example
     gr.Info(f"Đang chạy ví dụ: \"{question}\"")
     image = Image.open(image_path).convert("RGB")
     
-    # THÊM TÍNH NĂNG 2: Hiển thị tin nhắn chờ
+    # ### THAY ĐỔI MỚI 3: Sử dụng HTML động thay cho text tĩnh ###
     chat_history = [
         {"role": "user", "content": question},
-        {"role": "assistant", "content": "🤔 Thinking..."}
+        {"role": "assistant", "content": THINKING_HTML}
     ]
-    # `yield` lần đầu để cập nhật UI ngay lập tức
     yield image, question, chat_history
 
-    # Chạy xử lý và lấy câu trả lời thật
     bot_response = process_vqa(image, question)
     
-    # THÊM TÍNH NĂNG 2: Cập nhật tin nhắn chờ bằng câu trả lời thật
     chat_history[-1]["content"] = bot_response
-    # `yield` lần cuối để hiển thị kết quả cuối cùng
     yield image, question, chat_history
 
 def clear_chat():
     return []
 
 # --- 4. Định nghĩa Giao diện Người dùng Gradio ---
-with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"), title="Vibook VQA Chatbot") as demo:
+# ### THAY ĐỔI MỚI 4: Thêm CSS vào Blocks ###
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"), title="Vibook VQA Chatbot", css=CUSTOM_CSS) as demo:
     gr.Markdown("# 🤖 Vibook VQA Chatbot")
     
     example_list = [
@@ -119,7 +150,6 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"), ti
     # --- 5. Xử lý Sự kiện ---
     question_input.submit(fn=manual_chat_responder, inputs=[question_input, chatbot, image_input], outputs=[question_input, chatbot])
     
-    # THÊM TÍNH NĂNG 2: Hàm `run_example` giờ là một generator, Gradio sẽ tự động xử lý các `yield`
     example_dataset.select(fn=run_example, inputs=None, outputs=[image_input, question_input, chatbot], show_progress="full")
     
     image_input.upload(fn=clear_chat, inputs=None, outputs=[chatbot])