feat: YOLO人体检测 + 三方法人员识别 + 前端人物序号显示

web/static/app.js

@@ -184,9 +184,28 @@ function renderImages(images) {
         var status = img.analyzed ? 'Analyzed' : 'Unanalyzed';
         var events = img.events_summary || 'No events';
         
+        // Check for person indices in events
+        var personIndices = [];
+        if (img.events && img.events.length > 0) {
+            img.events.forEach(function(event) {
+                var match = event.description.match(/#(\d+)/g);
+                if (match) {
+                    match.forEach(function(m) {
+                        if (personIndices.indexOf(m) === -1) {
+                            personIndices.push(m);
+                        }
+                    });
+                }
+            });
+        }
+        
+        var indicesDisplay = personIndices.length > 0 ? 
+            '<span class="image-person-indices">' + personIndices.slice(0, 3).join(' ') + '</span>' : '';
+        
         item.innerHTML = '<span class="image-number">#' + img.id + '</span>' +
             '<span class="image-time">' + time + '</span>' +
             '<span class="image-status">' + status + '</span>' +
+            indicesDisplay +
             '<span class="image-events-summary">' + events + '</span>';
         
         list.appendChild(item);
@@ -226,7 +245,19 @@ function openImageModal(imageId) {
                 if (localEvents.length > 0) {
                     var localSection = document.createElement('div');
                     localSection.className = 'modal-events-section';
-                    localSection.innerHTML = '<h4 class="section-title local">Local Analysis (' + localEvents.length + ') </h4>';
+                    
+                    // 显示人员序号
+                    var personIndices = [];
+                    localEvents.forEach(function(event) {
+                        if (event.person_index) {
+                            personIndices.push('#' + event.person_index);
+                        }
+                    });
+                    
+                    var indicesDisplay = personIndices.length > 0 ? 
+                        ' <span class="person-indices">[' + personIndices.join(', ') + ']</span>' : '';
+                    
+                    localSection.innerHTML = '<h4 class="section-title local">Local Analysis (' + localEvents.length + ')' + indicesDisplay + '</h4>';
                     
                     localEvents.forEach(function(event) {
                         var div = document.createElement('div');

web/static/style.css

@@ -255,6 +255,21 @@ button {
     flex: 1;
 }
 
+.image-person-indices {
+    background: #667eea;
+    color: white;
+    padding: 2px 8px;
+    border-radius: 3px;
+    font-size: 12px;
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+.person-indices {
+    color: #667eea;
+    font-weight: bold;
+}
+
 /* 事件列表 */
 .events-list {
     max-height: 500px;