Enhance image regeneration process with preview and selection confirmation

- Added a preview_only option to the image regeneration API, allowing users to generate images without immediate database updates.
- Implemented a new ImageSelectionRequest model for confirming user selection between original and regenerated images.
- Updated the frontend RegenerationModal to include a comparison step, enabling users to choose their preferred image before saving.
- Enhanced API endpoints and types to support the new selection confirmation feature, ensuring a seamless user experience.

frontend/components/generation/RegenerationModal.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { X, RefreshCw, CheckCircle2, AlertCircle, Loader2, Sparkles, ChevronDown } from "lucide-react";
-import { regenerateImage, getImageModels } from "@/lib/api/endpoints";
+import { X, RefreshCw, CheckCircle2, AlertCircle, Loader2, Sparkles, ChevronDown, Check, ArrowLeft } from "lucide-react";
+import { regenerateImage, getImageModels, confirmImageSelection } from "@/lib/api/endpoints";
 import type { ImageRegenerateResponse, AdCreativeDB, ImageModel } from "@/types/api";
 import { ProgressBar } from "@/components/ui/ProgressBar";
 import { Button } from "@/components/ui/Button";
@@ -16,7 +16,7 @@ interface RegenerationModalProps {
   onSuccess?: (result: ImageRegenerateResponse) => void;
 }
 
-type RegenerationStep = "idle" | "input" | "regenerating" | "complete" | "error";
+type RegenerationStep = "idle" | "input" | "regenerating" | "compare" | "saving" | "complete" | "error";
 
 export const RegenerationModal: React.FC<RegenerationModalProps> = ({
   isOpen,
@@ -33,6 +33,8 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
   const [models, setModels] = useState<ImageModel[]>([]);
   const [defaultModel, setDefaultModel] = useState<string>("");
   const [loadingModels, setLoadingModels] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<"original" | "new" | null>(null);
+  const [savingSelection, setSavingSelection] = useState(false);
 
   useEffect(() => {
     if (isOpen) {
@@ -40,6 +42,7 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
       setProgress(0);
       setResult(null);
       setError(null);
+      setSelectedImage(null);
       // Load available models
       loadModels();
     } else {
@@ -49,6 +52,7 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
       setResult(null);
       setError(null);
       setSelectedModel(null);
+      setSelectedImage(null);
     }
   }, [isOpen]);
 
@@ -85,6 +89,7 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
     setProgress(0);
     setError(null);
     setResult(null);
+    setSelectedImage(null);
 
     try {
       // Simulate progress updates
@@ -97,18 +102,19 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
         });
       }, 400);
 
-      // Actually perform the regeneration
+      // Actually perform the regeneration (preview mode)
       const response = await regenerateImage({ 
         image_id: adId,
         image_model: selectedModel,
+        preview_only: true,
       });
 
       clearInterval(progressInterval);
       setProgress(100);
 
       if (response.status === "success") {
-        setStep("complete");
         setResult(response);
+        setStep("compare"); // Go to comparison step
       } else {
         setStep("error");
         setError(response.error || "Regeneration failed");
@@ -120,29 +126,38 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
     }
   };
 
