Fix image display in HF Space iframe: samesite=none cookie + global image cache

HF Space runs the app in an iframe at hf.space embedded in huggingface.co.
These have different eTLD+1, so samesite=lax cookies are not sent on
cross-site requests — each API call arrived with a fresh session, meaning
the image uploaded in session A was never found by the subsequent
GET /api/image/{id} request (session B) → 404 → placeholder stayed visible.

Fix:
- Set samesite=none + secure=True when POLYSCRIPTOR_PROFILE=hf_space_demo
- Add global_image_cache as cross-session fallback so image retrieval
succeeds even if the session cookie is lost

Also restores multi-target drop zone (viewerScroll + viewerPlaceholder)
as secondary UX improvement from the earlier working version.

web/polyscriptor_server.py

@@ -244,6 +244,15 @@ _SESSION_TTL_SECONDS = 7200
 # port. Default is unchanged for existing deployments.
 _SESSION_COOKIE = os.environ.get("POLYSCRIPTOR_SESSION_COOKIE", "polyscriptor_session")
 
+# HuggingFace Space: app runs in an iframe (hf.space) embedded in huggingface.co.
+# These have different eTLD+1, so samesite=lax cookies are NOT sent on cross-site requests.
+# We need samesite=none + secure=True so the session cookie survives across all API calls.
+_HF_SPACE = os.environ.get("POLYSCRIPTOR_PROFILE", "").strip().lower() == "hf_space_demo"
+
+# Cross-session image cache — allows GET /api/image/{id} to succeed even if
+# the session cookie was lost (e.g. HF Space iframe cross-site requests).
+global_image_cache: Dict[str, dict] = {}
+
 
 # ---------------------------------------------------------------------------
 # Per-user sessions — Phase 1 of multi-user refactoring
@@ -320,13 +329,17 @@ async def session_middleware(request: Request, call_next):
     response = await call_next(request)
 
     if created or session_id != session.session_id:
-        response.set_cookie(
+        cookie_kwargs: dict = dict(
             key=_SESSION_COOKIE,
             value=session.session_id,
             httponly=True,
-            samesite="lax",
             max_age=_SESSION_TTL_SECONDS,
         )
+        if _HF_SPACE:
+            cookie_kwargs.update({"samesite": "none", "secure": True})
+        else:
+            cookie_kwargs["samesite"] = "lax"
+        response.set_cookie(**cookie_kwargs)
     return response
 
 
@@ -1331,7 +1344,7 @@ async def unload_engine(request: Request):
 def _register_image(session: UserSession, pil_image: Image.Image, filename: str, save_path: Path) -> str:
     """Store a PIL image in the session's cache and return its image_id."""
     image_id = str(uuid.uuid4())
-    session.image_cache[image_id] = {
+    img_data = {
         "path": save_path,
         "xml_path": None,
         "pil_image": pil_image,
@@ -1343,6 +1356,8 @@ def _register_image(session: UserSession, pil_image: Image.Image, filename: str,
         "result_slots": {},
         "primary_result_slot": None,
     }
+    session.image_cache[image_id] = img_data
+    global_image_cache[image_id] = img_data
     return image_id
 
 
@@ -1602,9 +1617,12 @@ async def upload_xml(request: Request, image_id: str, file: UploadFile = File(..
 @app.get("/api/image/{image_id}")
 async def get_image(request: Request, image_id: str):
     session = _get_session(request)
-    if image_id not in session.image_cache:
+    img_data = session.image_cache.get(image_id) or global_image_cache.get(image_id)
+    if img_data is None:
         raise HTTPException(404, "Image not found")
-    return FileResponse(str(session.image_cache[image_id]["path"]))
+    if image_id not in session.image_cache:
+        session.image_cache[image_id] = img_data
+    return FileResponse(str(img_data["path"]))
 
 
 @app.get("/api/image/{image_id}/info")

web/static/components/image-viewer.js

@@ -6,10 +6,32 @@ import { state, emit, on, api, fitZoom } from '../app.js';
 
 const $ = id => document.getElementById(id);
 
+const IMAGE_EXTENSIONS = new Set(['.jpg', '.jpeg', '.png', '.tif', '.tiff', '.bmp', '.gif', '.webp']);
+
+function extensionOf(file) {
+    const name = file?.name || '';
+    const dot = name.lastIndexOf('.');
+    return dot >= 0 ? name.slice(dot).toLowerCase() : '';
+}
+
+function isImageOrPdf(file) {
+    const ext = extensionOf(file);
+    return file.type.startsWith('image/') || ext === '.pdf' || IMAGE_EXTENSIONS.has(ext);
+}
+
 export function initImageViewer() {
     const uploadArea = $('upload-area');
     const fileInput = $('file-input');
     const xmlInput = $('xml-input');
+    const viewerScroll = $('viewer-scroll');
+    const viewerPlaceholder = $('viewer-placeholder');
+
+    const handleDroppedFiles = files => {
+        const img = files.find(isImageOrPdf);
+        const xml = files.find(f => f.name.toLowerCase().endsWith('.xml'));
+        if (img) uploadFile(img);
+        if (xml) uploadXml(xml);  // queued after image upload sets imageId
+    };
 
     // Click to browse image
     uploadArea.addEventListener('click', () => fileInput.click());
@@ -19,24 +41,30 @@ export function initImageViewer() {
         if (fileInput.files.length > 0) uploadFile(fileInput.files[0]);
     });
 
-    // Drag & drop — accept image, PDF, and XML
-    uploadArea.addEventListener('dragover', e => {
-        e.preventDefault();
-        uploadArea.classList.add('dragover');
-    });
-    uploadArea.addEventListener('dragleave', () => {
-        uploadArea.classList.remove('dragover');
-    });
-    uploadArea.addEventListener('drop', e => {
-        e.preventDefault();
-        uploadArea.classList.remove('dragover');
-        const files = Array.from(e.dataTransfer.files);
-        const img = files.find(f =>
-            f.type.startsWith('image/') || f.name.toLowerCase().endsWith('.pdf'));
-        const xml = files.find(f => f.name.endsWith('.xml'));
-        if (img) uploadFile(img);
-        if (xml) uploadXml(xml);  // queued after image upload sets imageId
+    // Drag & drop — accept image, PDF, and XML dropped on the upload box OR the viewer area.
+    // Users naturally drop on the large center viewer, not just the small upload box.
+    const dropTargets = [uploadArea, viewerScroll, viewerPlaceholder].filter(Boolean);
+    dropTargets.forEach(target => {
+        target.addEventListener('dragover', e => {
+            e.preventDefault();
+            uploadArea.classList.add('dragover');
+            if (viewerPlaceholder && !state.imageId) viewerPlaceholder.classList.add('dragover');
+        });
+        target.addEventListener('dragleave', e => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                uploadArea.classList.remove('dragover');
+                viewerPlaceholder?.classList.remove('dragover');
+            }
+        });
+        target.addEventListener('drop', e => {
+            e.preventDefault();
+            uploadArea.classList.remove('dragover');
+            viewerPlaceholder?.classList.remove('dragover');
+            handleDroppedFiles(Array.from(e.dataTransfer.files));
+        });
     });
+    // Keep upload-area explicitly compatible with batch-panel's capture-phase handler
+    uploadArea.addEventListener('drop', e => { e.preventDefault(); });
 
     // XML file picker
     xmlInput.addEventListener('change', () => {