622 lines
30 KiB
TypeScript
622 lines
30 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, Brain, Settings, Settings2 } 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 { 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);
|
|
|
|
// CLEANUP: Remove corrupted localStorage keys that crash browser extensions
|
|
useEffect(() => {
|
|
try {
|
|
if (typeof window !== 'undefined') {
|
|
for (let i = 0; i < localStorage.length; i++) {
|
|
const key = localStorage.key(i);
|
|
if (key) {
|
|
const val = localStorage.getItem(key);
|
|
// Clean up "undefined" string values which cause JSON.parse errors in extensions
|
|
if (val === "undefined" || val === "null") {
|
|
console.warn(`[Cleanup] Removing corrupted localStorage key: ${key}`);
|
|
localStorage.removeItem(key);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error("Storage cleanup failed", e);
|
|
}
|
|
}, []);
|
|
|
|
// Auto-enable Precise mode when references are added
|
|
useEffect(() => {
|
|
const hasReferences = Object.values(references).some(refs => refs && refs.length > 0);
|
|
if (hasReferences && !settings.preciseMode) {
|
|
setSettings({ preciseMode: true });
|
|
}
|
|
}, [references, settings.preciseMode, setSettings]);
|
|
|
|
// 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 === 'meta') {
|
|
// Image Generation Path (Meta AI)
|
|
// Video is now handled by handleGenerateVideo
|
|
|
|
// Prepend aspect ratio for better adherence
|
|
let metaPrompt = finalPrompt;
|
|
if (settings.aspectRatio === '16:9') {
|
|
metaPrompt = "wide 16:9 landscape image of " + finalPrompt;
|
|
} else if (settings.aspectRatio === '9:16') {
|
|
metaPrompt = "tall 9:16 portrait image of " + finalPrompt;
|
|
}
|
|
|
|
// Merge cookies safely
|
|
let mergedCookies: string | any[] = settings.metaCookies;
|
|
try {
|
|
const safeParse = (str: string) => {
|
|
if (!str || str === "undefined" || str === "null") return [];
|
|
try { return JSON.parse(str); } catch { return []; }
|
|
};
|
|
const m = safeParse(settings.metaCookies);
|
|
const f = safeParse(settings.facebookCookies);
|
|
if (Array.isArray(m) || Array.isArray(f)) {
|
|
mergedCookies = [...(Array.isArray(m) ? m : []), ...(Array.isArray(f) ? f : [])];
|
|
}
|
|
} catch (e) { console.error("Cookie merge failed", e); }
|
|
|
|
// Meta AI always generates 4 images, hardcode this
|
|
// Extract subject reference if available (for Image-to-Image)
|
|
const subjectRef = references.subject?.[0];
|
|
const imageUrl = subjectRef ? subjectRef.thumbnail : undefined; // Use full data URI from thumbnail property
|
|
|
|
res = await fetch('/api/meta/generate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
prompt: metaPrompt,
|
|
cookies: typeof mergedCookies === 'string' ? mergedCookies : JSON.stringify(mergedCookies),
|
|
imageCount: 4, // Meta AI always returns 4 images
|
|
useMetaFreeWrapper: settings.useMetaFreeWrapper,
|
|
metaFreeWrapperUrl: settings.metaFreeWrapperUrl
|
|
})
|
|
});
|
|
} 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: finalPrompt, // Use original user prompt to avoid showing engineered prompts
|
|
aspectRatio: img.aspectRatio || settings.aspectRatio,
|
|
createdAt: Date.now(),
|
|
provider: provider as 'whisk' | '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);
|
|
}
|
|
};
|
|
|
|
// Note: Meta AI Video generation was removed - use Whisk for video generation from the gallery lightbox
|
|
|
|
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) => {
|
|
// Enforce Whisk cookies ONLY if using Whisk provider
|
|
if ((!settings.provider || settings.provider === 'whisk') && !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) {
|
|
setUploadingRefs(prev => ({ ...prev, [category]: false }));
|
|
return;
|
|
}
|
|
|
|
let refId = '';
|
|
|
|
// If Whisk, upload to backend to get ID
|
|
if (!settings.provider || settings.provider === 'whisk') {
|
|
try {
|
|
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) {
|
|
refId = data.id;
|
|
} else {
|
|
console.error("Upload failed details:", JSON.stringify(data));
|
|
alert(`Upload failed: ${data.error}\n\nDetails: ${JSON.stringify(data) || 'Check console'}`);
|
|
}
|
|
} catch (err) {
|
|
console.error("API Upload Error", err);
|
|
alert("API Upload failed");
|
|
}
|
|
} else {
|
|
// For Meta/Grok, just use local generated ID
|
|
refId = 'loc-' + Date.now() + Math.random().toString(36).substr(2, 5);
|
|
}
|
|
|
|
if (refId) {
|
|
// Add to array (supports multiple refs per category)
|
|
// Note: Store uses 'thumbnail' property for the image data
|
|
addReference(category, { id: refId, thumbnail: base64 });
|
|
|
|
// Add to history
|
|
const newItem = {
|
|
id: refId,
|
|
url: base64,
|
|
category: category,
|
|
originalName: file.name
|
|
};
|
|
|
|
const exists = history.find(h => h.id === refId);
|
|
if (!exists) {
|
|
setHistory([newItem, ...history].slice(0, 50));
|
|
}
|
|
}
|
|
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-lg md:max-w-3xl mx-auto mb-8 transition-all">
|
|
{/* Error/Warning Notification Toast */}
|
|
{errorNotification && (
|
|
<div className={cn(
|
|
"mb-4 p-3 rounded-xl border flex items-start gap-3 animate-in fade-in slide-in-from-top-4 duration-300",
|
|
errorNotification.type === 'warning'
|
|
? "bg-amber-500/10 border-amber-500/20 text-amber-600 dark:text-amber-400"
|
|
: "bg-red-500/10 border-red-500/20 text-red-600 dark:text-red-400"
|
|
)}>
|
|
<AlertTriangle className="h-5 w-5 shrink-0 mt-0.5" />
|
|
<div className="flex-1">
|
|
<p className="text-sm font-semibold">
|
|
{errorNotification.type === 'warning' ? 'Content Moderation' : 'Generation Error'}
|
|
</p>
|
|
<p className="text-xs mt-1 opacity-90 leading-relaxed">{errorNotification.message}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setErrorNotification(null)}
|
|
className="p-1 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className={cn(
|
|
"bg-card rounded-3xl p-6 md:p-8 shadow-premium border border-border/50 relative overflow-hidden transition-all duration-500",
|
|
isGenerating && "ring-2 ring-primary/20 border-primary/50 shadow-lg shadow-primary/10"
|
|
)}>
|
|
{/* Visual Background Accent */}
|
|
<div className="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none" />
|
|
<div className="absolute bottom-0 left-0 -ml-16 -mb-16 w-64 h-64 bg-secondary/5 rounded-full blur-3xl pointer-events-none" />
|
|
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-8 relative z-10">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-primary to-violet-700 flex items-center justify-center text-white shadow-lg shadow-primary/20">
|
|
{settings.provider === 'meta' ? <Brain className="h-5 w-5" /> : <Sparkles className="h-5 w-5" />}
|
|
</div>
|
|
<div>
|
|
<h2 className="font-extrabold text-xl text-foreground tracking-tight">Create</h2>
|
|
<span className="text-[10px] uppercase font-bold tracking-widest text-muted-foreground">
|
|
Powered by <span className="text-secondary">{settings.provider === 'meta' ? 'Meta AI' : 'Google Whisk'}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex bg-muted/50 p-1 rounded-xl border border-border/50">
|
|
<button
|
|
onClick={() => setSettings({ provider: settings.provider === 'meta' ? 'whisk' : 'meta' })}
|
|
className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-card shadow-sm border border-border/50 text-xs font-bold text-foreground hover:bg-muted transition-all active:scale-95"
|
|
title="Switch Provider"
|
|
>
|
|
<Settings2 className="h-3.5 w-3.5 text-primary" />
|
|
<span>Switch</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Input Area */}
|
|
<div className="relative mb-6 group z-10">
|
|
<textarea
|
|
ref={textareaRef}
|
|
value={prompt}
|
|
onChange={(e) => setPrompt(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
onPaste={handlePaste}
|
|
className="w-full bg-muted/30 border border-border/50 rounded-2xl p-5 text-sm md:text-base focus:ring-2 focus:ring-primary/20 focus:border-primary/50 outline-none resize-none min-h-[140px] placeholder-muted-foreground/50 text-foreground transition-all shadow-inner"
|
|
placeholder="What's on your mind? Describe your vision..."
|
|
/>
|
|
</div>
|
|
|
|
{/* Reference Upload Grid */}
|
|
<div className="grid grid-cols-3 gap-4 mb-6 relative z-10">
|
|
{((settings.provider === 'meta' ? ['subject'] : ['subject', 'scene', 'style']) as ReferenceCategory[]).map((cat) => {
|
|
const refs = references[cat] || [];
|
|
const hasRefs = refs.length > 0;
|
|
const isUploading = uploadingRefs[cat];
|
|
|
|
return (
|
|
<button
|
|
key={cat}
|
|
onClick={() => toggleReference(cat)}
|
|
onDragOver={handleDragOver}
|
|
onDrop={(e) => handleDrop(e, cat)}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center gap-2 py-4 rounded-2xl border transition-all relative overflow-hidden group/btn shadow-soft",
|
|
hasRefs
|
|
? "bg-primary/5 border-primary/30"
|
|
: "bg-muted/50 hover:bg-muted border-border/50"
|
|
)}
|
|
>
|
|
{isUploading ? (
|
|
<div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
|
) : hasRefs ? (
|
|
<div className="relative pt-1">
|
|
<div className="flex -space-x-2.5 justify-center">
|
|
{refs.slice(0, 3).map((ref, idx) => (
|
|
<img key={ref.id} src={ref.thumbnail} className="w-8 h-8 rounded-full object-cover ring-2 ring-background shadow-md" style={{ zIndex: 10 - idx }} />
|
|
))}
|
|
</div>
|
|
<div className="absolute -top-1 -right-3 bg-secondary text-secondary-foreground text-[10px] font-black px-1.5 py-0.5 rounded-full shadow-sm">{refs.length}</div>
|
|
</div>
|
|
) : (
|
|
<div className="p-2 rounded-xl bg-background/50 group-hover/btn:bg-primary/10 transition-colors">
|
|
<Upload className="h-4 w-4 text-muted-foreground group-hover/btn:text-primary transition-colors" />
|
|
</div>
|
|
)}
|
|
<span className={cn(
|
|
"text-[10px] uppercase font-black tracking-widest transition-colors",
|
|
hasRefs ? "text-primary" : "text-muted-foreground"
|
|
)}>
|
|
{cat}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Settings & Generate Row */}
|
|
<div className="flex items-center gap-2 relative z-10">
|
|
<div className="flex items-center gap-0.5 bg-muted/50 p-1 rounded-2xl border border-border/50 shrink-0">
|
|
<button
|
|
onClick={settings.provider === 'meta' ? undefined : cycleImageCount}
|
|
className={cn(
|
|
"flex items-center gap-1.5 px-2.5 py-2 rounded-xl transition-all whitespace-nowrap",
|
|
settings.provider === 'meta' ? "opacity-30 cursor-not-allowed" : "hover:bg-card"
|
|
)}
|
|
title="Image Count"
|
|
>
|
|
<Hash className="h-3.5 w-3.5 text-primary" />
|
|
<span className="text-xs font-bold text-foreground">{settings.provider === 'meta' ? 4 : settings.imageCount}</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={nextAspectRatio}
|
|
className="flex items-center gap-1.5 px-2.5 py-2 rounded-xl hover:bg-card transition-all whitespace-nowrap"
|
|
title="Aspect Ratio"
|
|
>
|
|
<Maximize2 className="h-3.5 w-3.5 text-secondary" />
|
|
<span className="text-xs font-bold text-foreground">{settings.aspectRatio}</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setSettings({ preciseMode: !settings.preciseMode })}
|
|
className={cn(
|
|
"px-2.5 py-2 rounded-xl transition-all font-black text-[10px] tracking-tight uppercase whitespace-nowrap",
|
|
settings.preciseMode
|
|
? "bg-secondary text-secondary-foreground shadow-sm"
|
|
: "text-muted-foreground hover:bg-card"
|
|
)}
|
|
title="Precise Mode"
|
|
>
|
|
Precise
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleGenerate}
|
|
disabled={isGenerating || !prompt.trim()}
|
|
className={cn(
|
|
"group/gen flex-1 min-w-[120px] bg-primary hover:bg-violet-700 text-white font-black uppercase tracking-widest text-[11px] md:text-sm h-[52px] rounded-2xl shadow-premium-lg flex items-center justify-center gap-2 transition-all active:scale-[0.97] border-b-4 border-violet-800 disabled:opacity-50 disabled:cursor-not-allowed disabled:border-transparent",
|
|
isGenerating && "animate-pulse"
|
|
)}
|
|
>
|
|
{isGenerating ? (
|
|
<>
|
|
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
|
<span>Generating...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Sparkles className="h-4 w-4 group-hover/gen:rotate-12 transition-transform" />
|
|
<span>Dream Big</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hidden File Inputs */}
|
|
<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')} />
|
|
</div>
|
|
);
|
|
}
|