';
+
+ // Section AVANT
+ contentHtml += '
';
+ contentHtml += '
đ€ AVANT
';
+ contentHtml += '
';
+ contentHtml += formatContentForDisplay(formatContentForTag(data.result.beforeAfter.before), 'compact');
+ contentHtml += '
';
+
+ // Section APRĂS
+ contentHtml += '
';
+ contentHtml += '
âš APRĂS
';
+ contentHtml += '
';
+ contentHtml += formatContentForDisplay(formatContentForTag(data.result.beforeAfter.after), 'compact');
+ contentHtml += '
';
+
+ contentHtml += '
';
+
+ // Résultat final complet en bas
+ if (data.result && data.result.formatted) {
+ contentHtml += '';
+ statsHtml += '
đ DĂ©tail des Phases:
';
+
+ // Phase 1: Génération Initiale
+ if (data.result.phases.initialGeneration) {
+ const phase = data.result.phases.initialGeneration;
+ statsHtml += `
+
+
đŻ Phase 1: GĂ©nĂ©ration Initiale
+
+ ${phase.generated}/${phase.total} éléments ⹠${phase.duration}ms ⹠${phase.llmProvider}
+
+
+ `;
+ }
+
+ // Phase 2: Enhancement Sélectif
+ if (data.result.phases.selectiveEnhancement) {
+ const phase = data.result.phases.selectiveEnhancement;
+ statsHtml += `
+
+
⥠Phase 2: Enhancement Sélectif
+
+ ${phase.totalEnhancements} améliorations ⹠${phase.totalDuration}ms
+
+ `;
+
+ // Détail des sous-étapes d'enhancement
+ if (phase.steps) {
+ phase.steps.forEach((step, index) => {
+ const stepEmoji = step.name === 'technical' ? 'đ§' :
+ step.name === 'transitions' ? 'đ' :
+ step.name === 'style' ? 'đš' : 'âïž';
+ const stepName = step.name === 'technical' ? 'Technique' :
+ step.name === 'transitions' ? 'Transitions' :
+ step.name === 'style' ? 'Style' : step.name;
+
+ statsHtml += `
+
+ ${stepEmoji} ${stepName}: ${step.elementsEnhanced || 0} éléments ⹠${step.duration}ms ⹠${step.llm}
+
+ `;
+ });
+ }
+
+ statsHtml += '
';
+ }
+
+ statsHtml += '
';
+ }
+
+ // Afficher détails des appels LLM
+ if (data.result && data.result.llmCalls && data.result.llmCalls.length > 0) {
+ statsHtml += '';
+ statsHtml += '
đ€ Appels LLM:
';
+
+ data.result.llmCalls.forEach((call, index) => {
+ const providerEmoji = call.provider === 'claude' ? 'đŁ' :
+ call.provider === 'gpt4' ? 'đą' :
+ call.provider === 'gemini' ? 'đ”' :
+ call.provider === 'mistral' ? 'đ ' : 'đ€';
+ const phaseName = call.phase ? ` (${call.phase})` : '';
+
+ statsHtml += `
+
+
+ ${providerEmoji} ${call.provider.toUpperCase()}${phaseName}
+
+
+ ${call.tokens || 0} tokens âą $${(call.cost || 0).toFixed(4)}
+ ${call.error ? ' âą â ' + call.error : ''}
+
+
+ `;
+ });
+
+ statsHtml += '
';
+ }
+
+ if (statsDiv) {
+ statsDiv.innerHTML = statsHtml;
+ }
+
// Mettre Ă jour les stats du bouton
const stepStats = document.getElementById(`stepStats${stepId}`);
if (stepStats && data.stats) {
- stepStats.innerHTML = `${data.stats.duration}ms