.

api/routers/generate.py

@@ -76,25 +76,33 @@ async def get_image(filename: str):
     return FileResponse(filepath)
 
 
+IMAGE_CACHE_HEADERS = {"Cache-Control": "public, max-age=31536000, immutable"}
+
+
 @router.get("/serve-image")
 async def serve_image(filename: Optional[str] = None):
     """
     Proxy endpoint for generated images: serve from local disk or fetch from R2.
     Use this when the client cannot reach R2 (e.g. net::ERR_TUNNEL_CONNECTION_FAILED).
     No auth so gallery and public views can load images.
+    Responses are cached by the browser for 1 year so repeat visits don't re-download.
     """
     if not filename or ".." in filename or "/" in filename or "\\" in filename:
         raise HTTPException(status_code=400, detail="Invalid filename")
     filepath = os.path.join(settings.output_dir, filename)
     if os.path.exists(filepath):
-        return FileResponse(filepath)
+        return FileResponse(filepath, headers=IMAGE_CACHE_HEADERS)
     try:
         from services.r2_storage import get_r2_storage
         r2 = get_r2_storage()
         if r2:
             data = r2.get_object_bytes(filename)
             if data:
-                return FastAPIResponse(content=data, media_type="image/png")
+                return FastAPIResponse(
+                    content=data,
+                    media_type="image/png",
+                    headers=IMAGE_CACHE_HEADERS,
+                )
     except Exception:
         pass
     raise HTTPException(status_code=404, detail="Image not found")

frontend/app/page.tsx

@@ -8,7 +8,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
 import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
 import { getDbStats, listAds } from "@/lib/api/endpoints";
-import { formatRelativeDate, formatNiche, getImageUrl, getImageUrlFallback } from "@/lib/utils/formatters";
+import { formatRelativeDate, formatNiche, getImageUrlFallback, isUnoptimizedImageUrl } from "@/lib/utils/formatters";
 import { Home, Sparkles, Grid, TrendingUp, Database } from "lucide-react";
 import { useGalleryStore } from "@/store/galleryStore";
 import type { DbStatsResponse, AdCreativeDB } from "@/types/api";
