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/17/2025, 7:29:52 AM</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/17/2025, 7:29:52 AM</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">89s</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 • 5s 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 • 23s 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 • 24s 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 • 10s 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 • 23s 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>4966ms</div>
|
||
<div style="font-size: 12px; color: #666;">1835→1303 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>7720ms</div>
|
||
<div style="font-size: 12px; color: #666;">1835→1345 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>15638ms</div>
|
||
<div style="font-size: 12px; color: #666;">2248→47 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>5189ms</div>
|
||
<div style="font-size: 12px; color: #666;">1833→1204 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>19150ms</div>
|
||
<div style="font-size: 12px; color: #666;">1667→47 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>10370ms</div>
|
||
<div style="font-size: 12px; color: #666;">1453→1068 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>6362ms</div>
|
||
<div style="font-size: 12px; color: #666;">1835→1416 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>17015ms</div>
|
||
<div style="font-size: 12px; color: #666;">2384→1057 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":4966,"tokens":{"prompt":1835,"response":1303},"timestamp":"2025-09-16T23:28:30.321Z","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] \"Test titre avec contenu générique nécessitant amélioration technique : Évaluation des plaques d'impression en dibond et aluminium anodisé pour signalétique professionnelle\"\n\n[2] \"Introduction sur les plaques d'intégration rapide en impression/signalétique, mettant en avant les matériaux tels que le dibond et le PMMA coulé, ainsi que les procédés d'impression UV et de gravure laser, essentiels pour garantir une durabilité et une qualité visuelle optimales.\"\n\n[3] \"Contenu principal sur les plaques d'intégration rapide, abordant les caractéristiques techniques des matériaux comme le PVC expansé et l'aluminium anodisé. Les procédés de fabrication, tels que la découpe numérique et le fraisage CNC, sont cruciaux pour obtenir des dimensions précises. L'importance des finitions, comme le brossé ou le laqué, et des fixations appropriées, telles que le perçage ou l'utilisation d'adhésif double face, est également discutée pour assurer une installation efficace et pérenne.\"\n\n[4] \"Conclusion sur l'importance d'une sélection rigoureuse des matériaux et des procédés pour les plaques d'impression en signalétique. Une attention particulière aux normes de qualité et aux dimensions spécifiques garantit une performance optimale et une longévité accrue des produits dans des environnements variés.\""},{"provider":"openai","model":"gpt-4o-mini","duration":7720,"tokens":{"prompt":1835,"response":1345},"timestamp":"2025-09-16T23:28:38.054Z","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 titre avec contenu générique nécessitant amélioration technique - Optimisation des plaques signalétiques en dibond et aluminium anodisé\"\n\n[2] TAG: Introduction \nCONTENU: \"Dans le secteur de l'impression et de la signalétique, il est crucial de comprendre les spécificités des matériaux utilisés, tels que le dibond et le PMMA coulé, ainsi que les procédés d'impression UV et de découpe numérique, pour garantir une qualité optimale des produits finis.\"\n\n[3] TAG: Contenu_Principal \nCONTENU: \"Le contenu principal doit aborder les différentes techniques d'impression, comme l'impression UV, et les procédés de fabrication, tels que la gravure laser et le fraisage CNC. Il est essentiel de choisir des matériaux adaptés, comme le PVC expansé pour des applications intérieures et l'aluminium anodisé pour des solutions extérieures, tout en respectant les normes de dimensions et de finitions, telles que le poli ou le texturé, pour assurer durabilité et esthétique.\"\n\n[4] TAG: Conclusion \nCONTENU: \"En conclusion, l'intégration de matériaux de qualité et de procédés techniques avancés est indispensable pour le succès des projets de signalétique. L'utilisation de fixations appropriées, comme les vis inox et les adhésifs double face, garantit une installation sécurisée et pérenne des plaques signalétiques.\""},{"provider":"gemini","model":"gemini-2.5-flash","duration":15638,"tokens":{"prompt":2248,"response":47},"timestamp":"2025-09-16T23:28:53.708Z","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 doit aborder les différentes techniques d'impression, comme l'impression UV, et les procédés de fabrication, tels que la gravure laser et le fraisage CNC. Il est essentiel de choisir des matériaux adaptés, comme le PVC expansé pour des applications intérieures et l'aluminium anodisé pour des solutions extérieures, tout en respectant les normes de dimensions et de finitions, telles que le poli ou le texturé, pour assurer durabilité et esthétique.\"\"\n\n[2] TAG: Conclusion\nPROBLÈMES: abruptTransitions, uniformSentences\nCONTENU: \"TAG: Conclusion CONTENU: \"En conclusion, l'intégration de matériaux de qualité et de procédés techniques avancés est indispensable pour le succès des projets de signalétique. L'utilisation de fixations appropriées, comme les vis inox et les adhésifs double face, garantit une installation sécurisée et pérenne des plaques signalétiques.\"\"\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]"},{"provider":"openai","model":"gpt-4o-mini","duration":5189,"tokens":{"prompt":1833,"response":1204},"timestamp":"2025-09-16T23:28:58.909Z","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: \"Test titre avec intégration des spécifications techniques pour l'impression et la signalétique\"\n\n[2] TAG: Introduction \nCONTENU: \"Cette introduction présente les enjeux techniques liés à l'utilisation de matériaux comme le dibond et le PMMA coulé dans le secteur de l'impression et de la signalétique, tout en abordant les procédés d'impression UV et de découpe numérique.\"\n\n[3] TAG: Contenu_Principal \nCONTENU: \"Le contenu principal se concentre sur l'optimisation des processus de fabrication en utilisant des matériaux tels que l'aluminium anodisé et le PVC expansé. Nous examinerons les normes de qualité en matière de finitions, telles que le poli et le laqué, ainsi que les techniques de fixation appropriées, comme le perçage et l'adhésif double face, pour garantir une durabilité et une efficacité maximales.\"\n\n[4] TAG: Conclusion \nCONTENU: \"En conclusion, l'intégration de matériaux de haute qualité et de procédés avancés dans la fabrication d'éléments de signalétique est essentielle pour répondre aux exigences du marché. L'application de normes rigoureuses et de techniques de fixation adaptées assure une longévité et une performance optimale des produits.\""},{"provider":"gemini","model":"gemini-2.5-flash","duration":19150,"tokens":{"prompt":1667,"response":47},"timestamp":"2025-09-16T23:29:18.061Z","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: Conclusion\nPROBLÈMES: abruptTransitions, uniformSentences\nCONTENU: \"TAG: Conclusion CONTENU: \"En conclusion, l'intégration de matériaux de haute qualité et de procédés avancés dans la fabrication d'éléments de signalétique est essentielle pour répondre aux exigences du marché. L'application de normes rigoureuses et de techniques de fixation adaptées assure une longévité et une performance optimale des produits.\"\"\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]"},{"provider":"claude","model":"claude-sonnet-4-20250514","duration":10370,"tokens":{"prompt":1453,"response":1068},"timestamp":"2025-09-16T23:29:28.468Z","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, c'est pas sorcier mais ça demande du doigté. Faut dire, quand on tombe sur du contenu banal, on se retrouve souvent à gratter la tête pour trouver l'angle qui va marcher.\n\n[2] Bon alors, pour commencer... disons qu'une intro basique, c'est un peu comme servir du pain sec à ses invités. Ça fait le boulot, certes, mais personne ne va s'en souvenir le lendemain, vous voyez ce que je veux dire ?\n\n[3] Le cœur du sujet, maintenant. Parce que franchement, utiliser des mots comme \"optimal\" à tout bout de champ, ça sonne faux. C'est pas naturel. Les gens normaux disent plutôt \"ça marche bien\" ou \"c'est du solide\". Et puis bon, être efficace c'est bien joli sur le papier, mais dans la vraie vie, il faut surtout que ça soit pratique et que ça tienne la route quand les choses se corsent un peu.\n\n[4] Pour finir - et là j'avoue que c'est toujours le moment délicat - une conclusion qui claque, ça se mérite. Faut pas juste balancer quelque chose de professionnel pour faire genre. Non, il vaut mieux rester authentique, même si c'est moins lisse."},{"provider":"openai","model":"gpt-4o-mini","duration":6362,"tokens":{"prompt":1835,"response":1416},"timestamp":"2025-09-16T23:29:34.849Z","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: \"Test titre avec contenu générique nécessitant amélioration technique : Optimisation des plaques de test en impression et signalétique\"\n\n[2] TAG: Introduction \nCONTENU: \"Introduction sur l'importance des plaques de test en impression et signalétique, en mettant l'accent sur les matériaux comme le dibond et l'aluminium anodisé, ainsi que sur les procédés d'impression UV et de gravure laser.\"\n\n[3] TAG: Contenu_Principal \nCONTENU: \"Le contenu principal aborde les spécificités techniques des plaques de test, en soulignant l'utilisation de matériaux tels que le PMMA coulé et le PVC expansé. Il est essentiel de maîtriser les procédés comme la découpe numérique et le fraisage CNC pour garantir une précision optimale. Les finitions, qu'elles soient brossées, polies ou laquées, jouent également un rôle crucial dans l'esthétique et la durabilité des produits. Les dimensions doivent être conformes aux normes en vigueur pour assurer une intégration réussie dans les environnements de signalétique.\"\n\n[4] TAG: Conclusion \nCONTENU: \"Conclusion sur l'importance d'une approche technique rigoureuse dans le choix des matériaux et des procédés pour les plaques de test. Une attention particulière aux détails, tels que les fixations par perçage, adhésif double face ou vis inox, est essentielle pour garantir la performance et la longévité des solutions d'impression et de signalétique.\""},{"provider":"gemini","model":"gemini-2.5-flash","duration":17015,"tokens":{"prompt":2384,"response":1057},"timestamp":"2025-09-16T23:29:51.867Z","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\nCONTENU: \"TAG: Contenu_Principal CONTENU: \"Le contenu principal aborde les spécificités techniques des plaques de test, en soulignant l'utilisation de matériaux tels que le PMMA coulé et le PVC expansé. Il est essentiel de maîtriser les procédés comme la découpe numérique et le fraisage CNC pour garantir une précision optimale. Les finitions, qu'elles soient brossées, polies ou laquées, jouent également un rôle crucial dans l'esthétique et la durabilité des produits. Les dimensions doivent être conformes aux normes en vigueur pour assurer une intégration réussie dans les environnements de signalétique.\"\"\n\n[2] TAG: Conclusion\nPROBLÈMES: abruptTransitions, uniformSentences\nCONTENU: \"TAG: Conclusion CONTENU: \"Conclusion sur l'importance d'une approche technique rigoureuse dans le choix des matériaux et des procédés pour les plaques de test. Une attention particulière aux détails, tels que les fixations par perçage, adhésif double face ou vis inox, est essentielle pour garantir la performance et la longévité des solutions d'impression et de signalétique.\"\"\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 technique des plaques de test révèle des spécificités clés, notamment l'emploi de matériaux comme le PMMA coulé ou le PVC expansé. Pour garantir une précision optimale, la maîtrise de procédés tels que la découpe numérique et le fraisage CNC s'avère indispensable. Par ailleurs, les finitions – qu'elles soient brossées, polies ou laquées – revêtent une importance capitale, influençant directement l'esthétique et la durabilité du produit final. Enfin, la conformité des dimensions aux normes en vigueur est impérative pour une intégration fluide au sein des environnements de signalétique.\n\n[2] En définitive, une approche technique rigoureuse s'avère primordiale dans la sélection des matériaux et l'implémentation des procédés pour les plaques de test. Cette exigence se prolonge jusque dans les moindres détails : l'attention portée aux fixations – qu'il s'agisse de perçage, d'adhésif double face ou de vis inox – est en effet cruciale. Elle garantit la performance optimale et la longévité des solutions d'impression et de signalétique."}];
|
||
const testResults = [{"name":"lightEnhancement (rapide)","status":"passed","duration":0,"timestamp":1758065310321,"llmCallsCount":1},{"name":"standardEnhancement (complet)","status":"passed","duration":0,"timestamp":1758065318054,"llmCallsCount":2},{"name":"fullEnhancement (maximum)","status":"passed","duration":0,"timestamp":1758065338909,"llmCallsCount":2},{"name":"Adversarial general","status":"passed","duration":0,"timestamp":1758065368468,"llmCallsCount":1},{"name":"Pipeline Standard → Adversarial","status":"passed","duration":0,"timestamp":1758065374849,"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> |