Update app.py

app.py

@@ -1349,12 +1349,12 @@ print('  - Advanced RAG: Tìm kiếm chính xác hơn')
 print()
 print('='*70)
 # ======================================================================
-# PHẦN 12.5: GRADIO INTERFACE (ĐẦY ĐỦ TÍNH NĂNG + NÚT LOG OUT CHO ADMIN)
+# PHẦN 12.5: GRADIO INTERFACE (BẢN CHUẨN ĐẦY ĐỦ - TÁCH Ô, EXAMPLES XỊN & LOGOUT)
 # ======================================================================
 
 import gradio as gr
 print('='*70)
-print('🖥️ KHỞI TẠO GRADIO INTERFACE CHUẨN HÓA LAYOUT')
+print('🖥️ KHỞI TẠO GRADIO INTERFACE CHUẨN HÓA')
 print('='*70)
 print()
 
@@ -1511,17 +1511,25 @@ footer {display: none !important;}
     box-shadow: 0 2px 4px rgba(0,0,0,0.02);
 }
 
-/* CSS Khung Card Trang Chủ */
-.home-card-custom {
-    background: #ffffff !important;
-    padding: 20px !important;
-    border-radius: 8px !important;
-    border: 1px solid #dee2e6 !important;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
-    height: 100%;
+/* Bố cục chia 2 ô ở Trang chủ */
+.home-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    margin-top: 10px;
+}
+@media (max-width: 768px) {
+    .home-grid { grid-template-columns: 1fr; }
 }
