exportPptBtn.addEventListener('click', () => {
if (images.length === 0) {
alert('No images to export.');
return;
}

let pptx = new PptxGenJS(); // Ensure the correct instantiation

images.forEach((canvas, index) => {
    let slide = pptx.addSlide();
    slide.addImage({ data: canvas.toDataURL(), x: 1, y: 1, w: 8, h: 5.63 });
});

pptx.writeFile({ fileName: "exported_images.pptx" });

statusElement.textContent = 'Images exported successfully';
});


this part gives a syntax error or unexpected token on line 626 of my app
and image upload button, and take photo buton do not work and do not import images to the app, fix the download function, and keep everything else the same, and do not change the theme
and send the full updated complete app in one large html code

here is the full code of my app :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ultimate Image Enhancer and Vectorizer</title>
    <style>
        /* Dark Theme Styles */
        body {
            background-color: #121212;
            color: #ffffff;
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }

        h1 {
            margin-bottom: 20px;
        }

        input[type="file"] {
            display: none;
        }

        label, button {
            background-color: #1e1e1e;
            color: #ffffff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            transition: background-color 0.3s;
        }

        label:hover, button:hover {
            background-color: #6200ee;
        }

        .control-panel {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin: 20px 0;
        }

        #image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }

        canvas {
            border: 1px solid #333;
            max-width: 300px;
            max-height: 300px;
        }

        #text-output {
            display: none;
            margin-top: 20px;
        }

        #extractedText {
            width: 80%;
            height: 150px;
            padding: 10px;
            border-radius: 5px;
            border: none;
            resize: vertical;
            background-color: #1e1e1e;
            color: #ffffff;
        }

        #status {
            margin-top: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>

<h1>Ultimate Image Enhancer and Vectorizer</h1>

<!-- Upload Images -->
<input type="file" id="upload" accept="image/*" multiple>
<label for="upload">Upload Images</label>

<!-- Capture Image -->
<input type="file" id="camera" accept="image/*" capture>
<label for="camera">Take Photo</label>

<div class="control-panel" id="controls">
    <div class="control-group">
        <label for="brightness">Brightness</label>
        <input type="range" id="brightness" min="0" max="100" value="50">
    </div>
    <div class="control-group">
        <label for="contrast">Contrast</label>
        <input type="range" id="contrast" min="0" max="100" value="50">
    </div>
    <div class="control-group">
        <label for="sharpness">Sharpness</label>
        <input type="range" id="sharpness" min="0" max="100" value="0">
    </div>
    <div class="control-group">
        <label for="scale">Scale</label>
        <input type="range" id="scale" min="1" max="20" value="1" step="1" onchange="applyScale()">
    </div>
</div>

<div class="control-panel" id="scan-controls">
    <button id="scanColorBtn">Scan with Colors</button>
    <button id="scanBwBtn">Scan Black & White</button>
    <div class="control-group">
        <label for="scanIntensity">Scan Intensity</label>
        <input type="range" id="scanIntensity" min="-50" max="50" value="0">
    </div>
</div>

<div class="control-panel" id="export-controls">
    <button id="downloadBtn">Export Enhanced Images</button>
    <button id="pdfBtn">Export Images to PDF</button>
    <button id="ocrBtn">Extract Text from Images</button>
    <button id="vectorizeBtn">Vectorize to SVG</button>
    <button id="exportSvgBtn" disabled>Export SVG</button>
    <button id="convertDxfBtn" disabled>Convert SVG to DXF</button>
    <button id="exportDxfBtn" disabled>Export DXF</button>
    <button id="exportWordBtn">Export Images to Word</button>
    <button id="exportPptBtn">Export Images to PowerPoint</button>
    <button id="exportTextPptBtn">Export Text to PowerPoint</button>
</div>

<div id="image-container"></div>

<div id="text-output">
    <h2>Extracted Text</h2>
    <textarea id="extractedText" readonly></textarea><br>
    <button id="copyTextBtn">Copy Text</button>
    <button id="saveTextBtn">Save as .txt</button>
    <button id="saveWordBtn">Save as Word Document</button>
</div>

<div id="status"></div>

