import React, { useState, useRef, useEffect } from 'react';
import Header from './components/Header';
import Button from './components/Button';
import { ThumbnailStyle, GeneratedThumbnail } from './types';
import { generateThumbnail } from './services/gemini';
const STYLES: ThumbnailStyle[] = ['Hype', 'Tech', 'Vlog', 'Educational', 'Cinematic', 'Minimalist'];
const App: React.FC = () => {
const [title, setTitle] = useState('');
const [selectedStyle, setSelectedStyle] = useState<ThumbnailStyle>('Hype');
const [headshot, setHeadshot] = useState<string | null>(null);
const [isGenerating, setIsGenerating] = useState(false);
const [error, setError] = useState<string | null>(null);
const [history, setHistory] = useState<GeneratedThumbnail[]>([]);
const [isHighQuality, setIsHighQuality] = useState(false);
const [loadingStep, setLoadingStep] = useState(0);
const fileInputRef = useRef<HTMLInputElement>(null);
const loadingMessages = [
"Analyzing your headshot...",
"Matching facial expressions to title tone...",
"Designing vibrant high-energy background...",
"Applying professional typography...",
"Optimizing for maximum CTR...",
"Adding cinematic depth and highlights..."
];
useEffect(() => {
let interval: any;
if (isGenerating) {
interval = setInterval(() => {
setLoadingStep((prev) => (prev + 1) % loadingMessages.length);
}, 3000);
} else {
setLoadingStep(0);
}
return () => clearInterval(interval);
}, [isGenerating]);
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setHeadshot(reader.result as string);
};
reader.readAsDataURL(file);
}
};
const checkHighQualityAccess = async () => {
if (isHighQuality && typeof window.aistudio !== 'undefined') {
const hasKey = await window.aistudio.hasSelectedApiKey();
if (!hasKey) {
await window.aistudio.openSelectKey();
// Prompt says: assume success after triggering
return true;
}
}
return true;
};
const handleGenerate = async () => {
if (!title || !headshot) {
setError("Please enter a video title and upload a headshot.");
return;
}
setIsGenerating(true);
setError(null);
try {
await checkHighQualityAccess();
const resultUrl = await generateThumbnail({
title,
style: selectedStyle,
image: headshot,
isHighQuality
});
const newThumbnail: GeneratedThumbnail = {
id: Date.now().toString(),
url: resultUrl,
title,
style: selectedStyle,
timestamp: Date.now(),
};
setHistory([newThumbnail, ...history]);
} catch (err: any) {
console.error(err);
if (err.message?.includes("Requested entity was not found")) {
setError("High-quality mode requires a valid API key. Please select one.");
if (typeof window.aistudio !== 'undefined') {
await window.aistudio.openSelectKey();
}
} else {
setError(err.message || "Failed to generate thumbnail. Please try again.");
}
} finally {
setIsGenerating(false);
}
};
const downloadImage = (url: string, filename: string) => {
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
return (
<div className="min-h-screen pb-20">
<Header />
<main className="max-w-6xl mx-auto px-4 mt-12 grid grid-cols-1 lg:grid-cols-12 gap-12">
{/* Left: Controls */}
<section className="lg:col-span-5 space-y-8">
<div className="glass p-6 rounded-3xl space-y-6">
<h2 className="text-xl font-bold flex items-center gap-2">
<span className="w-8 h-8 rounded-lg bg-red-500/20 text-red-500 flex items-center justify-center">1</span>
Design Parameters
</h2>
<div className="space-y-4">
<label className="block">
<span className="text-sm font-medium text-slate-400 mb-1 block">Video Title</span>
<input
type="text"
placeholder="e.g., How I built this app in 10 minutes"
className="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-red-500/50 transition-all"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</label>
<div className="space-y-2">
<span className="text-sm font-medium text-slate-400 mb-1 block">Thumbnail Style</span>
<div className="grid grid-cols-2 gap-2">
{STYLES.map(style => (
<button
key={style}
onClick={() => setSelectedStyle(style)}
className={`px-4 py-2 rounded-xl text-sm font-medium transition-all border ${
selectedStyle === style
? 'bg-red-500/20 border-red-500 text-red-500'
: 'bg-slate-800/50 border-slate-700 text-slate-400 hover:border-slate-600'
}`}
>
{style}
</button>
))}
</div>
</div>
<div className="flex items-center gap-2 pt-2">
<input
type="checkbox"
id="hq-mode"
checked={isHighQuality}
onChange={(e) => setIsHighQuality(e.target.checked)}
className="w-4 h-4 rounded border-slate-700 text-red-500 focus:ring-red-500 bg-slate-800"
/>
<label htmlFor="hq-mode" className="text-sm font-medium text-slate-300 cursor-pointer">
High Quality Mode (Requires Gemini 3 Pro)
</label>
</div>
</div>
</div>
<div className="glass p-6 rounded-3xl space-y-6">
<h2 className="text-xl font-bold flex items-center gap-2">
<span className="w-8 h-8 rounded-lg bg-red-500/20 text-red-500 flex items-center justify-center">2</span>
YouTuber Headshot
</h2>
<div
className={`border-2 border-dashed rounded-3xl p-8 text-center transition-all cursor-pointer hover:border-red-500/50 hover:bg-red-500/5 ${
headshot ? 'border-green-500/50 bg-green-500/5' : 'border-slate-700'
}`}
onClick={() => fileInputRef.current?.click()}
>
{headshot ? (
<div className="relative group">
<img src={headshot} alt="Headshot" className="w-32 h-32 mx-auto rounded-2xl object-cover shadow-2xl" />
<div className="mt-4 text-sm font-medium text-green-400 flex items-center justify-center gap-2">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
Photo uploaded
</div>
</div>
) : (
<div className="space-y-4">
<div className="w-16 h-16 bg-slate-800 rounded-2xl flex items-center justify-center mx-auto">
<svg className="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div>
<p className="font-medium text-slate-200">Drop your headshot here</p>
<p className="text-sm text-slate-500 mt-1">PNG, JPG up to 10MB</p>
</div>
</div>
)}
<input
type="file"
ref={fileInputRef}
className="hidden"
accept="image/*"
onChange={handleImageUpload}
/>
</div>
</div>
<Button
className="w-full py-5 text-xl"
isLoading={isGenerating}
disabled={!title || !headshot}
onClick={handleGenerate}
>
{isGenerating ? 'Generating Epic Thumbnail...' : 'Generate Thumbnail'}
</Button>
{error && (
<div className="p-4 bg-red-500/10 border border-red-500/20 rounded-2xl text-red-500 text-sm">
{error}
</div>
)}
</section>
{/* Right: Preview & History */}
<section className="lg:col-span-7 space-y-8">
<div className="glass p-8 rounded-3xl min-h-[400px] flex flex-col">
<h2 className="text-xl font-bold mb-6 flex items-center gap-2">
<svg className="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
Thumbnail Preview
</h2>
<div className="flex-1 flex flex-col items-center justify-center relative">
{isGenerating ? (
<div className="w-full aspect-video bg-slate-800/50 rounded-2xl flex flex-col items-center justify-center p-8 text-center animate-pulse border border-slate-700">
<div className="w-16 h-16 border-4 border-red-500 border-t-transparent rounded-full animate-spin mb-6"></div>
<p className="text-xl font-bold text-slate-200 mb-2">{loadingMessages[loadingStep]}</p>
<p className="text-slate-400">Sit tight, perfection takes a few seconds...</p>
</div>
) : history.length > 0 ? (
<div className="w-full space-y-6">
<div className="relative group overflow-hidden rounded-2xl border border-white/10 shadow-2xl bg-black aspect-video">
<img
src={history[0].url}
alt="Latest Thumbnail"
className="w-full h-full object-contain"
/>
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-4">
<Button onClick={() => downloadImage(history[0].url, `thumbnail-${history[0].id}.png`)}>
Download PNG
</Button>
</div>
</div>
<div className="flex items-center justify-between">
<div>
<h3 className="font-bold text-lg">{history[0].title}</h3>
<p className="text-slate-400 text-sm">Style: {history[0].style} • {new Date(history[0].timestamp).toLocaleTimeString()}</p>
</div>
<Button variant="secondary" onClick={() => downloadImage(history[0].url, `thumbnail-${history[0].id}.png`)}>
Save to Device
</Button>
</div>
</div>
) : (
<div className="w-full aspect-video bg-slate-800/30 rounded-2xl border-2 border-dashed border-slate-700 flex flex-col items-center justify-center p-8 text-center">
<p className="text-slate-500 text-lg">Your generated thumbnail will appear here.</p>
<p className="text-slate-600 text-sm mt-2">Upload a headshot and enter a title to get started!</p>
</div>
)}
</div>
</div>
{history.length > 1 && (
<div className="space-y-6">
<h2 className="text-xl font-bold">Recent Creations</h2>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
{history.slice(1).map((item) => (
<div key={item.id} className="glass rounded-2xl overflow-hidden group cursor-pointer relative aspect-video border border-white/5 hover:border-red-500/30 transition-all">
<img src={item.url} alt={item.title} className="w-full h-full object-cover" />
<div className="absolute inset-0 bg-slate-900/80 opacity-0 group-hover:opacity-100 transition-opacity p-4 flex flex-col justify-end">
<p className="text-xs font-bold truncate text-white">{item.title}</p>
<button
onClick={() => downloadImage(item.url, `thumbnail-${item.id}.png`)}
className="mt-2 text-[10px] text-red-400 uppercase tracking-widest font-bold hover:text-red-300"
>
Download
</button>
</div>
</div>
))}
</div>
</div>
)}
</section>
</main>
{/* Footer Branding */}
<footer className="mt-20 py-10 border-t border-white/5 text-center text-slate-500 text-sm">
<p>© {new Date().getFullYear()} AI Thumbnails Maker. Boost your CTR with Gemini Pro.</p>
<p className="mt-2 text-slate-600">High-quality mode requires a paid Google Cloud project key.</p>
<a href="https://ai.google.dev/gemini-api/docs/billing" target="_blank" rel="noreferrer" className="text-red-500/50 hover:text-red-500 underline mt-1 block">Learn about billing</a>
</footer>
</div>
);
};
export default App;