5c7cbe0ccf
Hot Topics: - Dynamic topics from /api/hot-topics loaded in Blog Engine tab - 7 data sources (prices, competitors, hype cycle, news, conferences, research, evergreen) - Urgency badges: BREAKING (red), HOT (orange), TRENDING (yellow), EMERGING (green) Pipeline Lock: - Only 1 generation at a time, 'Pipeline Busy' toast on double-click - Progress bar with step names (external hot-topics.js, no inline hacks) Blog Delete: - DELETE /api/blog/:id endpoint - Delete button (✕) on each blog in list - 'Delete All Templates' button to clean up test drafts Fix: dashboard JS extracted to external hot-topics.js to avoid sed quote hell
177 lines
8.7 KiB
JavaScript
177 lines
8.7 KiB
JavaScript
/**
|
|
* Hot Topics + Blog Pipeline UX Enhancement (v0.2.5)
|
|
* Loaded after main dashboard script.
|
|
* Overrides generateBlog + pollBlogLlm with improved versions.
|
|
*/
|
|
(function() {
|
|
var API = window.API || '';
|
|
var blogPipelineRunning = false;
|
|
|
|
var STEP_NAMES = [
|
|
'Topic Expansion', 'Angle Selection', 'Outline Generation',
|
|
'Master Draft (writing...)', 'Reality Injection', 'Technical Deepening',
|
|
'Opinion Layer', 'Kill AI Tone', 'QA Check', 'Quality Score'
|
|
];
|
|
|
|
// Override generateBlog with pipeline lock + progress UI
|
|
window.generateBlog = function(topic, speed, customTitle, customAngle) {
|
|
if (blogPipelineRunning) {
|
|
if (typeof showToast === 'function') showToast('Pipeline Busy', 'A blog is already being generated. Please wait.');
|
|
return;
|
|
}
|
|
blogPipelineRunning = true;
|
|
|
|
var blogList = document.getElementById('blog-list');
|
|
if (blogList) {
|
|
blogList.innerHTML =
|
|
'<div style="background:linear-gradient(135deg,#1a1a1a,#2a2a2a);color:white;padding:2rem;border-radius:12px;text-align:center">' +
|
|
'<div style="font-size:1.4rem;font-weight:700;margin-bottom:1rem">Generating Blog with AI...</div>' +
|
|
'<div id="bp-status" style="font-size:1rem;color:#FF8100;margin-bottom:0.5rem">Starting 10-step Flexoptix Style pipeline...</div>' +
|
|
'<div id="bp-step" style="font-size:0.85rem;color:#aaa">Connecting to LLM (qwen2.5:14b)</div>' +
|
|
'<div style="margin-top:1.5rem;background:#333;border-radius:8px;height:8px;overflow:hidden">' +
|
|
'<div id="bp-bar" style="width:2%;height:100%;background:#FF8100;transition:width 0.5s ease"></div></div>' +
|
|
'<div id="bp-pct" style="font-size:0.8rem;color:#666;margin-top:0.5rem">0%</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
var body = { topic: topic };
|
|
if (speed) body.speed = speed;
|
|
|
|
fetch((API || '') + '/api/blog/generate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body)
|
|
}).then(function(r) { return r.json(); }).then(function(data) {
|
|
if (data.success && data.draft) {
|
|
var s = document.getElementById('bp-status');
|
|
if (s) s.textContent = 'Template created. LLM pipeline running (~10 min)...';
|
|
var b = document.getElementById('bp-bar');
|
|
if (b) b.style.width = '5%';
|
|
pollPipeline(data.draft.id, 0);
|
|
} else {
|
|
blogPipelineRunning = false;
|
|
if (typeof showToast === 'function') showToast('Error', (data.error || 'Generation failed'), true);
|
|
if (typeof loadBlogDrafts === 'function') loadBlogDrafts();
|
|
}
|
|
}).catch(function(err) {
|
|
blogPipelineRunning = false;
|
|
if (typeof showToast === 'function') showToast('Network Error', err.message, true);
|
|
if (typeof loadBlogDrafts === 'function') loadBlogDrafts();
|
|
});
|
|
};
|
|
|
|
function pollPipeline(id, attempt) {
|
|
if (attempt > 80) {
|
|
blogPipelineRunning = false;
|
|
if (typeof showToast === 'function') showToast('Timeout', 'Pipeline took too long. Check the blog list.');
|
|
if (typeof loadBlogDrafts === 'function') loadBlogDrafts();
|
|
return;
|
|
}
|
|
setTimeout(function() {
|
|
fetch((API || '') + '/api/blog/' + id).then(function(r) { return r.json(); }).then(function(data) {
|
|
var d = data.draft || data;
|
|
var gen = d.generated_by || '';
|
|
var steps = d.pipeline_steps_completed || 0;
|
|
var done = gen && gen !== 'tip-blog-engine-template' && gen.length > 0;
|
|
|
|
if (done) {
|
|
// Pipeline complete!
|
|
var bar = document.getElementById('bp-bar');
|
|
var pct = document.getElementById('bp-pct');
|
|
var status = document.getElementById('bp-status');
|
|
var step = document.getElementById('bp-step');
|
|
if (bar) bar.style.width = '100%';
|
|
if (pct) pct.textContent = '100%';
|
|
if (status) { status.textContent = 'Blog generated! ' + (d.word_count || '?') + ' words'; status.style.color = '#2d6a4f'; }
|
|
if (step) step.textContent = 'Generated by: ' + gen;
|
|
blogPipelineRunning = false;
|
|
if (typeof showToast === 'function') showToast('Blog Ready!', (d.title || 'Article') + ' — ' + (d.word_count || '?') + ' words');
|
|
setTimeout(function() {
|
|
if (typeof loadBlogDrafts === 'function') loadBlogDrafts();
|
|
if (typeof viewBlogDraft === 'function') viewBlogDraft(id);
|
|
}, 2000);
|
|
} else {
|
|
// Still processing
|
|
var pctVal = Math.min(95, steps * 10 + 5);
|
|
var bar = document.getElementById('bp-bar');
|
|
var pct = document.getElementById('bp-pct');
|
|
var status = document.getElementById('bp-status');
|
|
var step = document.getElementById('bp-step');
|
|
if (bar) bar.style.width = pctVal + '%';
|
|
if (pct) pct.textContent = pctVal + '%';
|
|
if (status) status.textContent = 'Step ' + steps + '/10';
|
|
if (step && steps > 0 && steps <= 10) step.textContent = STEP_NAMES[steps - 1] || 'Processing...';
|
|
pollPipeline(id, attempt + 1);
|
|
}
|
|
}).catch(function() { pollPipeline(id, attempt + 1); });
|
|
}, 15000);
|
|
}
|
|
|
|
// Hot topics loader
|
|
window.loadHotTopics = function() {
|
|
var grid = document.getElementById('hot-topics-grid');
|
|
if (!grid) return;
|
|
grid.innerHTML = '<div class="loading pulse">Discovering hot topics...</div>';
|
|
|
|
fetch((API || '') + '/api/hot-topics').then(function(r) { return r.json(); }).then(function(data) {
|
|
if (!data.topics || data.topics.length === 0) {
|
|
grid.innerHTML = '<div class="gen-card" style="cursor:pointer" onclick="generateBlog(\'hype_cycle\',\'800G\')"><div class="gen-card-title">Hype Cycle Analysis</div></div>';
|
|
return;
|
|
}
|
|
var colors = { breaking: '#c1121f', hot: '#FF8100', trending: '#e6a800', emerging: '#2d6a4f' };
|
|
grid.innerHTML = data.topics.slice(0, 6).map(function(t) {
|
|
var c = colors[t.urgency] || '#888';
|
|
var escaped = encodeURIComponent(t.blog_type || 'hype_cycle');
|
|
var title = (t.title || '').replace(/'/g, "\\'").replace(/"/g, '"');
|
|
return '<div class="gen-card" style="cursor:pointer;border-left:3px solid ' + c + '" onclick="generateBlog(\'' + escaped + '\')">' +
|
|
'<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px">' +
|
|
'<span style="font-size:0.65rem;text-transform:uppercase;font-weight:600;color:' + c + '">' + t.urgency + '</span>' +
|
|
'<span style="font-size:0.6rem;color:var(--text-dim)">' + (t.source_type || '') + '</span></div>' +
|
|
'<div class="gen-card-title" style="font-size:0.85rem;line-height:1.3">' + t.title + '</div>' +
|
|
'<div class="gen-card-sub" style="font-size:0.7rem;margin-top:4px">' + ((t.suggested_angle || t.description || '')).slice(0, 80) + '</div>' +
|
|
'</div>';
|
|
}).join('');
|
|
}).catch(function() {
|
|
grid.innerHTML =
|
|
'<div class="gen-card" style="cursor:pointer" onclick="generateBlog(\'hype_cycle\',\'800G\')"><div class="gen-card-title">Hype Cycle</div></div>' +
|
|
'<div class="gen-card" style="cursor:pointer" onclick="generateBlog(\'comparison\',\'400G\')"><div class="gen-card-title">Comparison</div></div>' +
|
|
'<div class="gen-card" style="cursor:pointer" onclick="generateBlog(\'tutorial\')"><div class="gen-card-title">Tutorial</div></div>';
|
|
});
|
|
};
|
|
|
|
// Auto-load hot topics when blog tab activates
|
|
var origActivateTab = window.activateTab;
|
|
if (origActivateTab) {
|
|
window.activateTab = function(tabName) {
|
|
origActivateTab(tabName);
|
|
if (tabName === 'blog') loadHotTopics();
|
|
};
|
|
}
|
|
})();
|
|
|
|
// Delete a single blog draft
|
|
window.deleteBlogDraft = function(id, title) {
|
|
if (!confirm('Delete "' + title + '"?')) return;
|
|
fetch((window.API || '') + '/api/blog/' + id, { method: 'DELETE' })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (data.success) {
|
|
if (typeof showToast === 'function') showToast('Deleted', title);
|
|
if (typeof loadBlogDrafts === 'function') loadBlogDrafts();
|
|
}
|
|
});
|
|
};
|
|
|
|
// Delete all template drafts (keep LLM-generated ones)
|
|
window.deleteAllTemplateDrafts = function() {
|
|
if (!confirm('Delete ALL template drafts? LLM-generated articles will be kept.')) return;
|
|
fetch((window.API || '') + '/api/blog').then(function(r) { return r.json(); }).then(function(data) {
|
|
var templates = (data.drafts || []).filter(function(d) { return d.generated_by === 'tip-blog-engine-template' || !d.generated_by; });
|
|
var count = 0;
|
|
templates.forEach(function(d) {
|
|
fetch((window.API || '') + '/api/blog/' + d.id, { method: 'DELETE' }).then(function() { count++; if (count === templates.length && typeof loadBlogDrafts === 'function') loadBlogDrafts(); });
|
|
});
|
|
if (typeof showToast === 'function') showToast('Cleaning', 'Deleting ' + templates.length + ' template drafts...');
|
|
});
|
|
};
|