replace the upload images button with a new button to import images from the this is the code of my app :user device
keep everything else same as it is
write the full app in one html 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: #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>