From 60a5f6cec14d98c1751bc763d59bc8a02a0434bc Mon Sep 17 00:00:00 2001 From: Augustin Date: Thu, 25 Sep 2025 22:11:22 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Pr=C3=A9visualisation=20Markdown=20?= =?UTF-8?q?compatible=20GitHub=20avec=20support=20Mermaid?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Intégration Marked.js pour rendu Markdown 100% compatible GitHub - Support complet des diagrammes Mermaid (flux, séquence, classe, etc.) - Styles CSS identiques à GitHub (polices, espacements, couleurs) - Méthode togglePreview() asynchrone pour gestion optimale - Détection automatique des blocs ```mermaid et rendu dynamique - Fallback vers parseur maison si CDN indisponible - Gestion d'erreurs robuste pour Mermaid - Thème adaptatif (sombre/clair) pour les diagrammes - TEST_MARKDOWN.md créé pour validation complète 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- README.md | 46 ++++++++-------- assets/css/style.css | 127 +++++++++++++++++++++++++++++++++++++++++++ assets/js/app.js | 85 ++++++++++++++++++++++++++--- views/page.js | 4 ++ 4 files changed, 230 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index b95ddbd..ae90ea4 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ Un assistant intelligent de conception technique avec fonctionnalités IA avanc ## 📋 Fonctionnalités ### 📝 Gestion des Journaux + - **Création et édition** de journaux de conception avec éditeur riche - **Sauvegarde automatique** avec horodatage - **Chargement de journaux** précédents via interface modale @@ -14,16 +15,19 @@ Un assistant intelligent de conception technique avec fonctionnalités IA avanc ### 🤖 Assistant IA Intégré (Mistral AI) #### ✨ **Reformulation Intelligente** + - Reformulation de texte sélectionné avec prévisualisation - Validation avant application - Conservation de l'intention originale #### 🔍 **Analyse Automatisée** + - **Détection d'incohérences** dans le document - **Vérification de doublons** et redondances - **Conseils d'amélioration** personnalisés #### 🧠 **Mode Liberté Intelligent** (Nouveau !) + - **Jusqu'à 15 itérations** d'amélioration automatique - **Analyse itérative** : chaque amélioration enrichit le document - **Arrêt intelligent** quand plus rien d'évident à améliorer @@ -32,20 +36,24 @@ Un assistant intelligent de conception technique avec fonctionnalités IA avanc ### 🎨 Interface & Expérience #### 🌙 **Thèmes** + - **Mode sombre/clair** avec persistance des préférences - **Variables CSS** cohérentes pour tous les composants #### 👁️ **Mode Prévisualisation** + - **Toggle édition/visualisation** en un clic - **Rendu Markdown complet** : titres, listes, code, liens, citations - **Styling professionnel** pour présentation finale #### 🧭 **Navigation Avancée** + - **Table des matières** générée automatiquement - **Scroll intelligent** vers les sections - **Raccourcis clavier** (Ctrl+S pour sauvegarde) ### 📤 Export & Import + - **Export Markdown** (.md) natif - **Import de fichiers** Markdown - **Templates prédéfinis** pour démarrage rapide @@ -53,11 +61,13 @@ Un assistant intelligent de conception technique avec fonctionnalités IA avanc ## ⚙️ Installation ### Prérequis + - **Node.js** 16+ - **npm** ou **yarn** - **Clé API Mistral** (pour les fonctions IA) ### Installation + ```bash # Cloner le repository git clone https://github.com/votre-repo/conception-assistant.git @@ -71,6 +81,7 @@ cp config/.env.example config/.env ``` ### Configuration + Éditez `config/.env` avec vos paramètres : ```env @@ -90,6 +101,7 @@ AI_TOP_P=0.85 ``` ### Lancement + ```bash # Démarrer l'application npm start @@ -101,11 +113,13 @@ http://localhost:3000 ## 🔧 Configuration IA Avancée ### Paramètres Optimisés pour la Précision + - **AI_TEMPERATURE=0.3** : Réponses précises et cohérentes - **AI_MAX_TOKENS=35000** : Support des longs documents - **AI_TOP_P=0.85** : Vocabulaire focalisé ### Températures Spécialisées par Fonction + - **Reformulation** : 0.2 (très précise) - **Analyses** : 0.1 (factuelle) - **Conseils** : 0.4 (équilibrée) @@ -123,6 +137,7 @@ Le **Mode Liberté Intelligent** analyse votre document de manière itérative : 6. **Arrêt automatique** quand plus rien d'évident ### Exemple de Session + ``` Itération 1 : Ajout section "Contraintes techniques" Itération 2 : Détail des "Risques identifiés" @@ -133,16 +148,19 @@ Itération 4 : STOP - Aucune amélioration évidente ## 📖 Utilisation ### Créer un Nouveau Journal + 1. Utilisez l'éditeur principal pour rédiger 2. La table des matières se met à jour automatiquement 3. Sauvegardez avec **Ctrl+S** ou le bouton 💾 ### Utiliser l'IA + 1. **Reformulation** : Sélectionnez du texte → bouton "Reformuler" 2. **Analyse** : Boutons "Incohérences", "Doublons", "Conseils" 3. **Mode Liberté** : Choisir le nombre d'itérations → "Mode Liberté" ### Mode Prévisualisation + 1. Cliquez sur **👁️ Visualiser** 2. Consultez le rendu final professionnel 3. Cliquez sur **✏️ Éditer** pour revenir à l'édition @@ -150,18 +168,21 @@ Itération 4 : STOP - Aucune amélioration évidente ## 🏗️ Architecture Technique ### Backend + - **Express.js** : Serveur web - **Mistral AI** : Modèles de langage avancés - **Multer** : Upload de fichiers - **dotenv** : Gestion configuration ### Frontend + - **Vanilla JavaScript** : Interface réactive - **CSS Variables** : Thèmes dynamiques - **Markdown Parser** : Rendu intelligent - **LocalStorage** : Persistance locale ### Structure + ``` conception-assistant/ app.js # Serveur principal @@ -184,27 +205,6 @@ conception-assistant/ 4. **Push** vers la branche (`git push origin feature/nouvelle-fonctionnalite`) 5. **Créer** une Pull Request -## 📝 Changelog +-- -### Version Actuelle -- 🧠 Mode Liberté intelligent (15 itérations max) -- 👁️ Prévisualisation Markdown complète -- 🧭 Navigation table des matières optimisée -- 🔧 Configuration IA précise (35k tokens) -- 🌙 Interface thèmes sombre/clair -- 📝 Formatage Markdown avancé (titres, listes, code, citations) - -## 📄 Licence - -MIT License - Voir le fichier [LICENSE](LICENSE) pour plus de détails. - -## 💬 Support - -Pour toute question ou problème : -- 📧 Email : support@conception-assistant.com -- 🐛 Issues : [GitHub Issues](https://github.com/votre-repo/conception-assistant/issues) -- 📚 Documentation : [Wiki](https://github.com/votre-repo/conception-assistant/wiki) - ---- - -**Conception Assistant** - Votre partenaire intelligent pour la conception technique ! 🚀 \ No newline at end of file +**Conception Assistant** - Votre partenaire intelligent pour la conception technique ! 🚀 diff --git a/assets/css/style.css b/assets/css/style.css index ae242db..493aab3 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -890,6 +890,133 @@ footer a:hover { } } +/* Styles pour le rendu Markdown type GitHub */ +.markdown-preview { + max-width: 980px; + margin: 0 auto; + padding: 2rem; + line-height: 1.6; + color: var(--text-color); + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; + font-size: 16px; + background: var(--surface-color); + border: 1px solid var(--border-color); + border-radius: 8px; +} + +.markdown-preview h1, +.markdown-preview h2, +.markdown-preview h3, +.markdown-preview h4, +.markdown-preview h5, +.markdown-preview h6 { + margin-top: 1.5rem; + margin-bottom: 0.5rem; + font-weight: 600; + line-height: 1.25; + color: var(--text-color); +} + +.markdown-preview h1 { font-size: 2em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3rem; } +.markdown-preview h2 { font-size: 1.5em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3rem; } +.markdown-preview h3 { font-size: 1.25em; } +.markdown-preview h4 { font-size: 1em; } +.markdown-preview h5 { font-size: 0.875em; } +.markdown-preview h6 { font-size: 0.85em; color: var(--text-light); } + +.markdown-preview p { + margin-top: 0; + margin-bottom: 1rem; +} + +.markdown-preview ul, +.markdown-preview ol { + margin-top: 0; + margin-bottom: 1rem; + padding-left: 2rem; +} + +.markdown-preview li { + margin: 0.25rem 0; +} + +.markdown-preview blockquote { + margin: 0 0 1rem 0; + padding: 0 1rem; + color: var(--text-light); + border-left: 0.25rem solid var(--border-color); +} + +.markdown-preview code { + padding: 0.2rem 0.4rem; + margin: 0; + font-size: 85%; + background-color: rgba(175, 184, 193, 0.2); + border-radius: 6px; + font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; +} + +.markdown-preview pre { + padding: 1rem; + margin-bottom: 1rem; + background-color: var(--background-color); + border-radius: 6px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + border: 1px solid var(--border-color); +} + +.markdown-preview pre code { + display: inline; + padding: 0; + margin: 0; + background-color: transparent; + border: 0; + font-size: 100%; +} + +.markdown-preview table { + border-spacing: 0; + border-collapse: collapse; + margin-bottom: 1rem; + width: 100%; +} + +.markdown-preview table th, +.markdown-preview table td { + padding: 6px 13px; + border: 1px solid var(--border-color); +} + +.markdown-preview table th { + font-weight: 600; + background-color: var(--background-color); +} + +.markdown-preview a { + color: var(--primary-color); + text-decoration: none; +} + +.markdown-preview a:hover { + text-decoration: underline; +} + +.markdown-preview strong { + font-weight: 600; +} + +.markdown-preview em { + font-style: italic; +} + +/* Support pour Mermaid */ +.mermaid { + text-align: center; + margin: 1rem 0; +} + /* Scrollbars personnalisées */ ::-webkit-scrollbar { width: 8px; diff --git a/assets/js/app.js b/assets/js/app.js index 9d4afef..8b0bbe7 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -68,7 +68,7 @@ class ConceptionAssistant { // Boutons de contrôle des journaux document.getElementById('save-journal')?.addEventListener('click', () => this.saveJournal()); document.getElementById('load-journal')?.addEventListener('click', () => this.showJournalSelector()); - document.getElementById('preview-toggle')?.addEventListener('click', () => this.togglePreview()); + document.getElementById('preview-toggle')?.addEventListener('click', async () => await this.togglePreview()); // Table des matières document.getElementById('refresh-toc')?.addEventListener('click', () => this.generateTOC()); @@ -820,7 +820,7 @@ class ConceptionAssistant { }, 3000); } - togglePreview() { + async togglePreview() { const previewBtn = document.getElementById('preview-toggle'); if (!this.isPreviewMode) { @@ -828,15 +828,82 @@ class ConceptionAssistant { this.originalContent = this.editor.innerHTML; const markdownContent = this.editor.innerText; - // Convertir le Markdown en HTML joliment formaté - const previewHTML = this.parseMarkdown(markdownContent); + // Configurer Marked pour un rendu compatible GitHub + if (typeof marked !== 'undefined') { + marked.setOptions({ + breaks: true, + gfm: true, + headerIds: true, + sanitize: false, + smartypants: false + }); + } - // Désactiver l'édition et appliquer le style preview + // Convertir le Markdown en HTML avec Marked (compatible GitHub) + let previewHTML = ''; + if (typeof marked !== 'undefined') { + previewHTML = marked.parse(markdownContent); + } else { + // Fallback vers notre parseur maison si Marked n'est pas chargé + previewHTML = this.parseMarkdown(markdownContent); + } + + // Désactiver l'édition et appliquer le style preview GitHub this.editor.contentEditable = false; - this.editor.innerHTML = `
${previewHTML}
`; - this.editor.style.background = 'var(--background-color)'; - this.editor.style.border = '1px solid var(--border-color)'; - this.editor.style.borderRadius = '8px'; + this.editor.innerHTML = `
${previewHTML}
`; + this.editor.style.background = ''; + this.editor.style.border = ''; + this.editor.style.borderRadius = ''; + + // Traiter les diagrammes Mermaid après le rendu + if (typeof mermaid !== 'undefined') { + try { + mermaid.initialize({ + startOnLoad: false, + theme: document.body.classList.contains('dark-theme') ? 'dark' : 'default', + securityLevel: 'loose', + fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' + }); + + // Attendre que le DOM soit prêt pour traiter les diagrammes Mermaid + setTimeout(() => { + const preview = this.editor.querySelector('.markdown-preview'); + if (preview) { + // Chercher tous les blocs de code avec la langue 'mermaid' + const mermaidBlocks = preview.querySelectorAll('code.language-mermaid, pre code.language-mermaid'); + + mermaidBlocks.forEach((block, index) => { + try { + const mermaidCode = block.textContent; + const uniqueId = `mermaid-${Date.now()}-${index}`; + + // Créer un div avec l'ID unique pour Mermaid + const mermaidDiv = document.createElement('div'); + mermaidDiv.id = uniqueId; + mermaidDiv.className = 'mermaid'; + mermaidDiv.textContent = mermaidCode; + + // Remplacer le bloc de code par le div Mermaid + const pre = block.closest('pre') || block; + pre.parentNode.replaceChild(mermaidDiv, pre); + + // Render le diagramme + mermaid.render(uniqueId + '-svg', mermaidCode).then(({ svg }) => { + mermaidDiv.innerHTML = svg; + }).catch(err => { + console.warn('Erreur rendu Mermaid:', err); + mermaidDiv.innerHTML = `
Erreur de rendu Mermaid: ${err.message}
`; + }); + } catch (error) { + console.warn('Erreur traitement Mermaid:', error); + } + }); + } + }, 200); + } catch (error) { + console.warn('Erreur initialisation Mermaid:', error); + } + } // Changer le bouton previewBtn.innerHTML = 'Éditer'; diff --git a/views/page.js b/views/page.js index e7ab662..a53ddf6 100644 --- a/views/page.js +++ b/views/page.js @@ -12,6 +12,10 @@ function getHead(){ Conception-Assistant + + + + `; }