Restore image display on results page; show image on error page

- ui_routes.py ui_verify_result: encode the saved image from disk as a
  base64 data URL and pass it to results.html (was hardcoded None since
  the async queue was introduced)
- ui_routes.py: add GET /ui/verify/image/{job_id} endpoint that serves
  the raw image bytes directly from the shared volume
- verify_pending.html: add an <img> element pointing at the new image
  endpoint, revealed in onFailed() so the user can see which label
  failed alongside the error detail and Retry button

Author: Project Team

app/templates/verify_pending.html

@@ -51,6 +51,15 @@
         <i id="resultIcon" class="bi" style="font-size:4rem;"></i>
     </div>
 
+    <!-- Uploaded image (shown on failure so the user knows which image failed) -->
+    <div id="imageArea" style="display:none;" class="my-3">
+        <img id="labelImage"
+             src="/ui/verify/image/{{ job_id }}"
+             alt="Uploaded label"
+             class="img-fluid rounded"
+             style="max-height:220px; max-width:100%;">
+    </div>
+
     <h4 class="mb-2" id="statusHeading">Verifying Label</h4>
     <p class="text-muted mb-1" id="statusMessage">Your label is queued for verification.</p>
     <p class="small text-muted" id="queueInfo"></p>
@@ -95,6 +104,7 @@ <h4 class="mb-2" id="statusHeading">Verifying Label</h4>
     const elQueue    = document.getElementById('queueInfo');
     const elSpinner  = document.getElementById('spinnerArea');
     const elIcon     = document.getElementById('iconArea');
+    const elImageArea = document.getElementById('imageArea');
     const elResultIcon = document.getElementById('resultIcon');
     const elDots     = [document.getElementById('dot1'),
                         document.getElementById('dot2'),
@@ -171,6 +181,7 @@ <h4 class="mb-2" id="statusHeading">Verifying Label</h4>
         stopPolling();
         elSpinner.style.display = 'none';
         elIcon.style.display = 'block';
+        elImageArea.style.display = 'block';
         elResultIcon.className = 'bi bi-exclamation-octagon-fill text-danger';
         elHeading.textContent = 'Verification Failed';
         elMessage.textContent = `All ${data.max_attempts} attempt(s) exhausted.`;

app/ui_routes.py

@@ -488,7 +488,18 @@ async def ui_verify_result(
         )
 
     result = job["result"]
-    filename = Path(job["image_path"]).name
+    image_path = Path(job["image_path"])
+    filename = image_path.name
+
+    # Re-encode the saved image as a base64 data URL for display in the template
+    image_data = None
+    try:
+        raw = image_path.read_bytes()
+        suffix = image_path.suffix.lower()
+        mime = "image/png" if suffix == ".png" else "image/jpeg"
+        image_data = f"data:{mime};base64,{base64.b64encode(raw).decode()}"
+    except Exception as e:
+        logger.warning(f"Could not encode image for results page: {e}")
 
     return templates.TemplateResponse(
         "results.html",
@@ -497,7 +508,7 @@ async def ui_verify_result(
             "username": username,
             "result": result,
             "filename": filename,
-            "image_data": None,  # Image file is on disk; we don't re-encode it here
+            "image_data": image_data,
         }
     )
 
@@ -552,6 +563,32 @@ async def ui_verify_retry(
     )
 
 
+@router.get("/ui/verify/image/{job_id}")
+async def ui_verify_image(
+    request: Request,
+    job_id: str,
+    username: str = Depends(get_current_user_ui)
+):
+    """
+    Serve the uploaded image for a verify job directly from the shared volume.
+    Used by both the pending/error page and the results page.
+    """
+    from api import verify_queue
+    from fastapi.responses import Response
+
+    job = verify_queue.get(job_id)
+    if job is None:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Job not found")
+
+    image_path = Path(job["image_path"])
+    if not image_path.exists():
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Image not found")
+
+    suffix = image_path.suffix.lower()
+    media_type = "image/png" if suffix == ".png" else "image/jpeg"
+    return Response(content=image_path.read_bytes(), media_type=media_type)
+
+
 @router.get("/ui/health", response_class=HTMLResponse)
 async def ui_health(request: Request):
     """