-
+
+
+
@@ -228,160 +277,389 @@
});
}
- // 4. Assistance IA (Bouton Détecter par IA)
+ // 4. Assistance IA (Détection intelligente par photo)
const btnAIDetect = document.getElementById('btn_sign_ai_detect');
+ const btnPickExisting = document.getElementById('btn_ai_pick_existing');
+ const btnTakeNew = document.getElementById('btn_ai_take_new');
const aiFileInput = document.getElementById('sign_ai_file_input');
const aiResultContainer = document.getElementById('sign_ai_result_container');
const aiSpinner = document.getElementById('sign_ai_spinner');
+ const aiSpinnerText = document.getElementById('sign_ai_spinnerText');
const aiBadgeContainer = document.getElementById('sign_ai_badge_container');
- if (btnAIDetect && aiFileInput) {
- btnAIDetect.addEventListener('click', function() {
- aiFileInput.click();
- });
+ function getAvailablePhotos() {
+ if (typeof window.getInspectionPhotos === 'function') {
+ return window.getInspectionPhotos();
+ }
+ return (window.accumulatedInspectionFiles || []).filter(f => f && f.type && f.type.startsWith('image/'));
+ }
- aiFileInput.addEventListener('change', async function() {
- if (!this.files || !this.files.length) return;
- const file = this.files[0];
+ function updateAiPhotosIndicator() {
+ const photos = getAvailablePhotos();
+ const badge = document.getElementById('sign_ai_photos_badge');
+ const dropCount = document.getElementById('sign_ai_dropdown_count');
+ const label = document.getElementById('btn_sign_ai_detect_label');
- if (aiResultContainer) aiResultContainer.classList.remove('d-none');
- if (aiSpinner) aiSpinner.classList.remove('d-none');
- if (aiBadgeContainer) aiBadgeContainer.innerHTML = '';
+ if (dropCount) dropCount.textContent = photos.length;
- const formData = new FormData();
- formData.append('image', file);
+ if (photos.length === 0) {
+ if (badge) badge.classList.add('d-none');
+ if (label) label.textContent = '{% translate "Détecter par IA" %}';
+ } else if (photos.length === 1) {
+ if (badge) {
+ badge.innerHTML = '1 photo prête';
+ badge.classList.remove('d-none');
+ }
+ if (label) label.textContent = '{% translate "Analyser la photo" %}';
+ } else {
+ if (badge) {
+ badge.innerHTML = `${photos.length} photos`;
+ badge.classList.remove('d-none');
+ }
+ if (label) label.textContent = '{% translate "Détecter par IA" %}';
+ }
+ }
- try {
- const csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]')?.value || '';
- const response = await fetch('/sign/api/detect/', {
- method: 'POST',
- headers: {
- 'X-CSRFToken': csrfToken,
- },
- body: formData
- });
+ window.addEventListener('inspection-photos-updated', updateAiPhotosIndicator);
+ // Mise à jour immédiate à l'affichage
+ setTimeout(updateAiPhotosIndicator, 50);
- if (aiSpinner) aiSpinner.classList.add('d-none');
+ async function runSignAiDetection(file) {
+ if (!file) return;
- if (!response.ok) {
- throw new Error('Erreur réseau (' + response.status + ')');
- }
+ if (aiResultContainer) aiResultContainer.classList.remove('d-none');
+ if (aiSpinner) aiSpinner.classList.remove('d-none');
+ if (aiSpinnerText) aiSpinnerText.textContent = '{% translate "Analyse visuelle & OCR en cours..." %}';
+ if (aiBadgeContainer) aiBadgeContainer.innerHTML = '';
- const data = await response.json();
- if ((data.status === 'success' || data.success) && data.panels && data.panels.length > 0) {
- // Panneau principal détecté
- const topPanel = data.panels[0];
- const detectedCode = topPanel.code;
- const confidence = Math.round((topPanel.confidence || 0) * 100);
- const detectedText = topPanel.ocr_text || topPanel.signpanel_text || topPanel.text || '';
- const panelLabel = topPanel.name_fr || topPanel.label_fr || topPanel.name_nl || '';
+ const formData = new FormData();
+ formData.append('image', file);
- // Remplissage des inputs cachés
- const inputAiCode = document.getElementById('insp_ai_detected_code');
- const inputAiConf = document.getElementById('insp_ai_confidence');
- if (inputAiCode) inputAiCode.value = detectedCode;
- if (inputAiConf) inputAiConf.value = topPanel.confidence || 0;
+ try {
+ const csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]')?.value || '';
+ const response = await fetch('/sign/api/detect/', {
+ method: 'POST',
+ headers: {
+ 'X-CSRFToken': csrfToken,
+ },
+ body: formData
+ });
- // Comparaison avec le type actuel
- const currentSelectedOpt = selectType?.options[selectType.selectedIndex];
- const currentCode = currentSelectedOpt?.getAttribute('data-code') || '{{ asset.signpanel_type.code|default:"" }}';
- const isMatch = (currentCode.toUpperCase() === detectedCode.toUpperCase());
+ if (aiSpinner) aiSpinner.classList.add('d-none');
- let badgeHtml = '';
- if (isMatch) {
- badgeHtml = `
-
+
-
+
{% translate "Assistant IA Signalisation" %}
+
-
+
- {% translate "Photographiez le panneau pour valider ou corriger automatiquement le type & texte" %}
+ {% translate "Photographiez ou utilisez une photo déjà prise pour détecter automatiquement le type & texte" %}
+
+
+
+
- {% translate "Analyse visuelle & OCR en cours..." %}
+ {% translate "Analyse visuelle & OCR en cours..." %}
-
- }.svg)
-
-
-
+ if (!response.ok) {
+ throw new Error('Erreur réseau (' + response.status + ')');
+ }
+
+ const data = await response.json();
+ if ((data.status === 'success' || data.success) && data.panels && data.panels.length > 0) {
+ // Panneau principal détecté
+ const topPanel = data.panels[0];
+ const detectedCode = topPanel.code;
+ const confidence = Math.round((topPanel.confidence || 0) * 100);
+ const detectedText = topPanel.ocr_text || topPanel.signpanel_text || topPanel.text || '';
+ const panelLabel = topPanel.name_fr || topPanel.label_fr || topPanel.name_nl || '';
+
+ // Remplissage des inputs cachés
+ const inputAiCode = document.getElementById('insp_ai_detected_code');
+ const inputAiConf = document.getElementById('insp_ai_confidence');
+ if (inputAiCode) inputAiCode.value = detectedCode;
+ if (inputAiConf) inputAiConf.value = topPanel.confidence || 0;
+
+ // Comparaison avec le type actuel
+ const selectTypeEl = document.getElementById('insp_verified_signpanel_type');
+ const currentSelectedOpt = selectTypeEl?.options[selectTypeEl.selectedIndex];
+ const currentCode = currentSelectedOpt?.getAttribute('data-code') || '{{ asset.signpanel_type.code|default:"" }}';
+ const isMatch = (currentCode.trim().toUpperCase() === detectedCode.trim().toUpperCase());
+
+ let badgeHtml = '';
+ if (isMatch) {
+ badgeHtml = `
+ ✓ Conforme : ${detectedCode} (${confidence}%)
- ${panelLabel}
-
+
+
+
- `;
- } else {
- badgeHtml = `
-
+
+
- Validé
✓ Conforme : ${detectedCode} (${confidence}%)
+ ${panelLabel}
-
-
-
+ `;
+ } else {
+ badgeHtml = `
+
-
-
+ Validé
+ Détecté : ${detectedCode} (${confidence}%)
- ${panelLabel}
-
+
+ `;
+ }
- if (detectedText) {
- badgeHtml += `
-
+
+
+
+
+
- Détecté : ${detectedCode} (${confidence}%)
+ ${panelLabel}
+
- `;
- }
+
- Texte OCR : « ${detectedText} »
+ if (detectedText) {
+ badgeHtml += `
+
+ Texte OCR : « ${detectedText} »
+
- `;
- }
-
- aiBadgeContainer.innerHTML = badgeHtml;
-
- // Bouton Appliquer le type détecté
- const btnApplyCode = document.getElementById('btn_apply_ai_code');
- if (btnApplyCode) {
- btnApplyCode.addEventListener('click', function() {
- const codeToApply = this.getAttribute('data-code');
- if (selectType) {
- for (let i = 0; i < selectType.options.length; i++) {
- if ((selectType.options[i].getAttribute('data-code') || '').toUpperCase() === codeToApply.toUpperCase()) {
- selectType.selectedIndex = i;
- selectType.dispatchEvent(new Event('change'));
- break;
- }
- }
- }
- });
- }
-
- // Bouton Insérer le texte
- const btnApplyText = document.getElementById('btn_apply_ai_text');
- if (btnApplyText) {
- btnApplyText.addEventListener('click', function() {
- const textToApply = this.getAttribute('data-text');
- if (inputText) {
- inputText.value = textToApply;
- }
- });
- }
-
- // Ajoute aussi automatiquement la photo à la liste des photos de l'inspection !
- if (window.inspAccumulatedFiles) {
- window.inspAccumulatedFiles.push(file);
- if (typeof window.renderInspPhotosPreview === 'function') {
- window.renderInspPhotosPreview();
- }
- }
-
- } else {
- aiBadgeContainer.innerHTML = `
-
- Aucun panneau reconnu avec certitude sur cette image.
`;
}
- } catch (err) {
- if (aiSpinner) aiSpinner.classList.add('d-none');
+
+ aiBadgeContainer.innerHTML = badgeHtml;
+
+ // Bouton Appliquer le type détecté
+ const btnApplyCode = document.getElementById('btn_apply_ai_code');
+ if (btnApplyCode) {
+ btnApplyCode.addEventListener('click', function(e) {
+ if (e) e.preventDefault();
+ const codeToApply = (this.getAttribute('data-code') || '').trim();
+ const nameToApply = this.getAttribute('data-name') || '';
+ const upperCode = codeToApply.toUpperCase();
+
+ const select = document.getElementById('insp_verified_signpanel_type');
+ const previewImg = document.getElementById('sign_preview_img');
+ const previewCode = document.getElementById('sign_preview_code');
+ const previewName = document.getElementById('sign_preview_name');
+
+ let matched = false;
+ if (select) {
+ for (let i = 0; i < select.options.length; i++) {
+ const optCode = (select.options[i].getAttribute('data-code') || '').trim().toUpperCase();
+ if (optCode === upperCode) {
+ select.selectedIndex = i;
+ matched = true;
+ break;
+ }
+ }
+
+ if (!matched) {
+ const newOpt = document.createElement('option');
+ newOpt.value = upperCode;
+ newOpt.setAttribute('data-code', upperCode);
+ newOpt.setAttribute('data-name', nameToApply || upperCode);
+ newOpt.textContent = `${upperCode} - ${nameToApply || upperCode}`;
+ select.appendChild(newOpt);
+ select.selectedIndex = select.options.length - 1;
+ matched = true;
+ }
+
+ select.dispatchEvent(new Event('change', { bubbles: true }));
+ }
+
+ // Mise à jour visuelle garantie
+ if (previewImg) {
+ previewImg.src = `/static/assets/road_signs/2025/${upperCode}.svg`;
+ previewImg.alt = upperCode;
+ }
+ if (previewCode) {
+ previewCode.textContent = `${upperCode} - ${nameToApply || ''}`;
+ }
+ if (previewName) {
+ previewName.textContent = nameToApply || '';
+ }
+
+ // Mise à jour input caché
+ const inputAiCode = document.getElementById('insp_ai_detected_code');
+ if (inputAiCode) inputAiCode.value = upperCode;
+
+ // Feedback visuel sur le bouton et l'alerte
+ const btnContainer = document.getElementById('ai_apply_btn_container');
+ if (btnContainer) {
+ btnContainer.innerHTML = `
+
+ Appliqué
+
+ `;
+ }
+
+ const alertBox = document.getElementById('ai_detect_alert_box');
+ if (alertBox) {
+ alertBox.className = 'alert alert-success d-flex align-items-center justify-content-between p-2 mb-1 rounded-3';
+ }
+
+ // Animation de surbrillance du sélecteur
+ const previewBox = document.getElementById('sign_selected_preview');
+ if (previewBox) {
+ previewBox.classList.add('border-primary', 'bg-primary-subtle', 'bg-opacity-25');
+ setTimeout(() => {
+ previewBox.classList.remove('border-primary', 'bg-primary-subtle', 'bg-opacity-25');
+ }, 1000);
+ }
+ });
+ }
+
+ // Bouton Insérer le texte
+ const btnApplyText = document.getElementById('btn_apply_ai_text');
+ if (btnApplyText) {
+ btnApplyText.addEventListener('click', function(e) {
+ if (e) e.preventDefault();
+ const textToApply = this.getAttribute('data-text') || '';
+ const inputTextEl = document.getElementById('insp_verified_signpanel_text');
+ if (inputTextEl) {
+ inputTextEl.value = textToApply;
+ inputTextEl.focus();
+ inputTextEl.dispatchEvent(new Event('input', { bubbles: true }));
+ inputTextEl.classList.add('border-success');
+ setTimeout(() => inputTextEl.classList.remove('border-success'), 1000);
+ }
+
+ const textBtnContainer = document.getElementById('ai_apply_text_btn_container');
+ if (textBtnContainer) {
+ textBtnContainer.innerHTML = `
+ Inséré
+ `;
+ }
+ });
+ }
+
+ // Ajout automatique de la photo à la liste globale de l'inspection si absente
+ if (typeof window.addInspectionPhoto === 'function') {
+ window.addInspectionPhoto(file);
+ }
+
+ } else {
aiBadgeContainer.innerHTML = `
-
- Erreur lors de l'analyse : ${err.message}
+
+ Aucun panneau reconnu avec certitude sur cette image.
`;
}
+ } catch (err) {
+ if (aiSpinner) aiSpinner.classList.add('d-none');
+ aiBadgeContainer.innerHTML = `
+
+ Erreur lors de l'analyse : ${err.message}
+
+ `;
+ }
+ }
+
+ function openPhotoPickerModal(photos) {
+ let modalEl = document.getElementById('signAiPhotoPickerModal');
+ if (!modalEl) return;
+ if (modalEl.parentElement !== document.body) {
+ document.body.appendChild(modalEl);
+ }
+
+ const grid = document.getElementById('signAiPhotoPickerGrid');
+ if (grid) {
+ grid.innerHTML = '';
+ photos.forEach((photo, idx) => {
+ const col = document.createElement('div');
+ col.className = 'col-6 col-sm-4';
+
+ const card = document.createElement('div');
+ card.className = 'card h-100 border shadow-xs text-center p-2 position-relative';
+ card.style.cursor = 'pointer';
+ card.style.transition = 'transform 0.15s ease, border-color 0.15s ease';
+ card.onmouseover = () => { card.style.borderColor = '#0d6efd'; card.style.transform = 'scale(1.02)'; };
+ card.onmouseout = () => { card.style.borderColor = '#dee2e6'; card.style.transform = 'scale(1)'; };
+
+ const img = document.createElement('img');
+ img.src = URL.createObjectURL(photo);
+ img.className = 'rounded object-fit-cover w-100 mb-2';
+ img.style.height = '100px';
+
+ const title = document.createElement('div');
+ title.className = 'fw-bold small text-truncate';
+ title.textContent = `Photo ${idx + 1}`;
+
+ const size = document.createElement('small');
+ size.className = 'text-muted extra-small d-block';
+ size.textContent = (photo.size / 1024).toFixed(0) + ' Ko';
+
+ const btnSelect = document.createElement('button');
+ btnSelect.type = 'button';
+ btnSelect.className = 'btn btn-sm btn-primary w-100 mt-2 py-1';
+ btnSelect.innerHTML = 'Analyser';
+
+ card.appendChild(img);
+ card.appendChild(title);
+ card.appendChild(size);
+ card.appendChild(btnSelect);
+
+ card.addEventListener('click', function() {
+ const pickerInstance = bootstrap.Modal.getInstance(modalEl);
+ if (pickerInstance) pickerInstance.hide();
+ runSignAiDetection(photo);
+ });
+
+ col.appendChild(card);
+ grid.appendChild(col);
+ });
+ }
+
+ const pickerBtnNew = document.getElementById('btn_picker_take_new');
+ if (pickerBtnNew) {
+ pickerBtnNew.onclick = function() {
+ const pickerInstance = bootstrap.Modal.getInstance(modalEl);
+ if (pickerInstance) pickerInstance.hide();
+ aiFileInput.value = '';
+ aiFileInput.click();
+ };
+ }
+
+ const pickerModal = bootstrap.Modal.getOrCreateInstance(modalEl);
+ pickerModal.show();
+ }
+
+ if (btnAIDetect) {
+ btnAIDetect.addEventListener('click', function() {
+ const photos = getAvailablePhotos();
+ if (photos.length === 0) {
+ aiFileInput.value = '';
+ aiFileInput.click();
+ } else if (photos.length === 1) {
+ runSignAiDetection(photos[0]);
+ } else {
+ openPhotoPickerModal(photos);
+ }
+ });
+ }
+
+ if (btnPickExisting) {
+ btnPickExisting.addEventListener('click', function(e) {
+ e.preventDefault();
+ const photos = getAvailablePhotos();
+ if (photos.length === 0) {
+ aiFileInput.value = '';
+ aiFileInput.click();
+ } else {
+ openPhotoPickerModal(photos);
+ }
+ });
+ }
+
+ if (btnTakeNew) {
+ btnTakeNew.addEventListener('click', function(e) {
+ e.preventDefault();
+ aiFileInput.value = '';
+ aiFileInput.click();
+ });
+ }
+
+ if (aiFileInput) {
+ aiFileInput.addEventListener('change', function() {
+ if (!this.files || !this.files.length) return;
+ const file = this.files[0];
+ if (typeof window.addInspectionPhoto === 'function') {
+ window.addInspectionPhoto(file);
+ }
+ runSignAiDetection(file);
});
}
})();
diff --git a/loko/inspections/templates/inspections/quick_inspection_map.html b/loko/inspections/templates/inspections/quick_inspection_map.html
index ef1ce5e..fad06f3 100644
--- a/loko/inspections/templates/inspections/quick_inspection_map.html
+++ b/loko/inspections/templates/inspections/quick_inspection_map.html
@@ -469,6 +469,8 @@