Update app.py

app.py

@@ -137,19 +137,6 @@ def format_face_comparison_result(result, img1_path, img2_path):
     html += "</div>"
     return html
 
-def create_footer():
-    """Create simple footer"""
-    return """
-    <div class="footer">
-        <p>© 2024 MiniAiLive. All rights reserved.</p>
-        <p>
-            <a href="https://www.miniai.live" target="_blank">Website</a> | 
-            <a href="mailto:info@miniai.live">Contact Us</a> | 
-            <a href="https://www.miniai.live/privacy-policy" target="_blank">Privacy Policy</a>
-        </p>
-    </div>
-    """
-
 def get_custom_css():
     """Return simplified CSS styling that works for both light and dark themes"""
     return """
@@ -160,6 +147,7 @@ def get_custom_css():
         max-width: 95% !important;
         width: 95% !important;
         margin: 0 auto !important;
+        font-size: 16px !important;
     }
     
     /* Center everything */
@@ -174,14 +162,14 @@ def get_custom_css():
     /* Header styling - logo and text in same line */
     .company-header {
         background: var(--background-fill-primary);
-        padding: 20px;
-        margin-bottom: 20px;
+        padding: 25px;
+        margin-bottom: 25px;
         text-align: center;
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: 20px;
+        gap: 25px;
         flex-wrap: wrap;
     }
     
@@ -190,7 +178,7 @@ def get_custom_css():
     }
     
     .header-logo img {
-        width: 120px;
+        width: 140px;
         height: auto;
     }
     
@@ -199,15 +187,15 @@ def get_custom_css():
     }
     
     .header-text h1 {
-        font-size: 2em;
-        margin-bottom: 8px;
-        font-weight: 600;
+        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.1em;
+        font-size: 1.3em !important;
         margin-bottom: 0;
         color: var(--body-text-color);
         opacity: 0.8;
@@ -216,27 +204,28 @@ def get_custom_css():
     /* About section layout */
     .about-section {
         width: 100%;
-        margin-bottom: 20px;
+        margin-bottom: 25px;
     }
     
     .about-content {
         display: flex;
-        gap: 20px;
+        gap: 25px;
         width: 100%;
     }
     
     .features-section {
         flex: 0.6;
-        padding: 20px;
+        padding: 25px;
         background: var(--background-fill-secondary);
-        border-radius: 8px;
+        border-radius: 10px;
+        font-size: 1.05em !important;
     }
     
     .demo-items-section {
         flex: 0.4;
-        padding: 20px;
+        padding: 10px;
         background: var(--background-fill-secondary);
-        border-radius: 8px;
+        border-radius: 10px;
     }
     
     .demo-items-grid {
@@ -247,8 +236,8 @@ def get_custom_css():
     
     .demo-item {
         background: var(--background-fill-primary);
-        padding: 15px;
-        border-radius: 6px;
+        padding: 5px;
+        border-radius: 8px;
         text-align: center;
         transition: background-color 0.2s ease;
         display: flex;
@@ -257,6 +246,7 @@ def get_custom_css():
         justify-content: center;
         text-decoration: none;
         color: var(--body-text-color);
+        font-size: 1em !important;
     }
     
     .demo-item:hover {
@@ -264,28 +254,28 @@ def get_custom_css():
     }
     
     .demo-item img {
-        height: 25px;
-        margin-bottom: 8px;
+        height: 40px;
+        margin-bottom: 5px;
     }
     
     .demo-item span {
-        font-size: 0.85em;
-        font-weight: 500;
+        font-size: 0.95em !important;
+        font-weight: 600;
     }
     
     /* Main content layout */
     .main-content-row {
         display: flex;
-        gap: 20px;
+        gap: 25px;
         width: 100%;
-        margin-bottom: 20px;
+        margin-bottom: 25px;
     }
     
     .upload-section {
         flex: 2;
         display: flex;
         flex-direction: column;
-        gap: 15px;
+        gap: 20px;
     }
     
     .result-section {
@@ -294,7 +284,7 @@ def get_custom_css():
     
     .upload-images-row {
         display: flex;
-        gap: 15px;
+        gap: 20px;
         width: 100%;
     }
     
@@ -306,14 +296,13 @@ def get_custom_css():
     .button-primary {
         background: var(--button-primary-background-fill) !important;
         border: none !important;
-        padding: 12px 24px !important;
-        font-size: 16px !important;
+        padding: 4px 8px !important;
+        font-size: 1.2em !important;
         font-weight: 600 !important;
         color: var(--button-primary-text-color) !important;
-        border-radius: 6px !important;
+        border-radius: 8px !important;
         cursor: pointer !important;
         transition: background-color 0.2s ease !important;
-        margin: 15px 0 !important;
         width: 100% !important;
     }
     
@@ -324,8 +313,8 @@ def get_custom_css():
     /* Result container styling */
     .result-container {
         background: var(--background-fill-primary);
-        padding: 4px;
-        border-radius: 8px;
+        padding: 8px;
+        border-radius: 10px;
         margin-top: 0;
         width: 100%;
         text-align: center;
@@ -339,16 +328,16 @@ def get_custom_css():
     /* Detection cards */
     .detections-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 12px;
-        margin-top: 15px;
+        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: 12px;
-        border-radius: 6px;
+        padding: 15px;
+        border-radius: 8px;
         text-align: center;
         display: flex;
         flex-direction: column;
@@ -356,32 +345,32 @@ def get_custom_css():
     }
     
     .face-thumbnail {
-        width: 50px;
-        height: 50px;
+        width: 60px;
+        height: 60px;
         border-radius: 50%;
         object-fit: cover;
-        margin-bottom: 8px;
+        margin-bottom: 10px;
     }
     
     .no-face {
-        width: 50px;
-        height: 50px;
+        width: 60px;
+        height: 60px;
         background: var(--background-fill-primary);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
-        margin: 0 auto 8px;
+        margin: 0 auto 10px;
         color: var(--body-text-color);
-        font-size: 0.7em;
+        font-size: 0.8em;
         opacity: 0.7;
     }
     
     .face-source {
-        font-size: 0.8em;
+        font-size: 0.9em !important;
         color: var(--body-text-color);
         opacity: 0.8;
-        margin-top: 5px;
+        margin-top: 8px;
     }
     
     /* Matching table - NEW STYLING */
@@ -395,26 +384,26 @@ def get_custom_css():
     .matches-table table {
         width: 100%;
         border-collapse: collapse;
-        margin-top: 4px;
-        font-size: 0.9em;
-        min-width: 500px;
+        margin-top: 8px;
+        font-size: 1em !important;
+        min-width: 550px;
     }
     
     .matches-table th {
         background: var(--background-fill-secondary);
         color: var(--body-text-color);
-        padding: 4px 2px;
+        padding: 12px 8px !important;
         text-align: center;
-        font-size: 0.85em;
-        font-weight: 600;
+        font-size: 1em !important;
+        font-weight: 700;
         border-bottom: 2px solid var(--border-color-primary);
     }
     
     .matches-table td {
-        padding: 4px 2px;
+        padding: 10px 8px !important;
         border-bottom: 1px solid var(--border-color-primary);
         text-align: center;
-        font-size: 0.8em;
+        font-size: 0.95em !important;
         color: var(--body-text-color);
     }
     
@@ -431,33 +420,35 @@ def get_custom_css():
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 1px;
+        gap: 5px;
     }
     
     .table-face-thumbnail {
-        width: 60px;
-        height: 60px;
+        width: 70px;
+        height: 70px;
         border-radius: 50%;
         object-fit: cover;
         border: 2px solid var(--border-color-primary);
     }
     
     .face-label {
-        font-size: 0.75em;
+        font-size: 0.9em !important;
         color: var(--body-text-color);
         opacity: 1;
+        font-weight: 600;
     }
     
     .similarity-score {
-        font-weight: 600;
+        font-weight: 700;
         color: var(--body-text-color);
+        font-size: 1.05em !important;
     }
     
     .result-text {
-        padding: 4px 2px;
-        border-radius: 10px;
-        font-size: 1.25em;
-        font-weight: 600;
+        padding: 8px 12px !important;
+        border-radius: 12px;
+        font-size: 1.1em !important;
+        font-weight: 700;
         text-transform: capitalize;
     }
     
@@ -473,21 +464,23 @@ def get_custom_css():
     
     .no-results {
         text-align: center;
-        padding: 30px;
+        padding: 40px;
         color: var(--body-text-color);
         opacity: 0.7;
         font-style: italic;
+        font-size: 1.1em !important;
     }
     
     /* Error messages */
     .error-message {
         background: var(--background-fill-secondary);
         color: var(--body-text-color);
-        padding: 15px;
-        border-radius: 6px;
+        padding: 20px;
+        border-radius: 8px;
         text-align: center;
         width: 100%;
         opacity: 0.9;
+        font-size: 1.1em !important;
     }
     
     /* Input images styling */
@@ -495,7 +488,7 @@ def get_custom_css():
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
-        height: 350px !important;
+        height: 320px !important;
     }
     
     .gradio-image .wrap {
@@ -509,61 +502,62 @@ def get_custom_css():
     /* Examples styling */
     .examples-container {
         background: var(--background-fill-secondary);
-        padding: 12px;
-        border-radius: 6px;
-        margin-top: 12px;
+        padding: 15px;
+        border-radius: 8px;
+        margin-top: 15px;
         width: 100%;
         text-align: center;
+        font-size: 1em !important;
     }
-    
-    /* Footer */
-    .footer {
-        text-align: center;
-        margin-top: 20px;
-        padding: 15px;
-        border-radius: 6px;
-        background: var(--background-fill-secondary);
-    }
-    
-    .footer p {
-        margin: 5px 0;
-        color: var(--body-text-color);
-    }
-    
-    .footer a {
-        color: var(--body-text-color);
-        text-decoration: none;
-        opacity: 0.8;
-    }
-    
-    .footer a:hover {
-        opacity: 1;
-        text-decoration: underline;
-    }
-    
+        
     /* Section titles */
     .section-title {
-        margin-bottom: 12px !important;
+        margin-bottom: 15px !important;
         text-align: center;
         color: var(--body-text-color);
-        font-weight: 600;
+        font-weight: 700;
+        font-size: 1.4em !important;
     }
     
     /* Ensure proper text visibility in dark mode */
     .gradio-markdown {
         color: var(--body-text-color) !important;
+        font-size: 1.05em !important;
+        line-height: 1.5 !important;
     }
     
     .gradio-markdown h3 {
         color: var(--body-text-color) !important;
+        font-size: 1.3em !important;
     }
     
     .gradio-markdown p {
         color: var(--body-text-color) !important;
+        font-size: 1.05em !important;
+        line-height: 1.5 !important;
     }
     
     .gradio-markdown li {
         color: var(--body-text-color) !important;
+        font-size: 1.05em !important;
+        line-height: 1.5 !important;
+        margin-bottom: 8px !important;
+    }
+    
+    /* Label styling */
+    .gr-label {
+        font-size: 1.1em !important;
+        font-weight: 600 !important;
+    }
+    
+    /* Accordion styling */
+    .gr-accordion {
+        font-size: 1.1em !important;
+    }
+    
+    /* Examples text */
+    .gr-examples {
+        font-size: 1em !important;
     }
     """
 
