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>
281 lines
17 KiB
HTML
281 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Auto-Rapport TI - 9/17/2025, 2:15:06 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/17/2025, 2:15:06 PM</p>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div class="stat-card">
|
|
<div class="stat-value">1</div>
|
|
<div class="stat-label">Tests</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" style="color: #4CAF50">1</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">1</div>
|
|
<div class="stat-label">LLM Calls</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">9s</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>Pipeline 4 Phases Cohérent - AutoReporter Système</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>
|
|
|
|
<div class="llm-section">
|
|
<h3>Appels LLM (1)</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: Pipeline 4 Phases Cohérent - AutoReporter Système
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div>4439ms</div>
|
|
<div style="font-size: 12px; color: #666;">2371→1150 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":4439,"tokens":{"prompt":2371,"response":1150},"timestamp":"2025-09-17T06:15:03.426Z","testContext":"Pipeline 4 Phases Cohérent - AutoReporter Système","prompt":"MISSION: Améliore UNIQUEMENT la précision technique de ces contenus.\n\nCONTEXTE: Signalétique personnalisée - Secteur: impression/signalétique\n\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: \"Solutions digitales enterprise pour transformation métier avec architecture moderne et pipeline 4 phases\"\nAMÉLIORATIONS: ajout_termes_techniques, ajout_données_techniques\nTERMES À INTÉGRER: dibond, aluminium, PMMA\n\n[2] TAG: Introduction\nCONTENU: \"Les solutions digitales enterprise révolutionnent la gestion des processus métier grâce à leur architecture modulaire, leurs capacités d'intégration avancées et leurs outils analytics prédictive dans un pipeline complet.\"\nAMÉLIORATIONS: ajout_termes_techniques, ajout_données_techniques\nTERMES À INTÉGRER: dibond, aluminium, PMMA\n\n[3] TAG: Avantages_Techniques\nCONTENU: \"Architecture cloud-native avec APIs REST sécurisées, scalabilité automatique, monitoring en temps réel des performances système, bases de données distribuées et intelligence artificielle intégrée pour pipeline optimisé.\"\nAMÉLIORATIONS: ajout_termes_techniques, ajout_données_techniques\nTERMES À INTÉGRER: dibond, aluminium, PMMA\n\n[4] TAG: Conclusion\nCONTENU: \"Investissement stratégique permettant digitalisation complète avec pipeline 4 phases, amélioration significative de la productivité organisationnelle et avantage concurrentiel durable.\"\nAMÉLIORATIONS: ajout_termes_techniques, ajout_données_techniques\nTERMES À INTÉGRER: dibond, aluminium, PMMA\n\nCONSIGNES TECHNIQUES:\n- GARDE exactement le même message et ton\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] \"Solutions digitales enterprise pour transformation métier avec architecture moderne et pipeline 4 phases intégrant des matériaux durables tels que le dibond, l'aluminium anodisé et le PMMA coulé.\"\n\n[2] \"Les solutions digitales enterprise révolutionnent la gestion des processus métier grâce à leur architecture modulaire, leurs capacités d'intégration avancées, et leurs outils d'analytics prédictive, tout en utilisant des supports comme le dibond et le PMMA pour une signalétique de haute qualité dans un pipeline complet.\"\n\n[3] \"Architecture cloud-native avec APIs REST sécurisées, scalabilité automatique, monitoring en temps réel des performances système, bases de données distribuées, et intelligence artificielle intégrée pour pipeline optimisé, incluant des procédés d'impression UV sur dibond et aluminium pour une durabilité accrue.\"\n\n[4] \"Investissement stratégique permettant digitalisation complète avec pipeline 4 phases, amélioration significative de la productivité organisationnelle grâce à l'utilisation de matériaux comme le PMMA et l'aluminium, et avantage concurrentiel durable par des solutions de signalétique innovantes.\""}];
|
|
const testResults = [{"name":"Pipeline 4 Phases Cohérent - AutoReporter Système","status":"passed","duration":0,"timestamp":1758089703426,"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> |