some updates

frontend/src/app/components/analyzer/analyzer.component.ts

@@ -161,12 +161,11 @@ export class AnalyzerComponent implements OnInit {
         let x1: number, y1: number, x2: number, y2: number;
 
         if (this.inferenceService.mode() === 'api') {
-          // API returns absolute pixels (e.g. 450 on a 640px base, but relative to original)
-          // We need to scale them to the current canvas display size
-          [x1, y1, x2, y2] = det.box.map((v: number) => v * displayScale);
+          x1 = det.box[0] * canvas.width;
+          y1 = det.box[1] * canvas.height;
+          x2 = det.box[2] * canvas.width;
+          y2 = det.box[3] * canvas.height;
         } else {
-          // Local mode often uses normalized coordinates or absolute pixels depending on parser
-          // Assuming the InferenceService already normalized or scaled these for us
           [x1, y1, x2, y2] = det.box.map((v: number) => v * displayScale);
         }
         

frontend/src/app/components/history/history.component.html

@@ -2,7 +2,7 @@
   <div class="history-header glass-panel">
     <h1>Vault & History</h1>
     <p>View previous detections and industrial reports.</p>
-    
+
     <div class="vault-tabs">
       <button [class.active]="viewMode === 'local'" (click)="switchTab('local')" class="tab-btn">
         <span class="icon">💻</span> Browser Cache
@@ -25,10 +25,9 @@
   </div>
 
   <div *ngIf="!loading && currentHistory.length > 0" class="history-list">
-    <div *ngFor="let record of currentHistory" 
-         class="history-card glass-panel"
-         [class.expanded]="isExpanded(record.timestamp, record.filename, record.archive_id)">
-      
+    <div *ngFor="let record of currentHistory" class="history-card glass-panel"
+      [class.expanded]="isExpanded(record.timestamp, record.filename, record.archive_id)">
+
       <div class="card-header" (click)="toggleExpand(record.timestamp, record.filename, record.archive_id)">
         <div class="card-main-info">
           <span class="timestamp">{{ record.timestamp }}</span>
@@ -38,23 +37,23 @@
         <div class="summary-mini">
           <span *ngFor="let badge of getSummaryBadge(record.summary)" class="badge">{{ badge }}</span>
         </div>
-        <div class="expand-icon">{{ isExpanded(record.timestamp, record.filename, record.archive_id) ? '▾' : '▸' }}</div>
+        <div class="expand-icon">{{ isExpanded(record.timestamp, record.filename, record.archive_id) ? '▾' : '▸' }}
+        </div>
       </div>
 
       <div *ngIf="isExpanded(record.timestamp, record.filename, record.archive_id)" class="card-details">
         <hr>
         <div class="details-grid">
           <div class="preview-side">
-             <div *ngIf="record.imageData" class="image-wrapper">
-                <img [src]="record.imageData" alt="Analysis Preview">
-                <div *ngFor="let det of record.detections" 
-                     class="detection-box"
-                     [ngStyle]="getBoxStyles(det.box, record.dimensions)">
-                </div>
-             </div>
-             <div *ngIf="!record.imageData" class="no-image-preview">
-                <p>Cloud Archive: Metadata Only</p>
-             </div>
+            <div *ngIf="record.imageData" class="image-wrapper">
+              <img [src]="record.imageData" alt="Analysis Preview">
+              <div *ngFor="let det of record.detections" class="detection-box"
+                [ngStyle]="getBoxStyles(det.box, record)">
+              </div>
+            </div>
+            <div *ngIf="!record.imageData" class="no-image-preview">
+              <p>Cloud Archive: Metadata Only</p>
+            </div>
           </div>
           <div class="data-side">
             <h3>Industrial Metrics</h3>
@@ -69,4 +68,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

frontend/src/app/components/history/history.component.ts

@@ -40,13 +40,13 @@ export class HistoryComponent implements OnInit {
         this.remoteHistoryRecords = data.map(record => ({
           timestamp: new Date(record.created_at).toLocaleString(),
           filename: record.filename,
-          summary: JSON.stringify(record.industrial_summary),
+          summary: record.industrial_summary,
           inference_ms: record.inference_ms,
           engine: 'API AI',
           detections: record.detections,
           archive_id: record.archive_id,
+          isNormalized: true,
           // Remote records usually don't have base64 image data for privacy/storage reasons
-          // but they have the detection counts and metadata
           imageData: null 
         }));
         this.loading = false;
@@ -97,19 +97,26 @@ export class HistoryComponent implements OnInit {
     return this.expandedId === id;
   }
 
-  getBoxStyles(box: number[], dimensions: {width: number, height: number}): any {
-    if (!dimensions) return {};
-    
-    const left = (box[0] / dimensions.width) * 100;
-    const top = (box[1] / dimensions.height) * 100;
-    const width = ((box[2] - box[0]) / dimensions.width) * 100;
-    const height = ((box[3] - box[1]) / dimensions.height) * 100;
+  getBoxStyles(box: number[], record: any): any {
+    // If the record is from the API, coordinates are already 0.0-1.0
+    if (record.isNormalized) {
+      return {
+        'left': (box[0] * 100) + '%',
+        'top': (box[1] * 100) + '%',
+        'width': ((box[2] - box[0]) * 100) + '%',
+        'height': ((box[3] - box[1]) * 100) + '%'
+      };
+    }
 
+    // Fallback for local records or records with dimensions
+    const dims = record.original_dimensions || record.dimensions;
+    if (!dims) return {};
+    
     return {
-      'left.%': left,
-      'top.%': top,
-      'width.%': width,
-      'height.%': height
+      'left': (box[0] / dims.width * 100) + '%',
+      'top': (box[1] / dims.height * 100) + '%',
+      'width': ((box[2] - box[0]) / dims.width * 100) + '%',
+      'height': ((box[3] - box[1]) / dims.height * 100) + '%'
     };
   }
 }

frontend/src/app/core/services/inference.service.ts

@@ -75,11 +75,11 @@ export class InferenceService {
           confidence: det.confidence,
           class: det.class,
           color: this.getGradeColor(det.class),
-          isHealthAlert: det.is_health_alert
+          is_health_alert: det.is_health_alert
         }));
         
         this.detections.set(mappedDets);
-        this.summary.set(response.industrial_summary);
+        this.summary.set({ ...response.industrial_summary }); 
         
         return mappedDets;
       }),

frontend/src/app/services/api.service.ts

@@ -6,7 +6,7 @@ import { Observable } from 'rxjs';
   providedIn: 'root'
 })
 export class ApiService {
-  private apiUrl = 'http://localhost:8000';
+  private apiUrl = 'http://localhost:3000';
 
   constructor(private http: HttpClient) { }