431 lines
20 KiB
PHP
431 lines
20 KiB
PHP
<?php
|
||
/**
|
||
* Configuration des clés API pour le chatbot
|
||
* Interface de gestion pour les enseignants
|
||
*/
|
||
|
||
require_once '../config/config.php';
|
||
require_once '../config/database.php';
|
||
require_once '../config/session.php';
|
||
require_once '../config/api_key_manager.php';
|
||
|
||
// Vérifier authentification et type enseignant
|
||
if (!SessionManager::isLoggedIn() || !SessionManager::isEnseignant()) {
|
||
header('Location: ../login.php');
|
||
exit;
|
||
}
|
||
|
||
$user = SessionManager::getUser();
|
||
$db = Database::getInstance();
|
||
|
||
// Récupérer les clés API de l'enseignant
|
||
$api_keys = APIKeyManager::listKeys($user['id_utilisateur']);
|
||
|
||
// Récupérer le provider par défaut configuré
|
||
$default_config = $db->fetchOne(
|
||
"SELECT provider, model_default FROM chatbot_default_provider WHERE id_enseignant = ?",
|
||
[$user['id_utilisateur']]
|
||
);
|
||
|
||
// Si pas de config, initialiser avec Ollama
|
||
if (!$default_config) {
|
||
$db->query(
|
||
"INSERT INTO chatbot_default_provider (id_enseignant, provider, model_default) VALUES (?, 'ollama', 'ministral-3:3b')",
|
||
[$user['id_utilisateur']]
|
||
);
|
||
$default_config = ['provider' => 'ollama', 'model_default' => 'ministral-3:3b'];
|
||
}
|
||
|
||
$default_provider = $default_config['provider'];
|
||
$default_model = $default_config['model_default'];
|
||
|
||
// Récupérer les modèles disponibles groupés par provider
|
||
$models_by_provider = [];
|
||
$all_models = $db->fetchAll(
|
||
"SELECT * FROM available_models WHERE active = TRUE ORDER BY provider, recommended DESC, display_name"
|
||
);
|
||
|
||
foreach ($all_models as $model) {
|
||
$models_by_provider[$model['provider']][] = $model;
|
||
}
|
||
|
||
// Récupérer les statistiques d'utilisation (requête directe)
|
||
$stats = $db->fetchOne(
|
||
"SELECT
|
||
COUNT(DISTINCT cc.id) as total_conversations,
|
||
COUNT(cm.id) as total_messages,
|
||
cc.provider,
|
||
cc.model_used
|
||
FROM chat_conversations cc
|
||
LEFT JOIN chat_messages cm ON cm.id_conversation = cc.id
|
||
WHERE cc.id_enseignant = ?
|
||
GROUP BY cc.provider, cc.model_used
|
||
ORDER BY total_conversations DESC
|
||
LIMIT 1",
|
||
[$user['id_utilisateur']]
|
||
);
|
||
|
||
$stats_detail = $db->fetchAll(
|
||
"SELECT
|
||
cc.provider,
|
||
cc.model_used,
|
||
COUNT(DISTINCT cc.id) as conversations,
|
||
COUNT(cm.id) as messages,
|
||
DATE_FORMAT(cc.date_debut, '%Y-%m') as month
|
||
FROM chat_conversations cc
|
||
LEFT JOIN chat_messages cm ON cm.id_conversation = cc.id
|
||
WHERE cc.id_enseignant = ?
|
||
GROUP BY cc.provider, cc.model_used, month
|
||
ORDER BY month DESC, conversations DESC",
|
||
[$user['id_utilisateur']]
|
||
);
|
||
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Configuration API Chatbot - WebVal</title>
|
||
<link rel="stylesheet" href="../assets/css/chatbot_settings.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- Header -->
|
||
<header class="page-header">
|
||
<div class="header-content">
|
||
<a href="dashboard.php" class="back-link">← Retour au dashboard</a>
|
||
<h1>⚙️ Configuration API Chatbot</h1>
|
||
<p class="subtitle">Gérez vos clés API et choisissez les modèles pour vos évaluations</p>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Stats overview -->
|
||
<?php if ($stats): ?>
|
||
<div class="stats-banner">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">💬</div>
|
||
<div class="stat-content">
|
||
<div class="stat-value"><?= number_format($stats['total_conversations'] ?? 0) ?></div>
|
||
<div class="stat-label">Conversations</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">📨</div>
|
||
<div class="stat-content">
|
||
<div class="stat-value"><?= number_format($stats['total_messages'] ?? 0) ?></div>
|
||
<div class="stat-label">Messages</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">🤖</div>
|
||
<div class="stat-content">
|
||
<div class="stat-value"><?= htmlspecialchars($stats['provider'] ?? 'Aucun') ?></div>
|
||
<div class="stat-label">Provider actuel</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<!-- Main content -->
|
||
<div class="content-grid">
|
||
|
||
<!-- Section clés API -->
|
||
<section class="api-keys-section">
|
||
<div class="section-header">
|
||
<h2>🔑 Mes clés API</h2>
|
||
<button class="btn-primary" onclick="openAddKeyModal()">
|
||
➕ Ajouter une clé
|
||
</button>
|
||
</div>
|
||
|
||
<div class="keys-list">
|
||
<?php
|
||
$providers = ['gemini' => 'Gemini', 'mistral' => 'Mistral', 'openai' => 'OpenAI', 'ollama' => 'Ollama'];
|
||
$provider_icons = [
|
||
'gemini' => '✨',
|
||
'mistral' => '⚡',
|
||
'openai' => '🧠',
|
||
'ollama' => '🏠'
|
||
];
|
||
|
||
foreach ($providers as $provider_id => $provider_name):
|
||
$key_info = null;
|
||
foreach ($api_keys as $key) {
|
||
if ($key['provider'] === $provider_id) {
|
||
$key_info = $key;
|
||
break;
|
||
}
|
||
}
|
||
|
||
$is_configured = $key_info !== null;
|
||
$is_active = $is_configured && $key_info['is_active'];
|
||
?>
|
||
<div class="key-card <?= $is_active ? 'active' : 'inactive' ?>">
|
||
<div class="key-header">
|
||
<div class="key-provider">
|
||
<span class="provider-icon"><?= $provider_icons[$provider_id] ?></span>
|
||
<span class="provider-name"><?= $provider_name ?></span>
|
||
</div>
|
||
<div class="key-status">
|
||
<?php if ($is_active): ?>
|
||
<span class="status-badge active">🟢 Active</span>
|
||
<?php elseif ($is_configured): ?>
|
||
<span class="status-badge inactive">🟠 Désactivée</span>
|
||
<?php else: ?>
|
||
<span class="status-badge none">⚪ Aucune</span>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="key-body">
|
||
<?php if ($provider_id === 'ollama'): ?>
|
||
<!-- Card spéciale Ollama (pas de clé API nécessaire) -->
|
||
<div class="key-info">
|
||
<div class="info-row">
|
||
<span class="label">Type :</span>
|
||
<span class="value">🏠 Local (Jetson)</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="label">Modèle actuel :</span>
|
||
<span class="value"><?= $default_provider === 'ollama' ? htmlspecialchars($default_model) : 'ministral-3:3b' ?></span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="label">Coût :</span>
|
||
<span class="value">Gratuit ✅</span>
|
||
</div>
|
||
</div>
|
||
<div class="key-actions">
|
||
<button class="btn-secondary btn-sm" onclick="testConnection('ollama')">
|
||
🔍 Tester
|
||
</button>
|
||
<button class="btn-secondary btn-sm" onclick="configureOllama()">
|
||
⚙️ Changer le modèle
|
||
</button>
|
||
<?php if ($default_provider !== 'ollama'): ?>
|
||
<button class="btn-primary btn-sm" onclick="setAsDefault('ollama', 'ministral-3:3b')">
|
||
⭐ Définir par défaut
|
||
</button>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php elseif ($is_configured): ?>
|
||
<div class="key-info">
|
||
<div class="info-row">
|
||
<span class="label">Modèle par défaut :</span>
|
||
<span class="value"><?= htmlspecialchars($key_info['model_default'] ?? '-') ?></span>
|
||
</div>
|
||
<?php if ($key_info['quota_max']): ?>
|
||
<div class="info-row">
|
||
<span class="label">Quota :</span>
|
||
<span class="value">
|
||
<?= number_format($key_info['quota_used']) ?> / <?= number_format($key_info['quota_max']) ?>
|
||
<span class="quota-bar">
|
||
<span class="quota-fill" style="width: <?= min(100, ($key_info['quota_used'] / $key_info['quota_max']) * 100) ?>%"></span>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<?php endif; ?>
|
||
<div class="info-row">
|
||
<span class="label">Dernière utilisation :</span>
|
||
<span class="value">
|
||
<?= $key_info['last_used'] ? date('d/m/Y H:i', strtotime($key_info['last_used'])) : 'Jamais' ?>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="key-actions">
|
||
<button class="btn-secondary btn-sm" onclick="testConnection('<?= $provider_id ?>')">
|
||
🔍 Tester
|
||
</button>
|
||
<button class="btn-secondary btn-sm" onclick="editKey('<?= $provider_id ?>')">
|
||
✏️ Modifier
|
||
</button>
|
||
<?php if ($default_provider !== $provider_id): ?>
|
||
<button class="btn-primary btn-sm" onclick="setAsDefault('<?= $provider_id ?>', '<?= htmlspecialchars($key_info['model_default']) ?>')">
|
||
⭐ Définir par défaut
|
||
</button>
|
||
<?php endif; ?>
|
||
<button class="btn-danger btn-sm" onclick="deleteKey('<?= $provider_id ?>')">
|
||
🗑️ Supprimer
|
||
</button>
|
||
</div>
|
||
<?php else: ?>
|
||
<div class="key-empty">
|
||
<p>Aucune clé configurée pour <?= $provider_name ?></p>
|
||
<button class="btn-primary btn-sm" onclick="openAddKeyModal('<?= $provider_id ?>')">
|
||
➕ Ajouter
|
||
</button>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section modèles disponibles -->
|
||
<aside class="models-sidebar">
|
||
<div class="section-header">
|
||
<h3>📚 Modèles disponibles</h3>
|
||
</div>
|
||
|
||
<div class="models-list">
|
||
<?php foreach ($models_by_provider as $provider => $models): ?>
|
||
<div class="provider-group">
|
||
<h4><?= $provider_icons[$provider] ?? '🤖' ?> <?= ucfirst($provider) ?></h4>
|
||
<?php foreach ($models as $model): ?>
|
||
<div class="model-item <?= $model['recommended'] ? 'recommended' : '' ?>">
|
||
<div class="model-name">
|
||
<?= htmlspecialchars($model['display_name']) ?>
|
||
<?php if ($model['recommended']): ?>
|
||
<span class="badge-recommended">⭐</span>
|
||
<?php endif; ?>
|
||
</div>
|
||
<div class="model-meta">
|
||
<?php if ($model['is_free']): ?>
|
||
<span class="badge-free">🆓 Gratuit</span>
|
||
<?php else: ?>
|
||
<span class="badge-paid">💰 <?= number_format($model['cost_per_1m_tokens'], 2) ?>€/1M</span>
|
||
<?php endif; ?>
|
||
<span class="badge-speed">
|
||
<?php
|
||
$speed_icons = ['⏱️', '🐌', '🚶', '🏃', '🚀', '⚡'];
|
||
echo $speed_icons[$model['speed_rating']] ?? '🚶';
|
||
?>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
|
||
<div class="help-box">
|
||
<h4>💡 Recommandations</h4>
|
||
<ul>
|
||
<li><strong>Gemini 2.0 Flash</strong> : Gratuit, rapide, excellent pour les évaluations</li>
|
||
<li><strong>Ministral 8B</strong> : Bon rapport qualité/prix</li>
|
||
<li><strong>Ollama local</strong> : Gratuit mais 1 élève à la fois</li>
|
||
</ul>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
<!-- Section statistiques détaillées -->
|
||
<?php if (!empty($stats_detail)): ?>
|
||
<section class="stats-section">
|
||
<div class="section-header">
|
||
<h2>📊 Historique d'utilisation</h2>
|
||
</div>
|
||
<div class="stats-table-wrapper">
|
||
<table class="stats-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Mois</th>
|
||
<th>Provider</th>
|
||
<th>Modèle</th>
|
||
<th>Conversations</th>
|
||
<th>Messages</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<?php foreach ($stats_detail as $stat): ?>
|
||
<tr>
|
||
<td><?= date('M Y', strtotime($stat['month'] . '-01')) ?></td>
|
||
<td>
|
||
<span class="provider-badge">
|
||
<?= $provider_icons[$stat['provider']] ?? '🤖' ?>
|
||
<?= ucfirst($stat['provider']) ?>
|
||
</span>
|
||
</td>
|
||
<td><?= htmlspecialchars($stat['model_used']) ?></td>
|
||
<td><?= number_format($stat['conversations']) ?></td>
|
||
<td><?= number_format($stat['messages']) ?></td>
|
||
</tr>
|
||
<?php endforeach; ?>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<!-- Modal ajout/modification clé API -->
|
||
<div id="keyModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="modalTitle">Ajouter une clé API</h2>
|
||
<button class="modal-close" onclick="closeKeyModal()">×</button>
|
||
</div>
|
||
|
||
<form id="keyForm">
|
||
<input type="hidden" id="keyAction" value="add">
|
||
|
||
<div class="form-group">
|
||
<label for="provider">Provider *</label>
|
||
<select id="provider" name="provider" required onchange="updateModelsList()">
|
||
<option value="">-- Choisir --</option>
|
||
<option value="gemini">✨ Gemini (Google)</option>
|
||
<option value="mistral">⚡ Mistral</option>
|
||
<option value="openai">🧠 OpenAI</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="api_key">Clé API *</label>
|
||
<div class="input-with-button">
|
||
<input type="password" id="api_key" name="api_key" required
|
||
placeholder="AIza... ou sk-... ou votre clé">
|
||
<button type="button" class="btn-toggle-visibility" onclick="toggleKeyVisibility()">
|
||
👁️
|
||
</button>
|
||
</div>
|
||
<small class="help-text" id="keyHelp"></small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="model_default">Modèle par défaut *</label>
|
||
<select id="model_default" name="model_default" required>
|
||
<option value="">-- Sélectionner un provider d'abord --</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="set_quota" onchange="toggleQuotaInput()">
|
||
Limiter le quota mensuel
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-group" id="quotaGroup" style="display: none;">
|
||
<label for="quota_max">Limite mensuelle (requêtes)</label>
|
||
<input type="number" id="quota_max" name="quota_max" min="1" placeholder="ex: 1000">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn-secondary" onclick="closeKeyModal()">
|
||
Annuler
|
||
</button>
|
||
<button type="button" class="btn-test" onclick="testKeyBeforeSave()">
|
||
🔍 Tester la connexion
|
||
</button>
|
||
<button type="submit" class="btn-primary">
|
||
💾 Enregistrer
|
||
</button>
|
||
</div>
|
||
|
||
<div id="testResult" class="test-result" style="display: none;"></div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast notifications -->
|
||
<div id="toast-container"></div>
|
||
|
||
<script>
|
||
const models = <?= json_encode($models_by_provider) ?>;
|
||
const userId = <?= $user['id_utilisateur'] ?>;
|
||
</script>
|
||
<script src="../assets/js/chatbot_settings.js"></script>
|
||
</body>
|
||
</html>
|