remove the variations option

frontend/app/creative/modify/page.tsx

@@ -41,10 +41,13 @@ export default function CreativeModifyPage() {
   const [mode, setMode] = useState<ModificationMode>("modify");
   const [imageModel, setImageModel] = useState<string | null>(null);
   const [userPrompt, setUserPrompt] = useState("");
+  const [variationCount, setVariationCount] = useState(1);
 
   // Result state
-  const [result, setResult] = useState<ModifiedImageResult | null>(null);
-  const [generatedPrompt, setGeneratedPrompt] = useState<string | null>(null);
+  const [results, setResults] = useState<ModifiedImageResult[]>([]);
+  const [generatedPrompts, setGeneratedPrompts] = useState<string[]>([]);
+
+  const primaryResult = results[0] || null;
 
   // Correction modal state
   const [isCorrectionModalOpen, setIsCorrectionModalOpen] = useState(false);
@@ -99,29 +102,37 @@ export default function CreativeModifyPage() {
     setError(null);
 
     try {
-      const response = await modifyCreative({
-        image_url: originalImageUrl,
-        analysis: analysis || undefined,
-        angle: angle.trim() || undefined,
-        concept: concept.trim() || undefined,
-        mode,
-        image_model: imageModel,
-        user_prompt: userPrompt.trim() || undefined,
-      });
-
-      if (response.status !== "success" || !response.image) {
-        throw new Error(response.error || "Failed to modify creative");
+      const variationResults: ModifiedImageResult[] = [];
+      const promptResults: string[] = [];
+
+      for (let i = 0; i < variationCount; i += 1) {
+        const response = await modifyCreative({
+          image_url: originalImageUrl,
+          analysis: analysis || undefined,
+          angle: angle.trim() || undefined,
+          concept: concept.trim() || undefined,
+          mode,
+          image_model: imageModel,
+          user_prompt: userPrompt.trim() || undefined,
+        });
+
+        if (response.status !== "success" || !response.image) {
+          throw new Error(response.error || "Failed to modify creative");
+        }
+
+        variationResults.push(response.image);
+        promptResults.push(response.prompt || "");
       }
 
-      setResult(response.image);
-      setGeneratedPrompt(response.prompt || null);
+      setResults(variationResults);
+      setGeneratedPrompts(promptResults);
       setCurrentStep("result");
     } catch (err) {
       setError(err instanceof Error ? err.message : "An error occurred");
     } finally {
       setIsLoading(false);
     }
-  }, [originalImageUrl, analysis, angle, concept, mode, imageModel, userPrompt]);
+  }, [originalImageUrl, analysis, angle, concept, mode, imageModel, userPrompt, variationCount]);
 
   // Reset to start over
   const handleStartOver = useCallback(() => {
@@ -134,15 +145,16 @@ export default function CreativeModifyPage() {
     setMode("modify");
     setImageModel(null);
     setUserPrompt("");
-    setResult(null);
-    setGeneratedPrompt(null);
+    setVariationCount(1);
+    setResults([]);
+    setGeneratedPrompts([]);
     setError(null);
   }, []);
 
   // Go back to modification form
   const handleModifyAgain = useCallback(() => {
-    setResult(null);
-    setGeneratedPrompt(null);
+    setResults([]);
+    setGeneratedPrompts([]);
     setCurrentStep("analysis");
   }, []);
 
@@ -155,8 +167,8 @@ export default function CreativeModifyPage() {
 
   // Go back to analysis step from result
   const handleBackToAnalysis = useCallback(() => {
-    setResult(null);
-    setGeneratedPrompt(null);
+    setResults([]);
+    setGeneratedPrompts([]);
     setCurrentStep("analysis");
     setError(null);
   }, []);
@@ -234,6 +246,7 @@ export default function CreativeModifyPage() {
    - Modify: Change angle/concept while keeping similar structure
    - Regenerate: Create completely new version
    - Custom: Use your own prompt for specific changes
+   - Variations: Use the slider to request up to 3 remixed outputs in one run
 
 4. RESULT: Get your modified creative with new image and updated copy
 
@@ -242,8 +255,7 @@ Perfect for iterating on winning ads or testing new angles with proven visuals."
             />
           </div>
           <p className="text-gray-600 max-w-2xl mx-auto">
-            Upload your existing creative, let AI analyze it, then apply new
-            angles or concepts to generate variations
+            Upload your existing creative, let AI analyze it, then apply new angles or concepts to generate up to three fresh variations in a single pass.
           </p>
         </div>
 
@@ -381,11 +393,13 @@ Perfect for iterating on winning ads or testing new angles with proven visuals."
                 mode={mode}
                 imageModel={imageModel}
                 userPrompt={userPrompt}
+              variationCount={variationCount}
                 onAngleChange={setAngle}
                 onConceptChange={setConcept}
                 onModeChange={setMode}
                 onImageModelChange={setImageModel}
                 onUserPromptChange={setUserPrompt}
+              onVariationCountChange={setVariationCount}
                 onSubmit={handleModify}
                 isLoading={isLoading}
               />
@@ -393,7 +407,7 @@ Perfect for iterating on winning ads or testing new angles with proven visuals."
           )}
 
           {/* Result Step */}
-          {currentStep === "result" && result && (
+          {currentStep === "result" && results.length > 0 && primaryResult && (
             <div className="space-y-6">
               {/* Back Button */}
               <button
@@ -410,10 +424,12 @@ Perfect for iterating on winning ads or testing new angles with proven visuals."
               {/* Before / After Comparison */}
               <Card variant="glass">
                 <CardHeader>
-                  <CardTitle>Result</CardTitle>
+                  <CardTitle>
+                    {variationCount > 1 ? "Variations" : "Result"}
+                  </CardTitle>
                 </CardHeader>
                 <CardContent>
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] gap-6">
                     {/* Original */}
                     <div>
                       <h4 className="text-sm font-semibold text-gray-700 mb-2">
@@ -430,20 +446,31 @@ Perfect for iterating on winning ads or testing new angles with proven visuals."
                       </div>
                     </div>
 
-                    {/* Modified */}
-                    <div>
-                      <h4 className="text-sm font-semibold text-gray-700 mb-2">
-                        {mode === "modify" ? "Modified" : "Inspired"}
-                      </h4>
-                      <div className="rounded-xl overflow-hidden bg-gray-100">
-                        {result.image_url && (
-                          <img
-                            src={result.image_url}
-                            alt="Modified creative"
-                            className="w-full h-auto object-contain"
-                          />
-                        )}
-                      </div>
+                    {/* Variations */}
+                    <div className="space-y-4">
+                      {results.map((variation, index) => (
+                        <div key={variation.image_url ?? index} className="rounded-xl overflow-hidden bg-gray-100 border border-gray-200/60">
+                          <div className="flex items-center justify-between px-4 py-3 bg-white/60 border-b border-gray-200/60">
+                            <span className="text-sm font-semibold text-gray-700">
+                              Variation {index + 1}
+                            </span>
+                            <span className="text-xs uppercase tracking-wide text-gray-400">
+                              {mode === "modify" ? "Modify" : "Inspired"}
+                            </span>
+                          </div>
+                          {variation.image_url ? (
+                            <img
+                              src={variation.image_url}
+                              alt={`Variation ${index + 1}`}
+                              className="w-full h-auto object-contain bg-white"
+                            />
+                          ) : (
+                            <div className="p-6 text-center text-sm text-gray-500">
+                              Image preview unavailable
+                            </div>
+                          )}
+                        </div>
+                      ))}
                     </div>
                   </div>
                 </CardContent>
@@ -456,23 +483,23 @@ Perfect for iterating on winning ads or testing new angles with proven visuals."
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <div className="grid grid-cols-2 gap-4">
-                    {result.applied_angle && (
+                    {primaryResult.applied_angle && (
                       <div className="bg-orange-50 rounded-xl p-4">
                         <h4 className="text-sm font-semibold text-orange-700 mb-1">
                           Applied Angle
                         </h4>
                         <p className="text-orange-900">
-                          {result.applied_angle}
+                          {primaryResult.applied_angle}
                         </p>
                       </div>
                     )}
-                    {result.applied_concept && (
+                    {primaryResult.applied_concept && (
                       <div className="bg-green-50 rounded-xl p-4">
                         <h4 className="text-sm font-semibold text-green-700 mb-1">
                           Applied Concept
                         </h4>
                         <p className="text-green-900">
-                          {result.applied_concept}
+                          {primaryResult.applied_concept}
                         </p>
                       </div>
                     )}
@@ -482,26 +509,35 @@ Perfect for iterating on winning ads or testing new angles with proven visuals."
                     <h4 className="text-sm font-semibold text-gray-700 mb-1">
                       Mode
                     </h4>
-                    <p className="text-gray-900 capitalize">{result.mode}</p>
+                    <p className="text-gray-900 capitalize">{primaryResult.mode}</p>
                   </div>
 
-                  {result.model_used && (
+                  {primaryResult.model_used && (
                     <div className="bg-blue-50 rounded-xl p-4">
                       <h4 className="text-sm font-semibold text-blue-700 mb-1">
                         Model Used
                       </h4>
-                      <p className="text-blue-900">{result.model_used}</p>
+                      <p className="text-blue-900">{primaryResult.model_used}</p>
                     </div>
                   )}
 
-                  {generatedPrompt && (
-                    <div>
-                      <h4 className="text-sm font-semibold text-gray-700 mb-1">
-                        Generated Prompt
+                  {generatedPrompts.length > 0 && (
+                    <div className="space-y-2">
+                      <h4 className="text-sm font-semibold text-gray-700">
+                        Generated Prompts
                       </h4>
-                      <p className="text-gray-600 text-sm bg-gray-50 p-3 rounded-lg">
-                        {generatedPrompt}
-                      </p>
+                      <div className="space-y-2">
+                        {generatedPrompts.map((prompt, index) => (
+                          <div key={`prompt-${index}`} className="bg-white rounded-lg border border-gray-100 p-3">
+                            <p className="text-xs font-semibold text-gray-500 mb-1">
+                              Variation {index + 1}
+                            </p>
+                            <p className="text-gray-600 text-sm whitespace-pre-wrap">
+                              {prompt}
+                            </p>
+                          </div>
+                        ))}
+                      </div>
                     </div>
                   )}
                 </CardContent>
@@ -525,33 +561,43 @@ Perfect for iterating on winning ads or testing new angles with proven visuals."
                 </button>
               </div>
 
-              {/* Download Button */}
-              {result.image_url && (
-                <div className="text-center">
-                  <a
-                    href={result.image_url}
-                    download={result.filename || "modified-creative.png"}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 font-medium"
-                  >
-                    <svg
-                      className="w-5 h-5"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
+              {/* Download Buttons */}
+              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+                {results.map((variation, index) => (
+                  variation.image_url ? (
+                    <a
+                      key={`download-${variation.image_url}-${index}`}
+                      href={variation.image_url}
+                      download={variation.filename || `modified-creative-${index + 1}.png`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center justify-center gap-2 py-3 px-4 border-2 border-blue-200 text-blue-600 font-medium rounded-xl hover:bg-blue-50 transition-colors"
                     >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                      />
-                    </svg>
-                    Download Image
-                  </a>
-                </div>
-              )}
+                      <svg
+                        className="w-5 h-5"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                        />
+                      </svg>
+                      Download Variation {index + 1}
+                    </a>
+                  ) : (
+                    <div
+                      key={`download-placeholder-${index}`}
+                      className="py-3 px-4 border-2 border-gray-200 text-gray-400 font-medium rounded-xl text-center"
+                    >
+                      Variation {index + 1} unavailable
+                    </div>
+                  )
+                ))}
+              </div>
             </div>
           )}
         </div>

frontend/app/generate/batch/page.tsx

@@ -16,7 +16,6 @@ export default function BatchGeneratePage() {
   const [progress, setProgress] = useState(0);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [batchCount, setBatchCount] = useState(0);
-  const [batchImagesPerAd, setBatchImagesPerAd] = useState(1);
   const [generationStartTime, setGenerationStartTime] = useState<number | null>(null);
 
   // Request notification permission
@@ -39,13 +38,12 @@ export default function BatchGeneratePage() {
     }
   }, [progress, results.length]);
 
-  const handleGenerate = async (data: { niche: Niche; count: number; images_per_ad: number; image_model?: string | null }) => {
+  const handleGenerate = async (data: { niche: Niche; count: number; image_model?: string | null }) => {
     setResults([]);
     setIsGenerating(true);
     setProgress(0);
     setCurrentIndex(0);
     setBatchCount(data.count);
-    setBatchImagesPerAd(data.images_per_ad);
     setGenerationStartTime(Date.now());
 
     // Estimate time per ad (roughly 30-60 seconds per ad)
@@ -113,7 +111,6 @@ export default function BatchGeneratePage() {
             progress={progress}
             currentIndex={currentIndex}
             totalCount={batchCount}
-            imagesPerAd={batchImagesPerAd}
             generationStartTime={generationStartTime}
           />
         )}

frontend/app/generate/page.tsx

@@ -33,7 +33,6 @@ export default function GeneratePage() {
   const [currentBatchIndex, setCurrentBatchIndex] = useState(0);
   const [batchProgress, setBatchProgress] = useState(0);
   const [batchCount, setBatchCount] = useState(0);
-  const [batchImagesPerAd, setBatchImagesPerAd] = useState(1);
 
   // Motivators (Matrix mode): generate from angle+concept, user selects one or more for ad generation
   const [motivators, setMotivators] = useState<string[]>([]);
@@ -239,7 +238,6 @@ export default function GeneratePage() {
         const batchResponse = await generateBatch({
           niche: formattedData.niche,
           count: formattedData.num_images,
-          images_per_ad: 1, // Each ad gets 1 image
           image_model: formattedData.image_model,
           method: "standard", // Use standard method only
           target_audience: formattedData.target_audience,
@@ -451,7 +449,7 @@ export default function GeneratePage() {
     }
   };
 
-  const handleBatchGenerate = async (data: { niche: Niche; count: number; images_per_ad: number; image_model?: string | null; target_audience?: string | null; offer?: string | null }) => {
+  const handleBatchGenerate = async (data: { niche: Niche; count: number; image_model?: string | null; target_audience?: string | null; offer?: string | null }) => {
     setBatchResults([]);
     setIsGenerating(true);
     setGenerationStartTime(Date.now());
@@ -464,7 +462,6 @@ export default function GeneratePage() {
     setBatchProgress(0);
     setCurrentBatchIndex(0);
     setBatchCount(data.count);
-    setBatchImagesPerAd(data.images_per_ad);
 
     // Estimate time per ad (roughly 30-60 seconds per ad)
     const estimatedTimePerAd = 45; // seconds
@@ -529,6 +526,8 @@ export default function GeneratePage() {
     setIsGenerating(true);
     setGenerationStartTime(Date.now());
     
+    const imagesPerStrategy = 1;
+
     const formattedData: {
       niche: Niche;
       custom_niche?: string;
@@ -542,6 +541,7 @@ export default function GeneratePage() {
       custom_niche: data.custom_niche || undefined,
       target_audience: data.target_audience || undefined,
       offer: data.offer || undefined,
+      num_images: imagesPerStrategy,
     };
     
     // Calculate estimated time based on strategies and images
@@ -557,7 +557,7 @@ export default function GeneratePage() {
       20 + // Step 2: Retrieve knowledge
       25 + // Step 3: Creative Director
       (data.num_strategies * estimatedTimePerStrategy) + // Step 4: Process strategies
-      (data.num_strategies * data.num_images * estimatedTimePerImage); // Step 5: Generate images
+      (data.num_strategies * imagesPerStrategy * estimatedTimePerImage); // Step 5: Generate images
     
     let elapsedTime = 0;
     let progressInterval: NodeJS.Timeout | null = null;
@@ -591,8 +591,8 @@ export default function GeneratePage() {
       { 
         step: "image" as const, 
         progress: 70, 
-        message: `🖼️ Step 5: Generating ${data.num_images} image(s) per strategy...`,
-        duration: data.num_strategies * data.num_images * estimatedTimePerImage // seconds
+        message: "🖼️ Step 5: Generating one image for each strategy...",
+        duration: data.num_strategies * imagesPerStrategy * estimatedTimePerImage // seconds
       },
     ];
     
@@ -786,13 +786,12 @@ export default function GeneratePage() {
         {isGenerating && (
           <>
             {mode === "batch" ? (
-              <BatchProgressComponent
-                progress={batchProgress}
-                currentIndex={currentBatchIndex}
-                totalCount={batchCount}
-                imagesPerAd={batchImagesPerAd}
-                generationStartTime={generationStartTime}
-              />
+                <BatchProgressComponent
+                  progress={batchProgress}
+                  currentIndex={currentBatchIndex}
+                  totalCount={batchCount}
+                  generationStartTime={generationStartTime}
+                />
             ) : (
               <GenerationProgressComponent progress={progress} generationStartTime={generationStartTime} />
             )}

frontend/components/creative/ModificationForm.tsx

@@ -27,11 +27,13 @@ interface ModificationFormProps {
   mode: ModificationMode;
   imageModel: string | null;
   userPrompt: string;
+  variationCount: number;
   onAngleChange: (value: string) => void;
   onConceptChange: (value: string) => void;
   onModeChange: (mode: ModificationMode) => void;
   onImageModelChange: (model: string | null) => void;
   onUserPromptChange: (value: string) => void;
+  onVariationCountChange: (value: number) => void;
   onSubmit: () => void;
   isLoading: boolean;
 }
@@ -44,11 +46,13 @@ export const ModificationForm: React.FC<ModificationFormProps> = ({
   mode,
   imageModel,
   userPrompt,
+  variationCount,
   onAngleChange,
   onConceptChange,
   onModeChange,
   onImageModelChange,
   onUserPromptChange,
+  onVariationCountChange,
   onSubmit,
   isLoading,
 }) => {
@@ -318,6 +322,43 @@ export const ModificationForm: React.FC<ModificationFormProps> = ({
           </div>
         </div>
 
+        {/* Variation Count */}
+        <div className="space-y-4 pt-4 border-t border-gray-100">
+          <div className="flex items-center gap-2">
+            <Sparkles className="w-4 h-4 text-blue-500" />
+            <label className="text-sm font-bold text-gray-700 uppercase tracking-wider">
+              Variations to Generate
+            </label>
+          </div>
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-sm font-semibold text-gray-600">
+                {variationCount} variation{variationCount > 1 ? "s" : ""}
+              </span>
+              <span className="text-xs text-gray-500">Up to 3 total</span>
+            </div>
+            <input
+              type="range"
+              min={1}
+              max={3}
+              step={1}
+              value={variationCount}
+              onChange={(e) => onVariationCountChange(Number(e.target.value))}
+              disabled={isLoading}
+              className="w-full accent-blue-500"
+            />
+            <div className="flex justify-between text-xs text-gray-400 mt-1 uppercase tracking-wide">
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </div>
+            <p className="text-xs text-gray-500 flex items-center gap-1.5 px-1 mt-2">
+              <Info className="w-3 h-3" />
+              Generates that many distinct remixes of your original creative.
+            </p>
+          </div>
+        </div>
+
         {/* User Prompt (Optional) */}
         <div className="space-y-4 pt-4 border-t border-gray-100">
           <div className="flex items-center gap-2">

frontend/components/generation/BatchForm.tsx

@@ -13,7 +13,7 @@ import type { Niche } from "@/types/api";
 import { InfoButton } from "@/components/ui/InfoButton";
 
 interface BatchFormProps {
-  onSubmit: (data: { niche: Niche; count: number; images_per_ad: number; image_model?: string | null; target_audience?: string | null; offer?: string | null }) => Promise<void>;
+  onSubmit: (data: { niche: Niche; count: number; image_model?: string | null; target_audience?: string | null; offer?: string | null }) => Promise<void>;
   isLoading: boolean;
 }
 
@@ -31,7 +31,6 @@ export const BatchForm: React.FC<BatchFormProps> = ({
     defaultValues: {
       niche: "home_insurance" as const,
       count: 5,
-      images_per_ad: 1,
       image_model: null,
       target_audience: "",
       offer: "",
@@ -39,7 +38,6 @@ export const BatchForm: React.FC<BatchFormProps> = ({
   });
 
   const count = watch("count");
-  const imagesPerAd = watch("images_per_ad");
   const selectedModel = watch("image_model");
 
   return (
@@ -49,7 +47,7 @@ export const BatchForm: React.FC<BatchFormProps> = ({
           <CardTitle>Batch Generation</CardTitle>
           <InfoButton
             title="Batch Generation Flow"
-            content="Generate multiple ads simultaneously for A/B testing and variety. Each ad is created with randomized strategies, giving you diverse options to test. You can generate up to 100 ads with 1-3 variations per ad. Perfect for finding winning combinations through volume testing."
+            content="Generate multiple ads simultaneously for A/B testing and variety. Each ad is created with randomized strategies, giving you diverse options to test. You can generate up to 100 ads in a single run to quickly find winning combinations."
             position="bottom"
           />
         </div>
@@ -130,48 +128,13 @@ export const BatchForm: React.FC<BatchFormProps> = ({
             )}
           </div>
 
-          <div>
-            <label className="block text-sm font-semibold text-gray-700 mb-2">
-              Variations per Ad: <span className="text-blue-600 font-bold">{imagesPerAd}</span>
-            </label>
-            <input
-              type="range"
-              min="1"
-              max="3"
-              step="1"
-              className="w-full accent-blue-500"
-              {...register("images_per_ad", { valueAsNumber: true })}
-            />
-            <div className="flex justify-between text-xs text-gray-500 mt-1 font-medium">
-              <span>1</span>
-              <span>3</span>
-            </div>
-            <p className="text-xs text-gray-500 mt-1">
-              Each variation will have a unique image and slight copy variations
-            </p>
-            {errors.images_per_ad && (
-              <p className="mt-1 text-sm text-red-600">
-                {errors.images_per_ad.message}
-              </p>
-            )}
-          </div>
-
-          <div className="bg-gradient-to-r from-blue-50 to-cyan-50 border border-blue-200 rounded-xl p-4">
-            <p className="text-sm font-semibold text-gray-800">
-              <strong>Estimated:</strong> {count} ads × {imagesPerAd} variation(s) = {count * imagesPerAd} total variations
-            </p>
-            <p className="text-xs text-gray-600 mt-1">
-              This may take several minutes to complete
-            </p>
-          </div>
-
           {/* Cost Estimator */}
           <div className="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl p-4">
             <p className="text-sm font-semibold text-gray-800">
-              💰 <strong>Estimated Cost:</strong> {formatCost(getModelCost(selectedModel || "", count * imagesPerAd))}
+              💰 <strong>Estimated Cost:</strong> {formatCost(getModelCost(selectedModel || "", count))}
             </p>
             <p className="text-xs text-gray-600 mt-1">
-              {count * imagesPerAd} total image{count * imagesPerAd > 1 ? 's' : ''} × {IMAGE_MODELS.find(m => m.value === (selectedModel || ""))?.label.split(' - ')[0] || "Default model"}
+              {count} total image{count > 1 ? 's' : ''} × {IMAGE_MODELS.find(m => m.value === (selectedModel || ""))?.label.split(' - ')[0] || "Default model"}
             </p>
           </div>
 

frontend/components/generation/BatchProgress.tsx

@@ -3,14 +3,9 @@
 import React, { useState, useEffect } from "react";
 import { Card, CardContent } from "@/components/ui/Card";
 import { ProgressBar } from "@/components/ui/ProgressBar";
-import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
 import {
   Sparkles,
-  Image as ImageIcon,
-  Database,
   CheckCircle2,
-  AlertCircle,
-  Wand2,
   Zap,
   Package,
   X
@@ -21,19 +16,17 @@ interface BatchProgressProps {
   progress: number; // 0-100
   currentIndex?: number; // Current ad being generated (0-based)
   totalCount?: number; // Total number of ads
-  imagesPerAd?: number; // Number of images per ad
   generationStartTime?: number | null;
   message?: string;
 }
 
 const BATCH_MESSAGES = [
-  "Creating your ad variations...",
-  "Generating unique ad creatives...",
+  "Generating your ad set...",
   "Crafting compelling visuals...",
   "Building your ad collection...",
   "Almost there! Finalizing your ads...",
-  "Working on the perfect variations...",
-  "This batch is going to be amazing!",
+  "Perfecting each creative...",
+  "Lining up scroll-stopping ads...",
   "Great things take time - we're crafting perfection!",
 ] as const;
 
@@ -52,7 +45,6 @@ export const BatchProgressComponent: React.FC<BatchProgressProps> = ({
   progress,
   currentIndex = 0,
   totalCount = 0,
-  imagesPerAd = 1,
   generationStartTime,
   message,
 }) => {
@@ -65,8 +57,6 @@ export const BatchProgressComponent: React.FC<BatchProgressProps> = ({
   const isComplete = clampedProgress >= 100;
   const isStuckAtHighProgress = clampedProgress >= 85 && !isComplete;
   const currentAdNumber = currentIndex + 1;
-  const totalVariations = totalCount * imagesPerAd;
-  const currentVariation = currentIndex * imagesPerAd + 1;
 
   // Calculate elapsed time
   useEffect(() => {
@@ -185,15 +175,6 @@ export const BatchProgressComponent: React.FC<BatchProgressProps> = ({
                     {totalCount}
                   </p>
                 </div>
-                <div className="bg-gradient-to-br from-cyan-50 to-pink-50 rounded-xl p-4 border border-cyan-200">
-                  <div className="flex items-center space-x-2 mb-1">
-                    <ImageIcon className="h-4 w-4 text-cyan-600" />
-                    <p className="text-xs font-semibold text-gray-600">Variations</p>
-                  </div>
-                  <p className="text-2xl font-bold bg-gradient-to-r from-cyan-600 to-pink-600 bg-clip-text text-transparent">
-                    {totalVariations}
-                  </p>
-                </div>
                 <div className="bg-gradient-to-br from-pink-50 to-purple-50 rounded-xl p-4 border border-pink-200">
                   <div className="flex items-center space-x-2 mb-1">
                     <Sparkles className="h-4 w-4 text-pink-600" />
@@ -218,10 +199,9 @@ export const BatchProgressComponent: React.FC<BatchProgressProps> = ({
                 progress={clampedProgress}
                 showPercentage={false}
               />
-              {totalCount > 0 && currentIndex >= 0 && (
+                  {totalCount > 0 && currentIndex >= 0 && (
                 <p className="text-xs text-gray-500 text-center mt-2">
                   {currentAdNumber} of {totalCount} ads completed
-                  {imagesPerAd > 1 && ` • ${currentVariation} of ${totalVariations} variations`}
                 </p>
               )}
             </div>
@@ -236,7 +216,7 @@ export const BatchProgressComponent: React.FC<BatchProgressProps> = ({
                       Batch generation completed successfully!
                     </p>
                     <p className="text-xs text-green-700 mt-0.5">
-                      {totalCount > 0 ? `${totalCount} ads with ${totalVariations} total variations are ready!` : "All ads are ready to use"}
+                      {totalCount > 0 ? `${totalCount} ads are ready!` : "All ads are ready to use"}
                     </p>
                   </div>
                 </div>

frontend/components/generation/ExtensiveForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -55,6 +55,7 @@ export const ExtensiveForm: React.FC<ExtensiveFormProps> = ({
     handleSubmit,
     formState: { errors },
     watch,
+    setValue,
   } = useForm<ExtensiveFormData>({
     resolver: zodResolver(extensiveSchema),
     defaultValues: {
@@ -68,11 +69,19 @@ export const ExtensiveForm: React.FC<ExtensiveFormProps> = ({
     },
   });
 
-  const numImages = watch("num_images");
+  const numImages = 1;
   const numStrategies = watch("num_strategies");
   const selectedNiche = watch("niche");
   const selectedModel = watch("image_model");
 
+  useEffect(() => {
+    setValue("num_images", numImages, { shouldDirty: false, shouldValidate: false });
+  }, [numImages, setValue]);
+
+  const onFormSubmit = handleSubmit(({ num_images, ...rest }) =>
+    onSubmit({ ...rest, num_images: num_images ?? 1 })
+  );
+
   return (
     <Card variant="glass">
       <CardHeader>
@@ -90,7 +99,7 @@ export const ExtensiveForm: React.FC<ExtensiveFormProps> = ({
 
 4. COPYWRITER: Writes compelling ad copy (title, body, description) that matches each strategy's emotional tone and psychology trigger.
 
-You can generate multiple strategies (1-10) and multiple variations per strategy (1-3) for comprehensive testing."
+You can generate multiple strategies (1-10). Each strategy includes one image and a full ad package for comprehensive testing."
             position="bottom"
           />
         </div>
@@ -99,7 +108,8 @@ You can generate multiple strategies (1-10) and multiple variations per strategy
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+        <form onSubmit={onFormSubmit} className="space-y-6">
+          <input type="hidden" value={numImages} {...register("num_images", { valueAsNumber: true })} />
           <Select
             label="Niche"
             options={[
@@ -166,27 +176,6 @@ You can generate multiple strategies (1-10) and multiple variations per strategy
             {...register("image_model")}
           />
 
-          <div>
-            <label className="block text-sm font-semibold text-gray-700 mb-2">
-              Variations per Strategy: <span className="text-blue-600 font-bold">{numImages}</span>
-            </label>
-            <input
-              type="range"
-              min="1"
-              max="3"
-              step="1"
-              className="w-full accent-blue-500"
-              {...register("num_images", { valueAsNumber: true })}
-            />
-            <div className="flex justify-between text-xs text-gray-500 mt-1 font-medium">
-              <span>1</span>
-              <span>3</span>
-            </div>
-            <p className="text-xs text-gray-500 mt-1">
-              Each variation will have a unique image and slight copy variations
-            </p>
-          </div>
-
           <div>
             <label className="block text-sm font-semibold text-gray-700 mb-2">
               Number of Strategies: <span className="text-blue-600 font-bold">{numStrategies}</span>
@@ -208,22 +197,13 @@ You can generate multiple strategies (1-10) and multiple variations per strategy
             </p>
           </div>
 
-          <div className="bg-gradient-to-r from-blue-50 to-cyan-50 border border-blue-200 rounded-xl p-4">
-            <p className="text-sm font-semibold text-gray-800">
-              <strong>Estimated:</strong> {numStrategies} ads × {numImages} variation(s) = {numStrategies * numImages} total variations
-            </p>
-            <p className="text-xs text-gray-600 mt-1">
-              This may take several minutes to complete
-            </p>
-          </div>
-
           {/* Cost Estimator */}
           <div className="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl p-4">
             <p className="text-sm font-semibold text-gray-800">
-              💰 <strong>Estimated Cost:</strong> {formatCost(getModelCost(selectedModel || "", numStrategies * numImages))}
+              💰 <strong>Estimated Cost:</strong> {formatCost(getModelCost(selectedModel || "", numStrategies))}
             </p>
             <p className="text-xs text-gray-600 mt-1">
-              {numStrategies * numImages} total image{numStrategies * numImages > 1 ? 's' : ''} × {IMAGE_MODELS.find(m => m.value === (selectedModel || ""))?.label.split(' - ')[0] || "Default model"}
+              {numStrategies} total image{numStrategies > 1 ? 's' : ''} × {IMAGE_MODELS.find(m => m.value === (selectedModel || ""))?.label.split(' - ')[0] || "Default model"}
             </p>
           </div>
 

frontend/lib/api/endpoints.ts

@@ -56,7 +56,6 @@ export const generateAd = async (params: {
 export const generateBatch = async (params: {
   niche: Niche;
   count: number;
-  images_per_ad: number;
   image_model?: string | null;
   method?: "standard" | "matrix" | null;
   target_audience?: string | null;

frontend/lib/utils/validators.ts

@@ -13,7 +13,6 @@ export const generateAdSchema = z.object({
 export const generateBatchSchema = z.object({
   niche: z.enum(["home_insurance", "glp1", "auto_insurance"]),
   count: z.number().min(1).max(100),
-  images_per_ad: z.number().min(1).max(3),
   image_model: z.string().optional().nullable(),
   target_audience: z.string().optional().nullable(),
   offer: z.string().optional().nullable(),

services/generator.py

@@ -901,40 +901,23 @@ If you included people or vehicles, they should look realistic. Otherwise focus
         else:
             authenticity_section = """=== AUTHENTICITY REQUIREMENTS ===
 PEOPLE (if present):
-- Real people, NOT models
-- Age appropriate for niche (home insurance: 30-60 relatable homeowners; GLP-1: 30-50; auto insurance: only if format requires, avoid elderly/senior look)
-- Everyday clothes (not styled)
-- Natural expressions (not posed smiles)
-- Relatable, trustworthy appearance
-
-FACE REQUIREMENTS (CRITICAL - for natural, original-looking faces):
-- Photorealistic faces with natural skin texture and pores
-- Subtle facial asymmetry (real faces are never perfectly symmetrical)
-- Natural skin imperfections: fine lines, freckles, moles, natural variations in skin tone
-- Realistic facial features: unique nose shapes, eye shapes, lip shapes (not generic or perfect)
-- Natural hair texture with individual strands visible, not overly smooth or perfect
-- Authentic expressions with natural micro-expressions and subtle wrinkles around eyes/mouth
-- Realistic lighting on faces showing natural shadows and highlights
-- Natural skin tones with realistic color variations and undertones
-- Avoid overly smooth, plastic-looking skin
-- Avoid perfectly symmetrical faces
-- Avoid generic or "model-like" features
-- Include natural facial hair, age spots, or other authentic characteristics when appropriate
-- Faces should look like real photographs of real people, not AI-generated portraits
+- Real, relatable individuals in everyday clothing
+- Ages aligned to the niche (home insurance: 30-60 homeowners; GLP-1: 30-50; auto insurance: only when the format calls for people)
+- Natural expressions and trustworthy energy
+
+FACES (close-up):
+- Photorealistic texture with visible pores and natural variation
+- Subtle asymmetry and unique features—never plastic or model-perfect
+- Believable micro-expressions with natural lighting and tone shifts
 
 SETTINGS (if present):
-- Real locations (homes, yards, offices)
-- Lived-in, not staged
-- Everyday items and props
-- Natural clutter/imperfection
+- Real, lived-in locations with everyday props and a touch of natural clutter
 
 DOCUMENTS (if present):
-- Real-looking bills, statements, cards
-- Visible numbers and text
-- Red circles around key information
-- Slightly crumpled or worn"""
+- Realistic bills or statements with legible details, highlights, and gentle wear"""
         
         prompt = f"""Create a Facebook advertisement image that looks like AUTHENTIC, ORGANIC CONTENT.
+If the image looks like it belongs on a stock website, it has failed.
 
 {vintage_section}
 {framework_section}
@@ -959,65 +942,25 @@ COMPOSITION: {composition}
 {get_trending_image_guidance(trending_context)}
 
 {niche_image_guidance}
-
-=== OPTIONAL STYLING ELEMENTS ===
-Apply these effects IF they fit the natural aesthetic (not required):
-- Film grain (if vintage style)
-- Faded colors (if appropriate)
-- Natural lighting variations
-- Authentic imperfections (if they occur naturally)
-
 {authenticity_section}
 
 === NEGATIVE PROMPTS (AVOID) ===
-- NO clean, modern, HD digital look
-- NO perfect studio lighting
-- NO stock photo aesthetics
-- NO obviously AI-generated faces
-- NO polished advertising look
-- NO missing or garbled text
-- NO brand watermarks
-- NO distorted anatomy
-- NO AI-generated faces, synthetic faces, or fake-looking faces
-- NO overly smooth or plastic-looking skin
-- NO perfectly symmetrical faces
-- NO generic or model-like facial features
-- NO uncanny valley faces
-- NO faces that look like they came from a face generator
-- NO overly perfect, flawless skin
-- NO cartoon-like or stylized faces
-- NO faces with unnatural smoothness or lack of texture
-- NO faces that look like stock photos or professional headshots
-- NO decorative borders, frames, or boxes around the image
-- NO banners, badges, or logos in corners (like "BREAKING", "TRUSTED", etc.)
-- NO overlay boxes or rectangular overlays with text
-- NO decorative elements that frame the image
-- NO news-style chyrons or tickers
-- NO graphic design elements that look like they were added on top
-{"- NO numbers, prices, dollar amounts, or savings figures displayed prominently (except for auto insurance ad graphic layouts where they are part of the design)" if not is_auto_insurance_ad_format else "- For ad graphic layouts, numbers and prices are part of the design; ensure they are readable and correct"}
-{"- NO text overlays with numerical information" if not is_auto_insurance_ad_format else ""}
-{"- Focus on the ad layout: clear headline, prices/rates, and CTA as specified in VISUAL SCENE" if is_auto_insurance_ad_format else "- Focus on the natural scene only, no added presentation elements or numbers"}
-{"- NO fake, made-up, or gibberish brand or company names (e.g. no Alcata, MiCass, ECavelos); use only generic labels like 'Compare Providers' or omit" if is_auto_insurance_ad_format else ""}
-{"- NO in-car dashboard mockups, car interior screens, or displays inside vehicles; NO headshots or faces on screens" if is_auto_insurance_ad_format else ""}
-- NO mixing multiple framework formats (e.g., NO WhatsApp + memo, NO iMessage + document)
-- NO gibberish, placeholder text, or random characters in chat bubbles or documents
-- NO "lorem ipsum", placeholder text, or meaningless character strings
-- If using a framework format (e.g. iMessage, memo), use ONLY that one format - NO mixing
-- NO DUPLICATE TEXT - do not show the same text/message in multiple places
-- NO repeating headlines or prices in different formats or locations
-- Text should appear ONCE only, not multiple times in the image
+- No polished studio lighting or stock-photo aesthetics
+- No synthetic, plastic, or perfectly symmetrical faces
+- No decorative frames, overlays, badges, or repeated text
+- No gibberish, placeholder strings, or fake brand/company names{" (keep labels generic and only where the layout specifies)" if is_auto_insurance_ad_format else ""}
+- No mixing multiple framework formats or duplicating the same message
+{"- No in-car dashboard mockups, interior screens, or faces on displays" if is_auto_insurance_ad_format else ""}
+{"- Numbers, prices, or dollar amounts should appear only when they naturally belong in the scene" if not is_auto_insurance_ad_format else "- Keep typography limited to the headline, rates, and CTA exactly as described"}
 
 === OUTPUT ===
 {"Create a scroll-stopping auto insurance ad graphic. Follow the VISUAL SCENE layout exactly: headline, rates/prices, and CTA or buttons as specified. Use only the 6 defined formats (official notification, social post, coverage tiers, car brand grid, gift card CTA, savings/urgency). No other creative types. No fake brand names; no in-car dashboard or screen mockups; no headshots on displays. Clean typography and layout only." if is_auto_insurance_ad_format else f"Create a scroll-stopping image that feels authentic and organic. {'Include the headline text ONCE as specified above - do NOT duplicate it.' if include_text_overlay else 'Focus on the visual scene without text.'} The image should feel like real content - NOT like a designed advertisement."}
 
 CRITICAL REQUIREMENTS:
-{"- Use only the defined ad format from VISUAL SCENE. No dashboard/screen-in-car mockups. No made-up brand names. Borders and buttons only where the format specifies." if is_auto_insurance_ad_format else "- NO decorative borders, frames, or boxes"}
-- NO banners, badges, or logos in corners (unless part of the described ad layout)
-{"- Buttons, rate cards, and panels as described in VISUAL SCENE are part of the design." if is_auto_insurance_ad_format else "- NO overlay boxes or rectangular overlays"}
-- NO duplicate text - any text should appear ONLY ONCE
-- NO repeating the same message in different formats
-{"- Focus on the ad layout and typography as described in VISUAL SCENE." if is_auto_insurance_ad_format else "- Focus on the natural, authentic scene only"}
-- If text is included, show it in ONE location only, not multiple places"""
+{"- Follow the VISUAL SCENE layout exactly; use borders, buttons, and rate cards only where described." if is_auto_insurance_ad_format else "- Keep the scene natural—no added frames, overlays, or decorative borders"}
+- Place text or CTA elements exactly once in the location described
+- Present the core message once; do not repeat it elsewhere
+{"- Maintain clean typography and composition per VISUAL SCENE." if is_auto_insurance_ad_format else "- Focus on the authentic moment, not a polished ad layout"}"""
 
         # Refine and clean the prompt before sending (pass niche for demographic fixes)
         refined_prompt = self._refine_image_prompt(prompt, niche=niche)