Extraire du texte d'un fichier .ai sur un logiciel

Report · Mar 16, 2025

Bonjour,

je souhaite mettre au point un logiciel de vérification de plan. j'ai déjà créé une bonne partie qui me permet de selectionner les fichier à importer sur le logiciel et de les afficher. Le logiciel réussi à récupérer les dimensions du fichier pour les afficher mais par contre dans la section adresse il n'arrive pass à récuperer les zones de texte contenues dans un <groupe> du calque titre sur mon fichier illustrator...Voici mon index, mon css, et mon main, merci de votre aide

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>FirePlan Checker</title>
    <link rel="stylesheet" href="../styles/main.css">
    <link rel="icon" href="../assets/icons/favicon.svg" type="image/svg+xml">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <img src="../assets/icons/shield-red.svg" alt="Shield Icon">
        <h1>FirePlan Checker</h1>
        <p>Vérifiez facilement vos plans de sécurité incendie</p>
    </header>
    <nav>
        <button id="validation-tab">
            <img src="../assets/icons/check-green.svg" alt="Check Icon"> Validation des calques
        </button>
        <button id="address-tab">
            <img src="../assets/icons/alert-red.svg" alt="Alert Icon"> Vérification des adresses
        </button>
        <button id="vei-tab">
            <img src="../assets/icons/vei-check.svg" alt="VEI Icon"> Nombre de Vous Êtes Ici
        </button>
    </nav>
    <main id="upload-section">
        <div id="upload-zone">
            <input type="file" id="file-input" multiple style="display: none;">
            <img src="../assets/icons/upload-pink.svg" alt="Upload Icon">
            <p>Déposez vos plans ici ou cliquez pour sélectionner des fichiers</p>
            <p class="small">Formats acceptés : .ai, .pdf</p>
            <div id="file-list"></div>
            <button id="analyze-button" class="analyze-button">Analyser</button>
        </div>
    </main>
    <main id="analysis-section" style="display: none;">
        <header class="analysis-header">
            <h2 style="color: #333;">Résultats de l’analyse</h2>
            <div class="analysis-info">
                <span class="plans-conformity">0/1 plan conforme</span>
                <button class="info-button non-conform">Non conforme</button>
                <button class="generate-report-button">Générer un compte rendu</button>
            </div>
        </header>
        <div id="analysis-content" class="analysis-content">
            <!-- Les résultats de l'analyse seront ajoutés ici dynamiquement -->
        </div>
    </main>
    <!-- Conteneur pour le mode plein écran -->
    <div id="fullscreen-preview" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: black; z-index: 9999;">
        <canvas id="fullscreen-canvas"></canvas>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@psdjs/psd@1.0.0/dist/psd.min.js"></script>
    <script src="../scripts/main.js"></script>
    <footer>
        <div id="sai-logo">
            <img src="../assets/icons/sai-logo.svg" alt="SAI">
        </div>
    </footer>

    <!-- Ajout du script pour exécuter le script ExtendScript -->
    <script src="../scripts/runExtendScript.js"></script>
</body>
</html>

body {
    font-family: 'Poppins', sans-serif;
    background-color: white;
    color: #333;
    text-align: center;
}

header {
    padding: 5px 20px; /* Réduire encore l'écart */
}
header img {
    width: 50px;
    vertical-align: middle;
    display: inline-block;
}
header h1 {
    display: inline-block;
    color: red;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 10px;
}
header p {
    color: gray;
    font-size: 0.9em;
    margin-top: 5px;
}

nav button {
    background-color: white;
    color: #555;
    border: 1px solid #ccc;
    padding: 10px 20px;
    border-radius: 15px;
    margin: 0 10px;
    display: inline-flex;
    align-items: center;
}
nav button img {
    width: 30px;
    margin-right: 10px;
}

#upload-zone {
    border: 2px dashed #ccc;
    padding: 20px;
    border-radius: 20px;
    margin: 20px auto;
    cursor: pointer;
    width: 80%;
    max-width: 600px;
    color: #333;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#upload-zone img {
    width: 100px;
    animation: pulse 1s infinite;
}

