c2ee01b7b7
- Subject button now enabled for Meta AI (Scene/Style still disabled) - Video button appears when Subject reference is uploaded - Uses Subject image for image-to-video generation - Added handleGenerateVideo() in PromptHero - Tooltip: 'Upload image to animate into video'
812 lines
40 KiB
TypeScript
812 lines
40 KiB
TypeScript
"use client";
|
|
|
|
import React, { useRef, useState, useEffect } from "react";
|
|
import { useStore, ReferenceCategory } from "@/lib/store";
|
|
import { cn } from "@/lib/utils";
|
|
import { Sparkles, Maximize2, X, Hash, AlertTriangle, Upload, Zap, Brain, Settings, Settings2, Video } from "lucide-react";
|
|
|
|
const IMAGE_COUNTS = [1, 2, 4];
|
|
|
|
export function PromptHero() {
|
|
const {
|
|
prompt, setPrompt, addToGallery,
|
|
settings, setSettings,
|
|
references, setReference, addReference, removeReference, clearReferences,
|
|
setSelectionMode, setCurrentView,
|
|
history, setHistory,
|
|
setIsGenerating, // Get global setter
|
|
setShowCookieExpired
|
|
} = useStore();
|
|
|
|
const [isGenerating, setLocalIsGenerating] = useState(false);
|
|
const [isGeneratingVideo, setIsGeneratingVideo] = useState(false);
|
|
const { addVideo } = useStore();
|
|
|
|
const [uploadingRefs, setUploadingRefs] = useState<Record<string, boolean>>({});
|
|
const [errorNotification, setErrorNotification] = useState<{ message: string; type: 'error' | 'warning' } | null>(null);
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
|
|
// File input refs for each reference category
|
|
const fileInputRefs = {
|
|
subject: useRef<HTMLInputElement>(null),
|
|
scene: useRef<HTMLInputElement>(null),
|
|
style: useRef<HTMLInputElement>(null),
|
|
video: useRef<HTMLInputElement>(null),
|
|
};
|
|
|
|
// Auto-resize textarea
|
|
useEffect(() => {
|
|
if (textareaRef.current) {
|
|
textareaRef.current.style.height = 'auto';
|
|
textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 200) + 'px';
|
|
}
|
|
}, [prompt]);
|
|
|
|
const handleGenerate = async () => {
|
|
let finalPrompt = prompt.trim();
|
|
if (!finalPrompt || isGenerating) return;
|
|
|
|
// Try to parse JSON if it looks like it
|
|
if (finalPrompt.startsWith('{') && finalPrompt.endsWith('}')) {
|
|
try {
|
|
const json = JSON.parse(finalPrompt);
|
|
if (json.prompt || json.text || json.positive) {
|
|
finalPrompt = json.prompt || json.text || json.positive;
|
|
setPrompt(finalPrompt);
|
|
}
|
|
} catch (e) {
|
|
// Ignore parse errors
|
|
}
|
|
}
|
|
|
|
setIsGenerating(true);
|
|
setLocalIsGenerating(true); // Keep local state for button UI
|
|
|
|
try {
|
|
// Route to the selected provider
|
|
const provider = settings.provider || 'whisk';
|
|
let res: Response;
|
|
|
|
if (provider === 'grok') {
|
|
// Grok API
|
|
res = await fetch('/api/grok/generate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
prompt: finalPrompt,
|
|
apiKey: settings.grokApiKey,
|
|
cookies: settings.grokCookies,
|
|
imageCount: settings.imageCount
|
|
})
|
|
});
|
|
} else if (provider === 'meta') {
|
|
// Meta AI via Python service (metaai-api)
|
|
// Meta AI always generates 4 images, hardcode this
|
|
res = await fetch('/api/meta-crawl', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
prompt: finalPrompt,
|
|
cookies: settings.metaCookies,
|
|
num_images: 4 // Meta AI always returns 4 images
|
|
})
|
|
});
|
|
} else {
|
|
// Default: Whisk (Google ImageFX)
|
|
const refsForApi = {
|
|
subject: references.subject?.map(r => r.id) || [],
|
|
scene: references.scene?.map(r => r.id) || [],
|
|
style: references.style?.map(r => r.id) || [],
|
|
};
|
|
|
|
res = await fetch('/api/generate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
prompt: finalPrompt,
|
|
aspectRatio: settings.aspectRatio,
|
|
preciseMode: settings.preciseMode,
|
|
imageCount: settings.imageCount,
|
|
cookies: settings.whiskCookies,
|
|
refs: refsForApi
|
|
})
|
|
});
|
|
}
|
|
|
|
const responseText = await res.text();
|
|
let data;
|
|
try {
|
|
data = JSON.parse(responseText);
|
|
} catch (e) {
|
|
console.error("API Error (Non-JSON response):", responseText.substring(0, 500));
|
|
throw new Error(`Server Error: ${res.status} ${res.statusText}`);
|
|
}
|
|
|
|
if (data.error) throw new Error(data.error);
|
|
|
|
if (data.images) {
|
|
// Add images one by one with createdAt
|
|
for (const img of data.images) {
|
|
await addToGallery({
|
|
data: img.data || img.url, // Use URL as fallback (Meta AI returns URLs)
|
|
prompt: img.prompt,
|
|
aspectRatio: img.aspectRatio || settings.aspectRatio,
|
|
createdAt: Date.now(),
|
|
provider: provider as 'whisk' | 'grok' | 'meta'
|
|
});
|
|
}
|
|
}
|
|
|
|
} catch (e: any) {
|
|
console.error(e);
|
|
const errorMessage = e.message || '';
|
|
|
|
// Check for various Google safety policy errors
|
|
if (errorMessage.includes('PROMINENT_PEOPLE_FILTER_FAILED') ||
|
|
errorMessage.includes('prominent_people')) {
|
|
setErrorNotification({
|
|
message: '🚫 Content Policy: The reference image contains a recognizable person. Google blocks generating images of real/famous people. Try using a different reference image without identifiable faces.',
|
|
type: 'warning'
|
|
});
|
|
} else if (errorMessage.includes("Oops! I can't generate that image") ||
|
|
errorMessage.includes("Can I help you imagine something else")) {
|
|
setErrorNotification({
|
|
message: '🛡️ Meta AI Safety: The prompt was rejected by Meta AI safety filters. Please try a different prompt.',
|
|
type: 'warning'
|
|
});
|
|
} else if (errorMessage.includes('Safety Filter') ||
|
|
errorMessage.includes('SAFETY_FILTER') ||
|
|
errorMessage.includes('content_policy')) {
|
|
setErrorNotification({
|
|
message: '⚠️ Content Moderation: Your prompt or image was flagged by Google\'s safety filters. Try using different wording or a safer subject.',
|
|
type: 'warning'
|
|
});
|
|
} else if (errorMessage.includes('NSFW') ||
|
|
errorMessage.includes('nsfw_filter')) {
|
|
setErrorNotification({
|
|
message: '🔞 Content Policy: The request was blocked for NSFW content. Please use appropriate prompts and images.',
|
|
type: 'warning'
|
|
});
|
|
} else if (errorMessage.includes('CHILD_SAFETY') ||
|
|
errorMessage.includes('child_safety')) {
|
|
setErrorNotification({
|
|
message: '⛔ Content Policy: Request blocked for child safety concerns.',
|
|
type: 'error'
|
|
});
|
|
} else if (errorMessage.includes('RATE_LIMIT') ||
|
|
errorMessage.includes('429') ||
|
|
errorMessage.includes('quota')) {
|
|
setErrorNotification({
|
|
message: '⏳ Rate Limited: Too many requests. Please wait a moment and try again.',
|
|
type: 'warning'
|
|
});
|
|
} else if (errorMessage.includes('401') ||
|
|
errorMessage.includes('Unauthorized') ||
|
|
errorMessage.includes('cookies not found') ||
|
|
errorMessage.includes('Auth failed')) {
|
|
|
|
// Trigger the new popup
|
|
setShowCookieExpired(true);
|
|
|
|
// Also show a simplified toast as backup
|
|
setErrorNotification({
|
|
message: '🔐 Authentication Error: Cookies Refreshed Required',
|
|
type: 'error'
|
|
});
|
|
} else {
|
|
setErrorNotification({
|
|
message: errorMessage || 'Generation failed. Please try again.',
|
|
type: 'error'
|
|
});
|
|
}
|
|
// Auto-dismiss after 8 seconds
|
|
setTimeout(() => setErrorNotification(null), 8000);
|
|
} finally {
|
|
setIsGenerating(false);
|
|
setLocalIsGenerating(false);
|
|
}
|
|
};
|
|
|
|
// Handle video generation (Meta AI only) - uses Subject reference image
|
|
const handleGenerateVideo = async () => {
|
|
const subjectRefs = references.subject || [];
|
|
if (subjectRefs.length === 0) {
|
|
setErrorNotification({ message: '📷 Please upload a Subject image first', type: 'warning' });
|
|
setTimeout(() => setErrorNotification(null), 4000);
|
|
return;
|
|
}
|
|
|
|
const finalPrompt = prompt.trim() || "Animate this image with natural, cinematic movement";
|
|
|
|
if (!settings.metaCookies) {
|
|
setShowCookieExpired(true);
|
|
return;
|
|
}
|
|
|
|
setIsGeneratingVideo(true);
|
|
setIsGenerating(true);
|
|
|
|
try {
|
|
const imageBase64 = subjectRefs[0].thumbnail;
|
|
console.log('[PromptHero] Starting Meta AI image-to-video...');
|
|
|
|
const res = await fetch('/api/meta/video', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
prompt: finalPrompt,
|
|
cookies: settings.metaCookies,
|
|
imageBase64: imageBase64
|
|
})
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (data.error) throw new Error(data.error);
|
|
|
|
if (data.success && data.videos?.length > 0) {
|
|
for (const video of data.videos) {
|
|
addVideo({
|
|
id: crypto.randomUUID(),
|
|
url: video.url,
|
|
prompt: video.prompt || finalPrompt,
|
|
thumbnail: imageBase64,
|
|
createdAt: Date.now()
|
|
});
|
|
}
|
|
setErrorNotification({
|
|
message: `🎬 Video generated! Check the gallery.`,
|
|
type: 'warning'
|
|
});
|
|
setTimeout(() => setErrorNotification(null), 5000);
|
|
} else {
|
|
throw new Error('No videos generated');
|
|
}
|
|
} catch (e: any) {
|
|
console.error('[Video Gen]', e);
|
|
const errorMessage = e.message || 'Video generation failed';
|
|
|
|
if (errorMessage.includes('401') || errorMessage.includes('cookies')) {
|
|
setShowCookieExpired(true);
|
|
}
|
|
|
|
setErrorNotification({
|
|
message: `🎬 Video Error: ${errorMessage}`,
|
|
type: 'error'
|
|
});
|
|
setTimeout(() => setErrorNotification(null), 8000);
|
|
} finally {
|
|
setIsGeneratingVideo(false);
|
|
setIsGenerating(false);
|
|
}
|
|
};
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
|
|
e.preventDefault();
|
|
handleGenerate();
|
|
}
|
|
};
|
|
|
|
const handlePaste = (e: React.ClipboardEvent) => {
|
|
try {
|
|
const text = e.clipboardData.getData('text');
|
|
if (text.trim().startsWith('{')) {
|
|
const json = JSON.parse(text);
|
|
const cleanPrompt = json.prompt || json.text || json.positive || json.caption;
|
|
|
|
if (cleanPrompt && typeof cleanPrompt === 'string') {
|
|
e.preventDefault();
|
|
setPrompt(cleanPrompt);
|
|
}
|
|
}
|
|
} catch (e) {
|
|
// Not JSON
|
|
}
|
|
};
|
|
|
|
const handleDragOver = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
};
|
|
|
|
const handleDrop = async (e: React.DragEvent, category: ReferenceCategory) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
|
const file = e.dataTransfer.files[0];
|
|
if (!file.type.startsWith('image/')) return;
|
|
await uploadReference(file, category);
|
|
}
|
|
};
|
|
|
|
const uploadReference = async (file: File, category: ReferenceCategory) => {
|
|
if (!settings.whiskCookies) {
|
|
alert("Please set your Whisk Cookies in Settings first!");
|
|
return;
|
|
}
|
|
setUploadingRefs(prev => ({ ...prev, [category]: true }));
|
|
try {
|
|
const reader = new FileReader();
|
|
reader.onload = async (e) => {
|
|
const base64 = e.target?.result as string;
|
|
if (!base64) return;
|
|
|
|
const res = await fetch('/api/references/upload', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
imageBase64: base64,
|
|
mimeType: file.type,
|
|
category: category,
|
|
cookies: settings.whiskCookies
|
|
})
|
|
});
|
|
|
|
const data = await res.json();
|
|
if (data.id) {
|
|
// Add to array (supports multiple refs per category)
|
|
addReference(category, { id: data.id, thumbnail: base64 });
|
|
|
|
// Add to history
|
|
const newItem = {
|
|
id: data.id,
|
|
url: base64, // For local display history we use base64. Ideally we'd valid URL but this works for session.
|
|
category: category,
|
|
originalName: file.name
|
|
};
|
|
// exist check?
|
|
const exists = history.find(h => h.id === data.id);
|
|
if (!exists) {
|
|
setHistory([newItem, ...history]);
|
|
}
|
|
|
|
} else {
|
|
console.error("Upload failed details:", JSON.stringify(data));
|
|
alert(`Upload failed: ${data.error}\n\nDetails: ${JSON.stringify(data) || 'Check console'}`);
|
|
}
|
|
setUploadingRefs(prev => ({ ...prev, [category]: false }));
|
|
};
|
|
reader.readAsDataURL(file);
|
|
} catch (error) {
|
|
console.error(error);
|
|
setUploadingRefs(prev => ({ ...prev, [category]: false }));
|
|
}
|
|
};
|
|
|
|
// Handle file input change for click-to-upload (supports multiple files)
|
|
const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>, category: ReferenceCategory) => {
|
|
const files = e.target.files;
|
|
if (files && files.length > 0) {
|
|
// Upload each selected file
|
|
Array.from(files).forEach(file => {
|
|
if (file.type.startsWith('image/')) {
|
|
uploadReference(file, category);
|
|
}
|
|
});
|
|
}
|
|
// Reset input value so same file can be selected again
|
|
e.target.value = '';
|
|
};
|
|
|
|
// Open file picker for a category
|
|
const openFilePicker = (category: ReferenceCategory) => {
|
|
const inputRef = fileInputRefs[category];
|
|
if (inputRef.current) {
|
|
inputRef.current.click();
|
|
}
|
|
};
|
|
|
|
const toggleReference = (category: ReferenceCategory) => {
|
|
// Always open file picker to add more references
|
|
// Users can remove individual refs or clear all via the X button
|
|
openFilePicker(category);
|
|
};
|
|
|
|
const nextAspectRatio = () => {
|
|
const ratios = ['1:1', '16:9', '9:16', '4:3', '3:4'];
|
|
const currentIdx = ratios.indexOf(settings.aspectRatio);
|
|
setSettings({ aspectRatio: ratios[(currentIdx + 1) % ratios.length] });
|
|
};
|
|
|
|
const cycleImageCount = () => {
|
|
const currentIdx = IMAGE_COUNTS.indexOf(settings.imageCount);
|
|
setSettings({ imageCount: IMAGE_COUNTS[(currentIdx + 1) % IMAGE_COUNTS.length] });
|
|
};
|
|
|
|
// Whisk-style gradient button helper
|
|
const GradientButton = ({ onClick, disabled, children, className }: any) => (
|
|
<button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={cn(
|
|
"relative group overflow-hidden rounded-full px-6 py-2.5 font-semibold text-sm transition-all shadow-lg",
|
|
disabled
|
|
? "bg-white/5 text-white/30 cursor-not-allowed shadow-none"
|
|
: "text-white shadow-purple-500/20 hover:shadow-purple-500/40 hover:scale-[1.02]",
|
|
className
|
|
)}
|
|
>
|
|
<div className={cn(
|
|
"absolute inset-0 bg-gradient-to-r from-amber-500 to-purple-600 transition-opacity",
|
|
disabled ? "opacity-0" : "opacity-100 group-hover:opacity-90"
|
|
)} />
|
|
<div className="relative flex items-center gap-2">
|
|
{children}
|
|
</div>
|
|
</button>
|
|
);
|
|
|
|
return (
|
|
<div className="w-full max-w-3xl mx-auto my-4 md:my-6 px-4">
|
|
{/* Error/Warning Notification Toast */}
|
|
{errorNotification && (
|
|
<div className={cn(
|
|
"mb-4 p-3 rounded-lg border flex items-start gap-3 animate-in slide-in-from-top-4 duration-300",
|
|
errorNotification.type === 'warning'
|
|
? "bg-amber-500/10 border-amber-500/30 text-amber-200"
|
|
: "bg-red-500/10 border-red-500/30 text-red-200"
|
|
)}>
|
|
<AlertTriangle className={cn(
|
|
"h-5 w-5 shrink-0 mt-0.5",
|
|
errorNotification.type === 'warning' ? "text-amber-400" : "text-red-400"
|
|
)} />
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium">
|
|
{errorNotification.type === 'warning' ? '⚠️ Content Moderation' : '❌ Generation Error'}
|
|
</p>
|
|
<p className="text-xs mt-1 opacity-80">{errorNotification.message}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setErrorNotification(null)}
|
|
className="p-1 hover:bg-white/10 rounded-full transition-colors"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className={cn(
|
|
"relative flex flex-col gap-3 rounded-2xl bg-[#1A1A1E]/95 bg-gradient-to-b from-white/[0.02] to-transparent p-4 shadow-xl border border-white/5 backdrop-blur-sm transition-all",
|
|
isGenerating && "ring-1 ring-purple-500/30"
|
|
)}>
|
|
|
|
{/* Header / Title + Provider Toggle */}
|
|
<div className="flex items-center justify-between mb-1">
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-8 w-8 rounded-lg bg-gradient-to-br from-amber-500/20 to-purple-600/20 border border-white/5 flex items-center justify-center">
|
|
{settings.provider === 'grok' ? (
|
|
<Zap className="h-4 w-4 text-yellow-400" />
|
|
) : settings.provider === 'meta' ? (
|
|
<Brain className="h-4 w-4 text-blue-400" />
|
|
) : (
|
|
<Sparkles className="h-4 w-4 text-amber-300" />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<h2 className="text-base font-bold text-white tracking-tight flex items-center gap-2">
|
|
Create
|
|
<span className="text-[10px] font-medium text-white/40 border-l border-white/10 pl-2">
|
|
by <span className={cn(
|
|
settings.provider === 'grok' ? "text-yellow-400" :
|
|
settings.provider === 'meta' ? "text-blue-400" :
|
|
"text-amber-300"
|
|
)}>
|
|
{settings.provider === 'grok' ? 'Grok' :
|
|
settings.provider === 'meta' ? 'Meta AI' :
|
|
'Whisk'}
|
|
</span>
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Provider Toggle */}
|
|
<div className="flex bg-black/40 p-0.5 rounded-lg border border-white/10 backdrop-blur-md scale-90 origin-right">
|
|
<button
|
|
onClick={() => setSettings({ provider: 'whisk' })}
|
|
className={cn(
|
|
"flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[10px] font-medium transition-all",
|
|
settings.provider === 'whisk' || !settings.provider
|
|
? "bg-white/10 text-white shadow-sm"
|
|
: "text-white/40 hover:text-white/70 hover:bg-white/5"
|
|
)}
|
|
title="Google Whisk"
|
|
>
|
|
<Sparkles className="h-3 w-3" />
|
|
<span className="hidden sm:inline">Whisk</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setSettings({ provider: 'grok' })}
|
|
className={cn(
|
|
"flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[10px] font-medium transition-all",
|
|
settings.provider === 'grok'
|
|
? "bg-white/10 text-white shadow-sm"
|
|
: "text-white/40 hover:text-white/70 hover:bg-white/5"
|
|
)}
|
|
title="Grok (xAI)"
|
|
>
|
|
<Zap className="h-3 w-3" />
|
|
<span className="hidden sm:inline">Grok</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setSettings({ provider: 'meta' })}
|
|
className={cn(
|
|
"flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[10px] font-medium transition-all",
|
|
settings.provider === 'meta'
|
|
? "bg-white/10 text-white shadow-sm"
|
|
: "text-white/40 hover:text-white/70 hover:bg-white/5"
|
|
)}
|
|
title="Meta AI"
|
|
>
|
|
<Brain className="h-3 w-3" />
|
|
<span className="hidden sm:inline">Meta</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Input Area */}
|
|
<div className="relative group">
|
|
<div className="absolute -inset-0.5 bg-gradient-to-r from-amber-500/20 to-purple-600/20 rounded-xl blur opacity-0 group-hover:opacity-100 transition duration-500" />
|
|
<textarea
|
|
ref={textareaRef}
|
|
value={prompt}
|
|
onChange={(e) => setPrompt(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
onPaste={handlePaste}
|
|
placeholder="Describe your imagination..."
|
|
className="relative w-full resize-none bg-[#0E0E10] rounded-lg p-3 text-sm md:text-base text-white placeholder:text-white/20 outline-none min-h-[60px] border border-white/10 focus:border-purple-500/50 transition-all shadow-inner"
|
|
/>
|
|
</div>
|
|
|
|
{/* Controls Area */}
|
|
<div className="flex flex-col md:flex-row items-center justify-between gap-3 pt-1">
|
|
|
|
{/* Left Controls: References */}
|
|
{/* For Meta AI: Only Subject is enabled (for video generation), Scene/Style disabled */}
|
|
<div className="flex flex-wrap gap-2">
|
|
{(['subject', 'scene', 'style'] as ReferenceCategory[]).map((cat) => {
|
|
const refs = references[cat] || [];
|
|
const hasRefs = refs.length > 0;
|
|
const isUploading = uploadingRefs[cat];
|
|
// For Meta AI: only Subject is enabled (for image-to-video), Scene/Style disabled
|
|
const isDisabledForMeta = settings.provider === 'meta' && cat !== 'subject';
|
|
return (
|
|
<div key={cat} className={cn(
|
|
"relative group",
|
|
isDisabledForMeta && "opacity-30 pointer-events-none grayscale"
|
|
)}>
|
|
<button
|
|
onClick={() => toggleReference(cat)}
|
|
onDragOver={handleDragOver}
|
|
onDrop={(e) => handleDrop(e, cat)}
|
|
title={settings.provider === 'meta' && cat === 'subject'
|
|
? "Upload image to animate into video"
|
|
: undefined}
|
|
className={cn(
|
|
"flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[10px] font-medium transition-all border relative overflow-hidden",
|
|
hasRefs
|
|
? "bg-purple-500/10 text-purple-200 border-purple-500/30 hover:bg-purple-500/20"
|
|
: "bg-white/5 text-white/40 border-white/5 hover:bg-white/10 hover:text-white/70 hover:border-white/10",
|
|
isUploading && "animate-pulse cursor-wait"
|
|
)}
|
|
>
|
|
{isUploading ? (
|
|
<div className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
|
|
) : hasRefs ? (
|
|
<div className="flex -space-x-1.5">
|
|
{refs.slice(0, 4).map((ref, idx) => (
|
|
<img
|
|
key={ref.id}
|
|
src={ref.thumbnail}
|
|
alt=""
|
|
className="h-4 w-4 rounded-sm object-cover ring-1 ring-white/20"
|
|
style={{ zIndex: 10 - idx }}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Upload className="h-3 w-3" />
|
|
)}
|
|
<span className="capitalize tracking-wide">{cat}</span>
|
|
{refs.length > 0 && (
|
|
<span className="text-[9px] bg-purple-500/30 text-purple-100 rounded-full px-1.5 h-3 flex items-center">{refs.length}</span>
|
|
)}
|
|
</button>
|
|
{/* Clear all button */}
|
|
{hasRefs && !isUploading && (
|
|
<button
|
|
className="absolute -top-1 -right-1 p-0.5 rounded-full bg-red-500/80 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500"
|
|
onClick={(e) => { e.stopPropagation(); clearReferences(cat); }}
|
|
title={`Clear all ${cat} references`}
|
|
>
|
|
<X className="h-2 w-2" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Hidden file inputs for upload */}
|
|
<input
|
|
type="file"
|
|
ref={fileInputRefs.subject}
|
|
accept="image/*"
|
|
multiple
|
|
className="hidden"
|
|
onChange={(e) => handleFileInputChange(e, 'subject')}
|
|
/>
|
|
<input
|
|
type="file"
|
|
ref={fileInputRefs.scene}
|
|
accept="image/*"
|
|
multiple
|
|
className="hidden"
|
|
onChange={(e) => handleFileInputChange(e, 'scene')}
|
|
/>
|
|
<input
|
|
type="file"
|
|
ref={fileInputRefs.style}
|
|
accept="image/*"
|
|
multiple
|
|
className="hidden"
|
|
onChange={(e) => handleFileInputChange(e, 'style')}
|
|
/>
|
|
|
|
{/* Right Controls: Settings & Generate */}
|
|
<div className="flex flex-wrap items-center gap-2 w-full md:w-auto justify-end">
|
|
|
|
{/* Settings Group */}
|
|
<div className="flex items-center gap-0.5 bg-[#0E0E10] p-1 rounded-lg border border-white/10">
|
|
{/* Image Count */}
|
|
<button
|
|
onClick={cycleImageCount}
|
|
className="flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-medium text-white/60 hover:text-white hover:bg-white/5 transition-colors"
|
|
title="Number of images"
|
|
>
|
|
<Hash className="h-3 w-3 opacity-70" />
|
|
<span>{settings.imageCount}</span>
|
|
</button>
|
|
|
|
<div className="w-px h-3 bg-white/10 mx-1" />
|
|
|
|
{/* Aspect Ratio */}
|
|
<button
|
|
onClick={nextAspectRatio}
|
|
className="px-2 py-1 rounded-md text-[10px] font-medium text-white/60 hover:text-white hover:bg-white/5 transition-colors"
|
|
title="Aspect Ratio"
|
|
>
|
|
<span className="opacity-70">Ratio:</span>
|
|
<span className="ml-1 text-white/80">{settings.aspectRatio}</span>
|
|
</button>
|
|
|
|
<div className="w-px h-3 bg-white/10 mx-1" />
|
|
|
|
{/* Precise Mode */}
|
|
<button
|
|
onClick={() => setSettings({ preciseMode: !settings.preciseMode })}
|
|
className={cn(
|
|
"px-2 py-1 rounded-md text-[10px] font-medium transition-all flex items-center gap-1",
|
|
settings.preciseMode
|
|
? "text-amber-300 bg-amber-500/10 ring-1 ring-amber-500/30"
|
|
: "text-white/40 hover:text-white hover:bg-white/5"
|
|
)}
|
|
title="Precise Mode"
|
|
>
|
|
{/* <span>🍌</span> */}
|
|
<span>Precise</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Generate Button */}
|
|
<button
|
|
onClick={handleGenerate}
|
|
disabled={isGenerating || !prompt.trim() || settings.provider === 'grok'}
|
|
className={cn(
|
|
"relative overflow-hidden px-4 py-1.5 rounded-lg font-bold text-sm text-white shadow-lg transition-all active:scale-95 group border border-white/10",
|
|
settings.provider === 'grok'
|
|
? "bg-gray-700 cursor-not-allowed"
|
|
: "bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 hover:shadow-indigo-500/25"
|
|
)}
|
|
>
|
|
<div className="relative z-10 flex items-center gap-1.5">
|
|
{isGenerating ? (
|
|
<>
|
|
<div className="h-3 w-3 animate-spin rounded-full border-2 border-white border-t-transparent" />
|
|
<span className="animate-pulse">Dreaming...</span>
|
|
</>
|
|
) : settings.provider === 'grok' ? (
|
|
<>
|
|
<span className="opacity-80">Soon</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Sparkles className="h-3 w-3 group-hover:rotate-12 transition-transform" />
|
|
<span>Generate</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</button>
|
|
|
|
{/* Generate Video Button - Only for Meta AI when Subject is uploaded */}
|
|
{settings.provider === 'meta' && (references.subject?.length ?? 0) > 0 && (
|
|
<button
|
|
onClick={handleGenerateVideo}
|
|
disabled={isGenerating}
|
|
className={cn(
|
|
"relative overflow-hidden px-4 py-1.5 rounded-lg font-bold text-sm text-white shadow-lg transition-all active:scale-95 group border border-white/10",
|
|
isGenerating
|
|
? "bg-gray-700 cursor-not-allowed"
|
|
: "bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-500 hover:to-cyan-500 hover:shadow-cyan-500/25"
|
|
)}
|
|
title="Animate the subject image into video"
|
|
>
|
|
<div className="relative z-10 flex items-center gap-1.5">
|
|
{isGeneratingVideo ? (
|
|
<>
|
|
<div className="h-3 w-3 animate-spin rounded-full border-2 border-white border-t-transparent" />
|
|
<span className="animate-pulse">Creating...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Video className="h-3 w-3 group-hover:scale-110 transition-transform" />
|
|
<span>Video</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Reference Preview Panel - shows when any references exist */}
|
|
{(references.subject?.length || references.scene?.length || references.style?.length) ? (
|
|
<div className="mt-4 p-3 rounded-xl bg-white/5 border border-white/10">
|
|
<div className="flex flex-wrap gap-4">
|
|
{(['subject', 'scene', 'style'] as ReferenceCategory[]).map((cat) => {
|
|
const refs = references[cat] || [];
|
|
if (refs.length === 0) return null;
|
|
return (
|
|
<div key={cat} className="flex-1 min-w-[120px]">
|
|
<div className="text-[10px] uppercase tracking-wider text-white/40 mb-2 flex items-center justify-between">
|
|
<span>{cat}</span>
|
|
<span className="text-purple-300">{refs.length}</span>
|
|
</div>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{refs.map((ref) => (
|
|
<div key={ref.id} className="relative group/thumb">
|
|
<img
|
|
src={ref.thumbnail}
|
|
alt=""
|
|
className="h-10 w-10 rounded object-cover ring-1 ring-white/10 group-hover/thumb:ring-purple-500/50 transition-all"
|
|
/>
|
|
<button
|
|
onClick={() => removeReference(cat, ref.id)}
|
|
className="absolute -top-1 -right-1 p-0.5 rounded-full bg-red-500 text-white opacity-0 group-hover/thumb:opacity-100 transition-opacity hover:bg-red-600"
|
|
title="Remove this reference"
|
|
>
|
|
<X className="h-2.5 w-2.5" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
{/* Add more button */}
|
|
<button
|
|
onClick={() => openFilePicker(cat)}
|
|
className="h-10 w-10 rounded border border-dashed border-white/20 flex items-center justify-center text-white/30 hover:text-white/60 hover:border-white/40 transition-colors"
|
|
title={`Add more ${cat} references`}
|
|
>
|
|
<span className="text-lg">+</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|