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>
This commit is contained in:
Trey t
@@ -0,0 +1,95 @@
|
||||
import sharp from "sharp";
|
||||
import path from "path";
|
||||
import { mkdirSync } from "fs";
|
||||
import { runAgentStep } from "./claude";
|
||||
|
||||
const PIPELINE_ROOT = process.env.PIPELINE_ROOT || path.join(process.cwd(), "pipeline");
|
||||
|
||||
const PLATFORM_FORMATS: Record<string, { width: number; height: number; label: string }> = {
|
||||
"instagram-feed": { width: 1080, height: 1080, label: "Instagram Feed" },
|
||||
"instagram-stories": { width: 1080, height: 1920, label: "Instagram Stories" },
|
||||
tiktok: { width: 1080, height: 1920, label: "TikTok" },
|
||||
"nextdoor-spotlight": { width: 1200, height: 1200, label: "Nextdoor Spotlight" },
|
||||
"nextdoor-display": { width: 1200, height: 628, label: "Nextdoor Display" },
|
||||
};
|
||||
|
||||
export function getAvailableFormats(currentDimensions: string | null): string[] {
|
||||
return Object.keys(PLATFORM_FORMATS).filter((key) => {
|
||||
const fmt = PLATFORM_FORMATS[key];
|
||||
return `${fmt.width}x${fmt.height}` !== currentDimensions;
|
||||
});
|
||||
}
|
||||
|
||||
export function getPlatformFormat(key: string) {
|
||||
return PLATFORM_FORMATS[key] || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resize an image to target platform dimensions using Sharp.
|
||||
* Uses cover fit + center crop for aspect ratio changes.
|
||||
*/
|
||||
export async function resizeImage(
|
||||
sourcePath: string,
|
||||
targetFormat: string,
|
||||
outputDir: string
|
||||
): Promise<{ filePath: string; fileName: string; dimensions: string; platform: string }> {
|
||||
const fmt = PLATFORM_FORMATS[targetFormat];
|
||||
if (!fmt) throw new Error(`Unknown format: ${targetFormat}`);
|
||||
|
||||
mkdirSync(path.join(PIPELINE_ROOT, outputDir), { recursive: true });
|
||||
|
||||
const sourceBase = path.basename(sourcePath, path.extname(sourcePath));
|
||||
const fileName = `${sourceBase}_${targetFormat}_${fmt.width}x${fmt.height}.png`;
|
||||
const outputPath = path.join(outputDir, fileName);
|
||||
const fullOutputPath = path.join(PIPELINE_ROOT, outputPath);
|
||||
const fullSourcePath = path.join(PIPELINE_ROOT, sourcePath);
|
||||
|
||||
await sharp(fullSourcePath)
|
||||
.resize(fmt.width, fmt.height, { fit: "cover", position: "centre" })
|
||||
.png()
|
||||
.toFile(fullOutputPath);
|
||||
|
||||
const platform = targetFormat.split("-")[0];
|
||||
|
||||
return { filePath: outputPath, fileName, dimensions: `${fmt.width}x${fmt.height}`, platform };
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-tone a caption for a different platform using Claude CLI.
|
||||
*/
|
||||
export async function retoneCaption(
|
||||
originalCaption: string,
|
||||
originalPlatform: string,
|
||||
targetPlatform: string
|
||||
): Promise<string> {
|
||||
const prompt = `You are a social media copywriter. Adapt this ${originalPlatform} caption for ${targetPlatform}.
|
||||
|
||||
Original caption:
|
||||
${originalCaption}
|
||||
|
||||
Rules:
|
||||
- ${targetPlatform === "tiktok" ? "Raw, authentic tone. Short. Trending hashtags. Hook in first line." : ""}
|
||||
- ${targetPlatform === "instagram" ? "Polished, aspirational. Hook → Value → CTA → Hashtags. 150-300 chars." : ""}
|
||||
- ${targetPlatform === "nextdoor" ? "Warm, neighborly. No hashtags. Reference local/community context." : ""}
|
||||
- Keep the core message but match the platform's voice.
|
||||
- Return ONLY the new caption text, nothing else.`;
|
||||
|
||||
const { output } = await runAgentStep("caption-retone", prompt, PIPELINE_ROOT, {});
|
||||
return output.trim();
|
||||
}
|
||||
|
||||
/**
|
||||
* Repurpose an image asset to specific platform formats.
|
||||
*/
|
||||
export async function repurposeImage(
|
||||
sourcePath: string,
|
||||
targetFormats: string[],
|
||||
outputDir: string
|
||||
): Promise<Array<{ filePath: string; fileName: string; dimensions: string; platform: string }>> {
|
||||
const results = [];
|
||||
for (const fmt of targetFormats) {
|
||||
const result = await resizeImage(sourcePath, fmt, outputDir);
|
||||
results.push(result);
|
||||
}
|
||||
return results;
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
import { mkdirSync } from "fs";
|
||||
import path from "path";
|
||||
import { prisma } from "./prisma";
|
||||
import { runAgentStep } from "./claude";
|
||||
import { getAllSettings } from "./settings";
|
||||
import { scanOutputDirectory } from "./scanner";
|
||||
import type { AppConfig } from "./claude";
|
||||
|
||||
const PIPELINE_ROOT = process.env.PIPELINE_ROOT || path.join(process.cwd(), "pipeline");
|
||||
|
||||
interface VariationRequest {
|
||||
assetId: string;
|
||||
count: number;
|
||||
appConfig?: AppConfig;
|
||||
}
|
||||
|
||||
async function loadPipelineEnv(): Promise<Record<string, string>> {
|
||||
const settings = await getAllSettings();
|
||||
const env: Record<string, string> = {};
|
||||
if (settings.TAVILY_API_KEY) env.TAVILY_API_KEY = settings.TAVILY_API_KEY;
|
||||
if (settings.GEMINI_API_KEY) env.GEMINI_API_KEY = settings.GEMINI_API_KEY;
|
||||
return env;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the "DNA" from an asset — hook, CTA, visual style, platform, dimensions.
|
||||
*/
|
||||
function extractAssetDNA(asset: {
|
||||
metadata: string | null;
|
||||
platform: string | null;
|
||||
dimensions: string | null;
|
||||
filePath: string;
|
||||
type: string;
|
||||
}) {
|
||||
const meta = asset.metadata ? JSON.parse(asset.metadata) : {};
|
||||
return {
|
||||
hook: meta.hook || meta.headline || meta.hookText || null,
|
||||
caption: meta.caption || null,
|
||||
cta: meta.cta || meta.ctaText || null,
|
||||
style: meta.style || null,
|
||||
platform: asset.platform,
|
||||
dimensions: asset.dimensions,
|
||||
type: asset.type,
|
||||
isGemini: asset.filePath.toLowerCase().includes("/gemini/"),
|
||||
isPoster: asset.filePath.toLowerCase().includes("/posters/"),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a prompt for the ad-creative-designer to generate variations of a winning asset.
|
||||
*/
|
||||
function buildVariationPrompt(
|
||||
dna: ReturnType<typeof extractAssetDNA>,
|
||||
sourceFilePath: string,
|
||||
count: number,
|
||||
outputDir: string,
|
||||
appConfig?: AppConfig
|
||||
): string {
|
||||
const appName = appConfig?.name ?? "the app";
|
||||
const primaryColor = appConfig?.primaryColor ?? "#0079FF";
|
||||
const accentColor = appConfig?.accentColor ?? "#FF9400";
|
||||
const assetsDir = appConfig?.assetsDir ?? "assets";
|
||||
|
||||
return `You are the Ad Creative Designer agent generating VARIATIONS of a winning ad.
|
||||
|
||||
## Source Asset (the winner to riff on)
|
||||
- File: ${sourceFilePath}
|
||||
- Platform: ${dna.platform || "instagram"}
|
||||
- Dimensions: ${dna.dimensions || "1080x1920"}
|
||||
- Hook: "${dna.hook || "Unknown"}"
|
||||
- CTA: "${dna.cta || "Download Free"}"
|
||||
- Style: ${dna.isGemini ? "Gemini AI-generated" : dna.isPoster ? "Canvas Design poster" : "Unknown"}
|
||||
|
||||
## Your Task
|
||||
Generate ${count} NEW variations that keep the same emotional pattern as the winning hook but explore different angles.
|
||||
|
||||
Rules:
|
||||
- Same platform and dimensions as the source
|
||||
- Same visual style (${dna.isGemini ? "Gemini AI photo-realistic" : "Canvas Design poster art"})
|
||||
- Same CTA pattern
|
||||
- DIFFERENT hook text — same emotional structure, different scenarios
|
||||
- Brand colors: ${primaryColor} (primary), ${accentColor} (accent)
|
||||
- App name: ${appName}
|
||||
- App icon: ${assetsDir}/icon.png — must appear in every ad
|
||||
|
||||
${dna.isGemini ? `Use mcp__nanobanana__gemini_generate_image for each variation.
|
||||
Use the source ad as a reference_image so Gemini keeps visual consistency.
|
||||
Reference image path: \${CWD}/${sourceFilePath}` : `Create each poster programmatically using Playwright (HTML → PNG).
|
||||
Match the visual language of the source poster.`}
|
||||
|
||||
Save all outputs to: ${outputDir}/
|
||||
Name files: variation_${dna.platform || "ig"}_${count > 1 ? "{n}" : "1"}_${dna.dimensions || "1080x1920"}.png
|
||||
Save a manifest: ${outputDir}/variation_manifest.json with fields: fileName, hook, platform, dimensions, parentFile.
|
||||
|
||||
## Also Generate Copy
|
||||
For each variation, write a platform-tuned caption.
|
||||
Save to: ${outputDir}/captions.json as an array of { hook, caption, platform, fileName }.`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Spawn variations of a winning asset.
|
||||
* Runs ad-creative-designer agent with a focused variation prompt.
|
||||
*/
|
||||
export async function spawnVariations(request: VariationRequest) {
|
||||
const asset = await prisma.asset.findUnique({
|
||||
where: { id: request.assetId },
|
||||
include: { campaign: true },
|
||||
});
|
||||
|
||||
if (!asset) throw new Error("Asset not found");
|
||||
if (!asset.campaign) throw new Error("Asset has no campaign");
|
||||
|
||||
const dna = extractAssetDNA(asset);
|
||||
const dateStr = new Date().toISOString().slice(0, 10).replace(/-/g, "");
|
||||
const outputDir = `outputs/variations_${asset.id.slice(0, 8)}_${dateStr}`;
|
||||
|
||||
mkdirSync(path.join(PIPELINE_ROOT, outputDir), { recursive: true });
|
||||
|
||||
const prompt = buildVariationPrompt(
|
||||
dna,
|
||||
asset.filePath,
|
||||
request.count,
|
||||
outputDir,
|
||||
request.appConfig
|
||||
);
|
||||
|
||||
const env = await loadPipelineEnv();
|
||||
|
||||
const { output } = await runAgentStep("ad-creative-designer", prompt, PIPELINE_ROOT, env);
|
||||
|
||||
// Scan for generated assets
|
||||
const scanResult = await scanOutputDirectory(asset.campaignId, outputDir, PIPELINE_ROOT);
|
||||
|
||||
// Link new assets to the parent
|
||||
const newAssets = await prisma.asset.findMany({
|
||||
where: {
|
||||
campaignId: asset.campaignId,
|
||||
filePath: { startsWith: outputDir },
|
||||
parentAssetId: null,
|
||||
},
|
||||
});
|
||||
|
||||
for (const newAsset of newAssets) {
|
||||
await prisma.asset.update({
|
||||
where: { id: newAsset.id },
|
||||
data: { parentAssetId: asset.id },
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
output: output.slice(0, 500),
|
||||
outputDir,
|
||||
scanned: scanResult.scanned,
|
||||
created: scanResult.created,
|
||||
parentAssetId: asset.id,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user