feat: add variation spawner and content repurposing

Variation spawner: select an image asset → spawn N variations that keep the same emotional pattern/visual style but explore different hook angles. Runs a focused ad-creative-designer agent with the original as a Gemini reference image. New assets link back via parentAssetId. Content repurposing: resize an image to all other platform dimensions using Sharp (cover crop). Captions are re-toned for the target platform via Claude CLI. No external APIs needed — fully local. - Add parentAssetId self-relation to Asset model - lib/repurpose.ts: Sharp resize, platform format mapping, caption re-toning - lib/variations.ts: asset DNA extraction, variation prompt builder, mini-pipeline - API routes: /api/assets/[id]/repurpose (GET formats, POST resize) - API routes: /api/assets/[id]/variations (GET existing, POST spawn) - Repurpose modal: checkbox list of target formats - Variation modal: count picker, async launch - Asset card: Repurpose + Variations buttons on image assets - Asset lineage: "Derived from" shown on child assets Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:46:42 -05:00
parent 80a1ffbe4d
commit 2ab8af64d4
11 changed files with 1597 additions and 23 deletions
@@ -0,0 +1,92 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface VariationModalProps {
+  assetId: string;
+  assetName: string;
+  onClose: () => void;
+}
+
+export function VariationModal({ assetId, assetName, onClose }: VariationModalProps) {
+  const [count, setCount] = useState(5);
+  const [loading, setLoading] = useState(false);
+  const [launched, setLaunched] = useState(false);
+
+  async function handleSpawn() {
+    setLoading(true);
+    await fetch(`/api/assets/${assetId}/variations`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ count }),
+    });
+    setLoading(false);
+    setLaunched(true);
+  }
+
+  function handleClose() {
+    setLaunched(false);
+    setCount(5);
+    onClose();
+  }
+
+  return (
+    <Dialog open onOpenChange={handleClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Spawn Variations</DialogTitle>
+          <DialogDescription>
+            Generate new ads with the same emotional pattern as &ldquo;{assetName}&rdquo; but with different hook angles.
+          </DialogDescription>
+        </DialogHeader>
+
+        {launched ? (
+          <div className="py-4 text-center">
+            <p className="text-lg font-semibold">Spawning {count} variations</p>
+            <p className="text-sm text-muted-foreground mt-1">
+              The AI pipeline is running. New assets will appear in the Asset Library when ready.
+            </p>
+            <DialogFooter>
+              <Button onClick={handleClose}>Done</Button>
+            </DialogFooter>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-2 py-2">
+              <Label htmlFor="count">Number of Variations</Label>
+              <Input
+                id="count"
+                type="number"
+                min={1}
+                max={20}
+                value={count}
+                onChange={(e) => setCount(Math.max(1, Math.min(20, parseInt(e.target.value) || 5)))}
+              />
+              <p className="text-xs text-muted-foreground">
+                Each variation keeps the same visual style and CTA but explores a different hook angle.
+                Uses the original ad as a reference image for visual consistency.
+              </p>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={handleClose}>Cancel</Button>
+              <Button onClick={handleSpawn} disabled={loading}>
+                {loading ? "Launching..." : `Spawn ${count} Variation${count !== 1 ? "s" : ""}`}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}