360 lines
17 KiB
Plaintext
360 lines
17 KiB
Plaintext
<%- include('partials/header') %>
|
|
|
|
<div class="container py-5">
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-lg border-0">
|
|
<div class="card-header bg-primary text-white">
|
|
<h3 class="mb-0"><i class="fas fa-edit me-2"></i>Revise: <%= file.originalName %></h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<% if (extractionError) { %>
|
|
<div class="alert alert-warning">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
<%= extractionError %>
|
|
</div>
|
|
<% } else if (extractionInfo) { %>
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Text extracted using <%= extractionInfo.method %>
|
|
<% if (extractionInfo.pages) { %>
|
|
| <%= extractionInfo.pages %> pages
|
|
<% } %>
|
|
<% if (extractionInfo.sheets) { %>
|
|
| <%= extractionInfo.sheets %> sheets
|
|
<% } %>
|
|
| <%= extractionInfo.totalLength %> characters
|
|
</div>
|
|
<% } %>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5>Original Notes</h5>
|
|
<div class="border p-3 bg-light rounded" style="height: 400px; overflow-y: auto;">
|
|
<pre class="mb-0" style="white-space: pre-wrap; word-wrap: break-word;"><%= content %></pre>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h5>AI-Revised Notes</h5>
|
|
<div class="btn-group btn-group-sm" role="group" id="display-mode-toggle" style="display: none;">
|
|
<input type="radio" class="btn-check" name="displayMode" id="mode-markdown" value="markdown" checked>
|
|
<label class="btn btn-outline-secondary" for="mode-markdown" title="Show as Markdown">
|
|
<i class="fab fa-markdown"></i>
|
|
</label>
|
|
|
|
<input type="radio" class="btn-check" name="displayMode" id="mode-html" value="html">
|
|
<label class="btn btn-outline-secondary" for="mode-html" title="Render as HTML">
|
|
<i class="fas fa-code"></i>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div id="revised-content" class="border p-3 bg-white rounded" style="height: 400px; overflow-y: auto;">
|
|
<p class="text-muted text-center mt-5">Select a revision type and click "Revise" to see AI-enhanced notes here.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Revision Type</label>
|
|
<select id="revision-type" class="form-select">
|
|
<option value="improve">Improve & Enhance</option>
|
|
<option value="summarize">Summarize</option>
|
|
<option value="questions">Generate Study Questions</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6 d-flex align-items-end">
|
|
<button type="button" id="revise-btn" class="btn btn-primary btn-lg w-100">
|
|
<i class="fas fa-brain me-2"></i>Revise with AI
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="revision-progress" class="mt-4 d-none">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
|
|
</div>
|
|
<p class="text-center mt-2 mb-0">AI is processing your notes...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h5><i class="fas fa-info-circle me-2"></i>File Information</h5>
|
|
<ul class="list-unstyled">
|
|
<li><strong>Name:</strong> <%= file.originalName %></li>
|
|
<li><strong>Size:</strong> <%= Math.round(file.size / 1024) %> KB</li>
|
|
<li><strong>Uploaded:</strong> <%= new Date(file.uploadDate).toLocaleDateString() %></li>
|
|
<% if (extractionInfo) { %>
|
|
<li><strong>Extraction:</strong> <%= extractionInfo.method %></li>
|
|
<% if (extractionInfo.pages) { %>
|
|
<li><strong>Pages:</strong> <%= extractionInfo.pages %></li>
|
|
<% } %>
|
|
<% if (extractionInfo.sheets) { %>
|
|
<li><strong>Sheets:</strong> <%= extractionInfo.sheets %></li>
|
|
<% } %>
|
|
<li><strong>Characters:</strong> <%= extractionInfo.totalLength.toLocaleString() %></li>
|
|
<% } %>
|
|
</ul>
|
|
|
|
<% if (file.status) { %>
|
|
<div class="mt-3">
|
|
<strong>Processing Status:</strong>
|
|
<% if (file.status === 'processed') { %>
|
|
<span class="badge bg-success ms-2">Processed</span>
|
|
<% } else if (file.status === 'processing') { %>
|
|
<span class="badge bg-warning ms-2">Processing</span>
|
|
<% } else if (file.status === 'failed') { %>
|
|
<span class="badge bg-danger ms-2">Failed</span>
|
|
<% } else { %>
|
|
<span class="badge bg-secondary ms-2"><%= file.status %></span>
|
|
<% } %>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card border-0 shadow-sm mt-3">
|
|
<div class="card-body">
|
|
<h5><i class="fas fa-lightbulb me-2"></i>Revision Tips</h5>
|
|
<ul class="small">
|
|
<li><strong>Improve & Enhance:</strong> Makes your notes more comprehensive and well-structured</li>
|
|
<li><strong>Summarize:</strong> Creates concise summaries of your key points</li>
|
|
<li><strong>Generate Questions:</strong> Creates study questions to test your understanding</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card border-0 shadow-sm mt-3">
|
|
<div class="card-body text-center">
|
|
<button type="button" id="save-btn" class="btn btn-success w-100 mb-2" disabled>
|
|
<i class="fas fa-save me-2"></i>Save Revised Notes
|
|
</button>
|
|
<button type="button" id="download-btn" class="btn btn-outline-primary w-100" disabled>
|
|
<i class="fas fa-download me-2"></i>Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const reviseBtn = document.getElementById('revise-btn');
|
|
const revisionProgress = document.getElementById('revision-progress');
|
|
const revisedContent = document.getElementById('revised-content');
|
|
const revisionType = document.getElementById('revision-type');
|
|
const saveBtn = document.getElementById('save-btn');
|
|
const downloadBtn = document.getElementById('download-btn');
|
|
const displayModeToggle = document.getElementById('display-mode-toggle');
|
|
const modeMarkdown = document.getElementById('mode-markdown');
|
|
const modeHtml = document.getElementById('mode-html');
|
|
|
|
const fileId = '<%= file.id %>';
|
|
const content = <%- JSON.stringify(content) %>;
|
|
let currentRevisedContent = '';
|
|
let currentRevisionType = '';
|
|
let currentDisplayMode = 'markdown';
|
|
|
|
// Handle display mode changes
|
|
function updateDisplayMode() {
|
|
if (!currentRevisedContent) return;
|
|
|
|
const selectedMode = document.querySelector('input[name="displayMode"]:checked').value;
|
|
currentDisplayMode = selectedMode;
|
|
|
|
renderRevisedContent(currentRevisedContent, selectedMode);
|
|
}
|
|
|
|
// Render revised content based on display mode
|
|
async function renderRevisedContent(content, displayMode = 'markdown') {
|
|
try {
|
|
const response = await fetch('/api/render-revised-content', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
content: content,
|
|
displayMode: displayMode,
|
|
autoDetect: true
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
if (displayMode === 'html') {
|
|
// Render as HTML
|
|
revisedContent.innerHTML = `<div class="rendered-markdown">${result.renderedContent}</div>`;
|
|
|
|
// Show format detection info if available
|
|
if (result.isMarkdownContent) {
|
|
const formatInfo = document.createElement('div');
|
|
formatInfo.className = 'alert alert-info alert-sm mb-2';
|
|
formatInfo.innerHTML = '<small><i class="fas fa-info-circle me-1"></i>Markdown formatting detected and rendered</small>';
|
|
revisedContent.insertBefore(formatInfo, revisedContent.firstChild);
|
|
}
|
|
} else {
|
|
// Show as raw markdown/text
|
|
revisedContent.innerHTML = `<pre class="mb-0" style="white-space: pre-wrap; word-wrap: break-word;">${escapeHtml(result.renderedContent)}</pre>`;
|
|
}
|
|
} else {
|
|
throw new Error(result.error || 'Failed to render content');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error rendering content:', error);
|
|
// Fallback to escaped text
|
|
revisedContent.innerHTML = `<pre class="mb-0" style="white-space: pre-wrap; word-wrap: break-word;">${escapeHtml(content)}</pre>`;
|
|
}
|
|
}
|
|
|
|
// Add event listeners for display mode toggle
|
|
modeMarkdown.addEventListener('change', updateDisplayMode);
|
|
modeHtml.addEventListener('change', updateDisplayMode);
|
|
|
|
reviseBtn.addEventListener('click', async function() {
|
|
const type = revisionType.value;
|
|
|
|
console.log('Revise button clicked with type:', type);
|
|
console.log('File ID:', fileId);
|
|
|
|
reviseBtn.disabled = true;
|
|
revisionProgress.classList.remove('d-none');
|
|
displayModeToggle.style.display = 'none'; // Hide toggle during processing
|
|
revisedContent.innerHTML = '<div class="text-center mt-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Processing...</span></div><p class="mt-2">AI is processing your notes...</p></div>';
|
|
|
|
try {
|
|
console.log('Sending request to /api/revise');
|
|
const response = await fetch('/api/revise', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
content: content,
|
|
revisionType: type,
|
|
fileId: fileId
|
|
})
|
|
});
|
|
|
|
console.log('Response status:', response.status);
|
|
|
|
const result = await response.json();
|
|
console.log('Revision result:', result);
|
|
|
|
if (result.success) {
|
|
currentRevisedContent = result.revisedContent;
|
|
currentRevisionType = type;
|
|
|
|
// Show display mode toggle
|
|
displayModeToggle.style.display = 'block';
|
|
|
|
// Render content based on current display mode
|
|
await renderRevisedContent(currentRevisedContent, currentDisplayMode);
|
|
|
|
saveBtn.disabled = false;
|
|
downloadBtn.disabled = false;
|
|
} else {
|
|
revisedContent.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i><strong>Error:</strong> ' + escapeHtml(result.error || 'Unknown error occurred') + '</div>';
|
|
}
|
|
} catch (error) {
|
|
console.error('Revision error:', error);
|
|
revisedContent.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i><strong>Network Error:</strong> ' + escapeHtml(error.message) + '<br><small>Please check your connection and try again.</small></div>';
|
|
} finally {
|
|
reviseBtn.disabled = false;
|
|
revisionProgress.classList.add('d-none');
|
|
}
|
|
});
|
|
|
|
// Save revised notes button
|
|
saveBtn.addEventListener('click', async function() {
|
|
if (!currentRevisedContent) {
|
|
alert('No revised content to save. Please revise the notes first.');
|
|
return;
|
|
}
|
|
|
|
saveBtn.disabled = true;
|
|
const originalText = saveBtn.innerHTML;
|
|
saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
|
|
|
|
try {
|
|
const response = await fetch('/api/save-revised', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
fileId: fileId,
|
|
revisedContent: currentRevisedContent,
|
|
revisionType: currentRevisionType
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
// Show success message
|
|
const successAlert = document.createElement('div');
|
|
successAlert.className = 'alert alert-success alert-dismissible fade show mt-3';
|
|
successAlert.innerHTML = `
|
|
<i class="fas fa-check-circle me-2"></i>
|
|
<strong>Success!</strong> Revised notes saved as "${result.fileInfo.originalName}"
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
document.querySelector('.card-body').appendChild(successAlert);
|
|
|
|
// Auto-hide after 5 seconds
|
|
setTimeout(() => {
|
|
successAlert.remove();
|
|
}, 5000);
|
|
} else {
|
|
alert('Error saving revised notes: ' + (result.error || 'Unknown error'));
|
|
}
|
|
} catch (error) {
|
|
console.error('Save error:', error);
|
|
alert('Network error while saving. Please try again.');
|
|
} finally {
|
|
saveBtn.disabled = false;
|
|
saveBtn.innerHTML = originalText;
|
|
}
|
|
});
|
|
|
|
// Download revised notes button
|
|
downloadBtn.addEventListener('click', function() {
|
|
if (!currentRevisedContent) {
|
|
alert('No revised content to download. Please revise the notes first.');
|
|
return;
|
|
}
|
|
|
|
// Create download URL with content and revision type as query parameters
|
|
const encodedContent = encodeURIComponent(currentRevisedContent);
|
|
const encodedRevisionType = encodeURIComponent(currentRevisionType);
|
|
const downloadUrl = `/api/download-revised/${fileId}?content=${encodedContent}&revisionType=${encodedRevisionType}`;
|
|
|
|
// Create temporary link and trigger download
|
|
const link = document.createElement('a');
|
|
link.href = downloadUrl;
|
|
link.style.display = 'none';
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
});
|
|
|
|
// Helper function to escape HTML
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<%- include('partials/footer') %>
|