<!-- External Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.72/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.72/vfs_fonts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.0.2/dist/tesseract.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vectorizer-js@1.1.0/dist/vectorizer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.1.0/docx.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PptxGenJS/3.9.0/pptxgen.min.js"></script>

<script>
// Get Elements
const upload = document.getElementById('upload');
const camera = document.getElementById('camera');
const brightness = document.getElementById('brightness');
const contrast = document.getElementById('contrast');
const sharpness = document.getElementById('sharpness');
const scale = document.getElementById('scale');
const scanensity = document.getElementById('scan');
const downloadBtn = document.getElementById('downloadBtn');
const pdfBtn = document.getElementById('pdfBtn');
const ocrBtn = document.getElementById('ocrBtn');
const vectorizeBtn = document.getElementById('vectorizeBtn');
const exportSvgBtn = document.getElementById('exportSvgBtn');
const convertDxfBtn = document.getElementById('convertDxfBtn');
const exportDxfBtn = document.getElementById('exportDxfBtn');
const scanColorBtn = document.getElementById('scanColorBtn');
const scanBwBtn = document.getElementById('scanBwBtn');
const imageContainer = document.getElementById('image-container');
const textOutput = document.getElementById('text-output');
const extractedText = document.getElementById('extractedText');
const copyTextBtn = document.getElementById('copyTextBtn');
const saveTextBtn = document.getElementById('saveTextBtn');
const saveWordBtn = document.getElementById('saveWordBtn');
const exportWordBtn = document.getElementById('exportWordBtn');
const exportPptBtn = document.getElementById('PptBtn');
const exportTextPptBtn = document.getElementById('exportTextPptBtn');
const statusElement = document.getElementById('status');

// Arrays to hold data
let images = []; // Array of canvas elements
let originalImageDatas = []; // Original ImageData for each image
let svgData = []; // SVG strings
let dxfData = []; // DXF strings

// Handle Image Upload
upload.addEventListener('change', handleFileUpload);
camera.addEventListener('change', handleFileUploadFromCamera);

function handleFileUpload(event) {
    const files = Array.from(event.target.files);
    if (files.length === 0) return;

    // Clear previous images and data
    images = [];
    originalImageDatas = [];
    svgData = [];
    dxfData = [];
    imageContainer.innerHTML = '';
    textOutput.style.display = 'none';
    extractedText.value = '';
    exportSvgBtn.disabled = true;
    convertDxfBtn.disabled = true;
    exportDxfBtn.disabled = true;

    files.forEach((file, index) => {
        if (!file.type.startsWith('image/')) {
            alert(`File ${file.name} is not an image.`);
            return;
        }

        const reader = new FileReader();
        reader.onload = function(e) {
            const img = new Image();
            img.onload = function() {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0, img.width, img.height);
                imageContainer.appendChild(canvas);
                images[index] = canvas;
                originalImageDatas[index] = ctx.getImageData(0, 0, canvas.width, canvas.height);
                statusElement.textContent = `Image ${file.name} loaded successfully.`;
            }
            img.src = e.target.result;
        }
        reader.readAsDataURL(file);
    });
}

function handleFileUploadFromCamera(event) {
    const file = event.target.files[0];
    if (!file || !file.type.startsWith('image/')) {
        alert('Please take a valid photo.');
        return;
    }

    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            imageContainer.appendChild(canvas);
            images.push(canvas);
            originalImageDatas.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
            statusElement.textContent = 'Photo captured successfully.';
        }
        img.src = e.target.result;
    }
    reader.readAsDataURL(file);
}

// Apply Filters to All Images
function applyFiltersToAll() {
    if (images.length === 0) return;
    images.forEach((canvas, index) => applyFiltersToImage(index));
}

// Apply Filters to a Single Image
function applyFiltersToImage(index) {
    const canvas = images[index];
    const ctx = canvas.getContext('2d');
    const originalImageData = originalImageDatas[index];
    if (!originalImageData) return;

    // Reset canvas to original
    ctx.putImageData(originalImageData, 0, 0);

    // Apply CamanJS filters
    Caman(canvas, function () {
        this.revert(false);
        this.brightness(parseInt(brightness.value) - 50); // Adjusting from -50 to +50
        this.contrast(parseInt(contrast.value) - 50); // Adjust to +50
        this.sharpen(parseInt(sharpness.value));
        this.render(function () {
            // Update originalImageDatas with the enhanced image for further processing
            originalImageDatas[index] = ctx.getImageData(0, 0, canvas.width, canvas.height);
        });
    });
}

