Refactor extensive ad generation to support batch responses

- Updated the API endpoint to return all generated ads instead of just the first one, enhancing the batch generation feature.
- Modified the frontend components to handle and display batch results, including updates to the GeneratePage and ExtensiveForm for better user feedback.
- Changed variable names and comments for clarity, ensuring consistency in terminology related to ad images and variations.
- Improved error handling and logging in the generator service to accommodate the new batch processing logic.

frontend/app/generate/matrix/page.tsx

@@ -170,7 +170,7 @@ export default function MatrixGeneratePage() {
 
               <div>
                 <label className="block text-sm font-semibold text-gray-700 mb-2">
-                  Number of Images: <span className="text-cyan-600 font-bold">{numImages}</span>
+                  Number of Ad Images: <span className="text-cyan-600 font-bold">{numImages}</span>
                 </label>
                 <input
                   type="range"

frontend/app/generate/page.tsx

@@ -491,7 +491,7 @@ export default function GeneratePage() {
         message: progressSteps[0].message,
       });
 
-      // Generate ad using extensive
+      // Generate ad using extensive - returns BatchResponse like batch flow
       const result = await generateExtensiveAd(data);
 
       // Clear progress interval
@@ -500,12 +500,9 @@ export default function GeneratePage() {
         progressInterval = null;
       }
 