-  const getStepLabel = () => {
-    switch (step) {
-      case "input":
-        return "Select Model";
-      case "regenerating":
-        return "Regenerating image...";
-      case "complete":
-        return "Regeneration complete!";
-      case "error":
-        return "Error occurred";
-      default:
-        return "Starting regeneration...";
-    }
-  };
+  const handleConfirmSelection = async () => {
+    if (!selectedImage || !result) return;
+
+    setSavingSelection(true);
+    setStep("saving");
+
+    try {
+      if (selectedImage === "new") {
+        // Save the new image
+        await confirmImageSelection({
+          image_id: adId,
+          selection: "new",
+          new_image_url: result.regenerated_image?.image_url,
+          new_r2_url: result.regenerated_image?.r2_url,
+          new_filename: result.regenerated_image?.filename,
+          new_model: result.regenerated_image?.model_used,
+          new_seed: result.regenerated_image?.seed_used,
+        });
+      } else {
+        // Keep the original
+        await confirmImageSelection({
+          image_id: adId,
+          selection: "original",
+        });
+      }
 
-  const getStepIcon = () => {
-    switch (step) {
-      case "complete":
-        return <CheckCircle2 className="h-6 w-6 text-green-500" />;
-      case "error":
-        return <AlertCircle className="h-6 w-6 text-red-500" />;
-      default:
-        return <Loader2 className="h-6 w-6 text-blue-500 animate-spin" />;
+      setStep("complete");
+    } catch (err: any) {
+      setStep("error");
+      setError(err.response?.data?.detail || err.message || "Failed to save selection");
+    } finally {
+      setSavingSelection(false);
     }
   };
 
@@ -166,7 +181,7 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
-      <div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+      <div className="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
         {/* Header */}
         <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 rounded-t-2xl z-10">
           <div className="flex items-center justify-between">
@@ -177,9 +192,12 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
               <div>
                 <h2 className="text-xl font-bold text-gray-900">Regenerate Image</h2>
                 <p className="text-sm text-gray-500">
-                  {step === "input" 
-                    ? "Generate a new version of your image" 
-                    : "Creating a new image with the same prompt"}
+                  {step === "input" && "Generate a new version of your image"}
+                  {step === "regenerating" && "Creating a new image..."}
+                  {step === "compare" && "Compare and choose your preferred image"}
+                  {step === "saving" && "Saving your selection..."}
+                  {step === "complete" && "Selection saved!"}
+                  {step === "error" && "Something went wrong"}
                 </p>
               </div>
             </div>
@@ -247,7 +265,7 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
                       <ul className="list-disc list-inside space-y-1 text-purple-700">
                         <li>Uses the same prompt as the original image</li>
                         <li>Generates a completely new image with a fresh seed</li>
-                        <li>Original image info is preserved in metadata</li>
+                        <li>You can compare both and choose which one to keep</li>
                       </ul>
                     </div>
                   </div>
@@ -260,9 +278,9 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
           {step === "regenerating" && (
             <div className="space-y-4">
               <div className="flex items-center gap-4">
-                {getStepIcon()}
+                <Loader2 className="h-6 w-6 text-blue-500 animate-spin" />
                 <div className="flex-1">
-                  <p className="font-semibold text-gray-900">{getStepLabel()}</p>
+                  <p className="font-semibold text-gray-900">Generating new image...</p>
                   <p className="text-sm text-gray-500 mb-2">Using {getModelDisplayName(selectedModel || defaultModel)}</p>
                   <ProgressBar progress={progress} showPercentage={true} className="mt-2" />
                 </div>
@@ -270,13 +288,113 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
             </div>
           )}
 
+          {/* Comparison Step */}
+          {step === "compare" && result && (
+            <div className="space-y-6">
+              <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
+                <p className="text-sm text-blue-800 font-medium">
+                  Click on the image you want to keep. Your selection will be saved when you confirm.
+                </p>
+              </div>
+
+              {/* Side by side comparison */}
+              <div className="grid grid-cols-2 gap-4">
+                {/* Original Image */}
+                <div 
+                  className={`relative cursor-pointer rounded-xl overflow-hidden border-4 transition-all ${
+                    selectedImage === "original" 
+                      ? "border-green-500 ring-4 ring-green-200" 
+                      : "border-gray-200 hover:border-gray-400"
+                  }`}
+                  onClick={() => setSelectedImage("original")}
+                >
+                  <div className="absolute top-3 left-3 z-10">
+                    <span className="bg-gray-900/80 text-white text-xs font-semibold px-3 py-1.5 rounded-full">
+                      Original
+                    </span>
+                  </div>
+                  {selectedImage === "original" && (
+                    <div className="absolute top-3 right-3 z-10">
+                      <div className="bg-green-500 text-white p-1.5 rounded-full">
+                        <Check className="h-4 w-4" />
+                      </div>
+                    </div>
+                  )}
+                  <img
+                    src={result.original_image_url || ad?.r2_url || ad?.image_url || ""}
+                    alt="Original"
+                    className="w-full aspect-square object-cover"
+                  />
+                  <div className="p-3 bg-gray-50">
+                    <p className="text-xs text-gray-500">Model</p>
+                    <p className="text-sm font-medium text-gray-900">
+                      {getModelDisplayName(ad?.image_model || "Unknown")}
+                    </p>
+                  </div>
+                </div>
+
+                {/* New Image */}
+                <div 
+                  className={`relative cursor-pointer rounded-xl overflow-hidden border-4 transition-all ${
+                    selectedImage === "new" 
+                      ? "border-green-500 ring-4 ring-green-200" 
+                      : "border-gray-200 hover:border-gray-400"
+                  }`}
+                  onClick={() => setSelectedImage("new")}
+                >
+                  <div className="absolute top-3 left-3 z-10">
+                    <span className="bg-purple-600 text-white text-xs font-semibold px-3 py-1.5 rounded-full">
+                      New
+                    </span>
+                  </div>
+                  {selectedImage === "new" && (
+                    <div className="absolute top-3 right-3 z-10">
+                      <div className="bg-green-500 text-white p-1.5 rounded-full">
+                        <Check className="h-4 w-4" />
+                      </div>
+                    </div>
+                  )}
+                  <img
+                    src={result.regenerated_image?.image_url || ""}
+                    alt="Regenerated"
+                    className="w-full aspect-square object-cover"
+                  />
+                  <div className="p-3 bg-purple-50">
+                    <p className="text-xs text-gray-500">Model</p>
+                    <p className="text-sm font-medium text-gray-900">
+                      {getModelDisplayName(result.regenerated_image?.model_used || "Unknown")}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Selection hint */}
+              {!selectedImage && (
+                <p className="text-center text-sm text-gray-500">
+                  Click on an image to select it
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Saving Step */}
+          {step === "saving" && (
+            <div className="flex flex-col items-center justify-center py-8">
+              <Loader2 className="h-10 w-10 text-purple-500 animate-spin mb-4" />
+              <p className="text-lg font-semibold text-gray-900">Saving your selection...</p>
+              <p className="text-sm text-gray-500">
+                {selectedImage === "new" ? "Updating to new image" : "Keeping original image"}
+              </p>
+            </div>
+          )}
+
           {/* Error State */}
           {step === "error" && (
             <div className="bg-red-50 border border-red-200 rounded-xl p-4">
               <div className="flex items-start gap-3">
                 <AlertCircle className="h-5 w-5 text-red-500 mt-0.5" />
                 <div className="flex-1">
-                  <h3 className="font-semibold text-red-900 mb-1">Regeneration Failed</h3>
+                  <h3 className="font-semibold text-red-900 mb-1">Something went wrong</h3>
                   <p className="text-sm text-red-700">{error}</p>
                 </div>
               </div>
@@ -284,78 +402,115 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
           )}
 
           {/* Success State */}
-          {step === "complete" && result && (
+          {step === "complete" && (
             <div className="space-y-4">
               <div className="bg-green-50 border border-green-200 rounded-xl p-4">
                 <div className="flex items-center gap-3">
-                  <CheckCircle2 className="h-5 w-5 text-green-500" />
+                  <CheckCircle2 className="h-6 w-6 text-green-500" />
                   <div>
-                    <h3 className="font-semibold text-green-900">Regeneration Complete!</h3>
-                    <p className="text-sm text-green-700">Your image has been regenerated successfully</p>
+                    <h3 className="font-semibold text-green-900">Selection Saved!</h3>
+                    <p className="text-sm text-green-700">
+                      {selectedImage === "new" 
+                        ? "Your ad has been updated with the new image." 
+                        : "The original image has been kept."}
+                    </p>
                   </div>
                 </div>
               </div>
 
-              {result.regenerated_image?.image_url && (
-                <div className="space-y-3">
-                  <h3 className="font-semibold text-gray-900">New Image</h3>
+              {/* Show the selected image */}
+              <div className="flex justify-center">
+                <div className="max-w-md">
                   <img
-                    src={result.regenerated_image.image_url}
-                    alt="Regenerated"
-                    className="w-full rounded-lg border border-gray-200"
+                    src={
+                      selectedImage === "new" 
+                        ? (result?.regenerated_image?.image_url || "")
+                        : (result?.original_image_url || ad?.r2_url || ad?.image_url || "")
+                    }
+                    alt="Selected"
+                    className="w-full rounded-xl border border-gray-200"
                   />
-                </div>
-              )}
-
-              {/* Show model used */}
-              {result.regenerated_image?.model_used && (
-                <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                  <p className="text-xs text-gray-500 mb-1">Model Used</p>
-                  <p className="font-medium text-gray-900">
-                    {getModelDisplayName(result.regenerated_image.model_used)}
+                  <p className="text-center text-sm text-gray-500 mt-2">
+                    {selectedImage === "new" ? "New image saved" : "Original image kept"}
                   </p>
                 </div>
-              )}
-
-              {result.original_preserved && (
-                <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-800">
-                  <p>The original image info has been preserved in the ad metadata. You can view it from the ad detail page.</p>
-                </div>
-              )}
+              </div>
             </div>
           )}
         </div>
 
         {/* Footer */}
         <div className="sticky bottom-0 bg-gray-50 border-t border-gray-200 px-6 py-4 rounded-b-2xl">
-          <div className="flex justify-end gap-3">
-            {step === "input" && (
-              <Button 
-                onClick={handleRegenerate} 
-                variant="primary"
-                disabled={!selectedModel || loadingModels}
+          <div className="flex justify-between gap-3">
+            {/* Left side buttons */}
+            <div>
+              {step === "compare" && (
+                <Button 
+                  onClick={() => {
+                    setStep("input");
+                    setResult(null);
+                    setSelectedImage(null);
+                  }} 
+                  variant="secondary"
+                >
+                  <ArrowLeft className="h-4 w-4 mr-2" />
+                  Generate Another
+                </Button>
+              )}
+            </div>
+
+            {/* Right side buttons */}
+            <div className="flex gap-3">
+              {step === "input" && (
+                <Button 
+                  onClick={handleRegenerate} 
+                  variant="primary"
+                  disabled={!selectedModel || loadingModels}
+                >
+                  <Sparkles className="h-4 w-4 mr-2" />
+                  Regenerate Image
+                </Button>
+              )}
+              
+              {step === "compare" && (
+                <Button 
+                  onClick={handleConfirmSelection} 
+                  variant="primary"
+                  disabled={!selectedImage || savingSelection}
+                >
+                  {savingSelection ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Saving...
+                    </>
+                  ) : (
+                    <>
+                      <Check className="h-4 w-4 mr-2" />
+                      Confirm Selection
+                    </>
+                  )}
+                </Button>
+              )}
+
+              {step === "error" && (
+                <Button onClick={() => setStep("input")} variant="primary">
+                  Try Again
+                </Button>
+              )}
+
+              <Button
+                onClick={() => {
+                  if (step === "complete" && result) {
+                    // Call onSuccess when user clicks "Done" to reload the ad
+                    onSuccess?.(result);
+                  }
+                  onClose();
+                }}
+                variant={step === "complete" ? "primary" : "secondary"}
               >
-                <Sparkles className="h-4 w-4 mr-2" />
-                Regenerate Image
+                {step === "complete" ? "Done" : "Close"}
               </Button>
-            )}
-            {step === "error" && (
-              <Button onClick={() => setStep("input")} variant="primary">
-                Try Again
-              </Button>
-            )}
-            <Button
-              onClick={() => {
-                if (step === "complete" && result) {
-                  // Call onSuccess when user clicks "Done" to reload the ad
-                  onSuccess?.(result);
-                }
-                onClose();
-              }}
-              variant={step === "complete" ? "primary" : "secondary"}
-            >
-              {step === "complete" ? "Done" : "Close"}
-            </Button>
+            </div>
           </div>
         </div>
       </div>

frontend/lib/api/endpoints.ts

@@ -181,8 +181,26 @@ export const correctImage = async (params: {
 export const regenerateImage = async (params: {
   image_id: string;
   image_model?: string | null;
+  preview_only?: boolean;
 }): Promise<ImageRegenerateResponse> => {
-  const response = await apiClient.post<ImageRegenerateResponse>("/api/regenerate", params);
+  const response = await apiClient.post<ImageRegenerateResponse>("/api/regenerate", {
+    ...params,
+    preview_only: params.preview_only ?? true, // Default to preview mode
+  });
+  return response.data;
+};
+
+// Confirm Image Selection after Regeneration
+export const confirmImageSelection = async (params: {
+  image_id: string;
+  selection: "new" | "original";
+  new_image_url?: string | null;
+  new_r2_url?: string | null;
+  new_filename?: string | null;
+  new_model?: string | null;
+  new_seed?: number | null;
+}): Promise<{ status: string; message: string; selection: string; new_image_url?: string }> => {
+  const response = await apiClient.post("/api/regenerate/confirm", params);
   return response.data;
 };
 

frontend/types/api.ts

@@ -334,15 +334,35 @@ export interface RegeneratedImageResult {
   r2_url?: string | null;
   model_used?: string | null;
   prompt_used?: string | null;
+  seed_used?: number | null;
 }
 
 export interface ImageRegenerateResponse {
   status: string;
   regenerated_image?: RegeneratedImageResult | null;
+  original_image_url?: string | null;
   original_preserved: boolean;
+  is_preview?: boolean;
   error?: string | null;
 }
 
+export interface ImageSelectionRequest {
+  image_id: string;
+  selection: "new" | "original";
+  new_image_url?: string | null;
+  new_r2_url?: string | null;
+  new_filename?: string | null;
+  new_model?: string | null;
+  new_seed?: number | null;
+}
+
+export interface ImageSelectionResponse {
+  status: string;
+  message: string;
+  selection: "new" | "original";
+  new_image_url?: string | null;
+}
+
 export interface ImageModel {
   key: string;
   id: string;

main.py

@@ -898,6 +898,10 @@ class ImageRegenerateRequest(BaseModel):
         default=None,
         description="Image generation model to use (e.g., 'z-image-turbo', 'nano-banana', 'nano-banana-pro', 'imagen-4-ultra', 'recraft-v3', 'ideogram-v3', 'photon', 'seedream-3'). If not provided, uses the original model."
     )
+    preview_only: bool = Field(
+        default=True,
+        description="If True, generates preview without updating database. User can then confirm selection."
+    )
 
 
 class RegeneratedImageResult(BaseModel):
@@ -908,16 +912,30 @@ class RegeneratedImageResult(BaseModel):
     r2_url: Optional[str] = None
     model_used: Optional[str] = None
     prompt_used: Optional[str] = None
+    seed_used: Optional[int] = None
 
 
 class ImageRegenerateResponse(BaseModel):
     """Response schema for image regeneration."""
     status: str
     regenerated_image: Optional[RegeneratedImageResult] = None
+    original_image_url: Optional[str] = None
     original_preserved: bool = Field(default=True, description="Whether original image info was preserved in metadata")
+    is_preview: bool = Field(default=False, description="Whether this is a preview (not yet saved)")
     error: Optional[str] = None
 
 
+class ImageSelectionRequest(BaseModel):
+    """Request schema for confirming image selection after regeneration."""
+    image_id: str = Field(description="ID of existing ad creative in database")
+    selection: str = Field(description="Which image to keep: 'new' or 'original'")
+    new_image_url: Optional[str] = Field(default=None, description="URL of the new image (required if selection='new')")
+    new_r2_url: Optional[str] = Field(default=None, description="R2 URL of the new image")
+    new_filename: Optional[str] = Field(default=None, description="Filename of the new image")
+    new_model: Optional[str] = Field(default=None, description="Model used for the new image")
+    new_seed: Optional[int] = Field(default=None, description="Seed used for the new image")
+
+
 @app.post("/api/regenerate", response_model=ImageRegenerateResponse)
 async def regenerate_image(
     request: ImageRegenerateRequest,
@@ -928,12 +946,13 @@ async def regenerate_image(
     
     Requires authentication. Users can only regenerate their own ads.
     
-    The service will:
-    1. Fetch the original ad and its image prompt from the database
-    2. Regenerate the image using the specified model (or original model if not provided)
-    3. Upload to R2 storage
-    4. Update the ad with the new image, preserving original image info in metadata
-    5. Return the regenerated image
+    If preview_only=True (default):
+    - Generates a new image and uploads to storage
+    - Returns both old and new image URLs for comparison
+    - Does NOT update the database yet
+    
+    If preview_only=False:
+    - Generates and immediately saves to database (legacy behavior)
     """
     api_start_time = time.time()
     api_logger.info("=" * 80)
@@ -941,6 +960,7 @@ async def regenerate_image(
     api_logger.info(f"User: {username}")
     api_logger.info(f"Image ID: {request.image_id}")
     api_logger.info(f"Requested model: {request.image_model or 'Use original'}")
+    api_logger.info(f"Preview only: {request.preview_only}")
     
     try:
         # Fetch ad from database (only if it belongs to current user)
@@ -1017,9 +1037,36 @@ async def regenerate_image(
                 f.write(image_bytes)
             api_logger.info(f"Saved locally: {local_path}")
         
-        # Prepare to update the ad
-        # Store old image data in metadata before updating
-        old_image_url = ad.get("r2_url") or ad.get("image_url")
+        # Get original image URL for comparison
+        original_image_url = ad.get("r2_url") or ad.get("image_url")
+        
+        # Determine the new image URL
+        new_image_url = r2_url or generated_url or f"/images/{filename}"
+        
+        # If preview_only, return without updating database
+        if request.preview_only:
+            total_api_time = time.time() - api_start_time
+            api_logger.info("=" * 80)
+            api_logger.info(f"✓ API: Regeneration preview completed in {total_api_time:.2f}s (not saved to DB)")
+            api_logger.info("=" * 80)
+            
+            return {
+                "status": "success",
+                "regenerated_image": {
+                    "filename": filename,
+                    "filepath": local_path,
+                    "image_url": new_image_url,
+                    "r2_url": r2_url,
+                    "model_used": model_used,
+                    "prompt_used": image_prompt,
+                    "seed_used": seed,
+                },
+                "original_image_url": original_image_url,
+                "original_preserved": True,
+                "is_preview": True,
+            }
+        
+        # If not preview_only, update the database immediately (legacy behavior)
         old_r2_url = ad.get("r2_url")
         old_image_filename = ad.get("image_filename")
         old_image_model = ad.get("image_model")
@@ -1032,8 +1079,8 @@ async def regenerate_image(
             "regeneration_seed": seed,
         }
         
-        if old_image_url:
-            regeneration_metadata["original_image_url"] = old_image_url
+        if original_image_url:
+            regeneration_metadata["original_image_url"] = original_image_url
         if old_r2_url:
             regeneration_metadata["original_r2_url"] = old_r2_url
         if old_image_filename:
@@ -1080,12 +1127,15 @@ async def regenerate_image(
             "regenerated_image": {
                 "filename": filename,
                 "filepath": local_path,
-                "image_url": r2_url or generated_url or f"/images/{filename}",
+                "image_url": new_image_url,
                 "r2_url": r2_url,
                 "model_used": model_used,
                 "prompt_used": image_prompt,
+                "seed_used": seed,
             },
+            "original_image_url": original_image_url,
             "original_preserved": True,
+            "is_preview": False,
         }
         
     except HTTPException:
@@ -1099,6 +1149,126 @@ async def regenerate_image(
         raise HTTPException(status_code=500, detail=str(e))
 
 
+@app.post("/api/regenerate/confirm")
+async def confirm_image_selection(
+    request: ImageSelectionRequest,
+    username: str = Depends(get_current_user)
+):
+    """
+    Confirm the user's image selection after regeneration preview.
+    
+    If selection='new': Updates the ad with the new regenerated image
+    If selection='original': Keeps the original image (no database update needed)
+    """
+    api_start_time = time.time()
+    api_logger.info("=" * 80)
+    api_logger.info(f"API: Image selection confirmation received")
+    api_logger.info(f"User: {username}")
+    api_logger.info(f"Image ID: {request.image_id}")
+    api_logger.info(f"Selection: {request.selection}")
+    
+    try:
+        # Validate selection value
+        if request.selection not in ["new", "original"]:
+            raise HTTPException(status_code=400, detail="Selection must be 'new' or 'original'")
+        
+        # Fetch ad from database (only if it belongs to current user)
+        ad = await db_service.get_ad_creative(request.image_id, username=username)
+        if not ad:
+            api_logger.error(f"Ad creative {request.image_id} not found or access denied for user {username}")
+            raise HTTPException(status_code=404, detail=f"Ad creative with ID {request.image_id} not found or access denied")
+        
+        if request.selection == "original":
+            # User chose to keep the original - no database update needed
+            api_logger.info("User chose to keep original image - no update needed")
+            total_api_time = time.time() - api_start_time
+            api_logger.info(f"✓ API: Selection confirmed (original kept) in {total_api_time:.2f}s")
+            return {
+                "status": "success",
+                "message": "Original image kept",
+                "selection": "original",
+            }
+        
+        # User chose the new image - update the database
+        if not request.new_image_url:
+            raise HTTPException(status_code=400, detail="new_image_url is required when selection='new'")
+        
+        # Get original image info before updating
+        original_image_url = ad.get("r2_url") or ad.get("image_url")
+        original_r2_url = ad.get("r2_url")
+        original_filename = ad.get("image_filename")
+        original_model = ad.get("image_model")
+        original_seed = ad.get("image_seed")
+        
+        # Build metadata with original image info
+        regeneration_metadata = {
+            "is_regenerated": True,
+            "regeneration_date": datetime.utcnow().isoformat() + "Z",
+            "regeneration_seed": request.new_seed,
+        }
+        
+        if original_image_url:
+            regeneration_metadata["original_image_url"] = original_image_url
+        if original_r2_url:
+            regeneration_metadata["original_r2_url"] = original_r2_url
+        if original_filename:
+            regeneration_metadata["original_image_filename"] = original_filename
+        if original_model:
+            regeneration_metadata["original_image_model"] = original_model
+        if original_seed:
+            regeneration_metadata["original_seed"] = original_seed
+        
+        # Update the ad with new image
+        update_kwargs = {}
+        if request.new_filename:
+            update_kwargs["image_filename"] = request.new_filename
+        if request.new_model:
+            update_kwargs["image_model"] = request.new_model
+        if request.new_seed:
+            update_kwargs["image_seed"] = request.new_seed
+        if request.new_r2_url:
+            update_kwargs["image_url"] = request.new_r2_url
+            update_kwargs["r2_url"] = request.new_r2_url
+        elif request.new_image_url:
+            update_kwargs["image_url"] = request.new_image_url
+        
+        api_logger.info(f"Updating ad {request.image_id} with new image...")
+        update_success = await db_service.update_ad_creative(
+            ad_id=request.image_id,
+            username=username,
+            metadata=regeneration_metadata,
+            **update_kwargs
+        )
+        
+        if update_success:
+            api_logger.info(f"✓ Ad updated with selected new image (ID: {request.image_id})")
+        else:
+            api_logger.warning("Failed to update ad with new image")
+            raise HTTPException(status_code=500, detail="Failed to update ad with new image")
+        
+        total_api_time = time.time() - api_start_time
+        api_logger.info("=" * 80)
+        api_logger.info(f"✓ API: Selection confirmed (new image saved) in {total_api_time:.2f}s")
+        api_logger.info("=" * 80)
+        
+        return {
+            "status": "success",
+            "message": "New image saved",
+            "selection": "new",
+            "new_image_url": request.new_image_url,
+        }
+        
+    except HTTPException:
+        total_api_time = time.time() - api_start_time
+        api_logger.error(f"✗ API: Selection confirmation failed with HTTPException after {total_api_time:.2f}s")
+        raise
+    except Exception as e:
+        total_api_time = time.time() - api_start_time
+        api_logger.error(f"✗ API: Selection confirmation failed with exception after {total_api_time:.2f}s: {str(e)}")
+        api_logger.exception("Full exception traceback:")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 @app.get("/api/models")
 async def list_image_models():
     """