@@ -63,7 +63,7 @@ const DashboardAdCard = memo(function DashboardAdCard({
                   onError={handleImageError}
                   loading="lazy"
                   sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-                  unoptimized={imageSrc.startsWith('http://') || imageSrc.includes('r2.cloudflarestorage.com') || imageSrc.includes('replicate.delivery') || imageSrc.includes('/serve-image') || imageSrc.includes('/images/')}
+                  unoptimized={isUnoptimizedImageUrl(imageSrc)}
                 />
               ) : (
                 <div className="w-full h-full flex items-center justify-center">
@@ -283,14 +283,13 @@ export default function Dashboard() {
             ) : (
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {recentAds.map((ad, index) => {
-                  const { primary, fallback } = getImageUrlFallback(ad.image_url, ad.image_filename, ad.r2_url);
-                  const initialSrc = primary || fallback;
+                  const { fallback, initialUrl } = getImageUrlFallback(ad.image_url, ad.image_filename, ad.r2_url);
 
                   return (
                     <DashboardAdCard
                       key={ad.id}
                       ad={ad}
-                      initialImageSrc={initialSrc}
+                      initialImageSrc={initialUrl}
                       fallback={fallback}
                       index={index}
                     />

frontend/components/gallery/AdCard.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import React, { useState, memo } from "react";
+import React, { useState, useEffect, memo } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { Card, CardContent } from "@/components/ui/Card";
-import { formatRelativeDate, formatNiche, getImageUrl, getImageUrlFallback, truncateText } from "@/lib/utils/formatters";
+import { formatRelativeDate, formatNiche, getImageUrlFallback, isUnoptimizedImageUrl } from "@/lib/utils/formatters";
 import { CheckSquare, Square } from "lucide-react";
 import type { AdCreativeDB } from "@/types/api";
 
@@ -28,10 +28,15 @@ export const AdCard: React.FC<AdCardProps> = memo(({
   onSelect,
   hasAnySelection = false,
 }) => {
-  const { primary, fallback } = getImageUrlFallback(ad.image_url, ad.image_filename, ad.r2_url);
-  const [imageSrc, setImageSrc] = useState<string | null>(primary || fallback);
+  const { primary, fallback, initialUrl } = getImageUrlFallback(ad.image_url, ad.image_filename, ad.r2_url);
+  const [imageSrc, setImageSrc] = useState<string | null>(initialUrl);
   const [imageError, setImageError] = useState(false);
 
+  useEffect(() => {
+    setImageSrc(initialUrl);
+    setImageError(false);
+  }, [ad.id, ad.image_url, ad.image_filename, ad.r2_url, initialUrl]);
+
   const handleImageError = () => {
     // Try fallback if primary failed
     if (!imageError && fallback && imageSrc === primary) {
@@ -64,7 +69,7 @@ export const AdCard: React.FC<AdCardProps> = memo(({
                   onError={handleImageError}
                   loading="lazy"
                   sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-                  unoptimized={imageSrc.startsWith('http://') || imageSrc.includes('r2.cloudflarestorage.com') || imageSrc.includes('replicate.delivery') || imageSrc.includes('/serve-image') || imageSrc.includes('/images/')}
+                  unoptimized={isUnoptimizedImageUrl(imageSrc)}
                 />
               ) : (
                 <div className="w-full h-full flex items-center justify-center">
@@ -135,12 +140,13 @@ export const AdCard: React.FC<AdCardProps> = memo(({
     </Card>
   );
 }, (prevProps, nextProps) => {
-  // Only re-render if ad data or selection state changes
   return (
     prevProps.ad.id === nextProps.ad.id &&
     prevProps.isSelected === nextProps.isSelected &&
     prevProps.hasAnySelection === nextProps.hasAnySelection &&
-    prevProps.ad.image_url === nextProps.ad.image_url
+    prevProps.ad.image_url === nextProps.ad.image_url &&
+    prevProps.ad.image_filename === nextProps.ad.image_filename &&
+    prevProps.ad.r2_url === nextProps.ad.r2_url
   );
 });
 

frontend/lib/utils/formatters.ts

@@ -98,6 +98,14 @@ function getApiBase(): string {
 const isAbsoluteUrl = (url: string) =>
   typeof url === "string" && (url.startsWith("http://") || url.startsWith("https://"));
 
+/** Use when passing URL to next/image: skip Next.js optimization for external or backend-proxy URLs. */
+export const isUnoptimizedImageUrl = (url: string): boolean =>
+  url.startsWith("http://") ||
+  url.includes("r2.cloudflarestorage.com") ||
+  url.includes("replicate.delivery") ||
+  url.includes("/serve-image") ||
+  url.includes("/images/");
+
 /**
  * Resolve display URL for an ad image. Prefers R2 URL when available (CDN/public),
  * then absolute image_url, then local /images/{filename} or relative image_url.
@@ -117,13 +125,13 @@ export const getImageUrl = (
 
 /**
  * Primary = R2 URL or absolute image_url (for display). Fallback = backend proxy (serve-image) or local /images.
- * Use primary in <img src>, then onError switch to fallback. Proxy fetches from R2 server-side when the client cannot reach R2 (e.g. ERR_TUNNEL_CONNECTION_FAILED).
+ * initialUrl = URL to try first; on environments where R2 often fails (e.g. HF Space), uses proxy first to avoid double request.
  */
 export const getImageUrlFallback = (
   imageUrl: string | null | undefined,
   filename: string | null | undefined,
   r2Url?: string | null
-): { primary: string | null; fallback: string | null } => {
+): { primary: string | null; fallback: string | null; initialUrl: string | null } => {
   const apiBase = getApiBase();
   const primary =
     (r2Url && isAbsoluteUrl(r2Url)) ? r2Url
@@ -138,5 +146,8 @@ export const getImageUrlFallback = (
       ? `${apiBase}${imageUrl}`
       : null;
   const fallback = fromProxy ?? fromFilename ?? fromRelative ?? null;
-  return { primary, fallback };
+  const proxyFirst =
+    typeof window !== "undefined" && window.location.hostname.endsWith(".hf.space");
+  const initialUrl = proxyFirst && fromProxy ? fromProxy : (primary || fallback);
+  return { primary, fallback, initialUrl };
 };