-      // Verify all images are included
-      if (result.images && result.images.length > 0) {
-        console.log(`✓ Extensive generation completed with ${result.images.length} image(s)`);
-        console.log(`📅 Generated at: ${result.created_at || 'N/A'}`);
-        console.log(`📊 Note: Generate page shows images from the first strategy only. All strategies are saved separately in the database and appear on the Dashboard.`);
-      }
+      // Store results like batch generation
+      setBatchResults(result.ads);
+      setCurrentBatchIndex(0);
 
       setProgress({
         step: "saving",
@@ -516,14 +513,18 @@ export default function GeneratePage() {
       // Small delay to show saving step
       await new Promise(resolve => setTimeout(resolve, 500));
 
-      setCurrentGeneration(result);
+      // Show first result
+      if (result.ads.length > 0) {
+        setCurrentGeneration(result.ads[0]);
+      }
+
       setProgress({
         step: "complete",
         progress: 100,
         message: "Ad generated successfully!",
       });
 
-      toast.success("Ad generated successfully using Extensive!");
+      toast.success(`Generated ${result.count} ad(s) successfully using Extensive!`);
     } catch (error: any) {
       // Clear progress interval on error
       if (progressInterval) {
@@ -701,7 +702,7 @@ export default function GeneratePage() {
 
                     <div>
                       <label className="block text-sm font-semibold text-gray-700 mb-2">
-                        Number of Images: <span className="text-blue-600 font-bold">{numImages}</span>
+                        Number of Ad Images: <span className="text-blue-600 font-bold">{numImages}</span>
                       </label>
                       <input
                         type="range"

frontend/components/generation/AdPreview.tsx

@@ -238,29 +238,6 @@ export const AdPreview: React.FC<AdPreviewProps> = ({ ad }) => {
             </div>
           )}
 
-          {/* Headline */}
-          <div className="bg-white rounded-2xl shadow-lg shadow-blue-100/30 p-6 border-l-4 border-blue-500">
-            <div className="flex items-start justify-between gap-4 mb-3">
-              <h3 className="text-xs font-bold text-blue-600 uppercase tracking-wider">Headline</h3>
-              <div className="relative group">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => handleCopyText(ad.headline, "Headline")}
-                  className="text-blue-500 hover:bg-blue-50"
-                >
-                  <Copy className="h-4 w-4" />
-                </Button>
-                <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-blue-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
-                  Copy Headline
-                </span>
-              </div>
-            </div>
-            <h1 className="text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent leading-tight">
-              {ad.headline}
-            </h1>
-          </div>
-
           {/* Description */}
           {ad.description && (
             <div className="bg-white rounded-2xl shadow-md p-6 border-l-4 border-violet-500">
@@ -283,10 +260,7 @@ export const AdPreview: React.FC<AdPreviewProps> = ({ ad }) => {
               <p className="text-gray-700 leading-relaxed">{ad.description}</p>
             </div>
           )}
-        </div>
 
-        {/* Right Column - Additional Info */}
-        <div className="space-y-5">
           {/* Body Story */}
           {ad.body_story && (
             <div className="bg-white rounded-2xl shadow-md p-6 border-l-4 border-amber-500">
@@ -337,7 +311,10 @@ export const AdPreview: React.FC<AdPreviewProps> = ({ ad }) => {
               </div>
             </div>
           )}
+        </div>
 
+        {/* Right Column - CTA and Strategy */}
+        <div className="space-y-5">
           {/* CTA */}
           {ad.cta && (
             <div className="bg-gradient-to-r from-emerald-50 to-teal-50 rounded-2xl shadow-md p-6 border border-emerald-200">

frontend/components/generation/ExtensiveForm.tsx

@@ -115,7 +115,7 @@ export const ExtensiveForm: React.FC<ExtensiveFormProps> = ({
 
           <div>
             <label className="block text-sm font-semibold text-gray-700 mb-2">
-              Images per Strategy: <span className="text-blue-600 font-bold">{numImages}</span>
+              Variations per Strategy: <span className="text-blue-600 font-bold">{numImages}</span>
             </label>
             <input
               type="range"
@@ -129,6 +129,9 @@ export const ExtensiveForm: React.FC<ExtensiveFormProps> = ({
               <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>
@@ -152,6 +155,15 @@ export const ExtensiveForm: React.FC<ExtensiveFormProps> = ({
             </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>
+
           <button
             type="submit"
             disabled={isLoading}

frontend/components/generation/GenerationForm.tsx

@@ -97,7 +97,7 @@ export const GenerationForm: React.FC<GenerationFormProps> = ({
 
           <div>
             <label className="block text-sm font-semibold text-gray-700 mb-2">
-              Number of Images: <span className="text-blue-600 font-bold">{numImages}</span>
+              Number of Ad Images: <span className="text-blue-600 font-bold">{numImages}</span>
             </label>
             <input
               type="range"

frontend/lib/api/endpoints.ts

@@ -77,7 +77,7 @@ export const generateExtensiveAd = async (params: {
   num_images: number;
   image_model?: string | null;
   num_strategies: number;
-}): Promise<GenerateResponse> => {
+}): Promise<BatchResponse> => {
   // Ensure required parameters are always sent
   const requestParams = {
     niche: params.niche,
@@ -87,7 +87,7 @@ export const generateExtensiveAd = async (params: {
     ...(params.offer && { offer: params.offer }),
     ...(params.image_model && { image_model: params.image_model }),
   };
-  const response = await apiClient.post<GenerateResponse>("/extensive/generate", requestParams);
+  const response = await apiClient.post<BatchResponse>("/extensive/generate", requestParams);
   return response.data;
 };
 

main.py

@@ -1133,7 +1133,7 @@ class ExtensiveGenerateRequest(BaseModel):
     )
 
 
-@app.post("/extensive/generate", response_model=GenerateResponse)
+@app.post("/extensive/generate", response_model=BatchResponse)
 async def generate_extensive(
     request: ExtensiveGenerateRequest,
     username: str = Depends(get_current_user)
@@ -1150,10 +1150,10 @@ async def generate_extensive(
     4. Generates image prompts and ad copy in parallel
     5. Generates images for each strategy
     
-    Returns the first generated ad from the strategies.
+    Returns all generated ads from all strategies (like batch generation).
     """
     try:
-        result = await ad_generator.generate_ad_extensive(
+        results = await ad_generator.generate_ad_extensive(
             niche=request.niche,
             target_audience=request.target_audience,
             offer=request.offer,
@@ -1162,7 +1162,11 @@ async def generate_extensive(
             num_strategies=request.num_strategies,
             username=username,  # Pass current user
         )
-        return result
+        # Return as BatchResponse format
+        return BatchResponse(
+            count=len(results),
+            ads=results
+        )
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
 

services/generator.py

@@ -2152,11 +2152,10 @@ CONCEPT: {concept['name']}
             })
             print(f"✓ Strategy {idx + 1} completed with {len(generated_images)} image(s)")
         
-        # Return first result (or all if needed)
+        # Return all results (like batch generation)
         if all_results:
-            result = all_results[0]
-            print(f"📤 Returning result with {len(result.get('images', []))} image(s)")
-            return result  # Return first strategy result with all its images
+            print(f"📤 Returning {len(all_results)} strategy result(s)")
+            return all_results
         else:
             raise ValueError("No ads generated from extensive")