225 lines
11 KiB
PHP
Executable File
225 lines
11 KiB
PHP
Executable File
<?php
|
|
header('Content-Type: text/html; charset=UTF-8');
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html data-theme="dark" lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WEVAL MIND GPTs - Assistants Personnalisés</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #fff; min-height: 100vh; }
|
|
.header { background: rgba(0,0,0,0.3); padding: 20px 30px; display: flex; align-items: center; justify-content: space-between; }
|
|
.header h1 { color: #00d4ff; }
|
|
.header a { color: #00d4ff; text-decoration: none; }
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 30px; }
|
|
.search-bar { display: flex; gap: 15px; margin-bottom: 30px; }
|
|
.search-bar input { flex: 1; padding: 15px 20px; border-radius: 10px; border: 1px solid rgba(0,212,255,0.3); background: rgba(0,0,0,0.3); color: #fff; font-size: 16px; }
|
|
.search-bar select { padding: 15px; border-radius: 10px; border: 1px solid rgba(0,212,255,0.3); background: rgba(0,0,0,0.3); color: #fff; }
|
|
.search-bar button { padding: 15px 25px; border-radius: 10px; border: none; background: #00d4ff; color: #000; font-weight: bold; cursor: pointer; }
|
|
.categories { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
|
|
.category-btn { padding: 10px 20px; border-radius: 20px; border: 1px solid rgba(0,212,255,0.3); background: transparent; color: #888; cursor: pointer; transition: all 0.3s; }
|
|
.category-btn:hover, .category-btn.active { background: rgba(0,212,255,0.2); color: #00d4ff; border-color: #00d4ff; }
|
|
.personas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
|
|
.persona-card { background: rgba(255,255,255,0.05); border-radius: 15px; padding: 25px; border: 1px solid rgba(0,212,255,0.2); cursor: pointer; transition: all 0.3s; }
|
|
.persona-card:hover { transform: translateY(-5px); border-color: #00d4ff; box-shadow: 0 10px 30px rgba(0,212,255,0.2); }
|
|
.persona-icon { font-size: 48px; margin-bottom: 15px; }
|
|
.persona-name { font-size: 20px; font-weight: bold; margin-bottom: 8px; color: #fff; }
|
|
.persona-desc { color: #888; font-size: 14px; margin-bottom: 15px; line-height: 1.5; }
|
|
.persona-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #666; }
|
|
.persona-category { background: rgba(0,212,255,0.2); padding: 4px 10px; border-radius: 10px; color: #00d4ff; }
|
|
.persona-usage { color: #888; }
|
|
|
|
/* Modal Create */
|
|
.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 9999; align-items: center; justify-content: center; }
|
|
.modal-content { background: #1a1a2e; padding: 30px; border-radius: 15px; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; border: 2px solid #00d4ff; }
|
|
.modal-content h2 { color: #00d4ff; margin-bottom: 20px; }
|
|
.form-group { margin-bottom: 20px; }
|
|
.form-group label { display: block; margin-bottom: 8px; color: #888; }
|
|
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid rgba(0,212,255,0.3); background: rgba(0,0,0,0.3); color: #fff; }
|
|
.form-group textarea { min-height: 100px; resize: vertical; }
|
|
.modal-buttons { display: flex; gap: 15px; }
|
|
.modal-buttons button { flex: 1; padding: 15px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; }
|
|
.btn-primary { background: #00d4ff; color: #000; }
|
|
.btn-secondary { background: #333; color: #fff; }
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div>
|
|
<h1>🎭 WEVAL MIND GPTs</h1>
|
|
<a href="hamid-fullscreen.php">← Retour au chat</a>
|
|
</div>
|
|
<button onclick="openCreateModal()" style="background:#00d4ff;color:#000;border:none;padding:12px 25px;border-radius:8px;cursor:pointer;font-weight:bold;">+ Créer un GPT</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="search-bar">
|
|
<input type="text" id="searchInput" placeholder="Rechercher un assistant..." onkeyup="filterPersonas()">
|
|
<select id="categoryFilter" onchange="filterPersonas()">
|
|
<option value="">Toutes catégories</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="categories" id="categoryButtons"></div>
|
|
|
|
<div class="personas-grid" id="personasGrid"></div>
|
|
</div>
|
|
|
|
<!-- Modal Create -->
|
|
<div class="modal" id="createModal">
|
|
<div class="modal-content">
|
|
<h2>🎭 Créer un GPT personnalisé</h2>
|
|
<div class="form-group">
|
|
<label>Nom</label>
|
|
<input type="text" id="newName" placeholder="Mon Assistant Expert">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Icône (emoji)</label>
|
|
<input type="text" id="newIcon" placeholder="🤖" maxlength="2">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Description courte</label>
|
|
<input type="text" id="newDesc" placeholder="Expert en...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Catégorie</label>
|
|
<select id="newCategory">
|
|
<option value="custom">Custom</option>
|
|
<option value="development">Development</option>
|
|
<option value="marketing">Marketing</option>
|
|
<option value="analytics">Analytics</option>
|
|
<option value="education">Education</option>
|
|
<option value="email">Email</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Instructions système (System Prompt)</label>
|
|
<textarea id="newPrompt" placeholder="Tu es un expert en... Tu dois..."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Message de bienvenue</label>
|
|
<input type="text" id="newWelcome" placeholder="Bonjour! Comment puis-je vous aider?">
|
|
</div>
|
|
<div class="modal-buttons">
|
|
<button class="btn-secondary" onclick="closeCreateModal()">Annuler</button>
|
|
<button class="btn-primary" onclick="createPersona()">Créer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let allPersonas = [];
|
|
|
|
async function loadPersonas() {
|
|
const res = await fetch('hamid-personas.php?action=list');
|
|
const data = await res.json();
|
|
allPersonas = data.personas;
|
|
renderPersonas(allPersonas);
|
|
loadCategories();
|
|
}
|
|
|
|
async function loadCategories() {
|
|
const res = await fetch('hamid-personas.php?action=categories');
|
|
const data = await res.json();
|
|
|
|
const buttons = document.getElementById('categoryButtons');
|
|
const select = document.getElementById('categoryFilter');
|
|
|
|
buttons.innerHTML = '<button class="category-btn active" onclick="filterByCategory(\'\')">Tous</button>';
|
|
data.categories.forEach(cat => {
|
|
buttons.innerHTML += `<button class="category-btn" onclick="filterByCategory('${cat.category}')">${cat.category} (${cat.count})</button>`;
|
|
select.innerHTML += `<option value="${cat.category}">${cat.category}</option>`;
|
|
});
|
|
}
|
|
|
|
function renderPersonas(personas) {
|
|
const grid = document.getElementById('personasGrid');
|
|
grid.innerHTML = '';
|
|
|
|
personas.forEach(p => {
|
|
grid.innerHTML += `
|
|
<div class="persona-card" onclick="selectPersona('${p.slug}')">
|
|
<div class="persona-icon">${p.icon}</div>
|
|
<div class="persona-name">${p.name}</div>
|
|
<div class="persona-desc">${p.description}</div>
|
|
<div class="persona-meta">
|
|
<span class="persona-category">${p.category}</span>
|
|
<span class="persona-usage">📊 ${p.usage_count} utilisations</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
}
|
|
|
|
function filterPersonas() {
|
|
const search = document.getElementById('searchInput').value.toLowerCase();
|
|
const category = document.getElementById('categoryFilter').value;
|
|
|
|
let filtered = allPersonas;
|
|
if (search) {
|
|
filtered = filtered.filter(p => p.name.toLowerCase().includes(search) || p.description.toLowerCase().includes(search));
|
|
}
|
|
if (category) {
|
|
filtered = filtered.filter(p => p.category === category);
|
|
}
|
|
renderPersonas(filtered);
|
|
}
|
|
|
|
function filterByCategory(cat) {
|
|
document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));
|
|
event.target.classList.add('active');
|
|
document.getElementById('categoryFilter').value = cat;
|
|
filterPersonas();
|
|
}
|
|
|
|
function selectPersona(slug) {
|
|
// Rediriger vers le chat avec ce persona
|
|
window.location.href = 'hamid-fullscreen.php?persona=' + slug;
|
|
}
|
|
|
|
function openCreateModal() {
|
|
document.getElementById('createModal').style.display = 'flex';
|
|
}
|
|
|
|
function closeCreateModal() {
|
|
document.getElementById('createModal').style.display = 'none';
|
|
}
|
|
|
|
async function createPersona() {
|
|
const data = {
|
|
action: 'create',
|
|
name: document.getElementById('newName').value,
|
|
icon: document.getElementById('newIcon').value || '🤖',
|
|
description: document.getElementById('newDesc').value,
|
|
category: document.getElementById('newCategory').value,
|
|
system_prompt: document.getElementById('newPrompt').value,
|
|
welcome_message: document.getElementById('newWelcome').value
|
|
};
|
|
|
|
const res = await fetch('hamid-personas.php', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify(data)
|
|
});
|
|
const result = await res.json();
|
|
|
|
if (result.success) {
|
|
alert('GPT créé avec succès!');
|
|
closeCreateModal();
|
|
loadPersonas();
|
|
} else {
|
|
alert('Erreur: ' + result.error);
|
|
}
|
|
}
|
|
|
|
loadPersonas();
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|