Add creative modifier endpoints and frontend components

- Introduced new API endpoints for uploading, analyzing, and modifying creative images, enhancing the creative workflow.
- Implemented frontend components for creative uploading, analysis display, and modification forms, allowing users to interactively modify creatives.
- Added type definitions for creative analysis and modification responses to ensure type safety across the application.
- Updated the header to include navigation to the new creative modification feature, improving user accessibility.

frontend/app/creative/modify/page.tsx

@@ -0,0 +1,501 @@
+"use client";
+
+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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import {
+  uploadCreative,
+  analyzeCreativeByUrl,
+  analyzeCreativeByFile,
+  modifyCreative,
+} from "@/lib/api/endpoints";
+import type {
+  CreativeAnalysisData,
+  ModificationMode,
+  ModifiedImageResult,
+} from "@/types/api";
+
+type WorkflowStep = "upload" | "analysis" | "modify" | "result";
+
+export default function CreativeModifyPage() {
+  // Workflow state
+  const [currentStep, setCurrentStep] = useState<WorkflowStep>("upload");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Image state
+  const [originalImageUrl, setOriginalImageUrl] = useState<string | null>(null);
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+
+  // Analysis state
+  const [analysis, setAnalysis] = useState<CreativeAnalysisData | null>(null);
+
+  // Modification form state
+  const [angle, setAngle] = useState("");
+  const [concept, setConcept] = useState("");
+  const [mode, setMode] = useState<ModificationMode>("modify");
+  const [imageModel, setImageModel] = useState<string | null>(null);
+
+  // Result state
+  const [result, setResult] = useState<ModifiedImageResult | null>(null);
+  const [generatedPrompt, setGeneratedPrompt] = useState<string | null>(null);
+
+  // Handle image ready from uploader
+  const handleImageReady = useCallback(async (imageUrl: string, file?: File) => {
+    setIsLoading(true);
+    setError(null);
+    setOriginalImageUrl(imageUrl);
+    setUploadedFile(file || null);
+
+    try {
+      let analysisResponse;
+
+      if (file) {
+        // If we have a file, first upload it to get a URL, then analyze
+        const uploadResponse = await uploadCreative(file);
+        if (uploadResponse.status !== "success" || !uploadResponse.image_url) {
+          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,
+        });
+      } else {
+        // Analyze by URL directly
+        analysisResponse = await analyzeCreativeByUrl({ image_url: imageUrl });
+      }
+
+      if (analysisResponse.status !== "success" || !analysisResponse.analysis) {
+        throw new Error(analysisResponse.error || "Failed to analyze image");
+      }
+
+      setAnalysis(analysisResponse.analysis);
+      setCurrentStep("analysis");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Handle modification submission
+  const handleModify = useCallback(async () => {
+    if (!originalImageUrl) return;
+
+    setIsLoading(true);
+    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,
+      });
+
+      if (response.status !== "success" || !response.image) {
+        throw new Error(response.error || "Failed to modify creative");
+      }
+
+      setResult(response.image);
+      setGeneratedPrompt(response.prompt || null);
+      setCurrentStep("result");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [originalImageUrl, analysis, angle, concept, mode, imageModel]);
+
+  // Reset to start over
+  const handleStartOver = useCallback(() => {
+    setCurrentStep("upload");
+    setOriginalImageUrl(null);
+    setUploadedFile(null);
+    setAnalysis(null);
+    setAngle("");
+    setConcept("");
+    setMode("modify");
+    setImageModel(null);
+    setResult(null);
+    setGeneratedPrompt(null);
+    setError(null);
+  }, []);
+
+  // Go back to modification form
+  const handleModifyAgain = useCallback(() => {
+    setResult(null);
+    setGeneratedPrompt(null);
+    setCurrentStep("analysis");
+  }, []);
+
+  // Go back to upload step
+  const handleBackToUpload = useCallback(() => {
+    setCurrentStep("upload");
+    // Keep the original image URL for preview but allow re-upload
+    setError(null);
+  }, []);
+
+  // Go back to analysis step from result
+  const handleBackToAnalysis = useCallback(() => {
+    setResult(null);
+    setGeneratedPrompt(null);
+    setCurrentStep("analysis");
+    setError(null);
+  }, []);
+
+  // Get step index for navigation
+  const getStepIndex = (step: WorkflowStep): number => {
+    const steps: WorkflowStep[] = ["upload", "analysis", "result"];
+    return steps.indexOf(step);
+  };
+
+  // Check if a step is accessible (completed or current)
+  const isStepAccessible = (stepKey: string): boolean => {
+    const stepOrder: WorkflowStep[] = ["upload", "analysis", "result"];
+    const currentIndex = stepOrder.indexOf(currentStep);
+    const targetIndex = stepOrder.indexOf(stepKey as WorkflowStep);
+    return targetIndex <= currentIndex;
+  };
+
+  // Handle step click for navigation
+  const handleStepClick = useCallback((stepKey: string) => {
+    if (!isStepAccessible(stepKey)) return;
+    
+    if (stepKey === "upload") {
+      handleBackToUpload();
+    } else if (stepKey === "analysis" && currentStep === "result") {
+      handleBackToAnalysis();
+    }
+  }, [currentStep, handleBackToUpload, handleBackToAnalysis]);
+
+  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">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">
+            Creative Modifier
+          </h1>
+          <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
+          </p>
+        </div>
+
+        {/* Progress Steps */}
+        <div className="flex justify-center mb-8">
+          <div className="flex items-center gap-2">
+            {[
+              { key: "upload", label: "Upload" },
+              { key: "analysis", label: "Analysis & Modify" },
+              { key: "result", label: "Result" },
+            ].map((step, index) => {
+              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"
+                      }`}
+                    />
+                  )}
+                  <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"
+                    }`}
+                  >
+                    <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
+                          ? "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">
+                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                        </svg>
+                      ) : (
+                        index + 1
+                      )}
+                    </div>
+                    <span className={`text-xs font-medium ${
+                      isActive ? "text-blue-600" : isCompleted ? "text-blue-500" : "text-gray-500"
+                    }`}>
+                      {step.label}
+                    </span>
+                  </button>
+                </React.Fragment>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Error Display */}
+        {error && (
+          <div className="max-w-2xl mx-auto mb-6">
+            <div className="p-4 bg-red-50 border border-red-200 rounded-xl text-red-600">
+              <div className="flex items-center gap-2">
+                <svg
+                  className="w-5 h-5"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                {error}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Step Content */}
+        <div className="max-w-4xl mx-auto">
+          {/* Upload Step */}
+          {currentStep === "upload" && (
+            <CreativeUploader
+              onImageReady={handleImageReady}
+              isLoading={isLoading}
+            />
+          )}
+
+          {/* Analysis Step */}
+          {currentStep === "analysis" && analysis && (
+            <div className="space-y-6">
+              {/* Back Button */}
+              <button
+                type="button"
+                onClick={handleBackToUpload}
+                className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                </svg>
+                <span className="font-medium">Back to Upload</span>
+              </button>
+
+              {/* Original Image Preview */}
+              {originalImageUrl && (
+                <Card variant="glass">
+                  <CardHeader>
+                    <CardTitle>Original Creative</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="rounded-xl overflow-hidden bg-gray-100">
+                      <img
+                        src={originalImageUrl}
+                        alt="Original creative"
+                        className="w-full h-auto max-h-64 object-contain"
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Analysis Display */}
+              <CreativeAnalysis analysis={analysis} />
+
+              {/* Modification Form */}
+              <ModificationForm
+                angle={angle}
+                concept={concept}
+                mode={mode}
+                imageModel={imageModel}
+                onAngleChange={setAngle}
+                onConceptChange={setConcept}
+                onModeChange={setMode}
+                onImageModelChange={setImageModel}
+                onSubmit={handleModify}
+                isLoading={isLoading}
+              />
+            </div>
+          )}
+
+          {/* Result Step */}
+          {currentStep === "result" && result && (
+            <div className="space-y-6">
+              {/* Back Button */}
+              <button
+                type="button"
+                onClick={handleBackToAnalysis}
+                className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                </svg>
+                <span className="font-medium">Back to Analysis</span>
+              </button>
+
+              {/* Before / After Comparison */}
+              <Card variant="glass">
+                <CardHeader>
+                  <CardTitle>Result</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {/* Original */}
+                    <div>
+                      <h4 className="text-sm font-semibold text-gray-700 mb-2">
+                        Original
+                      </h4>
+                      <div className="rounded-xl overflow-hidden bg-gray-100">
+                        {originalImageUrl && (
+                          <img
+                            src={originalImageUrl}
+                            alt="Original creative"
+                            className="w-full h-auto object-contain"
+                          />
+                        )}
+                      </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>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Applied Changes */}
+              <Card variant="glass">
+                <CardHeader>
+                  <CardTitle>Applied Changes</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    {result.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}
+                        </p>
+                      </div>
+                    )}
+                    {result.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}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="bg-gray-50 rounded-xl p-4">
+                    <h4 className="text-sm font-semibold text-gray-700 mb-1">
+                      Mode
+                    </h4>
+                    <p className="text-gray-900 capitalize">{result.mode}</p>
+                  </div>
+
+                  {result.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>
+                    </div>
+                  )}
+
+                  {generatedPrompt && (
+                    <div>
+                      <h4 className="text-sm font-semibold text-gray-700 mb-1">
+                        Generated Prompt
+                      </h4>
+                      <p className="text-gray-600 text-sm bg-gray-50 p-3 rounded-lg">
+                        {generatedPrompt}
+                      </p>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+
+              {/* Action Buttons */}
+              <div className="flex gap-4">
+                <button
+                  type="button"
+                  onClick={handleModifyAgain}
+                  className="flex-1 py-3 px-4 border-2 border-gray-300 text-gray-700 font-medium rounded-xl hover:bg-gray-50 transition-colors"
+                >
+                  Modify Again
+                </button>
+                <button
+                  type="button"
+                  onClick={handleStartOver}
+                  className="flex-1 py-3 px-4 bg-gradient-to-r from-blue-500 to-cyan-500 text-white font-bold rounded-xl hover:from-blue-600 hover:to-cyan-600 transition-all"
+                >
+                  Start Over
+                </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"
+                    >
+                      <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>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components/creative/CreativeAnalysis.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import type { CreativeAnalysisData } from "@/types/api";
+
+interface CreativeAnalysisProps {
+  analysis: CreativeAnalysisData;
+}
+
+export const CreativeAnalysis: React.FC<CreativeAnalysisProps> = ({
+  analysis,
+}) => {
+  return (
+    <Card variant="glass">
+      <CardHeader>
+        <CardTitle>Creative Analysis</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Visual Style & Mood */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl p-4">
+            <h4 className="text-sm font-semibold text-gray-700 mb-1">Visual Style</h4>
+            <p className="text-gray-900 font-medium">{analysis.visual_style}</p>
+          </div>
+          <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-4">
+            <h4 className="text-sm font-semibold text-gray-700 mb-1">Mood</h4>
+            <p className="text-gray-900 font-medium">{analysis.mood}</p>
+          </div>
+        </div>
+
+        {/* Color Palette */}
+        <div>
+          <h4 className="text-sm font-semibold text-gray-700 mb-2">Color Palette</h4>
+          <div className="flex flex-wrap gap-2">
+            {analysis.color_palette.map((color, index) => (
+              <span
+                key={index}
+                className="px-3 py-1 bg-white rounded-full text-sm text-gray-700 border border-gray-200"
+              >
+                {color}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        {/* Composition & Subject */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <h4 className="text-sm font-semibold text-gray-700 mb-1">Composition</h4>
+            <p className="text-gray-600 text-sm">{analysis.composition}</p>
+          </div>
+          <div>
+            <h4 className="text-sm font-semibold text-gray-700 mb-1">Subject Matter</h4>
+            <p className="text-gray-600 text-sm">{analysis.subject_matter}</p>
+          </div>
+        </div>
+
+        {/* Text Content (if any) */}
+        {analysis.text_content && (
+          <div>
+            <h4 className="text-sm font-semibold text-gray-700 mb-1">Text Content</h4>
+            <p className="text-gray-600 text-sm bg-gray-50 p-3 rounded-lg">&quot;{analysis.text_content}&quot;</p>
+          </div>
+        )}
+
+        {/* Current Angle & Concept */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {analysis.current_angle && (
+            <div className="bg-orange-50 rounded-xl p-4">
+              <h4 className="text-sm font-semibold text-orange-700 mb-1">Current Angle</h4>
+              <p className="text-orange-900 font-medium">{analysis.current_angle}</p>
+            </div>
+          )}
+          {analysis.current_concept && (
+            <div className="bg-green-50 rounded-xl p-4">
+              <h4 className="text-sm font-semibold text-green-700 mb-1">Current Concept</h4>
+              <p className="text-green-900 font-medium">{analysis.current_concept}</p>
+            </div>
+          )}
+        </div>
+
+        {/* Target Audience */}
+        {analysis.target_audience && (
+          <div>
+            <h4 className="text-sm font-semibold text-gray-700 mb-1">Target Audience</h4>
+            <p className="text-gray-600 text-sm">{analysis.target_audience}</p>
+          </div>
+        )}
+
+        {/* Strengths */}
+        <div>
+          <h4 className="text-sm font-semibold text-gray-700 mb-2">Strengths</h4>
+          <ul className="space-y-1">
+            {analysis.strengths.map((strength, index) => (
+              <li key={index} className="flex items-start gap-2 text-sm text-gray-600">
+                <svg className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                </svg>
+                {strength}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* Areas for Improvement */}
+        <div>
+          <h4 className="text-sm font-semibold text-gray-700 mb-2">Areas for Improvement</h4>
+          <ul className="space-y-1">
+            {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>
+            ))}
+          </ul>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

frontend/components/creative/CreativeUploader.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import React, { useState, useCallback, useRef } from "react";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
+
+interface CreativeUploaderProps {
+  onImageReady: (imageUrl: string, imageBytes?: File) => void;
+  isLoading?: boolean;
+}
+
+export const CreativeUploader: React.FC<CreativeUploaderProps> = ({
+  onImageReady,
+  isLoading = false,
+}) => {
+  const [uploadMode, setUploadMode] = useState<"file" | "url">("file");
+  const [urlInput, setUrlInput] = useState("");
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileSelect = useCallback((file: File) => {
+    setError(null);
+    
+    // Validate file type
+    const allowedTypes = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
+    if (!allowedTypes.includes(file.type)) {
+      setError("Invalid file type. Please upload PNG, JPG, or WebP images.");
+      return;
+    }
+    
+    // Validate file size (max 10MB)
+    if (file.size > 10 * 1024 * 1024) {
+      setError("File too large. Maximum size is 10MB.");
+      return;
+    }
+    
+    setSelectedFile(file);
+    const objectUrl = URL.createObjectURL(file);
+    setPreviewUrl(objectUrl);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      handleFileSelect(files[0]);
+    }
+  }, [handleFileSelect]);
+
+  const handleFileInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      handleFileSelect(files[0]);
+    }
+  }, [handleFileSelect]);
+
+  const handleUrlSubmit = useCallback(() => {
+    setError(null);
+    
+    if (!urlInput.trim()) {
+      setError("Please enter an image URL.");
+      return;
+    }
+    
+    // Basic URL validation
+    try {
+      new URL(urlInput);
+    } catch {
+      setError("Invalid URL format.");
+      return;
+    }
+    
+    setPreviewUrl(urlInput);
+    setSelectedFile(null);
+  }, [urlInput]);
+
+  const handleContinue = useCallback(() => {
+    if (uploadMode === "file" && selectedFile) {
+      // For file upload, we pass both the preview URL and the file
+      onImageReady(previewUrl!, selectedFile);
+    } else if (uploadMode === "url" && previewUrl) {
+      onImageReady(previewUrl);
+    }
+  }, [uploadMode, selectedFile, previewUrl, onImageReady]);
+
+  const handleClear = useCallback(() => {
+    setPreviewUrl(null);
+    setSelectedFile(null);
+    setUrlInput("");
+    setError(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }, []);
+
+  return (
+    <Card variant="glass">
+      <CardHeader>
+        <CardTitle>Upload Your Creative</CardTitle>
+        <CardDescription>
+          Upload an existing ad creative to analyze and modify with new angles or concepts
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {/* Mode Toggle */}
+        <div className="flex gap-2 mb-6">
+          <button
+            type="button"
+            onClick={() => {
+              setUploadMode("file");
+              handleClear();
+            }}
+            className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all ${
+              uploadMode === "file"
+                ? "bg-blue-500 text-white"
+                : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+            }`}
+          >
+            File Upload
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setUploadMode("url");
+              handleClear();
+            }}
+            className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all ${
+              uploadMode === "url"
+                ? "bg-blue-500 text-white"
+                : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+            }`}
+          >
+            Image URL
+          </button>
+        </div>
+
+        {/* Error Display */}
+        {error && (
+          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">
+            {error}
+          </div>
+        )}
+
+        {/* File Upload Area */}
+        {uploadMode === "file" && !previewUrl && (
+          <div
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            onClick={() => fileInputRef.current?.click()}
+            className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all ${
+              isDragging
+                ? "border-blue-500 bg-blue-50"
+                : "border-gray-300 hover:border-blue-400 hover:bg-gray-50"
+            }`}
+          >
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/png,image/jpeg,image/jpg,image/webp"
+              onChange={handleFileInputChange}
+              className="hidden"
+            />
+            <div className="flex flex-col items-center gap-3">
+              <svg
+                className="w-12 h-12 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              <div className="text-gray-600">
+                <span className="font-semibold text-blue-500">Click to upload</span> or drag and drop
+              </div>
+              <p className="text-xs text-gray-500">PNG, JPG, or WebP (max 10MB)</p>
+            </div>
+          </div>
+        )}
+
+        {/* URL Input */}
+        {uploadMode === "url" && !previewUrl && (
+          <div className="space-y-4">
+            <div className="flex gap-2">
+              <input
+                type="url"
+                value={urlInput}
+                onChange={(e) => setUrlInput(e.target.value)}
+                placeholder="https://example.com/image.png"
+                className="flex-1 px-4 py-3 rounded-xl border-2 border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              />
+              <button
+                type="button"
+                onClick={handleUrlSubmit}
+                className="px-6 py-3 bg-blue-500 text-white font-medium rounded-xl hover:bg-blue-600 transition-colors"
+              >
+                Load
+              </button>
+            </div>
+            <p className="text-xs text-gray-500">
+              Enter a direct link to an image (PNG, JPG, or WebP)
+            </p>
+          </div>
+        )}
+
+        {/* Image Preview */}
+        {previewUrl && (
+          <div className="space-y-4">
+            <div className="relative rounded-xl overflow-hidden bg-gray-100">
+              <img
+                src={previewUrl}
+                alt="Creative preview"
+                className="w-full h-auto max-h-96 object-contain"
+                onError={() => {
+                  setError("Failed to load image. Please check the URL or try a different image.");
+                  setPreviewUrl(null);
+                }}
+              />
+            </div>
+            
+            <div className="flex gap-3">
+              <button
+                type="button"
+                onClick={handleClear}
+                className="flex-1 py-3 px-4 border-2 border-gray-300 text-gray-700 font-medium rounded-xl hover:bg-gray-50 transition-colors"
+              >
+                Change Image
+              </button>
+              <button
+                type="button"
+                onClick={handleContinue}
+                disabled={isLoading}
+                className="flex-1 py-3 px-4 bg-gradient-to-r from-blue-500 to-cyan-500 text-white font-bold rounded-xl hover:from-blue-600 hover:to-cyan-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isLoading ? "Analyzing..." : "Analyze Creative"}
+              </button>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

frontend/components/creative/ModificationForm.tsx

@@ -0,0 +1,391 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
+import { Select } from "@/components/ui/Select";
+import { IMAGE_MODELS } from "@/lib/constants/models";
+import { getAllAngles, getAllConcepts } from "@/lib/api/endpoints";
+import type { ModificationMode, AnglesResponse, ConceptsResponse } from "@/types/api";
+
+interface AngleOption {
+  value: string;
+  label: string;
+  trigger: string;
+  category: string;
+}
+
+interface ConceptOption {
+  value: string;
+  label: string;
+  structure: string;
+  category: string;
+}
+
+interface ModificationFormProps {
+  angle: string;
+  concept: string;
+  mode: ModificationMode;
+  imageModel: string | null;
+  onAngleChange: (value: string) => void;
+  onConceptChange: (value: string) => void;
+  onModeChange: (mode: ModificationMode) => void;
+  onImageModelChange: (model: string | null) => void;
+  onSubmit: () => void;
+  isLoading: boolean;
+}
+
+export const ModificationForm: React.FC<ModificationFormProps> = ({
+  angle,
+  concept,
+  mode,
+  imageModel,
+  onAngleChange,
+  onConceptChange,
+  onModeChange,
+  onImageModelChange,
+  onSubmit,
+  isLoading,
+}) => {
+  const [angleOptions, setAngleOptions] = useState<AngleOption[]>([]);
+  const [conceptOptions, setConceptOptions] = useState<ConceptOption[]>([]);
+  const [loadingOptions, setLoadingOptions] = useState(true);
+  const [angleInputMode, setAngleInputMode] = useState<"dropdown" | "custom">("dropdown");
+  const [conceptInputMode, setConceptInputMode] = useState<"dropdown" | "custom">("dropdown");
+
+  // Fetch angles and concepts on mount
+  useEffect(() => {
+    const fetchOptions = async () => {
+      try {
+        setLoadingOptions(true);
+        const [anglesData, conceptsData] = await Promise.all([
+          getAllAngles(),
+          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})`,
+              trigger: a.trigger,
+              category: category.name,
+            });
+          });
+        });
+        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}`,
+              structure: c.structure,
+              category: category.name,
+            });
+          });
+        });
+        setConceptOptions(concepts);
+      } catch (error) {
+        console.error("Failed to fetch angles/concepts:", error);
+      } finally {
+        setLoadingOptions(false);
+      }
+    };
+
+    fetchOptions();
+  }, []);
+
+  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] = [];
+    }
+    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] = [];
+    }
+    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
+        </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>
+            </div>
+          </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>
+            </div>
+          </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
+          </label>
+          <div className="grid grid-cols-2 gap-3">
+            <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"
+              }`}
+            >
+              <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>
+              <p className="text-xs text-gray-500">
+                Make targeted changes while preserving most of the original image
+              </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"
+              }`}
+            >
+              <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>
+              <p className="text-xs text-gray-500">
+                Generate a completely new image inspired by the original
+              </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>
+
+        {/* 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...
+            </span>
+          ) : (
+            `Generate ${mode === "modify" ? "Modified" : "Inspired"} Creative`
+          )}
+        </button>
+
+        {!isValid && (
+          <p className="text-xs text-amber-600 text-center">
+            Please select or enter at least one angle or concept to continue
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

frontend/components/creative/index.ts

@@ -0,0 +1,3 @@
+export { CreativeUploader } from "./CreativeUploader";
+export { CreativeAnalysis } from "./CreativeAnalysis";
+export { ModificationForm } from "./ModificationForm";

frontend/components/layout/Header.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { Home, Rocket, Grid, Layers, LogOut, User } from "lucide-react";
+import { Home, Rocket, Grid, Layers, LogOut, User, Wand2 } from "lucide-react";
 import { useAuthStore } from "@/store/authStore";
 import { Button } from "@/components/ui/Button";
 
@@ -15,6 +15,7 @@ export const Header: React.FC = () => {
   const navItems = [
     { href: "/", label: "Dashboard", icon: Home },
     { href: "/generate", label: "Generate", icon: Rocket },
+    { href: "/creative/modify", label: "Modify", icon: Wand2 },
     { href: "/gallery", label: "Gallery", icon: Grid },
     { href: "/matrix", label: "Matrix", icon: Layers },
   ];

frontend/lib/api/endpoints.ts

@@ -17,6 +17,11 @@ import type {
   ImageCorrectResponse,
   LoginResponse,
   Niche,
+  CreativeAnalysisResponse,
+  CreativeModifyResponse,
+  FileUploadResponse,
+  ModificationMode,
+  CreativeAnalysisData,
 } from "../../types/api";
 
 // Health & Info
@@ -202,3 +207,68 @@ export const downloadImageProxy = async (params: {
   });
   return response.data as Blob;
 };
+
+// Creative Modifier Endpoints
+
+// Upload a creative image
+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,
+    {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    }
+  );
+  return response.data;
+};
+
+// Analyze a creative image (via URL)
+export const analyzeCreativeByUrl = async (params: {
+  image_url: string;
+}): Promise<CreativeAnalysisResponse> => {
+  const response = await apiClient.post<CreativeAnalysisResponse>(
+    "/api/creative/analyze",
+    params
+  );
+  return response.data;
+};
+
+// Analyze a creative image (via file upload)
+export const analyzeCreativeByFile = async (
+  file: File
+): Promise<CreativeAnalysisResponse> => {
+  const formData = new FormData();
+  formData.append("file", file);
+  
+  const response = await apiClient.post<CreativeAnalysisResponse>(
+    "/api/creative/analyze/upload",
+    formData,
+    {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    }
+  );
+  return response.data;
+};
+
+// Modify a creative with new angle/concept
+export const modifyCreative = async (params: {
+  image_url: string;
+  analysis?: CreativeAnalysisData | null;
+  angle?: string;
+  concept?: string;
+  mode: ModificationMode;
+  image_model?: string | null;
+}): Promise<CreativeModifyResponse> => {
+  const response = await apiClient.post<CreativeModifyResponse>(
+    "/api/creative/modify",
+    params
+  );
+  return response.data;
+};

frontend/types/api.ts

@@ -270,3 +270,53 @@ export interface LoginResponse {
   username: string;
   message?: string;
 }
+
+// Creative Modifier Types
+export interface CreativeAnalysisData {
+  visual_style: string;
+  color_palette: string[];
+  mood: string;
+  composition: string;
+  subject_matter: string;
+  text_content?: string | null;
+  current_angle?: string | null;
+  current_concept?: string | null;
+  target_audience?: string | null;
+  strengths: string[];
+  areas_for_improvement: string[];
+}
+
+export interface CreativeAnalysisResponse {
+  status: string;
+  analysis?: CreativeAnalysisData | null;
+  suggested_angles?: string[] | null;
+  suggested_concepts?: string[] | null;
+  error?: string | null;
+}
+
+export interface ModifiedImageResult {
+  filename?: string | null;
+  filepath?: string | null;
+  image_url?: string | null;
+  r2_url?: string | null;
+  model_used?: string | null;
+  mode?: string | null;
+  applied_angle?: string | null;
+  applied_concept?: string | null;
+}
+
+export interface CreativeModifyResponse {
+  status: string;
+  prompt?: string | null;
+  image?: ModifiedImageResult | null;
+  error?: string | null;
+}
+
+export interface FileUploadResponse {
+  status: string;
+  image_url?: string | null;
+  filename?: string | null;
+  error?: string | null;
+}
+
+export type ModificationMode = "modify" | "inspired";

main.py

@@ -359,6 +359,10 @@ async def api_info():
             "GET /matrix/compatible/{angle_key}": "Get compatible concepts for angle",
             "POST /extensive/generate": "Generate ad using extensive (researcher → creative director → designer → copywriter)",
             "POST /api/correct": "Correct image for spelling mistakes and visual issues (requires image_id)",
+            "POST /api/creative/upload": "Upload a creative image for analysis",
+            "POST /api/creative/analyze": "Analyze a creative image with AI vision (via URL)",
+            "POST /api/creative/analyze/upload": "Analyze a creative image with AI vision (via file upload)",
+            "POST /api/creative/modify": "Modify a creative with new angle/concept",
             "GET /health": "Health check",
         },
         "supported_niches": ["home_insurance", "glp1"],
@@ -1191,6 +1195,328 @@ async def generate_extensive(
         raise HTTPException(status_code=500, detail=str(e))
 
 
+# =============================================================================
+# CREATIVE MODIFIER ENDPOINTS
+# =============================================================================
+
+from fastapi import File, UploadFile
+from services.creative_modifier import creative_modifier_service
+
+
+class CreativeAnalysisData(BaseModel):
+    """Structured analysis of a creative."""
+    visual_style: str
+    color_palette: List[str]
+    mood: str
+    composition: str
+    subject_matter: str
+    text_content: Optional[str] = None
+    current_angle: Optional[str] = None
+    current_concept: Optional[str] = None
+    target_audience: Optional[str] = None
+    strengths: List[str]
+    areas_for_improvement: List[str]
+
+
+class CreativeAnalyzeRequest(BaseModel):
+    """Request for creative analysis."""
+    image_url: Optional[str] = Field(
+        default=None,
+        description="URL of the image to analyze (alternative to file upload)"
+    )
+
+
+class CreativeAnalysisResponse(BaseModel):
+    """Response for creative analysis."""
+    status: str
+    analysis: Optional[CreativeAnalysisData] = None
+    suggested_angles: Optional[List[str]] = None
+    suggested_concepts: Optional[List[str]] = None
+    error: Optional[str] = None
+
+
+class CreativeModifyRequest(BaseModel):
+    """Request for creative modification."""
+    image_url: str = Field(
+        description="URL of the original image"
+    )
+    analysis: Optional[Dict[str, Any]] = Field(
+        default=None,
+        description="Previous analysis data (optional)"
+    )
+    angle: Optional[str] = Field(
+        default=None,
+        description="Angle to apply to the creative"
+    )
+    concept: Optional[str] = Field(
+        default=None,
+        description="Concept to apply to the creative"
+    )
+    mode: Literal["modify", "inspired"] = Field(
+        default="modify",
+        description="Modification mode: 'modify' for image-to-image, 'inspired' for new generation"
+    )
+    image_model: Optional[str] = Field(
+        default=None,
+        description="Image generation model to use"
+    )
+
+
+class ModifiedImageResult(BaseModel):
+    """Result of creative modification."""
+    filename: Optional[str] = None
+    filepath: Optional[str] = None
+    image_url: Optional[str] = None
+    r2_url: Optional[str] = None
+    model_used: Optional[str] = None
+    mode: Optional[str] = None
+    applied_angle: Optional[str] = None
+    applied_concept: Optional[str] = None
+
+
+class CreativeModifyResponse(BaseModel):
+    """Response for creative modification."""
+    status: str
+    prompt: Optional[str] = None
+    image: Optional[ModifiedImageResult] = None
+    error: Optional[str] = None
+
+
+class FileUploadResponse(BaseModel):
+    """Response for file upload."""
+    status: str
+    image_url: Optional[str] = None
+    filename: Optional[str] = None
+    error: Optional[str] = None
+
+
+@app.post("/api/creative/upload", response_model=FileUploadResponse)
+async def upload_creative(
+    file: UploadFile = File(...),
+    username: str = Depends(get_current_user)
+):
+    """
+    Upload a creative image for analysis and modification.
+    
+    Accepts PNG, JPG, JPEG, WebP files.
+    Returns the uploaded image URL that can be used for subsequent analysis/modification.
+    """
+    # Validate file type
+    allowed_types = ["image/png", "image/jpeg", "image/jpg", "image/webp"]
+    if file.content_type not in allowed_types:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Invalid file type. Allowed: PNG, JPG, JPEG, WebP. Got: {file.content_type}"
+        )
+    
+    # Check file size (max 10MB)
+    contents = await file.read()
+    if len(contents) > 10 * 1024 * 1024:
+        raise HTTPException(
+            status_code=400,
+            detail="File too large. Maximum size is 10MB."
+        )
+    
+    try:
+        # Generate filename
+        from datetime import datetime
+        import uuid
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        unique_id = uuid.uuid4().hex[:8]
+        ext = file.filename.split(".")[-1] if file.filename else "png"
+        filename = f"upload_{username}_{timestamp}_{unique_id}.{ext}"
+        
+        # Try to upload to R2
+        r2_url = None
+        try:
+            from services.r2_storage import get_r2_storage
+            r2_storage = get_r2_storage()
+            if r2_storage:
+                r2_url = r2_storage.upload_image(
+                    image_bytes=contents,
+                    filename=filename,
+                    niche="uploads",
+                )
+        except Exception as e:
+            api_logger.warning(f"R2 upload failed: {e}")
+        
+        # Save locally as fallback
+        local_path = None
+        if not r2_url:
+            local_path = os.path.join(settings.output_dir, filename)
+            os.makedirs(os.path.dirname(local_path), exist_ok=True)
+            with open(local_path, "wb") as f:
+                f.write(contents)
+            # Construct local URL
+            r2_url = f"/images/{filename}"
+        
+        return {
+            "status": "success",
+            "image_url": r2_url,
+            "filename": filename,
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/api/creative/analyze", response_model=CreativeAnalysisResponse)
+async def analyze_creative(
+    request: CreativeAnalyzeRequest,
+    username: str = Depends(get_current_user)
+):
+    """
+    Analyze a creative image using AI vision (via URL).
+    
+    Accepts image_url in request body.
+    
+    Returns detailed analysis including visual style, mood, current angle/concept,
+    and suggestions for new angles and concepts.
+    """
+    if not request.image_url:
+        raise HTTPException(
+            status_code=400,
+            detail="image_url must be provided"
+        )
+    
+    # Fetch image from URL
+    try:
+        image_bytes = await image_service.load_image(image_url=request.image_url)
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=f"Failed to fetch image from URL: {e}")
+    
+    if not image_bytes:
+        raise HTTPException(status_code=400, detail="Failed to load image")
+    
+    try:
+        result = await creative_modifier_service.analyze_creative(image_bytes)
+        
+        if result["status"] != "success":
+            return CreativeAnalysisResponse(
+                status="error",
+                error=result.get("error", "Analysis failed")
+            )
+        
+        return CreativeAnalysisResponse(
+            status="success",
+            analysis=result.get("analysis"),
+            suggested_angles=result.get("suggested_angles"),
+            suggested_concepts=result.get("suggested_concepts"),
+        )
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/api/creative/analyze/upload", response_model=CreativeAnalysisResponse)
+async def analyze_creative_upload(
+    file: UploadFile = File(...),
+    username: str = Depends(get_current_user)
+):
+    """
+    Analyze a creative image using AI vision (via file upload).
+    
+    Accepts file upload via multipart form.
+    
+    Returns detailed analysis including visual style, mood, current angle/concept,
+    and suggestions for new angles and concepts.
+    """
+    # Validate file type
+    allowed_types = ["image/png", "image/jpeg", "image/jpg", "image/webp"]
+    if file.content_type not in allowed_types:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Invalid file type. Allowed: PNG, JPG, JPEG, WebP. Got: {file.content_type}"
+        )
+    
+    image_bytes = await file.read()
+    
+    if not image_bytes:
+        raise HTTPException(status_code=400, detail="Failed to load image")
+    
+    try:
+        result = await creative_modifier_service.analyze_creative(image_bytes)
+        
+        if result["status"] != "success":
+            return CreativeAnalysisResponse(
+                status="error",
+                error=result.get("error", "Analysis failed")
+            )
+        
+        return CreativeAnalysisResponse(
+            status="success",
+            analysis=result.get("analysis"),
+            suggested_angles=result.get("suggested_angles"),
+            suggested_concepts=result.get("suggested_concepts"),
+        )
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/api/creative/modify", response_model=CreativeModifyResponse)
+async def modify_creative(
+    request: CreativeModifyRequest,
+    username: str = Depends(get_current_user)
+):
+    """
+    Modify a creative based on user-provided angle and/or concept.
+    
+    Modes:
+    - 'modify': Uses image-to-image to make targeted changes while preserving most of the original
+    - 'inspired': Generates a completely new image inspired by the original
+    
+    At least one of angle or concept must be provided.
+    """
+    if not request.angle and not request.concept:
+        raise HTTPException(
+            status_code=400,
+            detail="At least one of 'angle' or 'concept' must be provided"
+        )
+    
+    # If no analysis provided, we need to analyze first
+    analysis = request.analysis
+    if not analysis:
+        # Fetch and analyze the image
+        try:
+            image_bytes = await image_service.load_image(image_url=request.image_url)
+            if not image_bytes:
+                raise HTTPException(status_code=400, detail="Failed to load image from URL")
+            
+            analysis_result = await creative_modifier_service.analyze_creative(image_bytes)
+            if analysis_result["status"] != "success":
+                raise HTTPException(
+                    status_code=500,
+                    detail=f"Failed to analyze image: {analysis_result.get('error')}"
+                )
+            analysis = analysis_result.get("analysis", {})
+        except HTTPException:
+            raise
+        except Exception as e:
+            raise HTTPException(status_code=500, detail=f"Failed to analyze image: {e}")
+    
+    try:
+        result = await creative_modifier_service.modify_creative(
+            image_url=request.image_url,
+            analysis=analysis,
+            user_angle=request.angle,
+            user_concept=request.concept,
+            mode=request.mode,
+            image_model=request.image_model,
+        )
+        
+        if result["status"] != "success":
+            return CreativeModifyResponse(
+                status="error",
+                error=result.get("error", "Modification failed")
+            )
+        
+        return CreativeModifyResponse(
+            status="success",
+            prompt=result.get("prompt"),
+            image=result.get("image"),
+        )
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 # =============================================================================
 # DATABASE ENDPOINTS
 # =============================================================================

services/creative_modifier.py

@@ -0,0 +1,482 @@
+"""
+Creative Modifier Service
+Analyzes uploaded creatives and generates modified versions based on user-provided angles/concepts.
+"""
+
+import os
+import sys
+import logging
+import time
+import uuid
+from datetime import datetime
+from typing import Dict, Any, Optional, Tuple, List
+
+# Add parent directory to path for imports
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+from pydantic import BaseModel
+from config import settings
+from services.llm import llm_service
+from services.image import image_service
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
+    datefmt='%Y-%m-%d %H:%M:%S'
+)
+logger = logging.getLogger("creative_modifier")
+
+# Optional R2 storage import
+try:
+    from services.r2_storage import get_r2_storage
+    r2_storage_available = True
+except ImportError:
+    r2_storage_available = False
+
+
+class CreativeAnalysis(BaseModel):
+    """Structured analysis of an uploaded creative."""
+    visual_style: str
+    color_palette: List[str]
+    mood: str
+    composition: str
+    subject_matter: str
+    text_content: Optional[str] = None
+    current_angle: Optional[str] = None
+    current_concept: Optional[str] = None
+    target_audience: Optional[str] = None
+    strengths: List[str]
+    areas_for_improvement: List[str]
+
+
+class CreativeModifierService:
+    """Service for analyzing and modifying creative images."""
+    
+    def __init__(self):
+        """Initialize the creative modifier service."""
+        self.output_dir = settings.output_dir
+        os.makedirs(self.output_dir, exist_ok=True)
+    
+    def _should_save_locally(self) -> bool:
+        """Determine if images should be saved locally based on environment settings."""
+        if settings.environment.lower() == "production":
+            return settings.save_images_locally
+        return True
+    
+    def _save_image_locally(self, image_bytes: bytes, filename: str) -> Optional[str]:
+        """Conditionally save image locally based on environment settings."""
+        if not self._should_save_locally():
+            return None
+        
+        try:
+            filepath = os.path.join(self.output_dir, filename)
+            os.makedirs(os.path.dirname(filepath), exist_ok=True)
+            with open(filepath, "wb") as f:
+                f.write(image_bytes)
+            return filepath
+        except Exception as e:
+            logger.warning(f"Failed to save image locally: {e}")
+            return None
+    
+    async def analyze_creative(
+        self,
+        image_bytes: bytes,
+    ) -> Dict[str, Any]:
+        """
+        Analyze an uploaded creative image using GPT-4 Vision.
+        
+        Args:
+            image_bytes: Image file bytes to analyze
+            
+        Returns:
+            Analysis results dictionary with structured data
+        """
+        start_time = time.time()
+        logger.info("=" * 60)
+        logger.info("Starting creative analysis")
+        logger.info(f"Image size: {len(image_bytes)} bytes")
+        
+        system_prompt = """You are an expert creative director and marketing analyst specializing in ad creatives.
+Your task is to thoroughly analyze advertising images to understand their visual style, messaging strategy, and effectiveness.
+You must provide detailed, actionable insights that can be used to modify or improve the creative."""
+        
+        analysis_prompt = """Please analyze this advertising creative in detail. Provide your analysis as a JSON object with the following structure:
+
+{
+    "visual_style": "Description of the visual style (e.g., 'photorealistic', 'illustrated', 'minimalist', 'vibrant', 'muted')",
+    "color_palette": ["List of dominant colors used"],
+    "mood": "The emotional mood conveyed (e.g., 'urgent', 'calm', 'exciting', 'trustworthy')",
+    "composition": "Description of the layout and composition (e.g., 'centered subject', 'rule of thirds', 'text-heavy')",
+    "subject_matter": "What is depicted in the image",
+    "text_content": "Any text visible in the image (or null if none)",
+    "current_angle": "The psychological angle being used (e.g., 'fear of missing out', 'social proof', 'authority')",
+    "current_concept": "The creative concept/format (e.g., 'testimonial', 'before/after', 'lifestyle shot')",
+    "target_audience": "Who this creative seems to target",
+    "strengths": ["List of what works well in this creative"],
+    "areas_for_improvement": ["List of potential improvements"]
+}
+
+Be specific and detailed in your analysis. If you cannot determine something with confidence, make your best assessment based on visual cues."""
+        
+        try:
+            logger.info("Calling vision API for creative analysis...")
+            analysis_text = await llm_service.analyze_image_with_vision(
+                image_bytes=image_bytes,
+                analysis_prompt=analysis_prompt,
+                system_prompt=system_prompt,
+            )
+            
+            # Parse the JSON response
+            import json
+            analysis_text = analysis_text.strip()
+            if analysis_text.startswith("```json"):
+                analysis_text = analysis_text[7:]
+            if analysis_text.startswith("```"):
+                analysis_text = analysis_text[3:]
+            if analysis_text.endswith("```"):
+                analysis_text = analysis_text[:-3]
+            
+            analysis_data = json.loads(analysis_text.strip())
+            
+            elapsed_time = time.time() - start_time
+            logger.info(f"✓ Creative analysis completed successfully in {elapsed_time:.2f}s")
+            
+            # Generate suggested angles and concepts based on analysis
+            suggested_angles = self._generate_suggested_angles(analysis_data)
+            suggested_concepts = self._generate_suggested_concepts(analysis_data)
+            
+            return {
+                "status": "success",
+                "analysis": analysis_data,
+                "suggested_angles": suggested_angles,
+                "suggested_concepts": suggested_concepts,
+            }
+        except json.JSONDecodeError as e:
+            logger.error(f"Failed to parse analysis JSON: {e}")
+            logger.error(f"Raw response: {analysis_text[:500]}...")
+            return {
+                "status": "error",
+                "error": f"Failed to parse analysis response: {str(e)}",
+            }
+        except Exception as e:
+            elapsed_time = time.time() - start_time
+            logger.error(f"✗ Creative analysis failed after {elapsed_time:.2f}s: {str(e)}")
+            return {
+                "status": "error",
+                "error": str(e),
+            }
+    
+    def _generate_suggested_angles(self, analysis: Dict[str, Any]) -> List[str]:
+        """Generate suggested angles based on the analysis using all available angles."""
+        from data.angles import get_all_angles, get_random_angles
+        
+        current_angle = analysis.get("current_angle", "").lower()
+        
+        # Get all angles from the data module
+        all_angles = get_all_angles()
+        
+        # Format angles as "Name (Trigger)" for display
+        formatted_angles = []
+        for angle in all_angles:
+            formatted = f"{angle['name']} ({angle['trigger']})"
+            # Filter out angles that match the current angle
+            if current_angle and current_angle in angle['name'].lower():
+                continue
+            formatted_angles.append(formatted)
+        
+        # Get diverse random angles for suggestions (from different categories)
+        random_angles = get_random_angles(count=12, diverse=True)
+        suggestions = []
+        for angle in random_angles:
+            formatted = f"{angle['name']} ({angle['trigger']})"
+            if current_angle and current_angle in angle['name'].lower():
+                continue
+            suggestions.append(formatted)
+        
+        return suggestions[:8]  # Return top 8 suggestions
+    
+    def _generate_suggested_concepts(self, analysis: Dict[str, Any]) -> List[str]:
+        """Generate suggested concepts based on the analysis using all available concepts."""
+        from data.concepts import get_all_concepts, get_random_concepts
+        
+        current_concept = analysis.get("current_concept", "").lower()
+        
+        # Get all concepts from the data module
+        all_concepts = get_all_concepts()
+        
+        # Format concepts as "Name - Structure" for display
+        formatted_concepts = []
+        for concept in all_concepts:
+            formatted = f"{concept['name']} ({concept['structure']})"
+            # Filter out concepts that match the current concept
+            if current_concept and current_concept in concept['name'].lower():
+                continue
+            formatted_concepts.append(formatted)
+        
+        # Get diverse random concepts for suggestions (from different categories)
+        random_concepts = get_random_concepts(count=12, diverse=True)
+        suggestions = []
+        for concept in random_concepts:
+            formatted = f"{concept['name']} ({concept['structure']})"
+            if current_concept and current_concept in concept['name'].lower():
+                continue
+            suggestions.append(formatted)
+        
+        return suggestions[:8]  # Return top 8 suggestions
+    
+    async def generate_modification_prompt(
+        self,
+        analysis: Dict[str, Any],
+        user_angle: Optional[str] = None,
+        user_concept: Optional[str] = None,
+        mode: str = "modify",
+    ) -> str:
+        """
+        Generate a prompt for modifying the creative based on analysis and user input.
+        
+        Args:
+            analysis: The creative analysis data
+            user_angle: User-provided angle to apply
+            user_concept: User-provided concept to apply
+            mode: "modify" for image-to-image, "inspired" for new generation
+            
+        Returns:
+            Generated prompt string
+        """
+        logger.info(f"Generating modification prompt (mode: {mode})")
+        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."""
+        
+        if mode == "modify":
+            # Minimal prompt for image-to-image modification
+            prompt_request = f"""Based on this creative analysis:
+
+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')}
+
+The user wants to apply:
+- New Angle: {user_angle or 'Keep current'}
+- New Concept: {user_concept or 'Keep current'}
+
+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.
+
+CRITICAL: The output MUST be photorealistic. Include "photorealistic" or "realistic photograph" in the prompt.
+
+Return ONLY the prompt text, no explanations."""
+        else:
+            # Full prompt for inspired generation
+            prompt_request = f"""Based on this creative analysis:
+
+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')}
+
+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 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."""
+        
+        try:
+            prompt = await llm_service.generate(
+                prompt=prompt_request,
+                system_prompt=system_prompt,
+                temperature=0.7,
+            )
+            
+            # Clean up the response
+            prompt = prompt.strip().strip('"').strip("'")
+            
+            # Ensure photorealistic is in the prompt
+            photorealistic_keywords = ["photorealistic", "realistic photograph", "real photo", "high-resolution photo"]
+            has_photorealistic = any(keyword.lower() in prompt.lower() for keyword in photorealistic_keywords)
+            
+            if not has_photorealistic:
+                # Prepend photorealistic requirement
+                prompt = f"Photorealistic, realistic photograph. {prompt}"
+                logger.info("Added photorealistic prefix to prompt")
+            
+            logger.info(f"Generated 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
+            if mode == "modify":
+                return f"Photorealistic, realistic photograph. Apply {user_angle or 'new angle'} with {user_concept or 'improved concept'}. Natural lighting, authentic details."
+            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."
+    
+    async def modify_creative(
+        self,
+        image_url: str,
+        analysis: Dict[str, Any],
+        user_angle: Optional[str] = None,
+        user_concept: Optional[str] = None,
+        mode: str = "modify",
+        image_model: Optional[str] = None,
+        width: int = 1024,
+        height: int = 1024,
+    ) -> Dict[str, Any]:
+        """
+        Modify or generate a new creative based on the original and user input.
+        
+        Args:
+            image_url: URL of the original image
+            analysis: Creative analysis data
+            user_angle: User-provided angle
+            user_concept: User-provided concept
+            mode: "modify" for image-to-image, "inspired" for new generation
+            image_model: Model to use for generation
+            width: Output width
+            height: Output height
+            
+        Returns:
+            Result dictionary with generated image info
+        """
+        workflow_start = time.time()
+        logger.info("=" * 80)
+        logger.info("CREATIVE MODIFICATION WORKFLOW STARTED")
+        logger.info(f"Mode: {mode}")
+        logger.info(f"Image URL: {image_url}")
+        logger.info(f"User angle: {user_angle}")
+        logger.info(f"User concept: {user_concept}")
+        logger.info(f"Image model: {image_model}")
+        logger.info("=" * 80)
+        
+        result = {
+            "status": "pending",
+            "prompt": None,
+            "image": None,
+            "error": None,
+        }
+        
+        # Step 1: Generate modification prompt
+        logger.info("STEP 1: Generating modification prompt...")
+        prompt = await self.generate_modification_prompt(
+            analysis=analysis,
+            user_angle=user_angle,
+            user_concept=user_concept,
+            mode=mode,
+        )
+        result["prompt"] = prompt
+        logger.info(f"✓ Generated prompt: {prompt}")
+        
+        # Step 2: Generate/modify image
+        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
+                )
+            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
+                )
+            
+            if not image_bytes:
+                raise Exception("Image generation returned no data")
+            
+            logger.info(f"✓ Image generated successfully ({len(image_bytes)} bytes)")
+            
+        except Exception as e:
+            logger.error(f"✗ Image generation failed: {e}")
+            result["status"] = "error"
+            result["error"] = f"Image generation failed: {str(e)}"
+            return result
+        
+        # Step 3: Save and upload image
+        logger.info("STEP 3: Saving generated image...")
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        unique_id = uuid.uuid4().hex[:8]
+        filename = f"modified_{timestamp}_{unique_id}.png"
+        
+        # Upload to R2 if available
+        r2_url = None
+        if r2_storage_available:
+            try:
+                logger.info("Uploading to R2 storage...")
+                r2_storage = get_r2_storage()
+                if r2_storage:
+                    r2_url = r2_storage.upload_image(
+                        image_bytes=image_bytes,
+                        filename=filename,
+                        niche="modified",
+                    )
+                    logger.info(f"✓ Uploaded to R2: {r2_url}")
+            except Exception as e:
+                logger.warning(f"R2 upload failed: {e}")
+        
+        # Save locally if configured
+        filepath = self._save_image_locally(image_bytes, filename)
+        if filepath:
+            logger.info(f"✓ Saved locally: {filepath}")
+        
+        # Determine final URL
+        final_url = r2_url or generated_url
+        
+        result["status"] = "success"
+        result["image"] = {
+            "filename": filename,
+            "filepath": filepath,
+            "image_url": final_url,
+            "r2_url": r2_url,
+            "model_used": model_used,
+            "mode": mode,
+            "applied_angle": user_angle,
+            "applied_concept": user_concept,
+        }
+        
+        total_time = time.time() - workflow_start
+        logger.info("=" * 80)
+        logger.info("✓ CREATIVE MODIFICATION COMPLETED SUCCESSFULLY")
+        logger.info(f"Total time: {total_time:.2f}s")
+        logger.info(f"Output URL: {final_url}")
+        logger.info("=" * 80)
+        
+        return result
+
+
+# Global instance
+creative_modifier_service = CreativeModifierService()