feat(ai): implement intelligent auto-tagging system
- Added multi-provider AI infrastructure (OpenAI/Ollama) - Implemented real-time tag suggestions with debounced analysis - Created AI diagnostics and database maintenance tools in Settings - Added automated garbage collection for orphan labels - Refined UX with deterministic color hashing and interactive ghost tags
This commit is contained in:
152
keep-notes/app/settings/page.tsx
Normal file
152
keep-notes/app/settings/page.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Loader2, CheckCircle, XCircle, RefreshCw, Trash2, Database } from 'lucide-react';
|
||||
import { cleanupAllOrphans } from '@/app/actions/notes';
|
||||
import { useToast } from '@/components/ui/toast';
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { addToast } = useToast();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [cleanupLoading, setCleanupLoading] = useState(false);
|
||||
const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
|
||||
const [result, setResult] = useState<any>(null);
|
||||
const [config, setConfig] = useState<any>(null);
|
||||
|
||||
const checkConnection = async () => {
|
||||
setLoading(true);
|
||||
setStatus('idle');
|
||||
setResult(null);
|
||||
try {
|
||||
const res = await fetch('/api/ai/test');
|
||||
const data = await res.json();
|
||||
|
||||
setConfig({
|
||||
provider: data.provider,
|
||||
status: res.ok ? 'connected' : 'disconnected'
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setStatus('success');
|
||||
setResult(data);
|
||||
} else {
|
||||
setStatus('error');
|
||||
setResult(data);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
setStatus('error');
|
||||
setResult({ message: error.message, stack: error.stack });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCleanup = async () => {
|
||||
setCleanupLoading(true);
|
||||
try {
|
||||
const result = await cleanupAllOrphans();
|
||||
if (result.success) {
|
||||
addToast(`Nettoyage terminé : ${result.count} tags supprimés`, 'success');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
addToast("Erreur lors du nettoyage", "error");
|
||||
} finally {
|
||||
setCleanupLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
checkConnection();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-10 px-4 max-w-4xl space-y-8">
|
||||
<h1 className="text-3xl font-bold mb-8">Paramètres</h1>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
Diagnostic IA
|
||||
{status === 'success' && <CheckCircle className="text-green-500 w-5 h-5" />}
|
||||
{status === 'error' && <XCircle className="text-red-500 w-5 h-5" />}
|
||||
</CardTitle>
|
||||
<CardDescription>Vérifiez la connexion avec votre fournisseur d'intelligence artificielle.</CardDescription>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={checkConnection} disabled={loading}>
|
||||
{loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <RefreshCw className="w-4 h-4 mr-2" />}
|
||||
Tester la connexion
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
|
||||
{/* Configuration Actuelle */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-4 rounded-lg bg-secondary/50">
|
||||
<p className="text-sm font-medium text-muted-foreground mb-1">Provider Configuré</p>
|
||||
<p className="text-lg font-mono">{config?.provider || '...'}</p>
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-secondary/50">
|
||||
<p className="text-sm font-medium text-muted-foreground mb-1">État API</p>
|
||||
<Badge variant={status === 'success' ? 'default' : 'destructive'}>
|
||||
{status === 'success' ? 'Opérationnel' : 'Erreur'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Résultat du Test */}
|
||||
{result && (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium">Détails du test :</h3>
|
||||
<div className={`p-4 rounded-md font-mono text-xs overflow-x-auto ${status === 'error' ? 'bg-red-50 text-red-900 border border-red-200' : 'bg-slate-950 text-slate-50'}`}>
|
||||
<pre>{JSON.stringify(result, null, 2)}</pre>
|
||||
</div>
|
||||
|
||||
{status === 'error' && (
|
||||
<div className="text-sm text-red-600 mt-2">
|
||||
<p className="font-bold">Conseil de dépannage :</p>
|
||||
<ul className="list-disc list-inside mt-1">
|
||||
<li>Vérifiez que Ollama tourne (<code>ollama list</code>)</li>
|
||||
<li>Vérifiez l'URL (http://localhost:11434)</li>
|
||||
<li>Vérifiez que le modèle (ex: granite4:latest) est bien téléchargé</li>
|
||||
<li>Regardez le terminal du serveur Next.js pour plus de logs</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Database className="w-5 h-5" />
|
||||
Maintenance
|
||||
</CardTitle>
|
||||
<CardDescription>Outils pour maintenir la santé de votre base de données.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div>
|
||||
<h3 className="font-medium">Nettoyage des tags orphelins</h3>
|
||||
<p className="text-sm text-muted-foreground">Supprime les tags qui ne sont plus utilisés par aucune note.</p>
|
||||
</div>
|
||||
<Button variant="secondary" onClick={handleCleanup} disabled={cleanupLoading}>
|
||||
{cleanupLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Trash2 className="w-4 h-4 mr-2" />}
|
||||
Nettoyer
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user