Update app.py

app.py

@@ -55,13 +55,13 @@ def format_face_comparison_result(result, img1_path, img2_path):
     # Matching results in the new table format
     if matches:
         html += """
-        <div class="matching-section">
+        <div>
             <div class="matches-table">
                 <table>
                     <thead>
                         <tr>
-                            <th>First Image Face</th>
-                            <th>Second Image Face</th>
+                            <th>First Face</th>
+                            <th>Second Face</th>
                             <th>Similarity Score</th>
                             <th>Result</th>
                         </tr>
@@ -155,8 +155,7 @@ def get_custom_css():
     /* Header styling - logo and text in same line */
     .company-header {
         background: var(--background-fill-primary);
-        padding: 25px;
-        margin-bottom: 25px;
+        padding: 10px;
         text-align: center;
         width: 100%;
         display: flex;
@@ -181,87 +180,21 @@ def get_custom_css():
     
     .header-text h1 {
         font-size: 2.4em !important;
-        margin-bottom: 12px;
         font-weight: 700;
-        margin-top: 0;
         color: var(--body-text-color);
     }
     
     .header-text p {
         font-size: 1.3em !important;
-        margin-bottom: 0;
         color: var(--body-text-color);
         opacity: 0.8;
     }
     
-    /* About section layout */
-    .about-section {
-        width: 100%;
-        margin-bottom: 25px;
-    }
-    
-    .about-content {
-        display: flex;
-        gap: 25px;
-        width: 100%;
-    }
-    
-    .features-section {
-        flex: 0.6;
-        padding: 25px;
-        background: var(--background-fill-secondary);
-        border-radius: 10px;
-        font-size: 1.05em !important;
-    }
-    
-    .demo-items-section {
-        flex: 0.4;
-        padding: 10px;
-        background: var(--background-fill-secondary);
-        border-radius: 10px;
-    }
-    
-    .demo-items-grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 15px;
-    }
-    
-    .demo-item {
-        background: var(--background-fill-primary);
-        padding: 4px;
-        border-radius: 8px;
-        text-align: center;
-        transition: background-color 0.2s ease;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        text-decoration: none;
-        color: var(--body-text-color);
-        font-size: 1em !important;
-    }
-    
-    .demo-item:hover {
-        background: var(--button-secondary-background-fill-hover);
-    }
-    
-    .demo-item img {
-        height: 30px;
-        margin-bottom: 10px;
-    }
-    
-    .demo-item span {
-        font-size: 0.95em !important;
-        font-weight: 600;
-    }
-    
     /* Main content layout */
     .main-content-row {
         display: flex;
         gap: 25px;
         width: 100%;
-        margin-bottom: 25px;
     }
     
     .upload-section {
@@ -307,9 +240,8 @@ def get_custom_css():
     /* Result container styling */
     .result-container {
         background: var(--background-fill-primary);
-        padding: 8px;
+        padding: 4px;
         border-radius: 10px;
-        margin-top: 0;
         width: 100%;
         text-align: center;
         height: fit-content;
@@ -324,13 +256,12 @@ def get_custom_css():
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
         gap: 15px;
-        margin-top: 20px;
         justify-content: center;
     }
     
     .detection-card {
         background: var(--background-fill-secondary);
-        padding: 15px;
+        padding: 4px;
         border-radius: 8px;
         text-align: center;
         display: flex;
@@ -343,7 +274,6 @@ def get_custom_css():
         height: 60px;
         border-radius: 50%;
         object-fit: cover;
-        margin-bottom: 10px;
     }
     
     .no-face {
@@ -364,7 +294,6 @@ def get_custom_css():
         font-size: 0.9em !important;
         color: var(--body-text-color);
         opacity: 0.8;
-        margin-top: 8px;
     }
     
     /* Matching table - NEW STYLING */
@@ -378,15 +307,14 @@ def get_custom_css():
     .matches-table table {
         width: 100%;
         border-collapse: collapse;
-        margin-top: 8px;
         font-size: 1em !important;
-        min-width: 550px;
+        min-width: 450px;
     }
     
     .matches-table th {
         background: var(--background-fill-secondary);
         color: var(--body-text-color);
-        padding: 12px 8px !important;
+        padding: 4px 2px !important;
         text-align: center;
         font-size: 1em !important;
         font-weight: 700;
@@ -394,7 +322,7 @@ def get_custom_css():
     }
     
     .matches-table td {
-        padding: 10px 8px !important;
+        padding: 4px 2px !important;
         border-bottom: 1px solid var(--border-color-primary);
         text-align: center;
         font-size: 0.95em !important;
@@ -551,7 +479,7 @@ with gr.Blocks(
             # Results Section
             with gr.Column(scale=0.4, elem_classes="result-section"):
                 txt_compare_out = gr.HTML(
-                    value="<div style='text-align: center; padding: 40px; font-size: 1.1em;'>Results will appear here after comparison</div>"
+                    value="<div style='text-align: center; padding: 10px; font-size: 1.1em;'>Results will appear here after comparison</div>"
                 )
     
     # Connect the function