// Event Listeners for Filters
brightness.addEventListener('input', applyFiltersToAll);
contrast.addEventListener('input', applyFiltersToAll);
sharpness.addEventListener('input', applyFiltersToAll);

// Function to apply scale
function applyScale() {
    if (images.length === 0) {
        alert('No images to scale.');
        return;
    }
    const scaleValue = parseInt(scale.value);
    statusElement.textContent = `Scaling images by ${scaleValue}x...`;

    images.forEach((canvas, index) => {
        const originalImageData = originalImageDatas[index];

        // Create a new canvas for scaling
        const scaledCanvas = document.createElement('canvas');
        const scaledCtx = scaledCanvas.getContext('2d');

        scaledCanvas.width = originalImageData.width * scaleValue;
        scaledCanvas.height = originalImageData.height * scaleValue;

        // Draw the scaled image
        scaledCtx.drawImage(
            canvas,
            0, 0, originalImageData.width, originalImageData.height,
            0, 0, scaledCanvas.width, scaledCanvas.height
        );

        // Replace the old canvas with the new scaled one
        images[index] = scaledCanvas;
        imageContainer.replaceChild(scaledCanvas, canvas);

        // Update the originalImageDatas with the new scaled image data
        originalImageDatas[index] = scaledCtx.getImageData(0, 0, scaledCanvas.width, scaledCanvas.height);
    });

    // Reapply filters after scaling
    applyFiltersToAll();
    statusElement.textContent = `Images scaled by ${scaleValue}x successfully.`;
}

// Event listener for scale
scale.addEventListener('input', applyScale);

// Export Enhanced Images
downloadBtn.addEventListener('click', () => {
    if (images.length === 0) {
        alert('No images to export.');
        return;
    }
    images.forEach((canvas, index) => {
        const link = document.createElement('a');
        const format = 'png'; // Change to 'jpeg' for JPG
        link.download = `enhanced_image_${index + 1}.${format}`;
        link.href = canvas.toDataURL(`image/${format}`);
        link.click();
    });
    statusElement.textContent = 'Enhanced images exported successfully.';
});

// Export Images to PDF
pdfBtn.addEventListener('click', () => {
    if (images.length === 0) {
        alert('No images to export.');
        return;
    }
    const docDefinition = {
        content: images.map((canvas) => {
            return {
                image: canvas.toDataURL('image/png'),
                width: 500
            };
        })
    };
    pdfMake.createPdf(docDefinition).download('enhanced_images.pdf');
    statusElement.textContent = 'Images exported to PDF successfully.';
});

// Vectorize Images to SVG
vectorizeBtn.addEventListener('click', () => {
    if (images.length === 0) {
        alert('No images to vectorize.');
        return;
    }
    svgData = [];
    statusElement.textContent = 'Vectorizing images to SVG...';
    images.forEach((canvas) => {
        const vectorizedSvg = vectorizeImage(canvas);
        svgData.push(vectorizedSvg);
    });
    // Removed alert for vectorization completion
    exportSvgBtn.disabled = false;
    convertDxfBtn.disabled = false;
    statusElement.textContent = 'Vectorization completed.';
});

