Aperçu de l'image avant envoi + catégorisation IA préalable

Close #41 #46

Author: AnaelMobilia

changelog.php

@@ -44,14 +44,30 @@
             </div>
         </div>
     </div>
+    <div class="card">
+        <div class="card-header">
+            <a data-bs-toggle="collapse" href="#v27">
+                v2.7 - Septembre 2025
+                &nbsp;<span class="bi-caret-down-fill"></span>
+            </a>
+        </div>
+        <div id="v27" class="card-collapse">
+            <div class="card-body">
+                <ul>
+                    <li>Ajout d'un aperçu de l'image avant l'envoi.</li>
+                    <li>Validation IA du contenu de l'image avant l'envoi.</li>
+                </ul>
+            </div>
+        </div>
+    </div>
     <div class="card">
         <div class="card-header">
             <a data-bs-toggle="collapse" href="#v26">
                 v2.6 - Février 2025
                 &nbsp;<span class="bi-caret-down-fill"></span>
             </a>
         </div>
-        <div id="v26" class="card-collapse">
+        <div id="v26" class="card-collapse collapse">
             <div class="card-body">
                 <ul>
                     <li>Compatibilité PHP 8.3 et 8.4.</li>

index.php

@@ -94,6 +94,7 @@
                         <a href="cgu.php">Conditions Générales d'Utilisation</a> du service.
                     </div>
                 </div>
+                <img src="#" id="preview" alt="preview" style="display: none; max-width: 200px; max-height: 200px;" />
                 <h3>Options</h3>
                 <span class="help-block"><em>Le ratio de l'image sera conservé.</em></span>
                 <div class="mb-3">
@@ -133,8 +134,71 @@
                         </select>
                     </div>
                 </div>
-                <button class="btn btn-success" name="Submit" type="submit" <?= ($uploadDisabled ? 'disabled="disabled"' : '') ?>><span class="bi-cloud-arrow-up-fill"></span>&nbsp;Envoyer</button>
+                <button class="btn btn-success" name="Submit" id="submit" type="submit" <?= ($uploadDisabled ? 'disabled="disabled"' : '') ?>><span class="bi-cloud-arrow-up-fill"></span>&nbsp;Envoyer</button>
             </form>
         </div>
     </div>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js" defer></script>
+    <script type="text/javascript">
+        // More API functions here:
+        // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
+        let model, maxPredictions;
+        const categorieMap = new Map([
+            <?php foreach (_ABUSE_TYPES_ as $type => $tabInfos): ?>
+            ['<?= $type ?>', <?= $tabInfos['limite'] ?>],
+            <?php endforeach; ?>
+        ]);
+
+        async function init() {
+            // Activer l'exécution GPU avec TensorFlow.js
+            await tf.setBackend('webgl');
+            // load the model and metadata
+            // Note: the pose library adds "tmImage" object to your window (window.tmImage)
+            model = await tmImage.load('<?= _URL_HTTPS_ ?>ia_model/model.json', '<?= _URL_HTTPS_ ?>ia_model/metadata.json');
+            maxPredictions = model.getTotalClasses();
+
+            // Génération d'une "miniature" d'aperçu lors de la sélection d'une image
+            const preview = document.getElementById('preview');
+            document.getElementById('fichier').addEventListener('change', function () {
+                // Réactiver le bouton d'envoi
+                document.getElementById('submit').disabled = false;
+
+                const file = this.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = function (event) {
+                        preview.src = event.target.result;
+                        preview.style.display = 'block';
+                    }
+                    reader.readAsDataURL(file);
+                    // Prédiction type d'image
+                    predictImage(preview);
+                }
+            });
+        }
+
+        /**
+         * Prédire les catégories d'images
+         * @param img contenu à analyser
+         * @returns {Promise<void>}
+         */
+        async function predictImage(img) {
+            // Lancer la prédiction sur l'image
+            const prediction = await model.predict(img);
+            // Trouver la classe avec la plus grande probabilité
+            const bestPrediction = prediction.reduce((max, p) => (p.probability > max.probability ? p : max), prediction[0]);
+            // Cette image atteint-elle la limite pour sa catégorie la plus probable ?
+            if (
+                categorieMap.has(bestPrediction.className)
+                && (bestPrediction.probability * 100) >= categorieMap.get(bestPrediction.className)
+            ) {
+                // Désactiver l'envoi de l'image
+                document.getElementById('submit').disabled = true;
+                alert(`L'image selectionnée n'est pas conforme aux CGU de la plateforme. Elle contrevient à la règle ${bestPrediction.className} (taux de précision : ${Math.round(bestPrediction.probability * 100)}%)`)
+            }
+        }
+
+        window.onload = init;
+    </script>
     <?php require _TPL_BOTTOM_; ?>

template/templateV2Bottom.php

@@ -27,7 +27,7 @@
             <span class="text-muted">
                 <?= _SITE_NAME_ ?>
                 -
-                <a href="<?= _URL_HTTPS_ ?>changelog.php">v2.6 (2025) <span class="bi-award"></span></a>
+                <a href="<?= _URL_HTTPS_ ?>changelog.php">v2.7 (2025) <span class="bi-award"></span></a>
                 -
                 <a href="<?= _URL_HTTPS_ ?>stats.php">Statistiques <span class="bi-graph-up"></span></a>
                 -