#upload-zone p {
    margin: 10px 0;
}
#upload-zone .small {
    color: gray;
    font-size: 0.8em;
}
#file-list {
    max-height: 200px;
    overflow-y: auto;
    text-align: center;
    padding: 20px;
    font-size: 12px;
    margin-top: 5px;
    flex-grow: 1; /* Permet à la liste des fichiers de prendre tout l'espace disponible */
    display: flex;
    flex-direction: column; /* Aligne les fichiers verticalement */
    gap: 10px; /* Espacement entre les fichiers */
}
#sai-logo img {
    width: 50px;
}

.file-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-item img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.file-item .file-name {
    flex-grow: 1;
    text-align: left; /* Aligner le texte à gauche */
}

.file-item .file-size {
    background-color: #e0e0e0;
    border-radius: 5px;
    padding: 2px 5px;
    font-size: 12px;
    color: #333;
    display: inline-block;
    margin-left: 10px;
}

.remove-icon {
    width: 10px;
    height: 10px;
    cursor: pointer;
    margin-left: 10px;
}

/* Styles pour un défilement moderne et minimaliste */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Animation pulse */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Classe pour réduire la taille de l'icône */
#upload-zone img.small-icon {
    width: 50px;
    height: 50px;
}

/* Styles pour le bouton Analyser */
.analyze-button {
    background-color: rgb(73, 158, 68);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 15px;
    font-size: 16px;
    margin-top: 10px;
    display: none; /* Masquer par défaut */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.analyze-button:hover {
    background-color: rgb(60, 130, 55);
}

/* Styles pour la section d'analyse */
.analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: white;
    border-bottom: 1px solid #ccc;
}

.analysis-header h2 {
    color: #333;
    font-size: 24px;
    margin: 0;
}

.analysis-info {
    display: flex;
    align-items: center;
}

.analysis-info .plans-conformity {
    color: gray;
    margin-right: 10px;
}

.analysis-info .info-button {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 10px;
    margin-right: 10px;
}

.analysis-info .generate-report-button {
    background-color: blue;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 10px;
}

.analysis-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.analysis-block {
    background-color: #f9f9f9;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid #ccc;
}

.file-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.file-header .file-name {
    font-weight: bold;
}

.file-header .conformity-status {
    background-color: red;
    color: white;
    padding: 3px 8px; /* Réduire la taille de l'indicateur de conformité */
    border-radius: 10px;
}

.content-block {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Ajouter un espace entre les sections */
}

.details-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left; /* Aligner le texte à gauche */
}

.details-item {
    background-color: #fff;
    border-radius: 20px;
    padding: 10px 20px;
    border: 1px solid #ccc;
}

.details-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Espace entre le titre et les détails */
}

.details-header img.status-icon {
    margin-right: 10px;
}

.details-content {
    text-align: left; /* Aligner le texte à gauche */
    background-color: #f1f1f1; /* Couleur de fond du bloc */
    padding: 10px;
    border-radius: 10px;
}

/* Nouveau style pour aligner les blocs infos avec le titre */
.details-item .details-content-wrapper {
    display: flex;
    align-items: flex-start;
}

.details-item .details-content-wrapper h3 {
    display: flex;
    align-items: center;
    margin: 0;
}

.details-item .details-content-wrapper img {
    width: 24px; /* Taille adaptée pour les logos */
    height: 24px; /* Taille adaptée pour les logos */
    margin-right: 10px;
}

.details-item .details-content-block {
    margin-left: 30px;
}

.preview-block {
    flex: 1;
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    padding: 10px 20px;
    border: 1px solid #ccc;
    text-align: center; /* Aligner le texte au centre */
    position: relative;
}

.preview-block h3 {
    margin-bottom: 10px;
}

.plan-preview-canvas {
    max-width: 100%;
    max-height: 400px;
    display: block;
    margin: 0 auto; /* Centrer le canvas */
    cursor: pointer; /* Changer le curseur pour indiquer que c'est cliquable */
}

.fullscreen-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    display: none; /* Masquer le bouton plein écran car le canvas est cliquable */
}

.fullscreen-button:hover {
    background-color: #0056b3;
}

#fullscreen-preview {
    display: flex;
    justify-content: center;
    align-items: center;
}

#fullscreen-canvas {
    max-width: 100%;
    max-height: 100%;
}

/* Styles pour les check-icons */
.check-icon {
    width: 48px !important; /* Taille des check-icons */
    height: 48px !important; /* Taille des check-icons */
    margin-right: 10px;
    flex-shrink: 0; /* Empêcher le rétrécissement des check-icons */
}

