feat: redesign revision notes system with separate handwritten canvas

- Add blank white canvas for handwritten revision notes (not overlay)
- Add checkbox to include/exclude notes in generated PDF
- Add delete note functionality
- Improved toolbar with highlighter, undo/redo, arrow shape, more colors
- Add keyboard shortcuts (Ctrl+Z/Y, P/H/S/T keys)
- Notes displayed below question image in PDF (60/40 split)
- Add include_note_in_pdf column to database
- Better UI/UX with tool groups and stylus-only mode

Co-Authored-By: Claude (claude-opus-4-5-thinking) <noreply@anthropic.com>

database.py

@@ -329,8 +329,19 @@ def setup_database():
     except sqlite3.OperationalError:
         cursor.execute("ALTER TABLE images ADD COLUMN box_id TEXT")
 
+    try:
+        cursor.execute("SELECT note_filename FROM images LIMIT 1")
+    except sqlite3.OperationalError:
+        cursor.execute("ALTER TABLE images ADD COLUMN note_filename TEXT")
+
+    try:
+        cursor.execute("SELECT include_note_in_pdf FROM images LIMIT 1")
+    except sqlite3.OperationalError:
+        cursor.execute("ALTER TABLE images ADD COLUMN include_note_in_pdf INTEGER DEFAULT 1")
+
     try:
         cursor.execute("SELECT session_type FROM sessions LIMIT 1")
+
     except sqlite3.OperationalError:
         cursor.execute("ALTER TABLE sessions ADD COLUMN session_type TEXT DEFAULT 'standard'")
 

image_routes.py

@@ -1,4 +1,8 @@
-from flask import Blueprint, send_from_directory, current_app
+from flask import Blueprint, send_from_directory, current_app, request, jsonify
+from flask_login import login_required, current_user
+from utils import get_db_connection
+import os
+from datetime import datetime
 
 image_bp = Blueprint('image_bp', __name__)
 
@@ -22,3 +26,111 @@ def serve_neetprep_processed_image(filename):
 def serve_neetprep_tmp_image(filename):
     current_app.logger.info(f"Serving /neetprep/tmp image: {filename}")
     return send_from_directory(current_app.config['TEMP_FOLDER'], filename)
+
+@image_bp.route('/save_note_image', methods=['POST'])
+@login_required
+def save_note_image():
+    try:
+        if 'image' not in request.files:
+            return jsonify({'error': 'No image file provided'}), 400
+            
+        file = request.files['image']
+        image_id = request.form.get('image_id')
+        session_id = request.form.get('session_id')
+        
+        if not image_id or not session_id:
+             return jsonify({'error': 'Missing image_id or session_id'}), 400
+
+        # Validate ownership
+        conn = get_db_connection()
+        img = conn.execute("SELECT i.id, s.user_id FROM images i JOIN sessions s ON i.session_id = s.id WHERE i.id = ?", (image_id,)).fetchone()
+        
+        if not img or img['user_id'] != current_user.id:
+            conn.close()
+            return jsonify({'error': 'Unauthorized or image not found'}), 403
+
+        # Save the file
+        filename = f"note_{session_id}_{image_id}_{int(datetime.now().timestamp())}.png"
+        save_path = os.path.join(current_app.config['PROCESSED_FOLDER'], filename)
+        file.save(save_path)
+        
+        # Update DB
+        conn.execute("UPDATE images SET note_filename = ? WHERE id = ?", (filename, image_id))
+        conn.commit()
+        conn.close()
+        
+        return jsonify({'success': True, 'filename': filename})
+
+    except Exception as e:
+        current_app.logger.error(f"Error saving note: {e}")
+        return jsonify({'error': str(e)}), 500
+
+@image_bp.route('/toggle_note_in_pdf', methods=['POST'])
+@login_required
+def toggle_note_in_pdf():
+    """Toggle whether a note should be included in the generated PDF."""
+    try:
+        data = request.json
+        image_id = data.get('image_id')
+        include = data.get('include', True)
+
+        if not image_id:
+            return jsonify({'error': 'Missing image_id'}), 400
+
+        conn = get_db_connection()
+        img = conn.execute("""
+            SELECT i.id, s.user_id FROM images i
+            JOIN sessions s ON i.session_id = s.id WHERE i.id = ?
+        """, (image_id,)).fetchone()
+
+        if not img or img['user_id'] != current_user.id:
+            conn.close()
+            return jsonify({'error': 'Unauthorized'}), 403
+
+        conn.execute("UPDATE images SET include_note_in_pdf = ? WHERE id = ?",
+                     (1 if include else 0, image_id))
+        conn.commit()
+        conn.close()
+
+        return jsonify({'success': True, 'include': include})
+
+    except Exception as e:
+        current_app.logger.error(f"Error toggling note in PDF: {e}")
+        return jsonify({'error': str(e)}), 500
+
+@image_bp.route('/delete_note', methods=['POST'])
+@login_required
+def delete_note():
+    """Delete a note image for a question."""
+    try:
+        data = request.json
+        image_id = data.get('image_id')
+
+        if not image_id:
+            return jsonify({'error': 'Missing image_id'}), 400
+
+        conn = get_db_connection()
+        img = conn.execute("""
+            SELECT i.id, i.note_filename, s.user_id FROM images i
+            JOIN sessions s ON i.session_id = s.id WHERE i.id = ?
+        """, (image_id,)).fetchone()
+
+        if not img or img['user_id'] != current_user.id:
+            conn.close()
+            return jsonify({'error': 'Unauthorized'}), 403
+
+        # Delete the file if it exists
+        if img['note_filename']:
+            note_path = os.path.join(current_app.config['PROCESSED_FOLDER'], img['note_filename'])
+            if os.path.exists(note_path):
+                os.remove(note_path)
+
+        conn.execute("UPDATE images SET note_filename = NULL WHERE id = ?", (image_id,))
+        conn.commit()
+        conn.close()
+
+        return jsonify({'success': True})
+
+    except Exception as e:
+        current_app.logger.error(f"Error deleting note: {e}")
+        return jsonify({'error': str(e)}), 500