@@ -664,7 +658,7 @@ with gr.Blocks(
                     with gr.Column(scale=1, elem_classes="upload-image-col"):
                         im_match_in1 = gr.Image(
                             type='filepath', 
-                            height=350,
+                            height=320,
                             label="First Image",
                             show_download_button=False
                         )
@@ -673,7 +667,7 @@ with gr.Blocks(
                     with gr.Column(scale=1, elem_classes="upload-image-col"):
                         im_match_in2 = gr.Image(
                             type='filepath', 
-                            height=350,
+                            height=320,
                             label="Second Image",
                             show_download_button=False
                         )
@@ -712,7 +706,7 @@ with gr.Blocks(
             with gr.Column(scale=0.4, elem_classes="result-section"):
                 gr.Markdown("### 2. Comparison Results", elem_classes="section-title")
                 txt_compare_out = gr.HTML(
-                    value="<div style='text-align: center; padding: 40px;'>Results will appear here after comparison</div>"
+                    value="<div style='text-align: center; padding: 40px; font-size: 1.1em;'>Results will appear here after comparison</div>"
                 )
     
     # Connect the function
@@ -728,9 +722,6 @@ with gr.Blocks(
             <img src="https://api.visitorbadge.io/api/combined?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FMiniAiLive%2FFaceRecognition-LivenessDetection-Demo&label=VISITORS&labelColor=%2337d67a&countColor=%23ff8a65&style=plastic&labelStyle=none" />
         </a>
     """)
-    
-    # Footer
-    gr.HTML(create_footer())
 
 if __name__ == "__main__":
     demo.launch(