149 lines
9.4 KiB
TypeScript
149 lines
9.4 KiB
TypeScript
'use client'
|
||
|
||
import { Button } from '@/components/ui/button'
|
||
import { ArrowLeft, TestTube, Info, Sparkles, Zap, Brain, MessageSquare, Search } from 'lucide-react'
|
||
import { AI_TESTER } from './ai-tester'
|
||
import { useLanguage } from '@/lib/i18n'
|
||
|
||
export default function AITestPage() {
|
||
const { t } = useLanguage()
|
||
|
||
return (
|
||
<div className="bg-background flex flex-col min-h-screen">
|
||
<div className="flex-1 overflow-y-auto">
|
||
<div className="max-w-[1800px] mx-auto px-6 md:px-16 py-12 space-y-16">
|
||
{/* Header - Even larger and more spaced */}
|
||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-10 border-b border-border/40 pb-12">
|
||
<div className="flex items-start gap-8">
|
||
<a href="/admin/settings" className="mt-2">
|
||
<Button variant="outline" size="icon" className="rounded-3xl h-16 w-16 border-border/60 bg-card hover:bg-muted transition-all shadow-md group">
|
||
<ArrowLeft className="h-7 w-7 group-hover:-translate-x-1 transition-transform" />
|
||
</Button>
|
||
</a>
|
||
<div>
|
||
<div className="flex items-center gap-4 mb-3">
|
||
<div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary shadow-inner">
|
||
<TestTube className="h-7 w-7" />
|
||
</div>
|
||
<span className="text-sm font-black uppercase tracking-[0.3em] text-primary/70">Diagnostics Haute Précision</span>
|
||
</div>
|
||
<h1 className="text-5xl md:text-7xl font-black tracking-tight text-foreground leading-[1.1]">
|
||
{t('admin.aiTest.title')}
|
||
</h1>
|
||
<p className="text-muted-foreground mt-4 text-xl font-medium max-w-3xl leading-relaxed">
|
||
{t('admin.aiTest.description')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col items-end gap-3 px-8 py-5 bg-card border border-border/50 rounded-[2.5rem] shadow-sm">
|
||
<div className="flex items-center gap-4">
|
||
<div className="w-3 h-3 rounded-full bg-green-500 animate-pulse" />
|
||
<span className="text-base font-black uppercase tracking-widest text-foreground">Système Actif</span>
|
||
</div>
|
||
<p className="text-xs text-muted-foreground font-bold uppercase tracking-widest">Latence: Optimisée</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* New Horizontal Section for each Test - Maximum Width Utilization */}
|
||
<div className="space-y-12">
|
||
{/* 1. Tags Test - Horizontal Layout */}
|
||
<div className="bg-card rounded-[4rem] border border-border/60 shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-700 group flex flex-col xl:flex-row">
|
||
<div className="xl:w-1/3 p-12 md:p-16 border-b xl:border-b-0 xl:border-r border-border/40 bg-gradient-to-br from-primary/[0.05] to-transparent relative overflow-hidden">
|
||
<div className="absolute -right-10 -bottom-10 opacity-[0.03] group-hover:opacity-[0.08] transition-all duration-700 group-hover:scale-125 group-hover:-rotate-12">
|
||
<Brain className="h-80 w-80 text-primary" />
|
||
</div>
|
||
<div className="relative space-y-8">
|
||
<div className="w-20 h-20 rounded-[1.5rem] bg-background flex items-center justify-center text-4xl shadow-2xl border border-border/50 group-hover:scale-110 transition-transform duration-500">
|
||
🏷️
|
||
</div>
|
||
<div>
|
||
<h3 className="text-3xl md:text-4xl font-black text-foreground tracking-tight mb-4">{t('admin.aiTest.tagsTestTitle')}</h3>
|
||
<p className="text-lg text-muted-foreground font-bold opacity-80 leading-relaxed">{t('admin.aiTest.tagsTestDescription')}</p>
|
||
</div>
|
||
<div className="flex flex-wrap gap-3">
|
||
<span className="px-4 py-2 bg-primary/10 rounded-xl text-primary text-[10px] font-black uppercase tracking-widest">Auto-Labeling</span>
|
||
<span className="px-4 py-2 bg-primary/10 rounded-xl text-primary text-[10px] font-black uppercase tracking-widest">Suggestions</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="xl:w-2/3 p-12 md:p-16 bg-gradient-to-l from-transparent to-primary/[0.01]">
|
||
<div className="max-w-4xl">
|
||
<AI_TESTER type="tags" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 2. Embeddings Test - Horizontal Layout */}
|
||
<div className="bg-card rounded-[4rem] border border-border/60 shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-700 group flex flex-col xl:flex-row">
|
||
<div className="xl:w-1/3 p-12 md:p-16 border-b xl:border-b-0 xl:border-r border-border/40 bg-gradient-to-br from-green-500/[0.05] to-transparent relative overflow-hidden">
|
||
<div className="absolute -right-10 -bottom-10 opacity-[0.03] group-hover:opacity-[0.08] transition-all duration-700 group-hover:scale-125 group-hover:rotate-12">
|
||
<Search className="h-80 w-80 text-green-500" />
|
||
</div>
|
||
<div className="relative space-y-8">
|
||
<div className="w-20 h-20 rounded-[1.5rem] bg-background flex items-center justify-center text-4xl shadow-2xl border border-border/50 group-hover:scale-110 transition-transform duration-500">
|
||
🔍
|
||
</div>
|
||
<div>
|
||
<h3 className="text-3xl md:text-4xl font-black text-foreground tracking-tight mb-4">{t('admin.aiTest.embeddingsTestTitle')}</h3>
|
||
<p className="text-lg text-muted-foreground font-bold opacity-80 leading-relaxed">{t('admin.aiTest.embeddingsTestDescription')}</p>
|
||
</div>
|
||
<div className="flex flex-wrap gap-3">
|
||
<span className="px-4 py-2 bg-green-500/10 rounded-xl text-green-600 text-[10px] font-black uppercase tracking-widest">Vector Store</span>
|
||
<span className="px-4 py-2 bg-green-500/10 rounded-xl text-green-600 text-[10px] font-black uppercase tracking-widest">Similarity</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="xl:w-2/3 p-12 md:p-16 bg-gradient-to-l from-transparent to-green-500/[0.01]">
|
||
<div className="max-w-4xl">
|
||
<AI_TESTER type="embeddings" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 3. Chat Test - Horizontal Layout */}
|
||
<div className="bg-card rounded-[4rem] border border-border/60 shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-700 group flex flex-col xl:flex-row">
|
||
<div className="xl:w-1/3 p-12 md:p-16 border-b xl:border-b-0 xl:border-r border-border/40 bg-gradient-to-br from-zinc-500/[0.05] to-transparent relative overflow-hidden">
|
||
<div className="absolute -right-10 -bottom-10 opacity-[0.03] group-hover:opacity-[0.08] transition-all duration-700 group-hover:scale-125 group-hover:-rotate-6">
|
||
<MessageSquare className="h-80 w-80 text-zinc-500" />
|
||
</div>
|
||
<div className="relative space-y-8">
|
||
<div className="w-20 h-20 rounded-[1.5rem] bg-background flex items-center justify-center text-4xl shadow-2xl border border-border/50 group-hover:scale-110 transition-transform duration-500">
|
||
💬
|
||
</div>
|
||
<div>
|
||
<h3 className="text-3xl md:text-4xl font-black text-foreground tracking-tight mb-4">{t('admin.aiTest.chatTestTitle')}</h3>
|
||
<p className="text-lg text-muted-foreground font-bold opacity-80 leading-relaxed">{t('admin.aiTest.chatTestDescription')}</p>
|
||
</div>
|
||
<div className="flex flex-wrap gap-3">
|
||
<span className="px-4 py-2 bg-zinc-500/10 rounded-xl text-zinc-600 text-[10px] font-black uppercase tracking-widest">Conversational</span>
|
||
<span className="px-4 py-2 bg-zinc-500/10 rounded-xl text-zinc-600 text-[10px] font-black uppercase tracking-widest">Streaming</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="xl:w-2/3 p-12 md:p-16 bg-gradient-to-l from-transparent to-zinc-500/[0.01]">
|
||
<div className="max-w-4xl">
|
||
<AI_TESTER type="chat" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tips Section - Broad and visible */}
|
||
<div className="bg-amber-500/5 border border-amber-500/20 rounded-[3rem] p-12 flex flex-col md:flex-row items-center gap-10">
|
||
<div className="w-24 h-24 rounded-3xl bg-amber-500/10 flex items-center justify-center text-5xl shrink-0 shadow-inner">
|
||
💡
|
||
</div>
|
||
<div className="space-y-4">
|
||
<h4 className="text-2xl font-black text-amber-700 dark:text-amber-400 uppercase tracking-tight">{t('admin.aiTest.tipTitle')}</h4>
|
||
<p className="text-xl text-amber-600/90 dark:text-amber-300/80 leading-relaxed font-bold">
|
||
{t('admin.aiTest.tipContent')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|