Update ui/tabs.py

ui/tabs.py

@@ -333,22 +333,81 @@ def create_streaming_voice_tab(streaming_service: StreamingVoiceService):
     
     return streaming_tab
 def create_image_tab(image_service: ImageService):
-    gr.Markdown("## Phân tích hình ảnh")
-    with gr.Row():
-        image_input = gr.Image(type="numpy", label="Tải lên hình ảnh")
-    with gr.Row():
-        image_description = gr.Textbox(
-            label="Mô tả hình ảnh của bạn (tùy chọn)",
-            placeholder="Mô tả ngắn về hình ảnh để AI phân tích chính xác hơn..."
+    """Tạo tab phân tích hình ảnh với OCR và LLM"""
+    
+    with gr.Blocks() as image_tab:
+        gr.Markdown("## 🖼️ Phân tích hình ảnh & Trích xuất văn bản")
+        gr.Markdown("""
+        ### 🔍 Chức năng:
+        - **OCR đa ngôn ngữ**: Trích xuất văn bản từ ảnh (Tiếng Việt, Anh, Nhật, Hàn, Trung, ...)
+        - **Phân tích AI**: Sử dụng LLM để phân tích nội dung và ngữ cảnh
+        - **Hỗ trợ nhiều định dạng**: Tài liệu, ảnh chụp, meme, screenshot
+        
+        ### 📝 Hướng dẫn:
+        1. Tải lên hình ảnh có chứa văn bản
+        2. (Tùy chọn) Mô tả hình ảnh để AI phân tích chính xác hơn
+        3. Nhấn "Phân tích hình ảnh" để xem kết quả
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                # Image input
+                image_input = gr.Image(
+                    type="numpy", 
+                    label="🖼️ Tải lên hình ảnh",
+                    height=300
+                )
+                
+                # User description
+                image_description = gr.Textbox(
+                    label="📝 Mô tả hình ảnh (tùy chọn)",
+                    placeholder="Ví dụ: Đây là hóa đơn mua hàng, ảnh chụp menu nhà hàng, văn bản tiếng Việt...",
+                    lines=3
+                )
+                
+                # Analyze button
+                analyze_button = gr.Button(
+                    "🔍 Phân tích hình ảnh", 
+                    variant="primary",
+                    size="lg"
+                )
+                
+                # Clear button
+                clear_button = gr.Button("🗑️ Xóa", variant="secondary")
+            
+            with gr.Column(scale=2):
+                # Results output
+                image_output = gr.Textbox(
+                    label="📊 Kết quả phân tích",
+                    lines=15,
+                    max_lines=20,
+                    show_copy_button=True
+                )
+        
+        def analyze_image(image, description):
+            """Xử lý phân tích ảnh"""
+            if image is None:
+                return "❌ Vui lòng tải lên hình ảnh trước khi phân tích."
+            
+            return image_service.analyze_image_with_description(image, description)
+        
+        def clear_all():
+            """Xóa tất cả input và output"""
+            return None, "", ""
+        
+        # Event handlers
+        analyze_button.click(
+            analyze_image,
+            inputs=[image_input, image_description],
+            outputs=[image_output]
         )
-    with gr.Row():
-        image_output = gr.Textbox(label="Kết quả phân tích")
-    analyze_button = gr.Button("Phân tích hình ảnh", variant="primary")
-    analyze_button.click(
-        image_service.analyze_image_with_description,
-        inputs=[image_input, image_description],
-        outputs=[image_output]
-    )
+        
+        clear_button.click(
+            clear_all,
+            outputs=[image_input, image_description, image_output]
+        )
+    
+    return image_tab
 def create_chat_tab(chat_service: ChatService):
     gr.Markdown("## Trò chuyện với AI Assistant (Đa ngôn ngữ)")