StillHammer
4f60de68d6
- Fix BatchProcessor constructor to avoid server blocking during startup - Add comprehensive integration tests for all modular combinations - Enhance CLAUDE.md documentation with new test commands - Update SelectiveLayers configuration for better LLM allocation - Add AutoReporter system for test automation - Include production workflow validation tests 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
459 lines
48 KiB
HTML
459 lines
48 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Auto-Rapport TI - 9/16/2025, 11:30:43 PM</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }
|
|
.container { max-width: 1000px; margin: 0 auto; }
|
|
.header { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; }
|
|
.stat-card { background: white; padding: 15px; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
.stat-value { font-size: 1.8em; font-weight: bold; color: #2196F3; }
|
|
.stat-label { color: #666; margin-top: 5px; font-size: 14px; }
|
|
.test-list { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
.test-item { padding: 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background-color 0.2s; }
|
|
.test-item:hover { background: #f8f9fa; }
|
|
.test-item.clickable { border-left: 4px solid #4CAF50; }
|
|
.test-status { width: 12px; height: 12px; border-radius: 50%; margin-right: 10px; }
|
|
.status-passed { background: #4CAF50; }
|
|
.status-failed { background: #f44336; }
|
|
.llm-section { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 20px; }
|
|
.llm-call { background: #f9f9f9; padding: 10px; margin: 5px 0; border-radius: 4px; display: flex; justify-content: space-between; cursor: pointer; transition: background-color 0.2s; }
|
|
.llm-call:hover { background: #e8f4f8; }
|
|
.llm-call.clickable { border-left: 4px solid #2196F3; }
|
|
|
|
/* Modal styles */
|
|
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
|
|
#llmModal { z-index: 1100; } /* LLM modal au-dessus du test modal */
|
|
.modal-content { background-color: white; margin: 5% auto; padding: 20px; border-radius: 8px; width: 90%; max-width: 800px; max-height: 80vh; overflow-y: auto; }
|
|
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
|
|
.close:hover { color: black; }
|
|
.prompt-section, .response-section { margin: 15px 0; }
|
|
.prompt-section h4, .response-section h4 { color: #333; border-bottom: 2px solid #2196F3; padding-bottom: 5px; }
|
|
.prompt-content, .response-content { background: #f5f5f5; padding: 15px; border-radius: 4px; white-space: pre-wrap; font-family: monospace; font-size: 14px; max-height: 300px; overflow-y: auto; }
|
|
.response-content { background: #f0f8ff; }
|
|
|
|
/* Test details modal styles */
|
|
.test-details-section { margin: 15px 0; }
|
|
.test-details-section h4 { color: #333; border-bottom: 2px solid #4CAF50; padding-bottom: 5px; }
|
|
.test-llm-list { background: #f8f9fa; padding: 10px; border-radius: 4px; margin-top: 10px; }
|
|
.test-llm-item { background: white; margin: 5px 0; padding: 8px; border-radius: 3px; display: flex; justify-content: space-between; cursor: pointer; border: 1px solid #ddd; }
|
|
.test-llm-item:hover { background: #e8f4f8; }
|
|
.test-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 10px 0; }
|
|
.test-stat { background: #f0f0f0; padding: 8px; border-radius: 4px; text-align: center; }
|
|
.test-stat-value { font-weight: bold; color: #2196F3; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>📊 Auto-Rapport Tests d'Intégration</h1>
|
|
<p>Généré automatiquement le 9/16/2025, 11:30:43 PM</p>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div class="stat-card">
|
|
<div class="stat-value">5</div>
|
|
<div class="stat-label">Tests</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" style="color: #4CAF50">5</div>
|
|
<div class="stat-label">Réussis</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" style="color: #f44336">0</div>
|
|
<div class="stat-label">Échoués</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">8</div>
|
|
<div class="stat-label">LLM Calls</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">169s</div>
|
|
<div class="stat-label">Durée</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-list">
|
|
<h3>Résultats des Tests</h3>
|
|
|
|
<div class="test-item clickable" onclick="openTestModal(0)">
|
|
<div style="display: flex; align-items: center;">
|
|
<span class="test-status status-passed"></span>
|
|
<div>
|
|
<div><strong>lightEnhancement (rapide)</strong></div>
|
|
<div style="font-size: 12px; color: #666;">
|
|
1 LLM calls • 9s durée LLM
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div style="color: #4CAF50; font-weight: bold;">
|
|
✓ RÉUSSI
|
|
</div>
|
|
<div style="font-size: 10px; color: #2196F3; margin-top: 2px;">
|
|
🔍 Cliquer pour détails
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-item clickable" onclick="openTestModal(1)">
|
|
<div style="display: flex; align-items: center;">
|
|
<span class="test-status status-passed"></span>
|
|
<div>
|
|
<div><strong>standardEnhancement (complet)</strong></div>
|
|
<div style="font-size: 12px; color: #666;">
|
|
2 LLM calls • 59s durée LLM
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div style="color: #4CAF50; font-weight: bold;">
|
|
✓ RÉUSSI
|
|
</div>
|
|
<div style="font-size: 10px; color: #2196F3; margin-top: 2px;">
|
|
🔍 Cliquer pour détails
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-item clickable" onclick="openTestModal(2)">
|
|
<div style="display: flex; align-items: center;">
|
|
<span class="test-status status-passed"></span>
|
|
<div>
|
|
<div><strong>fullEnhancement (maximum)</strong></div>
|
|
<div style="font-size: 12px; color: #666;">
|
|
2 LLM calls • 47s durée LLM
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div style="color: #4CAF50; font-weight: bold;">
|
|
✓ RÉUSSI
|
|
</div>
|
|
<div style="font-size: 10px; color: #2196F3; margin-top: 2px;">
|
|
🔍 Cliquer pour détails
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-item clickable" onclick="openTestModal(3)">
|
|
<div style="display: flex; align-items: center;">
|
|
<span class="test-status status-passed"></span>
|
|
<div>
|
|
<div><strong>Adversarial general</strong></div>
|
|
<div style="font-size: 12px; color: #666;">
|
|
1 LLM calls • 13s durée LLM
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div style="color: #4CAF50; font-weight: bold;">
|
|
✓ RÉUSSI
|
|
</div>
|
|
<div style="font-size: 10px; color: #2196F3; margin-top: 2px;">
|
|
🔍 Cliquer pour détails
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-item clickable" onclick="openTestModal(4)">
|
|
<div style="display: flex; align-items: center;">
|
|
<span class="test-status status-passed"></span>
|
|
<div>
|
|
<div><strong>Pipeline Standard → Adversarial</strong></div>
|
|
<div style="font-size: 12px; color: #666;">
|
|
2 LLM calls • 39s durée LLM
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div style="color: #4CAF50; font-weight: bold;">
|
|
✓ RÉUSSI
|
|
</div>
|
|
<div style="font-size: 10px; color: #2196F3; margin-top: 2px;">
|
|
🔍 Cliquer pour détails
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="llm-section">
|
|
<h3>Appels LLM (8)</h3>
|
|
|
|
<div class="llm-call clickable" onclick="openModal(0)">
|
|
<div>
|
|
<strong>openai</strong> (gpt-4o-mini)
|
|
<div style="font-size: 12px; color: #666; margin-top: 2px;">
|
|
Test: lightEnhancement (rapide)
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div>8789ms</div>
|
|
<div style="font-size: 12px; color: #666;">1835→1824 tokens</div>
|
|
<div style="font-size: 10px; color: #2196F3; margin-top: 2px;">📋 Cliquer pour voir détails</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="llm-call clickable" onclick="openModal(1)">
|
|
<div>
|
|
<strong>openai</strong> (gpt-4o-mini)
|
|
<div style="font-size: 12px; color: #666; margin-top: 2px;">
|
|
Test: standardEnhancement (complet)
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div>7017ms</div>
|
|
<div style="font-size: 12px; color: #666;">1835→1397 tokens</div>
|
|
<div style="font-size: 10px; color: #2196F3; margin-top: 2px;">📋 Cliquer pour voir détails</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="llm-call clickable" onclick="openModal(2)">
|
|
<div>
|
|
<strong>gemini</strong> (gemini-2.5-flash)
|
|
<div style="font-size: 12px; color: #666; margin-top: 2px;">
|
|
Test: standardEnhancement (complet)
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div>51807ms</div>
|
|
<div style="font-size: 12px; color: #666;">2344→128 tokens</div>
|
|
<div style="font-size: 10px; color: #2196F3; margin-top: 2px;">📋 Cliquer pour voir détails</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="llm-call clickable" onclick="openModal(3)">
|
|
<div>
|
|
<strong>openai</strong> (gpt-4o-mini)
|
|
<div style="font-size: 12px; color: #666; margin-top: 2px;">
|
|
Test: fullEnhancement (maximum)
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div>8034ms</div>
|
|
<div style="font-size: 12px; color: #666;">1833→1297 tokens</div>
|
|
<div style="font-size: 10px; color: #2196F3; margin-top: 2px;">📋 Cliquer pour voir détails</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="llm-call clickable" onclick="openModal(4)">
|
|
<div>
|
|
<strong>gemini</strong> (gemini-2.5-flash)
|
|
<div style="font-size: 12px; color: #666; margin-top: 2px;">
|
|
Test: fullEnhancement (maximum)
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div>38483ms</div>
|
|
<div style="font-size: 12px; color: #666;">2648→488 tokens</div>
|
|
<div style="font-size: 10px; color: #2196F3; margin-top: 2px;">📋 Cliquer pour voir détails</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="llm-call clickable" onclick="openModal(5)">
|
|
<div>
|
|
<strong>claude</strong> (claude-sonnet-4-20250514)
|
|
<div style="font-size: 12px; color: #666; margin-top: 2px;">
|
|
Test: Adversarial general
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div>12893ms</div>
|
|
<div style="font-size: 12px; color: #666;">1453→900 tokens</div>
|
|
<div style="font-size: 10px; color: #2196F3; margin-top: 2px;">📋 Cliquer pour voir détails</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="llm-call clickable" onclick="openModal(6)">
|
|
<div>
|
|
<strong>openai</strong> (gpt-4o-mini)
|
|
<div style="font-size: 12px; color: #666; margin-top: 2px;">
|
|
Test: Pipeline Standard → Adversarial
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div>12627ms</div>
|
|
<div style="font-size: 12px; color: #666;">1835→1257 tokens</div>
|
|
<div style="font-size: 10px; color: #2196F3; margin-top: 2px;">📋 Cliquer pour voir détails</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="llm-call clickable" onclick="openModal(7)">
|
|
<div>
|
|
<strong>gemini</strong> (gemini-2.5-flash)
|
|
<div style="font-size: 12px; color: #666; margin-top: 2px;">
|
|
Test: Pipeline Standard → Adversarial
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div>26395ms</div>
|
|
<div style="font-size: 12px; color: #666;">2238→47 tokens</div>
|
|
<div style="font-size: 10px; color: #2196F3; margin-top: 2px;">📋 Cliquer pour voir détails</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Modal pour afficher les détails LLM -->
|
|
<div id="llmModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeModal()">×</span>
|
|
<h2 id="modalTitle">Détails de l'appel LLM</h2>
|
|
|
|
<div class="prompt-section">
|
|
<h4>🔍 Prompt envoyé</h4>
|
|
<div id="promptContent" class="prompt-content">Aucun prompt capturé</div>
|
|
</div>
|
|
|
|
<div class="response-section">
|
|
<h4>📥 Réponse reçue</h4>
|
|
<div id="responseContent" class="response-content">Aucune réponse capturée</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal pour afficher les détails de test -->
|
|
<div id="testModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeTestModal()">×</span>
|
|
<h2 id="testModalTitle">Détails du test</h2>
|
|
|
|
<div class="test-details-section">
|
|
<h4>📊 Statistiques</h4>
|
|
<div id="testStats" class="test-stats">
|
|
<!-- Stats will be populated here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-details-section">
|
|
<h4>🚀 Appels LLM associés</h4>
|
|
<div id="testLLMCalls" class="test-llm-list">
|
|
<!-- LLM calls will be listed here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const llmCalls = [{"provider":"openai","model":"gpt-4o-mini","duration":8789,"tokens":{"prompt":1835,"response":1824},"timestamp":"2025-09-16T15:28:05.581Z","testContext":"lightEnhancement (rapide)","prompt":"MISSION: Améliore UNIQUEMENT la précision technique de ces contenus.\n\nCONTEXTE: plaque test intégration rapide - Secteur: impression/signalétique\nPERSONNALITÉ: Marc (technique)\nINTENSITÉ: 0.7 (0.5=léger, 1.0=standard, 1.5=intensif)\n\nÉLÉMENTS À AMÉLIORER TECHNIQUEMENT:\n\n[1] TAG: Titre_H1\nCONTENU: \"Test titre avec contenu générique nécessitant amélioration technique\"\nAMÉLIORATIONS: ajout_données_techniques, intégration_contexte_métier\n\n\n[2] TAG: Introduction\nCONTENU: \"Introduction générique avec vocabulaire basique à améliorer\"\nAMÉLIORATIONS: ajout_données_techniques, intégration_contexte_métier\n\n\n[3] TAG: Contenu_Principal\nCONTENU: \"Contenu principal avec termes génériques optimal et efficace nécessitant précision technique\"\nAMÉLIORATIONS: ajout_termes_techniques, ajout_données_techniques, intégration_contexte_métier\n\n\n[4] TAG: Conclusion\nCONTENU: \"Conclusion basique qui nécessite enhancement professionnel\"\nAMÉLIORATIONS: ajout_données_techniques, intégration_contexte_métier\n\n\nCONSIGNES TECHNIQUES:\n- GARDE exactement le même message et ton technique\n- AJOUTE précision technique naturelle et vocabulaire spécialisé\n- INTÈGRE termes métier : matériaux, procédés, normes, dimensions\n- REMPLACE vocabulaire générique par termes techniques appropriés\n- ÉVITE jargon incompréhensible, reste accessible\n- PRESERVE longueur approximative (±15%)\n\nVOCABULAIRE TECHNIQUE RECOMMANDÉ:\n- Matériaux: dibond, aluminium anodisé, PMMA coulé, PVC expansé\n- Procédés: impression UV, gravure laser, découpe numérique, fraisage CNC \n- Finitions: brossé, poli, texturé, laqué\n- Fixations: perçage, adhésif double face, vis inox, plots de fixation\n\nFORMAT RÉPONSE:\n[1] Contenu avec amélioration technique précise\n[2] Contenu avec amélioration technique précise\netc...\n\nIMPORTANT: Réponse DIRECTE par les contenus améliorés, pas d'explication.","response":"[1] TAG: Titre_H1 \nCONTENU: \"Test titre avec contenu générique nécessitant amélioration technique\" \nAMÉLIORATIONS: \"Évaluation des plaques signalétiques en dibond et aluminium anodisé pour une intégration rapide dans les environnements professionnels.\"\n\n[2] TAG: Introduction \nCONTENU: \"Introduction générique avec vocabulaire basique à améliorer\" \nAMÉLIORATIONS: \"Dans le secteur de l'impression et de la signalétique, l'intégration rapide de plaques test est cruciale. Cette évaluation technique se concentre sur les matériaux tels que le dibond et le PMMA coulé, ainsi que sur les procédés d'impression UV et de gravure laser.\"\n\n[3] TAG: Contenu_Principal \nCONTENU: \"Contenu principal avec termes génériques optimal et efficace nécessitant précision technique\" \nAMÉLIORATIONS: \"Le choix des matériaux, comme le PVC expansé et l'aluminium anodisé, joue un rôle essentiel dans la durabilité et l'esthétique des plaques. Les procédés d'impression UV garantissent une résistance aux intempéries, tandis que la découpe numérique permet une précision optimale. Les dimensions standardisées et les finitions, telles que brossé ou laqué, doivent être prises en compte pour assurer une intégration harmonieuse dans divers environnements. Les systèmes de fixation, incluant le perçage et les adhésifs double face, sont également des éléments clés pour une installation sécurisée.\"\n\n[4] TAG: Conclusion \nCONTENU: \"Conclusion basique qui nécessite enhancement professionnel\" \nAMÉLIORATIONS: \"En conclusion, l'intégration rapide de plaques test dans le secteur de l'impression et de la signalétique repose sur une sélection rigoureuse des matériaux et des procédés. L'utilisation de normes industrielles pour les dimensions et les finitions garantit une solution efficace et durable, répondant aux exigences professionnelles.\""},{"provider":"openai","model":"gpt-4o-mini","duration":7017,"tokens":{"prompt":1835,"response":1397},"timestamp":"2025-09-16T15:28:12.613Z","testContext":"standardEnhancement (complet)","prompt":"MISSION: Améliore UNIQUEMENT la précision technique de ces contenus.\n\nCONTEXTE: plaque test intégration rapide - Secteur: impression/signalétique\nPERSONNALITÉ: Marc (technique)\nINTENSITÉ: 0.9 (0.5=léger, 1.0=standard, 1.5=intensif)\n\nÉLÉMENTS À AMÉLIORER TECHNIQUEMENT:\n\n[1] TAG: Titre_H1\nCONTENU: \"Test titre avec contenu générique nécessitant amélioration technique\"\nAMÉLIORATIONS: ajout_données_techniques, intégration_contexte_métier\n\n\n[2] TAG: Introduction\nCONTENU: \"Introduction générique avec vocabulaire basique à améliorer\"\nAMÉLIORATIONS: ajout_données_techniques, intégration_contexte_métier\n\n\n[3] TAG: Contenu_Principal\nCONTENU: \"Contenu principal avec termes génériques optimal et efficace nécessitant précision technique\"\nAMÉLIORATIONS: ajout_termes_techniques, ajout_données_techniques, intégration_contexte_métier\n\n\n[4] TAG: Conclusion\nCONTENU: \"Conclusion basique qui nécessite enhancement professionnel\"\nAMÉLIORATIONS: ajout_données_techniques, intégration_contexte_métier\n\n\nCONSIGNES TECHNIQUES:\n- GARDE exactement le même message et ton technique\n- AJOUTE précision technique naturelle et vocabulaire spécialisé\n- INTÈGRE termes métier : matériaux, procédés, normes, dimensions\n- REMPLACE vocabulaire générique par termes techniques appropriés\n- ÉVITE jargon incompréhensible, reste accessible\n- PRESERVE longueur approximative (±15%)\n\nVOCABULAIRE TECHNIQUE RECOMMANDÉ:\n- Matériaux: dibond, aluminium anodisé, PMMA coulé, PVC expansé\n- Procédés: impression UV, gravure laser, découpe numérique, fraisage CNC \n- Finitions: brossé, poli, texturé, laqué\n- Fixations: perçage, adhésif double face, vis inox, plots de fixation\n\nFORMAT RÉPONSE:\n[1] Contenu avec amélioration technique précise\n[2] Contenu avec amélioration technique précise\netc...\n\nIMPORTANT: Réponse DIRECTE par les contenus améliorés, pas d'explication.","response":"[1] TAG: Titre_H1 \nCONTENU: \"Test de plaque d'intégration rapide pour l'impression et la signalétique : Optimisation technique requise\"\n\n[2] TAG: Introduction \nCONTENU: \"Cette introduction présente les enjeux techniques liés à l'utilisation de plaques pour l'impression et la signalétique, en mettant l'accent sur les matériaux adaptés tels que le dibond et le PVC expansé, ainsi que sur les procédés d'impression UV et de découpe numérique.\"\n\n[3] TAG: Contenu_Principal \nCONTENU: \"Le contenu principal aborde les spécificités techniques des plaques utilisées dans le secteur de l'impression et de la signalétique. Il est crucial de choisir des matériaux comme l'aluminium anodisé et le PMMA coulé pour garantir durabilité et esthétisme. Les procédés tels que la gravure laser et le fraisage CNC permettent d'obtenir des finitions précises, qu'elles soient brossées, polies ou texturées. Les dimensions standard des plaques, ainsi que les méthodes de fixation comme le perçage et l'utilisation d'adhésifs double face, sont également essentielles pour assurer une intégration efficace.\"\n\n[4] TAG: Conclusion \nCONTENU: \"En conclusion, l'optimisation des plaques pour l'impression et la signalétique repose sur une sélection rigoureuse des matériaux et des procédés. L'adhésion aux normes industrielles et le choix de dimensions appropriées garantissent des résultats professionnels et durables.\""},{"provider":"gemini","model":"gemini-2.5-flash","duration":51807,"tokens":{"prompt":2344,"response":128},"timestamp":"2025-09-16T15:29:04.435Z","testContext":"standardEnhancement (complet)","prompt":"MISSION: Améliore UNIQUEMENT les transitions et fluidité de ces contenus.\n\nCONTEXTE: Article SEO plaque test intégration rapide\nPERSONNALITÉ: Marc (technique web professionnel)\n\nINTENSITÉ: 0.8 (0.5=léger, 1.0=standard, 1.5=intensif)\n\nCONTENUS À FLUIDIFIER:\n\n[1] TAG: Contenu_Principal\nPROBLÈMES: abruptTransitions, uniformSentences\nCONTENU: \"TAG: Contenu_Principal CONTENU: \"Le contenu principal aborde les spécificités techniques des plaques utilisées dans le secteur de l'impression et de la signalétique. Il est crucial de choisir des matériaux comme l'aluminium anodisé et le PMMA coulé pour garantir durabilité et esthétisme. Les procédés tels que la gravure laser et le fraisage CNC permettent d'obtenir des finitions précises, qu'elles soient brossées, polies ou texturées. Les dimensions standard des plaques, ainsi que les méthodes de fixation comme le perçage et l'utilisation d'adhésifs double face, sont également essentielles pour assurer une intégration efficace.\"\"\n\n[2] TAG: Conclusion\nPROBLÈMES: abruptTransitions, uniformSentences\nCONTENU: \"TAG: Conclusion CONTENU: \"En conclusion, l'optimisation des plaques pour l'impression et la signalétique repose sur une sélection rigoureuse des matériaux et des procédés. L'adhésion aux normes industrielles et le choix de dimensions appropriées garantissent des résultats professionnels et durables.\"\"\n\nOBJECTIFS FLUIDITÉ:\n- Connecteurs plus naturels et variés\n- Transitions fluides entre idées et paragraphes\n- Variation naturelle longueurs phrases\n- ÉVITE répétitions excessives (\"du coup\", \"par ailleurs\", \"en effet\")\n- Style technique mais naturel web\n\nCONSIGNES STRICTES:\n- NE CHANGE PAS le fond du message ni les informations\n- GARDE même structure générale et longueur approximative (±20%)\n- Améliore SEULEMENT la fluidité et les enchaînements\n- RESPECTE le style Marc (technique)\n- ÉVITE sur-correction qui rendrait artificiel\n\nTECHNIQUES FLUIDITÉ:\n- Varier connecteurs logiques sans répétition\n- Alterner phrases courtes (8-12 mots) et moyennes (15-20 mots) \n- Utiliser pronoms et reprises pour cohésion\n- Ajouter transitions implicites par reformulation\n- Équilibrer registre soutenu/accessible\n\nFORMAT RÉPONSE:\n[1] Contenu avec transitions améliorées\n[2] Contenu avec transitions améliorées\netc...\n\nIMPORTANT: Réponse DIRECTE par les contenus fluidifiés, pas d'explication.","response":"[1] L'analyse des spécificités techniques des plaques, éléments clés dans l'impression et la signalétique, est primordiale. Dans"},{"provider":"openai","model":"gpt-4o-mini","duration":8034,"tokens":{"prompt":1833,"response":1297},"timestamp":"2025-09-16T15:29:12.481Z","testContext":"fullEnhancement (maximum)","prompt":"MISSION: Améliore UNIQUEMENT la précision technique de ces contenus.\n\nCONTEXTE: plaque test intégration rapide - Secteur: impression/signalétique\nPERSONNALITÉ: Marc (technique)\nINTENSITÉ: 1 (0.5=léger, 1.0=standard, 1.5=intensif)\n\nÉLÉMENTS À AMÉLIORER TECHNIQUEMENT:\n\n[1] TAG: Titre_H1\nCONTENU: \"Test titre avec contenu générique nécessitant amélioration technique\"\nAMÉLIORATIONS: ajout_données_techniques, intégration_contexte_métier\n\n\n[2] TAG: Introduction\nCONTENU: \"Introduction générique avec vocabulaire basique à améliorer\"\nAMÉLIORATIONS: ajout_données_techniques, intégration_contexte_métier\n\n\n[3] TAG: Contenu_Principal\nCONTENU: \"Contenu principal avec termes génériques optimal et efficace nécessitant précision technique\"\nAMÉLIORATIONS: ajout_termes_techniques, ajout_données_techniques, intégration_contexte_métier\n\n\n[4] TAG: Conclusion\nCONTENU: \"Conclusion basique qui nécessite enhancement professionnel\"\nAMÉLIORATIONS: ajout_données_techniques, intégration_contexte_métier\n\n\nCONSIGNES TECHNIQUES:\n- GARDE exactement le même message et ton technique\n- AJOUTE précision technique naturelle et vocabulaire spécialisé\n- INTÈGRE termes métier : matériaux, procédés, normes, dimensions\n- REMPLACE vocabulaire générique par termes techniques appropriés\n- ÉVITE jargon incompréhensible, reste accessible\n- PRESERVE longueur approximative (±15%)\n\nVOCABULAIRE TECHNIQUE RECOMMANDÉ:\n- Matériaux: dibond, aluminium anodisé, PMMA coulé, PVC expansé\n- Procédés: impression UV, gravure laser, découpe numérique, fraisage CNC \n- Finitions: brossé, poli, texturé, laqué\n- Fixations: perçage, adhésif double face, vis inox, plots de fixation\n\nFORMAT RÉPONSE:\n[1] Contenu avec amélioration technique précise\n[2] Contenu avec amélioration technique précise\netc...\n\nIMPORTANT: Réponse DIRECTE par les contenus améliorés, pas d'explication.","response":"[1] TAG: Titre_H1 \nCONTENU: \"Évaluation technique des plaques d'impression pour intégration rapide en signalétique\"\n\n[2] TAG: Introduction \nCONTENU: \"Cette introduction vise à présenter les enjeux techniques liés à l'utilisation de plaques en dibond et en aluminium anodisé pour l'impression UV dans le secteur de la signalétique. Nous aborderons les matériaux, les procédés d'impression et les normes de qualité applicables.\"\n\n[3] TAG: Contenu_Principal \nCONTENU: \"Le contenu principal se concentre sur l'optimisation des plaques d'impression en PMMA coulé et PVC expansé. Les procédés tels que la découpe numérique et la gravure laser permettent d'obtenir des finitions précises, que ce soit en brossé, poli ou texturé. Il est essentiel de respecter les dimensions standardisées pour garantir la compatibilité avec les systèmes de fixation, tels que le perçage et les adhésifs double face, afin d'assurer une installation efficace et durable.\"\n\n[4] TAG: Conclusion \nCONTENU: \"En conclusion, l'intégration rapide de plaques d'impression dans le secteur de la signalétique repose sur une sélection rigoureuse des matériaux et des procédés. L'application des normes de qualité et des techniques de fixation appropriées est cruciale pour garantir la pérennité et l'esthétique des installations.\""},{"provider":"gemini","model":"gemini-2.5-flash","duration":38483,"tokens":{"prompt":2648,"response":488},"timestamp":"2025-09-16T15:29:50.966Z","testContext":"fullEnhancement (maximum)","prompt":"MISSION: Améliore UNIQUEMENT les transitions et fluidité de ces contenus.\n\nCONTEXTE: Article SEO plaque test intégration rapide\nPERSONNALITÉ: Marc (technique web professionnel)\n\nINTENSITÉ: 0.9 (0.5=léger, 1.0=standard, 1.5=intensif)\n\nCONTENUS À FLUIDIFIER:\n\n[1] TAG: Introduction\nPROBLÈMES: abruptTransitions, formalityImbalance\nCONTENU: \"TAG: Introduction CONTENU: \"Cette introduction vise à présenter les enjeux techniques liés à l'utilisation de plaques en dibond et en aluminium anodisé pour l'impression UV dans le secteur de la signalétique. Nous aborderons les matériaux, les procédés d'impression et les normes de qualité applicables.\"\"\n\n[2] TAG: Contenu_Principal\nPROBLÈMES: abruptTransitions, uniformSentences\nCONTENU: \"TAG: Contenu_Principal CONTENU: \"Le contenu principal se concentre sur l'optimisation des plaques d'impression en PMMA coulé et PVC expansé. Les procédés tels que la découpe numérique et la gravure laser permettent d'obtenir des finitions précises, que ce soit en brossé, poli ou texturé. Il est essentiel de respecter les dimensions standardisées pour garantir la compatibilité avec les systèmes de fixation, tels que le perçage et les adhésifs double face, afin d'assurer une installation efficace et durable.\"\"\n\n[3] TAG: Conclusion\nPROBLÈMES: abruptTransitions, uniformSentences\nCONTENU: \"TAG: Conclusion CONTENU: \"En conclusion, l'intégration rapide de plaques d'impression dans le secteur de la signalétique repose sur une sélection rigoureuse des matériaux et des procédés. L'application des normes de qualité et des techniques de fixation appropriées est cruciale pour garantir la pérennité et l'esthétique des installations.\"\"\n\nOBJECTIFS FLUIDITÉ:\n- Connecteurs plus naturels et variés\n- Transitions fluides entre idées et paragraphes\n- Variation naturelle longueurs phrases\n- ÉVITE répétitions excessives (\"du coup\", \"par ailleurs\", \"en effet\")\n- Style technique mais naturel web\n\nCONSIGNES STRICTES:\n- NE CHANGE PAS le fond du message ni les informations\n- GARDE même structure générale et longueur approximative (±20%)\n- Améliore SEULEMENT la fluidité et les enchaînements\n- RESPECTE le style Marc (technique)\n- ÉVITE sur-correction qui rendrait artificiel\n\nTECHNIQUES FLUIDITÉ:\n- Varier connecteurs logiques sans répétition\n- Alterner phrases courtes (8-12 mots) et moyennes (15-20 mots) \n- Utiliser pronoms et reprises pour cohésion\n- Ajouter transitions implicites par reformulation\n- Équilibrer registre soutenu/accessible\n\nFORMAT RÉPONSE:\n[1] Contenu avec transitions améliorées\n[2] Contenu avec transitions améliorées\netc...\n\nIMPORTANT: Réponse DIRECTE par les contenus fluidifiés, pas d'explication.","response":"[1] L'intégration de plaques pour l'impression UV dans le secteur de la signalétique présente des enjeux techniques spécifiques. Cette analyse se propose de détailler ces aspects cruciaux, en abordant les matériaux clés tels que le dibond et l'aluminium anodisé, les procédés d'impression associés, et les normes de qualité indispensables à leur mise en œuvre.\n\n[2] L'optimisation des plaques d'impression, notamment celles fabriquées en PMMA coulé et PVC expansé, constitue un axe majeur"},{"provider":"claude","model":"claude-sonnet-4-20250514","duration":12893,"tokens":{"prompt":1453,"response":900},"timestamp":"2025-09-16T15:30:03.904Z","testContext":"Adversarial general","prompt":"MISSION: Réécris ces contenus pour éviter détection par general.\n\nTECHNIQUE ANTI-GENERAL:\nÉvite ces mots typiques IA : \"optimal\", \"comprehensive\", \"seamless\", \"robust\", \"leverage\"\nVarie longueurs phrases : mélange phrases courtes (5-10 mots) ET longues (20-30 mots)\nUtilise expressions françaises familières et tournures idiomatiques\nAjoute imperfections naturelles : répétitions légères, hésitations, reformulations\nChange angle ou perspective 1-2 fois dans le texte\nPréfère synonymes moins évidents : \"bon\" plutôt qu'excellent\", \"solide\" plutôt qu'optimisé\"\nIntègre connecteurs variés et naturels selon le contexte\nSimule variation naturelle d'humeur et d'énergie rédactionnelle\n\nCONTENUS À RÉÉCRIRE:\n\n[1] TAG: Titre_H1\nORIGINAL: \"Test titre avec contenu générique nécessitant amélioration technique\"\n\n[2] TAG: Introduction\nORIGINAL: \"Introduction générique avec vocabulaire basique à améliorer\"\n\n[3] TAG: Contenu_Principal\nORIGINAL: \"Contenu principal avec termes génériques optimal et efficace nécessitant précision technique\"\n\n[4] TAG: Conclusion\nORIGINAL: \"Conclusion basique qui nécessite enhancement professionnel\"\n\nCONSIGNES:\n- GARDE exactement le même message et informations factuelles\n- CHANGE structure, vocabulaire, style pour éviter détection general\n- Intensité adversariale: 0.80\n\n\nIMPORTANT: Réponse DIRECTE par les contenus réécrits, pas d'explication.\n\nFORMAT:\n[1] Contenu réécrit anti-general\n[2] Contenu réécrit anti-general\netc...","response":"[1] Améliorer un titre générique : voilà bien le défi du moment, surtout quand on part de pas grand-chose techniquement parlant\n\n[2] Bon, disons-le franchement : cette intro manque cruellement de punch. Les mots basiques, ça ne suffit plus vraiment aujourd'hui, il faut y mettre du sien pour captiver dès les premières lignes.\n\n[3] Le cœur du sujet, c'est là que ça se corse. On a affaire à du contenu qui tourne en rond avec ses termes bateau. \"Efficace\" par-ci, \"optimal\" par-là... franchement, ça manque de mordant technique. Il faut creuser plus profond, trouver la petite bête qui fait la différence. Parce que bon, entre nous, le lecteur mérite mieux qu'un catalogue de bonnes intentions.\n\n[4] Pour boucler tout ça... eh bien, cette fin tombe un peu à plat. L'aspect professionnel, c'est bien joli, mais il faut que ça claque davantage, que ça marque les esprits au lieu de s'évaporer sitôt lu."},{"provider":"openai","model":"gpt-4o-mini","duration":12627,"tokens":{"prompt":1835,"response":1257},"timestamp":"2025-09-16T15:30:16.549Z","testContext":"Pipeline Standard → Adversarial","prompt":"MISSION: Améliore UNIQUEMENT la précision technique de ces contenus.\n\nCONTEXTE: plaque test intégration rapide - Secteur: impression/signalétique\nPERSONNALITÉ: Marc (technique)\nINTENSITÉ: 0.9 (0.5=léger, 1.0=standard, 1.5=intensif)\n\nÉLÉMENTS À AMÉLIORER TECHNIQUEMENT:\n\n[1] TAG: Titre_H1\nCONTENU: \"Test titre avec contenu générique nécessitant amélioration technique\"\nAMÉLIORATIONS: ajout_données_techniques, intégration_contexte_métier\n\n\n[2] TAG: Introduction\nCONTENU: \"Introduction générique avec vocabulaire basique à améliorer\"\nAMÉLIORATIONS: ajout_données_techniques, intégration_contexte_métier\n\n\n[3] TAG: Contenu_Principal\nCONTENU: \"Contenu principal avec termes génériques optimal et efficace nécessitant précision technique\"\nAMÉLIORATIONS: ajout_termes_techniques, ajout_données_techniques, intégration_contexte_métier\n\n\n[4] TAG: Conclusion\nCONTENU: \"Conclusion basique qui nécessite enhancement professionnel\"\nAMÉLIORATIONS: ajout_données_techniques, intégration_contexte_métier\n\n\nCONSIGNES TECHNIQUES:\n- GARDE exactement le même message et ton technique\n- AJOUTE précision technique naturelle et vocabulaire spécialisé\n- INTÈGRE termes métier : matériaux, procédés, normes, dimensions\n- REMPLACE vocabulaire générique par termes techniques appropriés\n- ÉVITE jargon incompréhensible, reste accessible\n- PRESERVE longueur approximative (±15%)\n\nVOCABULAIRE TECHNIQUE RECOMMANDÉ:\n- Matériaux: dibond, aluminium anodisé, PMMA coulé, PVC expansé\n- Procédés: impression UV, gravure laser, découpe numérique, fraisage CNC \n- Finitions: brossé, poli, texturé, laqué\n- Fixations: perçage, adhésif double face, vis inox, plots de fixation\n\nFORMAT RÉPONSE:\n[1] Contenu avec amélioration technique précise\n[2] Contenu avec amélioration technique précise\netc...\n\nIMPORTANT: Réponse DIRECTE par les contenus améliorés, pas d'explication.","response":"[1] TAG: Titre_H1 \nCONTENU: \"Optimisation des titres pour tests rapides en impression et signalétique : amélioration technique nécessaire\"\n\n[2] TAG: Introduction \nCONTENU: \"Cette introduction présente les enjeux techniques liés aux tests rapides dans le secteur de l'impression et de la signalétique, en mettant l'accent sur l'importance des matériaux et procédés adaptés pour garantir la qualité et la durabilité des produits.\"\n\n[3] TAG: Contenu_Principal \nCONTENU: \"Le contenu principal aborde les spécificités techniques des tests rapides, notamment l'utilisation de matériaux tels que le dibond et le PMMA coulé, ainsi que les procédés d'impression UV et de découpe numérique. Il est essentiel de respecter les normes de dimensions et de finitions, comme le brossé ou le laqué, pour assurer une efficacité optimale et une esthétique professionnelle.\"\n\n[4] TAG: Conclusion \nCONTENU: \"En conclusion, l'intégration de données techniques précises dans les tests rapides est cruciale pour le secteur de l'impression et de la signalétique. L'adoption de matériaux appropriés et de procédés de fabrication de pointe garantit des résultats conformes aux exigences du marché, tout en répondant aux attentes des clients en termes de qualité et de durabilité.\""},{"provider":"gemini","model":"gemini-2.5-flash","duration":26395,"tokens":{"prompt":2238,"response":47},"timestamp":"2025-09-16T15:30:42.946Z","testContext":"Pipeline Standard → Adversarial","prompt":"MISSION: Améliore UNIQUEMENT les transitions et fluidité de ces contenus.\n\nCONTEXTE: Article SEO plaque test intégration rapide\nPERSONNALITÉ: Marc (technique web professionnel)\n\nINTENSITÉ: 0.8 (0.5=léger, 1.0=standard, 1.5=intensif)\n\nCONTENUS À FLUIDIFIER:\n\n[1] TAG: Contenu_Principal\nPROBLÈMES: abruptTransitions, uniformSentences, formalityImbalance\nCONTENU: \"TAG: Contenu_Principal CONTENU: \"Le contenu principal aborde les spécificités techniques des tests rapides, notamment l'utilisation de matériaux tels que le dibond et le PMMA coulé, ainsi que les procédés d'impression UV et de découpe numérique. Il est essentiel de respecter les normes de dimensions et de finitions, comme le brossé ou le laqué, pour assurer une efficacité optimale et une esthétique professionnelle.\"\"\n\n[2] TAG: Conclusion\nPROBLÈMES: abruptTransitions, uniformSentences\nCONTENU: \"TAG: Conclusion CONTENU: \"En conclusion, l'intégration de données techniques précises dans les tests rapides est cruciale pour le secteur de l'impression et de la signalétique. L'adoption de matériaux appropriés et de procédés de fabrication de pointe garantit des résultats conformes aux exigences du marché, tout en répondant aux attentes des clients en termes de qualité et de durabilité.\"\"\n\nOBJECTIFS FLUIDITÉ:\n- Connecteurs plus naturels et variés\n- Transitions fluides entre idées et paragraphes\n- Variation naturelle longueurs phrases\n- ÉVITE répétitions excessives (\"du coup\", \"par ailleurs\", \"en effet\")\n- Style technique mais naturel web\n\nCONSIGNES STRICTES:\n- NE CHANGE PAS le fond du message ni les informations\n- GARDE même structure générale et longueur approximative (±20%)\n- Améliore SEULEMENT la fluidité et les enchaînements\n- RESPECTE le style Marc (technique)\n- ÉVITE sur-correction qui rendrait artificiel\n\nTECHNIQUES FLUIDITÉ:\n- Varier connecteurs logiques sans répétition\n- Alterner phrases courtes (8-12 mots) et moyennes (15-20 mots) \n- Utiliser pronoms et reprises pour cohésion\n- Ajouter transitions implicites par reformulation\n- Équilibrer registre soutenu/accessible\n\nFORMAT RÉPONSE:\n[1] Contenu avec transitions améliorées\n[2] Contenu avec transitions améliorées\netc...\n\nIMPORTANT: Réponse DIRECTE par les contenus fluidifiés, pas d'explication.","response":"[Gemini: pas de texte généré - problème modèle]"}];
|
|
const testResults = [{"name":"lightEnhancement (rapide)","status":"passed","duration":0,"timestamp":1758036485581,"llmCallsCount":1},{"name":"standardEnhancement (complet)","status":"passed","duration":0,"timestamp":1758036492613,"llmCallsCount":2},{"name":"fullEnhancement (maximum)","status":"passed","duration":0,"timestamp":1758036552481,"llmCallsCount":2},{"name":"Adversarial general","status":"passed","duration":0,"timestamp":1758036603904,"llmCallsCount":1},{"name":"Pipeline Standard → Adversarial","status":"passed","duration":0,"timestamp":1758036616549,"llmCallsCount":2}];
|
|
|
|
function openModal(index) {
|
|
const call = llmCalls[index];
|
|
if (!call) return;
|
|
|
|
const modal = document.getElementById('llmModal');
|
|
const title = document.getElementById('modalTitle');
|
|
const promptContent = document.getElementById('promptContent');
|
|
const responseContent = document.getElementById('responseContent');
|
|
|
|
title.textContent = `${call.provider.toUpperCase()} (${call.model}) - ${call.testContext}`;
|
|
|
|
promptContent.textContent = call.prompt || 'Aucun prompt capturé';
|
|
responseContent.textContent = call.response || 'Aucune réponse capturée';
|
|
|
|
modal.style.display = 'block';
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('llmModal').style.display = 'none';
|
|
}
|
|
|
|
function openTestModal(index) {
|
|
const test = testResults[index];
|
|
if (!test) return;
|
|
|
|
const modal = document.getElementById('testModal');
|
|
const title = document.getElementById('testModalTitle');
|
|
const statsDiv = document.getElementById('testStats');
|
|
const llmCallsDiv = document.getElementById('testLLMCalls');
|
|
|
|
title.textContent = `Test: ${test.name}`;
|
|
|
|
// Get LLM calls for this test
|
|
const testLLMCalls = llmCalls.filter(call => call.testContext === test.name);
|
|
const totalDuration = testLLMCalls.reduce((sum, call) => sum + call.duration, 0);
|
|
const totalTokensIn = testLLMCalls.reduce((sum, call) => sum + (call.tokens?.prompt || 0), 0);
|
|
const totalTokensOut = testLLMCalls.reduce((sum, call) => sum + (call.tokens?.response || 0), 0);
|
|
|
|
// Populate stats
|
|
statsDiv.innerHTML = `
|
|
<div class="test-stat">
|
|
<div class="test-stat-value">${test.status === 'passed' ? '✓' : '✗'}</div>
|
|
<div>Statut</div>
|
|
</div>
|
|
<div class="test-stat">
|
|
<div class="test-stat-value">${testLLMCalls.length}</div>
|
|
<div>LLM Calls</div>
|
|
</div>
|
|
<div class="test-stat">
|
|
<div class="test-stat-value">${Math.round(totalDuration/1000)}s</div>
|
|
<div>Durée LLM</div>
|
|
</div>
|
|
<div class="test-stat">
|
|
<div class="test-stat-value">${totalTokensIn}</div>
|
|
<div>Tokens Input</div>
|
|
</div>
|
|
<div class="test-stat">
|
|
<div class="test-stat-value">${totalTokensOut}</div>
|
|
<div>Tokens Output</div>
|
|
</div>
|
|
`;
|
|
|
|
// Populate LLM calls
|
|
if (testLLMCalls.length > 0) {
|
|
llmCallsDiv.innerHTML = testLLMCalls.map((call, callIndex) => {
|
|
const globalIndex = llmCalls.findIndex(c => c === call);
|
|
return `
|
|
<div class="test-llm-item" onclick="openModal(${globalIndex})">
|
|
<div>
|
|
<strong>${call.provider.toUpperCase()}</strong> (${call.model})
|
|
<div style="font-size: 11px; color: #666; margin-top: 2px;">
|
|
${new Date(call.timestamp).toLocaleTimeString()}
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div>${call.duration}ms</div>
|
|
<div style="font-size: 11px; color: #666;">
|
|
${call.tokens?.prompt || 0}→${call.tokens?.response || 0} tokens
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
} else {
|
|
llmCallsDiv.innerHTML = '<div style="color: #666; text-align: center; padding: 20px;">Aucun appel LLM pour ce test</div>';
|
|
}
|
|
|
|
modal.style.display = 'block';
|
|
}
|
|
|
|
function closeTestModal() {
|
|
document.getElementById('testModal').style.display = 'none';
|
|
}
|
|
|
|
// Fermer modal en cliquant à l'extérieur
|
|
window.onclick = function(event) {
|
|
const llmModal = document.getElementById('llmModal');
|
|
const testModal = document.getElementById('testModal');
|
|
if (event.target === llmModal) {
|
|
closeModal();
|
|
}
|
|
if (event.target === testModal) {
|
|
closeTestModal();
|
|
}
|
|
}
|
|
|
|
// Fermer modal avec Escape
|
|
document.addEventListener('keydown', function(event) {
|
|
if (event.key === 'Escape') {
|
|
closeModal();
|
|
closeTestModal();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |