371 lines
23 KiB
PHP
Executable File
371 lines
23 KiB
PHP
Executable File
<?php header('Content-Type: text/html; charset=UTF-8'); ?>
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WEVAL MIND - Hub IA</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 100%); color: #fff; min-height: 100vh; padding: 40px 20px; }
|
|
.container { max-width: 1200px; margin: 0 auto; }
|
|
h1 { text-align: center; font-size: 3rem; margin-bottom: 10px; background: linear-gradient(90deg, #9f7aea, #00d4ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.subtitle { text-align: center; color: #888; margin-bottom: 20px; }
|
|
.help-btn { display: block; margin: 0 auto 30px; padding: 12px 30px; background: linear-gradient(90deg, #9f7aea, #667eea); border: none; border-radius: 25px; color: #fff; font-size: 1rem; cursor: pointer; transition: all 0.3s; }
|
|
.help-btn:hover { transform: scale(1.05); box-shadow: 0 5px 20px rgba(159,122,234,0.4); }
|
|
.btn-group { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; }
|
|
.test-btn { padding: 12px 30px; background: linear-gradient(90deg, #10b981, #059669); border: none; border-radius: 25px; color: #fff; font-size: 1rem; cursor: pointer; transition: all 0.3s; }
|
|
.test-btn:hover { transform: scale(1.05); box-shadow: 0 5px 20px rgba(16,185,129,0.4); }
|
|
.test-summary { display: flex; gap: 20px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; }
|
|
.test-stat { background: rgba(255,255,255,0.1); padding: 20px 30px; border-radius: 15px; text-align: center; }
|
|
.test-stat .number { font-size: 2.5rem; font-weight: bold; }
|
|
.test-stat .label { color: #888; font-size: 0.9rem; }
|
|
.test-stat.passed .number { color: #10b981; }
|
|
.test-stat.failed .number { color: #ef4444; }
|
|
.test-stat.rate .number { color: #00d4ff; }
|
|
.test-section { background: rgba(255,255,255,0.05); border-radius: 10px; padding: 20px; margin-bottom: 15px; }
|
|
.test-section-title { font-size: 1rem; color: #9f7aea; margin-bottom: 15px; }
|
|
.test-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #333; }
|
|
.test-item:last-child { border-bottom: none; }
|
|
.test-item .name { color: #ccc; }
|
|
.test-item .status { font-weight: bold; }
|
|
.test-item .status.pass { color: #10b981; }
|
|
.test-item .status.fail { color: #ef4444; }
|
|
.test-item .details { color: #888; font-size: 0.85rem; }
|
|
.loading { text-align: center; padding: 50px; }
|
|
.loading .spinner { width: 50px; height: 50px; border: 4px solid #333; border-top-color: #9f7aea; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.modal-header.test-header { background: linear-gradient(90deg, #10b981, #059669); }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
|
|
.card { background: rgba(255,255,255,0.05); border-radius: 16px; padding: 25px; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s; text-decoration: none; color: #fff; }
|
|
.card:hover { transform: translateY(-5px); border-color: #9f7aea; background: rgba(159,122,234,0.1); }
|
|
.card-icon { font-size: 3rem; margin-bottom: 15px; }
|
|
.card-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 8px; }
|
|
.card-desc { color: #888; font-size: 0.9rem; line-height: 1.5; }
|
|
.card-tag { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; margin-top: 15px; }
|
|
.tag-web { background: #3b82f6; }
|
|
.tag-cli { background: #10b981; }
|
|
.tag-admin { background: #f59e0b; }
|
|
.section-title { font-size: 1.2rem; color: #9f7aea; margin: 40px 0 20px; padding-bottom: 10px; border-bottom: 1px solid #333; }
|
|
.cli-box { background: #111; border-radius: 10px; padding: 20px; margin-top: 40px; font-family: monospace; }
|
|
.cli-box code { color: #00ff00; }
|
|
|
|
/* Modal */
|
|
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 1000; overflow-y: auto; padding: 20px; }
|
|
.modal-content { background: #1a1a2e; border-radius: 20px; max-width: 1000px; margin: 20px auto; border: 2px solid #9f7aea; }
|
|
.modal-header { background: linear-gradient(90deg, #9f7aea, #667eea); padding: 20px 30px; border-radius: 18px 18px 0 0; display: flex; justify-content: space-between; align-items: center; }
|
|
.modal-header h2 { font-size: 1.5rem; }
|
|
.modal-close { background: rgba(255,255,255,0.2); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; }
|
|
.modal-close:hover { background: rgba(255,255,255,0.3); }
|
|
.modal-body { padding: 30px; }
|
|
.modal-body h3 { color: #9f7aea; font-size: 1.2rem; margin: 30px 0 15px; padding-bottom: 10px; border-bottom: 1px solid #333; }
|
|
.modal-body h3:first-child { margin-top: 0; }
|
|
.modal-body p { color: #ccc; line-height: 1.8; margin-bottom: 15px; }
|
|
.modal-body ul, .modal-body ol { color: #ccc; margin-left: 25px; line-height: 2; }
|
|
.modal-body li { margin-bottom: 8px; }
|
|
.schema { background: #0a0a1a; border-radius: 15px; padding: 25px; margin: 20px 0; font-family: monospace; font-size: 12px; line-height: 1.4; overflow-x: auto; border: 1px solid #333; }
|
|
.schema pre { color: #00d4ff; white-space: pre; }
|
|
.highlight { background: linear-gradient(90deg, rgba(159,122,234,0.2), transparent); padding: 15px 20px; border-left: 4px solid #9f7aea; margin: 20px 0; border-radius: 0 10px 10px 0; }
|
|
.provider-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
|
|
.provider-table th, .provider-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #333; }
|
|
.provider-table th { background: rgba(159,122,234,0.2); color: #9f7aea; }
|
|
.provider-table tr:hover { background: rgba(255,255,255,0.05); }
|
|
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; }
|
|
.badge-green { background: #10b981; color: #fff; }
|
|
.badge-blue { background: #3b82f6; color: #fff; }
|
|
.badge-yellow { background: #f59e0b; color: #000; }
|
|
.badge-red { background: #ef4444; color: #fff; }
|
|
.tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
|
|
.tab { padding: 10px 20px; background: #333; border: none; color: #fff; border-radius: 8px; cursor: pointer; transition: all 0.3s; }
|
|
.tab:hover, .tab.active { background: #9f7aea; }
|
|
.tab-content { display: none; }
|
|
.tab-content.active { display: block; }
|
|
.step { display: flex; gap: 15px; margin-bottom: 20px; align-items: flex-start; }
|
|
.step-num { background: #9f7aea; color: #fff; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }
|
|
.step-content { flex: 1; }
|
|
.step-content strong { color: #fff; }
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🤖 WEVAL MIND</h1>
|
|
<p class="subtitle">Hyper-Advanced Multi-Intelligence Director</p>
|
|
|
|
<div class="btn-group">
|
|
<button class="help-btn" onclick="showHelp()">❓ Aide & Documentation</button>
|
|
<button class="test-btn" onclick="runTests()">🧪 Lancer les Tests</button>
|
|
</div>
|
|
|
|
<div class="section-title">💬 INTERFACES CHAT</div>
|
|
<div class="grid">
|
|
<!-- btn-killed --></li>
|
|
<li>Entrer la clé API du provider souhaité</li>
|
|
<li>Sauvegarder - le provider devient automatiquement disponible</li>
|
|
</ol>
|
|
|
|
<div class="highlight">
|
|
<strong>💡 Astuce :</strong> Les providers gratuits (Cerebras, Groq, SambaNova, Cloudflare) offrent suffisamment de quota pour un usage normal. Les payants ne sont utilisés qu'en dernier recours ou sur demande explicite.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TAB: INTERFACES -->
|
|
<div id="tab-interfaces" class="tab-content">
|
|
<h3>🖥️ Les 6 Interfaces WEVAL MIND</h3>
|
|
|
|
<div class="schema">
|
|
<pre>
|
|
|
|
INTERFACES WEVAL MIND │
|
|
|
|
│
|
|
┌─────────────────────────────────────────────────────────────┐ │
|
|
│ 💬 WEVAL MIND CHAT (hamid-fullscreen.php) │ │
|
|
│ ───────────────────────────────────── │ │
|
|
│ Interface principale type ChatGPT │ │
|
|
│ ✓ Thinking visible ✓ Canvas mode ✓ Upload fichiers │ │
|
|
│ ✓ Génération PDF ✓ Historique ✓ Multi-provider │ │
|
|
│ 👉 RECOMMANDÉ pour usage quotidien │ │
|
|
└─────────────────────────────────────────────────────────────┘ │
|
|
│
|
|
┌─────────────────────────────────────────────────────────────┐ │
|
|
│ 🖥️ WEVAL MIND TERMINAL WEB (hamid-cli.php) │ │
|
|
│ ───────────────────────────────────── │ │
|
|
│ Terminal rétro dans navigateur │ │
|
|
│ ✓ Style hacker ✓ Commandes ✓ Historique │ │
|
|
│ 👉 Pour les fans d'interface terminal │ │
|
|
└─────────────────────────────────────────────────────────────┘ │
|
|
│
|
|
┌─────────────────────────────────────────────────────────────┐ │
|
|
│ 📟 WEVAL MIND SSH WEB (hamid-ssh.php) │ │
|
|
│ ───────────────────────────────────── │ │
|
|
│ Simulation SSH dans navigateur │ │
|
|
│ ✓ Style SSH ✓ Prompt ✓ Multi-session │ │
|
|
│ 👉 Pour simuler une connexion SSH │ │
|
|
└─────────────────────────────────────────────────────────────┘ │
|
|
│
|
|
┌─────────────────────────────────────────────────────────────┐ │
|
|
│ 💻 WEVAL MIND CODE (hamid-code/) │ │
|
|
│ ───────────────────────────────────── │ │
|
|
│ IDE style VS Code │ │
|
|
│ ✓ Coloration syntaxe ✓ Exécution code ✓ Multi-fichiers │ │
|
|
│ 👉 Pour développement et coding │ │
|
|
└─────────────────────────────────────────────────────────────┘ │
|
|
│
|
|
┌─────────────────────────────────────────────────────────────┐ │
|
|
│ 🔲 WEVAL MIND WIDGET (hamid-widget.php) │ │
|
|
│ ───────────────────────────────────── │ │
|
|
│ Chat compact intégrable │ │
|
|
│ ✓ Embed iframe ✓ Léger ✓ Customisable │ │
|
|
│ 👉 Pour intégrer dans d'autres pages │ │
|
|
└─────────────────────────────────────────────────────────────┘ │
|
|
│
|
|
┌─────────────────────────────────────────────────────────────┐ │
|
|
│ ⌨️ WEVAL MIND CLI RÉEL (/usr/local/bin/hamid) │ │
|
|
│ ───────────────────────────────────── │ │
|
|
│ Vrai CLI Python dans terminal SSH │ │
|
|
│ ✓ Accès serveur ✓ Commandes bash ✓ Auto-fallback │ │
|
|
│ 👉 Pour admins système via SSH │ │
|
|
│ │ │
|
|
│ Utilisation: ssh user@server puis taper "hamid" │ │
|
|
│ Commandes: /help /providers /use cloudflare /quit │ │
|
|
└─────────────────────────────────────────────────────────────┘ │
|
|
│
|
|
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TAB: API -->
|
|
<div id="tab-api" class="tab-content">
|
|
<h3>⚡ Utiliser l'API WEVAL MIND</h3>
|
|
|
|
<p>WEVAL MIND expose une API REST simple pour intégration dans vos applications.</p>
|
|
|
|
<h3>📤 Endpoint</h3>
|
|
<div class="schema">
|
|
<pre>
|
|
POST http://89.167.40.150:5821/hamid-api.php
|
|
Content-Type: application/json
|
|
</pre>
|
|
</div>
|
|
|
|
<h3>📝 Corps de la requête</h3>
|
|
<div class="schema">
|
|
<pre>
|
|
{
|
|
"message": "Votre question ici",
|
|
"provider": "cerebras", // Optionnel (défaut: auto)
|
|
"session_id": "unique_id", // Optionnel (pour historique)
|
|
"use_kb": true // Optionnel (utiliser Knowledge Base)
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<h3>📥 Réponse</h3>
|
|
<div class="schema">
|
|
<pre>
|
|
{
|
|
"response": "La réponse de l'IA...",
|
|
"provider": "cerebras",
|
|
"model": "llama3.1-8b",
|
|
"duration": 523,
|
|
"failover_used": false,
|
|
"original_provider": "cerebras",
|
|
"kb_count": 8,
|
|
"kb_titles": ["Doc1", "Doc2", ...]
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<h3>💻 Exemples</h3>
|
|
|
|
<p><strong>cURL:</strong></p>
|
|
<div class="schema">
|
|
<pre>
|
|
curl -X POST "http://89.167.40.150:5821/hamid-api.php" \
|
|
-H "Content-Type: application/json" \
|
|
-d '{"message":"Bonjour","provider":"cloudflare"}'
|
|
</pre>
|
|
</div>
|
|
|
|
<p><strong>JavaScript:</strong></p>
|
|
<div class="schema">
|
|
<pre>
|
|
const response = await fetch('http://89.167.40.150:5821/hamid-api.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
message: 'Bonjour',
|
|
provider: 'cerebras',
|
|
session_id: 'my_session'
|
|
})
|
|
});
|
|
const data = await response.json();
|
|
console.log(data.response);
|
|
</pre>
|
|
</div>
|
|
|
|
<p><strong>Python:</strong></p>
|
|
<div class="schema">
|
|
<pre>
|
|
import requests
|
|
|
|
response = requests.post(
|
|
'http://89.167.40.150:5821/hamid-api.php',
|
|
json={
|
|
'message': 'Bonjour',
|
|
'provider': 'cerebras'
|
|
}
|
|
)
|
|
print(response.json()['response'])
|
|
</pre>
|
|
</div>
|
|
|
|
<h3>📊 Endpoint Status</h3>
|
|
<div class="schema">
|
|
<pre>
|
|
GET http://89.167.40.150:5821/hamid-status.php
|
|
|
|
Retourne l'état de tous les providers avec leur priorité et status.
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showHelp() {
|
|
document.getElementById('helpModal').style.display = 'block';
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeHelp() {
|
|
document.getElementById('helpModal').style.display = 'none';
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
|
|
function showTab(tabId) {
|
|
// Hide all tabs
|
|
document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
|
|
// Show selected tab
|
|
document.getElementById('tab-' + tabId).classList.add('active');
|
|
event.target.classList.add('active');
|
|
}
|
|
|
|
// Close on click outside
|
|
document.getElementById('helpModal').addEventListener('click', function(e) {
|
|
if (e.target === this) closeHelp();
|
|
});
|
|
|
|
async function repairAll() {
|
|
document.getElementById("testResults").innerHTML = "<div class=\"loading\"><div class=\"spinner\"></div><div>Réparation en cours...</div></div>";
|
|
try {
|
|
const response = await fetch("hamid-repair-api.php?action=repair_all");
|
|
const data = await response.json();
|
|
let html = "<div style=\"text-align:center;padding:30px;\"><div style=\"font-size:3rem;margin-bottom:20px;\">" + (data.success ? "✅" : "⚠️") + "</div><h3 style=\"color:#fff;margin-bottom:20px;\">" + data.message + "</h3><ul style=\"text-align:left;max-width:400px;margin:0 auto;color:#ccc;\">";
|
|
if (data.actions) { data.actions.forEach(a => { html += "<li>" + a + "</li>"; }); }
|
|
html += "</ul><button onclick=\"runTests()\" style=\"margin-top:20px;padding:12px 30px;background:linear-gradient(90deg,#10b981,#059669);border:none;border-radius:25px;color:#fff;cursor:pointer;\">🧪 Relancer les tests</button></div>";
|
|
document.getElementById("testResults").innerHTML = html;
|
|
} catch (error) {
|
|
document.getElementById("testResults").innerHTML = "<div style=\"color:#ef4444;text-align:center;padding:50px;\">Erreur: " + error.message + "</div>";
|
|
}
|
|
}
|
|
function closeTest() {
|
|
document.getElementById("testModal").style.display = "none";
|
|
document.body.style.overflow = "auto";
|
|
}
|
|
async function runTests() {
|
|
document.getElementById("testModal").style.display = "block";
|
|
document.body.style.overflow = "hidden";
|
|
document.getElementById("testResults").innerHTML = "<div class=\"loading\"><div class=\"spinner\"></div><div>Exécution des tests...</div></div>";
|
|
try {
|
|
const response = await fetch("hamid-test-api.php");
|
|
const data = await response.json();
|
|
displayTestResults(data);
|
|
} catch (error) {
|
|
document.getElementById("testResults").innerHTML = "<div style=\"color:#ef4444;text-align:center;padding:50px;\">Erreur: " + error.message + "</div>";
|
|
}
|
|
}
|
|
function displayTestResults(data) {
|
|
const s = data.summary;
|
|
let html = "<div class=\"test-summary\"><div class=\"test-stat passed\"><div class=\"number\">" + s.passed + "</div><div class=\"label\">Réussis</div></div><div class=\"test-stat failed\"><div class=\"number\">" + s.failed + "</div><div class=\"label\">Échoués</div></div><div class=\"test-stat rate\"><div class=\"number\">" + s.success_rate + "%</div><div class=\"label\">Taux</div></div></div>";
|
|
html += "<div class=\"test-section\"><div class=\"test-section-title\">🔌 Providers API</div>";
|
|
for (const [p, r] of Object.entries(data.providers)) { html += "<div class=\"test-item\"><span class=\"name\">" + p + "</span><span><span class=\"details\">" + r.duration + "ms</span> <span class=\"status " + (r.success ? "pass" : "fail") + "\">" + (r.success ? "✅" : "❌") + "</span></span></div>"; }
|
|
html += "</div><div class=\"test-section\"><div class=\"test-section-title\">📝 Syntaxe PHP</div>";
|
|
for (const [f, r] of Object.entries(data.php_syntax)) { html += "<div class=\"test-item\"><span class=\"name\">" + f + "</span><span class=\"status " + (r.success ? "pass" : "fail") + "\">" + (r.success ? "✅" : "❌") + "</span></div>"; }
|
|
html += "</div><div class=\"test-section\"><div class=\"test-section-title\">🌐 Accès HTTP</div>";
|
|
for (const [p, r] of Object.entries(data.http_access)) { html += "<div class=\"test-item\"><span class=\"name\">" + p + "</span><span><span class=\"details\">HTTP " + r.http_code + "</span> <span class=\"status " + (r.success ? "pass" : "fail") + "\">" + (r.success ? "✅" : "❌") + "</span></span></div>"; }
|
|
html += "</div>";
|
|
// Ajouter bouton réparation si échecs
|
|
if (s.failed > 0) {
|
|
html += "<div style=\"text-align:center;margin-top:20px;\"><button onclick=\"repairAll()\" style=\"padding:12px 30px;background:linear-gradient(90deg,#f59e0b,#d97706);border:none;border-radius:25px;color:#fff;font-size:1rem;cursor:pointer;\">🔧 Réparer automatiquement</button></div>";
|
|
}
|
|
html += "<div style=\"text-align:center;margin-top:15px;\"><button onclick=\"runTests()\" style=\"padding:8px 20px;background:#333;border:none;border-radius:15px;color:#fff;cursor:pointer;\">🔄 Relancer les tests</button></div>";
|
|
document.getElementById("testResults").innerHTML = html;
|
|
}
|
|
// Close on Escape
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') { closeHelp(); closeTest(); }
|
|
});
|
|
</script>
|
|
<!-- MODAL TESTS -->
|
|
<div class="modal" id="testModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header test-header">
|
|
<h2>🧪 Résultats des Tests</h2>
|
|
<button class="modal-close" onclick="closeTest()">×</button>
|
|
</div>
|
|
<div class="modal-body" id="testResults">
|
|
<div class="loading"><div class="spinner"></div><div>Chargement...</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|