feat: Add cost estimator for image generation in BatchForm, ExtensiveForm, and GenerationForm

frontend/components/generation/BatchForm.tsx

@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/Input";
 import { Select } from "@/components/ui/Select";
 import { Button } from "@/components/ui/Button";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
-import { IMAGE_MODELS } from "@/lib/constants/models";
+import { IMAGE_MODELS, getModelCost, formatCost } from "@/lib/constants/models";
 import type { Niche } from "@/types/api";
 
 interface BatchFormProps {
@@ -39,6 +39,7 @@ export const BatchForm: React.FC<BatchFormProps> = ({
 
   const count = watch("count");
   const imagesPerAd = watch("images_per_ad");
+  const selectedModel = watch("image_model");
 
   return (
     <Card variant="glass">
@@ -155,6 +156,16 @@ export const BatchForm: React.FC<BatchFormProps> = ({
             </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))}
+            </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"}
+            </p>
+          </div>
+
           <Button
             type="submit"
             variant="primary"

frontend/components/generation/ExtensiveForm.tsx

@@ -6,7 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
 import { Select } from "@/components/ui/Select";
-import { IMAGE_MODELS } from "@/lib/constants/models";
+import { IMAGE_MODELS, getModelCost, formatCost } from "@/lib/constants/models";
 import type { Niche } from "@/types/api";
 
 const extensiveSchema = z.object({
@@ -70,6 +70,7 @@ export const ExtensiveForm: React.FC<ExtensiveFormProps> = ({
   const numImages = watch("num_images");
   const numStrategies = watch("num_strategies");
   const selectedNiche = watch("niche");
+  const selectedModel = watch("image_model");
 
   return (
     <Card variant="glass">
@@ -197,6 +198,16 @@ export const ExtensiveForm: React.FC<ExtensiveFormProps> = ({
             </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))}
+            </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"}
+            </p>
+          </div>
+
           <button
             type="submit"
             disabled={isLoading}

frontend/components/generation/GenerationForm.tsx

@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/Input";
 import { Select } from "@/components/ui/Select";
 import { Button } from "@/components/ui/Button";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
-import { IMAGE_MODELS } from "@/lib/constants/models";
+import { IMAGE_MODELS, getModelCost, formatCost } from "@/lib/constants/models";
 import type { Niche } from "@/types/api";
 import { Loader2, TrendingUp, Check } from "lucide-react";
 import apiClient from "@/lib/api/client";
@@ -65,6 +65,7 @@ export const GenerationForm: React.FC<GenerationFormProps> = ({
   const numImages = watch("num_images");
   const currentNiche = watch("niche");
   const useTrending = watch("use_trending");
+  const selectedModel = watch("image_model");
 
   // Fetch trends when toggle is enabled
   const handleFetchTrends = async () => {
@@ -218,6 +219,16 @@ export const GenerationForm: React.FC<GenerationFormProps> = ({
             )}
           </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 || "", numImages))}
+            </p>
+            <p className="text-xs text-gray-600 mt-1">
+              {numImages} image{numImages > 1 ? 's' : ''} × {IMAGE_MODELS.find(m => m.value === (selectedModel || ""))?.label.split(' - ')[0] || "Default model"}
+            </p>
+          </div>
+
           <Button
             type="submit"
             variant="primary"

frontend/lib/constants/models.ts

@@ -3,22 +3,46 @@
  * These match the MODEL_REGISTRY in services/image.py
  */
 export const IMAGE_MODELS = [
-  { value: "", label: "Default (z-image-turbo)" },
-  // { value: "z-image-turbo", label: "Z-Image Turbo (Fast & High Quality)" },
-  { value: "gpt-image-1.5", label: "GPT Image 1.5 (OpenAI)" },
-  { value: "nano-banana", label: "Nano Banana (Google)" },
-  { value: "nano-banana-pro", label: "Nano Banana Pro (Google)" },
-  { value: "imagen-4", label: "Imagen-4 (Google)" },
-  { value: "imagen-4-ultra", label: "Imagen-4 Ultra (Google)" },
-  { value: "recraft-v3", label: "Recraft V3" },
-  { value: "ideogram-v3", label: "Ideogram V3" },
-  { value: "ideogram-v3-turbo", label: "Ideogram V3 Turbo" },
-  { value: "photon", label: "Photon (Luma)" },
-  { value: "seedream-3", label: "Seedream-3 (ByteDance)" },
-  { value: "seedream-4.5", label: "Seedream-4.5 (ByteDance)" },
-  { value: "flux-2-max", label: "Flux 2 Max (Black Forest Labs)" },
-  { value: "qwen-image", label: "Qwen Image (Pruna AI)" },
-  { value: "p-image", label: "P-Image (Pruna AI)" },
+  { value: "", label: "Default (z-image-turbo) - $0.01/image", price: 0.01, priceNote: "per megapixel" },
+  // { value: "z-image-turbo", label: "Z-Image Turbo (Fast & High Quality) - $0.01/image", price: 0.01, priceNote: "per megapixel" },
+  { value: "gpt-image-1.5", label: "GPT Image 1.5 (OpenAI) - $0.136/image", price: 0.136 },
+  { value: "nano-banana", label: "Nano Banana (Google) - $0.039/image", price: 0.039 },
+  { value: "nano-banana-pro", label: "Nano Banana Pro (Google) - $0.15/image", price: 0.15 },
+  { value: "imagen-4", label: "Imagen-4 (Google) - $0.04/image", price: 0.04 },
+  { value: "imagen-4-ultra", label: "Imagen-4 Ultra (Google) - $0.06/image", price: 0.06 },
+  { value: "imagen-4-fast", label: "Imagen-4 Fast (Google) - $0.02/image", price: 0.02 },
+  { value: "gemini-2.5-flash-image", label: "Gemini 2.5 Flash Image (Google) - $0.039/image", price: 0.039 },
+  { value: "recraft-v3", label: "Recraft V3", price: null },
+  { value: "ideogram-v3", label: "Ideogram V3", price: null },
+  { value: "ideogram-v3-turbo", label: "Ideogram V3 Turbo - $0.03/image", price: 0.03 },
+  { value: "photon", label: "Photon (Luma)", price: null },
+  { value: "seedream-3", label: "Seedream-3 (ByteDance)", price: null },
+  { value: "seedream-4.5", label: "Seedream-4.5 (ByteDance) - $0.04/image", price: 0.04 },
+  { value: "flux-2-max", label: "Flux 2 Max (Black Forest Labs) - $0.04/image", price: 0.04 },
+  { value: "qwen-image", label: "Qwen Image (Pruna AI) - $0.025/image", price: 0.025 },
+  { value: "p-image", label: "P-Image (Pruna AI) - $0.005/image (200 for $1)", price: 0.005 },
 ] as const;
 
 export type ImageModel = typeof IMAGE_MODELS[number]["value"];
+
+/**
+ * Get the estimated cost for generating images with a specific model
+ * @param modelValue - The model identifier
+ * @param imageCount - Number of images to generate (default: 1)
+ * @returns Estimated cost in USD, or null if pricing is not available
+ */
+export function getModelCost(modelValue: string, imageCount: number = 1): number | null {
+  const model = IMAGE_MODELS.find(m => m.value === modelValue);
+  if (!model || model.price === null) return null;
+  return model.price * imageCount;
+}
+
+/**
+ * Format the cost for display
+ * @param cost - Cost in USD
+ * @returns Formatted cost string
+ */
+export function formatCost(cost: number | null): string {
+  if (cost === null) return "Pricing not available";
+  return `$${cost.toFixed(3)}`;
+}