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,113 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+const FORMAT_LABELS: Record<string, { label: string; dimensions: string }> = {
+  "instagram-feed": { label: "Instagram Feed", dimensions: "1080x1080" },
+  "instagram-stories": { label: "Instagram Stories", dimensions: "1080x1920" },
+  tiktok: { label: "TikTok", dimensions: "1080x1920" },
+  "nextdoor-spotlight": { label: "Nextdoor Spotlight", dimensions: "1200x1200" },
+  "nextdoor-display": { label: "Nextdoor Display", dimensions: "1200x628" },
+};
+
+interface RepurposeModalProps {
+  assetId: string;
+  onClose: () => void;
+}
+
+export function RepurposeModal({ assetId, onClose }: RepurposeModalProps) {
+  const [available, setAvailable] = useState<string[]>([]);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<{ created: number } | null>(null);
+
+  useEffect(() => {
+    fetch(`/api/assets/${assetId}/repurpose`)
+      .then((r) => r.json())
+      .then((data) => {
+        setAvailable(data.formats || []);
+        setSelected(new Set(data.formats || []));
+      })
+      .catch(() => {});
+  }, [assetId]);
+
+  async function handleRepurpose() {
+    setLoading(true);
+    const res = await fetch(`/api/assets/${assetId}/repurpose`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ formats: Array.from(selected) }),
+    });
+    const data = await res.json();
+    setResult(data);
+    setLoading(false);
+  }
+
+  function toggle(key: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+
+  return (
+    <Dialog open onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Repurpose Asset</DialogTitle>
+          <DialogDescription>
+            Resize this image for other platforms. Captions will be re-toned to match each platform.
+          </DialogDescription>
+        </DialogHeader>
+
+        {result ? (
+          <div className="py-4 text-center">
+            <p className="text-lg font-semibold">{result.created} asset{result.created !== 1 ? "s" : ""} created</p>
+            <p className="text-sm text-muted-foreground mt-1">Check the Asset Library to review them.</p>
+            <DialogFooter>
+              <Button onClick={onClose}>Done</Button>
+            </DialogFooter>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-2 py-2">
+              {available.map((key) => {
+                const fmt = FORMAT_LABELS[key];
+                if (!fmt) return null;
+                return (
+                  <label key={key} className="flex items-center gap-3 rounded-md border p-3 cursor-pointer hover:bg-muted/50">
+                    <input
+                      type="checkbox"
+                      checked={selected.has(key)}
+                      onChange={() => toggle(key)}
+                      className="h-4 w-4"
+                    />
+                    <span className="flex-1 text-sm font-medium">{fmt.label}</span>
+                    <span className="text-xs text-muted-foreground">{fmt.dimensions}</span>
+                  </label>
+                );
+              })}
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={onClose}>Cancel</Button>
+              <Button onClick={handleRepurpose} disabled={loading || selected.size === 0}>
+                {loading ? "Repurposing..." : `Repurpose to ${selected.size} format${selected.size !== 1 ? "s" : ""}`}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}