feat: enhance visual display of detected faces with improved layout and image rendering

web/interface.py

@@ -131,6 +131,12 @@ class WebInterface:
             border-radius: 8px;
             margin-bottom: 24px;
             border: 1px solid #4a4a4a;
+            display: flex;
+            align-items: flex-start;
+            gap: 20px;
+        }
+        .face-info-content {
+            flex: 1;
         }
         .face-info h3 {
             color: #ffffff;
@@ -250,12 +256,20 @@ class WebInterface:
             face_confidence = face_result['confidence']
             performers = face_result['performers']
             
+            # Create base64 data URL for the detected face image
+            face_image_b64 = f"data:image/jpeg;base64,{face_result['image']}"
+            
             html_parts.append(f"""
             <div class="performer-card">
                 <div class="face-info">
-                    <h3>Face {i+1}</h3>
-                    <p><strong>Detection Confidence:</strong> {face_confidence:.1%}</p>
-                    <p><strong>Matches Found:</strong> {len(performers)}</p>
+                    <div class="detected-face">
+                        <img src="{face_image_b64}" alt="Detected Face {i+1}" style="width: 120px; height: 120px; border-radius: 12px; object-fit: cover; border: 2px solid #569cd6; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
+                    </div>
+                    <div class="face-info-content">
+                        <h3>Face {i+1}</h3>
+                        <p><strong>Detection Confidence:</strong> {face_confidence:.1%}</p>
+                        <p><strong>Matches Found:</strong> {len(performers)}</p>
+                    </div>
                 </div>
             """)
             
@@ -368,26 +382,16 @@ class WebInterface:
                         label="Performer Information",
                         value="<p>Upload an image and click search to see results.</p>"
                     )
-                    face_gallery = gr.Gallery(
-                        label="Detected Faces",
-                        show_label=True,
-                        elem_id="face-gallery",
-                        columns=4,
-                        rows=2,
-                        height=300,
-                        object_fit="contain",
-                        allow_preview=True
-                    )
 
             def visual_search_wrapper(img, threshold, results):
                 """Wrapper that returns only visual components"""
                 json_results, gallery_images, html_content = self.multiple_image_search_with_visual(img, threshold, results)
-                return html_content, gallery_images
+                return html_content
 
             search_btn.click(
                 fn=visual_search_wrapper,
                 inputs=[img_input, threshold, results_count],
-                outputs=[performer_info, face_gallery],
+                outputs=[performer_info],
                 api_name="multiple_image_search_with_visual"
             )