First working frontend version

app.py

@@ -0,0 +1,363 @@
+from flask import Flask, request, send_file, jsonify, Response
+import subprocess
+import os
+import time
+import threading
+import logging
+from pathlib import Path
+
+# Configure logging
+logging.basicConfig(level=logging.INFO,
+                    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s')
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__)
+
+# Dictionary to store background task results
+task_results = {}
+
+# Ensure results folder exists
+def ensure_results_folder():
+    results_dir = Path("results")
+    if not results_dir.exists():
+        results_dir.mkdir()
+    return results_dir
+
+@app.route('/')
+def index():
+    return send_file('index.html')
+
+@app.route('/pdf-files')
+def pdf_files():
+    try:
+        # Get list of PDF files in the current directory
+        pdf_files = [f for f in os.listdir('.') if f.endswith('.pdf')]
+        logger.info(f"Found {len(pdf_files)} PDF files")
+        return jsonify(pdf_files)
+    except Exception as e:
+        logger.error(f"Error listing PDF files: {str(e)}")
+        return jsonify({"error": str(e)}), 500
+
+def run_command(task_id, command):
+    """Run a command in a background thread and store result"""
+    logger.info(f"Running command: {command}")
+    try:
+        # Log the current working directory to help with debugging
+        current_dir = os.getcwd()
+        logger.info(f"Current working directory: {current_dir}")
+
+        # Check if the script exists
+        script_name = command.split()[1]
+        if not os.path.exists(script_name):
+            logger.error(f"Script not found: {script_name} in {current_dir}")
+            task_results[task_id] = {
+                'success': False,
+                'error': f"Script not found: {script_name}. Make sure all scripts are in the same directory as app.py.",
+                'done': True
+            }
+            return
+
+        # Run the command with more detailed error capture
+        # Important: Use pipe input to automatically answer "n" to the prompt
+        process = subprocess.Popen(
+            command,
+            shell=True,
+            stdin=subprocess.PIPE,
+            stdout=subprocess.PIPE,
+            stderr=subprocess.PIPE,
+            text=True,
+            universal_newlines=True
+        )
+
+        # Send "n" to the process to bypass the "process all pages" prompt
+        stdout, stderr = process.communicate(input="n\n")
+
+        # Log the raw output for debugging
+        logger.info(f"Command stdout: {stdout[:500]}...")
+        if stderr:
+            logger.error(f"Command stderr: {stderr}")
+
+        # Update task result based on return code
+        if process.returncode == 0:
+            task_results[task_id] = {
+                'success': True,
+                'output': stdout,
+                'done': True
+            }
+            logger.info(f"Command completed successfully: {task_id}")
+        else:
+            error_message = stderr or f"Command failed with return code {process.returncode}"
+            task_results[task_id] = {
+                'success': False,
+                'error': error_message,
+                'done': True
+            }
+            logger.error(f"Command failed: {task_id} - {error_message}")
+    except Exception as e:
+        import traceback
+        logger.error(f"Unexpected error: {task_id} - {str(e)}")
+        logger.error(traceback.format_exc())
+        task_results[task_id] = {
+            'success': False,
+            'error': f"Exception: {str(e)}",
+            'done': True
+        }
+
+@app.route('/run-analyzer', methods=['POST'])
+def run_analyzer():
+    try:
+        pdf_file = request.form.get('pdf_file')
+        page_num = request.form.get('page_num', 1)
+
+        if not pdf_file:
+            return jsonify({'success': False, 'error': 'PDF file not specified'}), 400
+
+        # List files in current directory to help with debugging
+        files = os.listdir('.')
+        logger.info(f"Files in current directory: {files}")
+
+        # Check if PDF exists
+        if not os.path.exists(pdf_file):
+            logger.error(f"PDF file not found: {pdf_file}")
+            return jsonify({'success': False, 'error': f'PDF file not found: {pdf_file}'}), 400
+
+        # Check if analyzer.py exists
+        if not os.path.exists('analyzer.py'):
+            logger.error("analyzer.py not found in current directory")
+            return jsonify({'success': False, 'error': 'analyzer.py not found in current directory'}), 500
+
+        # Add the --all-pages=false flag or explicitly specify the page to avoid the prompt
+        command = f"python analyzer.py --image {pdf_file} --page {page_num} --start-page {page_num} --end-page {page_num}"
+
+        # Generate a task ID
+        task_id = f"analyzer_{int(time.time())}"
+
+        # Initialize task result
+        task_results[task_id] = {
+            'success': None,
+            'output': "Running analyzer...",
+            'done': False
+        }
+
+        # Start background thread
+        thread = threading.Thread(target=run_command, args=(task_id, command))
+        thread.daemon = True
+        thread.start()
+
+        # Return the task ID immediately
+        return jsonify({
+            'success': True,
+            'task_id': task_id,
+            'message': f"Analyzer started. Processing {pdf_file} page {page_num}..."
+        })
+    except Exception as e:
+        import traceback
+        logger.error(f"Error starting analyzer: {str(e)}")
+        logger.error(traceback.format_exc())
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+@app.route('/task-status/<task_id>')
+def task_status(task_id):
+    if task_id not in task_results:
+        return jsonify({'success': False, 'error': 'Task not found'}), 404
+
+    result = task_results[task_id]
+
+    # If task is completed, add file paths
+    if result['done'] and result['success']:
+        if task_id.startswith('analyzer_'):
+            result['doctags_file'] = f"results/output.doctags.txt"
+        elif task_id.startswith('visualizer_'):
+            page_num = task_id.split('_')[-1] if len(task_id.split('_')) > 2 else "1"
+            result['image_file'] = f"results/visualization_page_{page_num}.png"
+
+    return jsonify(result)
+
+@app.route('/run-visualizer', methods=['POST'])
+def run_visualizer():
+    try:
+        pdf_file = request.form.get('pdf_file')
+        page_num = request.form.get('page_num', 1)
+        adjust = request.form.get('adjust') == 'true'
+
+        if not pdf_file:
+            return jsonify({'success': False, 'error': 'PDF file not specified'}), 400
+
+        command = f"python visualizer.py --doctags results/output.doctags.txt --pdf {pdf_file} --page {page_num}"
+        if adjust:
+            command += " --adjust"
+
+        # Generate a task ID
+        task_id = f"visualizer_{int(time.time())}_{page_num}"
+
+        # Initialize task result
+        task_results[task_id] = {
+            'success': None,
+            'output': "Running visualizer...",
+            'done': False
+        }
+
+        # Start background thread
+        thread = threading.Thread(target=run_command, args=(task_id, command))
+        thread.daemon = True
+        thread.start()
+
+        return jsonify({
+            'success': True,
+            'task_id': task_id,
+            'message': f"Visualizer started. Processing {pdf_file} page {page_num}..."
+        })
+    except Exception as e:
+        logger.error(f"Error starting visualizer: {str(e)}")
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+@app.route('/run-extractor', methods=['POST'])
+def run_extractor():
+    try:
+        pdf_file = request.form.get('pdf_file')
+        page_num = request.form.get('page_num', 1)
+        adjust = request.form.get('adjust') == 'true'
+
+        if not pdf_file:
+            return jsonify({'success': False, 'error': 'PDF file not specified'}), 400
+
+        command = f"python picture_extractor.py --doctags results/output.doctags.txt --pdf {pdf_file} --page {page_num}"
+        if adjust:
+            command += " --adjust"
+
+        # Generate a task ID
+        task_id = f"extractor_{int(time.time())}_{page_num}"
+
+        # Initialize task result
+        task_results[task_id] = {
+            'success': None,
+            'output': "Running picture extractor...",
+            'done': False
+        }
+
+        # Start background thread
+        thread = threading.Thread(target=run_command, args=(task_id, command))
+        thread.daemon = True
+        thread.start()
+
+        return jsonify({
+            'success': True,
+            'task_id': task_id,
+            'message': f"Picture extractor started. Processing {pdf_file} page {page_num}..."
+        })
+    except Exception as e:
+        logger.error(f"Error starting extractor: {str(e)}")
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+@app.route('/results/<path:filename>')
+def results(filename):
+    try:
+        return send_file(os.path.join('results', filename))
+    except Exception as e:
+        logger.error(f"Error serving file {filename}: {str(e)}")
+        return jsonify({'error': f"File not found: {filename}"}), 404
+
+@app.route('/check-environment')
+def check_environment():
+    """Endpoint to check the environment and available scripts"""
+    try:
+        # Get current directory
+        current_dir = os.getcwd()
+
+        # List all files in directory
+        files = os.listdir('.')
+
+        # Check for required scripts
+        required_scripts = ['analyzer.py', 'visualizer.py', 'picture_extractor.py']
+        missing_scripts = [script for script in required_scripts if script not in files]
+
+        # Check for PDFs
+        pdf_files = [f for f in files if f.endswith('.pdf')]
+
+        # Check for results directory
+        results_dir = Path("results")
+        results_dir_exists = results_dir.exists()
+
+        # Try to check Python version and installed packages
+        python_info = subprocess.run(['python', '--version'], capture_output=True, text=True)
+        python_version = python_info.stdout.strip() if python_info.returncode == 0 else "Unknown"
+
+        # Check if the 'results' directory exists and is writable
+        results_writable = False
+        if results_dir_exists:
+            try:
+                test_file = results_dir / "test_write.txt"
+                with open(test_file, 'w') as f:
+                    f.write("test")
+                os.remove(test_file)
+                results_writable = True
+            except:
+                pass
+
+        return jsonify({
+            'cwd': current_dir,
+            'files': files,
+            'missing_scripts': missing_scripts,
+            'pdf_files': pdf_files,
+            'results_dir_exists': results_dir_exists,
+            'results_dir_writable': results_writable,
+            'python_version': python_version
+        })
+    except Exception as e:
+        import traceback
+        error_details = traceback.format_exc()
+        return jsonify({
+            'error': str(e),
+            'traceback': error_details
+        }), 500
+
+@app.route('/run-manual-command', methods=['POST'])
+def run_manual_command():
+    """Endpoint to run a manual command for debugging purposes"""
+    try:
+        command = request.form.get('command')
+        if not command:
+            return jsonify({'success': False, 'error': 'No command specified'}), 400
+
+        logger.info(f"Running manual command: {command}")
+
+        try:
+            # Run the command synchronously for immediate feedback
+            process = subprocess.Popen(
+                command,
+                shell=True,
+                stdin=subprocess.PIPE,
+                stdout=subprocess.PIPE,
+                stderr=subprocess.PIPE,
+                text=True,
+                universal_newlines=True
+            )
+
+            stdout, stderr = process.communicate(input="n\n", timeout=60)  # 60 second timeout
+
+            success = process.returncode == 0
+            return jsonify({
+                'success': success,
+                'output': stdout,
+                'error': stderr,
+                'returncode': process.returncode
+            })
+        except subprocess.TimeoutExpired:
+            return jsonify({
+                'success': False,
+                'error': "Command timed out after 60 seconds"
+            })
+        except Exception as e:
+            import traceback
+            return jsonify({
+                'success': False,
+                'error': str(e),
+                'traceback': traceback.format_exc()
+            })
+    except Exception as e:
+        logger.error(f"Error running manual command: {str(e)}")
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+if __name__ == '__main__':
+    ensure_results_folder()
+    app.run(debug=True, host='127.0.0.1', port=5000)

