added custom user instructions in the creative modifier

frontend/app/creative/modify/page.tsx

@@ -39,6 +39,7 @@ export default function CreativeModifyPage() {
   const [concept, setConcept] = useState("");
   const [mode, setMode] = useState<ModificationMode>("modify");
   const [imageModel, setImageModel] = useState<string | null>(null);
+  const [userPrompt, setUserPrompt] = useState("");
 
   // Result state
   const [result, setResult] = useState<ModifiedImageResult | null>(null);
@@ -104,6 +105,7 @@ export default function CreativeModifyPage() {
         concept: concept.trim() || undefined,
         mode,
         image_model: imageModel,
+        user_prompt: userPrompt.trim() || undefined,
       });
 
       if (response.status !== "success" || !response.image) {
@@ -118,7 +120,7 @@ export default function CreativeModifyPage() {
     } finally {
       setIsLoading(false);
     }
-  }, [originalImageUrl, analysis, angle, concept, mode, imageModel]);
+  }, [originalImageUrl, analysis, angle, concept, mode, imageModel, userPrompt]);
 
   // Reset to start over
   const handleStartOver = useCallback(() => {
@@ -130,6 +132,7 @@ export default function CreativeModifyPage() {
     setConcept("");
     setMode("modify");
     setImageModel(null);
+    setUserPrompt("");
     setResult(null);
     setGeneratedPrompt(null);
     setError(null);
@@ -352,10 +355,12 @@ export default function CreativeModifyPage() {
                 concept={concept}
                 mode={mode}
                 imageModel={imageModel}
+                userPrompt={userPrompt}
                 onAngleChange={setAngle}
                 onConceptChange={setConcept}
                 onModeChange={setMode}
                 onImageModelChange={setImageModel}
+                onUserPromptChange={setUserPrompt}
                 onSubmit={handleModify}
                 isLoading={isLoading}
               />

frontend/components/creative/ModificationForm.tsx

@@ -26,10 +26,12 @@ interface ModificationFormProps {
   concept: string;
   mode: ModificationMode;
   imageModel: string | null;
+  userPrompt: string;
   onAngleChange: (value: string) => void;
   onConceptChange: (value: string) => void;
   onModeChange: (mode: ModificationMode) => void;
   onImageModelChange: (model: string | null) => void;
+  onUserPromptChange: (value: string) => void;
   onSubmit: () => void;
   isLoading: boolean;
 }
@@ -41,10 +43,12 @@ export const ModificationForm: React.FC<ModificationFormProps> = ({
   concept,
   mode,
   imageModel,
+  userPrompt,
   onAngleChange,
   onConceptChange,
   onModeChange,
   onImageModelChange,
+  onUserPromptChange,
   onSubmit,
   isLoading,
 }) => {
@@ -99,7 +103,7 @@ export const ModificationForm: React.FC<ModificationFormProps> = ({
     fetchOptions();
   }, []);
 
-  const isValid = angle.trim() || concept.trim();
+  const isValid = angle.trim() || concept.trim() || userPrompt.trim();
 
   const groupedAngles = angleOptions.reduce((acc, angle) => {
     if (!acc[angle.category]) acc[angle.category] = [];
@@ -314,6 +318,26 @@ export const ModificationForm: React.FC<ModificationFormProps> = ({
           </div>
         </div>
 
+        {/* User Prompt (Optional) */}
+        <div className="space-y-4 pt-4 border-t border-gray-100">
+          <div className="flex items-center gap-2">
+            <Lightbulb className="w-4 h-4 text-purple-500" />
+            <label className="text-sm font-bold text-gray-700 uppercase tracking-wider">
+              Custom Instructions (Optional)
+            </label>
+          </div>
+          <textarea
+            value={userPrompt}
+            onChange={(e) => onUserPromptChange(e.target.value)}
+            placeholder="e.g., Make the image more vibrant, add a sense of urgency, change the background to blue..."
+            className="w-full px-4 py-3 rounded-xl border-2 border-gray-100 bg-gray-50/50 hover:bg-white focus:bg-white focus:border-purple-500 focus:ring-4 focus:ring-purple-500/10 transition-all font-medium text-gray-900 min-h-[100px] resize-y"
+          />
+          <p className="text-xs text-gray-500 flex items-center gap-1.5 px-1">
+            <Info className="w-3 h-3" />
+            Provide specific instructions for how you want the image modified.
+          </p>
+        </div>
+
         {/* Image Model Selection */}
         <div className="space-y-4 pt-4 border-t border-gray-100">
           <label className="text-sm font-bold text-gray-700 uppercase tracking-wider block">
@@ -360,12 +384,12 @@ export const ModificationForm: React.FC<ModificationFormProps> = ({
             </span>
           </button>
 
-          {!isValid && (
-            <div className="mt-4 flex items-center justify-center gap-2 text-amber-600 animate-pulse">
-              <Info className="w-4 h-4" />
-              <p className="text-sm font-bold">Please select or enter at least one angle or concept</p>
-            </div>
-          )}
+        {!isValid && (
+          <div className="mt-4 flex items-center justify-center gap-2 text-amber-600 animate-pulse">
+            <Info className="w-4 h-4" />
+            <p className="text-sm font-bold">Please provide at least one: angle, concept, or custom instructions</p>
+          </div>
+        )}
         </div>
       </CardContent>
     </Card>

frontend/lib/api/endpoints.ts

@@ -329,6 +329,7 @@ export const modifyCreative = async (params: {
   concept?: string;
   mode: ModificationMode;
   image_model?: string | null;
+  user_prompt?: string;
 }): Promise<CreativeModifyResponse> => {
   const response = await apiClient.post<CreativeModifyResponse>(
     "/api/creative/modify",

main.py

@@ -1967,6 +1967,10 @@ class CreativeModifyRequest(BaseModel):
         default=None,
         description="Image generation model to use"
     )
+    user_prompt: Optional[str] = Field(
+        default=None,
+        description="Optional custom user prompt/instructions for modification"
+    )
 
 
 class ModifiedImageResult(BaseModel):
@@ -2207,6 +2211,7 @@ async def modify_creative(
             user_concept=request.concept,
             mode=request.mode,
             image_model=request.image_model,
+            user_prompt=request.user_prompt,
         )
         
         if result["status"] != "success":

services/creative_modifier.py

@@ -231,6 +231,7 @@ Be specific and detailed in your analysis. If you cannot determine something wit
         user_angle: Optional[str] = None,
         user_concept: Optional[str] = None,
         mode: str = "modify",
+        user_prompt: Optional[str] = None,
     ) -> str:
         """
         Generate a prompt for modifying the creative based on analysis and user input.
@@ -240,6 +241,7 @@ Be specific and detailed in your analysis. If you cannot determine something wit
             user_angle: User-provided angle to apply
             user_concept: User-provided concept to apply
             mode: "modify" for image-to-image, "inspired" for new generation
+            user_prompt: Custom user instructions for modification
             
         Returns:
             Generated prompt string
@@ -247,6 +249,12 @@ Be specific and detailed in your analysis. If you cannot determine something wit
         logger.info(f"Generating modification prompt (mode: {mode})")
         logger.info(f"User angle: {user_angle}")
         logger.info(f"User concept: {user_concept}")
+        logger.info(f"User prompt: {user_prompt}")
+        
+        # If user provided a custom prompt, use it directly
+        if user_prompt and user_prompt.strip():
+            logger.info("Using custom user prompt directly")
+            return user_prompt.strip()
         
         system_prompt = """You are an expert advertising creative director with 20+ years experience.
     Your task is to create seamless, organic modifications that enhance existing creatives without appearing forced.
@@ -399,6 +407,7 @@ Be specific and detailed in your analysis. If you cannot determine something wit
         user_concept: Optional[str] = None,
         mode: str = "modify",
         image_model: Optional[str] = None,
+        user_prompt: Optional[str] = None,
         width: int = 1024,
         height: int = 1024,
     ) -> Dict[str, Any]:
@@ -412,6 +421,7 @@ Be specific and detailed in your analysis. If you cannot determine something wit
             user_concept: User-provided concept
             mode: "modify" for image-to-image, "inspired" for new generation
             image_model: Model to use for generation
+            user_prompt: Custom user instructions for modification
             width: Output width
             height: Output height
             
@@ -425,6 +435,7 @@ Be specific and detailed in your analysis. If you cannot determine something wit
         logger.info(f"Image URL: {image_url}")
         logger.info(f"User angle: {user_angle}")
         logger.info(f"User concept: {user_concept}")
+        logger.info(f"User prompt: {user_prompt}")
         logger.info(f"Image model: {image_model}")
         logger.info("=" * 80)
         
@@ -442,6 +453,7 @@ Be specific and detailed in your analysis. If you cannot determine something wit
             user_angle=user_angle,
             user_concept=user_concept,
             mode=mode,
+            user_prompt=user_prompt,
         )
         result["prompt"] = prompt
         logger.info(f"✓ Generated prompt: {prompt}")