107 lines
4.2 KiB
TypeScript
107 lines
4.2 KiB
TypeScript
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Button } from '@/components/ui/button'
|
||
import { auth } from '@/auth'
|
||
import { redirect } from 'next/navigation'
|
||
import Link from 'next/link'
|
||
import { ArrowLeft, TestTube } from 'lucide-react'
|
||
import { AI_TESTER } from './ai-tester'
|
||
|
||
export default async function AITestPage() {
|
||
const session = await auth()
|
||
|
||
if ((session?.user as any)?.role !== 'ADMIN') {
|
||
redirect('/')
|
||
}
|
||
|
||
return (
|
||
<div className="container mx-auto py-10 px-4 max-w-6xl">
|
||
<div className="flex justify-between items-center mb-8">
|
||
<div className="flex items-center gap-3">
|
||
<Link href="/admin/settings">
|
||
<Button variant="outline" size="icon">
|
||
<ArrowLeft className="h-4 w-4" />
|
||
</Button>
|
||
</Link>
|
||
<div>
|
||
<h1 className="text-3xl font-bold flex items-center gap-2">
|
||
<TestTube className="h-8 w-8" />
|
||
AI Provider Testing
|
||
</h1>
|
||
<p className="text-muted-foreground mt-1">
|
||
Test your AI providers for tag generation and semantic search embeddings
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
{/* Tags Provider Test */}
|
||
<Card className="border-primary/20 dark:border-primary/30">
|
||
<CardHeader className="bg-primary/5 dark:bg-primary/10">
|
||
<CardTitle className="flex items-center gap-2">
|
||
<span className="text-2xl">🏷️</span>
|
||
Tags Generation Test
|
||
</CardTitle>
|
||
<CardDescription>
|
||
Test the AI provider responsible for automatic tag suggestions
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="pt-6">
|
||
<AI_TESTER type="tags" />
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Embeddings Provider Test */}
|
||
<Card className="border-green-200 dark:border-green-900">
|
||
<CardHeader className="bg-green-50/50 dark:bg-green-950/20">
|
||
<CardTitle className="flex items-center gap-2">
|
||
<span className="text-2xl">🔍</span>
|
||
Embeddings Test
|
||
</CardTitle>
|
||
<CardDescription>
|
||
Test the AI provider responsible for semantic search embeddings
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="pt-6">
|
||
<AI_TESTER type="embeddings" />
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Info Section */}
|
||
<Card className="mt-6">
|
||
<CardHeader>
|
||
<CardTitle>ℹ️ How Testing Works</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4 text-sm">
|
||
<div>
|
||
<h4 className="font-semibold mb-2">🏷️ Tags Generation Test:</h4>
|
||
<ul className="list-disc list-inside space-y-1 text-muted-foreground">
|
||
<li>Sends a sample note to the AI provider</li>
|
||
<li>Requests 3-5 relevant tags based on the content</li>
|
||
<li>Displays the generated tags with confidence scores</li>
|
||
<li>Measures response time</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-semibold mb-2">🔍 Embeddings Test:</h4>
|
||
<ul className="list-disc list-inside space-y-1 text-muted-foreground">
|
||
<li>Sends a sample text to the embedding provider</li>
|
||
<li>Generates a vector representation (list of numbers)</li>
|
||
<li>Displays embedding dimensions and sample values</li>
|
||
<li>Verifies the vector is valid and properly formatted</li>
|
||
</ul>
|
||
</div>
|
||
<div className="bg-amber-50 dark:bg-amber-950/20 p-4 rounded-lg border border-amber-200 dark:border-amber-900">
|
||
<p className="font-semibold text-amber-900 dark:text-amber-100">💡 Tip:</p>
|
||
<p className="text-amber-800 dark:text-amber-200 mt-1">
|
||
You can use different providers for tags and embeddings! For example, use Ollama (free) for tags
|
||
and OpenAI (best quality) for embeddings to optimize costs and performance.
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|