index.html

@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DocTags Tools</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        h1 {
+            color: #333;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+        select, input {
+            padding: 8px;
+            width: 100%;
+            max-width: 300px;
+        }
+        button {
+            padding: 10px 15px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-right: 10px;
+            margin-bottom: 10px;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+        .output {
+            margin-top: 20px;
+            padding: 15px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background-color: #f9f9f9;
+            white-space: pre-wrap;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        .hidden {
+            display: none;
+        }
+        img {
+            max-width: 100%;
+            margin-top: 10px;
+            border: 1px solid #ddd;
+        }
+        .container {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .step {
+            background-color: #f5f5f5;
+            padding: 15px;
+            border-radius: 5px;
+            border-left: 5px solid #4CAF50;
+        }
+        .step h3 {
+            margin-top: 0;
+        }
+        .status {
+            font-weight: bold;
+            margin-top: 5px;
+        }
+        .error {
+            color: #d32f2f;
+        }
+        .success {
+            color: #43a047;
+        }
+        .working {
+            color: #1976d2;
+        }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            animation: spin 2s linear infinite;
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 10px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        #environment-check {
+            margin-top: 20px;
+            padding: 10px;
+            background-color: #fff3cd;
+            border: 1px solid #ffeeba;
+            border-radius: 4px;
+        }
+        .env-success {
+            color: green;
+        }
+        .env-error {
+            color: red;
+        }
+        .debug-section {
+            margin-top: 30px;
+            border-top: 1px solid #ccc;
+            padding-top: 20px;
+        }
+    </style>
+</head>
+<body>
+<h1>DocTags Analyzer and Visualizer</h1>
+
+<div id="environment-check" class="hidden">
+    <h3>Environment Check</h3>
+    <div id="env-details"></div>
+</div>
+
+<div class="form-group">
+    <label for="pdf_file">PDF File:</label>
+    <select id="pdf_file" name="pdf_file"></select>
+    <div id="pdf-load-status"></div>
+</div>
+
+<div class="form-group">
+    <label for="page_num">Page Number:</label>
+    <input type="number" id="page_num" name="page_num" value="1" min="1">
+</div>
+
+<div class="form-group">
+    <label for="adjust">
+        <input type="checkbox" id="adjust" name="adjust" checked>
+        Auto-adjust coordinates
+    </label>
+</div>
+
+<div class="container">
+    <div class="step">
+        <h3>Step 1: Analyze PDF</h3>
+        <p>Extract DocTags structure from the PDF page</p>
+        <button id="analyzer-btn" onclick="runScript('analyzer')">Run Analyzer</button>
+        <div id="analyzer-status" class="status"></div>
+    </div>
+
+    <div class="step">
+        <h3>Step 2: Generate Visualization</h3>
+        <p>Create visual representation of the extracted DocTags</p>
+        <button id="visualizer-btn" onclick="runScript('visualizer')">Run Visualizer</button>
+        <div id="visualizer-status" class="status"></div>
+    </div>
+
+    <div class="step">
+        <h3>Step 3: Extract Pictures</h3>
+        <p>Extract images from the document based on DocTags</p>
+        <button id="extractor-btn" onclick="runScript('extractor')">Run Picture Extractor</button>
+        <div id="extractor-status" class="status"></div>
+    </div>
+</div>
+
+<div id="output" class="output hidden"></div>
+
+<div id="image-container" class="hidden">
+    <h2>Visualization Result</h2>
+    <img id="result-image" src="" alt="Visualization">
+</div>
+
+<div class="debug-section">
+    <button onclick="checkEnvironment()">Run Environment Check</button>
+    <button onclick="manuallyRunScript()">Run Manual Command</button>
+</div>
+
+<script>
+    // Keep track of active tasks
+    const activeTasks = {};
+    let pollingInterval = null;
+
+    // Load PDF files on page load
+    window.addEventListener('DOMContentLoaded', function() {
+        const pdfStatus = document.getElementById('pdf-load-status');
+        pdfStatus.innerHTML = '<div class="loader"></div> Loading PDF files...';
+
+        fetch('/pdf-files')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Failed to load PDF files');
+                }
+                return response.json();
+            })
+            .then(data => {
+                const select = document.getElementById('pdf_file');
+                if (data.length === 0) {
+                    pdfStatus.innerHTML = '<span class="error">No PDF files found in the current directory</span>';
+                    return;
+                }
+
+                data.forEach(file => {
+                    const option = document.createElement('option');
+                    option.value = file;
+                    option.textContent = file;
+                    select.appendChild(option);
+                });
+                pdfStatus.innerHTML = '<span class="success">Loaded ' + data.length + ' PDF files</span>';
+            })
+            .catch(error => {
+                console.error('Error loading PDFs:', error);
+                pdfStatus.innerHTML = '<span class="error">Error: ' + error.message + '</span>';
+            });
+
+        // Run an environment check on startup
+        checkEnvironment();
+    });
+
+    // Check the environment
+    function checkEnvironment() {
+        const envDiv = document.getElementById('environment-check');
+        const envDetails = document.getElementById('env-details');
+
+        envDiv.classList.remove('hidden');
+        envDetails.innerHTML = '<div class="loader"></div> Checking environment...';
+
+        fetch('/check-environment')
+            .then(response => response.json())
+            .then(data => {
+                let html = '<ul>';
+
+                // Current working directory
+                html += '<li>Working directory: <code>' + data.cwd + '</code></li>';
+
+                // Python version
+                html += '<li>Python version: <code>' + data.python_version + '</code></li>';
+
+                // Required scripts check
+                if (data.missing_scripts.length === 0) {
+                    html += '<li class="env-success">✓ All required scripts found</li>';
+                } else {
+                    html += '<li class="env-error">✗ Missing scripts: <code>' + data.missing_scripts.join(', ') + '</code></li>';
+                }
+
+                // PDF files check
+                if (data.pdf_files.length > 0) {
+                    html += '<li class="env-success">✓ Found ' + data.pdf_files.length + ' PDF files: <code>' + data.pdf_files.join(', ') + '</code></li>';
+                } else {
+                    html += '<li class="env-error">✗ No PDF files found in the working directory</li>';
+                }
+
+                // Results directory check
+                if (data.results_dir_exists) {
+                    html += '<li class="env-success">✓ Results directory exists</li>';
+                    if (data.results_dir_writable) {
+                        html += '<li class="env-success">✓ Results directory is writable</li>';
+                    } else {
+                        html += '<li class="env-error">✗ Results directory is not writable</li>';
+                    }
+                } else {
+                    html += '<li class="env-error">✗ Results directory does not exist</li>';
+                }
+
+                html += '</ul>';
+
+                // List of all files for debugging
+                html += '<details><summary>All files in directory (' + data.files.length + ' files)</summary><pre>' +
+                    data.files.join('\n') + '</pre></details>';
+
+                envDetails.innerHTML = html;
+            })
+            .catch(error => {
+                envDetails.innerHTML = '<div class="env-error">Error checking environment: ' + error.message + '</div>';
+            });
+    }
+
+    // Manual command execution for debugging
+    function manuallyRunScript() {
+        const command = prompt("Enter command to run (e.g., 'python analyzer.py --image document.pdf --page 1')");
+        if (!command) return;
+
+        const outputDiv = document.getElementById('output');
+        outputDiv.textContent = 'Running command: ' + command + '\nPlease wait...';
+        outputDiv.classList.remove('hidden');
+
+        // Create form data
+        const formData = new FormData();
+        formData.append('command', command);
+
+        // Send the command directly to backend
+        fetch('/run-manual-command', {
+            method: 'POST',
+            body: formData
+        })
+            .then(response => response.json())
+            .then(data => {
+                outputDiv.textContent = 'Command: ' + command + '\n\n' +
+                    (data.success ? 'Success!\n\n' : 'Failed!\n\n') +
+                    (data.output || '') +
+                    (data.error ? '\n\nError: ' + data.error : '');
+            })
+            .catch(error => {
+                outputDiv.textContent = 'Error running command: ' + error.message;
+            });
+    }
+
+    // Start polling for task updates
+    function startPolling() {
+        if (pollingInterval) {
+            return; // Already polling
+        }
+
+        pollingInterval = setInterval(pollTasks, 1000);
+    }
+
+    // Stop polling when no active tasks
+    function checkAndStopPolling() {
+        if (Object.keys(activeTasks).length === 0 && pollingInterval) {
+            clearInterval(pollingInterval);
+            pollingInterval = null;
+        }
+    }
+
+    // Poll for task updates
+    function pollTasks() {
+        for (const taskId in activeTasks) {
+            const taskInfo = activeTasks[taskId];
+
+            fetch(`/task-status/${taskId}`)
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Failed to check task status');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    // Update status display
+                    const statusElement = document.getElementById(`${taskInfo.type}-status`);
+
+                    if (data.done) {
+                        if (data.success) {
+                            // Task completed successfully
+                            statusElement.innerHTML = '<span class="success">✓ Completed</span>';
+
+                            // Enable button
+                            document.getElementById(`${taskInfo.type}-btn`).disabled = false;
+
+                            // Display output
+                            const outputDiv = document.getElementById('output');
+                            outputDiv.textContent = data.output;
+                            outputDiv.classList.remove('hidden');
+
+                            // Show image if available for visualizer
+                            if (taskInfo.type === 'visualizer' && data.image_file) {
+                                document.getElementById('result-image').src = '/' + data.image_file + '?t=' + new Date().getTime();
+                                document.getElementById('image-container').classList.remove('hidden');
+                            }
+
+                            // Enable next step button if applicable
+                            if (taskInfo.type === 'analyzer') {
+                                document.getElementById('visualizer-btn').disabled = false;
+                            } else if (taskInfo.type === 'visualizer') {
+                                document.getElementById('extractor-btn').disabled = false;
+                            }
+
+                            // Remove from active tasks
+                            delete activeTasks[taskId];
+                            checkAndStopPolling();
+                        } else {
+                            // Task failed
+                            statusElement.innerHTML = '<span class="error">✗ Failed: ' + (data.error || 'Unknown error') + '</span>';
+                            document.getElementById(`${taskInfo.type}-btn`).disabled = false;
+
+                            // Display error output
+                            const outputDiv = document.getElementById('output');
+                            outputDiv.textContent = 'Error: ' + (data.error || 'Unknown error');
+                            outputDiv.classList.remove('hidden');
+
+                            // Remove from active tasks
+                            delete activeTasks[taskId];
+                            checkAndStopPolling();
+                        }
+                    } else {
+                        // Still running
+                        statusElement.innerHTML = '<div class="loader"></div><span class="working">Running...</span>';
+                    }
+                })
+                .catch(error => {
+                    console.error('Error checking task status:', error);
+                });
+        }
+    }
+
+    function runScript(script) {
+        const pdfFile = document.getElementById('pdf_file').value;
+        const pageNum = document.getElementById('page_num').value;
+        const adjust = document.getElementById('adjust').checked;
+
+        if (!pdfFile) {
+            alert('Please select a PDF file');
+            return;
+        }
+
+        // Disable button
+        const button = document.getElementById(`${script}-btn`);
+        button.disabled = true;
+
+        // Create form data
+        const formData = new FormData();
+        formData.append('pdf_file', pdfFile);
+        formData.append('page_num', pageNum);
+        formData.append('adjust', adjust);
+
+        // Show running status
+        const statusElement = document.getElementById(`${script}-status`);
+        statusElement.innerHTML = '<div class="loader"></div><span class="working">Starting...</span>';
+
+        // Clear previous output
+        document.getElementById('output').classList.add('hidden');
+
+        // Hide previous image if not running visualizer
+        if (script !== 'visualizer') {
+            document.getElementById('image-container').classList.add('hidden');
+        }
+
+        // Determine endpoint
+        let endpoint;
+        switch(script) {
+            case 'analyzer':
+                endpoint = '/run-analyzer';
+                // Disable next step buttons
+                document.getElementById('visualizer-btn').disabled = true;
+                document.getElementById('extractor-btn').disabled = true;
+                break;
+            case 'visualizer':
+                endpoint = '/run-visualizer';
+                // Disable next step button
+                document.getElementById('extractor-btn').disabled = true;
+                break;
+            case 'extractor':
+                endpoint = '/run-extractor';
+                break;
+        }
+
+        // Send request
+        fetch(endpoint, {
+            method: 'POST',
+            body: formData
+        })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Failed to start task');
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.success && data.task_id) {
+                    // Store task information
+                    activeTasks[data.task_id] = {
+                        type: script,
+                        pageNum: pageNum
+                    };
+
+                    // Start polling for updates
+                    startPolling();
+
+                    // Update status
+                    statusElement.innerHTML = '<div class="loader"></div><span class="working">Running...</span>';
+
+                    // Show initial output
+                    const outputDiv = document.getElementById('output');
+                    outputDiv.textContent = data.message || 'Task started, please wait...';
+                    outputDiv.classList.remove('hidden');
+                } else {
+                    // Failed to start task
+                    statusElement.innerHTML = '<span class="error">✗ Failed to start task</span>';
+                    button.disabled = false;
+
+                    // Show error
+                    const outputDiv = document.getElementById('output');
+                    outputDiv.textContent = 'Error: ' + (data.error || 'Failed to start task');
+                    outputDiv.classList.remove('hidden');
+                }
+            })
+            .catch(error => {
+                console.error('Error starting task:', error);
+                statusElement.innerHTML = '<span class="error">✗ ' + error.message + '</span>';
+                button.disabled = false;
+
+                // Show error
+                const outputDiv = document.getElementById('output');
+                outputDiv.textContent = 'Error: ' + error.message;
+                outputDiv.classList.remove('hidden');
+            });
+    }
+</script>
+</body>
+</html>