document.addEventListener('DOMContentLoaded', function () {
    const uploadSection = document.getElementById('upload-section');
    const analysisSection = document.getElementById('analysis-section');
    const uploadZone = document.getElementById('upload-zone');
    const fileInput = document.getElementById('file-input');
    const fileList = document.getElementById('file-list');
    const uploadIcon = uploadZone.querySelector('img');
    const uploadText = uploadZone.querySelectorAll('p');
    const analyzeButton = document.getElementById('analyze-button');
    const headerDescription = document.querySelector('header p');
    const navButtons = document.querySelectorAll('nav button');
    const analysisContent = document.getElementById('analysis-content');
    const fullscreenPreview = document.getElementById('fullscreen-preview');
    const fullscreenCanvas = document.getElementById('fullscreen-canvas');

    // Configurer pdf.js worker
    pdfjsLib.GlobalWorkerOptions.workersrc='https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.worker.min.js';

    // Ouvrir l'explorateur de fichiers lors du clic sur la zone de téléchargement
    uploadZone.addEventListener('click', () => {
        fileInput.click();
    });

    // Gérer les fichiers sélectionnés via l'explorateur de fichiers
    fileInput.addEventListener('change', (event) => {
        handleFiles(event.target.files);
    });

    // Gérer les fichiers déposés via le glisser/déposer
    uploadZone.addEventListener('dragover', (event) => {
        event.preventDefault();
        uploadZone.classList.add('dragover');
    });

    uploadZone.addEventListener('dragleave', () => {
        uploadZone.classList.remove('dragover');
    });

    uploadZone.addEventListener('drop', (event) => {
        event.preventDefault();
        uploadZone.classList.remove('dragover');
        handleFiles(event.dataTransfer.files);
    });

    // Fonction pour gérer et afficher les fichiers
    function handleFiles(files) {
        // Réduire la taille de l'icône d'upload et masquer le texte
        uploadIcon.classList.add('small-icon');
        uploadText.forEach(p => p.style.display = 'none');

        // Obtenir la liste des fichiers déjà importés
        const existingFiles = Array.from(fileList.getElementsByClassName('file-name')).map(span => span.textContent);

        for (const file of files) {
            // Vérifier si le fichier a déjà été importé
            if (existingFiles.includes(file.name)) {
                alert(`Le fichier "${file.name}" a déjà été importé.`);
                continue;
            }

            const fileItem = document.createElement('div');
            fileItem.classList.add('file-item');

            const fileIcon = document.createElement('img');
            fileIcon.src='../assets/icons/file-icon.svg';
            fileIcon.alt = 'File Icon';
            fileItem.file = file; // Attacher l'objet fichier à l'élément fileItem

            const fileName = document.createElement('span');
            fileName.textContent = file.name;
            fileName.classList.add('file-name');

            const fileSize = document.createElement('span');
            fileSize.textContent = `${(file.size / 1024).toFixed(1)} Ko`;
            fileSize.classList.add('file-size');

            const removeIcon = document.createElement('img');
            removeIcon.src='../assets/icons/remove-icon.svg'; // Assurez-vous que cette icône existe
            removeIcon.alt = 'Remove Icon';
            removeIcon.classList.add('remove-icon');
            removeIcon.addEventListener('click', (event) => {
                event.stopPropagation(); // Empêche la propagation de l'événement de clic
                fileItem.remove();
                if (!fileList.hasChildNodes()) {
                    // Restaurer la taille de l'icône d'upload et réafficher le texte si aucun fichier n'est présent
                    uploadIcon.classList.remove('small-icon');
                    uploadText.forEach(p => p.style.display = 'block');
                    analyzeButton.style.display = 'none'; // Masquer le bouton Analyser
                }
            });

            fileItem.appendChild(fileIcon);
            fileItem.appendChild(fileName);
            fileItem.appendChild(fileSize);
            fileItem.appendChild(removeIcon);

            fileList.appendChild(fileItem);
        }

        // Afficher le bouton Analyser si des fichiers sont importés
        if (fileList.hasChildNodes()) {
            analyzeButton.style.display = 'block';
        }
    }

    // Ajouter un gestionnaire d'événements pour le bouton "Analyser"
    analyzeButton.addEventListener('click', (event) => {
        event.preventDefault();
        event.stopPropagation();

        // Masquer les éléments spécifiques
        if (headerDescription) {
            headerDescription.style.display = 'none';
        }
        navButtons.forEach(button => {
            button.style.display = 'none';
        });

        // Masquer la section de téléchargement et afficher la section d'analyse
        uploadSection.style.display = 'none';
        analysisSection.style.display = 'block';

        // Générer les blocs d'analyse pour chaque fichier importé
        generateAnalysisBlocks();
    });

    function generateAnalysisBlocks() {
        // Obtenir la liste des fichiers déjà importés
        const importedFiles = Array.from(fileList.getElementsByClassName('file-item'));

        importedFiles.forEach(fileItem => {
            const fileName = fileItem.querySelector('.file-name').textContent;

            const analysisBlock = document.createElement('div');
            analysisBlock.classList.add('analysis-block');

            const fileHeader = document.createElement('div');
            fileHeader.classList.add('file-header');
            fileHeader.innerHTML = `
                <span class="file-name">${fileName}</span>
                <span class="conformity-status">Non conforme</span>
            `;

            const contentBlock = document.createElement('div');
            contentBlock.classList.add('content-block');

            const detailsBlock = document.createElement('div');
            detailsBlock.classList.add('details-block');

            detailsBlock.innerHTML = `
                <div class="details-item">
                    <div class="details-content-wrapper">
                        <img src="../assets/icons/error-icon.svg" alt="Error Icon" class="check-icon">
                        <div class="details-content-block">
                            <h3><img src="../assets/icons/dimensions-icon.svg" alt="Dimensions Icon"> Dimensions du plan :</h3>
                            <div class="details-content">
                                <p><strong>Format:</strong> <span class="format-value">A2</span></p>
                                <p><strong>Orientation:</strong> <span class="orientation-value">Horizontal (Paysage)</span></p>
                                <p><strong>Dimensions:</strong> <span class="dimensions-value">1191,0 x 842,00 mm</span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="details-item">
                    <div class="details-content-wrapper">
                        <img src="../assets/icons/error-icon.svg" alt="Error Icon" class="check-icon">
                        <div class="details-content-block">
                            <h3><img src="../assets/icons/address-icon.svg" alt="Address Icon"> Vérification du nom du site et de l’adresse :</h3>
                            <div class="details-content">
                                <p><strong>Nom du site détecté:</strong> <span class="site-name-value">Nom du site non détecté</span></p>
                                <p><strong>Adresse du site détectée:</strong> <span class="site-address-value">Adresse du site non détectée</span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="details-item">
                    <div class="details-content-wrapper">
                        <img src="../assets/icons/ok-icon.svg" alt="Ok Icon" class="check-icon">
                        <div class="details-content-block">
                            <h3><img src="../assets/icons/vei-icon.svg" alt="VEI Icon"> Vérification des groupes VEI :</h3>
                            <div class="details-content">
                                <p><strong>Nombre de pastilles détectées:</strong> 1</p>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            const previewBlock = document.createElement('div');
            previewBlock.classList.add('preview-block');
            previewBlock.innerHTML = `
                <h3>Aperçu du plan</h3>
                <canvas class="plan-preview-canvas"></canvas>
            `;

            const canvas = previewBlock.querySelector('.plan-preview-canvas');
            canvas.addEventListener('click', () => {
                displayFullscreen(fileItem.file);
            });

            contentBlock.appendChild(detailsBlock);
            contentBlock.appendChild(previewBlock);
            analysisBlock.appendChild(fileHeader);
            analysisBlock.appendChild(contentBlock);
            analysisContent.appendChild(analysisBlock);

            // Afficher l'aperçu du plan et analyser les informations
            displayPreviewAndAnalyze(fileItem.file, canvas, analysisBlock);
        });
    }

    async function displayPreviewAndAnalyze(file, canvas, analysisBlock) {
        const fileReader = new FileReader();
        fileReader.onload = async function () {
            const arrayBuffer = this.result;
            let pdfData = arrayBuffer;

            // Si le fichier est un .ai, convertir en PDF (simulé ici)
            if (file.name.endsWith('.ai')) {
                pdfData = await convertAiToPdf(arrayBuffer);
                if (!pdfData) {
                    console.error('Erreur lors de la conversion du fichier .ai en PDF');
                    return;
                }
            }

            try {
                const pdfDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
                const page = await pdfDoc.getPage(1);
                const viewport = page.getViewport({ scale: 1 });
                const context = canvas.getContext('2d');
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                await page.render({ canvasContext: context, viewport: viewport }).promise;

                // Analyser le format, l'orientation et les dimensions
                const width = viewport.width;
                const height = viewport.height;
                const format = getPaperSize(pointsToMm(width), pointsToMm(height));
                const orientation = width > height ? 'Horizontal (Paysage)' : 'Vertical (Portrait)';
                const dimensions = `${pointsToMm(width).toFixed(2)} x ${pointsToMm(height).toFixed(2)} mm`;

                // Mettre à jour les informations analysées dans l'interface utilisateur
                analysisBlock.querySelector('.format-value').textContent = format;
                analysisBlock.querySelector('.orientation-value').textContent = orientation;
                analysisBlock.querySelector('.dimensions-value').textContent = dimensions;

                // Mettre à jour l'icône de vérification en fonction du format détecté
                const checkIcon = analysisBlock.querySelector('.details-content-wrapper img.check-icon');
                if (format === "Format inconnu") {
                    checkIcon.src="../assets/icons/error-icon.svg";
                    checkIcon.alt = "Error Icon";
                } else {
                    checkIcon.src="../assets/icons/ok-icon.svg";
                    checkIcon.alt = "Ok Icon";
                }

                // Analyser les informations du calque TITRE
                if (file.name.endsWith('.ai')) {
                    await analyzeTitleLayerAi(arrayBuffer, analysisBlock);
                } else {
                    await analyzeTitleLayer(pdfDoc, analysisBlock);
                }

                // Vérifier la conformité du plan
                checkConformity(analysisBlock);
            } catch (error) {
                console.error('Erreur lors de l\'affichage de l\'aperçu :', error);
            }
        };
        fileReader.readAsArrayBuffer(file);
    }

    async function analyzeTitleLayer(pdfDoc, analysisBlock) {
        try {
            const page = await pdfDoc.getPage(1);
            const content = await page.getTextContent();

            let siteName = "Nom du site non détecté";
            let siteAddress = "Adresse du site non détectée";

            // Parcourir les éléments de texte pour trouver ceux du calque TITRE
            for (const item of content.items) {
                if (item.str.includes("TITRE")) {
                    const textItems = content.items;
                    if (textItems.length > 1) {
                        siteName = textItems[1].str;
                    }
                    if (textItems.length > 2) {
                        siteAddress = textItems[2].str;
                    }
                    break;
                }
            }

            // Mettre à jour les informations de vérification d'adresse dans l'interface utilisateur
            analysisBlock.querySelector('.site-name-value').textContent = siteName;
            analysisBlock.querySelector('.site-address-value').textContent = siteAddress;
        } catch (error) {
            console.error('Erreur lors de l\'analyse du calque TITRE :', error);
        }
    }

    async function analyzeTitleLayerAi(arrayBuffer, analysisBlock) {
        try {
            const psd = await PSD.fromArrayBuffer(arrayBuffer);
            psd.parse();

            let siteName = "Nom du site non détecté";
            let siteAddress = "Adresse du site non détectée";

            // Parcourir les calques pour trouver le calque TITRE
            const titleLayer = psd.tree().childrenAtPath('TITRE')[0];
            if (titleLayer) {
                const textLayers = titleLayer.children();
                if (textLayers.length > 0) {
                    siteName = textLayers[0].get('text').value;
                }
                if (textLayers.length > 1) {
                    siteAddress = textLayers[1].get('text').value;
                }
            }

            // Mettre à jour les informations de vérification d'adresse dans l'interface utilisateur
            analysisBlock.querySelector('.site-name-value').textContent = siteName;
            analysisBlock.querySelector('.site-address-value').textContent = siteAddress;
        } catch (error) {
            console.error('Erreur lors de l\'analyse du calque TITRE du fichier .ai :', error);
        }
    }

    async function displayFullscreen(file) {
        const fileReader = new FileReader();
        fileReader.onload = async function () {
            const arrayBuffer = this.result;
            let pdfData = arrayBuffer;

            // Si le fichier est un .ai, convertir en PDF (simulé ici)
            if (file.name.endsWith('.ai')) {
                pdfData = await convertAiToPdf(arrayBuffer);
                if (!pdfData) {
                    console.error('Erreur lors de la conversion du fichier .ai en PDF');
                    return;
                }
            }

            try {
                const pdfDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
                const page = await pdfDoc.getPage(1);
                const viewport = page.getViewport({ scale: 1 });
                const context = fullscreenCanvas.getContext('2d');
                // Ajuster la taille du canvas pour le plein écran
                const windowWidth = window.innerWidth;
                const windowHeight = window.innerHeight;
                const imgRatio = viewport.width / viewport.height;
                const windowRatio = windowWidth / windowHeight;
                let scale;
                if (imgRatio > windowRatio) {
                    scale = windowWidth / viewport.width;
                } else {
                    scale = windowHeight / viewport.height;
                }
                fullscreenCanvas.width = viewport.width * scale;
                fullscreenCanvas.height = viewport.height * scale;
                const scaledViewport = page.getViewport({ scale: scale });
                await page.render({ canvasContext: context, viewport: scaledViewport }).promise;
                fullscreenPreview.style.display = 'flex';
            } catch (error) {
                console.error('Erreur lors de l\'affichage en plein écran :', error);
            }
        };
        fileReader.readAsArrayBuffer(file);
    }

    // Fermer le mode plein écran en cliquant sur le plan
    fullscreenCanvas.addEventListener('click', () => {
        fullscreenPreview.style.display = 'none';
    });

    // Simuler la conversion .ai vers PDF (remplacez par une vraie API)
    async function analyzeTitleLayerAi(arrayBuffer, analysisBlock) {
        try {
            // Utiliser une API ou une bibliothèque pour lire le fichier .ai
            const aiData = await convertAiToReadableFormat(arrayBuffer);
    
            let siteName = "Nom du site non détecté";
            let siteAddress = "Adresse du site non détectée";
    
            // Parcourir les calques pour trouver le groupe spécifique
            const titleGroup = aiData.layers.find(layer => layer.name === 'TITRE');
            if (titleGroup) {
                const textLayers = titleGroup.children.filter(child => child.type === 'text');
                if (textLayers.length > 0) {
                    siteName = textLayers[0].text;
                }
                if (textLayers.length > 1) {
                    siteAddress = textLayers[1].text;
                }
            }
    
            // Mettre à jour les informations de vérification d'adresse dans l'interface utilisateur
            analysisBlock.querySelector('.site-name-value').textContent = siteName;
            analysisBlock.querySelector('.site-address-value').textContent = siteAddress;
        } catch (error) {
            console.error('Erreur lors de l\'analyse du groupe TITRE du fichier .ai :', error);
        }
    }
    
    async function convertAiToReadableFormat(arrayBuffer) {
        // Utiliser une API comme CloudConvert pour convertir .ai en un format lisible
        // Ceci est une simulation. Implémentez une vraie conversion via une API ou un serveur.
        console.warn('Conversion .ai vers un format lisible non implémentée.');
        return {
            layers: [
                {
                    name: 'TITRE',
                    children: [
                        { type: 'text', text: 'Nom du site' },
                        { type: 'text', text: 'Adresse du site' }
                    ]
                }
            ]
        };
    }
    

    function getPaperSize(width_mm, height_mm) {
        const sizes = {
            "A0": [841, 1189],
            "A1": [594, 841],
            "A2": [420, 594],
            "A3": [297, 420],
            "A4": [210, 297]
        };
        for (const [size, [w, h]] of Object.entries(sizes)) {
            if (Math.abs(width_mm - w) < 5 && Math.abs(height_mm - h) < 5) {
                return `${size} Vertical`;
            } else if (Math.abs(width_mm - h) < 5 && Math.abs(height_mm - w) < 5) {
                return `${size} Horizontal`;
            }
        }
        return "Format inconnu";
    }

    function checkConformity(analysisBlock) {
        const checkIcons = analysisBlock.querySelectorAll('.details-content-wrapper img.check-icon');
        const conformityStatus = analysisBlock.querySelector('.conformity-status');

        let isConform = true;
        checkIcons.forEach(icon => {
            if (icon.alt === 'Error Icon') {
                isConform = false;
            }
        });

        if (isConform) {
            conformityStatus.textContent = 'Conforme';
            conformityStatus.style.backgroundColor = 'green';
        } else {
            conformityStatus.textContent = 'Non conforme';
            conformityStatus.style.backgroundColor = 'red';
        }
    }
});

Extraire du texte d'un fichier .ai sur un logiciel

Explore related tutorials & articles