-.card-intro-line { border-top: 4px solid #1e3c72 !important; }
-.card-guide-line { border-top: 4px solid #0056b3 !important; }
+.home-card {
+    background: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
+}
+.card-intro { border-top: 4px solid #1e3c72; }
+.card-guide { border-top: 4px solid #0056b3; }
 
 button.primary {
     background-color: #0056b3 !important;
@@ -1585,42 +1593,35 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", neutral_hue="slate"), cs
     # 2. Hệ thống chuyển Tab làm việc chính
     with gr.Tabs():
         
-        # TAB 1: TRANG CHỦ (Ép 2 ô nằm ngang song song cố định)
+        # TAB 1: TRANG CHỦ (Tách biệt Giới thiệu & HDSD thành 2 ô riêng biệt)
         with gr.Tab("🏠 Trang chủ"):
-            gr.HTML("<div style='margin-top: 10px;'></div>")
-            
-            with gr.Row():
-                # Ô bên trái: Giới thiệu hệ thống
-                with gr.Column(scale=1):
-                    gr.HTML("""
-                    <div class="home-card-custom card-intro-line">
-                        <h3 style="color: #1e3c72; margin-top: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; font-size: 16px;">
-                            🏛️ GIỚI THIỆU HỆ THỐNG TRỢ LÝ ẢO
-                        </h3>
-                        <p style="font-size: 14px; line-height: 1.6; color: #334155; margin: 10px 0 0 0;">
-                            Hệ thống <b>Trợ lý ảo tư vấn hành chính công</b> được phát triển nhằm tối ưu hóa trải nghiệm dịch vụ công cho công dân. 
-                            Sử dụng công nghệ trí tuệ nhân tạo phối hợp với kiến trúc bộ nhớ thông minh, trợ lý ảo hỗ trợ tìm kiếm chính xác điều kiện, 
-                            lệ phí và các bước thực hiện của mọi thủ tục hành chính công một cách lập tức, chính xác 24/7.
-                        </p>
-                    </div>
-                    """)
+            gr.HTML("""
+            <div class="home-grid">
+                <div class="home-card card-intro">
+                    <h3 style="color: #1e3c72; margin-top: 0; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+                        🏛️ GIỚI THIỆU HỆ THỐNG TRỢ LÝ ẢO
+                    </h3>
+                    <p style="font-size: 14px; line-height: 1.6; color: #334155; margin-bottom: 0;">
+                        Hệ thống <b>Trợ lý ảo tư vấn hành chính công</b> được phát triển nhằm tối ưu hóa trải nghiệm dịch vụ công cho công dân. 
+                        Sử dụng công nghệ trí tuệ nhân tạo phối hợp với kiến trúc bộ nhớ thông minh, trợ lý ảo hỗ trợ tìm kiếm chính xác điều kiện, 
+                        lệ phí và các bước thực hiện của mọi thủ tục hành chính công một cách lập tức, chính xác 24/7.
+                    </p>
+                </div>
                 
-                # Ô bên phải: Hướng dẫn sử dụng
-                with gr.Column(scale=1):
-                    gr.HTML("""
-                    <div class="home-card-custom card-guide-line">
-                        <h3 style="color: #0056b3; margin-top: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; font-size: 16px;">
-                            💡 HƯỚNG DẪN SỬ DỤNG PHÂN HỆ
-                        </h3>
-                        <ul style="font-size: 14px; line-height: 1.6; color: #334155; padding-left: 20px; margin: 10px 0 0 0;">
-                            <li><b>💬 Phân hệ Trợ lý AI:</b> Nhập liệu bằng văn bản hoặc sử dụng microphone ghi âm giọng nói. Hệ thống tự động phân tích dữ liệu RAG và phát loa phản hồi tự động.</li>
-                            <li><b>⚙️ Phân hệ Admin Panel:</b> Khu vực xác thực mật khẩu dành riêng cho cán bộ quản trị hệ thống nhằm cập nhật hoặc bổ sung trực tiếp dữ liệu thủ tục hành chính mới.</li>
-                            <li><b>🧠 Phân hệ Memory Manager:</b> Theo dõi trực quan và quản lý toàn bộ các ngữ cảnh hội thoại, lịch sử chat đệm được lưu giữ trong bộ nhớ AI ở phiên làm việc hiện tại.</li>
-                        </ul>
-                    </div>
-                    """)
+                <div class="home-card card-guide">
+                    <h3 style="color: #0056b3; margin-top: 0; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+                        💡 HƯỚNG DẪN SỬ DỤNG PHÂN HỆ Chức Năng
+                    </h3>
+                    <ul style="font-size: 14px; line-height: 1.6; color: #334155; padding-left: 20px; margin: 0;">
+                        <li><b>💬 Phân hệ Trợ lý AI:</b> Nhập liệu bằng văn bản hoặc sử dụng microphone ghi âm giọng nói. Hệ thống tự động phân tích dữ liệu RAG và phát loa phản hồi tự động bằng giọng nói thích hợp.</li>
+                        <li><b>⚙️ Phân hệ Admin Panel:</b> Khu vực xác thực mật khẩu dành riêng cho cán bộ quản trị hệ thống nhằm cập nhật hoặc bổ sung trực tiếp dữ liệu thủ tục hành chính mới.</li>
+                        <li><b>🧠 Phân hệ Memory Manager:</b> Theo dõi trực quan và quản lý toàn bộ các ngữ cảnh hội thoại, lịch sử chat đệm được lưu giữ trong bộ nhớ AI ở phiên làm việc hiện tại.</li>
+                    </ul>
+                </div>
+            </div>
+            """)
 
-        # TAB 2: Giao diện tương tác tư vấn công dân
+        # TAB 2: Giao diện tương tác tư vấn công dân (Đã nâng cấp bộ Examples xịn)
         with gr.Tab("💬 Trợ lý AI"):
             with gr.Row():
                 with gr.Column(scale=7):
@@ -1650,24 +1651,29 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", neutral_hue="slate"), cs
                         ">
                             <strong style="color: #1e3c72;">💡 Cách dùng nhanh:</strong>
                             <ul style="margin: 5px 0 0 15px; padding: 0;">
-                                <li>Nhập câu hỏi hoặc dùng 🎤 <b>Micro</b>.</li>
-                                <li>Nhấn <b>Gửi</b> để nhận phản hồi từ AI.</li>
+                                <li>Nhập câu hỏi hoặc chọn một mẫu câu hỏi gợi ý nhanh bên dưới.</li>
+                                <li>Nhấn <b>Gửi câu hỏi</b> để nhận phản hồi từ AI.</li>
                                 <li>Hệ thống sẽ tự động 🔊 <b>Phát loa</b> câu trả lời.</li>
                             </ul>
                         </div>
                     """)
 
+            # Khu vực Examples gợi ý câu hỏi nhanh (Bản mở rộng thực tế)
             gr.Markdown("---")
-            gr.Markdown("**📌 Gợi ý tra cứu nhanh:**")
+            gr.Markdown("### 📌 Gợi ý tra cứu nhanh (Bấm vào câu hỏi để tự động điền)")
             gr.Examples(
                 examples=[
-                    [None, 'Làm bằng lái xe máy cần giấy tờ gì?'],
-                    [None, 'Khai sinh quá hạn phải làm sao?'],
-                    [None, 'Đăng ký xe ô tô mới ở đâu?'],
-                    [None, 'Tách hộ khẩu cần những gì?'],
-                    [None, 'Làm hộ chiếu bao nhiêu tiền?'],
+                    [None, 'Thủ tục làm hộ chiếu phổ thông trực tuyến cần giấy tờ gì?'],
+                    [None, 'Đăng ký khai sinh muộn cho con thì bị phạt bao nhiêu tiền?'],
+                    [None, 'Điều kiện và thủ tục cấp lại thẻ Căn cước bị mất như thế nào?'],
+                    [None, 'Đổi bằng lái xe máy từ thẻ giấy sang thẻ nhựa (PET) ở đâu?'],
+                    [None, 'Thủ tục tách hộ khẩu cho con khi ra ở riêng cần những gì?'],
+                    [None, 'Lệ phí trước bạ khi đăng ký xe ô tô mới hiện nay là bao nhiêu?'],
+                    [None, 'Làm giấy chứng nhận độc thân (tình trạng hôn nhân) tại xã hay huyện?'],
+                    [None, 'Sang tên sổ đỏ đất thổ cư mất bao lâu và phí thế nào?']
                 ],
-                inputs=[audio_in, msg_in]
+                inputs=[audio_in, msg_in],
+                label="Danh sách câu hỏi mẫu hành chính công phổ biến"
             )
 
             # Ràng buộc sự kiện Chatbot
@@ -1675,11 +1681,11 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", neutral_hue="slate"), cs
             msg_in.submit(process_chat_pro, [audio_in, msg_in, chat], [chat, audio_out, msg_in])
             btn_clear.click(clear_chat_pro, [], [chat, audio_out, msg_in])
 
-        # TAB 3: Quản trị viên cập nhật thủ tục (Có thêm logic Log out bảo mật)
+        # TAB 3: Quản trị viên cập nhật thủ tục (Đã thêm cơ chế Đăng nhập / Đăng xuất đồng bộ)
         with gr.Tab("⚙️ Admin Panel"):
             gr.Markdown("### 🔐 Xác thực quyền quản trị")
             
-            # Đặt tên biến hàng đăng nhập để dễ xử lý ẩn hiện đồng bộ
+            # Khởi tạo biến hàng đăng nhập để dễ dàng ẩn/hiện
             with gr.Row() as login_row:
                 input_pass = gr.Textbox(
                     label="Nhập mật khẩu để mở khóa tính năng Admin", 
@@ -1693,7 +1699,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", neutral_hue="slate"), cs
             admin_content = gr.Group(visible=False) 
             
             with admin_content:
-                # Dòng đầu tiên của Admin: Tiêu đề và Nút Đăng xuất
+                # Dòng đầu tiên của khu vực quản trị: Tiêu đề và Nút Đăng xuất
                 with gr.Row():
                     gr.Markdown("### 🏛️ KHU VỰC CẬP NHẬT DỮ LIỆU CẤP CAO")
                     btn_logout = gr.Button("Đăng xuất ↩️", variant="stop", scale=1, size="sm")
@@ -1717,7 +1723,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", neutral_hue="slate"), cs
                 add_output = gr.Textbox(label="Kết quả xử lý")
                 procedures_list = gr.Markdown(value=get_procedures_list())
 
-            # --- Logic xử lý ẩn hiện và mật khẩu ---
+            # Cấu trúc logic chuyển đổi trạng thái giao diện an toàn
             def check_admin(password):
                 if password == ADMIN_PASSWORD:
                     gr.Info("Đăng nhập thành công! Quyền quản trị đã được mở.")
@@ -1729,10 +1735,10 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", neutral_hue="slate"), cs
             # Hàm xử lý đăng xuất an toàn
             def admin_logout():
                 gr.Info("Đã đăng xuất an toàn khỏi hệ thống quản trị.")
-                # Ẩn nội dung admin, hiện lại thanh đăng nhập và reset trắng ô nhập mật khẩu
+                # Ẩn nội dung admin, hiện lại thanh đăng nhập và reset trắng ô mật khẩu cũ
                 return gr.update(visible=False), gr.update(visible=True), gr.update(value="")
 
-            # Đăng ký tương tác sự kiện xác thực đăng nhập
+            # Đăng ký tương tác sự kiện xác thực
             btn_login.click(
                 check_admin, 
                 inputs=[input_pass], 
@@ -1746,13 +1752,32 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", neutral_hue="slate"), cs
                 outputs=[admin_content, login_row, input_pass]
             )
 
-            # Sự kiện nút Thêm thủ tục
             btn_add.click(
                 admin_add,
                 [admin_code, admin_name, admin_docs, admin_coquan, admin_time, admin_lephi, admin_note, admin_steps],
                 [add_output, procedures_list]
             )
 
+        # TAB 4: Quản lý bộ nhớ hội thoại
+        with gr.Tab("🧠 Memory Manager"):
+            gr.Markdown("### 📊 Quản lý bộ nhớ hội thoại")
+
+            memory_info = gr.Textbox(label="Ngữ cảnh hiện tại", interactive=False, lines=3)
+            memory_history = gr.Textbox(label="Lịch sử chat", interactive=False, lines=10)
+
+            with gr.Row():
+                btn_refresh = gr.Button("🔄 Làm mới")
+                btn_clear_mem = gr.Button("🗑️ Xóa memory", variant='stop')
+
+            def refresh_memory():
+                ctx = conversation_memory.get_context_summary()
+                hist = "\n".join([f"{m['role']}: {m['content'][:100]}..."
+                                 for m in conversation_memory.history[-5:]])
+                return ctx or "Không có ngữ cảnh", hist or "Không có lịch sử"
+
+            btn_refresh.click(refresh_memory, [], [memory_info, memory_history])
+            btn_clear_mem.click(clear_chat_pro, [], [chat, audio_out, msg_in])
+
 
 # ======================================================================
 # PHẦN 12.7: LAUNCH SYSTEM APPLICATION