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
+
+
+
+
`;
}