Implement HGTX Codex interface
This commit is contained in:
gpt-engineer-app[bot]
+5
-5
@@ -3,12 +3,12 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>hgtx-nova-era</title>
|
||||
<meta name="description" content="Lovable Generated Project" />
|
||||
<meta name="author" content="Lovable" />
|
||||
<title>HGTX Codex - AI Interface System</title>
|
||||
<meta name="description" content="Sistema moderno de interface conversacional com IA - Chat, Geração de Imagens e Processamento de Áudio" />
|
||||
<meta name="author" content="HGTX Codex" />
|
||||
|
||||
<meta property="og:title" content="hgtx-nova-era" />
|
||||
<meta property="og:description" content="Lovable Generated Project" />
|
||||
<meta property="og:title" content="HGTX Codex - AI Interface System" />
|
||||
<meta property="og:description" content="Sistema moderno de interface conversacional com IA - Chat, Geração de Imagens e Processamento de Áudio" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
|
||||
export const ChatHeader = () => {
|
||||
const models = [
|
||||
"ChatGPT 4.1",
|
||||
"GPT-5 Mini",
|
||||
"Claude 3.5 Sonnet",
|
||||
"Gemini 2.5 Flash",
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="border-b border-border bg-card/50 backdrop-blur-sm px-6 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-primary animate-pulse-glow" />
|
||||
<span className="text-sm text-muted-foreground">Online</span>
|
||||
</div>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" className="gap-2 glass-effect">
|
||||
<span className="font-medium">ChatGPT 4.1</span>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="glass-effect">
|
||||
{models.map((model) => (
|
||||
<DropdownMenuItem key={model} className="cursor-pointer">
|
||||
{model}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Modelo de linguagem avançado
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,90 @@
|
||||
import { MessageSquare, Image, Mic, Settings, Plus } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
interface LayoutProps {
|
||||
children: React.ReactNode;
|
||||
activeTab: "chat" | "images" | "audio";
|
||||
onTabChange: (tab: "chat" | "images" | "audio") => void;
|
||||
}
|
||||
|
||||
type TabType = "chat" | "images" | "audio";
|
||||
|
||||
export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
|
||||
|
||||
const tabs = [
|
||||
{ id: "chat" as TabType, label: "Bate-papo", icon: MessageSquare },
|
||||
{ id: "images" as TabType, label: "Imagens", icon: Image },
|
||||
{ id: "audio" as TabType, label: "Áudio", icon: Mic },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full bg-background overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-72 bg-sidebar border-r border-sidebar-border flex flex-col">
|
||||
{/* Logo */}
|
||||
<div className="p-6 border-b border-sidebar-border">
|
||||
<h1 className="text-2xl font-bold gradient-text">HGTX Codex</h1>
|
||||
<p className="text-xs text-muted-foreground mt-1">AI Interface System</p>
|
||||
</div>
|
||||
|
||||
{/* New Chat Button */}
|
||||
<div className="p-4">
|
||||
<Button className="w-full gap-2 cyber-glow" variant="default">
|
||||
<Plus className="w-4 h-4" />
|
||||
Novo Chat
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Navigation Tabs */}
|
||||
<nav className="flex-1 px-3 py-2 space-y-1">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = activeTab === tab.id;
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => onTabChange(tab.id)}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
|
||||
isActive
|
||||
? "bg-sidebar-accent text-sidebar-accent-foreground cyber-border"
|
||||
: "text-sidebar-foreground hover:bg-sidebar-accent/50"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
<span className="font-medium">{tab.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<Separator className="bg-sidebar-border" />
|
||||
|
||||
{/* Recent Section */}
|
||||
<div className="p-4 space-y-2">
|
||||
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Recentes
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-sidebar-foreground/70 hover:text-sidebar-foreground px-3 py-2 rounded cursor-pointer hover:bg-sidebar-accent/30 transition-colors">
|
||||
Conversa anterior...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Settings */}
|
||||
<div className="p-4 border-t border-sidebar-border">
|
||||
<Button variant="ghost" className="w-full justify-start gap-2 text-sidebar-foreground">
|
||||
<Settings className="w-4 h-4" />
|
||||
Configurações
|
||||
</Button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 flex flex-col overflow-hidden">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,222 @@
|
||||
import { useState } from "react";
|
||||
import { ChatHeader } from "@/components/ChatHeader";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Upload, Mic, Play, Download, Copy, Trash2 } from "lucide-react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
export const AudioView = () => {
|
||||
const [textToSpeech, setTextToSpeech] = useState("");
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
|
||||
const handleGenerateAudio = () => {
|
||||
setIsProcessing(true);
|
||||
setTimeout(() => setIsProcessing(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<ChatHeader />
|
||||
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="max-w-4xl mx-auto p-6">
|
||||
<Tabs defaultValue="transcription" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-2 glass-effect">
|
||||
<TabsTrigger value="transcription">
|
||||
Transcrição de Áudio
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="generation">Geração de Voz</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Transcription Tab */}
|
||||
<TabsContent value="transcription" className="space-y-6">
|
||||
<div className="glass-effect rounded-xl p-6 space-y-4">
|
||||
<h3 className="text-lg font-semibold">
|
||||
Converter Áudio em Texto
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Envie um arquivo de áudio (.mp3, .wav) para transcrição
|
||||
</p>
|
||||
|
||||
<div className="border-2 border-dashed border-border rounded-xl p-12 text-center space-y-4 hover:border-primary/50 transition-colors cursor-pointer">
|
||||
<div className="w-16 h-16 mx-auto rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Upload className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">
|
||||
Clique para selecionar ou arraste o arquivo
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Suporta MP3, WAV (máx. 25MB)
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="outline" className="gap-2">
|
||||
<Upload className="w-4 h-4" />
|
||||
Selecionar Arquivo
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sample Transcription Result */}
|
||||
<div className="glass-effect rounded-xl p-6 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h4 className="font-semibold">audio_sample.mp3</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Transcrito há 5 minutos
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline" className="gap-1">
|
||||
<Copy className="w-3 h-3" />
|
||||
Copiar
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" className="gap-1">
|
||||
<Download className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button size="sm" variant="destructive" className="gap-1">
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-muted/30 rounded-lg p-4">
|
||||
<p className="text-sm leading-relaxed">
|
||||
Esta é uma transcrição de exemplo do áudio enviado. O
|
||||
sistema utilizará modelos de IA avançados para converter
|
||||
sua fala em texto com alta precisão.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* Generation Tab */}
|
||||
<TabsContent value="generation" className="space-y-6">
|
||||
<div className="glass-effect rounded-xl p-6 space-y-4">
|
||||
<h3 className="text-lg font-semibold">
|
||||
Converter Texto em Voz
|
||||
</h3>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">
|
||||
Digite o texto para converter
|
||||
</label>
|
||||
<Textarea
|
||||
value={textToSpeech}
|
||||
onChange={(e) => setTextToSpeech(e.target.value)}
|
||||
placeholder="Digite o texto que deseja converter em fala..."
|
||||
className="min-h-[120px] resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 items-end">
|
||||
<div className="flex-1 space-y-2">
|
||||
<label className="text-sm font-medium">Tipo de Voz</label>
|
||||
<Select defaultValue="neutral">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="neutral">Neutra</SelectItem>
|
||||
<SelectItem value="masculine">Masculina</SelectItem>
|
||||
<SelectItem value="feminine">Feminina</SelectItem>
|
||||
<SelectItem value="child">Infantil</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleGenerateAudio}
|
||||
disabled={!textToSpeech.trim() || isProcessing}
|
||||
className="gap-2 cyber-glow"
|
||||
size="lg"
|
||||
>
|
||||
<Mic className="w-4 h-4" />
|
||||
{isProcessing ? "Gerando..." : "Gerar Áudio"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{isProcessing && (
|
||||
<div className="bg-muted/30 rounded-lg p-6 flex items-center justify-center gap-3">
|
||||
<div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
|
||||
<p className="text-sm font-medium">
|
||||
Processando áudio...
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sample Generated Audio */}
|
||||
<div className="glass-effect rounded-xl p-6 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h4 className="font-semibold">Áudio Gerado</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Há 2 minutos · Voz Neutra
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline" className="gap-1">
|
||||
<Download className="w-3 h-3" />
|
||||
Baixar
|
||||
</Button>
|
||||
<Button size="sm" variant="destructive" className="gap-1">
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-muted/30 rounded-lg p-4 flex items-center gap-4">
|
||||
<Button size="icon" variant="outline" className="rounded-full">
|
||||
<Play className="w-5 h-5" />
|
||||
</Button>
|
||||
<div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
|
||||
<div className="h-full w-1/3 bg-primary rounded-full" />
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground tabular-nums">
|
||||
0:12 / 0:35
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* History Section */}
|
||||
<div className="mt-8 space-y-4">
|
||||
<h3 className="text-lg font-semibold">Histórico Recente</h3>
|
||||
<div className="grid gap-3">
|
||||
{[1, 2].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="glass-effect rounded-lg p-4 flex items-center justify-between hover:bg-muted/20 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Mic className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-sm">audio_file_{i}.mp3</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Processado há {i} hora{i > 1 ? "s" : ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button size="icon" variant="ghost">
|
||||
<Play className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,70 @@
|
||||
import { Send, Paperclip, Mic } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useState } from "react";
|
||||
|
||||
interface ChatInputProps {
|
||||
onSendMessage: (message: string) => void;
|
||||
}
|
||||
|
||||
export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
|
||||
const [message, setMessage] = useState("");
|
||||
|
||||
const handleSend = () => {
|
||||
if (message.trim()) {
|
||||
onSendMessage(message);
|
||||
setMessage("");
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border-t border-border bg-card/50 backdrop-blur-sm p-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="relative glass-effect rounded-xl p-1">
|
||||
<Textarea
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Digite sua mensagem..."
|
||||
className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 pr-24"
|
||||
/>
|
||||
|
||||
<div className="absolute right-2 bottom-2 flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Paperclip className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Mic className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSend}
|
||||
size="icon"
|
||||
className="h-8 w-8 cyber-glow"
|
||||
disabled={!message.trim()}
|
||||
>
|
||||
<Send className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground text-center mt-2">
|
||||
Pressione Enter para enviar, Shift + Enter para nova linha
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,72 @@
|
||||
import { Bot, User, Copy, Edit, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useState } from "react";
|
||||
|
||||
interface ChatMessageProps {
|
||||
role: "user" | "assistant";
|
||||
content: string;
|
||||
}
|
||||
|
||||
export const ChatMessage = ({ role, content }: ChatMessageProps) => {
|
||||
const [showActions, setShowActions] = useState(false);
|
||||
const isAssistant = role === "assistant";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex gap-4 py-6 px-6 group ${
|
||||
isAssistant ? "bg-muted/30" : ""
|
||||
} hover:bg-muted/20 transition-colors`}
|
||||
onMouseEnter={() => setShowActions(true)}
|
||||
onMouseLeave={() => setShowActions(false)}
|
||||
>
|
||||
<div
|
||||
className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
isAssistant
|
||||
? "bg-gradient-to-br from-primary to-secondary"
|
||||
: "bg-accent/20 border border-accent"
|
||||
}`}
|
||||
>
|
||||
{isAssistant ? (
|
||||
<Bot className="w-5 h-5 text-primary-foreground" />
|
||||
) : (
|
||||
<User className="w-5 h-5 text-accent" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="prose prose-invert max-w-none">
|
||||
<p className="text-foreground leading-relaxed">{content}</p>
|
||||
</div>
|
||||
|
||||
{showActions && (
|
||||
<div className="flex gap-1 animate-fade-in">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Copy className="w-3 h-3 mr-1" />
|
||||
Copiar
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Edit className="w-3 h-3 mr-1" />
|
||||
Editar
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2 text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="w-3 h-3 mr-1" />
|
||||
Excluir
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,79 @@
|
||||
import { useState } from "react";
|
||||
import { ChatHeader } from "@/components/ChatHeader";
|
||||
import { ChatMessage } from "./ChatMessage";
|
||||
import { ChatInput } from "./ChatInput";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
|
||||
interface Message {
|
||||
id: string;
|
||||
role: "user" | "assistant";
|
||||
content: string;
|
||||
}
|
||||
|
||||
export const ChatView = () => {
|
||||
const [messages, setMessages] = useState<Message[]>([
|
||||
{
|
||||
id: "1",
|
||||
role: "assistant",
|
||||
content: "Olá! Sou o assistente HGTX Codex. Como posso ajudá-lo hoje?",
|
||||
},
|
||||
]);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleSendMessage = (content: string) => {
|
||||
const newMessage: Message = {
|
||||
id: Date.now().toString(),
|
||||
role: "user",
|
||||
content,
|
||||
};
|
||||
|
||||
setMessages((prev) => [...prev, newMessage]);
|
||||
setIsLoading(true);
|
||||
|
||||
// Simulate AI response
|
||||
setTimeout(() => {
|
||||
const aiResponse: Message = {
|
||||
id: (Date.now() + 1).toString(),
|
||||
role: "assistant",
|
||||
content:
|
||||
"Esta é uma resposta simulada. Em breve, estarei conectado a modelos de IA reais para fornecer respostas inteligentes e úteis.",
|
||||
};
|
||||
setMessages((prev) => [...prev, aiResponse]);
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<ChatHeader />
|
||||
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{messages.map((message) => (
|
||||
<ChatMessage
|
||||
key={message.id}
|
||||
role={message.role}
|
||||
content={message.content}
|
||||
/>
|
||||
))}
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex gap-4 py-6 px-6 bg-muted/30">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
|
||||
<div className="w-5 h-5 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
<div className="flex gap-1 items-center">
|
||||
<div className="w-2 h-2 bg-primary rounded-full animate-bounce" />
|
||||
<div className="w-2 h-2 bg-primary rounded-full animate-bounce delay-100" />
|
||||
<div className="w-2 h-2 bg-primary rounded-full animate-bounce delay-200" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<ChatInput onSendMessage={handleSendMessage} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,146 @@
|
||||
import { useState } from "react";
|
||||
import { ChatHeader } from "@/components/ChatHeader";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Download, Copy, Trash2, Sparkles } from "lucide-react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
export const ImageView = () => {
|
||||
const [prompt, setPrompt] = useState("");
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const [images, setImages] = useState<string[]>([]);
|
||||
|
||||
const handleGenerate = () => {
|
||||
setIsGenerating(true);
|
||||
// Simulate image generation
|
||||
setTimeout(() => {
|
||||
setImages((prev) => [
|
||||
"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=512&h=512&fit=crop",
|
||||
...prev,
|
||||
]);
|
||||
setIsGenerating(false);
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<ChatHeader />
|
||||
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="max-w-5xl mx-auto p-6 space-y-6">
|
||||
{/* Generation Form */}
|
||||
<div className="glass-effect rounded-xl p-6 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
Descreva a imagem
|
||||
</label>
|
||||
<Textarea
|
||||
value={prompt}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
placeholder="Descreva a imagem que deseja criar..."
|
||||
className="min-h-[100px] resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 items-end">
|
||||
<div className="flex-1 space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
Tamanho
|
||||
</label>
|
||||
<Select defaultValue="1024x1024">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="512x512">512x512</SelectItem>
|
||||
<SelectItem value="1024x1024">1024x1024</SelectItem>
|
||||
<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 className="absolute bottom-0 left-0 right-0 p-3 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"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -5,14 +5,14 @@ import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg hover:shadow-primary/50",
|
||||
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-md hover:shadow-secondary/40",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
|
||||
+80
-77
@@ -1,96 +1,61 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
|
||||
All colors MUST be HSL.
|
||||
*/
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
/* HGTX Codex - Cyberpunk Dark Theme */
|
||||
--background: 222 47% 5%;
|
||||
--foreground: 200 100% 95%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--card: 222 40% 8%;
|
||||
--card-foreground: 200 100% 95%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--popover: 222 45% 10%;
|
||||
--popover-foreground: 200 100% 95%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--primary: 190 100% 50%;
|
||||
--primary-foreground: 222 47% 5%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 210 100% 50%;
|
||||
--secondary-foreground: 222 47% 5%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--muted: 222 30% 15%;
|
||||
--muted-foreground: 200 20% 65%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--accent: 190 100% 60%;
|
||||
--accent-foreground: 222 47% 5%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 200 100% 95%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--border: 222 30% 18%;
|
||||
--input: 222 30% 18%;
|
||||
--ring: 190 100% 50%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
--radius: 0.75rem;
|
||||
|
||||
--sidebar-background: 0 0% 98%;
|
||||
/* Sidebar specific */
|
||||
--sidebar-background: 222 45% 7%;
|
||||
--sidebar-foreground: 200 100% 90%;
|
||||
--sidebar-primary: 190 100% 50%;
|
||||
--sidebar-primary-foreground: 222 47% 5%;
|
||||
--sidebar-accent: 222 35% 12%;
|
||||
--sidebar-accent-foreground: 190 100% 60%;
|
||||
--sidebar-border: 222 30% 15%;
|
||||
--sidebar-ring: 190 100% 50%;
|
||||
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
|
||||
--sidebar-border: 220 13% 91%;
|
||||
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
/* Custom gradients */
|
||||
--gradient-cyber: linear-gradient(135deg, hsl(190 100% 50%) 0%, hsl(210 100% 50%) 100%);
|
||||
--gradient-subtle: linear-gradient(180deg, hsl(222 45% 8%) 0%, hsl(222 47% 5%) 100%);
|
||||
--glow-cyan: 0 0 40px hsl(190 100% 50% / 0.3);
|
||||
--glow-blue: 0 0 30px hsl(210 100% 50% / 0.25);
|
||||
|
||||
/* Animation speeds */
|
||||
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -100,6 +65,44 @@ All colors MUST be HSL.
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply bg-background text-foreground font-sans antialiased;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-background;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-muted rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-primary/50;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.glass-effect {
|
||||
@apply bg-card/40 backdrop-blur-xl border border-border/50;
|
||||
}
|
||||
|
||||
.cyber-glow {
|
||||
box-shadow: var(--glow-cyan);
|
||||
}
|
||||
|
||||
.cyber-border {
|
||||
@apply border border-primary/30 rounded-lg;
|
||||
box-shadow: 0 0 20px hsl(190 100% 50% / 0.1);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
@apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
+12
-7
@@ -1,13 +1,18 @@
|
||||
// Update this page (the content is just a fallback if you fail to update the page)
|
||||
import { useState } from "react";
|
||||
import { Layout } from "@/components/Layout";
|
||||
import { ChatView } from "@/components/chat/ChatView";
|
||||
import { ImageView } from "@/components/images/ImageView";
|
||||
import { AudioView } from "@/components/audio/AudioView";
|
||||
|
||||
const Index = () => {
|
||||
const [activeView, setActiveView] = useState<"chat" | "images" | "audio">("chat");
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
|
||||
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
|
||||
</div>
|
||||
</div>
|
||||
<Layout activeTab={activeView} onTabChange={setActiveView}>
|
||||
{activeView === "chat" && <ChatView />}
|
||||
{activeView === "images" && <ImageView />}
|
||||
{activeView === "audio" && <AudioView />}
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
+26
-10
@@ -13,6 +13,9 @@ export default {
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
@@ -65,25 +68,38 @@ export default {
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: {
|
||||
height: "0",
|
||||
},
|
||||
to: {
|
||||
height: "var(--radix-accordion-content-height)",
|
||||
},
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: {
|
||||
height: "var(--radix-accordion-content-height)",
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
"pulse-glow": {
|
||||
"0%, 100%": {
|
||||
boxShadow: "0 0 20px hsl(190 100% 50% / 0.3)",
|
||||
transform: "scale(1)"
|
||||
},
|
||||
to: {
|
||||
height: "0",
|
||||
"50%": {
|
||||
boxShadow: "0 0 40px hsl(190 100% 50% / 0.5)",
|
||||
transform: "scale(1.02)"
|
||||
},
|
||||
},
|
||||
"slide-in-right": {
|
||||
"0%": { transform: "translateX(100%)", opacity: "0" },
|
||||
"100%": { transform: "translateX(0)", opacity: "1" },
|
||||
},
|
||||
"fade-in": {
|
||||
"0%": { opacity: "0", transform: "translateY(10px)" },
|
||||
"100%": { opacity: "1", transform: "translateY(0)" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
"pulse-glow": "pulse-glow 2s ease-in-out infinite",
|
||||
"slide-in-right": "slide-in-right 0.3s ease-out",
|
||||
"fade-in": "fade-in 0.3s ease-out",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user