feat: Enhance AI image generation prompts for natural, photorealistic advertising creatives by enriching context and refining modification instructions.

frontend/app/creative/modify/page.tsx

@@ -4,6 +4,7 @@ import React, { useState, useCallback } from "react";
 import { CreativeUploader } from "@/components/creative/CreativeUploader";
 import { CreativeAnalysis } from "@/components/creative/CreativeAnalysis";
 import { ModificationForm } from "@/components/creative/ModificationForm";
+import { CorrectionModal } from "@/components/generation/CorrectionModal";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import {
   uploadCreative,
@@ -15,6 +16,7 @@ import type {
   CreativeAnalysisData,
   ModificationMode,
   ModifiedImageResult,
+  ImageCorrectResponse,
 } from "@/types/api";
 
 type WorkflowStep = "upload" | "analysis" | "modify" | "result";
@@ -42,6 +44,11 @@ export default function CreativeModifyPage() {
   const [result, setResult] = useState<ModifiedImageResult | null>(null);
   const [generatedPrompt, setGeneratedPrompt] = useState<string | null>(null);
 
+  // Correction modal state
+  const [isCorrectionModalOpen, setIsCorrectionModalOpen] = useState(false);
+  const [correctionInstructions, setCorrectionInstructions] = useState("");
+  const [uploadedAdId, setUploadedAdId] = useState<string | null>(null);
+
   // Handle image ready from uploader
   const handleImageReady = useCallback(async (imageUrl: string, file?: File) => {
     setIsLoading(true);
@@ -59,7 +66,7 @@ export default function CreativeModifyPage() {
           throw new Error(uploadResponse.error || "Failed to upload image");
         }
         setOriginalImageUrl(uploadResponse.image_url);
-        
+
         // Now analyze using the uploaded URL
         analysisResponse = await analyzeCreativeByUrl({
           image_url: uploadResponse.image_url,
@@ -167,7 +174,7 @@ export default function CreativeModifyPage() {
   // Handle step click for navigation
   const handleStepClick = useCallback((stepKey: string) => {
     if (!isStepAccessible(stepKey)) return;
-    
+
     if (stepKey === "upload") {
       handleBackToUpload();
     } else if (stepKey === "analysis" && currentStep === "result") {
@@ -175,6 +182,29 @@ export default function CreativeModifyPage() {
     }
   }, [currentStep, handleBackToUpload, handleBackToAnalysis]);
 
+  // Handle improvement click - open correction modal
+  const handleImprovementClick = useCallback((improvement: string) => {
+    setCorrectionInstructions(improvement);
+    setIsCorrectionModalOpen(true);
+  }, []);
+
+  // Handle multiple improvements - combine them and apply
+  const handleMultipleImprovementsApply = useCallback((improvements: string[]) => {
+    const combined = improvements.join(". ");
+    setCorrectionInstructions(combined);
+    setIsCorrectionModalOpen(true);
+  }, []);
+
+  // Handle correction success
+  const handleCorrectionSuccess = useCallback((correctionResult: ImageCorrectResponse, keepCorrected: boolean) => {
+    // Update the original image URL with the corrected image ONLY if user selected it
+    if (keepCorrected && correctionResult.corrected_image?.image_url) {
+      setOriginalImageUrl(correctionResult.corrected_image.image_url);
+      // Re-analyze the corrected image
+      handleImageReady(correctionResult.corrected_image.image_url);
+    }
+  }, [handleImageReady]);
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50">
       <div className="container mx-auto px-4 py-8">
@@ -197,36 +227,33 @@ export default function CreativeModifyPage() {
               { key: "analysis", label: "Analysis & Modify" },
               { key: "result", label: "Result" },
             ].map((step, index) => {
-              const isActive = currentStep === step.key || 
+              const isActive = currentStep === step.key ||
                 (step.key === "analysis" && currentStep === "analysis");
               const isCompleted = getStepIndex(currentStep) > index;
               const canClick = isStepAccessible(step.key) && step.key !== currentStep;
-              
+
               return (
                 <React.Fragment key={step.key}>
                   {index > 0 && (
                     <div
-                      className={`w-12 h-0.5 ${
-                        isCompleted || isActive ? "bg-blue-500" : "bg-gray-300"
-                      }`}
+                      className={`w-12 h-0.5 ${isCompleted || isActive ? "bg-blue-500" : "bg-gray-300"
+                        }`}
                     />
                   )}
                   <button
                     type="button"
                     onClick={() => handleStepClick(step.key)}
                     disabled={!canClick}
-                    className={`flex flex-col items-center gap-1 transition-all ${
-                      canClick ? "cursor-pointer hover:scale-105" : "cursor-default"
-                    }`}
+                    className={`flex flex-col items-center gap-1 transition-all ${canClick ? "cursor-pointer hover:scale-105" : "cursor-default"
+                      }`}
                   >
                     <div
-                      className={`flex items-center justify-center w-10 h-10 rounded-full text-sm font-medium transition-all ${
-                        isActive
-                          ? "bg-blue-500 text-white shadow-lg"
-                          : isCompleted
+                      className={`flex items-center justify-center w-10 h-10 rounded-full text-sm font-medium transition-all ${isActive
+                        ? "bg-blue-500 text-white shadow-lg"
+                        : isCompleted
                           ? "bg-blue-100 text-blue-600 hover:bg-blue-200"
                           : "bg-gray-200 text-gray-500"
-                      }`}
+                        }`}
                     >
                       {isCompleted ? (
                         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
@@ -236,9 +263,8 @@ export default function CreativeModifyPage() {
                         index + 1
                       )}
                     </div>
-                    <span className={`text-xs font-medium ${
-                      isActive ? "text-blue-600" : isCompleted ? "text-blue-500" : "text-gray-500"
-                    }`}>
+                    <span className={`text-xs font-medium ${isActive ? "text-blue-600" : isCompleted ? "text-blue-500" : "text-gray-500"
+                      }`}>
                       {step.label}
                     </span>
                   </button>
@@ -314,7 +340,11 @@ export default function CreativeModifyPage() {
               )}
 
               {/* Analysis Display */}
-              <CreativeAnalysis analysis={analysis} />
+              <CreativeAnalysis
+                analysis={analysis}
+                onImprovementClick={handleImprovementClick}
+                onMultipleImprovementsApply={handleMultipleImprovementsApply}
+              />
 
               {/* Modification Form */}
               <ModificationForm
@@ -496,6 +526,22 @@ export default function CreativeModifyPage() {
           )}
         </div>
       </div>
+
+      {/* Correction Modal - Note: CorrectionModal expects an adId but we're using image URL */}
+      {/* For now, we'll pass a placeholder ID since the correction API needs to be adapted */}
+      {isCorrectionModalOpen && originalImageUrl && (
+        <CorrectionModal
+          isOpen={isCorrectionModalOpen}
+          onClose={() => {
+            setIsCorrectionModalOpen(false);
+            setCorrectionInstructions("");
+          }}
+          adId={uploadedAdId || "temp-id"}
+          imageUrl={originalImageUrl}
+          initialInstructions={correctionInstructions}
+          onSuccess={handleCorrectionSuccess}
+        />
+      )}
     </div>
   );
 }

frontend/components/creative/CreativeAnalysis.tsx

@@ -6,11 +6,36 @@ import type { CreativeAnalysisData } from "@/types/api";
 
 interface CreativeAnalysisProps {
   analysis: CreativeAnalysisData;
+  onImprovementClick?: (improvement: string) => void;
+  onMultipleImprovementsApply?: (improvements: string[]) => void;
 }
 
 export const CreativeAnalysis: React.FC<CreativeAnalysisProps> = ({
   analysis,
+  onImprovementClick,
+  onMultipleImprovementsApply,
 }) => {
+  const [selectedImprovements, setSelectedImprovements] = React.useState<Set<number>>(new Set());
+
+  const toggleImprovement = (index: number) => {
+    setSelectedImprovements(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(index)) {
+        newSet.delete(index);
+      } else {
+        newSet.add(index);
+      }
+      return newSet;
+    });
+  };
+
+  const handleApplySelected = () => {
+    const selected = Array.from(selectedImprovements).map(idx => analysis.areas_for_improvement[idx]);
+    if (selected.length > 0 && onMultipleImprovementsApply) {
+      onMultipleImprovementsApply(selected);
+      setSelectedImprovements(new Set());
+    }
+  };
   return (
     <Card variant="glass">
       <CardHeader>
@@ -105,14 +130,63 @@ export const CreativeAnalysis: React.FC<CreativeAnalysisProps> = ({
 
         {/* Areas for Improvement */}
         <div>
-          <h4 className="text-sm font-semibold text-gray-700 mb-2">Areas for Improvement</h4>
-          <ul className="space-y-1">
+          <div className="flex items-center justify-between mb-2">
+            <h4 className="text-sm font-semibold text-gray-700">
+              Areas for Improvement
+              {onMultipleImprovementsApply && (
+                <span className="ml-2 text-xs text-gray-500 font-normal">
+                  (Select multiple and apply together)
+                </span>
+              )}
+            </h4>
+            {onMultipleImprovementsApply && selectedImprovements.size > 0 && (
+              <button
+                type="button"
+                onClick={handleApplySelected}
+                className="px-3 py-1 bg-amber-500 text-white text-xs font-medium rounded-lg hover:bg-amber-600 transition-colors"
+              >
+                Apply {selectedImprovements.size} Selected
+              </button>
+            )}
+          </div>
+          <ul className="space-y-2">
             {analysis.areas_for_improvement.map((area, index) => (
-              <li key={index} className="flex items-start gap-2 text-sm text-gray-600">
-                <svg className="w-4 h-4 text-amber-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-                </svg>
-                {area}
+              <li key={index}>
+                <div
+                  className={`flex items-start gap-2 text-sm p-3 rounded-lg transition-all border ${
+                    selectedImprovements.has(index)
+                      ? "bg-amber-50 border-amber-300"
+                      : onMultipleImprovementsApply
+                      ? "hover:bg-amber-50 hover:border-amber-200 border-transparent cursor-pointer"
+                      : onImprovementClick
+                      ? "hover:bg-amber-50 hover:border-amber-300 border-transparent cursor-pointer"
+                      : "border-transparent cursor-default"
+                  }`}
+                >
+                  {onMultipleImprovementsApply && (
+                    <input
+                      type="checkbox"
+                      checked={selectedImprovements.has(index)}
+                      onChange={() => toggleImprovement(index)}
+                      className="w-4 h-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500 mt-0.5 cursor-pointer"
+                    />
+                  )}
+                  <svg className="w-4 h-4 text-amber-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                  </svg>
+                  <span className="text-gray-600 flex-1">{area}</span>
+                  {!onMultipleImprovementsApply && onImprovementClick && (
+                    <button
+                      type="button"
+                      onClick={() => onImprovementClick(area)}
+                      className="text-amber-500 hover:text-amber-600 transition-colors"
+                    >
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      </svg>
+                    </button>
+                  )}
+                </div>
               </li>
             ))}
           </ul>

frontend/components/creative/ModificationForm.tsx

@@ -34,6 +34,8 @@ interface ModificationFormProps {
   isLoading: boolean;
 }
 
+import { Brain, Sparkles, Wand2, Lightbulb, ChevronDown, Check, Info } from "lucide-react";
+
 export const ModificationForm: React.FC<ModificationFormProps> = ({
   angle,
   concept,
@@ -62,13 +64,12 @@ export const ModificationForm: React.FC<ModificationFormProps> = ({
           getAllConcepts(),
         ]);
 
-        // Transform angles data
         const angles: AngleOption[] = [];
         Object.entries(anglesData.categories).forEach(([categoryKey, category]) => {
           category.angles.forEach((a) => {
             angles.push({
               value: a.name,
-              label: `${a.name} (${a.trigger})`,
+              label: a.name,
               trigger: a.trigger,
               category: category.name,
             });
@@ -76,13 +77,12 @@ export const ModificationForm: React.FC<ModificationFormProps> = ({
         });
         setAngleOptions(angles);
 
-        // Transform concepts data
         const concepts: ConceptOption[] = [];
         Object.entries(conceptsData.categories).forEach(([categoryKey, category]) => {
           category.concepts.forEach((c) => {
             concepts.push({
               value: c.name,
-              label: `${c.name}`,
+              label: c.name,
               structure: c.structure,
               category: category.name,
             });
@@ -101,291 +101,280 @@ export const ModificationForm: React.FC<ModificationFormProps> = ({
 
   const isValid = angle.trim() || concept.trim();
 
-  // Group angles by category for the dropdown
   const groupedAngles = angleOptions.reduce((acc, angle) => {
-    if (!acc[angle.category]) {
-      acc[angle.category] = [];
-    }
+    if (!acc[angle.category]) acc[angle.category] = [];
     acc[angle.category].push(angle);
     return acc;
   }, {} as Record<string, AngleOption[]>);
 
-  // Group concepts by category for the dropdown
   const groupedConcepts = conceptOptions.reduce((acc, concept) => {
-    if (!acc[concept.category]) {
-      acc[concept.category] = [];
-    }
+    if (!acc[concept.category]) acc[concept.category] = [];
     acc[concept.category].push(concept);
     return acc;
   }, {} as Record<string, ConceptOption[]>);
 
   return (
-    <Card variant="glass">
-      <CardHeader>
-        <CardTitle>Apply New Angle / Concept</CardTitle>
-        <CardDescription>
-          Select or enter a new angle or concept to apply to your creative
+    <Card variant="glass" className="overflow-hidden border-none shadow-2xl p-0">
+      <CardHeader className="bg-gradient-to-r from-blue-600/10 to-cyan-500/10 border-b border-blue-500/10 p-8 pb-10">
+        <div className="flex items-center gap-4 mb-3">
+          <div className="p-2.5 bg-blue-600 rounded-xl shadow-lg shadow-blue-500/30">
+            <Sparkles className="w-6 h-6 text-white" />
+          </div>
+          <CardTitle className="text-3xl font-black tracking-tight text-gray-900 border-none p-0 m-0 bg-transparent flex items-center">
+            Refine & Transform
+          </CardTitle>
+        </div>
+        <CardDescription className="text-gray-600 text-lg font-medium leading-relaxed max-w-2xl">
+          Apply powerful psychological angles and visual concepts to your creative.
         </CardDescription>
       </CardHeader>
-      <CardContent className="space-y-6">
-        {/* Angle Selection */}
-        <div>
-          <div className="flex items-center justify-between mb-2">
-            <label className="block text-sm font-semibold text-gray-700">
-              New Angle <span className="text-gray-400 font-normal">(psychological WHY)</span>
-            </label>
-            <div className="flex gap-1">
-              <button
-                type="button"
-                onClick={() => setAngleInputMode("dropdown")}
-                className={`px-2 py-1 text-xs rounded ${
-                  angleInputMode === "dropdown"
-                    ? "bg-orange-100 text-orange-700"
-                    : "bg-gray-100 text-gray-600 hover:bg-gray-200"
-                }`}
-              >
-                Select
-              </button>
-              <button
-                type="button"
-                onClick={() => setAngleInputMode("custom")}
-                className={`px-2 py-1 text-xs rounded ${
-                  angleInputMode === "custom"
-                    ? "bg-orange-100 text-orange-700"
-                    : "bg-gray-100 text-gray-600 hover:bg-gray-200"
-                }`}
-              >
-                Custom
-              </button>
+
+      <CardContent className="p-8 pt-10 space-y-10">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {/* Angle Selection */}
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Brain className="w-4 h-4 text-orange-500" />
+                <label className="text-sm font-bold text-gray-700 uppercase tracking-wider">
+                  Psychological Angle
+                </label>
+              </div>
+              <div className="inline-flex p-1 bg-gray-100 rounded-lg">
+                <button
+                  type="button"
+                  onClick={() => setAngleInputMode("dropdown")}
+                  className={`px-3 py-1 text-xs font-bold rounded-md transition-all ${angleInputMode === "dropdown" ? "bg-white text-orange-600 shadow-sm" : "text-gray-500 hover:text-gray-700"
+                    }`}
+                >
+                  Presets
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setAngleInputMode("custom")}
+                  className={`px-3 py-1 text-xs font-bold rounded-md transition-all ${angleInputMode === "custom" ? "bg-white text-orange-600 shadow-sm" : "text-gray-500 hover:text-gray-700"
+                    }`}
+                >
+                  Custom
+                </button>
+              </div>
+            </div>
+
+            <div className="relative group">
+              {angleInputMode === "dropdown" ? (
+                <div className="relative">
+                  <select
+                    value={angle}
+                    onChange={(e) => onAngleChange(e.target.value)}
+                    disabled={loadingOptions}
+                    className="w-full pl-4 pr-10 py-4 rounded-xl border-2 border-gray-100 bg-gray-50/50 hover:bg-white focus:bg-white focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 transition-all appearance-none font-medium text-gray-900"
+                  >
+                    <option value="">Choose an angle...</option>
+                    {Object.entries(groupedAngles).map(([category, angles]) => (
+                      <optgroup key={category} label={category} className="font-bold text-gray-400 uppercase text-[10px]">
+                        {angles.map((a) => (
+                          <option key={a.value} value={a.value} className="text-gray-900 font-medium">
+                            {a.label}
+                          </option>
+                        ))}
+                      </optgroup>
+                    ))}
+                  </select>
+                  <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none group-focus-within:text-orange-500 transition-colors" />
+                </div>
+              ) : (
+                <input
+                  type="text"
+                  value={angle}
+                  onChange={(e) => onAngleChange(e.target.value)}
+                  placeholder="e.g., Scarcity, Fear of Missing Out..."
+                  className="w-full px-4 py-4 rounded-xl border-2 border-gray-100 bg-gray-50/50 hover:bg-white focus:bg-white focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 transition-all font-medium text-gray-900"
+                />
+              )}
             </div>
+            <p className="text-xs text-gray-500 flex items-center gap-1.5 px-1">
+              <Info className="w-3 h-3" />
+              The "Why" - triggers that motivate user action.
+            </p>
           </div>
-          
-          {angleInputMode === "dropdown" ? (
-            <select
-              value={angle}
-              onChange={(e) => onAngleChange(e.target.value)}
-              disabled={loadingOptions}
-              className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all"
-            >
-              <option value="">-- Select an angle --</option>
-              {Object.entries(groupedAngles).map(([category, angles]) => (
-                <optgroup key={category} label={category}>
-                  {angles.map((a) => (
-                    <option key={a.value} value={a.value}>
-                      {a.label}
-                    </option>
-                  ))}
-                </optgroup>
-              ))}
-            </select>
-          ) : (
-            <input
-              type="text"
-              value={angle}
-              onChange={(e) => onAngleChange(e.target.value)}
-              placeholder="e.g., Fear of Missing Out, Social Proof, Urgency..."
-              className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all"
-            />
-          )}
-          
-          <p className="text-xs text-gray-500 mt-1">
-            The psychological trigger that motivates action
-          </p>
-        </div>
 
-        {/* Concept Selection */}
-        <div>
-          <div className="flex items-center justify-between mb-2">
-            <label className="block text-sm font-semibold text-gray-700">
-              New Concept <span className="text-gray-400 font-normal">(visual HOW)</span>
-            </label>
-            <div className="flex gap-1">
-              <button
-                type="button"
-                onClick={() => setConceptInputMode("dropdown")}
-                className={`px-2 py-1 text-xs rounded ${
-                  conceptInputMode === "dropdown"
-                    ? "bg-green-100 text-green-700"
-                    : "bg-gray-100 text-gray-600 hover:bg-gray-200"
-                }`}
-              >
-                Select
-              </button>
-              <button
-                type="button"
-                onClick={() => setConceptInputMode("custom")}
-                className={`px-2 py-1 text-xs rounded ${
-                  conceptInputMode === "custom"
-                    ? "bg-green-100 text-green-700"
-                    : "bg-gray-100 text-gray-600 hover:bg-gray-200"
-                }`}
-              >
-                Custom
-              </button>
+          {/* Concept Selection */}
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Lightbulb className="w-4 h-4 text-green-500" />
+                <label className="text-sm font-bold text-gray-700 uppercase tracking-wider">
+                  Visual Concept
+                </label>
+              </div>
+              <div className="inline-flex p-1 bg-gray-100 rounded-lg">
+                <button
+                  type="button"
+                  onClick={() => setConceptInputMode("dropdown")}
+                  className={`px-3 py-1 text-xs font-bold rounded-md transition-all ${conceptInputMode === "dropdown" ? "bg-white text-green-600 shadow-sm" : "text-gray-500 hover:text-gray-700"
+                    }`}
+                >
+                  Presets
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setConceptInputMode("custom")}
+                  className={`px-3 py-1 text-xs font-bold rounded-md transition-all ${conceptInputMode === "custom" ? "bg-white text-green-600 shadow-sm" : "text-gray-500 hover:text-gray-700"
+                    }`}
+                >
+                  Custom
+                </button>
+              </div>
+            </div>
+
+            <div className="relative group">
+              {conceptInputMode === "dropdown" ? (
+                <div className="relative">
+                  <select
+                    value={concept}
+                    onChange={(e) => onConceptChange(e.target.value)}
+                    disabled={loadingOptions}
+                    className="w-full pl-4 pr-10 py-4 rounded-xl border-2 border-gray-100 bg-gray-50/50 hover:bg-white focus:bg-white focus:border-green-500 focus:ring-4 focus:ring-green-500/10 transition-all appearance-none font-medium text-gray-900"
+                  >
+                    <option value="">Choose a concept...</option>
+                    {Object.entries(groupedConcepts).map(([category, concepts]) => (
+                      <optgroup key={category} label={category} className="font-bold text-gray-400 uppercase text-[10px]">
+                        {concepts.map((c) => (
+                          <option key={c.value} value={c.value} className="text-gray-900 font-medium">
+                            {c.label}
+                          </option>
+                        ))}
+                      </optgroup>
+                    ))}
+                  </select>
+                  <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none group-focus-within:text-green-500 transition-colors" />
+                </div>
+              ) : (
+                <input
+                  type="text"
+                  value={concept}
+                  onChange={(e) => onConceptChange(e.target.value)}
+                  placeholder="e.g., Before/After Comparison, User Testimonial..."
+                  className="w-full px-4 py-4 rounded-xl border-2 border-gray-100 bg-gray-50/50 hover:bg-white focus:bg-white focus:border-green-500 focus:ring-4 focus:ring-green-500/10 transition-all font-medium text-gray-900"
+                />
+              )}
             </div>
+            <p className="text-xs text-gray-500 flex items-center gap-1.5 px-1">
+              <Info className="w-3 h-3" />
+              The "How" - visual structure and format.
+            </p>
           </div>
-          
-          {conceptInputMode === "dropdown" ? (
-            <select
-              value={concept}
-              onChange={(e) => onConceptChange(e.target.value)}
-              disabled={loadingOptions}
-              className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all"
-            >
-              <option value="">-- Select a concept --</option>
-              {Object.entries(groupedConcepts).map(([category, concepts]) => (
-                <optgroup key={category} label={category}>
-                  {concepts.map((c) => (
-                    <option key={c.value} value={c.value}>
-                      {c.label} - {c.structure}
-                    </option>
-                  ))}
-                </optgroup>
-              ))}
-            </select>
-          ) : (
-            <input
-              type="text"
-              value={concept}
-              onChange={(e) => onConceptChange(e.target.value)}
-              placeholder="e.g., Testimonial, Before/After, Lifestyle Scene..."
-              className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all"
-            />
-          )}
-          
-          <p className="text-xs text-gray-500 mt-1">
-            The creative format or style to present the message
-          </p>
         </div>
 
         {/* Mode Selection */}
-        <div>
-          <label className="block text-sm font-semibold text-gray-700 mb-3">
-            Modification Mode
+        <div className="space-y-4 pt-4 border-t border-gray-100">
+          <label className="text-sm font-bold text-gray-700 uppercase tracking-wider block">
+            Transformation Mode
           </label>
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <button
               type="button"
               onClick={() => onModeChange("modify")}
-              className={`p-4 rounded-xl border-2 text-left transition-all ${
-                mode === "modify"
-                  ? "border-blue-500 bg-blue-50"
-                  : "border-gray-200 hover:border-gray-300"
-              }`}
+              className={`group p-5 rounded-2xl border-2 text-left transition-all ${mode === "modify"
+                ? "border-blue-500 bg-blue-50/50 shadow-md ring-4 ring-blue-500/5"
+                : "border-gray-100 bg-gray-50/30 hover:border-gray-200 hover:bg-gray-50/60"
+                }`}
             >
-              <div className="flex items-center gap-2 mb-1">
-                <svg
-                  className={`w-5 h-5 ${mode === "modify" ? "text-blue-500" : "text-gray-400"}`}
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                  />
-                </svg>
-                <span className="font-semibold text-gray-900">Modify</span>
+              <div className="flex items-center justify-between mb-3">
+                <div className={`p-2 rounded-lg ${mode === "modify" ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500 group-hover:bg-gray-300 transition-colors"}`}>
+                  <Wand2 className="w-5 h-5" />
+                </div>
+                {mode === "modify" && <Check className="w-5 h-5 text-blue-500" />}
               </div>
-              <p className="text-xs text-gray-500">
-                Make targeted changes while preserving most of the original image
+              <h4 className={`font-bold text-lg mb-1 ${mode === "modify" ? "text-blue-900" : "text-gray-900"}`}>Modify Image</h4>
+              <p className="text-sm text-gray-600 leading-relaxed">
+                Smart edits to existing elements. Preserves ~90% of your original creative while applying the new angle.
               </p>
             </button>
+
             <button
               type="button"
               onClick={() => onModeChange("inspired")}
-              className={`p-4 rounded-xl border-2 text-left transition-all ${
-                mode === "inspired"
-                  ? "border-purple-500 bg-purple-50"
-                  : "border-gray-200 hover:border-gray-300"
-              }`}
+              className={`group p-5 rounded-2xl border-2 text-left transition-all ${mode === "inspired"
+                ? "border-purple-500 bg-purple-50/50 shadow-md ring-4 ring-purple-500/5"
+                : "border-gray-100 bg-gray-50/30 hover:border-gray-200 hover:bg-gray-50/60"
+                }`}
             >
-              <div className="flex items-center gap-2 mb-1">
-                <svg
-                  className={`w-5 h-5 ${mode === "inspired" ? "text-purple-500" : "text-gray-400"}`}
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
-                  />
-                </svg>
-                <span className="font-semibold text-gray-900">Inspired</span>
+              <div className="flex items-center justify-between mb-3">
+                <div className={`p-2 rounded-lg ${mode === "inspired" ? "bg-purple-500 text-white" : "bg-gray-200 text-gray-500 group-hover:bg-gray-300 transition-colors"}`}>
+                  <Sparkles className="w-5 h-5" />
+                </div>
+                {mode === "inspired" && <Check className="w-5 h-5 text-purple-500" />}
               </div>
-              <p className="text-xs text-gray-500">
-                Generate a completely new image inspired by the original
+              <h4 className={`font-bold text-lg mb-1 ${mode === "inspired" ? "text-purple-900" : "text-gray-900"}`}>Inspired Creation</h4>
+              <p className="text-sm text-gray-600 leading-relaxed">
+                Generates a fresh creative from scratch using the original's style and essence as inspiration.
               </p>
             </button>
           </div>
         </div>
 
         {/* Image Model Selection */}
-        <Select
-          label="Image Model"
-          value={imageModel || ""}
-          onChange={(e) => onImageModelChange(e.target.value || null)}
-          options={IMAGE_MODELS.map((model) => ({
-            value: model.value,
-            label: model.label,
-          }))}
-        />
-
-        {/* Info Box */}
-        <div className="bg-gradient-to-r from-blue-50 to-cyan-50 border border-blue-200 rounded-xl p-4">
-          <p className="text-sm text-gray-700">
-            <strong>
-              {mode === "modify" ? "Modify Mode:" : "Inspired Mode:"}
-            </strong>{" "}
-            {mode === "modify"
-              ? "The AI will make targeted adjustments to apply your new angle/concept while keeping ~80-95% of the original image intact."
-              : "The AI will generate a completely new creative that captures the style and essence of the original while fully applying your new angle/concept."}
-          </p>
+        <div className="space-y-4 pt-4 border-t border-gray-100">
+          <label className="text-sm font-bold text-gray-700 uppercase tracking-wider block">
+            AI Engine
+          </label>
+          <div className="relative group max-w-sm">
+            <select
+              value={imageModel || ""}
+              onChange={(e) => onImageModelChange(e.target.value || null)}
+              className="w-full pl-4 pr-10 py-3 rounded-xl border-2 border-gray-100 bg-gray-50/50 hover:bg-white focus:bg-white focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all appearance-none font-medium text-gray-900"
+            >
+              {IMAGE_MODELS.map((model) => (
+                <option key={model.value} value={model.value}>
+                  {model.label}
+                </option>
+              ))}
+            </select>
+            <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none group-focus-within:text-blue-500 transition-colors" />
+          </div>
         </div>
 
-        {/* Submit Button */}
-        <button
-          type="button"
-          onClick={onSubmit}
-          disabled={!isValid || isLoading}
-          className="w-full bg-gradient-to-r from-blue-500 to-cyan-500 text-white font-bold py-4 px-6 rounded-xl hover:from-blue-600 hover:to-cyan-600 transition-all duration-300 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          {isLoading ? (
-            <span className="flex items-center justify-center gap-2">
-              <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                  fill="none"
-                />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                />
-              </svg>
-              Generating...
+        {/* Footer / Submit */}
+        <div className="pt-6">
+          <button
+            type="button"
+            onClick={onSubmit}
+            disabled={!isValid || isLoading}
+            className={`w-full relative group overflow-hidden bg-gradient-to-r ${mode === "modify" ? "from-blue-600 to-cyan-500" : "from-purple-600 to-pink-500"
+              } text-white font-black text-lg py-5 px-8 rounded-2xl transition-all duration-300 shadow-xl hover:shadow-2xl hover:-translate-y-1 disabled:opacity-50 disabled:translate-y-0 disabled:shadow-none`}
+          >
+            <div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
+            <span className="flex items-center justify-center gap-3 relative z-10">
+              {isLoading ? (
+                <>
+                  <Loader2 className="animate-spin h-6 w-6" />
+                  Bringing your vision to life...
+                </>
+              ) : (
+                <>
+                  {mode === "modify" ? <Wand2 className="w-6 h-6" /> : <Sparkles className="w-6 h-6" />}
+                  Generate {mode === "modify" ? "Modified" : "Inspired"} Creative
+                </>
+              )}
             </span>
-          ) : (
-            `Generate ${mode === "modify" ? "Modified" : "Inspired"} Creative`
-          )}
-        </button>
+          </button>
 
-        {!isValid && (
-          <p className="text-xs text-amber-600 text-center">
-            Please select or enter at least one angle or concept to continue
-          </p>
-        )}
+          {!isValid && (
+            <div className="mt-4 flex items-center justify-center gap-2 text-amber-600 animate-pulse">
+              <Info className="w-4 h-4" />
+              <p className="text-sm font-bold">Please select or enter at least one angle or concept</p>
+            </div>
+          )}
+        </div>
       </CardContent>
     </Card>
   );
 };
+
+const Loader2 = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+  </svg>
+);

frontend/components/generation/CorrectionModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { X, Wand2, Image as ImageIcon, CheckCircle2, AlertCircle, Loader2, Sparkles } from "lucide-react";
+import { X, Wand2, Image as ImageIcon, CheckCircle2, AlertCircle, Loader2, Sparkles, Download } from "lucide-react";
 import { correctImage } from "@/lib/api/endpoints";
 import type { ImageCorrectResponse, AdCreativeDB } from "@/types/api";
 import { ProgressBar } from "@/components/ui/ProgressBar";
@@ -13,8 +13,10 @@ interface CorrectionModalProps {
   isOpen: boolean;
   onClose: () => void;
   adId: string;
+  imageUrl?: string | null;
+  initialInstructions?: string;
   ad?: AdCreativeDB | null;
-  onSuccess?: (result: ImageCorrectResponse) => void;
+  onSuccess?: (result: ImageCorrectResponse, keepCorrected: boolean) => void;
 }
 
 type CorrectionStep = "idle" | "input" | "analyzing" | "correcting" | "regenerating" | "complete" | "error";
@@ -23,6 +25,8 @@ export const CorrectionModal: React.FC<CorrectionModalProps> = ({
   isOpen,
   onClose,
   adId,
+  imageUrl,
+  initialInstructions = "",
   ad,
   onSuccess,
 }) => {
@@ -32,6 +36,7 @@ export const CorrectionModal: React.FC<CorrectionModalProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [userInstructions, setUserInstructions] = useState("");
   const [useAutoAnalyze, setUseAutoAnalyze] = useState(false);
+  const [keepCorrected, setKeepCorrected] = useState(true);
 
   useEffect(() => {
     if (isOpen) {
@@ -39,7 +44,7 @@ export const CorrectionModal: React.FC<CorrectionModalProps> = ({
       setProgress(0);
       setResult(null);
       setError(null);
-      setUserInstructions("");
+      setUserInstructions(initialInstructions);
       setUseAutoAnalyze(false);
     } else {
       // Reset state when modal closes
@@ -49,6 +54,7 @@ export const CorrectionModal: React.FC<CorrectionModalProps> = ({
       setError(null);
       setUserInstructions("");
       setUseAutoAnalyze(false);
+      setKeepCorrected(true);
     }
   }, [isOpen]);
 
@@ -84,8 +90,9 @@ export const CorrectionModal: React.FC<CorrectionModalProps> = ({
       await new Promise((resolve) => setTimeout(resolve, 2000));
 
       // Actually perform the correction
-      const response = await correctImage({ 
+      const response = await correctImage({
         image_id: adId,
+        image_url: imageUrl || undefined,
         user_instructions: userInstructions || undefined,
         auto_analyze: useAutoAnalyze,
       });
@@ -154,8 +161,8 @@ export const CorrectionModal: React.FC<CorrectionModalProps> = ({
               <div>
                 <h2 className="text-xl font-bold text-gray-900">Correct Image</h2>
                 <p className="text-sm text-gray-500">
-                  {step === "input" 
-                    ? "Specify what you want to correct" 
+                  {step === "input"
+                    ? "Specify what you want to correct"
                     : "Analyzing and correcting your ad creative"}
                 </p>
               </div>
@@ -257,22 +264,104 @@ export const CorrectionModal: React.FC<CorrectionModalProps> = ({
                 </div>
               </div>
 
-              {result.corrected_image?.image_url && (
-                <div className="space-y-3">
-                  <h3 className="font-semibold text-gray-900">Corrected Image</h3>
-                  <img
-                    src={result.corrected_image.image_url}
-                    alt="Corrected"
-                    className="w-full rounded-lg border border-gray-200"
-                  />
+              <div className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  {/* Original Image */}
+                  <div className={`space-y-3 p-4 rounded-2xl border-2 transition-all ${!keepCorrected ? 'border-blue-500 bg-blue-50/50 shadow-lg' : 'border-gray-100 hover:border-gray-200'}`}>
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${!keepCorrected ? 'border-blue-500 bg-blue-500' : 'border-gray-300'}`}>
+                          {!keepCorrected && <div className="w-1.5 h-1.5 rounded-full bg-white" />}
+                        </div>
+                        <h3 className="font-bold text-gray-900">Original</h3>
+                      </div>
+                      <Button
+                        variant={!keepCorrected ? "primary" : "secondary"}
+                        size="sm"
+                        onClick={() => setKeepCorrected(false)}
+                      >
+                        {!keepCorrected ? "Selected" : "Keep Original"}
+                      </Button>
+                    </div>
+                    <div className="aspect-square relative rounded-xl overflow-hidden border border-gray-200 cursor-pointer" onClick={() => setKeepCorrected(false)}>
+                      {(imageUrl || ad?.r2_url || ad?.image_url) ? (
+                        <img
+                          src={(imageUrl || ad?.r2_url || ad?.image_url)!}
+                          alt="Original"
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="w-full h-full bg-gray-50 flex flex-col items-center justify-center text-gray-400">
+                          <ImageIcon className="h-8 w-8 mb-2" />
+                          <span className="text-xs">No image</span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Corrected Image */}
+                  <div className={`space-y-3 p-4 rounded-2xl border-2 transition-all ${keepCorrected ? 'border-blue-500 bg-blue-50/50 shadow-lg' : 'border-gray-100 hover:border-gray-200'}`}>
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${keepCorrected ? 'border-blue-500 bg-blue-500' : 'border-gray-300'}`}>
+                          {keepCorrected && <div className="w-1.5 h-1.5 rounded-full bg-white" />}
+                        </div>
+                        <h3 className="font-bold text-gray-900">Corrected</h3>
+                      </div>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="secondary"
+                          size="sm"
+                          onClick={async (e) => {
+                            e.stopPropagation();
+                            try {
+                              const response = await fetch(result.corrected_image!.image_url!);
+                              const blob = await response.blob();
+                              const url = window.URL.createObjectURL(blob);
+                              const link = document.createElement("a");
+                              link.href = url;
+                              link.download = result.corrected_image!.filename || "corrected-image.png";
+                              document.body.appendChild(link);
+                              link.click();
+                              document.body.removeChild(link);
+                              window.URL.revokeObjectURL(url);
+                            } catch (err) {
+                              window.open(result.corrected_image!.image_url!, "_blank");
+                            }
+                          }}
+                        >
+                          <Download className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant={keepCorrected ? "primary" : "secondary"}
+                          size="sm"
+                          onClick={() => setKeepCorrected(true)}
+                        >
+                          {keepCorrected ? "Selected" : "Use Corrected"}
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="aspect-square relative rounded-xl overflow-hidden border border-gray-200 cursor-pointer" onClick={() => setKeepCorrected(true)}>
+                      {result.corrected_image?.image_url && (
+                        <img
+                          src={result.corrected_image.image_url}
+                          alt="Corrected"
+                          className="w-full h-full object-cover"
+                        />
+                      )}
+                      <div className="absolute top-2 right-2 px-2 py-1 bg-green-500 text-white text-xs font-bold rounded-md shadow-sm">
+                        NEW
+                      </div>
+                    </div>
+                  </div>
                 </div>
-              )}
+              </div>
 
               {/* Show corrections details */}
               {result.corrections && (
                 <div className="space-y-4">
                   <h3 className="font-semibold text-gray-900 text-lg">Correction Details</h3>
-                  
+
                   {result.corrections.spelling_corrections && result.corrections.spelling_corrections.length > 0 && (
                     <div>
                       <h4 className="font-semibold text-gray-900 mb-2 flex items-center gap-2">
@@ -321,11 +410,10 @@ export const CorrectionModal: React.FC<CorrectionModalProps> = ({
                                 <p className="text-gray-600 mt-1">{correction.suggestion}</p>
                               </div>
                               {correction.priority && (
-                                <span className={`text-xs px-2 py-1 rounded ${
-                                  correction.priority === "high" ? "bg-red-100 text-red-700" :
+                                <span className={`text-xs px-2 py-1 rounded ${correction.priority === "high" ? "bg-red-100 text-red-700" :
                                   correction.priority === "medium" ? "bg-yellow-100 text-yellow-700" :
-                                  "bg-gray-100 text-gray-700"
-                                }`}>
+                                    "bg-gray-100 text-gray-700"
+                                  }`}>
                                   {correction.priority}
                                 </span>
                               )}
@@ -345,13 +433,25 @@ export const CorrectionModal: React.FC<CorrectionModalProps> = ({
                     </div>
                   )}
 
-                  {/* Show message if no corrections were made */}
-                  {(!result.corrections.spelling_corrections || result.corrections.spelling_corrections.length === 0) &&
-                   (!result.corrections.visual_corrections || result.corrections.visual_corrections.length === 0) && (
-                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 text-sm text-gray-600">
-                      <p>No specific corrections were identified. The image was regenerated based on your instructions.</p>
+                  {result.analysis && (
+                    <div className="pt-4 border-t border-gray-100">
+                      <h4 className="font-bold text-gray-900 mb-3 flex items-center gap-2">
+                        <ImageIcon className="h-5 w-5 text-blue-500" />
+                        Detailed AI Analysis
+                      </h4>
+                      <div className="bg-blue-50/50 border border-blue-100 rounded-xl p-4 text-sm whitespace-pre-wrap leading-relaxed text-gray-700 max-h-60 overflow-y-auto custom-scrollbar">
+                        {result.analysis}
+                      </div>
                     </div>
                   )}
+
+                  {/* Show message if no corrections were made */}
+                  {(!result.corrections.spelling_corrections || result.corrections.spelling_corrections.length === 0) &&
+                    (!result.corrections.visual_corrections || result.corrections.visual_corrections.length === 0) && (
+                      <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 text-sm text-gray-600">
+                        <p>No specific corrections were identified. The image was regenerated based on your instructions.</p>
+                      </div>
+                    )}
                 </div>
               )}
             </div>
@@ -362,8 +462,8 @@ export const CorrectionModal: React.FC<CorrectionModalProps> = ({
         <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={handleCorrection} 
+              <Button
+                onClick={handleCorrection}
                 variant="primary"
                 disabled={!userInstructions && !useAutoAnalyze}
               >
@@ -380,13 +480,13 @@ export const CorrectionModal: React.FC<CorrectionModalProps> = ({
               onClick={() => {
                 if (step === "complete" && result) {
                   // Call onSuccess when user clicks "Done" to reload the ad
-                  onSuccess?.(result);
+                  onSuccess?.(result, keepCorrected);
                 }
                 onClose();
               }}
               variant={step === "complete" ? "primary" : "secondary"}
             >
-              {step === "complete" ? "Done" : "Close"}
+              {step === "complete" ? `Use ${keepCorrected ? 'Corrected' : 'Original'}` : "Close"}
             </Button>
           </div>
         </div>

frontend/components/generation/RegenerationModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { X, RefreshCw, CheckCircle2, AlertCircle, Loader2, Sparkles, ChevronDown, Check, ArrowLeft } from "lucide-react";
+import { X, RefreshCw, CheckCircle2, AlertCircle, Loader2, Sparkles, ChevronDown, Check, ArrowLeft, Image as ImageIcon } 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";
@@ -103,7 +103,7 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
       }, 400);
 
       // Actually perform the regeneration (preview mode)
-      const response = await regenerateImage({ 
+      const response = await regenerateImage({
         image_id: adId,
         image_model: selectedModel,
         preview_only: true,
@@ -300,12 +300,11 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
               {/* 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"
-                  }`}
+                <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">
@@ -320,11 +319,17 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
                       </div>
                     </div>
                   )}
-                  <img
-                    src={result.original_image_url || ad?.r2_url || ad?.image_url || ""}
-                    alt="Original"
-                    className="w-full aspect-square object-cover"
-                  />
+                  {(result.original_image_url || ad?.r2_url || ad?.image_url) ? (
+                    <img
+                      src={(result.original_image_url || ad?.r2_url || ad?.image_url)!}
+                      alt="Original"
+                      className="w-full aspect-square object-cover"
+                    />
+                  ) : (
+                    <div className="w-full aspect-square bg-gray-50 flex items-center justify-center text-gray-400">
+                      <ImageIcon className="h-8 w-8" />
+                    </div>
+                  )}
                   <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">
@@ -334,12 +339,11 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
                 </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"
-                  }`}
+                <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">
@@ -410,8 +414,8 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
                   <div>
                     <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." 
+                      {selectedImage === "new"
+                        ? "Your ad has been updated with the new image."
                         : "The original image has been kept."}
                     </p>
                   </div>
@@ -421,15 +425,17 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
               {/* Show the selected image */}
               <div className="flex justify-center">
                 <div className="max-w-md">
-                  <img
-                    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"
-                  />
+                  {((selectedImage === "new" ? result?.regenerated_image?.image_url : (result?.original_image_url || ad?.r2_url || ad?.image_url))) ? (
+                    <img
+                      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 className="w-full aspect-square bg-gray-50 flex items-center justify-center text-gray-400 rounded-xl border border-gray-200">
+                      <ImageIcon className="h-8 w-8" />
+                    </div>
+                  )}
                   <p className="text-center text-sm text-gray-500 mt-2">
                     {selectedImage === "new" ? "New image saved" : "Original image kept"}
                   </p>
@@ -445,12 +451,12 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
             {/* Left side buttons */}
             <div>
               {step === "compare" && (
-                <Button 
+                <Button
                   onClick={() => {
                     setStep("input");
                     setResult(null);
                     setSelectedImage(null);
-                  }} 
+                  }}
                   variant="secondary"
                 >
                   <ArrowLeft className="h-4 w-4 mr-2" />
@@ -462,8 +468,8 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
             {/* Right side buttons */}
             <div className="flex gap-3">
               {step === "input" && (
-                <Button 
-                  onClick={handleRegenerate} 
+                <Button
+                  onClick={handleRegenerate}
                   variant="primary"
                   disabled={!selectedModel || loadingModels}
                 >
@@ -471,10 +477,10 @@ export const RegenerationModal: React.FC<RegenerationModalProps> = ({
                   Regenerate Image
                 </Button>
               )}
-              
+
               {step === "compare" && (
-                <Button 
-                  onClick={handleConfirmSelection} 
+                <Button
+                  onClick={handleConfirmSelection}
                   variant="primary"
                   disabled={!selectedImage || savingSelection}
                 >

frontend/lib/api/endpoints.ts

@@ -196,6 +196,7 @@ export const getStrategies = async (niche: Niche): Promise<any> => {
 // Image Correction Endpoints
 export const correctImage = async (params: {
   image_id: string;
+  image_url?: string;
   user_instructions?: string;
   auto_analyze?: boolean;
 }): Promise<ImageCorrectResponse> => {
@@ -275,7 +276,7 @@ export const downloadImageProxy = async (params: {
 export const uploadCreative = async (file: File): Promise<FileUploadResponse> => {
   const formData = new FormData();
   formData.append("file", file);
-  
+
   const response = await apiClient.post<FileUploadResponse>(
     "/api/creative/upload",
     formData,
@@ -305,7 +306,7 @@ export const analyzeCreativeByFile = async (
 ): Promise<CreativeAnalysisResponse> => {
   const formData = new FormData();
   formData.append("file", file);
-  
+
   const response = await apiClient.post<CreativeAnalysisResponse>(
     "/api/creative/analyze/upload",
     formData,

main.py

@@ -700,7 +700,11 @@ async def download_image_proxy(
 class ImageCorrectRequest(BaseModel):
     """Request schema for image correction."""
     image_id: str = Field(
-        description="ID of existing ad creative in database"
+        description="ID of existing ad creative in database, or 'temp-id' for images not in DB"
+    )
+    image_url: Optional[str] = Field(
+        default=None,
+        description="Optional image URL for images not in DB (required if image_id='temp-id')"
     )
     user_instructions: Optional[str] = Field(
         default=None,
@@ -780,21 +784,27 @@ async def correct_image(
     
     try:
         # Fetch ad from database to get image and metadata (only if it belongs to current user)
-        api_logger.info(f"Fetching ad creative from database...")
-        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")
-        
-        api_logger.info(f"Ad creative found: {ad.get('title', 'N/A')} (niche: {ad.get('niche', 'N/A')})")
+        image_url = request.image_url
+        ad = None
+        
+        if request.image_id != "temp-id":
+            api_logger.info(f"Fetching ad creative from database...")
+            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")
+            
+            api_logger.info(f"Ad creative found: {ad.get('title', 'N/A')} (niche: {ad.get('niche', 'N/A')})")
+            
+            # Get image URL from ad if not provided in request
+            if not image_url:
+                image_url = ad.get("r2_url") or ad.get("image_url")
         
-        # Get image URL from ad (prefer R2 URL, fallback to image_url)
-        image_url = ad.get("r2_url") or ad.get("image_url")
         if not image_url:
-            api_logger.error(f"Image URL not found for ad {request.image_id}")
+            api_logger.error(f"Image URL not found for request")
             raise HTTPException(
-                status_code=404,
-                detail="Image URL not found for this ad creative"
+                status_code=400,
+                detail="Image URL must be provided for images not in database, or found in database for provided ID"
             )
         
         api_logger.info(f"Image URL: {image_url}")
@@ -802,23 +812,23 @@ async def correct_image(
         # Load image bytes for analysis (needed for vision API)
         api_logger.info("Loading image bytes for analysis...")
         image_bytes = await image_service.load_image(
-            image_id=request.image_id,
-            image_url=None,
+            image_id=request.image_id if request.image_id != "temp-id" else None,
+            image_url=image_url,
             image_bytes=None,
             filepath=None,
         )
         
         if not image_bytes:
-            api_logger.error(f"Failed to load image bytes for ad {request.image_id}")
+            api_logger.error(f"Failed to load image bytes for request")
             raise HTTPException(
                 status_code=404,
-                detail="Image not found for analysis"
+                detail="Image not found for analysis. Please ensure the URL is accessible."
             )
         
         api_logger.info(f"Image bytes loaded: {len(image_bytes)} bytes")
         
         # Get original prompt from ad metadata if available
-        original_prompt = ad.get("image_prompt") or None
+        original_prompt = ad.get("image_prompt") or None if ad else None
         if original_prompt:
             api_logger.info(f"Original prompt available: {len(original_prompt)} characters")
         
@@ -830,7 +840,7 @@ async def correct_image(
             original_prompt=original_prompt,
             width=1024,
             height=1024,
-            niche=ad.get("niche"),
+            niche=ad.get("niche") if ad else "others",
             user_instructions=request.user_instructions,
             auto_analyze=request.auto_analyze,
         )

services/creative_modifier.py

@@ -248,59 +248,90 @@ Be specific and detailed in your analysis. If you cannot determine something wit
         logger.info(f"User angle: {user_angle}")
         logger.info(f"User concept: {user_concept}")
         
-        system_prompt = """You are an expert prompt engineer for AI image generation models.
-Your task is to create effective prompts that will generate or modify advertising images.
-For 'modify' mode, create minimal, focused prompts that specify only what should change.
-For 'inspired' mode, create comprehensive prompts that capture the essence of the original while applying new angles/concepts.
-
-CRITICAL: ALL generated images MUST be photorealistic. Always include photorealistic quality descriptors in your prompts."""
+        system_prompt = """You are an expert advertising creative director with 20+ years experience.
+    Your task is to create seamless, organic modifications that enhance existing creatives without appearing forced.
+    You understand that effective ads feel authentic and natural, not like concepts were "pasted on."
+    Focus on subtlety, consistency, and maintaining the original's visual language while applying new psychological angles.
+    CRITICAL: ALL generated images MUST be photorealistic. Never mention "AI-generated" or similar terms."""
         
-        if mode == "modify":
-            # Minimal prompt for image-to-image modification
-            prompt_request = f"""Based on this creative analysis:
+        # Try to enrich angle/concept with library data if not already detailed
+        angle_info = user_angle
+        concept_info = user_concept
+        
+        try:
+            from data.angles import get_all_angles
+            from data.concepts import get_all_concepts
+            
+            # Lookup angle details if it's just a name
+            if user_angle and "(" not in user_angle:
+                all_angles = get_all_angles()
+                for a in all_angles:
+                    if a["name"].lower() == user_angle.lower():
+                        angle_info = f"{a['name']} (Psychological trigger: {a['trigger']})"
+                        break
+            
+            # Lookup concept details if it's just a name
+            if user_concept and "(" not in user_concept:
+                all_concepts = get_all_concepts()
+                for c in all_concepts:
+                    if c["name"].lower() == user_concept.lower():
+                        concept_info = f"{c['name']} (Visual structure: {c['structure']})"
+                        break
+        except Exception as e:
+            logger.warning(f"Failed to enrich angle/concept data: {e}")
 
-Visual Style: {analysis.get('visual_style', 'Unknown')}
-Subject Matter: {analysis.get('subject_matter', 'Unknown')}
-Current Angle: {analysis.get('current_angle', 'Unknown')}
-Current Concept: {analysis.get('current_concept', 'Unknown')}
+        # Extract original creative's essence for natural integration
+        original_mood = analysis.get('mood', 'Unknown')
+        original_style = analysis.get('visual_style', 'Unknown')
+        color_palette = analysis.get('color_palette', [])
+        subject_matter = analysis.get('subject_matter', 'Unknown')
+        composition = analysis.get('composition', 'Unknown')
+        
+        # Guard against common hallucinations (e.g. "fan")
+        if "fan of" in subject_matter.lower() and "bills" in subject_matter.lower():
+            subject_matter = subject_matter.replace("fan of", "fanned-out stack of").replace("bills", "money/dollar bills")
 
-The user wants to apply:
-- New Angle: {user_angle or 'Keep current'}
-- New Concept: {user_concept or 'Keep current'}
+        if mode == "modify":
+            # For image-to-image: visually clear modifications
+            prompt_request = f"""ORIGINAL IMAGE CONTEXT:
+    - Subject: {subject_matter}
+    - Mood: {original_mood}
+    - Style: {original_style}
+    - Composition: {composition}
+    - Colors: {', '.join(color_palette[:3]) if color_palette else 'Natural tones'}
 
-Generate a MINIMAL image modification prompt (under 40 words) that specifies what should change.
-The image-to-image model will preserve most of the original image automatically.
-Focus only on the specific changes needed to apply the new angle/concept.
+    TRANSFORMATION TASK:
+    - Apply Angle: {angle_info or 'natural enhancement'}
+    - Apply Concept: {concept_info or 'subtle adjustment'}
 
-CRITICAL: The output MUST be photorealistic. Include "photorealistic" or "realistic photograph" in the prompt.
+    Generate a clear, descriptive transformation prompt (20-40 words) that:
+    1. Specifically describes the VISUAL change needed to reflect the new angle and concept.
+    2. Makes the transformation feel like a professional edit of the original - NOT a different image.
+    3. Keeps the core subjects ({subject_matter}) but adapts their presentation, lighting, or surrounding elements.
+    4. Maintain the {original_style} style and {original_mood} tone.
+    5. Be explicit about what to change (e.g., "Change the lighting to be more dramatic", "Rearrange elements for [concept]")
 
-Return ONLY the prompt text, no explanations."""
+    CRITICAL: The instruction must be strong enough for an image-to-image AI to actually make a visible change.
+    
+    Return ONLY the prompt text, no explanations."""
         else:
-            # Full prompt for inspired generation
-            prompt_request = f"""Based on this creative analysis:
+            # For inspired generation: create new but keep the same authentic vibe
+            prompt_request = f"""ORIGINAL CAMPAIGN INSPIRATION:
+    - Core Vibe: {original_mood} mood, {original_style} aesthetic
+    - Visual Language: {composition}, {subject_matter}
 
-Visual Style: {analysis.get('visual_style', 'Unknown')}
-Color Palette: {', '.join(analysis.get('color_palette', ['Unknown']))}
-Mood: {analysis.get('mood', 'Unknown')}
-Composition: {analysis.get('composition', 'Unknown')}
-Subject Matter: {analysis.get('subject_matter', 'Unknown')}
-Target Audience: {analysis.get('target_audience', 'Unknown')}
+    NEW AD CREATIVE REQUIREMENTS:
+    - Target Angle: {angle_info or 'natural persuasion'}
+    - Target Concept: {concept_info or 'authentic presentation'}
 
-The user wants to create a NEW creative inspired by this one, applying:
-- New Angle: {user_angle or 'Similar to original'}
-- New Concept: {user_concept or 'Similar to original'}
+    Generate a premium, authentic advertising photography prompt (60-90 words) that:
+    1. Creates a NEW photo that looks like it belongs in the same campaign as the original.
+    2. Centers the visual around {concept_info or 'the concept'}.
+    3. Conveys the {angle_info or 'the angle'} through unposed, authentic human moments and natural lighting.
+    4. Maintains high photorealistic quality with realistic textures and real-world lighting.
+    5. Do NOT describe a generic stock photo; describe a high-end, cinematic brand image.
 
-Generate a COMPREHENSIVE image generation prompt (60-100 words) that:
-1. MUST be photorealistic - include "photorealistic", "realistic photograph", "high-resolution photo" in the prompt
-2. Captures the mood of the original
-3. Incorporates the new angle/concept effectively
-4. Maintains appeal to the target audience
-5. Includes specific visual details for high-quality photorealistic generation
-6. If people are included, specify realistic skin texture, natural lighting, authentic expressions
-
-CRITICAL: The final image MUST look like a real photograph, not illustrated or AI-generated looking.
-
-Return ONLY the prompt text, no explanations."""
+    Return ONLY the prompt text, no explanations."""
         
         try:
             prompt = await llm_service.generate(
@@ -309,29 +340,57 @@ Return ONLY the prompt text, no explanations."""
                 temperature=0.7,
             )
             
-            # Clean up the response
+            # Clean up and ensure natural language
             prompt = prompt.strip().strip('"').strip("'")
             
-            # Ensure photorealistic is in the prompt
-            photorealistic_keywords = ["photorealistic", "realistic photograph", "real photo", "high-resolution photo"]
+            # Enhance for seamlessness if needed
+            seamless_keywords = ["seamless", "organic", "natural", "authentic", "integrated"]
+            has_seamless = any(keyword in prompt.lower() for keyword in seamless_keywords)
+            
+            photorealistic_keywords = [
+                "photorealistic", "realistic photograph", "cinematic photography",
+                "authentic photo", "natural lighting", "real-world"
+            ]
             has_photorealistic = any(keyword.lower() in prompt.lower() for keyword in photorealistic_keywords)
             
+            # Add subtle guidance if missing key elements
+            if not has_seamless and mode == "modify":
+                prompt = f"Seamlessly integrated, {prompt}"
+            
             if not has_photorealistic:
-                # Prepend photorealistic requirement
-                prompt = f"Photorealistic, realistic photograph. {prompt}"
-                logger.info("Added photorealistic prefix to prompt")
+                # Add natural photography terms
+                prompt = f"Cinematic photography, authentic moment, natural lighting. {prompt}"
+                logger.info("Added natural photography emphasis to prompt")
+            
+            # Remove any phrases that sound artificial or forced
+            forced_phrases = [
+                "add", "insert", "place", "include the concept of",
+                "visibly show", "clearly demonstrate", "obviously"
+            ]
             
-            logger.info(f"Generated prompt: {prompt[:100]}...")
+            for phrase in forced_phrases:
+                if phrase in prompt.lower():
+                    # Replace with more natural alternatives
+                    if phrase == "add":
+                        prompt = prompt.lower().replace("add", "naturally incorporate")
+                    elif phrase == "insert":
+                        prompt = prompt.lower().replace("insert", "subtly integrate")
+                    elif phrase == "place":
+                        prompt = prompt.lower().replace("place", "position naturally")
+                    elif "visibly show" in prompt.lower():
+                        prompt = prompt.lower().replace("visibly show", "suggest through")
+            
+            logger.info(f"Generated natural prompt: {prompt[:100]}...")
             
             return prompt
         except Exception as e:
             logger.error(f"Failed to generate modification prompt: {e}")
-            # Fallback to a basic prompt with photorealistic requirements
+            # Fallback prompts with emphasis on natural integration
             if mode == "modify":
-                return f"Photorealistic, realistic photograph. Apply {user_angle or 'new angle'} with {user_concept or 'improved concept'}. Natural lighting, authentic details."
+                return f"Cinematic photography, seamless integration. Subtly enhance {subject_matter} to naturally incorporate {user_angle or 'emotional resonance'} through {user_concept or 'visual storytelling'}. Authentic moment, natural lighting, feels like original campaign."
             else:
-                return f"Photorealistic advertising photograph, high-resolution photo, {analysis.get('mood', 'professional')} mood, featuring {analysis.get('subject_matter', 'product')}, applying {user_angle or 'compelling angle'} through {user_concept or 'effective concept'}. Natural lighting, realistic textures, authentic appearance."
-    
+                return f"Cinematic advertising photograph, authentic human moment. {subject_matter} presented with {original_mood} emotional tone, naturally integrating {user_angle or 'persuasive angle'} through {user_concept or 'visual concept'}. Real-world lighting, natural skin textures, campaign-consistent styling."
+
     async def modify_creative(
         self,
         image_url: str,
@@ -391,29 +450,26 @@ Return ONLY the prompt text, no explanations."""
         logger.info("STEP 2: Generating modified image...")
         try:
             if mode == "modify":
-                # Use image-to-image with the original
-                model_key = image_model or "nano-banana"
-                logger.info(f"Using image-to-image with model: {model_key}")
-                
-                image_bytes, model_used, generated_url = await image_service.generate(
-                    prompt=prompt,
-                    model_key=model_key,
-                    width=width,
-                    height=height,
-                    image_url=image_url,  # Pass original for image-to-image
-                )
+                # For subtle modifications with image-to-image
+                # Note: nano-banana models don't support guidance_scale or strength parameters
+                # The model will naturally preserve the original image based on the prompt
+                generation_params = {
+                    "prompt": prompt,
+                    "model_key": image_model or "nano-banana",
+                    "width": width,
+                    "height": height,
+                    "image_url": image_url,
+                }
             else:
-                # Generate new image inspired by original
-                model_key = image_model or "nano-banana"
-                logger.info(f"Generating new image with model: {model_key}")
-                
-                image_bytes, model_used, generated_url = await image_service.generate(
-                    prompt=prompt,
-                    model_key=model_key,
-                    width=width,
-                    height=height,
-                    # No image_url - generate fresh
-                )
+                # For inspired generation (text-to-image)
+                generation_params = {
+                    "prompt": prompt,
+                    "model_key": image_model or "nano-banana",
+                    "width": width,
+                    "height": height,
+                }
+            
+            image_bytes, model_used, generated_url = await image_service.generate(**generation_params)
             
             if not image_bytes:
                 raise Exception("Image generation returned no data")