// Function to Vectorize Image
function vectorizeImage(canvas) {
    const width = canvas.width;
    const height = canvas.height;
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;
    let path = '';
    for (let y = 0; y < height; y += 2) {
        for (let x = 0; x < width; x += 2) {
            const i = (y * width + x) * 4;
            if (data[i] + data[i + 1] + data[i + 2] < 382) {
                path += `M${x},${y} h2 v2 h-2 z `;
            }
        }
    }

    return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
                <path d="${path}" fill="black" />
            </svg>`;
}

// Export SVG Files
exportSvgBtn.addEventListener('click', () => {
    if (svgData.length === 0) {
        alert('No SVG data to export.');
        return;
    }
    svgData.forEach((svg, index) => {
        const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
        saveAs(blob, `vectorized_image_${index + 1}.svg`);
    });
    statusElement.textContent = 'SVG files exported successfully.';
});

// Convert SVG to DXF
convertDxfBtn.addEventListener('click', () => {
    if (svgData.length === 0) {
        alert('Please vectorize images to SVG first.');
        return;
    }
    dxfData = svgData.map((svg) => convertSvgToDxf(svg));
    // Removed alert for conversion completion
    exportDxfBtn.disabled = false;
    statusElement.textContent = 'SVGs converted to DXF.';
});

// Export DXF Files
exportDxfBtn.addEventListener('click', () => {
    if (dxfData.length === 0) {
        alert('No DXF data to export.');
        return;
    }
    dxfData.forEach((dxf, index) => {
        const blob = new Blob([dxf], { type: 'application/dxf' });
        saveAs(blob, `converted_image_${index + 1}.dxf`);
    });
    statusElement.textContent = 'DXF files exported successfully.';
});

// Function to Convert SVG to DXF
function convertSvgToDxf(svgString) {
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
    const path = svgDoc.querySelector('path');
    const d = path.getAttribute('d');
    const commands = d.match(/[MhvzZ][^MhvzZ]*/g);

    let dxf = `0\nSECTION\n2\nENTITIES\n`;

    commands.forEach(cmd => {
        const type = cmd[0];
        const args = cmd.slice(1).trim().split(/[\s,]+/).map(parseFloat);

        if (type === 'M') {
            let x = args[0];
            let y = args[1];
            dxf += `0\nLINE\n8\n0\n10\n${x}\n20\n${y}\n11\n${x + 2}\n21\n${y}\n`;
            dxf += `0\nLINE\n8\n0\n10\n${x + 2}\n20\n${y}\n11\n${x + 2}\n21\n${y + 2}\n`;
            dxf += `0\nLINE\n8\n0\n10\n${x + 2}\n20\n${y + 2}\n11\n${x}\n21\n${y + 2}\n`;
            dxf += `0\nLINE\n8\n0\n10\n${x}\n20\n${y + 2}\n11\n${x}\n21\n${y}\n`;
        }
    });

    dxf += `0\nENDSEC\n0\nEOF`;

    return dxf;
}

// Scan with Colors using CamanJS
scanColorBtn.addEventListener('click', () => {
    if (images.length === 0) {
        alert('No images to scan.');
        return;
    }
    statusElement.textContent = 'Scanning images with colors...';
    images.forEach((canvas, index) => {
        Caman(canvas, function () {
            this.revert(false);
            this.brightness(10);
            this.contrast(20);
            this.sharpen(50);
            this.render(function () {
                originalImageDatas[index] = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
            });
        });
    });
    statusElement.textContent = 'Images scanned with colors successfully.';
});

// Scan Black & White using CamanJS
scanBwBtn.addEventListener('click', () => {
    if (images.length === 0) {
        alert('No images to scan.');
        return;
    }
    statusElement.textContent = 'Scanning images to Black & White...';
    images.forEach((canvas, index) => {
        Caman(canvas, function () {
            this.revert(false);
            this.brightness(10);
            this.contrast(20);
            this.sharpen(50);
            this.greyscale();
            this.render(function () {
                originalImageDatas[index] = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
            });
        });
    });
    statusElement.textContent = 'Images scanned to Black & White successfully.';
});

// Function to apply scan filter
function applyScanFilter(isBlackAndWhite) {
    const intensity = parseInt(scanIntensity.value);
    images.forEach((canvas, index) => {
        Caman(canvas, function () {
            this.revert(false);
            this.brightness(int);
            this.contrast(20 + intensity);
            this.sharpen(50 + intensity);
            if (isBlackAndWhite) {
                this.greyscale();
            }
            this.render(function () {
                originalImageDatas[index] = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas);
            });
        });
    });
    statusElement.textContent = `Images scanned ${isBlackAndWhite ? 'to Black & White' : 'with colors'} successfully.`;
}

// OCR Functionality
ocrBtn.addEventListener('click', async () => {
    if (images.length === 0) {
        alert('No images to perform OCR.');
        return;
    }
    textOutput.style.display = 'block';
    extractedText.value = '';
    statusElement.textContent = 'Extracting text from images...';

    for (let i = 0; i < images.length; i++) {
        const canvas = images[i];
        const { data: { text } } = await Tesseract.recognize(
            canvas.toDataURL('image/png'),
            'eng+ara+rus+chi_sim+hin+ell+kor+heb',
            { logger: (m) => console.log(m) }
        );
        extractedText.value += `--- Image ${i + 1} ---\n${text.trim()}\n\n`;
    }
    statusElement.textContent = 'Text extraction completed.';
});

// Copy Extracted Text
copyTextBtn.addEventListener('click', () => {
    extractedText.select();
    document.execCommand('copy');
    statusElement.textContent = 'Extracted text copied to clipboard.';
});

// Save Extracted Text as .txt
saveTextBtn.addEventListener('click', () => {
    const blob = new Blob([extractedText.value], { type: 'text/plain;charset=utf-8' });
    saveAs(blob, 'extracted_text.txt');
    statusElement.textContent = 'Extracted text saved as .txt.';
});

// Save Extracted Text as Word Document
saveWordBtn.addEventListener('click', () => {
    const header = "<html xmlns:o='urn:schemas-microsoft-com:office:office' " +
        "xmlns:w='urn:schemas-microsoft-com:office:word' " +
        "xmlns='http://www.w3.org/TR/REC-html40'>" +
        "<head><meta charset='utf-8'><title>Extracted Text</title></head><body>";
    const footer = "</body></html>";
    const sourceHTML = header + extractedText.value.replace(/\n/g, '<br>') + footer;
    const blob = new Blob(['\ufeff', sourceHTML], { type: 'application/msword' });
    saveAs(blob, 'extracted_text.doc');
    statusElement.textContent = 'Extracted text saved as Word document.';
});

// Export Images to Word
exportWordBtn.addEventListener('click', async () => {
    if (images.length === 0) {
        alert('No images to export.');
        return;
    }
    const doc = new docx.Document();
    for (let i = 0; i < images.length; i++) {
        const canvas = images[i];
        const blob = await new Promise(resolve => canvas.toBlob(resolve));
        const arrayBuffer = await blob.arrayBuffer();
        const image = docx.Media.addImage(doc, arrayBuffer);
        doc.addSection({
    properties: {},
    children: [
        new docx.Paragraph({
            children: [
                new docx.ImageRun({
                    data: image,
                    transformation: {
                        width: 500,
                        height: 500 * (canvas.height / canvas.width),
                    },
                }),
            ],
        }),
    ]
});
    docx.Packer.toBlob(doc).then(blob => {
        saveAs(blob, "exported_images.docx");
        statusElement.textContent = 'Images exported to Wor.';
    });
});

// Export Images to PowerPoint
exportPptBtn.addEventListener('click', () => {
if (images.length === 0) {
alert('No images to export.');
return;
}

let pptx = new PptxGenJS(); // Ensure the correct instantiation

images.forEach((canvas, index) => {
    let slide = pptx.addSlide();
    slide.addImage({ data: canvas.toDataURL(), x: 1, y: 1, w: 8, h: 5.63 });
});

pptx.writeFile({ fileName: "exported_images.pptx" });

statusElement.textContent = 'Images exported successfully';
});

// Export Extracted Text to PowerPoint
exportTextPpt.addEventListener('click', () => {
    if (!extractedText.value) {
        alert('No text to export.');
        return;
    }
    let pptx = new PptxGenJS();
    slide = pptx.addSlide();
    slide.addText(extractedText.value, { x: 0.5, y: 0.5, w: '95%', h: '95%',Size: 12 });
    pptx.writeFile({ fileName: "extracted_text.pptx" }).then(() => {
        statusElement.textContent = 'Extracted text exported to PowerPoint successfully.';
    });
});

// Event listener for scan intensity
scanIntensity.addEventListener('input', () => {
    if (images.length > 0) {
        applyScanFilter(document.getElementById('scanBwBtn').classList.contains('active'));
    }
});

</script>
</body>
</html>