UPDATED GITIGNORE

.gitignore

@@ -10,7 +10,8 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
+# Python lib folders (not frontend/lib)
+/lib/
 lib64/
 parts/
 sdist/

frontend/lib/api/client.ts

@@ -0,0 +1,78 @@
+import axios, { AxiosInstance, AxiosError, InternalAxiosRequestConfig } from "axios";
+import { toast } from "react-hot-toast";
+
+// Use relative URL if NEXT_PUBLIC_API_URL is empty (same domain deployment)
+// Otherwise use the provided URL or default to localhost
+const API_URL = process.env.NEXT_PUBLIC_API_URL === "" 
+  ? ""  // Empty string means use relative URLs (same domain)
+  : (process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000");
+
+// Create axios instance
+const apiClient: AxiosInstance = axios.create({
+  baseURL: API_URL,
+  timeout: 300000, // 5 minutes for long-running operations
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// Request interceptor
+apiClient.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    // Add auth token if available
+    if (typeof window !== "undefined") {
+      const authStorage = localStorage.getItem("auth-storage");
+      if (authStorage) {
+        try {
+          const auth = JSON.parse(authStorage);
+          if (auth.state?.token) {
+            config.headers.Authorization = `Bearer ${auth.state.token}`;
+          }
+        } catch (e) {
+          // Ignore parsing errors
+        }
+      }
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor for error handling
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error: AxiosError) => {
+    if (error.response) {
+      // Server responded with error status
+      const status = error.response.status;
+      const message = (error.response.data as any)?.detail || error.message || "An error occurred";
+      
+      // Handle 401 Unauthorized - redirect to login
+      if (status === 401) {
+        if (typeof window !== "undefined" && !window.location.pathname.includes("/login")) {
+          // Clear auth storage
+          localStorage.removeItem("auth-storage");
+          // Redirect to login
+          window.location.href = "/login";
+        }
+      }
+      
+      // Don't show toast for 404s (handled in components) or 401s (handled above)
+      if (status !== 404 && status !== 401) {
+        toast.error(message);
+      }
+    } else if (error.request) {
+      // Request made but no response
+      toast.error("Network error. Please check your connection.");
+    } else {
+      // Something else happened
+      toast.error("An unexpected error occurred");
+    }
+    
+    return Promise.reject(error);
+  }
+);
+
+export default apiClient;

frontend/lib/api/endpoints.ts

@@ -0,0 +1,162 @@
+import apiClient from "./client";
+import type {
+  GenerateResponse,
+  BatchResponse,
+  MatrixGenerateResponse,
+  TestingMatrixResponse,
+  AnglesResponse,
+  ConceptsResponse,
+  CompatibleConceptsResponse,
+  AngleInfo,
+  ConceptInfo,
+  DbStatsResponse,
+  AdsListResponse,
+  AdCreativeDB,
+  HealthResponse,
+  ApiRootResponse,
+  ImageCorrectResponse,
+  LoginResponse,
+  Niche,
+} from "../../types/api";
+
+// Health & Info
+export const getHealth = async (): Promise<HealthResponse> => {
+  const response = await apiClient.get<HealthResponse>("/health");
+  return response.data;
+};
+
+export const getApiInfo = async (): Promise<ApiRootResponse> => {
+  const response = await apiClient.get<ApiRootResponse>("/");
+  return response.data;
+};
+
+// Generation Endpoints
+export const generateAd = async (params: {
+  niche: Niche;
+  num_images: number;
+  image_model?: string | null;
+}): Promise<GenerateResponse> => {
+  const response = await apiClient.post<GenerateResponse>("/generate", params);
+  return response.data;
+};
+
+export const generateBatch = async (params: {
+  niche: Niche;
+  count: number;
+  images_per_ad: number;
+  image_model?: string | null;
+}): Promise<BatchResponse> => {
+  const response = await apiClient.post<BatchResponse>("/generate/batch", params);
+  return response.data;
+};
+
+// Matrix Endpoints
+export const generateMatrixAd = async (params: {
+  niche: Niche;
+  angle_key?: string | null;
+  concept_key?: string | null;
+  num_images: number;
+  image_model?: string | null;
+}): Promise<MatrixGenerateResponse> => {
+  const response = await apiClient.post<MatrixGenerateResponse>("/matrix/generate", params);
+  return response.data;
+};
+
+// Extensive Endpoint
+export const generateExtensiveAd = async (params: {
+  niche: Niche;
+  target_audience: string;
+  offer: string;
+  num_images?: number;
+  image_model?: string | null;
+  num_strategies?: number;
+}): Promise<GenerateResponse> => {
+  const response = await apiClient.post<GenerateResponse>("/extensive/generate", params);
+  return response.data;
+};
+
+export const generateTestingMatrix = async (params: {
+  niche: Niche;
+  angle_count: number;
+  concept_count: number;
+  strategy: "balanced" | "top_performers" | "diverse";
+}): Promise<TestingMatrixResponse> => {
+  const response = await apiClient.post<TestingMatrixResponse>("/matrix/testing", params);
+  return response.data;
+};
+
+export const getAllAngles = async (): Promise<AnglesResponse> => {
+  const response = await apiClient.get<AnglesResponse>("/matrix/angles");
+  return response.data;
+};
+
+export const getAllConcepts = async (): Promise<ConceptsResponse> => {
+  const response = await apiClient.get<ConceptsResponse>("/matrix/concepts");
+  return response.data;
+};
+
+export const getAngle = async (angleKey: string): Promise<AngleInfo> => {
+  const response = await apiClient.get<AngleInfo>(`/matrix/angle/${angleKey}`);
+  return response.data;
+};
+
+export const getConcept = async (conceptKey: string): Promise<ConceptInfo> => {
+  const response = await apiClient.get<ConceptInfo>(`/matrix/concept/${conceptKey}`);
+  return response.data;
+};
+
+export const getCompatibleConcepts = async (angleKey: string): Promise<CompatibleConceptsResponse> => {
+  const response = await apiClient.get<CompatibleConceptsResponse>(`/matrix/compatible/${angleKey}`);
+  return response.data;
+};
+
+// Database Endpoints
+export const getDbStats = async (): Promise<DbStatsResponse> => {
+  const response = await apiClient.get<DbStatsResponse>("/db/stats");
+  return response.data;
+};
+
+export const listAds = async (params?: {
+  niche?: string | null;
+  generation_method?: string | null;
+  limit?: number;
+  offset?: number;
+}): Promise<AdsListResponse> => {
+  const response = await apiClient.get<AdsListResponse>("/db/ads", { params });
+  return response.data;
+};
+
+export const getAd = async (adId: string): Promise<AdCreativeDB> => {
+  const response = await apiClient.get<AdCreativeDB>(`/db/ad/${adId}`);
+  return response.data;
+};
+
+export const deleteAd = async (adId: string): Promise<{ success: boolean; deleted_id: string }> => {
+  const response = await apiClient.delete<{ success: boolean; deleted_id: string }>(`/db/ad/${adId}`);
+  return response.data;
+};
+
+// Strategies
+export const getStrategies = async (niche: Niche): Promise<any> => {
+  const response = await apiClient.get(`/strategies/${niche}`);
+  return response.data;
+};
+
+// Image Correction Endpoints
+export const correctImage = async (params: {
+  image_id: string;
+  user_instructions?: string;
+  auto_analyze?: boolean;
+}): Promise<ImageCorrectResponse> => {
+  const response = await apiClient.post<ImageCorrectResponse>("/api/correct", params);
+  return response.data;
+};
+
+// Auth Endpoints
+export const login = async (username: string, password: string): Promise<LoginResponse> => {
+  const response = await apiClient.post<LoginResponse>("/auth/login", {
+    username,
+    password,
+  });
+  return response.data;
+};

frontend/lib/constants/models.ts

@@ -0,0 +1,18 @@
+/**
+ * Available image generation models
+ * 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: "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: "photon", label: "Photon (Luma)" },
+  { value: "seedream-3", label: "Seedream-3 (ByteDance)" },
+] as const;
+
+export type ImageModel = typeof IMAGE_MODELS[number]["value"];

frontend/lib/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

frontend/lib/utils/export.ts

@@ -0,0 +1,75 @@
+// Export utilities for downloading/exporting ads
+
+export const downloadImage = async (url: string | null | undefined, filename: string | null | undefined): Promise<void> => {
+  if (!url) {
+    throw new Error("No image URL provided");
+  }
+  
+  try {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    const blobUrl = window.URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.download = filename || "image.png";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(blobUrl);
+  } catch (error) {
+    console.error("Error downloading image:", error);
+    throw error;
+  }
+};
+
+export const copyToClipboard = async (text: string): Promise<void> => {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (error) {
+    console.error("Error copying to clipboard:", error);
+    throw error;
+  }
+};
+
+export const exportAsJSON = (data: any, filename: string): void => {
+  const jsonString = JSON.stringify(data, null, 2);
+  const blob = new Blob([jsonString], { type: "application/json" });
+  const url = window.URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  window.URL.revokeObjectURL(url);
+};
+
+export const exportAsCSV = (data: any[], filename: string): void => {
+  if (data.length === 0) return;
+  
+  const headers = Object.keys(data[0]);
+  const csvRows = [
+    headers.join(","),
+    ...data.map((row) =>
+      headers.map((header) => {
+        const value = row[header];
+        // Escape commas and quotes in CSV
+        if (typeof value === "string" && (value.includes(",") || value.includes('"'))) {
+          return `"${value.replace(/"/g, '""')}"`;
+        }
+        return value ?? "";
+      }).join(",")
+    ),
+  ];
+  
+  const csvString = csvRows.join("\n");
+  const blob = new Blob([csvString], { type: "text/csv" });
+  const url = window.URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  window.URL.revokeObjectURL(url);
+};

frontend/lib/utils/formatters.ts

@@ -0,0 +1,67 @@
+import { format, formatDistanceToNow } from "date-fns";
+
+export const formatDate = (dateString: string | null | undefined): string => {
+  if (!dateString) return "N/A";
+  try {
+    return format(new Date(dateString), "MMM d, yyyy 'at' h:mm a");
+  } catch {
+    return dateString;
+  }
+};
+
+export const formatRelativeDate = (dateString: string | null | undefined): string => {
+  if (!dateString) return "N/A";
+  try {
+    return formatDistanceToNow(new Date(dateString), { addSuffix: true });
+  } catch {
+    return dateString;
+  }
+};
+
+export const formatNiche = (niche: string): string => {
+  return niche
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+};
+
+export const formatGenerationMethod = (method: string | null | undefined): string => {
+  if (!method) return "Original";
+  if (method === "angle_concept_matrix") return "Matrix";
+  return method
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+};
+
+export const truncateText = (text: string, maxLength: number): string => {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength) + "...";
+};
+
+export const getImageUrl = (imageUrl: string | null | undefined, filename: string | null | undefined): string | null => {
+  // Prefer R2/external URL if it's a valid HTTP/HTTPS URL (R2 URLs or Replicate URLs)
+  // This ensures R2 URLs are always used when available
+  if (imageUrl && typeof imageUrl === 'string' && (imageUrl.startsWith('http://') || imageUrl.startsWith('https://'))) {
+    return imageUrl;
+  }
+  // Fallback to local filename only if no external URL exists
+  if (filename) {
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+    return `${apiUrl}/images/${filename}`;
+  }
+  return null;
+};
+
+export const getImageUrlFallback = (imageUrl: string | null | undefined, filename: string | null | undefined): { primary: string | null; fallback: string | null } => {
+  // Primary: R2/external URL if it's a valid HTTP/HTTPS URL
+  // This ensures R2 URLs are always prioritized
+  const primary = (imageUrl && typeof imageUrl === 'string' && (imageUrl.startsWith('http://') || imageUrl.startsWith('https://'))) 
+    ? imageUrl 
+    : null;
+  // Fallback: local filename only if no external URL
+  const fallback = filename 
+    ? `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"}/images/${filename}` 
+    : null;
+  return { primary, fallback };
+};

frontend/lib/utils/validators.ts

@@ -0,0 +1,29 @@
+import { z } from "zod";
+
+export const generateAdSchema = z.object({
+  niche: z.enum(["home_insurance", "glp1"]),
+  num_images: z.number().min(1).max(10),
+  image_model: z.string().optional().nullable(),
+});
+
+export const generateBatchSchema = z.object({
+  niche: z.enum(["home_insurance", "glp1"]),
+  count: z.number().min(1).max(20),
+  images_per_ad: z.number().min(1).max(3),
+  image_model: z.string().optional().nullable(),
+});
+
+export const generateMatrixSchema = z.object({
+  niche: z.enum(["home_insurance", "glp1"]),
+  angle_key: z.string().optional().nullable(),
+  concept_key: z.string().optional().nullable(),
+  num_images: z.number().min(1).max(5),
+  image_model: z.string().optional().nullable(),
+});
+
+export const testingMatrixSchema = z.object({
+  niche: z.enum(["home_insurance", "glp1"]),
+  angle_count: z.number().min(1).max(10),
+  concept_count: z.number().min(1).max(10),
+  strategy: z.enum(["balanced", "top_performers", "diverse"]),
+});