Feat: Pre-generate WebP thumbnails on upload for faster library load

- Add Pillow dependency and thumbnail.py with generate_thumbnail() — produces
  WebP ≤400px, preserves aspect ratio, never upscales, handles GIF frame 0
- Alembic migration 002 adds nullable thumbnail_key column to images table
- Upload route generates thumbnail via asyncio.to_thread (non-blocking),
  stores at {hash}-thumb; failure is tolerated and upload succeeds with null key
- New GET /api/v1/images/{id}/thumbnail endpoint: serves WebP thumbnail or
  falls back to original for pre-feature images; ETag + immutable cache headers
- Delete route cleans up thumbnail storage object alongside original
- Library grid switches from /file to /thumbnail for all image src bindings
- 59 tests passing (46 existing + 13 new across unit, upload, serving, delete)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

api/app/models.py

@@ -23,6 +23,7 @@ class Image(Base):
     width: Mapped[int] = mapped_column(Integer, nullable=False)
     height: Mapped[int] = mapped_column(Integer, nullable=False)
     storage_key: Mapped[str] = mapped_column(String(64), nullable=False)
+    thumbnail_key: Mapped[str | None] = mapped_column(String(70), nullable=True, default=None)
     created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=_utcnow, nullable=False)
 
     image_tags: Mapped[list["ImageTag"]] = relationship(back_populates="image", cascade="all, delete-orphan")

api/app/repositories/image_repo.py

@@ -34,6 +34,7 @@ class ImageRepository:
         width: int,
         height: int,
         storage_key: str,
+        thumbnail_key: str | None = None,
     ) -> Image:
         image = Image(
             hash=hash_hex,
@@ -43,6 +44,7 @@ class ImageRepository:
             width=width,
             height=height,
             storage_key=storage_key,
+            thumbnail_key=thumbnail_key,
         )
         self._session.add(image)
         await self._session.flush()

api/app/routers/images.py

@@ -1,3 +1,5 @@
+import asyncio
+import logging
 import struct
 import uuid
 from typing import Any
@@ -12,9 +14,12 @@ from app.models import Image
 from app.repositories.image_repo import ImageRepository
 from app.repositories.tag_repo import TagRepository
 from app.storage.backend import StorageBackend
+from app.thumbnail import generate_thumbnail
 from app.utils import compute_sha256
 from app.validation import FileSizeError, MimeTypeError, validate_file_size, validate_mime_type
 
+logger = logging.getLogger(__name__)
+
 router = APIRouter(tags=["images"])
 
 
@@ -32,6 +37,7 @@ def _image_to_dict(image: Image, *, duplicate: bool | None = None) -> dict[str,
         "width": image.width,
         "height": image.height,
         "storage_key": image.storage_key,
+        "thumbnail_key": image.thumbnail_key,
         "created_at": image.created_at.isoformat(),
         "tags": image.tags,
     }
@@ -151,6 +157,14 @@ async def upload_image(
     width, height = _read_image_dimensions(data, mime_type)
     await storage.put(hash_hex, data, mime_type)
 
+    thumbnail_key: str | None = None
+    try:
+        thumb_bytes = await asyncio.to_thread(generate_thumbnail, data, mime_type)
+        await storage.put(f"{hash_hex}-thumb", thumb_bytes, "image/webp")
+        thumbnail_key = f"{hash_hex}-thumb"
+    except Exception:
+        logger.warning("Thumbnail generation failed for %s; upload will proceed without thumbnail", hash_hex)
+
     image = await image_repo.create(
         hash_hex=hash_hex,
         filename=file.filename or "upload",
@@ -159,6 +173,7 @@ async def upload_image(
         width=width,
         height=height,
         storage_key=hash_hex,
+        thumbnail_key=thumbnail_key,
     )
 
     if tag_names:
@@ -233,6 +248,38 @@ async def serve_image_file(
     )
 
 
+@router.get("/images/{image_id}/thumbnail")
+async def serve_image_thumbnail(
+    image_id: uuid.UUID,
+    db: AsyncSession = Depends(get_db),
+    storage: StorageBackend = Depends(get_storage),
+):
+    image_repo = ImageRepository(db)
+    image = await image_repo.get_by_id(image_id)
+    if not image:
+        raise HTTPException(
+            status_code=404,
+            detail={"detail": "Image not found", "code": "image_not_found"},
+        )
+    key = image.thumbnail_key or image.storage_key
+    media_type = "image/webp" if image.thumbnail_key else image.mime_type
+    try:
+        data = await storage.get(key)
+    except Exception:
+        raise HTTPException(
+            status_code=500,
+            detail={"detail": "Failed to retrieve image content", "code": "storage_error"},
+        ) from None
+    return Response(
+        content=data,
+        media_type=media_type,
+        headers={
+            "ETag": f'"{image.hash}"',
+            "Cache-Control": "public, max-age=31536000, immutable",
+        },
+    )
+
+
 @router.patch("/images/{image_id}/tags")
 async def update_image_tags(
     image_id: uuid.UUID,
@@ -276,6 +323,9 @@ async def delete_image(
             detail={"detail": "Image not found", "code": "image_not_found"},
         )
     storage_key = image.storage_key
+    thumbnail_key = image.thumbnail_key
     await image_repo.delete(image)
     await storage.delete(storage_key)
+    if thumbnail_key:
+        await storage.delete(thumbnail_key)
     return Response(status_code=204)

api/app/thumbnail.py

@@ -0,0 +1,16 @@
+import contextlib
+import io
+
+from PIL import Image
+
+
+def generate_thumbnail(data: bytes, mime_type: str) -> bytes:
+    img = Image.open(io.BytesIO(data))
+    with contextlib.suppress(EOFError):
+        img.seek(0)
+    if img.mode not in ("RGB", "RGBA"):
+        img = img.convert("RGBA" if img.mode == "P" and "transparency" in img.info else "RGB")
+    img.thumbnail((400, 400), Image.LANCZOS)
+    buf = io.BytesIO()
+    img.save(buf, format="WEBP", quality=80)
+    return buf.getvalue()