routes/pdf_ops.py

@@ -49,8 +49,16 @@ def generate_preview():
     session_owner = conn.execute('SELECT user_id FROM sessions WHERE id = ?', (sid,)).fetchone()
     if not session_owner or session_owner['user_id'] != current_user.id:
         conn.close(); return jsonify({'error': 'Unauthorized'}), 403
-    all_questions = [dict(row) for row in conn.execute("SELECT q.*, i.filename, i.processed_filename FROM questions q JOIN images i ON q.image_id = i.id WHERE q.session_id = ? ORDER BY i.id", (sid,)).fetchall()]
+    all_questions = [dict(row) for row in conn.execute("""
+        SELECT q.*, i.filename, i.processed_filename, i.note_filename, i.include_note_in_pdf
+        FROM questions q JOIN images i ON q.image_id = i.id
+        WHERE q.session_id = ? ORDER BY i.id
+    """, (sid,)).fetchall()]
     conn.close()
+    # Only include note_filename if include_note_in_pdf is true
+    for q in all_questions:
+        if not q.get('include_note_in_pdf', 1):
+            q['note_filename'] = None
     all_questions.extend(data.get('miscellaneous_questions', []))
     filter_type = data.get('filter_type', 'all')
     filtered = [q for q in all_questions if filter_type == 'all' or q['status'] == filter_type]
@@ -86,7 +94,15 @@ def generate_pdf():
     session_owner = conn.execute('SELECT user_id FROM sessions WHERE id = ?', (sid,)).fetchone()
     if not session_owner or session_owner['user_id'] != current_user.id:
         conn.close(); return jsonify({'error': 'Unauthorized'}), 403
-    all_questions = [dict(row) for row in conn.execute("SELECT q.*, i.filename, i.processed_filename FROM questions q JOIN images i ON q.image_id = i.id WHERE q.session_id = ? ORDER BY i.id", (sid,)).fetchall()]
+    all_questions = [dict(row) for row in conn.execute("""
+        SELECT q.*, i.filename, i.processed_filename, i.note_filename, i.include_note_in_pdf
+        FROM questions q JOIN images i ON q.image_id = i.id
+        WHERE q.session_id = ? ORDER BY i.id
+    """, (sid,)).fetchall()]
+    # Only include note_filename if include_note_in_pdf is true
+    for q in all_questions:
+        if not q.get('include_note_in_pdf', 1):
+            q['note_filename'] = None
     all_questions.extend(data.get('miscellaneous_questions', []))
     filter_type = data.get('filter_type', 'all')
     filtered = [q for q in all_questions if filter_type == 'all' or q['status'] == filter_type]

routes/questions.py

