Update app.py

app.py

@@ -129,6 +129,11 @@ def demo():
         background-color: #f9fafb;
     }
     
+    .container {
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+    
     /* Header styles */
     .header {
         text-align: center;
@@ -178,95 +183,95 @@ def demo():
     /* Buttons */
     .primary-button {
         background: linear-gradient(90deg, #3b82f6, #2563eb);
-        color: white;
-        border: none;
-        padding: 10px 20px;
-        border-radius: 8px;
-        font-weight: 500;
+        color: white !important;
+        border: none !important;
+        padding: 10px 20px !important;
+        border-radius: 8px !important;
+        font-weight: 500 !important;
         cursor: pointer;
         transition: all 0.2s ease;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
     }
     
     .primary-button:hover {
         background: linear-gradient(90deg, #2563eb, #1d4ed8);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
         transform: translateY(-1px);
     }
     
     /* Status indicators */
     .status {
-        padding: 8px 12px;
-        border-radius: 6px;
-        font-size: 0.9rem;
-        font-weight: 500;
+        padding: 8px 12px !important;
+        border-radius: 6px !important;
+        font-size: 0.9rem !important;
+        font-weight: 500 !important;
     }
     
     .status-success {
-        background-color: #d1fae5;
-        color: #065f46;
+        background-color: #d1fae5 !important;
+        color: #065f46 !important;
     }
     
     .status-waiting {
-        background-color: #fef3c7;
-        color: #92400e;
+        background-color: #fef3c7 !important;
+        color: #92400e !important;
     }
     
     .status-error {
-        background-color: #fee2e2;
-        color: #b91c1c;
+        background-color: #fee2e2 !important;
+        color: #b91c1c !important;
     }
     
     /* Chat container */
     .chat-container {
-        border-radius: 10px;
-        border: 1px solid #e5e7eb;
-        overflow: hidden;
+        border-radius: 10px !important;
+        border: 1px solid #e5e7eb !important;
+        overflow: hidden !important;
     }
     
     /* Document upload area */
     .upload-area {
-        border: 2px dashed #d1d5db;
-        border-radius: 8px;
-        padding: 20px;
-        text-align: center;
-        background-color: #f9fafb;
+        border: 2px dashed #d1d5db !important;
+        border-radius: 8px !important;
+        padding: 20px !important;
+        text-align: center !important;
+        background-color: #f9fafb !important;
         transition: all 0.2s ease;
     }
     
     .upload-area:hover {
-        border-color: #3b82f6;
-        background-color: #eff6ff;
+        border-color: #3b82f6 !important;
+        background-color: #eff6ff !important;
     }
     
     /* Parameter sliders */
     .parameter-slider {
-        margin-bottom: 15px;
+        margin-bottom: 15px !important;
     }
     
     /* Reference boxes */
     .reference-box {
-        background-color: #f3f4f6;
-        border-left: 4px solid #3b82f6;
-        padding: 10px 15px;
-        margin-bottom: 10px;
-        border-radius: 4px;
+        background-color: #f3f4f6 !important;
+        border-left: 4px solid #3b82f6 !important;
+        padding: 10px 15px !important;
+        margin-bottom: 10px !important;
+        border-radius: 4px !important;
     }
     
     .reference-box-title {
-        font-weight: 600;
-        color: #1e40af;
-        margin-bottom: 5px;
-        display: flex;
-        justify-content: space-between;
+        font-weight: 600 !important;
+        color: #1e40af !important;
+        margin-bottom: 5px !important;
+        display: flex !important;
+        justify-content: space-between !important;
     }
     
     .page-number {
-        background-color: #dbeafe;
-        color: #1e40af;
-        padding: 2px 8px;
-        border-radius: 12px;
-        font-size: 0.8rem;
+        background-color: #dbeafe !important;
+        color: #1e40af !important;
+        padding: 2px 8px !important;
+        border-radius: 12px !important;
+        font-size: 0.8rem !important;
     }
     
     /* Responsive adjustments */
@@ -341,13 +346,13 @@ def demo():
         with gr.Row():
             # Left column - Setup
             with gr.Column(scale=1):
-                with gr.Box(elem_classes="card"):
+                with gr.Group(elem_classes="card"):
                     gr.HTML(upload_html)
                     document = gr.Files(height=200, file_count="multiple", file_types=["pdf"], interactive=True)
                     db_btn = gr.Button("Create Vector Database", elem_classes="primary-button")
                     db_progress = gr.Textbox(value="Not initialized", show_label=False, elem_classes="status status-waiting")
                 
-                with gr.Box(elem_classes="card"):
+                with gr.Group(elem_classes="card"):
                     gr.HTML(model_html)
                     llm_btn = gr.Radio(list_llm_simple, label="", value=list_llm_simple[0], type="index")
                     
@@ -359,7 +364,7 @@ def demo():
                     qachain_btn = gr.Button("Initialize Chatbot", elem_classes="primary-button")
                     llm_progress = gr.Textbox(value="Not initialized", show_label=False, elem_classes="status status-waiting")
                 
-                with gr.Box(elem_classes="card"):
+                with gr.Group(elem_classes="card"):
                     gr.Markdown("### Usage Instructions")
                     gr.Markdown("""
                     1. Upload one or more PDF documents
@@ -373,7 +378,7 @@ def demo():
             
             # Right column - Chat
             with gr.Column(scale=1.5):
-                with gr.Box(elem_classes="card"):
+                with gr.Group(elem_classes="card"):
                     gr.HTML(chat_html)
                     language_selector = gr.Radio(["English", "Português"], label="Response Language", value="English")
                     
@@ -388,26 +393,26 @@ def demo():
                     with gr.Row():
                         clear_btn = gr.Button("Clear Chat", scale=1)
                 
-                with gr.Box(elem_classes="card"):
+                with gr.Group(elem_classes="card"):
                     gr.HTML(reference_html)
                     with gr.Accordion("Document References", open=True):
-                        with gr.Box(elem_classes="reference-box"):
-                            with gr.Row():
-                                gr.Markdown("**Reference 1**", elem_classes="reference-box-title")
-                                source1_page = gr.Number(label="Page", show_label=False, elem_classes="page-number")
-                            doc_source1 = gr.Textbox(show_label=False, lines=2)
-                            
-                        with gr.Box(elem_classes="reference-box"):
-                            with gr.Row():
-                                gr.Markdown("**Reference 2**", elem_classes="reference-box-title")
-                                source2_page = gr.Number(label="Page", show_label=False, elem_classes="page-number")
-                            doc_source2 = gr.Textbox(show_label=False, lines=2)
-                            
-                        with gr.Box(elem_classes="reference-box"):
-                            with gr.Row():
-                                gr.Markdown("**Reference 3**", elem_classes="reference-box-title")
-                                source3_page = gr.Number(label="Page", show_label=False, elem_classes="page-number")
-                            doc_source3 = gr.Textbox(show_label=False, lines=2)
+                        # Reference 1
+                        gr.Markdown("**Reference 1**", elem_classes="reference-box-title")
+                        with gr.Row():
+                            doc_source1 = gr.Textbox(show_label=False, lines=2, elem_classes="reference-box")
+                            source1_page = gr.Number(label="Page", show_label=True, elem_classes="page-number")
+                        
+                        # Reference 2
+                        gr.Markdown("**Reference 2**", elem_classes="reference-box-title")
+                        with gr.Row():
+                            doc_source2 = gr.Textbox(show_label=False, lines=2, elem_classes="reference-box")
+                            source2_page = gr.Number(label="Page", show_label=True, elem_classes="page-number")
+                        
+                        # Reference 3
+                        gr.Markdown("**Reference 3**", elem_classes="reference-box-title")
+                        with gr.Row():
+                            doc_source3 = gr.Textbox(show_label=False, lines=2, elem_classes="reference-box")
+                            source3_page = gr.Number(label="Page", show_label=True, elem_classes="page-number")
 
         # Preprocessing events
         db_btn.click(initialize_database, inputs=[document], outputs=[vector_db, db_progress])