feat: add asset preferences, video research, and Remotion ad assets
- Add thumbs-down feedback modal and preference API endpoint - Add AI UGC video platforms research doc - Add ReflectAd Remotion composition with public flow assets - Add gemini-ad-designer and poster-ad-designer pipeline skills - Add research_reflect_v1.1 pipeline script Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Trey t
@@ -64,7 +64,7 @@ export default function AppsPage() {
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{apps.map((app) => (
|
||||
<Link key={app.id} href={`/apps/${app.slug}`}>
|
||||
<Card className="transition-shadow hover:shadow-md">
|
||||
<Card className="h-full transition-shadow hover:shadow-md">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
@@ -81,22 +81,16 @@ export default function AppsPage() {
|
||||
<p className="mb-3 text-sm text-muted-foreground line-clamp-2">
|
||||
{app.description || "No description"}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div
|
||||
className="h-3 w-3 rounded"
|
||||
style={{ backgroundColor: app.primaryColor }}
|
||||
/>
|
||||
<span>{app.primaryColor}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div
|
||||
className="h-3 w-3 rounded"
|
||||
style={{ backgroundColor: app.accentColor }}
|
||||
/>
|
||||
<span>{app.accentColor}</span>
|
||||
</div>
|
||||
<span className="ml-auto text-muted-foreground">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<div
|
||||
className="h-3 w-3 rounded"
|
||||
style={{ backgroundColor: app.primaryColor }}
|
||||
/>
|
||||
<div
|
||||
className="h-3 w-3 rounded"
|
||||
style={{ backgroundColor: app.accentColor }}
|
||||
/>
|
||||
<span className="ml-auto">
|
||||
{app._count.campaigns} campaign{app._count.campaigns !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,13 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Plus } from "lucide-react";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { Plus, Info } from "lucide-react";
|
||||
|
||||
interface Campaign {
|
||||
id: string;
|
||||
@@ -30,6 +36,25 @@ const statusColors: Record<string, "default" | "secondary" | "destructive" | "ou
|
||||
published: "default",
|
||||
};
|
||||
|
||||
const statusTooltips: Record<string, string> = {
|
||||
draft: "Campaign is configured but hasn't been launched yet. Click to edit and launch.",
|
||||
running: "The AI pipeline is actively generating assets for this campaign.",
|
||||
review: "All agents finished. Assets are ready for your review before publishing.",
|
||||
approved: "Assets have been approved and are ready to publish.",
|
||||
published: "Campaign content has been pushed to social platforms.",
|
||||
};
|
||||
|
||||
function Tip({ children, content }: { children: React.ReactNode; content: string }) {
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger className="inline-flex items-center">
|
||||
{children}
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{content}</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CampaignsPage() {
|
||||
const [campaigns, setCampaigns] = useState<Campaign[]>([]);
|
||||
|
||||
@@ -41,49 +66,72 @@ export default function CampaignsPage() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-3xl font-bold">Campaigns</h1>
|
||||
<Link href="/campaigns/new" className={buttonVariants()}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New Campaign
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{campaigns.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<p className="text-muted-foreground">
|
||||
No campaigns yet. Create your first one to get started.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-4">
|
||||
{campaigns.map((campaign) => {
|
||||
const platforms = JSON.parse(campaign.platforms) as string[];
|
||||
return (
|
||||
<Link key={campaign.id} href={`/campaigns/${campaign.id}`}>
|
||||
<Card className="hover:bg-muted/50 transition-colors cursor-pointer">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>{campaign.name}</CardTitle>
|
||||
<Badge variant={statusColors[campaign.status] || "secondary"}>
|
||||
{campaign.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardDescription>
|
||||
{platforms.join(", ")} ·{" "}
|
||||
{campaign._count.assets} assets ·{" "}
|
||||
{new Date(campaign.createdAt).toLocaleDateString()}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
<TooltipProvider>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-3xl font-bold">Campaigns</h1>
|
||||
<Tip content="Campaigns run the AI pipeline to generate ads, videos, copy, and scripts for your app across platforms.">
|
||||
<Info className="h-4 w-4 text-muted-foreground hover:text-foreground transition-colors" />
|
||||
</Tip>
|
||||
</div>
|
||||
<Link href="/campaigns/new" className={buttonVariants()}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New Campaign
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{campaigns.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<p className="text-muted-foreground">
|
||||
No campaigns yet. Create your first one to get started.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-4">
|
||||
{campaigns.map((campaign) => {
|
||||
const platforms = JSON.parse(campaign.platforms) as string[];
|
||||
return (
|
||||
<Link key={campaign.id} href={`/campaigns/${campaign.id}`}>
|
||||
<Card className="hover:bg-muted/50 transition-colors cursor-pointer">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>{campaign.name}</CardTitle>
|
||||
<Tip content={statusTooltips[campaign.status] || "Campaign status"}>
|
||||
<Badge variant={statusColors[campaign.status] || "secondary"}>
|
||||
{campaign.status}
|
||||
</Badge>
|
||||
</Tip>
|
||||
</div>
|
||||
<CardDescription className="flex items-center gap-1">
|
||||
<Tip content="Target platforms where ads and content will be generated and optimized.">
|
||||
<span className="underline decoration-dotted underline-offset-4 cursor-help">
|
||||
{platforms.join(", ")}
|
||||
</span>
|
||||
</Tip>
|
||||
<span>·</span>
|
||||
<Tip content="Total generated files — images, videos, copy, and scripts produced by the AI pipeline.">
|
||||
<span className="underline decoration-dotted underline-offset-4 cursor-help">
|
||||
{campaign._count.assets} assets
|
||||
</span>
|
||||
</Tip>
|
||||
<span>·</span>
|
||||
<Tip content="Date this campaign was created.">
|
||||
<span className="underline decoration-dotted underline-offset-4 cursor-help">
|
||||
{new Date(campaign.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
</Tip>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user