EduCatWeb/views/revise.ejs

<%- 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') %>