223 lines
7.7 KiB
HTML
223 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Article Generation Progress</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 20px auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.topic {
|
|
text-align: center;
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
font-style: italic;
|
|
}
|
|
.progress-container {
|
|
margin-bottom: 30px;
|
|
}
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 20px;
|
|
background-color: #f0f0f0;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
background-color: #4CAF50;
|
|
width: 0%;
|
|
transition: width 0.3s ease;
|
|
}
|
|
.progress-text {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.step-info {
|
|
background-color: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
border-left: 4px solid #4CAF50;
|
|
}
|
|
.article-result {
|
|
background-color: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
margin-top: 20px;
|
|
white-space: pre-wrap;
|
|
line-height: 1.6;
|
|
}
|
|
.error {
|
|
background-color: #ffebee;
|
|
color: #c62828;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
border-left: 4px solid #f44336;
|
|
}
|
|
.back-button {
|
|
background-color: #2196F3;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
margin-top: 20px;
|
|
}
|
|
.back-button:hover {
|
|
background-color: #1976D2;
|
|
}
|
|
.loading-dots {
|
|
display: inline-block;
|
|
}
|
|
.loading-dots:after {
|
|
content: '';
|
|
animation: dots 1.5s steps(5, end) infinite;
|
|
}
|
|
@keyframes dots {
|
|
0%, 20% { content: ''; }
|
|
40% { content: '.'; }
|
|
60% { content: '..'; }
|
|
80%, 100% { content: '...'; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>📝 Generating Your Article</h1>
|
|
<div class="topic" id="topicDisplay"></div>
|
|
|
|
<div class="progress-container">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
</div>
|
|
<div class="progress-text" id="progressText">Starting<span class="loading-dots"></span></div>
|
|
</div>
|
|
|
|
<div id="stepInfo" class="step-info" style="display: none;"></div>
|
|
<div id="errorInfo" class="error" style="display: none;"></div>
|
|
<div id="articleResult" class="article-result" style="display: none;"></div>
|
|
|
|
<a href="/" class="back-button">← Generate Another Article</a>
|
|
</div>
|
|
|
|
<script>
|
|
// Get job_id and topic from URL parameters
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const jobId = urlParams.get('job_id');
|
|
const topic = urlParams.get('topic');
|
|
|
|
if (!jobId) {
|
|
document.getElementById('errorInfo').style.display = 'block';
|
|
document.getElementById('errorInfo').textContent = 'No job ID provided';
|
|
} else {
|
|
document.getElementById('topicDisplay').textContent = `Topic: ${topic || 'Unknown'}`;
|
|
startProgressMonitoring(jobId);
|
|
}
|
|
|
|
function startProgressMonitoring(jobId) {
|
|
const eventSource = new EventSource(`/progress/${jobId}`);
|
|
|
|
eventSource.onmessage = function(event) {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
|
|
if (data.error) {
|
|
showError(data.error);
|
|
eventSource.close();
|
|
return;
|
|
}
|
|
|
|
if (data.heartbeat) {
|
|
return; // Ignore heartbeat messages
|
|
}
|
|
|
|
updateProgress(data);
|
|
|
|
if (data.step === 'complete') {
|
|
showFinalResult(data.data.final_article);
|
|
eventSource.close();
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error parsing SSE data:', error);
|
|
}
|
|
};
|
|
|
|
eventSource.onerror = function(event) {
|
|
console.error('SSE connection error:', event);
|
|
showError('Connection lost. Please refresh the page.');
|
|
eventSource.close();
|
|
};
|
|
}
|
|
|
|
function updateProgress(data) {
|
|
const progressFill = document.getElementById('progressFill');
|
|
const progressText = document.getElementById('progressText');
|
|
const stepInfo = document.getElementById('stepInfo');
|
|
|
|
// Update progress bar
|
|
progressFill.style.width = data.progress + '%';
|
|
|
|
// Update progress text and step info
|
|
switch (data.step) {
|
|
case 'outline':
|
|
progressText.textContent = 'Creating outline... (33%)';
|
|
stepInfo.style.display = 'block';
|
|
stepInfo.innerHTML = `<strong>Step 1:</strong> Generated outline with sections: ${data.data.sections.join(', ')}`;
|
|
break;
|
|
case 'content':
|
|
if (data.data.section) {
|
|
// Individual section progress
|
|
progressText.textContent = `Writing content... (${data.progress}%)`;
|
|
stepInfo.innerHTML = `<strong>Step 2:</strong> Completed section "${data.data.section}" (${data.data.completed_sections}/${data.data.total_sections})`;
|
|
} else {
|
|
// Final content completion
|
|
progressText.textContent = 'Writing content... (66%)';
|
|
stepInfo.innerHTML = `<strong>Step 2:</strong> Generated ${data.data.draft_length} characters of content`;
|
|
}
|
|
break;
|
|
case 'complete':
|
|
progressText.textContent = 'Complete! (100%)';
|
|
stepInfo.innerHTML = `<strong>Step 3:</strong> Applied conversational styling - Article ready!`;
|
|
break;
|
|
}
|
|
}
|
|
|
|
function showFinalResult(article) {
|
|
const resultDiv = document.getElementById('articleResult');
|
|
resultDiv.style.display = 'block';
|
|
resultDiv.textContent = article;
|
|
}
|
|
|
|
function showError(errorMessage) {
|
|
const errorDiv = document.getElementById('errorInfo');
|
|
errorDiv.style.display = 'block';
|
|
errorDiv.textContent = `Error: ${errorMessage}`;
|
|
|
|
const progressText = document.getElementById('progressText');
|
|
progressText.textContent = 'Failed';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |