feat: Add image generation options and history
This commit is contained in:
gpt-engineer-app[bot]
+214
-109
@@ -2,8 +2,9 @@ import { useState } from "react";
|
|||||||
import { ChatHeader } from "@/components/ChatHeader";
|
import { ChatHeader } from "@/components/ChatHeader";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
import { Download, Copy, Trash2, Sparkles } from "lucide-react";
|
import { Download, Copy, Trash2, Sparkles, Clock, Search } from "lucide-react";
|
||||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
@@ -11,136 +12,240 @@ import {
|
|||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue,
|
SelectValue,
|
||||||
} from "@/components/ui/select";
|
} from "@/components/ui/select";
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
|
|
||||||
|
interface GeneratedImage {
|
||||||
|
id: string;
|
||||||
|
url: string;
|
||||||
|
prompt: string;
|
||||||
|
size: string;
|
||||||
|
timestamp: string;
|
||||||
|
}
|
||||||
|
|
||||||
export const ImageView = () => {
|
export const ImageView = () => {
|
||||||
const [prompt, setPrompt] = useState("");
|
const [prompt, setPrompt] = useState("");
|
||||||
const [isGenerating, setIsGenerating] = useState(false);
|
const [isGenerating, setIsGenerating] = useState(false);
|
||||||
const [images, setImages] = useState<string[]>([]);
|
const [selectedSize, setSelectedSize] = useState("1024x1024");
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [images, setImages] = useState<GeneratedImage[]>([
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
url: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=512&h=512&fit=crop",
|
||||||
|
prompt: "Paisagem futurista com cidades voadoras",
|
||||||
|
size: "1024x1024",
|
||||||
|
timestamp: "Há 2 horas",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
|
url: "https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?w=512&h=512&fit=crop",
|
||||||
|
prompt: "Robô humanoide em estilo cyberpunk",
|
||||||
|
size: "1024x1536",
|
||||||
|
timestamp: "Há 5 horas",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
const handleGenerate = () => {
|
const handleGenerate = () => {
|
||||||
setIsGenerating(true);
|
setIsGenerating(true);
|
||||||
// Simulate image generation
|
// Simulate image generation
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setImages((prev) => [
|
const newImage: GeneratedImage = {
|
||||||
"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=512&h=512&fit=crop",
|
id: Date.now().toString(),
|
||||||
...prev,
|
url: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=512&h=512&fit=crop",
|
||||||
]);
|
prompt: prompt,
|
||||||
|
size: selectedSize,
|
||||||
|
timestamp: "Agora",
|
||||||
|
};
|
||||||
|
setImages([newImage, ...images]);
|
||||||
setIsGenerating(false);
|
setIsGenerating(false);
|
||||||
|
setPrompt("");
|
||||||
}, 3000);
|
}, 3000);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleDelete = (id: string) => {
|
||||||
|
setImages(images.filter((img) => img.id !== id));
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredImages = images.filter((img) =>
|
||||||
|
img.prompt.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col h-full">
|
<div className="flex flex-col h-full">
|
||||||
<ChatHeader />
|
<ChatHeader />
|
||||||
|
|
||||||
<ScrollArea className="flex-1">
|
<div className="flex-1 flex overflow-hidden">
|
||||||
<div className="max-w-5xl mx-auto p-6 space-y-6">
|
{/* Main Content */}
|
||||||
{/* Generation Form */}
|
<ScrollArea className="flex-1">
|
||||||
<div className="glass-effect rounded-xl p-6 space-y-4">
|
<div className="max-w-5xl mx-auto p-6">
|
||||||
<div className="space-y-2">
|
<Tabs defaultValue="generate" className="space-y-6">
|
||||||
<label className="text-sm font-medium text-foreground">
|
<TabsList className="grid w-full grid-cols-2 glass-effect">
|
||||||
Descreva a imagem
|
<TabsTrigger value="generate">Gerar Imagem</TabsTrigger>
|
||||||
</label>
|
<TabsTrigger value="history">
|
||||||
<Textarea
|
<Clock className="w-4 h-4 mr-2" />
|
||||||
value={prompt}
|
Histórico
|
||||||
onChange={(e) => setPrompt(e.target.value)}
|
</TabsTrigger>
|
||||||
placeholder="Descreva a imagem que deseja criar..."
|
</TabsList>
|
||||||
className="min-h-[100px] resize-none"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-4 items-end">
|
{/* Generate Tab */}
|
||||||
<div className="flex-1 space-y-2">
|
<TabsContent value="generate" className="space-y-6">
|
||||||
<label className="text-sm font-medium text-foreground">
|
<div className="glass-effect rounded-xl p-6 space-y-4">
|
||||||
Tamanho
|
<div className="space-y-2">
|
||||||
</label>
|
<label className="text-sm font-medium text-foreground">
|
||||||
<Select defaultValue="1024x1024">
|
Descreva a imagem
|
||||||
<SelectTrigger>
|
</label>
|
||||||
<SelectValue />
|
<Textarea
|
||||||
</SelectTrigger>
|
value={prompt}
|
||||||
<SelectContent>
|
onChange={(e) => setPrompt(e.target.value)}
|
||||||
<SelectItem value="512x512">512x512</SelectItem>
|
placeholder="Descreva a imagem que deseja criar..."
|
||||||
<SelectItem value="1024x1024">1024x1024</SelectItem>
|
className="min-h-[100px] resize-none"
|
||||||
<SelectItem value="1792x1024">1792x1024 (Wide)</SelectItem>
|
|
||||||
<SelectItem value="1024x1792">1024x1792 (Tall)</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
onClick={handleGenerate}
|
|
||||||
disabled={!prompt.trim() || isGenerating}
|
|
||||||
className="gap-2 cyber-glow"
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
<Sparkles className="w-4 h-4" />
|
|
||||||
{isGenerating ? "Gerando..." : "Gerar Imagem"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Loading State */}
|
|
||||||
{isGenerating && (
|
|
||||||
<div className="glass-effect rounded-xl p-12 flex flex-col items-center justify-center space-y-4 animate-fade-in">
|
|
||||||
<div className="relative">
|
|
||||||
<div className="w-24 h-24 rounded-full border-4 border-primary/20 border-t-primary animate-spin" />
|
|
||||||
<div className="absolute inset-0 flex items-center justify-center">
|
|
||||||
<Sparkles className="w-8 h-8 text-primary animate-pulse-glow" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-lg font-medium gradient-text">
|
|
||||||
Gerando sua imagem...
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Isso pode levar alguns segundos
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Generated Images Grid */}
|
|
||||||
{images.length > 0 && (
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold mb-4">Imagens Geradas</h3>
|
|
||||||
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
|
|
||||||
{images.map((image, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="group relative glass-effect rounded-xl overflow-hidden aspect-square animate-fade-in"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={image}
|
|
||||||
alt={`Generated ${index}`}
|
|
||||||
className="w-full h-full object-cover"
|
|
||||||
/>
|
/>
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity">
|
</div>
|
||||||
<div className="absolute bottom-0 left-0 right-0 p-3 flex gap-2">
|
|
||||||
<Button
|
<div className="flex gap-4 items-end">
|
||||||
size="sm"
|
<div className="flex-1 space-y-2">
|
||||||
variant="secondary"
|
<label className="text-sm font-medium text-foreground">
|
||||||
className="flex-1 gap-1"
|
Tamanho
|
||||||
>
|
</label>
|
||||||
<Download className="w-3 h-3" />
|
<Select value={selectedSize} onValueChange={setSelectedSize}>
|
||||||
Baixar
|
<SelectTrigger>
|
||||||
</Button>
|
<SelectValue />
|
||||||
<Button size="sm" variant="secondary" className="gap-1">
|
</SelectTrigger>
|
||||||
<Copy className="w-3 h-3" />
|
<SelectContent className="glass-effect bg-popover border-border z-50">
|
||||||
</Button>
|
<SelectItem value="1024x1024">1024x1024 (Quadrado)</SelectItem>
|
||||||
<Button
|
<SelectItem value="1024x1536">1024x1536 (Retrato)</SelectItem>
|
||||||
size="sm"
|
<SelectItem value="1536x1024">1536x1024 (Paisagem)</SelectItem>
|
||||||
variant="destructive"
|
</SelectContent>
|
||||||
className="gap-1"
|
</Select>
|
||||||
>
|
</div>
|
||||||
<Trash2 className="w-3 h-3" />
|
|
||||||
</Button>
|
<Button
|
||||||
|
onClick={handleGenerate}
|
||||||
|
disabled={!prompt.trim() || isGenerating}
|
||||||
|
className="gap-2 cyber-glow"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
<Sparkles className="w-4 h-4" />
|
||||||
|
{isGenerating ? "Gerando..." : "Gerar Imagem"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Loading State */}
|
||||||
|
{isGenerating && (
|
||||||
|
<div className="glass-effect rounded-xl p-12 flex flex-col items-center justify-center space-y-4 animate-fade-in">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="w-24 h-24 rounded-full border-4 border-primary/20 border-t-primary animate-spin" />
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<Sparkles className="w-8 h-8 text-primary animate-pulse-glow" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<p className="text-lg font-medium gradient-text">
|
||||||
|
Gerando sua imagem...
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Isso pode levar alguns segundos
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
)}
|
||||||
</div>
|
|
||||||
</div>
|
{/* Recent Images Preview */}
|
||||||
)}
|
{!isGenerating && images.length > 0 && (
|
||||||
</div>
|
<div>
|
||||||
</ScrollArea>
|
<h3 className="text-lg font-semibold mb-4">Última Geração</h3>
|
||||||
|
<ImageCard
|
||||||
|
image={images[0]}
|
||||||
|
onDelete={handleDelete}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* History Tab */}
|
||||||
|
<TabsContent value="history" className="space-y-4">
|
||||||
|
{/* Search */}
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
placeholder="Buscar por descrição..."
|
||||||
|
className="pl-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Images Grid */}
|
||||||
|
{filteredImages.length > 0 ? (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{filteredImages.map((image) => (
|
||||||
|
<ImageCard
|
||||||
|
key={image.id}
|
||||||
|
image={image}
|
||||||
|
onDelete={handleDelete}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="glass-effect rounded-xl p-12 text-center">
|
||||||
|
<Clock className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
{searchQuery ? "Nenhuma imagem encontrada" : "Nenhuma imagem gerada ainda"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface ImageCardProps {
|
||||||
|
image: GeneratedImage;
|
||||||
|
onDelete: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ImageCard = ({ image, onDelete }: ImageCardProps) => {
|
||||||
|
return (
|
||||||
|
<div className="group glass-effect rounded-xl overflow-hidden animate-fade-in">
|
||||||
|
<div className="relative aspect-square">
|
||||||
|
<img
|
||||||
|
src={image.url}
|
||||||
|
alt={image.prompt}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-4 space-y-2">
|
||||||
|
<p className="text-sm text-white line-clamp-2">{image.prompt}</p>
|
||||||
|
<div className="flex items-center justify-between text-xs text-white/70">
|
||||||
|
<span>{image.size}</span>
|
||||||
|
<span>{image.timestamp}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="secondary"
|
||||||
|
className="flex-1 gap-1"
|
||||||
|
>
|
||||||
|
<Download className="w-3 h-3" />
|
||||||
|
Baixar
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="secondary" className="gap-1">
|
||||||
|
<Copy className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="destructive"
|
||||||
|
className="gap-1"
|
||||||
|
onClick={() => onDelete(image.id)}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user