StillHammer
0244521f5c
## SelectiveSmartTouch (NEW) - Architecture révolutionnaire: Analyse intelligente → Améliorations ciblées précises - 5 modules: SmartAnalysisLayer, SmartTechnicalLayer, SmartStyleLayer, SmartReadabilityLayer, SmartTouchCore - Système 10% segments: amélioration uniquement des segments les plus faibles (intensity-based) - Détection contexte globale pour prompts adaptatifs multi-secteurs - Intégration complète dans PipelineExecutor et PipelineDefinition ## Pipeline Validator Spec (NEW) - Spécification complète système validation qualité par LLM - 5 critères universels: Qualité, Verbosité, SEO, Répétitions, Naturalité - Échantillonnage intelligent par filtrage balises (pas XML) - Évaluation multi-versions avec justifications détaillées - Coût estimé: ~$1/validation (260 appels LLM) ## Optimizations - Réduction intensités fullEnhancement (technical 1.0→0.7, style 0.8→0.5) - Ajout gardes-fous anti-familiarité excessive dans StyleLayer - Sauvegarde étapes intermédiaires activée par défaut (pipeline-runner) ## Fixes - Fix typo critique SmartTouchCore.js:110 (determineLayers ToApply → determineLayersToApply) - Prompts généralisés multi-secteurs (e-commerce, SaaS, services, informatif) 🚀 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
383 lines
12 KiB
HTML
383 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pipeline Runner - SEO Generator</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--primary: #667eea;
|
|
--secondary: #764ba2;
|
|
--success: #48bb78;
|
|
--warning: #ed8936;
|
|
--error: #f56565;
|
|
--bg-light: #f7fafc;
|
|
--bg-dark: #1a202c;
|
|
--text-dark: #2d3748;
|
|
--text-light: #a0aec0;
|
|
--border-light: #e2e8f0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
color: var(--text-dark);
|
|
padding: 20px;
|
|
}
|
|
|
|
.container { max-width: 1400px; margin: 0 auto; }
|
|
|
|
header {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 20px 30px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
header h1 { color: var(--text-dark); font-size: 1.8em; }
|
|
|
|
.btn-back {
|
|
background: var(--bg-light);
|
|
color: var(--text-dark);
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-back:hover { background: var(--border-light); }
|
|
|
|
.panel {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 25px;
|
|
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.panel h2 {
|
|
color: var(--text-dark);
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid var(--border-light);
|
|
}
|
|
|
|
.form-group { margin-bottom: 20px; }
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.form-group select,
|
|
.form-group input {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 2px solid var(--border-light);
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.pipeline-preview {
|
|
background: var(--bg-light);
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.pipeline-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.summary-item {
|
|
background: white;
|
|
padding: 10px;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.summary-label {
|
|
font-size: 11px;
|
|
color: var(--text-light);
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.summary-value {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.step-list {
|
|
margin-top: 15px;
|
|
padding: 10px;
|
|
background: white;
|
|
border-radius: 6px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.step-item {
|
|
padding: 8px 12px;
|
|
margin-bottom: 5px;
|
|
background: var(--bg-light);
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
button {
|
|
padding: 12px 20px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.btn-run {
|
|
background: linear-gradient(135deg, var(--success), #38a169);
|
|
color: white;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.btn-run:hover:not(:disabled) {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(72, 187, 120, 0.4);
|
|
}
|
|
|
|
.btn-run:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: var(--border-light);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin: 15px 0;
|
|
display: none;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--primary), var(--secondary));
|
|
width: 0%;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
.progress-text {
|
|
color: var(--text-light);
|
|
font-size: 14px;
|
|
margin-top: 10px;
|
|
display: none;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--bg-light);
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: var(--text-light);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.execution-log {
|
|
background: var(--bg-dark);
|
|
color: #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
font-family: 'Fira Code', monospace;
|
|
font-size: 12px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.log-entry {
|
|
margin-bottom: 5px;
|
|
padding: 5px;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.log-success { border-left-color: var(--success); color: #68d391; }
|
|
.log-error { border-left-color: var(--error); color: #fc8181; }
|
|
|
|
.status {
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
|
|
.status.success {
|
|
background: #c6f6d5;
|
|
color: #22543d;
|
|
border: 1px solid #9ae6b4;
|
|
}
|
|
|
|
.status.error {
|
|
background: #fed7d7;
|
|
color: #822727;
|
|
border: 1px solid #f56565;
|
|
}
|
|
|
|
.status.loading {
|
|
background: #bee3f8;
|
|
color: #2b6cb0;
|
|
border: 1px solid #63b3ed;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>🚀 Pipeline Runner</h1>
|
|
<a href="index.html" class="btn-back">← Retour Accueil</a>
|
|
</header>
|
|
|
|
<div class="status" id="status"></div>
|
|
|
|
<!-- Pipeline Selection -->
|
|
<div class="panel">
|
|
<h2>📂 Sélection Pipeline</h2>
|
|
|
|
<div class="form-group">
|
|
<label for="pipelineSelect">Pipeline à exécuter :</label>
|
|
<select id="pipelineSelect" onchange="loadPipeline()">
|
|
<option value="">-- Sélectionner un pipeline --</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="pipeline-preview" id="pipelinePreview" style="display: none;">
|
|
<h3 style="margin-bottom: 10px; color: var(--text-dark);" id="pipelineName"></h3>
|
|
<p style="font-size: 13px; color: var(--text-light);" id="pipelineDesc"></p>
|
|
|
|
<div class="pipeline-summary">
|
|
<div class="summary-item">
|
|
<div class="summary-label">Étapes</div>
|
|
<div class="summary-value" id="summarySteps">-</div>
|
|
</div>
|
|
<div class="summary-item">
|
|
<div class="summary-label">Durée Estimée</div>
|
|
<div class="summary-value" id="summaryDuration">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-list" id="stepList"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Execution Settings -->
|
|
<div class="panel">
|
|
<h2>⚙️ Paramètres d'Exécution</h2>
|
|
|
|
<div class="form-group">
|
|
<label for="rowNumber">Ligne Google Sheets :</label>
|
|
<input type="number" id="rowNumber" value="2" min="2" max="1000">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label style="display: flex; align-items: center; cursor: pointer;">
|
|
<input type="checkbox" id="saveIntermediateSteps" checked style="width: auto; margin-right: 10px;">
|
|
<span>💾 Sauvegarder les étapes intermédiaires dans Google Sheets (Generated_Articles_Versioned)</span>
|
|
</label>
|
|
<p style="font-size: 12px; color: var(--text-light); margin-top: 5px; margin-left: 28px;">
|
|
Chaque étape du pipeline sera sauvegardée avec sa version (v1.1, v1.2, etc.) - ✅ Activé par défaut
|
|
</p>
|
|
</div>
|
|
|
|
<button class="btn-run" id="btnRun" onclick="runPipeline()" disabled>
|
|
🚀 Lancer l'Exécution
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Progress Section -->
|
|
<div class="panel" id="progressSection" style="display: none;">
|
|
<h2>⏳ Progression</h2>
|
|
|
|
<div class="progress-bar" id="progressBar">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
</div>
|
|
|
|
<div class="progress-text" id="progressText"></div>
|
|
</div>
|
|
|
|
<!-- Results Section -->
|
|
<div class="panel" id="resultsSection" style="display: none;">
|
|
<h2>📊 Résultats</h2>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Durée Totale</div>
|
|
<div class="stat-value" id="statDuration">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Étapes Réussies</div>
|
|
<div class="stat-value" id="statSuccessSteps">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Personnalité</div>
|
|
<div class="stat-value" id="statPersonality">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="margin-top: 25px; margin-bottom: 10px;">📄 Contenu Final Généré</h3>
|
|
<div id="finalContentContainer" style="background: var(--bg-light); padding: 15px; border-radius: 8px; margin-bottom: 20px; max-height: 400px; overflow-y: auto;">
|
|
<p style="color: var(--text-light);">Le contenu apparaîtra ici après l'exécution</p>
|
|
</div>
|
|
|
|
<h3 style="margin-top: 25px; margin-bottom: 10px;">📦 Versions Sauvegardées</h3>
|
|
<div id="versionHistory" style="background: var(--bg-light); padding: 15px; border-radius: 8px; margin-bottom: 20px;">
|
|
<p style="color: var(--text-light);">Aucune version disponible</p>
|
|
</div>
|
|
|
|
<div id="gsheetsLinkContainer" style="display: none; margin-bottom: 20px;">
|
|
<a id="gsheetsLink" href="#" target="_blank"
|
|
style="display: inline-block; padding: 12px 20px; background: linear-gradient(135deg, #34d399, #10b981); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; transition: all 0.2s;">
|
|
📊 Ouvrir dans Google Sheets
|
|
</a>
|
|
</div>
|
|
|
|
<h3 style="margin-top: 25px; margin-bottom: 10px;">📝 Log d'Exécution</h3>
|
|
<div class="execution-log" id="executionLog"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="pipeline-runner.js"></script>
|
|
</body>
|
|
</html>
|