Update 38

pages/multiagent_system.py

@@ -3,6 +3,7 @@ import os
 from supabase import create_client, Client
 from datetime import datetime
 import json
+import time
 
 # Thiết lập page config
 st.set_page_config(
@@ -11,6 +12,52 @@ st.set_page_config(
     layout="wide"
 )
 
+# Trick để fix layout issue khi deploy
+def fix_layout_trick():
+    """
+    Trick để fix layout issue trên Hugging Face Spaces
+    """
+    # Thêm JavaScript để force reflow sau khi page load
+    st.markdown("""
+    <script>
+    // Force reflow after page loads
+    setTimeout(function() {
+        window.dispatchEvent(new Event('resize'));
+        document.body.style.display = 'none';
+        document.body.offsetHeight; // trigger reflow
+        document.body.style.display = '';
+    }, 100);
+    
+    // Additional reflow after 500ms
+    setTimeout(function() {
+        window.dispatchEvent(new Event('resize'));
+    }, 500);
+    </script>
+    """, unsafe_allow_html=True)
+    
+    # CSS để đảm bảo smooth loading
+    st.markdown("""
+    <style>
+    /* Ensure smooth loading */
+    .main .block-container {
+        opacity: 0;
+        animation: fadeIn 0.5s ease-in-out forwards;
+        animation-delay: 0.1s;
+    }
+    
+    @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+    
+    /* Force proper rendering */
+    .stApp {
+        transform: translateZ(0);
+        backface-visibility: hidden;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
 def init_supabase_client() -> Client:
     """
     Khởi tạo Supabase client
@@ -78,6 +125,8 @@ def display_agents():
         margin-bottom: 2rem;
         overflow: hidden;
         border: 1px solid rgba(0,0,0,0.05);
+        transform: translateZ(0);
+        will-change: transform;
     }
     
     .agent-header {
@@ -682,6 +731,19 @@ def main():
     """
     Hàm chính của trang Multi-Agent System
     """
+    # Áp dụng trick fix layout ngay đầu
+    fix_layout_trick()
+    
+    # Thêm một sidebar trick để trigger re-render
+    with st.sidebar:
+        st.markdown("""
+        <div style="position: absolute; left: -9999px; opacity: 0;">
+            <button id="layout-trigger" onclick="window.dispatchEvent(new Event('resize'));">
+                Trigger Layout
+            </button>
+        </div>
+        """, unsafe_allow_html=True)
+    
     # Hiển thị kiến trúc hệ thống
     display_system_architecture()