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
45 KiB
HTML
445 lines
45 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Auto-Rapport TI - 9/16/2025, 11:13:34 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:13:34 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">7</div>
|
||
<div class="stat-label">LLM Calls</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">76s</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 • 6s 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 • 28s 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 • 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(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;">
|
||
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>
|
||
|
||
<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>6372ms</div>
|
||
<div style="font-size: 12px; color: #666;">1835→1295 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>8066ms</div>
|
||
<div style="font-size: 12px; color: #666;">1835→1306 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>20035ms</div>
|
||
<div style="font-size: 12px; color: #666;">2253→976 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>6982ms</div>
|
||
<div style="font-size: 12px; color: #666;">1833→1562 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>16302ms</div>
|
||
<div style="font-size: 12px; color: #666;">1999→728 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>10330ms</div>
|
||
<div style="font-size: 12px; color: #666;">1453→904 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>5051ms</div>
|
||
<div style="font-size: 12px; color: #666;">1835→1104 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":6372,"tokens":{"prompt":1835,"response":1295},"timestamp":"2025-09-16T15:12:26.166Z","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 de plaque d'intégration rapide pour signalétique : amélioration technique requise\"\n\n[2] TAG: Introduction \nCONTENU: \"Cette introduction présente les enjeux techniques liés aux plaques d'intégration rapide, notamment en matière de choix des matériaux comme le dibond et le PMMA coulé, ainsi que les procédés d'impression UV et de découpe numérique utilisés dans le secteur de la signalétique.\"\n\n[3] TAG: Contenu_Principal \nCONTENU: \"Le contenu principal aborde les spécificités techniques des plaques d'intégration rapide, en mettant l'accent sur les matériaux tels que l'aluminium anodisé et le PVC expansé. Nous examinerons les procédés d'impression UV et de gravure laser, ainsi que les finitions possibles, comme le brossé ou le laqué. Il est essentiel de respecter les normes de dimensions standards pour garantir une intégration optimale dans les environnements professionnels.\"\n\n[4] TAG: Conclusion \nCONTENU: \"En conclusion, les plaques d'intégration rapide représentent une solution efficace pour le secteur de la signalétique, à condition de choisir les matériaux et procédés appropriés. L'utilisation de fixations adaptées, telles que le perçage ou les adhésifs double face, est cruciale pour assurer la durabilité et la qualité des installations.\""},{"provider":"openai","model":"gpt-4o-mini","duration":8066,"tokens":{"prompt":1835,"response":1306},"timestamp":"2025-09-16T15:12:34.244Z","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 dans le domaine de l'impression et de la signalétique\"\n\n[2] TAG: Introduction \nCONTENU: \"Introduction sur les tests rapides d'intégration dans le secteur de l'impression et de la signalétique, soulignant l'importance des matériaux tels que le dibond et l'aluminium anodisé, ainsi que des procédés comme l'impression UV et la découpe numérique.\"\n\n[3] TAG: Contenu_Principal \nCONTENU: \"Le contenu principal aborde les méthodes de test rapide pour évaluer la qualité des produits signalétiques. Les matériaux utilisés, tels que le PMMA coulé et le PVC expansé, doivent être soumis à des tests de résistance et de durabilité. Les procédés de fabrication, incluant la gravure laser et le fraisage CNC, sont également cruciaux pour assurer la précision des dimensions et des finitions, qu'elles soient brossées, polies ou texturées.\"\n\n[4] TAG: Conclusion \nCONTENU: \"La conclusion souligne l'importance d'une approche technique rigoureuse dans l'évaluation des produits d'impression et de signalétique. En intégrant des normes spécifiques et des méthodes de fixation telles que le perçage et l'utilisation d'adhésifs double face, les entreprises peuvent garantir la qualité et la durabilité de leurs solutions.\""},{"provider":"gemini","model":"gemini-2.5-flash","duration":20035,"tokens":{"prompt":2253,"response":976},"timestamp":"2025-09-16T15:12:54.295Z","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 méthodes de test rapide pour évaluer la qualité des produits signalétiques. Les matériaux utilisés, tels que le PMMA coulé et le PVC expansé, doivent être soumis à des tests de résistance et de durabilité. Les procédés de fabrication, incluant la gravure laser et le fraisage CNC, sont également cruciaux pour assurer la précision des dimensions et des finitions, qu'elles soient brossées, polies ou texturées.\"\"\n\n[2] TAG: Conclusion\nPROBLÈMES: abruptTransitions, uniformSentences\nCONTENU: \"TAG: Conclusion CONTENU: \"La conclusion souligne l'importance d'une approche technique rigoureuse dans l'évaluation des produits d'impression et de signalétique. En intégrant des normes spécifiques et des méthodes de fixation telles que le perçage et l'utilisation d'adhésifs double face, les entreprises peuvent garantir la qualité et la durabilité de leurs solutions.\"\"\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] Notre analyse principale se concentre sur les méthodes de test rapide, fondamentales pour évaluer la qualité des produits signalétiques. Concrètement, les matériaux employés, tels que le PMMA coulé et le PVC expansé, doivent impérativement être soumis à des tests de résistance et de durabilité. De plus, la précision des dimensions et des finitions – qu'elles soient brossées, polies ou texturées – est directement impactée par les procédés de fabrication mis en œuvre, incluant la gravure laser et le fraisage CNC.\n\n[2] En somme, cette analyse conclut sur l'importance cruciale d'une approche technique rigoureuse pour l'évaluation des produits d'impression et de signalétique. Pour ce faire, l'intégration de normes spécifiques, couplée à l'adoption de méthodes de fixation éprouvées telles que le perçage et l'emploi d'adhésifs double face, est indispensable. C'est ainsi que les entreprises pourront pleinement garantir la qualité et la durabilité de leurs solutions."},{"provider":"openai","model":"gpt-4o-mini","duration":6982,"tokens":{"prompt":1833,"response":1562},"timestamp":"2025-09-16T15:13:01.292Z","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 de plaque d'intégration rapide : Optimisation technique 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 plaques d'intégration rapide dans le secteur de l'impression et de la signalétique, en mettant l'accent sur les matériaux 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 d'intégration rapide, en détaillant les matériaux comme l'aluminium anodisé et le PMMA coulé, ainsi que les procédés de gravure laser et de fraisage CNC. Il est essentiel d'optimiser les dimensions des plaques pour garantir une efficacité maximale, tout en respectant les normes de qualité en vigueur. Les finitions, qu'elles soient brossées ou laquées, jouent également un rôle crucial dans l'esthétique et la durabilité des produits. Les méthodes de fixation, comme le perçage ou l'utilisation d'adhésif double face, doivent être choisies en fonction de l'application spécifique.\"\n\n[4] TAG: Conclusion \nCONTENU: \"En conclusion, l'intégration rapide de plaques dans le secteur de l'impression et de la signalétique nécessite une compréhension approfondie des matériaux, procédés et normes. L'optimisation technique des plaques, à travers des choix éclairés de dimensions et de finitions, assure une performance et une durabilité accrues, répondant ainsi aux exigences professionnelles du marché.\""},{"provider":"gemini","model":"gemini-2.5-flash","duration":16302,"tokens":{"prompt":1999,"response":728},"timestamp":"2025-09-16T15:13:17.597Z","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: Contenu_Principal\nPROBLÈMES: abruptTransitions, uniformSentences\nCONTENU: \"TAG: Contenu_Principal CONTENU: \"Le contenu principal aborde les spécificités des plaques d'intégration rapide, en détaillant les matériaux comme l'aluminium anodisé et le PMMA coulé, ainsi que les procédés de gravure laser et de fraisage CNC. Il est essentiel d'optimiser les dimensions des plaques pour garantir une efficacité maximale, tout en respectant les normes de qualité en vigueur. Les finitions, qu'elles soient brossées ou laquées, jouent également un rôle crucial dans l'esthétique et la durabilité des produits. Les méthodes de fixation, comme le perçage ou l'utilisation d'adhésif double face, doivent être choisies en fonction de l'application spécifique.\"\"\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] Le contenu principal explore les spécificités des plaques d'intégration rapide. Il détaille les matériaux clés, tels que l'aluminium anodisé et le PMMA coulé, ainsi que les procédés de fabrication, notamment la gravure laser et le fraisage CNC. Pour une efficacité maximale, l'optimisation des dimensions de ces plaques est primordiale, toujours en conformité avec les normes de qualité en vigueur. Au-delà des aspects fonctionnels, les finitions – qu'elles soient brossées ou laquées – revêtent une importance capitale pour l'esthétique et la durabilité du produit final. Enfin, le choix des méthodes de fixation, comme le perçage ou l'adhésif double face, doit être précisément adapté à l'application spécifique envisagée."},{"provider":"claude","model":"claude-sonnet-4-20250514","duration":10330,"tokens":{"prompt":1453,"response":904},"timestamp":"2025-09-16T15:13:27.972Z","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 : les bases techniques qui comptent vraiment\n\n[2] Bon, parlons franchement. Une intro basique, ça ne passe plus vraiment aujourd'hui. Il faut dire que... enfin, vous voyez ce que je veux dire. Le vocabulaire de base, c'est bien, mais on peut faire mieux que ça.\n\n[3] Pour le cœur du sujet, évitons les termes bateau. \"Efficace\" et autres mots-valises, on oublie. Ce qui marche vraiment ? Une approche plus directe, plus personnelle aussi. D'ailleurs, quand on y réfléchit bien, la précision technique vient souvent de détails qu'on néglige au premier coup d'œil. Ces petites choses qui font toute la différence au final.\n\n[4] Alors voilà. Cette conclusion basique méritait un petit coup de neuf, c'est sûr. Mais attention - pas question de tomber dans le piège du jargon professionnel à tout prix. Parfois, la simplicité bien maîtrisée vaut tous les grands mots du monde."},{"provider":"openai","model":"gpt-4o-mini","duration":5051,"tokens":{"prompt":1835,"response":1104},"timestamp":"2025-09-16T15:13:33.042Z","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] \"Test titre avec contenu générique nécessitant amélioration technique : Évaluation des plaques signalétiques en dibond et aluminium anodisé pour une intégration rapide.\"\n\n[2] \"Introduction à l'importance des plaques signalétiques dans le secteur de l'impression et de la signalétique, en mettant l'accent sur les matériaux tels que le dibond et le PMMA coulé, ainsi que sur les procédés d'impression UV et de découpe numérique pour garantir une qualité optimale.\"\n\n[3] \"Contenu principal abordant les spécificités techniques des plaques signalétiques, incluant des termes tels que gravure laser, fraisage CNC, et les différentes finitions disponibles comme le brossé et le laqué. Une attention particulière sera accordée aux dimensions standards et aux normes de sécurité en vigueur, ainsi qu'aux solutions de fixation comme le perçage et les adhésifs double face.\"\n\n[4] \"Conclusion soulignant l'importance d'une sélection rigoureuse des matériaux et procédés dans la fabrication de plaques signalétiques, afin d'assurer durabilité et efficacité, tout en respectant les normes de qualité du secteur.\""}];
|
||
const testResults = [{"name":"lightEnhancement (rapide)","status":"passed","duration":0,"timestamp":1758035546166,"llmCallsCount":1},{"name":"standardEnhancement (complet)","status":"passed","duration":0,"timestamp":1758035554244,"llmCallsCount":2},{"name":"fullEnhancement (maximum)","status":"passed","duration":0,"timestamp":1758035581292,"llmCallsCount":2},{"name":"Adversarial general","status":"passed","duration":0,"timestamp":1758035607972,"llmCallsCount":1},{"name":"Pipeline Standard → Adversarial","status":"passed","duration":0,"timestamp":1758035613042,"llmCallsCount":1}];
|
||
|
||
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> |