EduCat with Flowise integration - complete implementation
This commit is contained in:
inubimambo
149
views/revise.ejs
Normal file
149
views/revise.ejs
Normal file
@@ -0,0 +1,149 @@
|
||||
<%- 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">
|
||||
<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"><%= content %></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h5>AI-Revised Notes</h5>
|
||||
<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>
|
||||
</ul>
|
||||
</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');
|
||||
|
||||
reviseBtn.addEventListener('click', async function() {
|
||||
const type = revisionType.value;
|
||||
const content = `<%= content.replace(/"/g, '\\"').replace(/\n/g, '\\n') %>`;
|
||||
|
||||
console.log('Revise button clicked with type:', type);
|
||||
|
||||
reviseBtn.disabled = true;
|
||||
revisionProgress.classList.remove('d-none');
|
||||
revisedContent.innerHTML = '<p class="text-muted text-center mt-5">Processing...</p>';
|
||||
|
||||
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
|
||||
})
|
||||
});
|
||||
|
||||
console.log('Response status:', response.status);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
console.log('Revision result:', result);
|
||||
|
||||
if (result.success) {
|
||||
revisedContent.innerHTML = '<pre class="mb-0">' + result.revisedContent + '</pre>';
|
||||
saveBtn.disabled = false;
|
||||
downloadBtn.disabled = false;
|
||||
} else {
|
||||
revisedContent.innerHTML = '<div class="alert alert-danger">Error: ' + (result.error || 'Unknown error') + '</div>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Revision error:', error);
|
||||
revisedContent.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
|
||||
} finally {
|
||||
reviseBtn.disabled = false;
|
||||
revisionProgress.classList.add('d-none');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<%- include('partials/footer') %>
|
||||
Reference in New Issue
Block a user