Add custom angle and concept refinement features

- Introduced custom angle and concept fields in the MatrixGenerateRequest model, allowing users to provide personalized inputs for ad generation.
- Implemented a new RefineCustomRequest model and corresponding API endpoint to refine user-provided angles and concepts using AI, enhancing the ad generation process.
- Updated the frontend to support custom angle and concept inputs, including state management for refining these inputs and displaying refined results.
- Refactored the generator service to handle custom angles and concepts, ensuring proper integration with existing ad generation workflows.
- Enhanced type definitions and API endpoints to accommodate the new features, ensuring type safety and consistency across the application.

frontend/app/generate/matrix/page.tsx

@@ -1,232 +0,0 @@
-"use client";
-
-import React, { useState, useEffect } from "react";
-import { AngleSelector } from "@/components/matrix/AngleSelector";
-import { ConceptSelector } from "@/components/matrix/ConceptSelector";
-import { GenerationForm } from "@/components/generation/GenerationForm";
-import { GenerationProgressComponent } from "@/components/generation/GenerationProgress";
-import { AdPreview } from "@/components/generation/AdPreview";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
-import { Button } from "@/components/ui/Button";
-import { generateMatrixAd } from "@/lib/api/endpoints";
-import { Sparkles } from "lucide-react";
-import { useGenerationStore } from "@/store/generationStore";
-import { useMatrixStore } from "@/store/matrixStore";
-import { toast } from "react-hot-toast";
-import { IMAGE_MODELS } from "@/lib/constants/models";
-import type { Niche, MatrixGenerateResponse, AngleInfo, ConceptInfo } from "@/types/api";
-import type { GenerationProgress } from "@/types";
-
-export default function MatrixGeneratePage() {
-  const {
-    currentGeneration,
-    progress,
-    isGenerating,
-    generationStartTime,
-    setCurrentGeneration,
-    setProgress,
-    setIsGenerating,
-    setError,
-    setGenerationStartTime,
-    reset,
-  } = useGenerationStore();
-
-  const { selectedAngle, selectedConcept, setSelectedAngle, setSelectedConcept } = useMatrixStore();
-
-  const [niche, setNiche] = useState<Niche>("home_insurance");
-  const [numImages, setNumImages] = useState(1);
-  const [imageModel, setImageModel] = useState<string | null>(null);
-
-  // Request notification permission and show notification when generation completes
-  const showNotification = (title: string, body: string) => {
-    if ("Notification" in window && Notification.permission === "granted") {
-      new Notification(title, {
-        body,
-        icon: "/favicon.ico",
-        tag: "generation-complete",
-      });
-    }
-  };
-
-  // Request notification permission on mount
-  useEffect(() => {
-    if ("Notification" in window && Notification.permission === "default") {
-      Notification.requestPermission();
-    }
-  }, []);
-
-  // Show notification when generation completes
-  useEffect(() => {
-    if (progress.step === "complete" && currentGeneration) {
-      showNotification("Ad Generated Successfully!", "Your ad is ready to view.");
-    }
-  }, [progress.step, currentGeneration]);
-
-  const handleGenerate = async () => {
-    if (!selectedAngle || !selectedConcept) {
-      toast.error("Please select both an angle and a concept");
-      return;
-    }
-
-    reset();
-    setIsGenerating(true);
-    setGenerationStartTime(Date.now());
-    setProgress({
-      step: "copy",
-      progress: 10,
-      message: "Generating ad with selected angle and concept...",
-    });
-
-    try {
-      const result = await generateMatrixAd({
-        niche,
-        angle_key: selectedAngle.key,
-        concept_key: selectedConcept.key,
-        num_images: numImages,
-        image_model: imageModel,
-      });
-
-      setCurrentGeneration(result);
-      setProgress({
-        step: "complete",
-        progress: 100,
-        message: "Ad generated successfully!",
-      });
-
-      toast.success("Ad generated successfully!");
-    } catch (error: any) {
-      setError(error.message || "Failed to generate ad");
-      setProgress({
-        step: "error",
-        progress: 0,
-        message: error.message || "An error occurred",
-      });
-      toast.error(error.message || "Failed to generate ad");
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen pb-12">
-      {/* Hero Section */}
-      <div className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-cyan-50 to-pink-50 py-12 mb-8">
-        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-          <div className="text-center animate-fade-in">
-            <h1 className="text-4xl md:text-5xl font-extrabold mb-4">
-              <span className="gradient-text">Matrix</span>
-              <span className="text-gray-900"> Generation</span>
-            </h1>
-            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
-              Generate ads using specific angle × concept combinations
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Progress Component - Sticky at top */}
-        {isGenerating && (
-          <GenerationProgressComponent progress={progress} generationStartTime={generationStartTime} />
-        )}
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        {/* Left Column - Selection */}
-        <div className="lg:col-span-1 space-y-6">
-          <Card variant="glass" className="animate-slide-in border-2 border-transparent hover:border-blue-200/50 transition-all duration-300">
-            <CardHeader>
-              <CardTitle className="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
-                Configuration
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div>
-                <label className="block text-sm font-semibold text-gray-700 mb-2">Niche</label>
-                <select
-                  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-blue-500 focus:border-blue-500 transition-all duration-250 hover:border-blue-300"
-                  value={niche}
-                  onChange={(e) => setNiche(e.target.value as Niche)}
-                >
-                  <option value="home_insurance">Home Insurance</option>
-                  <option value="glp1">GLP-1</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="block text-sm font-semibold text-gray-700 mb-2">Image Model</label>
-                <select
-                  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-cyan-500 focus:border-cyan-500 transition-all duration-250 hover:border-cyan-300"
-                  value={imageModel || ""}
-                  onChange={(e) => setImageModel(e.target.value || null)}
-                >
-                  {IMAGE_MODELS.map((model) => (
-                    <option key={model.value} value={model.value}>
-                      {model.label}
-                    </option>
-                  ))}
-                </select>
-              </div>
-
-              <div>
-                <label className="block text-sm font-semibold text-gray-700 mb-2">
-                  Number of Ad Images: <span className="text-cyan-600 font-bold">{numImages}</span>
-                </label>
-                <input
-                  type="range"
-                  min="1"
-                  max="5"
-                  step="1"
-                  className="w-full accent-gradient-to-r from-blue-500 to-cyan-500"
-                  style={{
-                    accentColor: '#06b6d4'
-                  }}
-                  value={numImages}
-                  onChange={(e) => setNumImages(Number(e.target.value))}
-                />
-                <div className="flex justify-between text-xs text-gray-500 mt-1 font-medium">
-                  <span>1</span>
-                  <span>5</span>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <AngleSelector
-            onSelect={setSelectedAngle}
-            selectedAngle={selectedAngle}
-          />
-
-          <ConceptSelector
-            onSelect={setSelectedConcept}
-            selectedConcept={selectedConcept}
-            angleKey={selectedAngle?.key}
-          />
-
-          <Button
-            variant="primary"
-            size="lg"
-            className="w-full"
-            onClick={handleGenerate}
-            isLoading={isGenerating}
-            disabled={!selectedAngle || !selectedConcept}
-          >
-            Generate Ad
-          </Button>
-        </div>
-
-        {/* Right Column - Preview */}
-        <div className="lg:col-span-2">
-          {currentGeneration ? (
-            <AdPreview ad={currentGeneration} />
-          ) : (
-            <div className="text-center py-12 text-gray-500">
-              <p>Select an angle and concept, then click "Generate Ad"</p>
-            </div>
-          )}
-        </div>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/app/generate/page.tsx

@@ -12,13 +12,13 @@ import { ConceptSelector } from "@/components/matrix/ConceptSelector";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
 import { ProgressBar } from "@/components/ui/ProgressBar";
-import { generateAd, generateMatrixAd, generateBatch, generateExtensiveAd } from "@/lib/api/endpoints";
+import { generateAd, generateMatrixAd, generateBatch, generateExtensiveAd, refineCustomAngleOrConcept } from "@/lib/api/endpoints";
 import { useGenerationStore } from "@/store/generationStore";
 import { useMatrixStore } from "@/store/matrixStore";
 import { toast } from "react-hot-toast";
-import { Sparkles, Zap, Layers, Package, Workflow } from "lucide-react";
+import { Sparkles, Zap, Layers, Package, Workflow, Wand2, Check, Loader2 } from "lucide-react";
 import { IMAGE_MODELS } from "@/lib/constants/models";
-import type { Niche, GenerateResponse } from "@/types/api";
+import type { Niche, GenerateResponse, AngleInfo, ConceptInfo } from "@/types/api";
 
 type GenerationMode = "standard" | "matrix" | "batch" | "extensive";
 
@@ -48,7 +48,33 @@ export default function GeneratePage() {
     reset,
   } = useGenerationStore();
 
-  const { selectedAngle, selectedConcept, setSelectedAngle, setSelectedConcept } = useMatrixStore();
+  const { 
+    selectedAngle, 
+    selectedConcept, 
+    setSelectedAngle, 
+    setSelectedConcept,
+    // Custom angle/concept state
+    customAngleText,
+    customConceptText,
+    customAngleRefined,
+    customConceptRefined,
+    isRefiningAngle,
+    isRefiningConcept,
+    useCustomAngle,
+    useCustomConcept,
+    setCustomAngleText,
+    setCustomConceptText,
+    setCustomAngleRefined,
+    setCustomConceptRefined,
+    setIsRefiningAngle,
+    setIsRefiningConcept,
+    setUseCustomAngle,
+    setUseCustomConcept,
+    clearCustomAngle,
+    clearCustomConcept,
+  } = useMatrixStore();
+  
+  const [userGoal, setUserGoal] = useState("");
 
   // Request notification permission and show notification when generation completes
   const showNotification = (title: string, body: string) => {
@@ -75,6 +101,68 @@ export default function GeneratePage() {
     }
   }, [progress.step, currentGeneration]);
 
+  // Handle refining custom angle with AI
+  const handleRefineAngle = async () => {
+    if (!customAngleText.trim()) {
+      toast.error("Please enter your custom angle idea");
+      return;
+    }
+
+    setIsRefiningAngle(true);
+    try {
+      const result = await refineCustomAngleOrConcept({
+        text: customAngleText,
+        type: "angle",
+        niche,
+        goal: userGoal || undefined,
+      });
+
+      if (result.status === "success" && result.refined) {
+        setCustomAngleRefined(result.refined as AngleInfo);
+        toast.success("Angle refined successfully!");
+      } else {
+        toast.error(result.error || "Failed to refine angle");
+      }
+    } catch (error: any) {
+      toast.error(error.message || "Failed to refine angle");
+    } finally {
+      setIsRefiningAngle(false);
+    }
+  };
+
+  // Handle refining custom concept with AI
+  const handleRefineConcept = async () => {
+    if (!customConceptText.trim()) {
+      toast.error("Please enter your custom concept idea");
+      return;
+    }
+
+    setIsRefiningConcept(true);
+    try {
+      const result = await refineCustomAngleOrConcept({
+        text: customConceptText,
+        type: "concept",
+        niche,
+        goal: userGoal || undefined,
+      });
+
+      if (result.status === "success" && result.refined) {
+        setCustomConceptRefined(result.refined as ConceptInfo);
+        toast.success("Concept refined successfully!");
+      } else {
+        toast.error(result.error || "Failed to refine concept");
+      }
+    } catch (error: any) {
+      toast.error(error.message || "Failed to refine concept");
+    } finally {
+      setIsRefiningConcept(false);
+    }
+  };
+
+  // Get the effective angle and concept (custom or selected)
+  const effectiveAngle = useCustomAngle ? customAngleRefined : selectedAngle;
+  const effectiveConcept = useCustomConcept ? customConceptRefined : selectedConcept;
+
   const handleStandardGenerate = async (data: { niche: Niche; num_images: number; image_model?: string | null; target_audience?: string; offer?: string }) => {
     reset();
     setIsGenerating(true);
@@ -193,8 +281,8 @@ export default function GeneratePage() {
   };
 
   const handleMatrixGenerate = async () => {
-    if (!selectedAngle || !selectedConcept) {
-      toast.error("Please select both an angle and a concept");
+    if (!effectiveAngle || !effectiveConcept) {
+      toast.error("Please select or create both an angle and a concept");
       return;
     }
 
@@ -221,8 +309,10 @@ export default function GeneratePage() {
           Array.from({ length: numImages }, (_, i) =>
             generateMatrixAd({
               niche,
-              angle_key: selectedAngle.key,
-              concept_key: selectedConcept.key,
+              angle_key: useCustomAngle ? "custom" : effectiveAngle.key,
+              concept_key: useCustomConcept ? "custom" : effectiveConcept.key,
+              custom_angle: useCustomAngle ? JSON.stringify(effectiveAngle) : null,
+              custom_concept: useCustomConcept ? JSON.stringify(effectiveConcept) : null,
               num_images: 1, // Each ad gets 1 image
               image_model: imageModel,
               target_audience: targetAudience || undefined,
@@ -270,8 +360,10 @@ export default function GeneratePage() {
       try {
         const result = await generateMatrixAd({
           niche,
-          angle_key: selectedAngle.key,
-          concept_key: selectedConcept.key,
+          angle_key: useCustomAngle ? "custom" : effectiveAngle.key,
+          concept_key: useCustomConcept ? "custom" : effectiveConcept.key,
+          custom_angle: useCustomAngle ? JSON.stringify(effectiveAngle) : null,
+          custom_concept: useCustomConcept ? JSON.stringify(effectiveConcept) : null,
           num_images: 1, // Single image
           image_model: imageModel,
           target_audience: targetAudience || undefined,
@@ -725,16 +817,233 @@ export default function GeneratePage() {
                   </CardContent>
                 </Card>
 
-                <AngleSelector
-                  onSelect={setSelectedAngle}
-                  selectedAngle={selectedAngle}
-                />
+                {/* Custom Angle Input */}
+                <Card variant="glass" className="border-2 border-transparent hover:border-purple-200/50 transition-all duration-300">
+                  <CardHeader className="pb-3">
+                    <div className="flex items-center justify-between">
+                      <CardTitle className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent text-base">
+                        Custom Angle (Optional)
+                      </CardTitle>
+                      <label className="flex items-center space-x-2 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={useCustomAngle}
+                          onChange={(e) => {
+                            setUseCustomAngle(e.target.checked);
+                            if (!e.target.checked) {
+                              clearCustomAngle();
+                            }
+                          }}
+                          className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
+                        />
+                        <span className="text-xs text-gray-600">Use custom</span>
+                      </label>
+                    </div>
+                  </CardHeader>
+                  {useCustomAngle && (
+                    <CardContent className="space-y-3 pt-0">
+                      <div>
+                        <label className="block text-xs font-medium text-gray-600 mb-1">
+                          Your angle idea (why should they care?)
+                        </label>
+                        <textarea
+                          className="w-full px-3 py-2 text-sm rounded-lg border-2 border-gray-200 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-250 resize-none"
+                          rows={2}
+                          placeholder="e.g., 'Make them fear losing their savings to unexpected home repairs' or 'Appeal to their pride as responsible homeowners'"
+                          value={customAngleText}
+                          onChange={(e) => {
+                            setCustomAngleText(e.target.value);
+                            setCustomAngleRefined(null);
+                          }}
+                        />
+                      </div>
+                      
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        className="w-full flex items-center justify-center gap-2"
+                        onClick={handleRefineAngle}
+                        disabled={!customAngleText.trim() || isRefiningAngle}
+                      >
+                        {isRefiningAngle ? (
+                          <>
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                            Refining...
+                          </>
+                        ) : (
+                          <>
+                            <Wand2 className="w-4 h-4" />
+                            Refine with AI
+                          </>
+                        )}
+                      </Button>
+
+                      {customAngleRefined && (
+                        <div className="p-3 rounded-lg bg-gradient-to-r from-purple-50 to-pink-50 border border-purple-200">
+                          <div className="flex items-start justify-between mb-2">
+                            <h4 className="font-semibold text-purple-700 text-sm">
+                              {customAngleRefined.name}
+                            </h4>
+                            <Check className="w-4 h-4 text-green-500 flex-shrink-0" />
+                          </div>
+                          <p className="text-xs text-purple-600 mb-1">
+                            <span className="font-medium">Trigger:</span> {customAngleRefined.trigger}
+                          </p>
+                          <p className="text-xs text-gray-600 italic">
+                            "{(customAngleRefined as any).example || customAngleRefined.name}"
+                          </p>
+                        </div>
+                      )}
+                    </CardContent>
+                  )}
+                </Card>
+
+                {/* Standard Angle Selector - show if not using custom */}
+                {!useCustomAngle && (
+                  <AngleSelector
+                    onSelect={setSelectedAngle}
+                    selectedAngle={selectedAngle}
+                  />
+                )}
+
+                {/* Custom Concept Input */}
+                <Card variant="glass" className="border-2 border-transparent hover:border-teal-200/50 transition-all duration-300">
+                  <CardHeader className="pb-3">
+                    <div className="flex items-center justify-between">
+                      <CardTitle className="bg-gradient-to-r from-teal-600 to-cyan-600 bg-clip-text text-transparent text-base">
+                        Custom Concept (Optional)
+                      </CardTitle>
+                      <label className="flex items-center space-x-2 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={useCustomConcept}
+                          onChange={(e) => {
+                            setUseCustomConcept(e.target.checked);
+                            if (!e.target.checked) {
+                              clearCustomConcept();
+                            }
+                          }}
+                          className="rounded border-gray-300 text-teal-600 focus:ring-teal-500"
+                        />
+                        <span className="text-xs text-gray-600">Use custom</span>
+                      </label>
+                    </div>
+                  </CardHeader>
+                  {useCustomConcept && (
+                    <CardContent className="space-y-3 pt-0">
+                      <div>
+                        <label className="block text-xs font-medium text-gray-600 mb-1">
+                          Your concept idea (how should it look?)
+                        </label>
+                        <textarea
+                          className="w-full px-3 py-2 text-sm rounded-lg border-2 border-gray-200 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-250 resize-none"
+                          rows={2}
+                          placeholder="e.g., 'Show a split screen before/after of a damaged vs protected home' or 'Happy family in front of their house with a shield overlay'"
+                          value={customConceptText}
+                          onChange={(e) => {
+                            setCustomConceptText(e.target.value);
+                            setCustomConceptRefined(null);
+                          }}
+                        />
+                      </div>
+                      
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        className="w-full flex items-center justify-center gap-2"
+                        onClick={handleRefineConcept}
+                        disabled={!customConceptText.trim() || isRefiningConcept}
+                      >
+                        {isRefiningConcept ? (
+                          <>
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                            Refining...
+                          </>
+                        ) : (
+                          <>
+                            <Wand2 className="w-4 h-4" />
+                            Refine with AI
+                          </>
+                        )}
+                      </Button>
+
+                      {customConceptRefined && (
+                        <div className="p-3 rounded-lg bg-gradient-to-r from-teal-50 to-cyan-50 border border-teal-200">
+                          <div className="flex items-start justify-between mb-2">
+                            <h4 className="font-semibold text-teal-700 text-sm">
+                              {customConceptRefined.name}
+                            </h4>
+                            <Check className="w-4 h-4 text-green-500 flex-shrink-0" />
+                          </div>
+                          <p className="text-xs text-teal-600 mb-1">
+                            <span className="font-medium">Structure:</span> {customConceptRefined.structure}
+                          </p>
+                          <p className="text-xs text-gray-600">
+                            <span className="font-medium">Visual:</span> {customConceptRefined.visual}
+                          </p>
+                        </div>
+                      )}
+                    </CardContent>
+                  )}
+                </Card>
 
-                <ConceptSelector
-                  onSelect={setSelectedConcept}
-                  selectedConcept={selectedConcept}
-                  angleKey={selectedAngle?.key}
-                />
+                {/* Standard Concept Selector - show if not using custom */}
+                {!useCustomConcept && (
+                  <ConceptSelector
+                    onSelect={setSelectedConcept}
+                    selectedConcept={selectedConcept}
+                    angleKey={selectedAngle?.key}
+                  />
+                )}
+
+                {/* User Goal Input (helps AI refine custom angles/concepts better) */}
+                {(useCustomAngle || useCustomConcept) && (
+                  <Card variant="glass" className="border-2 border-transparent hover:border-gray-200/50 transition-all duration-300">
+                    <CardContent className="pt-4">
+                      <label className="block text-xs font-medium text-gray-600 mb-1">
+                        Your goal (optional, helps AI understand context)
+                      </label>
+                      <input
+                        type="text"
+                        className="w-full px-3 py-2 text-sm rounded-lg border-2 border-gray-200 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-gray-400 transition-all duration-250"
+                        placeholder="e.g., 'Target homeowners aged 45+ worried about coverage gaps'"
+                        value={userGoal}
+                        onChange={(e) => setUserGoal(e.target.value)}
+                      />
+                    </CardContent>
+                  </Card>
+                )}
+
+                {/* Selection Summary */}
+                <Card variant="glass" className="border-2 border-blue-100 bg-gradient-to-r from-blue-50/50 to-cyan-50/50">
+                  <CardContent className="pt-4 pb-4">
+                    <h4 className="text-sm font-semibold text-gray-700 mb-2">Current Selection:</h4>
+                    <div className="space-y-2 text-xs">
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium text-gray-600">Angle:</span>
+                        {effectiveAngle ? (
+                          <span className="text-blue-600 font-medium">
+                            {effectiveAngle.name} 
+                            {useCustomAngle && <span className="text-purple-500 ml-1">(Custom)</span>}
+                          </span>
+                        ) : (
+                          <span className="text-gray-400 italic">Not selected</span>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium text-gray-600">Concept:</span>
+                        {effectiveConcept ? (
+                          <span className="text-cyan-600 font-medium">
+                            {effectiveConcept.name}
+                            {useCustomConcept && <span className="text-teal-500 ml-1">(Custom)</span>}
+                          </span>
+                        ) : (
+                          <span className="text-gray-400 italic">Not selected</span>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
 
                 <Button
                   variant="primary"
@@ -742,7 +1051,7 @@ export default function GeneratePage() {
                   className="w-full"
                   onClick={handleMatrixGenerate}
                   isLoading={isGenerating}
-                  disabled={!selectedAngle || !selectedConcept}
+                  disabled={!effectiveAngle || !effectiveConcept}
                 >
                   Generate Ad
                 </Button>

frontend/app/matrix/page.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import Link from "next/link";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
-import { Layers, Search, TestTube, Sparkles } from "lucide-react";
+import { Search, TestTube } from "lucide-react";
 
 export default function MatrixPage() {
   return (
@@ -31,30 +31,6 @@ export default function MatrixPage() {
             variant="glass" 
             className="animate-scale-in hover:scale-105 transition-all duration-300 group cursor-pointer" 
             style={{ animationDelay: "0.1s" }}
-          >
-            <Link href="/generate/matrix" className="block">
-              <CardHeader>
-                <div className="p-3 rounded-xl bg-gradient-to-br from-blue-500 via-blue-600 to-cyan-500 w-fit mb-3 shadow-lg group-hover:shadow-xl group-hover:scale-110 transition-all duration-300">
-                  <Layers className="h-6 w-6 text-white" />
-                </div>
-                <CardTitle className="group-hover:text-blue-600 transition-colors">Generate with Matrix</CardTitle>
-                <CardDescription>
-                  Select specific angle and concept combinations
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Button variant="primary" className="w-full group-hover:shadow-lg transition-all">
-                  <Sparkles className="h-4 w-4 mr-2 group-hover:rotate-12 transition-transform duration-300" />
-                  Generate Ad
-                </Button>
-              </CardContent>
-            </Link>
-          </Card>
-
-          <Card 
-            variant="glass" 
-            className="animate-scale-in hover:scale-105 transition-all duration-300 group cursor-pointer" 
-            style={{ animationDelay: "0.2s" }}
           >
             <Link href="/browse/angles" className="block">
               <CardHeader>
@@ -77,7 +53,7 @@ export default function MatrixPage() {
           <Card 
             variant="glass" 
             className="animate-scale-in hover:scale-105 transition-all duration-300 group cursor-pointer" 
-            style={{ animationDelay: "0.3s" }}
+            style={{ animationDelay: "0.2s" }}
           >
             <Link href="/browse/concepts" className="block">
               <CardHeader>
@@ -99,8 +75,8 @@ export default function MatrixPage() {
 
           <Card 
             variant="glass" 
-            className="md:col-span-2 lg:col-span-3 animate-scale-in hover:scale-[1.02] transition-all duration-300 group cursor-pointer" 
-            style={{ animationDelay: "0.4s" }}
+            className="animate-scale-in hover:scale-105 transition-all duration-300 group cursor-pointer" 
+            style={{ animationDelay: "0.3s" }}
           >
             <Link href="/matrix/testing" className="block">
               <CardHeader>

frontend/lib/api/endpoints.ts

@@ -67,6 +67,8 @@ export const generateMatrixAd = async (params: {
   niche: Niche;
   angle_key?: string | null;
   concept_key?: string | null;
+  custom_angle?: string | null;
+  custom_concept?: string | null;
   num_images: number;
   image_model?: string | null;
   target_audience?: string;
@@ -135,6 +137,17 @@ export const getCompatibleConcepts = async (angleKey: string): Promise<Compatibl
   return response.data;
 };
 
+// Refine custom angle or concept using AI
+export const refineCustomAngleOrConcept = async (params: {
+  text: string;
+  type: "angle" | "concept";
+  niche: Niche;
+  goal?: string;
+}): Promise<{ status: string; type: "angle" | "concept"; refined?: any; error?: string }> => {
+  const response = await apiClient.post("/matrix/refine-custom", params);
+  return response.data;
+};
+
 // Database Endpoints
 export const getDbStats = async (): Promise<DbStatsResponse> => {
   const response = await apiClient.get<DbStatsResponse>("/db/stats");

frontend/store/matrixStore.ts

@@ -13,6 +13,16 @@ interface MatrixState {
   isLoading: boolean;
   error: string | null;
   
+  // Custom angle/concept state
+  customAngleText: string;
+  customConceptText: string;
+  customAngleRefined: AngleInfo | null;
+  customConceptRefined: ConceptInfo | null;
+  isRefiningAngle: boolean;
+  isRefiningConcept: boolean;
+  useCustomAngle: boolean;
+  useCustomConcept: boolean;
+  
   setAngles: (angles: AnglesResponse) => void;
   setConcepts: (concepts: ConceptsResponse) => void;
   setSelectedAngle: (angle: AngleInfo | null) => void;
@@ -22,6 +32,19 @@ interface MatrixState {
   setConceptFilters: (filters: Partial<MatrixFilters>) => void;
   setIsLoading: (isLoading: boolean) => void;
   setError: (error: string | null) => void;
+  
+  // Custom angle/concept setters
+  setCustomAngleText: (text: string) => void;
+  setCustomConceptText: (text: string) => void;
+  setCustomAngleRefined: (angle: AngleInfo | null) => void;
+  setCustomConceptRefined: (concept: ConceptInfo | null) => void;
+  setIsRefiningAngle: (isRefining: boolean) => void;
+  setIsRefiningConcept: (isRefining: boolean) => void;
+  setUseCustomAngle: (use: boolean) => void;
+  setUseCustomConcept: (use: boolean) => void;
+  clearCustomAngle: () => void;
+  clearCustomConcept: () => void;
+  
   reset: () => void;
 }
 
@@ -35,6 +58,15 @@ const initialState = {
   conceptFilters: {},
   isLoading: false,
   error: null,
+  // Custom state
+  customAngleText: "",
+  customConceptText: "",
+  customAngleRefined: null,
+  customConceptRefined: null,
+  isRefiningAngle: false,
+  isRefiningConcept: false,
+  useCustomAngle: false,
+  useCustomConcept: false,
 };
 
 export const useMatrixStore = create<MatrixState>((set) => ({
@@ -62,5 +94,42 @@ export const useMatrixStore = create<MatrixState>((set) => ({
   
   setError: (error) => set({ error }),
   
+  // Custom angle/concept setters
+  setCustomAngleText: (text) => set({ customAngleText: text }),
+  
+  setCustomConceptText: (text) => set({ customConceptText: text }),
+  
+  setCustomAngleRefined: (angle) => set({ customAngleRefined: angle }),
+  
+  setCustomConceptRefined: (concept) => set({ customConceptRefined: concept }),
+  
+  setIsRefiningAngle: (isRefining) => set({ isRefiningAngle: isRefining }),
+  
+  setIsRefiningConcept: (isRefining) => set({ isRefiningConcept: isRefining }),
+  
+  setUseCustomAngle: (use) => set({ 
+    useCustomAngle: use,
+    // Clear selected angle if switching to custom
+    selectedAngle: use ? null : null,
+  }),
+  
+  setUseCustomConcept: (use) => set({ 
+    useCustomConcept: use,
+    // Clear selected concept if switching to custom
+    selectedConcept: use ? null : null,
+  }),
+  
+  clearCustomAngle: () => set({
+    customAngleText: "",
+    customAngleRefined: null,
+    useCustomAngle: false,
+  }),
+  
+  clearCustomConcept: () => set({
+    customConceptText: "",
+    customConceptRefined: null,
+    useCustomConcept: false,
+  }),
+  
   reset: () => set(initialState),
 }));

frontend/types/api.ts

@@ -49,6 +49,8 @@ export interface AngleInfo {
   name: string;
   trigger: string;
   category: string;
+  example?: string;
+  original_text?: string;  // For custom angles
 }
 
 export interface ConceptInfo {
@@ -57,6 +59,40 @@ export interface ConceptInfo {
   structure: string;
   visual: string;
   category: string;
+  original_text?: string;  // For custom concepts
+}
+
+// Custom angle/concept refinement types
+export interface RefineCustomRequest {
+  text: string;
+  type: "angle" | "concept";
+  niche: Niche;
+  goal?: string;
+}
+
+export interface RefinedAngle {
+  key: string;
+  name: string;
+  trigger: string;
+  example: string;
+  category: string;
+  original_text: string;
+}
+
+export interface RefinedConcept {
+  key: string;
+  name: string;
+  structure: string;
+  visual: string;
+  category: string;
+  original_text: string;
+}
+
+export interface RefineCustomResponse {
+  status: string;
+  type: "angle" | "concept";
+  refined?: RefinedAngle | RefinedConcept | null;
+  error?: string | null;
 }
 
 export interface MatrixResult {

main.py

@@ -225,6 +225,14 @@ class MatrixGenerateRequest(BaseModel):
         default=None,
         description="Specific concept key (random if not provided)"
     )
+    custom_angle: Optional[str] = Field(
+        default=None,
+        description="Custom angle text (AI will structure it properly). Used when angle_key is 'custom'"
+    )
+    custom_concept: Optional[str] = Field(
+        default=None,
+        description="Custom concept text (AI will structure it properly). Used when concept_key is 'custom'"
+    )
     num_images: int = Field(
         default=1,
         ge=1,
@@ -245,6 +253,51 @@ class MatrixGenerateRequest(BaseModel):
     )
 
 
+class RefineCustomRequest(BaseModel):
+    """Request to refine custom angle or concept text using AI."""
+    text: str = Field(
+        description="The raw custom text from user"
+    )
+    type: Literal["angle", "concept"] = Field(
+        description="Whether this is an angle or concept"
+    )
+    niche: Literal["home_insurance", "glp1"] = Field(
+        description="Target niche for context"
+    )
+    goal: Optional[str] = Field(
+        default=None,
+        description="Optional user goal or context"
+    )
+
+
+class RefinedAngleResponse(BaseModel):
+    """Response for refined angle."""
+    key: str = Field(default="custom")
+    name: str
+    trigger: str
+    example: str
+    category: str = Field(default="Custom")
+    original_text: str
+
+
+class RefinedConceptResponse(BaseModel):
+    """Response for refined concept."""
+    key: str = Field(default="custom")
+    name: str
+    structure: str
+    visual: str
+    category: str = Field(default="Custom")
+    original_text: str
+
+
+class RefineCustomResponse(BaseModel):
+    """Response for refined custom angle or concept."""
+    status: str
+    type: Literal["angle", "concept"]
+    refined: Optional[dict] = None
+    error: Optional[str] = None
+
+
 class MatrixBatchRequest(BaseModel):
     """Request for batch matrix generation."""
     niche: Literal["home_insurance", "glp1"] = Field(
@@ -1366,12 +1419,18 @@ async def generate_with_matrix(
     
     If angle_key and concept_key are not provided, a compatible
     combination will be selected automatically based on the niche.
+    
+    Supports custom angles/concepts:
+    - Set angle_key='custom' and provide custom_angle text
+    - Set concept_key='custom' and provide custom_concept text
     """
     try:
         result = await ad_generator.generate_ad_with_matrix(
             niche=request.niche,
             angle_key=request.angle_key,
             concept_key=request.concept_key,
+            custom_angle=request.custom_angle,
+            custom_concept=request.custom_concept,
             num_images=request.num_images,
             image_model=request.image_model,
             username=username,  # Pass current user
@@ -1536,6 +1595,45 @@ async def get_compatible_concepts(angle_key: str):
     }
 
 
+@app.post("/matrix/refine-custom", response_model=RefineCustomResponse)
+async def refine_custom_angle_or_concept(request: RefineCustomRequest):
+    """
+    Refine a custom angle or concept text using AI.
+    
+    This endpoint takes raw user input and structures it properly
+    according to the angle/concept framework used in ad generation.
+    
+    For angles, it extracts:
+    - name: Short descriptive name
+    - trigger: Psychological trigger (e.g., Fear, Hope, Pride)
+    - example: Example hook text
+    
+    For concepts, it extracts:
+    - name: Short descriptive name
+    - structure: How to structure the visual/copy
+    - visual: Visual guidance for the image
+    """
+    try:
+        result = await ad_generator.refine_custom_angle_or_concept(
+            text=request.text,
+            type=request.type,
+            niche=request.niche,
+            goal=request.goal,
+        )
+        return {
+            "status": "success",
+            "type": request.type,
+            "refined": result,
+        }
+    except Exception as e:
+        return {
+            "status": "error",
+            "type": request.type,
+            "refined": None,
+            "error": str(e),
+        }
+
+
 # =============================================================================
 # EXTENSIVE ENDPOINTS
 # =============================================================================

services/generator.py

@@ -1687,6 +1687,8 @@ CRITICAL REQUIREMENTS:
         niche: str,
         angle_key: Optional[str] = None,
         concept_key: Optional[str] = None,
+        custom_angle: Optional[str] = None,
+        custom_concept: Optional[str] = None,
         num_images: int = 1,
         image_model: Optional[str] = None,
         username: Optional[str] = None,  # Username of the user generating the ad
@@ -1701,36 +1703,89 @@ CRITICAL REQUIREMENTS:
             niche: Target niche
             angle_key: Specific angle key (optional, random if not provided)
             concept_key: Specific concept key (optional, random if not provided)
+            custom_angle: Custom angle dict (used when angle_key is 'custom')
+            custom_concept: Custom concept dict (used when concept_key is 'custom')
             num_images: Number of images to generate
         
         Returns:
             Complete ad creative with angle and concept metadata
         """
-        # Get or generate angle × concept combination
-        if angle_key and concept_key:
-            from data.angles import get_angle_by_key
-            from data.concepts import get_concept_by_key
-            
+        from data.angles import get_angle_by_key
+        from data.concepts import get_concept_by_key
+        
+        # Handle custom or predefined angle
+        angle = None
+        if angle_key == "custom" and custom_angle:
+            # Parse custom angle - it should be a dict with name, trigger, example
+            if isinstance(custom_angle, str):
+                # If it's a JSON string, parse it
+                try:
+                    import json
+                    angle = json.loads(custom_angle)
+                except:
+                    # If plain text, create a basic structure
+                    angle = {
+                        "key": "custom",
+                        "name": "Custom Angle",
+                        "trigger": "Emotion",
+                        "example": custom_angle,
+                        "category": "Custom",
+                    }
+            else:
+                angle = custom_angle
+            # Ensure required fields
+            angle["key"] = "custom"
+            angle["category"] = angle.get("category", "Custom")
+        elif angle_key:
             angle = get_angle_by_key(angle_key)
+            if not angle:
+                raise ValueError(f"Invalid angle_key: {angle_key}")
+        
+        # Handle custom or predefined concept
+        concept = None
+        if concept_key == "custom" and custom_concept:
+            # Parse custom concept - it should be a dict with name, structure, visual
+            if isinstance(custom_concept, str):
+                # If it's a JSON string, parse it
+                try:
+                    import json
+                    concept = json.loads(custom_concept)
+                except:
+                    # If plain text, create a basic structure
+                    concept = {
+                        "key": "custom",
+                        "name": "Custom Concept",
+                        "structure": custom_concept,
+                        "visual": custom_concept,
+                        "category": "Custom",
+                    }
+            else:
+                concept = custom_concept
+            # Ensure required fields
+            concept["key"] = "custom"
+            concept["category"] = concept.get("category", "Custom")
+        elif concept_key:
             concept = get_concept_by_key(concept_key)
-            
-            if not angle or not concept:
-                raise ValueError(f"Invalid angle_key or concept_key")
-            
+            if not concept:
+                raise ValueError(f"Invalid concept_key: {concept_key}")
+        
+        # If both angle and concept are provided (custom or predefined)
+        if angle and concept:
             combination = {
                 "angle": angle,
                 "concept": concept,
                 "prompt_guidance": f"""
-ANGLE: {angle['name']}
-- Psychological trigger: {angle['trigger']}
-- Example: "{angle['example']}"
+ANGLE: {angle.get('name', 'Custom Angle')}
+- Psychological trigger: {angle.get('trigger', 'Emotion')}
+- Example: "{angle.get('example', '')}"
 
-CONCEPT: {concept['name']}
-- Structure: {concept['structure']}
-- Visual: {concept['visual']}
+CONCEPT: {concept.get('name', 'Custom Concept')}
+- Structure: {concept.get('structure', '')}
+- Visual: {concept.get('visual', '')}
 """,
             }
         else:
+            # Fall back to auto-generation
             combination = matrix_service.generate_single_combination(niche)
         
         angle = combination["angle"]
@@ -2268,6 +2323,144 @@ CONCEPT: {concept['name']}
         else:
             raise ValueError("No ads generated from extensive")
     
+    # ========================================================================
+    # CUSTOM ANGLE/CONCEPT REFINEMENT
+    # ========================================================================
+    
+    async def refine_custom_angle_or_concept(
+        self,
+        text: str,
+        type: str,  # "angle" or "concept"
+        niche: str,
+        goal: Optional[str] = None,
+    ) -> Dict[str, Any]:
+        """
+        Refine a custom angle or concept text using AI.
+        
+        Takes raw user input and structures it properly according to
+        the angle/concept framework used in ad generation.
+        
+        Args:
+            text: Raw user input text
+            type: "angle" or "concept"
+            niche: Target niche for context
+            goal: Optional user goal or context
+            
+        Returns:
+            Structured angle or concept dict
+        """
+        import json
+        
+        if type == "angle":
+            prompt = f"""You are an expert in direct-response advertising psychology.
+
+The user wants to create a custom marketing ANGLE for {niche.replace('_', ' ')} ads.
+
+An ANGLE answers "WHY should I care?" - it's the psychological hook that makes someone stop scrolling.
+
+User's custom angle idea:
+"{text}"
+
+{f'User goal/context: {goal}' if goal else ''}
+
+EXAMPLES OF WELL-STRUCTURED ANGLES:
+1. Name: "Fear / Loss Prevention", Trigger: "Fear", Example: "Don't lose your home to disaster"
+2. Name: "Save Money", Trigger: "Greed", Example: "Save $600/year"
+3. Name: "Peace of Mind", Trigger: "Relief", Example: "Sleep better knowing you're protected"
+4. Name: "Trending Now", Trigger: "FOMO", Example: "Join thousands already using this"
+
+Structure the user's idea into a proper angle format.
+
+Return JSON:
+{{
+    "name": "Short descriptive name (2-4 words)",
+    "trigger": "Primary psychological trigger (e.g., Fear, Hope, Pride, Greed, Relief, FOMO, Curiosity, Anger, Trust)",
+    "example": "A compelling example hook using this angle (5-10 words)"
+}}"""
+            
+            response_format = {
+                "type": "json_schema",
+                "json_schema": {
+                    "name": "refined_angle",
+                    "schema": {
+                        "type": "object",
+                        "properties": {
+                            "name": {"type": "string"},
+                            "trigger": {"type": "string"},
+                            "example": {"type": "string"},
+                        },
+                        "required": ["name", "trigger", "example"],
+                    },
+                },
+            }
+            
+            response = await llm_service.generate(
+                prompt=prompt,
+                temperature=0.7,
+                response_format=response_format,
+            )
+            
+            result = json.loads(response)
+            result["key"] = "custom"
+            result["category"] = "Custom"
+            result["original_text"] = text
+            return result
+            
+        else:  # concept
+            prompt = f"""You are an expert in visual advertising and creative direction.
+
+The user wants to create a custom visual CONCEPT for {niche.replace('_', ' ')} ads.
+
+A CONCEPT answers "HOW do we show it?" - it's the visual approach and structure of the ad.
+
+User's custom concept idea:
+"{text}"
+
+{f'User goal/context: {goal}' if goal else ''}
+
+EXAMPLES OF WELL-STRUCTURED CONCEPTS:
+1. Name: "Before/After Split", Structure: "Side-by-side comparison showing transformation", Visual: "Split screen with contrasting imagery, clear difference visible"
+2. Name: "Person + Quote", Structure: "Real person with testimonial overlay", Visual: "Authentic photo of relatable person, quote bubble or text overlay"
+3. Name: "Problem Close-up", Structure: "Zoom in on the pain point", Visual: "Detailed shot showing the problem clearly, emotional resonance"
+4. Name: "Lifestyle Scene", Structure: "Show the desired outcome/lifestyle", Visual: "Aspirational scene, happy people enjoying results"
+
+Structure the user's idea into a proper concept format.
+
+Return JSON:
+{{
+    "name": "Short descriptive name (2-4 words)",
+    "structure": "How to structure the visual/ad (one sentence)",
+    "visual": "Visual guidance for the image (one sentence, specific details)"
+}}"""
+            
+            response_format = {
+                "type": "json_schema",
+                "json_schema": {
+                    "name": "refined_concept",
+                    "schema": {
+                        "type": "object",
+                        "properties": {
+                            "name": {"type": "string"},
+                            "structure": {"type": "string"},
+                            "visual": {"type": "string"},
+                        },
+                        "required": ["name", "structure", "visual"],
+                    },
+                },
+            }
+            
+            response = await llm_service.generate(
+                prompt=prompt,
+                temperature=0.7,
+                response_format=response_format,
+            )
+            
+            result = json.loads(response)
+            result["key"] = "custom"
+            result["category"] = "Custom"
+            result["original_text"] = text
+            return result
+    
     # ========================================================================
     # MATRIX-SPECIFIC PROMPT METHODS
     # ========================================================================