55.html:624  Uncaught SyntaxError: Unexpected token ')'

The error message **"Uncaught SyntaxError: Unexpected token ')'"** indicates that there is a syntax error in your JavaScript code on line 624 of the file **55.html**. This error occurs when the JavaScript interpreter encounters a closing parenthesis `)` that it does not expect.

### Possible Causes:
1. **Mismatched Parentheses**: There might be an extra closing parenthesis `)` without a corresponding opening parenthesis `(`.
2. **Incorrect Function Call**: A function call might be incorrectly formatted, such as having an extra `)`.

### How to Fix:
- **Check Line 624**: Look at the code on line 624 and the lines around it to find the misplaced parenthesis.
- **Balance Parentheses**: Ensure that every opening parenthesis `(` has a matching closing parenthesis `)`.
- **Syntax Validation**: Use a code editor with syntax highlighting to help identify mismatched parentheses. 


when i select image to upload, it does not get imported not displayed in the app


solve it, and keep everything else the same

write the full app in one large html code

this is my current app code :

<!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: #1e1e
        color: #ffffff;
    }

    # {
        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>