@@ -326,7 +326,7 @@ def question_entry_v2(session_id):
     session_data = conn.execute('SELECT original_filename, subject, tags, notes FROM sessions WHERE id = ? AND user_id = ?', (session_id, current_user.id)).fetchone()
     if not session_data:
         conn.close(); flash("Session not found or you don't have permission to access it.", "warning"); return redirect(url_for('dashboard.dashboard'))
-    images = conn.execute("""SELECT i.id, i.processed_filename, q.question_number, q.status, q.marked_solution, q.actual_solution
+    images = conn.execute("""SELECT i.id, i.processed_filename, i.note_filename, i.include_note_in_pdf, q.question_number, q.status, q.marked_solution, q.actual_solution
            FROM images i
            LEFT JOIN questions q ON i.id = q.image_id
            WHERE i.session_id = ? AND i.image_type = 'cropped'

templates/question_entry_v2.html

@@ -3,6 +3,7 @@
 {% block title %}Enter Question Details (V2){% endblock %}
 
 {% block head %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
 <style>
     .keyboard-hint { font-size: 0.8em; color: #6c757d; margin-top: 2px; }
     .status-buttons { display: flex; gap: 0.25rem; margin-top: 0.25rem; }
@@ -55,6 +56,79 @@
     .ts-dropdown .option:hover, .ts-dropdown .active {
         background: #495057;
     }
+    
+    /* Notes Modal Styles */
+    #notes-canvas-container {
+        width: 100%;
+        height: calc(100vh - 180px);
+        background: #f8f9fa;
+        border: 1px solid #495057;
+        overflow: hidden;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .notes-toolbar {
+        display: flex;
+        gap: 8px;
+        padding: 12px 16px;
+        background: linear-gradient(180deg, #2c3034, #212529);
+        border-bottom: 1px solid #495057;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+    .notes-toolbar .tool-group {
+        display: flex;
+        gap: 4px;
+        padding: 0 8px;
+        border-right: 1px solid #495057;
+    }
+    .notes-toolbar .tool-group:last-child {
+        border-right: none;
+    }
+    .notes-toolbar .btn {
+        min-width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .color-swatch {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        cursor: pointer;
+        border: 2px solid transparent;
+        transition: transform 0.15s, border-color 0.15s;
+    }
+    .color-swatch:hover { transform: scale(1.1); }
+    .color-swatch.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 8px rgba(255,255,255,0.5); }
+
+    /* Note Card Styles */
+    .note-card {
+        background: rgba(13, 202, 240, 0.1);
+        border: 1px solid #0dcaf0;
+        border-radius: 8px;
+        padding: 8px;
+        margin-bottom: 8px;
+    }
+    .note-thumbnail {
+        max-height: 80px;
+        object-fit: contain;
+        border-radius: 4px;
+    }
+    .note-actions {
+        display: flex;
+        gap: 4px;
+        margin-top: 6px;
+    }
+    .include-pdf-toggle {
+        cursor: pointer;
+    }
+    .include-pdf-toggle input:checked + .form-check-label {
+        color: #0dcaf0;
+    }
 </style>
 {% endblock %}
 
@@ -120,8 +194,33 @@
                             <i class="bi bi-trash"></i> Delete
                         </button>
                     </legend>
-                    <div class="col-md-3 mb-3">
-                        <img src="/image/processed/{{ session_id }}/{{ image.processed_filename }}" class="img-fluid rounded" alt="Cropped Question {{ loop.index }}">
+                    <div class="col-md-3 mb-3 text-center">
+                        <img src="/image/processed/{{ session_id }}/{{ image.processed_filename }}" class="img-fluid rounded mb-2" alt="Cropped Question {{ loop.index }}">
+                        {% if image.note_filename %}
+                        <div class="note-card">
+                            <div class="position-relative">
+                                <img src="/processed/{{ image.note_filename }}" class="img-fluid note-thumbnail" alt="Note">
+                            </div>
+                            <div class="note-actions flex-wrap justify-content-center">
+                                <div class="form-check form-switch include-pdf-toggle">
+                                    <input class="form-check-input" type="checkbox" id="include_note_{{ image.id }}"
+                                           {% if image.include_note_in_pdf is none or image.include_note_in_pdf %}checked{% endif %}
+                                           onchange="toggleNoteInPdf('{{ image.id }}', this.checked)">
+                                    <label class="form-check-label small" for="include_note_{{ image.id }}">In PDF</label>
+                                </div>
+                                <button type="button" class="btn btn-sm btn-outline-info" onclick="openNotesModal('{{ image.id }}', '/image/processed/{{ session_id }}/{{ image.processed_filename }}', '{{ image.note_filename }}')" title="Edit Note">
+                                    <i class="bi bi-pencil"></i>
+                                </button>
+                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteNote('{{ image.id }}')" title="Delete Note">
+                                    <i class="bi bi-trash"></i>
+                                </button>
+                            </div>
+                        </div>
+                        {% else %}
+                        <button type="button" class="btn btn-sm btn-outline-info w-100" onclick="openNotesModal('{{ image.id }}', '/image/processed/{{ session_id }}/{{ image.processed_filename }}', '')">
+                            <i class="bi bi-pencil-square me-1"></i>Add Revision Notes
+                        </button>
+                        {% endif %}
                     </div>
                     <div class="col-md-9">
                         <div class="row">
@@ -265,6 +364,101 @@
                 </div>
             </div>
 
+            <!-- Notes Modal -->
+            <div class="modal fade" id="notesModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
+                <div class="modal-dialog modal-fullscreen">
+                    <div class="modal-content bg-dark text-white">
+                        <div class="modal-header py-2 border-secondary">
+                            <h5 class="modal-title"><i class="bi bi-pencil-fill me-2"></i>Add Revision Notes</h5>
+                            <div class="d-flex gap-2">
+                                <button class="btn btn-success" onclick="saveNotes()">
+                                    <i class="bi bi-check-lg me-1"></i>Save Notes
+                                </button>
+                                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
+                                    <i class="bi bi-x-lg me-1"></i>Cancel
+                                </button>
+                            </div>
+                        </div>
+                        <div class="notes-toolbar">
+                            <!-- Drawing Tools -->
+                            <div class="tool-group">
+                                <button class="btn btn-outline-light active" id="tool-pencil" onclick="setTool('pencil')" title="Pencil (P)">
+                                    <i class="bi bi-pencil"></i>
+                                </button>
+                                <button class="btn btn-outline-light" id="tool-highlighter" onclick="setTool('highlighter')" title="Highlighter (H)">
+                                    <i class="bi bi-highlighter"></i>
+                                </button>
+                                <button class="btn btn-outline-light" id="tool-select" onclick="setTool('select')" title="Select (S)">
+                                    <i class="bi bi-cursor"></i>
+                                </button>
+                            </div>
+
+                            <!-- Colors -->
+                            <div class="tool-group">
+                                <div class="color-swatch active" style="background: #000000;" data-color="#000000" onclick="setColor('#000000')" title="Black"></div>
+                                <div class="color-swatch" style="background: #dc3545;" data-color="#dc3545" onclick="setColor('#dc3545')" title="Red"></div>
+                                <div class="color-swatch" style="background: #0d6efd;" data-color="#0d6efd" onclick="setColor('#0d6efd')" title="Blue"></div>
+                                <div class="color-swatch" style="background: #198754;" data-color="#198754" onclick="setColor('#198754')" title="Green"></div>
+                                <div class="color-swatch" style="background: #ffc107;" data-color="#ffc107" onclick="setColor('#ffc107')" title="Yellow"></div>
+                                <div class="color-swatch" style="background: #6f42c1;" data-color="#6f42c1" onclick="setColor('#6f42c1')" title="Purple"></div>
+                            </div>
+
+                            <!-- Brush Size -->
+                            <div class="tool-group">
+                                <label class="text-muted small me-1 d-flex align-items-center">Size:</label>
+                                <input type="range" class="form-range" style="width: 80px;" min="1" max="30" value="3" id="brush-size" oninput="setBrushSize(this.value)">
+                                <span class="text-white small ms-1" id="brush-size-val">3</span>
+                            </div>
+
+                            <!-- Shapes -->
+                            <div class="tool-group">
+                                <button class="btn btn-outline-light" onclick="addShape('rect')" title="Rectangle">
+                                    <i class="bi bi-square"></i>
+                                </button>
+                                <button class="btn btn-outline-light" onclick="addShape('circle')" title="Circle">
+                                    <i class="bi bi-circle"></i>
+                                </button>
+                                <button class="btn btn-outline-light" onclick="addShape('arrow')" title="Arrow">
+                                    <i class="bi bi-arrow-up-right"></i>
+                                </button>
+                                <button class="btn btn-outline-light" onclick="addText()" title="Add Text (T)">
+                                    <i class="bi bi-fonts"></i>
+                                </button>
+                            </div>
+
+                            <!-- Actions -->
+                            <div class="tool-group">
+                                <button class="btn btn-outline-warning" onclick="undoCanvas()" title="Undo (Ctrl+Z)">
+                                    <i class="bi bi-arrow-counterclockwise"></i>
+                                </button>
+                                <button class="btn btn-outline-warning" onclick="redoCanvas()" title="Redo (Ctrl+Y)">
+                                    <i class="bi bi-arrow-clockwise"></i>
+                                </button>
+                                <button class="btn btn-outline-danger" onclick="deleteSelected()" title="Delete Selected (Del)">
+                                    <i class="bi bi-trash"></i>
+                                </button>
+                                <button class="btn btn-outline-danger" onclick="clearCanvas()" title="Clear All">
+                                    <i class="bi bi-x-circle"></i>
+                                </button>
+                            </div>
+
+                            <!-- Pen Only Mode -->
+                            <div class="tool-group border-0">
+                                <div class="form-check form-switch">
+                                    <input class="form-check-input" type="checkbox" id="pen-only-mode" onchange="togglePenOnly()">
+                                    <label class="form-check-label small" for="pen-only-mode">Stylus Only</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="modal-body p-0" id="notes-canvas-body">
+                            <div id="notes-canvas-container">
+                                <canvas id="notes-canvas"></canvas>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <div class="accordion mt-4" id="misc-accordion">
                 <div class="accordion-item bg-dark">
                     <h2 class="accordion-header" id="headingOne">
@@ -469,6 +663,16 @@
     const sessionId = '{{ session_id }}';
     let answerKeyData = new Map();
     let miscellaneousQuestions = [];
+    
+    // Canvas Variables
+    let canvas;
+    let currentNoteImageId = null;
+    let penColor = '#000000';
+    let penWidth = 3;
+    let isPenOnly = false;
+    let canvasHistory = [];
+    let historyIndex = -1;
+    let isHistoryAction = false;
 
     async function initializeTomSelect() {
         try {
@@ -496,6 +700,407 @@
             console.error('Error initializing Tom Select:', err);
         }
     }
+    
+    // --- CANVAS FUNCTIONS ---
+    function openNotesModal(imageId, imageUrl, existingNoteUrl) {
+        currentNoteImageId = imageId;
+        canvasHistory = [];
+        historyIndex = -1;
+
+        const modal = new bootstrap.Modal(document.getElementById('notesModal'));
+        modal.show();
+
+        document.getElementById('notesModal').addEventListener('shown.bs.modal', function init() {
+            initCanvas(existingNoteUrl);
+            document.getElementById('notesModal').removeEventListener('shown.bs.modal', init);
+        });
+    }
+
+    function initCanvas(existingNoteUrl) {
+        // Dispose existing canvas if any
+        if (canvas) {
+            canvas.dispose();
+        }
+
+        const container = document.getElementById('notes-canvas-container');
+        const maxWidth = container.clientWidth;
+        const maxHeight = container.clientHeight;
+
+        // Create canvas with a blank white background (separate revision notes)
+        canvas = new fabric.Canvas('notes-canvas', {
+            isDrawingMode: true,
+            selection: false,
+            preserveObjectStacking: true,
+            width: maxWidth,
+            height: maxHeight,
+            backgroundColor: '#ffffff'  // White background for handwritten notes
+        });
+
+        // Set initial brush
+        setTool('pencil');
+
+        // Save state after each modification
+        canvas.on('object:added', saveCanvasState);
+        canvas.on('object:modified', saveCanvasState);
+        canvas.on('object:removed', saveCanvasState);
+
+        // Palm rejection
+        canvas.on('mouse:down', function(opt) {
+            if (isPenOnly && opt.e.pointerType !== 'pen') {
+                canvas.isDrawingMode = false;
+            }
+        });
+
+        canvas.on('mouse:up', function() {
+            if (isPenOnly && canvas.isDrawingMode === false) {
+                const tool = document.querySelector('.notes-toolbar .btn.active')?.id;
+                if (tool === 'tool-pencil' || tool === 'tool-highlighter') {
+                    canvas.isDrawingMode = true;
+                }
+            }
+        });
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', handleCanvasKeyboard);
+
+        // Load existing note if present
+        if (existingNoteUrl) {
+            fabric.Image.fromURL('/processed/' + existingNoteUrl, function(noteImg) {
+                // Scale to fit while maintaining aspect ratio
+                const scale = Math.min(maxWidth / noteImg.width, maxHeight / noteImg.height, 1);
+                noteImg.scale(scale);
+                noteImg.set({
+                    left: (maxWidth - noteImg.width * scale) / 2,
+                    top: (maxHeight - noteImg.height * scale) / 2,
+                    selectable: true,
+                    evented: true
+                });
+                canvas.add(noteImg);
+                canvas.renderAll();
+                saveCanvasState();
+            }, { crossOrigin: 'anonymous' });
+        } else {
+            canvas.renderAll();
+            saveCanvasState();
+        }
+    }
+
+    function handleCanvasKeyboard(e) {
+        if (!document.getElementById('notesModal').classList.contains('show')) return;
+
+        // Ctrl+Z: Undo
+        if (e.ctrlKey && e.key === 'z') {
+            e.preventDefault();
+            undoCanvas();
+            return;
+        }
+
+        // Ctrl+Y: Redo
+        if (e.ctrlKey && e.key === 'y') {
+            e.preventDefault();
+            redoCanvas();
+            return;
+        }
+
+        // Delete/Backspace: Delete selected
+        if (e.key === 'Delete' || e.key === 'Backspace') {
+            if (document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
+                e.preventDefault();
+                deleteSelected();
+            }
+            return;
+        }
+
+        // Tool shortcuts
+        if (e.key === 'p') setTool('pencil');
+        if (e.key === 'h') setTool('highlighter');
+        if (e.key === 's') setTool('select');
+        if (e.key === 't') addText();
+    }
+
+    function saveCanvasState() {
+        if (isHistoryAction) return;
+
+        // Remove any states after current index
+        canvasHistory = canvasHistory.slice(0, historyIndex + 1);
+
+        // Save current state
+        const state = canvas.toJSON(['selectable', 'evented']);
+        canvasHistory.push(state);
+        historyIndex++;
+
+        // Limit history size
+        if (canvasHistory.length > 50) {
+            canvasHistory.shift();
+            historyIndex--;
+        }
+    }
+
+    function undoCanvas() {
+        if (historyIndex <= 0) return;
+
+        isHistoryAction = true;
+        historyIndex--;
+
+        const bg = canvas.backgroundImage;
+        canvas.loadFromJSON(canvasHistory[historyIndex], function() {
+            canvas.setBackgroundImage(bg, canvas.renderAll.bind(canvas));
+            isHistoryAction = false;
+        });
+    }
+
+    function redoCanvas() {
+        if (historyIndex >= canvasHistory.length - 1) return;
+
+        isHistoryAction = true;
+        historyIndex++;
+
+        const bg = canvas.backgroundImage;
+        canvas.loadFromJSON(canvasHistory[historyIndex], function() {
+            canvas.setBackgroundImage(bg, canvas.renderAll.bind(canvas));
+            isHistoryAction = false;
+        });
+    }
+
+    function setTool(tool) {
+        if (!canvas) return;
+
+        document.querySelectorAll('.notes-toolbar .btn').forEach(b => b.classList.remove('active'));
+
+        if (tool === 'pencil') {
+            document.getElementById('tool-pencil').classList.add('active');
+            canvas.isDrawingMode = true;
+            canvas.selection = false;
+            canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
+            canvas.freeDrawingBrush.color = penColor;
+            canvas.freeDrawingBrush.width = parseInt(penWidth, 10);
+        } else if (tool === 'highlighter') {
+            document.getElementById('tool-highlighter').classList.add('active');
+            canvas.isDrawingMode = true;
+            canvas.selection = false;
+            canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
+            // Highlighter: larger, semi-transparent
+            canvas.freeDrawingBrush.color = hexToRgba(penColor, 0.4);
+            canvas.freeDrawingBrush.width = parseInt(penWidth, 10) * 4;
+        } else if (tool === 'select') {
+            document.getElementById('tool-select').classList.add('active');
+            canvas.isDrawingMode = false;
+            canvas.selection = true;
+            // Make all objects selectable
+            canvas.getObjects().forEach(obj => {
+                obj.selectable = true;
+                obj.evented = true;
+            });
+        }
+    }
+
+    function hexToRgba(hex, alpha) {
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+
+    function setColor(color) {
+        penColor = color;
+
+        document.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('active'));
+        document.querySelector(`.color-swatch[data-color="${color}"]`)?.classList.add('active');
+
+        if (canvas && canvas.freeDrawingBrush) {
+            const activeTool = document.querySelector('.notes-toolbar .btn.active')?.id;
+            if (activeTool === 'tool-highlighter') {
+                canvas.freeDrawingBrush.color = hexToRgba(color, 0.4);
+            } else {
+                canvas.freeDrawingBrush.color = color;
+            }
+        }
+    }
+
+    function setBrushSize(size) {
+        penWidth = size;
+        document.getElementById('brush-size-val').textContent = size;
+
+        if (canvas && canvas.freeDrawingBrush) {
+            const activeTool = document.querySelector('.notes-toolbar .btn.active')?.id;
+            if (activeTool === 'tool-highlighter') {
+                canvas.freeDrawingBrush.width = parseInt(size, 10) * 4;
+            } else {
+                canvas.freeDrawingBrush.width = parseInt(size, 10);
+            }
+        }
+    }
+
+    function deleteSelected() {
+        if (!canvas) return;
+        const active = canvas.getActiveObjects();
+        if (active.length > 0) {
+            active.forEach(obj => canvas.remove(obj));
+            canvas.discardActiveObject();
+            canvas.renderAll();
+        }
+    }
+
+    function clearCanvas() {
+        if (!canvas) return;
+        if (confirm("Clear all notes? This cannot be undone.")) {
+            canvas.clear();
+            canvas.backgroundColor = '#ffffff';
+            canvas.renderAll();
+            saveCanvasState();
+        }
+    }
+
+    function addShape(shape) {
+        if (!canvas) return;
+        setTool('select');
+
+        let obj;
+        const centerX = canvas.width / 2 - 50;
+        const centerY = canvas.height / 2 - 50;
+
+        if (shape === 'rect') {
+            obj = new fabric.Rect({
+                left: centerX, top: centerY,
+                fill: 'transparent',
+                stroke: penColor,
+                strokeWidth: parseInt(penWidth, 10),
+                width: 100, height: 60
+            });
+        } else if (shape === 'circle') {
+            obj = new fabric.Circle({
+                left: centerX, top: centerY,
+                fill: 'transparent',
+                stroke: penColor,
+                strokeWidth: parseInt(penWidth, 10),
+                radius: 40
+            });
+        } else if (shape === 'arrow') {
+            // Create an arrow using a line and triangle
+            const line = new fabric.Line([centerX, centerY + 50, centerX + 80, centerY], {
+                stroke: penColor,
+                strokeWidth: parseInt(penWidth, 10),
+                selectable: false
+            });
+            const triangle = new fabric.Triangle({
+                left: centerX + 80, top: centerY - 8,
+                fill: penColor,
+                width: 16, height: 16,
+                angle: 45,
+                selectable: false
+            });
+            obj = new fabric.Group([line, triangle], {
+                left: centerX, top: centerY
+            });
+        }
+
+        if (obj) {
+            canvas.add(obj);
+            canvas.setActiveObject(obj);
+        }
+    }
+
+    function addText() {
+        if (!canvas) return;
+        setTool('select');
+
+        const text = new fabric.IText('Type here...', {
+            left: canvas.width / 2 - 50,
+            top: canvas.height / 2 - 10,
+            fontFamily: 'Arial, sans-serif',
+            fill: penColor,
+            fontSize: 18 + (parseInt(penWidth, 10) * 2)
+        });
+
+        canvas.add(text);
+        canvas.setActiveObject(text);
+        text.selectAll();
+        text.enterEditing();
+    }
+
+    function togglePenOnly() {
+        isPenOnly = document.getElementById('pen-only-mode').checked;
+    }
+
+    async function toggleNoteInPdf(imageId, include) {
+        try {
+            const response = await fetch('/toggle_note_in_pdf', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ image_id: imageId, include: include })
+            });
+            const result = await response.json();
+            if (!result.success) {
+                showStatus('Failed to update setting: ' + result.error, 'danger');
+            }
+        } catch (e) {
+            showStatus('Error: ' + e.message, 'danger');
+        }
+    }
+
+    async function deleteNote(imageId) {
+        if (!confirm('Delete this note? This cannot be undone.')) return;
+
+        try {
+            const response = await fetch('/delete_note', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ image_id: imageId })
+            });
+            const result = await response.json();
+            if (result.success) {
+                showStatus('Note deleted', 'success');
+                location.reload();
+            } else {
+                showStatus('Failed to delete note: ' + result.error, 'danger');
+            }
+        } catch (e) {
+            showStatus('Error: ' + e.message, 'danger');
+        }
+    }
+    
+    async function saveNotes() {
+        if (!canvas || !currentNoteImageId) return;
+
+        // Export the entire canvas with white background
+        const dataUrl = canvas.toDataURL({
+            format: 'png',
+            multiplier: 2  // Higher quality
+        });
+
+        // Convert data URL to blob
+        const response = await fetch(dataUrl);
+        const blob = await response.blob();
+
+        const formData = new FormData();
+        formData.append('image', blob, 'note.png');
+        formData.append('image_id', currentNoteImageId);
+        formData.append('session_id', sessionId);
+
+        try {
+            showStatus('Saving notes...', 'info');
+            const res = await fetch('/save_note_image', {
+                method: 'POST',
+                body: formData
+            });
+            const result = await res.json();
+
+            if (result.success) {
+                showStatus('Notes saved!', 'success');
+
+                // Close modal
+                const modal = bootstrap.Modal.getInstance(document.getElementById('notesModal'));
+                modal.hide();
+
+                // Reload page to show updated note
+                location.reload();
+            } else {
+                showStatus('Error saving notes: ' + result.error, 'danger');
+            }
+        } catch (e) {
+            showStatus('Error: ' + e.message, 'danger');
+        }
+    }
 
     function saveSettings() {
         // Session-specific settings

utils.py

@@ -157,7 +157,7 @@ def create_a4_pdf_from_images(image_info, base_folder, output_filename, images_p
                 # 3. Position and paste image below text
                 if img:
                     image_y_start = text_y_start + total_text_height + 20
-                    
+
                     # Define target dimensions for the image
                     if practice_mode == 'portrait_2_spacious':
                         target_w = (page_width // 2) - 250
@@ -171,7 +171,19 @@ def create_a4_pdf_from_images(image_info, base_folder, output_filename, images_p
                         target_w = cell_width - 40
                         available_h = cell_height - (total_text_height + 40)
                         target_h = available_h
-                    
+
+                    # If there's a note, split the available height between question and note
+                    note_img = None
+                    if info.get('note_filename'):
+                        try:
+                            note_path = os.path.join(base_folder, info['note_filename'])
+                            if os.path.exists(note_path):
+                                note_img = Image.open(note_path).convert("RGB")
+                                # Split available height: 60% for question, 40% for note
+                                target_h = int(available_h * 0.6)
+                        except Exception as e:
+                            print(f"Error loading note: {e}")
+
                     # Calculate new dimensions while maintaining aspect ratio
                     img_ratio = img.width / img.height
                     target_ratio = target_w / target_h
@@ -194,7 +206,7 @@ def create_a4_pdf_from_images(image_info, base_folder, output_filename, images_p
                                 new_w, new_h = scaled_w, scaled_h
 
                     img = img.resize((new_w, new_h), Image.Resampling.LANCZOS)
-                    
+
                     paste_x = cell_x + 20
                     if is_practice_mode and practice_mode != 'portrait_2_spacious':
                         paste_x = 200
@@ -208,6 +220,35 @@ def create_a4_pdf_from_images(image_info, base_folder, output_filename, images_p
                         x1, y1 = x0 + new_w, y0 + new_h
                         draw_dashed_rectangle(draw, [x0, y0, x1, y1], fill="gray", width=3, dash_length=20, gap_length=15)
 
+                    # Paste the note image below the question image if present
+                    if note_img:
+                        try:
+                            note_y_start = image_y_start + new_h + 10  # 10px gap between question and note
+                            note_available_h = cell_height - (note_y_start - cell_y) - 20
+                            note_target_w = target_w
+                            note_target_h = note_available_h
+
+                            # Calculate note dimensions while maintaining aspect ratio
+                            note_ratio = note_img.width / note_img.height
+                            note_target_ratio = note_target_w / max(note_target_h, 1)
+
+                            if note_ratio > note_target_ratio:
+                                note_new_w = int(note_target_w)
+                                note_new_h = int(note_new_w / note_ratio)
+                            else:
+                                note_new_h = int(note_target_h)
+                                note_new_w = int(note_new_h * note_ratio)
+
+                            if note_new_w > 0 and note_new_h > 0:
+                                note_img = note_img.resize((note_new_w, note_new_h), Image.Resampling.LANCZOS)
+                                note_paste_position = (paste_x, note_y_start)
+                                page.paste(note_img, note_paste_position)
+
+                                # Draw note label
+                                draw.text((paste_x, note_y_start - 15), "Notes:", fill="blue", font=font_small)
+                        except Exception as e:
+                            print(f"Error pasting note image: {e}")
+
             except Exception as e:
                 print(f"Error processing image for PDF: {e}")