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>
445 lines
44 KiB
HTML
445 lines
44 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Auto-Rapport TI - 9/17/2025, 8:08:44 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, 8:08:44 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">7</div>
|
||
<div class="stat-label">LLM Calls</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">78s</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 • 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;">
|
||
1 LLM calls • 4s 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 • 16s 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 (7)</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>8965ms</div>
|
||
<div style="font-size: 12px; color: #666;">1835→1542 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>7038ms</div>
|
||
<div style="font-size: 12px; color: #666;">1835→1290 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>15620ms</div>
|
||
<div style="font-size: 12px; color: #666;">1835→555 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>4097ms</div>
|
||
<div style="font-size: 12px; color: #666;">1833→874 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>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>16204ms</div>
|
||
<div style="font-size: 12px; color: #666;">1453→724 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>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>7210ms</div>
|
||
<div style="font-size: 12px; color: #666;">1835→1463 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>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>16218ms</div>
|
||
<div style="font-size: 12px; color: #666;">2469→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":8965,"tokens":{"prompt":1835,"response":1542},"timestamp":"2025-09-17T00:07:36.794Z","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: \"Optimisation des plaques de test pour l'intégration rapide en impression et signalétique\"\n\n[2] TAG: Introduction \nCONTENU: \"Cette introduction vise à présenter les enjeux techniques liés à l'intégration rapide des plaques de test dans le secteur de l'impression et de la signalétique, en mettant l'accent sur les matériaux utilisé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 des plaques de test, en détaillant les matériaux comme l'aluminium anodisé et le PMMA coulé, ainsi que les procédés de fabrication tels que la gravure laser et le fraisage CNC. Il est crucial d'optimiser les dimensions des plaques pour garantir une précision maximale lors de l'impression et de la signalétique, tout en respectant les normes de qualité en vigueur. Les finitions, qu'elles soient brossées, polies ou texturées, jouent également un rôle déterminant dans l'esthétique et la durabilité des produits.\"\n\n[4] TAG: Conclusion \nCONTENU: \"En conclusion, l'amélioration technique des plaques de test pour l'intégration rapide repose sur une compréhension approfondie des matériaux, des procédés et des normes spécifiques à l'industrie de l'impression et de la signalétique. L'adoption de techniques avancées telles que le perçage pour les fixations et l'utilisation d'adhésifs double face permet d'assurer une performance optimale et une longévité accrue des solutions proposées.\""},{"provider":"openai","model":"gpt-4o-mini","duration":7038,"tokens":{"prompt":1835,"response":1290},"timestamp":"2025-09-17T00:07:43.845Z","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 pour l'impression et la signalétique\"\n\n[2] TAG: Introduction \nCONTENU: \"Introduction sur l'importance des plaques en dibond et aluminium anodisé dans le secteur de l'impression et de la signalétique, mettant en avant les procédés d'impression UV et de découpe numérique pour une qualité optimale.\"\n\n[3] TAG: Contenu_Principal \nCONTENU: \"Le contenu principal aborde l'utilisation des matériaux tels que le PMMA coulé et le PVC expansé dans la fabrication de plaques. Il est essentiel de considérer les dimensions standard et les normes de sécurité lors de la conception. Les procédés comme la gravure laser et le fraisage CNC permettent d'obtenir des finitions précises, qu'elles soient brossées, polies ou texturées, tout en garantissant une durabilité grâce à des fixations adaptées comme le perçage ou les adhésifs double face.\"\n\n[4] TAG: Conclusion \nCONTENU: \"La conclusion souligne l'importance de choisir des matériaux et procédés adéquats pour optimiser la performance des plaques dans le domaine de l'impression et de la signalétique, tout en respectant les normes en vigueur et en garantissant une installation sécurisée avec des fixations appropriées.\""},{"provider":"gemini","model":"gemini-2.5-flash","duration":15620,"tokens":{"prompt":1835,"response":555},"timestamp":"2025-09-17T00:07:59.479Z","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\nCONTENU: \"TAG: Contenu_Principal CONTENU: \"Le contenu principal aborde l'utilisation des matériaux tels que le PMMA coulé et le PVC expansé dans la fabrication de plaques. Il est essentiel de considérer les dimensions standard et les normes de sécurité lors de la conception. Les procédés comme la gravure laser et le fraisage CNC permettent d'obtenir des finitions précises, qu'elles soient brossées, polies ou texturées, tout en garantissant une durabilité grâce à des fixations adaptées comme le perçage ou les adhésifs double face.\"\"\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] La fabrication de plaques techniques repose sur l'emploi de matériaux éprouvés comme le PMMA coulé et le PVC expansé. Lors de leur conception, il est impératif de considérer les dimensions standard et les normes de sécurité inhérentes. Pour concrétiser ces exigences, des procédés tels que la gravure laser et le fraisage CNC sont mis en œuvre. Ces méthodes garantissent des finitions précises – brossées, polies ou texturées – et assurent la durabilité de l'ensemble, notamment par des fixations adaptées comme le perçage ou les adhésifs double face."},{"provider":"openai","model":"gpt-4o-mini","duration":4097,"tokens":{"prompt":1833,"response":874},"timestamp":"2025-09-17T00:08:03.587Z","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 contenu générique nécessitant amélioration technique sur les plaques d'impression UV en dibond\"\n\n[2] TAG: Introduction \nCONTENU: \"Introduction sur les plaques d'intégration rapide en signalétique, mettant en avant l'importance des matériaux comme le PMMA coulé et les procédés d'impression UV.\"\n\n[3] TAG: Contenu_Principal \nCONTENU: \"Le contenu principal présente les caractéristiques techniques des plaques en aluminium anodisé, soulignant l'efficacité des procédés de découpe numérique et de gravure laser pour des dimensions précises et des finitions texturées.\"\n\n[4] TAG: Conclusion \nCONTENU: \"Conclusion sur l'importance d'utiliser des normes de fabrication rigoureuses pour garantir la durabilité et l'esthétique des plaques, notamment en optant pour des fixations adaptées comme les vis inox et les plots de fixation.\""},{"provider":"claude","model":"claude-sonnet-4-20250514","duration":16204,"tokens":{"prompt":1453,"response":724},"timestamp":"2025-09-17T00:08:19.832Z","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] Comment bien tester un titre qui manque franchement de punch technique\n\n[2] Bon, disons-le clairement : cette intro basique mérite qu'on y mette un peu plus de substance. C'est vrai quoi, on peut faire mieux que ça.\n\n[3] Le cœur du sujet, c'est là où ça se complique un peu. On a tendance à utiliser des termes tout faits, vous savez, ces mots qu'on retrouve partout. Mais attention - et là je change un peu d'angle - la précision technique, ça demande qu'on creuse davantage. Pas juste du joli vocabulaire. Du concret.\n\n[4] Au final, cette conclusion... eh bien, elle fait le boulot mais sans plus. Disons qu'elle pourrait gagner en profondeur professionnelle, histoire de finir en beauté plutôt qu'en queue de poisson."},{"provider":"openai","model":"gpt-4o-mini","duration":7210,"tokens":{"prompt":1835,"response":1463},"timestamp":"2025-09-17T00:08:27.056Z","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 sur l'intégration rapide de plaques signalétiques en dibond et aluminium anodisé\"\n\n[2] TAG: Introduction \nCONTENU: \"Introduction sur l'intégration rapide des plaques signalétiques, en mettant l'accent sur les matériaux tels que le PMMA coulé et le PVC expansé, ainsi que sur les procédés d'impression UV et de gravure laser.\"\n\n[3] TAG: Contenu_Principal \nCONTENU: \"Le contenu principal présente les avantages des plaques en dibond et aluminium anodisé pour la signalétique. L'utilisation de procédés tels que la découpe numérique et le fraisage CNC garantit une précision optimale. Les dimensions standard des plaques doivent respecter les normes en vigueur pour assurer une installation efficace. Les finitions, qu'elles soient brossées ou laquées, influencent également l'esthétique et la durabilité du produit. Les systèmes de fixation, incluant le perçage et les adhésifs double face, sont cruciaux pour une installation sécurisée.\"\n\n[4] TAG: Conclusion \nCONTENU: \"En conclusion, l'intégration rapide de plaques signalétiques en utilisant des matériaux techniques comme le dibond et l'aluminium anodisé, ainsi que des procédés avancés tels que l'impression UV, assure une solution durable et esthétique. Il est essentiel de respecter les normes de dimensions et de choisir des finitions adaptées pour maximiser l'impact visuel et la longévité des produits.\""},{"provider":"gemini","model":"gemini-2.5-flash","duration":16218,"tokens":{"prompt":2469,"response":47},"timestamp":"2025-09-17T00:08:43.277Z","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 présente les avantages des plaques en dibond et aluminium anodisé pour la signalétique. L'utilisation de procédés tels que la découpe numérique et le fraisage CNC garantit une précision optimale. Les dimensions standard des plaques doivent respecter les normes en vigueur pour assurer une installation efficace. Les finitions, qu'elles soient brossées ou laquées, influencent également l'esthétique et la durabilité du produit. Les systèmes de fixation, incluant le perçage et les adhésifs double face, sont cruciaux pour une installation sécurisée.\"\"\n\n[2] TAG: Conclusion\nPROBLÈMES: abruptTransitions, uniformSentences, formalityImbalance\nCONTENU: \"TAG: Conclusion CONTENU: \"En conclusion, l'intégration rapide de plaques signalétiques en utilisant des matériaux techniques comme le dibond et l'aluminium anodisé, ainsi que des procédés avancés tels que l'impression UV, assure une solution durable et esthétique. Il est essentiel de respecter les normes de dimensions et de choisir des finitions adaptées pour maximiser l'impact visuel et la longévité 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]"}];
|
||
const testResults = [{"name":"lightEnhancement (rapide)","status":"passed","duration":0,"timestamp":1758067656794,"llmCallsCount":1},{"name":"standardEnhancement (complet)","status":"passed","duration":0,"timestamp":1758067663845,"llmCallsCount":2},{"name":"fullEnhancement (maximum)","status":"passed","duration":0,"timestamp":1758067683587,"llmCallsCount":1},{"name":"Adversarial general","status":"passed","duration":0,"timestamp":1758067699832,"llmCallsCount":1},{"name":"Pipeline Standard → Adversarial","status":"passed","duration":0,"timestamp":1758067707056,"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> |