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>
295 lines
21 KiB
HTML
295 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Auto-Rapport TI - 9/17/2025, 2:24:46 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:24:46 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">2</div>
|
|
<div class="stat-label">LLM Calls</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">34s</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 Complet - Tous Appels LLM</strong></div>
|
|
<div style="font-size: 12px; color: #666;">
|
|
2 LLM calls • 18s 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 (2)</h3>
|
|
|
|
<div class="llm-call clickable" onclick="openModal(0)">
|
|
<div>
|
|
<strong>claude</strong> (claude-sonnet-4-20250514)
|
|
<div style="font-size: 12px; color: #666; margin-top: 2px;">
|
|
Test: Pipeline 4 Phases Complet - Tous Appels LLM
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div>8630ms</div>
|
|
<div style="font-size: 12px; color: #666;">1433→615 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: Pipeline 4 Phases Complet - Tous Appels LLM
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div>9396ms</div>
|
|
<div style="font-size: 12px; color: #666;">2647→1640 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":"claude","model":"claude-sonnet-4-20250514","duration":8630,"tokens":{"prompt":1433,"response":615},"timestamp":"2025-09-17T06:24:22.460Z","testContext":"Pipeline 4 Phases Complet - Tous Appels LLM","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: \"Solutions digitales enterprise pour transformation métier avec architecture moderne et pipeline 4 phases complet\"\n\n[2] TAG: Introduction\nORIGINAL: \"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.\"\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.96\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] Outils numériques d'entreprise : comment transformer votre business avec une approche moderne en 4 étapes concrètes\n\n[2] Bon, parlons franchement des outils numériques en entreprise. Ces solutions changent vraiment la donne pour les processus business - et c'est pas juste du marketing. Leur force ? Une construction modulaire qui s'adapte, des connexions poussées entre systèmes, plus des capacités d'analyse qui anticipent les tendances. Le tout dans une démarche structurée, étape par étape. Alors oui, ça peut sembler technique au premier regard, mais en réalité c'est assez logique une fois qu'on y plonge."},{"provider":"openai","model":"gpt-4o-mini","duration":9396,"tokens":{"prompt":2647,"response":1640},"timestamp":"2025-09-17T06:24:31.907Z","testContext":"Pipeline 4 Phases Complet - Tous Appels LLM","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.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: \"Outils numériques d'entreprise : comment transformer votre business avec une approche moderne en 4 étapes concrètes\"\nAMÉLIORATIONS: ajout_termes_techniques, ajout_données_techniques\nTERMES À INTÉGRER: dibond, aluminium, PMMA\n\n[2] TAG: Introduction\nCONTENU: \"parlons franchement des outils numériques en entreprise. Ces solutions changent vraiment la donne pour les processus business - et c'est pas juste du marketing. Leur force ? Une construction modulaire qui s'adapte, des connexions poussées entre systèmes, plus des capacités d'analyse qui anticipent les tendances. Le tout dans une démarche structurée, étape par étape. Alors oui, ça peut sembler technique au premier regard, mais en réalité c'est assez logique une fois qu'on y plonge.\"\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] \"Outils numériques d'entreprise : comment transformer votre business avec une approche moderne en 4 étapes concrètes, en intégrant des matériaux tels que le dibond, l'aluminium anodisé et le PMMA pour une signalétique personnalisée durable et esthétique.\"\n\n[2] \"Parlons franchement des outils numériques en entreprise. Ces solutions changent vraiment la donne pour les processus business - et ce n'est pas juste du marketing. Leur force ? Une construction modulaire qui s'adapte, des connexions poussées entre systèmes, plus des capacités d'analyse qui anticipent les tendances. En intégrant des matériaux comme le dibond et le PMMA coulé, vous pouvez créer des signalétiques robustes et légères. Le tout dans une démarche structurée, étape par étape. Alors oui, ça peut sembler technique au premier regard, mais en réalité, c'est assez logique une fois qu'on y plonge.\"\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é. En utilisant des procédés comme l'impression UV sur dibond ou la gravure laser sur aluminium anodisé, vous garantissez une qualité visuelle et une durabilité exceptionnelles.\"\n\n[4] \"Investissement stratégique permettant une digitalisation complète avec pipeline en 4 phases, intégrant des matériaux comme le dibond et le PMMA pour une signalétique efficace. Cela entraîne une amélioration significative de la productivité organisationnelle et un avantage concurrentiel durable, tout en respectant les normes de fabrication et de finition.\""}];
|
|
const testResults = [{"name":"Pipeline 4 Phases Complet - Tous Appels LLM","status":"passed","duration":0,"timestamp":1758090262460,"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> |