278 lines
14 KiB
PHP
278 lines
14 KiB
PHP
<?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 Canvas - Éditeur IA</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Segoe UI', sans-serif; background: #1a1a2e; color: #fff; height: 100vh; display: flex; flex-direction: column; }
|
|
.header { background: rgba(0,0,0,0.5); padding: 15px 25px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0,212,255,0.2); }
|
|
.header h1 { color: #00d4ff; font-size: 20px; }
|
|
.header-actions { display: flex; gap: 10px; }
|
|
.header-actions button { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; }
|
|
.btn-ai { background: linear-gradient(135deg, #00d4ff, #9f7aea); color: #000; font-weight: bold; }
|
|
.btn-export { background: #48bb78; color: #fff; }
|
|
.btn-clear { background: #f56565; color: #fff; }
|
|
.main { display: flex; flex: 1; overflow: hidden; }
|
|
.editor-panel { flex: 2; display: flex; flex-direction: column; border-right: 1px solid rgba(0,212,255,0.2); }
|
|
.ai-panel { flex: 1; display: flex; flex-direction: column; min-width: 350px; }
|
|
.editor-toolbar { background: rgba(0,0,0,0.3); padding: 10px 15px; display: flex; gap: 10px; flex-wrap: wrap; }
|
|
.editor-toolbar button { padding: 8px 12px; border-radius: 5px; border: 1px solid #444; background: transparent; color: #fff; cursor: pointer; font-size: 12px; }
|
|
.editor-toolbar button:hover { background: rgba(0,212,255,0.2); border-color: #00d4ff; }
|
|
.editor-toolbar select { padding: 8px; border-radius: 5px; border: 1px solid #444; background: #222; color: #fff; }
|
|
#editor { flex: 1; padding: 30px; font-size: 16px; line-height: 1.8; background: #16213e; color: #e0e0e0; border: none; outline: none; resize: none; font-family: 'Georgia', serif; }
|
|
.ai-header { background: rgba(0,0,0,0.3); padding: 15px; border-bottom: 1px solid rgba(0,212,255,0.2); }
|
|
.ai-header h3 { color: #00d4ff; font-size: 14px; }
|
|
.ai-suggestions { flex: 1; overflow-y: auto; padding: 15px; }
|
|
.suggestion-btn { display: block; width: 100%; padding: 12px 15px; margin-bottom: 10px; border-radius: 8px; border: 1px solid rgba(0,212,255,0.3); background: rgba(0,0,0,0.2); color: #fff; text-align: left; cursor: pointer; font-size: 13px; transition: all 0.2s; }
|
|
.suggestion-btn:hover { background: rgba(0,212,255,0.15); border-color: #00d4ff; }
|
|
.ai-input { padding: 15px; border-top: 1px solid rgba(0,212,255,0.2); }
|
|
.ai-input textarea { 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; resize: none; height: 80px; }
|
|
.ai-input button { width: 100%; margin-top: 10px; padding: 12px; border-radius: 8px; border: none; background: #00d4ff; color: #000; font-weight: bold; cursor: pointer; }
|
|
.word-count { position: absolute; bottom: 10px; right: 20px; color: #666; font-size: 12px; }
|
|
.loading { text-align: center; padding: 20px; color: #00d4ff; }
|
|
.version-history { max-height: 200px; overflow-y: auto; }
|
|
.version-item { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.1); cursor: pointer; font-size: 12px; }
|
|
.version-item:hover { background: rgba(0,212,255,0.1); }
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div>
|
|
<h1>🖼️ WEVAL MIND Canvas</h1>
|
|
<a href="hamid-fullscreen.php" style="color:#888;text-decoration:none;font-size:12px;">← Retour au chat</a>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="btn-ai" onclick="improveAll()">✨ Améliorer tout</button>
|
|
<button class="btn-export" onclick="exportDoc()">📄 Exporter</button>
|
|
<button class="btn-clear" onclick="clearEditor()">🗑️ Effacer</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<div class="editor-panel">
|
|
<div class="editor-toolbar">
|
|
<button onclick="formatText('bold')"><b>B</b></button>
|
|
<button onclick="formatText('italic')"><i>I</i></button>
|
|
<button onclick="formatText('heading')">H1</button>
|
|
<button onclick="formatText('list')">• Liste</button>
|
|
<button onclick="formatText('code')">{'<>'}</button>
|
|
<select onchange="changeTone(this.value)">
|
|
<option value="">Ton...</option>
|
|
<option value="professional">Professionnel</option>
|
|
<option value="casual">Décontracté</option>
|
|
<option value="formal">Formel</option>
|
|
<option value="friendly">Amical</option>
|
|
</select>
|
|
<select onchange="changeLength(this.value)">
|
|
<option value="">Longueur...</option>
|
|
<option value="shorter">Plus court</option>
|
|
<option value="longer">Plus long</option>
|
|
<option value="concise">Concis</option>
|
|
</select>
|
|
</div>
|
|
<textarea id="editor" placeholder="Commencez à écrire ou collez votre texte ici...
|
|
|
|
L'IA vous aidera à:
|
|
- Améliorer le style
|
|
- Corriger la grammaire
|
|
- Reformuler
|
|
- Traduire
|
|
- Développer vos idées"></textarea>
|
|
<div class="word-count" id="wordCount">0 mots</div>
|
|
</div>
|
|
|
|
<div class="ai-panel">
|
|
<div class="ai-header">
|
|
<h3>🤖 Assistant IA</h3>
|
|
</div>
|
|
<div class="ai-suggestions" id="suggestions">
|
|
<button class="suggestion-btn" onclick="aiAction('improve')">✨ Améliorer le style</button>
|
|
<button class="suggestion-btn" onclick="aiAction('grammar')">📝 Corriger grammaire</button>
|
|
<button class="suggestion-btn" onclick="aiAction('simplify')">🎯 Simplifier</button>
|
|
<button class="suggestion-btn" onclick="aiAction('expand')">📖 Développer</button>
|
|
<button class="suggestion-btn" onclick="aiAction('summarize')">📋 Résumer</button>
|
|
<button class="suggestion-btn" onclick="aiAction('translate_en')">🇬🇧 Traduire en anglais</button>
|
|
<button class="suggestion-btn" onclick="aiAction('translate_fr')">🇫🇷 Traduire en français</button>
|
|
<button class="suggestion-btn" onclick="aiAction('professional')">👔 Ton professionnel</button>
|
|
<button class="suggestion-btn" onclick="aiAction('creative')">🎨 Plus créatif</button>
|
|
<button class="suggestion-btn" onclick="aiAction('seo')">🔍 Optimiser SEO</button>
|
|
</div>
|
|
<div class="ai-input">
|
|
<textarea id="customPrompt" placeholder="Instruction personnalisée pour l'IA..."></textarea>
|
|
<button onclick="customAiAction()">🚀 Appliquer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const editor = document.getElementById('editor');
|
|
let versions = [];
|
|
|
|
// Word count
|
|
editor.addEventListener('input', () => {
|
|
const words = editor.value.trim().split(/\s+/).filter(w => w).length;
|
|
document.getElementById('wordCount').textContent = words + ' mots';
|
|
});
|
|
|
|
// Save version
|
|
function saveVersion() {
|
|
versions.push({
|
|
text: editor.value,
|
|
time: new Date().toLocaleTimeString()
|
|
});
|
|
if (versions.length > 20) versions.shift();
|
|
}
|
|
|
|
// AI Actions
|
|
async function aiAction(action) {
|
|
const text = editor.value;
|
|
if (!text.trim()) {
|
|
alert('Écrivez d\'abord quelque chose!');
|
|
return;
|
|
}
|
|
|
|
saveVersion();
|
|
|
|
const prompts = {
|
|
'improve': 'Améliore le style de ce texte, rends-le plus fluide et engageant tout en gardant le sens:',
|
|
'grammar': 'Corrige uniquement les fautes de grammaire et d\'orthographe de ce texte:',
|
|
'simplify': 'Simplifie ce texte pour le rendre plus facile à comprendre:',
|
|
'expand': 'Développe ce texte avec plus de détails et d\'exemples:',
|
|
'summarize': 'Résume ce texte en gardant les points essentiels:',
|
|
'translate_en': 'Traduis ce texte en anglais de manière professionnelle:',
|
|
'translate_fr': 'Traduis ce texte en français de manière professionnelle:',
|
|
'professional': 'Réécris ce texte avec un ton professionnel et formel:',
|
|
'creative': 'Réécris ce texte de manière plus créative et engageante:',
|
|
'seo': 'Optimise ce texte pour le SEO avec des mots-clés pertinents:'
|
|
};
|
|
|
|
await processWithAI(prompts[action] + '\n\n' + text);
|
|
}
|
|
|
|
async function customAiAction() {
|
|
const text = editor.value;
|
|
const prompt = document.getElementById('customPrompt').value;
|
|
if (!prompt.trim()) {
|
|
alert('Entrez une instruction!');
|
|
return;
|
|
}
|
|
saveVersion();
|
|
await processWithAI(prompt + '\n\n' + text);
|
|
}
|
|
|
|
async function processWithAI(prompt) {
|
|
const suggestions = document.getElementById('suggestions');
|
|
suggestions.innerHTML = '<div class="loading">⏳ L\'IA travaille...</div>';
|
|
|
|
try {
|
|
const res = await fetch('hamid-api.php', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
message: prompt + '\n\nRéponds UNIQUEMENT avec le texte amélioré, sans commentaires ni explications.',
|
|
provider: 'cerebras',
|
|
session_id: 'canvas_' + Date.now()
|
|
})
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.response) {
|
|
// Clean response
|
|
let newText = data.response
|
|
.replace(/^(Voici|Voilà|Bien sûr|D'accord)[^:]*:/i, '')
|
|
.replace(/^```[\w]*\n?/gm, '')
|
|
.replace(/```$/gm, '')
|
|
.trim();
|
|
|
|
editor.value = newText;
|
|
editor.dispatchEvent(new Event('input'));
|
|
|
|
suggestions.innerHTML = `
|
|
<div style="padding:15px;background:rgba(0,255,150,0.1);border-radius:8px;margin-bottom:15px;">
|
|
✅ Texte mis à jour!<br>
|
|
<small style="color:#888">${data.provider} - ${data.duration}ms</small>
|
|
</div>
|
|
<button class="suggestion-btn" onclick="undoLast()">↩️ Annuler</button>
|
|
<button class="suggestion-btn" onclick="aiAction('improve')">✨ Améliorer encore</button>
|
|
<button class="suggestion-btn" onclick="aiAction('grammar')">📝 Vérifier grammaire</button>
|
|
`;
|
|
}
|
|
} catch (e) {
|
|
suggestions.innerHTML = '<div style="color:#f56565;padding:15px;">❌ Erreur: ' + e.message + '</div>';
|
|
}
|
|
}
|
|
|
|
function undoLast() {
|
|
if (versions.length > 0) {
|
|
editor.value = versions.pop().text;
|
|
editor.dispatchEvent(new Event('input'));
|
|
}
|
|
}
|
|
|
|
async function improveAll() {
|
|
await aiAction('improve');
|
|
}
|
|
|
|
function formatText(format) {
|
|
const start = editor.selectionStart;
|
|
const end = editor.selectionEnd;
|
|
const selected = editor.value.substring(start, end);
|
|
|
|
let replacement = selected;
|
|
switch(format) {
|
|
case 'bold': replacement = '**' + selected + '**'; break;
|
|
case 'italic': replacement = '*' + selected + '*'; break;
|
|
case 'heading': replacement = '# ' + selected; break;
|
|
case 'list': replacement = '• ' + selected; break;
|
|
case 'code': replacement = '`' + selected + '`'; break;
|
|
}
|
|
|
|
editor.value = editor.value.substring(0, start) + replacement + editor.value.substring(end);
|
|
}
|
|
|
|
async function changeTone(tone) {
|
|
if (!tone) return;
|
|
saveVersion();
|
|
await processWithAI(`Réécris ce texte avec un ton ${tone}:\n\n${editor.value}`);
|
|
}
|
|
|
|
async function changeLength(length) {
|
|
if (!length) return;
|
|
saveVersion();
|
|
const prompts = {
|
|
'shorter': 'Raccourcis ce texte de moitié en gardant l\'essentiel:',
|
|
'longer': 'Développe ce texte en ajoutant plus de détails:',
|
|
'concise': 'Rends ce texte plus concis et direct:'
|
|
};
|
|
await processWithAI(prompts[length] + '\n\n' + editor.value);
|
|
}
|
|
|
|
function exportDoc() {
|
|
const text = editor.value;
|
|
const blob = new Blob([text], {type: 'text/plain'});
|
|
const a = document.createElement('a');
|
|
a.href = URL.createObjectURL(blob);
|
|
a.download = 'hamid-canvas-' + Date.now() + '.txt';
|
|
a.click();
|
|
}
|
|
|
|
function clearEditor() {
|
|
if (confirm('Effacer tout le contenu?')) {
|
|
saveVersion();
|
|
editor.value = '';
|
|
editor.dispatchEvent(new Event('input'));
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|