Obtenir les images de détection

Le modèle VideoAgentTrek-ScreenFilter génère des images de sortie mettant en évidence des objets tels que des écrans, téléviseurs et moniteurs. Il est possible d'obtenir ces images de plusieurs manières.

Utilisation de l'interface web

1. Accédez à votre instance de l'application (souvent à l'adresse https://votre-adresse:7860).
2. Dans l'onglet de détection d'image, chargez le fichier source.
3. Configurez les paramètres, par exemple :
   • conf (seuil de confiance) : 0.25
   • iou (seuil d'Intersection sur l'Union) : 0.45
4. Lancez la détection. Une fois terminée, enregistrez l'image de résultat via un clic droit.

Appel via l'API REST

Pour une intégration automatisée, utilisez l'API. L'exemple suivant en Python appelle le point de terminaison de détection et récupère le résultat, soit directement en Base64, soit sous forme d'URL à convertir.

import requests
import base64

# Configuration de l'appel API
url_detection = "http://localhost:7860/api/detect"
parametres = {'conf': 0.25, 'iou': 0.45}

# Chargement du fichier à analyser
with open('image_source.jpg', 'rb') as fichier_image:
    fichiers = {'image': fichier_image}
    reponse = requests.post(url_detection, files=fichiers, data=parametres)

# Traitement de la réponse
if reponse.status_code == 200:
    donnees = reponse.json()
    
    if 'image_base64' in donnees:
        # Le serveur renvoie directement l'encodage Base64
        encodage_base64 = donnees['image_base64']
        print("Encodage Base64 reçu directement.")
    elif 'image_url' in donnees:
        # Le serveur renvoie une URL à télécharger puis convertir
        reponse_image = requests.get(donnees['image_url'])
        encodage_base64 = base64.b64encode(reponse_image.content).decode('utf-8')
        print("Image téléchargée et convertie en Base64.")
else:
    print(f"Échec de la requête avec le statut : {reponse.status_code}")

Conversion de l'image en Base64

Une fois l'image de détection obtenue, elle peut être convertie en Base64. Voici plusieurs approches.

Méthode Python complète

Cette fonction lit un fichier image et retourne son contenu sous forme de chaîne Base64, ainsi que l'URL data complète prête pour l'intégration HTML.

import base64
import mimetypes
from pathlib import Path

def convertir_image_vers_base64(chemin_image: str) -> dict | None:
    """
    Convertit un fichier image en encodage Base64.
    
    Args:
        chemin_image: Chemin vers le fichier image.
        
    Returns:
        Un dictionnaire contenant la chaîne Base64, l'URL data et les métadonnées.
    """
    chemin = Path(chemin_image)
    if not chemin.exists():
        print(f"Erreur : le fichier '{chemin_image}' est introuvable.")
        return None
    
    try:
        # Lecture du contenu binaire
        with open(chemin, "rb") as f:
            donnees_binaires = f.read()
        
        # Encodage Base64
        chaine_base64 = base64.b64encode(donnees_binaires).decode('ascii')
        
        # Déduction du type MIME
        type_mime = mimetypes.guess_type(chemin_image)[0]
        if not type_mime:
            type_mime = 'image/jpeg'  # Type par défaut
        
        # Construction de l'URL data pour le HTML
        url_data = f"data:{type_mime};base64,{chaine_base64}"
        
        return {
            "base64": chaine_base64,
            "url_data": url_data,
            "type_mime": type_mime,
            "taille_fichier": len(donnees_binaires),
            "taille_base64": len(chaine_base64)
        }
    except Exception as e:
        print(f"Erreur lors de la conversion : {e}")
        return None

# Exemple d'utilisation
resultat = convertir_image_vers_base64("resultat_detection.png")
if resultat:
    print(f"Type détecté : {resultat['type_mime']}")
    print(f"Taille originale : {resultat['taille_fichier']} octets")
    print(f"Taille Base64 : {resultat['taille_base64']} caractères")
    print(f"Aperçu (100 premiers car.) : {resultat['base64'][:100]}...")

Conversion côté client avec JavaScript

Pour une conversion en temps réel dans le navigateur, sans envoi au serveur, cette page HTML permet à un utilisateur de sélectionner un fichier et de voir son encodage Base64.

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Convertisseur Image vers Base64</title>
</head>
<body>
    <h1>Outil de conversion local</h1>
    <input type="file" id="selecteurFichier" accept="image/*">
    <div id="zoneResultat" style="display: none; margin-top: 20px;">
        <h2>Prévisualisation</h2>
        <img id="apercuImage" style="max-width: 400px; border: 1px solid #ccc;" alt="Aperçu">
        
        <h2>Encodage Base64</h2>
        <textarea id="sortieBase64" rows="10" cols="80" readonly></textarea>
        <br><br>
        <button id="boutonCopier">Copier dans le presse-papiers</button>
        <span id="confirmationCopie"></span>
    </div>
    
    <script>
        document.getElementById('selecteurFichier').addEventListener('change', function(evenement) {
            const fichier = evenement.target.files[0];
            if (!fichier || !fichier.type.match('image.*')) {
                alert('Veuillez sélectionner une image valide.');
                return;
            }
            
            const lecteur = new FileReader();
            
            lecteur.onload = function(evenementLecture) {
                const resultatDataUrl = evenementLecture.target.result;
                
                // Afficher l'aperçu
                document.getElementById('apercuImage').src = resultatDataUrl;
                document.getElementById('zoneResultat').style.display = 'block';
                
                // Extraire et afficher la partie Base64
                const parties = resultatDataUrl.split(',');
                if (parties.length === 2) {
                    document.getElementById('sortieBase64').value = parties[1];
                }
                
                // Stocker l'URL data complète pour la copie
                window.urlDataComplete = resultatDataUrl;
            };
            
            lecteur.readAsDataURL(fichier);
        });
        
        document.getElementById('boutonCopier').addEventListener('click', function() {
            const textarea = document.getElementById('sortieBase64');
            textarea.select();
            document.execCommand('copy');
            
            const message = document.getElementById('confirmationCopie');
            message.textContent = 'Copié !';
            message.style.color = 'green';
            setTimeout(() => message.textContent = '', 2000);
        });
    </script>
</body>
</html>

Intégration dans une page HTML

L'image encodée en Base64 s'insère directement dans la balise <img> via une URL de type data:.

Syntaxe de base

L'attribut src de l'image suit ce schéma : data:[<MIME-type>][;base64],<données>. Pour une image JPEG, cela donne :

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..." alt="Texte alternatif">

Exemple de page de résultat complète

Le code suivant crée une page HTML structurée qui présente l'image de détection et les métadonnées associées. L'image est intégrée directement dans le code source.

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Rapport de détection - VideoAgentTrek-ScreenFilter</title>
    <style>
        body { font-family: 'Segoe UI', sans-serif; line-height: 1.5; color: #2d3436; margin: 0; padding: 20px; background-color: #f5f6fa; }
        .conteneur { max-width: 900px; margin: 0 auto; background: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 30px; }
        h1 { color: #0984e3; border-bottom: 2px solid #0984e3; padding-bottom: 10px; }
        .section { margin-bottom: 30px; }
        .image-detection { width: 100%; border: 2px solid #dfe6e9; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        .tableau-info { width: 100%; border-collapse: collapse; margin-top: 15px; }
        .tableau-info th, .tableau-info td { text-align: left; padding: 12px; border-bottom: 1px solid #eee; }
        .tableau-info th { background-color: #f8f9fa; font-weight: 600; color: #636e72; }
        .badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 0.85em; font-weight: bold; }
        .badge-succes { background-color: #00b894; color: white; }
        .pied-page { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; color: #636e72; font-size: 0.9em; }
    </style>
</head>
<body>
    <div class="conteneur">
        <h1>Résultat de la détection d'écran</h1>
        
        <div class="section">
            <h2>Image analysée</h2>
            <!-- L'IMAGE BASE64 EST ICI -->
            <img class="image-detection" 
                 src="data:image/jpeg;base64,VOTRE_CHAINE_BASE64_ICI" 
                 alt="Détection d'objets sur écran par VideoAgentTrek-ScreenFilter">
        </div>
        
        <div class="section">
            <h2>Informations sur l'analyse</h2>
            <table class="tableau-info">
                <tr>
                    <th>Propriété</th>
                    <th>Valeur</th>
                </tr>
                <tr>
                    <td>Modèle utilisé</td>
                    <td>VideoAgentTrek-ScreenFilter</td>
                </tr>
                <tr>
                    <td>Seuil de confiance</td>
                    <td>0.25</td>
                </tr>
                <tr>
                    <td>Seuil IoU</td>
                    <td>0.45</td>
                </tr>
                <tr>
                    <td>Nombre d'objets détectés</td>
                    <td><span class="badge badge-succes">3</span></td>
                </tr>
            </table>
        </div>
        
        <div class="section">
            <h2>Objets identifiés</h2>
            <table class="tableau-info">
                <tr>
                    <th>#</th>
                    <th>Classe</th>
                    <th>Confiance</th>
                    <th>Coordonnées (x1, y1, x2, y2)</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>TV</td>
                    <td>0.92</td>
                    <td>[120, 45, 580, 420]</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Monitor</td>
                    <td>0.87</td>
                    <td>[600, 50, 1050, 400]</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Screen</td>
                    <td>0.78</td>
                    <td>[100, 500, 450, 700]</td>
                </tr>
            </table>
        </div>
        
        <div class="pied-page">
            Rapport généré automatiquement &bull; <span id="dateGeneration"></span>
        </div>
    </div>
    
    <script>
        // Injection automatique de la date
        document.getElementById('dateGeneration').textContent = new Date().toLocaleString('fr-FR');
    </script>
</body>
</html>

Génération dynamique de rapports HTML

Pour automatiser la création de rapports, un script peut fusionner l'image encodée en Base64 et les données JSON de détection pour produire un fichier HTML autonome.

import json
import base64
from datetime import datetime
from pathlib import Path

def generer_rapport_html(fichier_image: str, fichier_json: str, fichier_sortie: str = "rapport.html"):
    """
    Génère un rapport HTML complet contenant l'image de détection et ses métadonnées.
    
    Args:
        fichier_image: Chemin vers l'image de résultat.
        fichier_json: Chemin vers le fichier JSON des résultats de détection.
        fichier_sortie: Nom du fichier HTML à générer.
    """
    
    # 1. Chargement et encodage de l'image
    chemin_image = Path(fichier_image)
    with open(chemin_image, "rb") as f:
        donnees_image = f.read()
    
    chaine_base64 = base64.b64encode(donnees_image).decode('ascii')
    extension = chemin_image.suffix.lower()
    type_mime = "image/jpeg" if extension in ['.jpg', '.jpeg'] else "image/png"
    
    # 2. Chargement des données de détection
    with open(fichier_json, 'r', encoding='utf-8') as f:
        donnees_detection = json.load(f)
    
    # 3. Construction des lignes du tableau des détections
    lignes_tableau = ""
    for idx, objet in enumerate(donnees_detection.get('boxes', [])[:10], 1):
        coordonnees = ", ".join(map(str, objet.get('xyxy', ['N/A']*4)))
        lignes_tableau += f"""
            <tr>
                <td>{idx}</td>
                <td>{objet.get('class_name', 'Inconnu')}</td>
                <td>{objet.get('confidence', 0):.2f}</td>
                <td>[{coordonnees}]</td>
            </tr>"""
    
    # 4. Compilation du template HTML
    html_complet = f"""



    <meta charset="UTF-8"></meta>
    <title>Rapport de détection - {datetime.now().strftime('%Y-%m-%d')}</title>
    <style>
        body {{ font-family: Arial, sans-serif; margin: 40px; background-color: #fafafa; }}
        .carte {{ background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 25px; margin-bottom: 25px; }}
        h1 {{ color: #2c3e50; }}
        h2 {{ color: #3498db; margin-top: 0; }}
        img {{ max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px; }}
        table {{ width: 100%; border-collapse: collapse; }}
        th, td {{ padding: 10px; text-align: left; border-bottom: 1px solid #eee; }}
        th {{ background-color: #f2f2f2; }}
        .entete {{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }}
        .badge-compteur {{ background: #27ae60; color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold; }}
    </style>


    <div class="carte">
        <div class="entete">
            <h1>Analyse de contenu d'écran</h1>
            <span class="badge-compteur">{donnees_detection.get('count', 0)} objets</span>
        </div>
        <p><strong>Date :</strong> {datetime.now().strftime('%d/%m/%Y à %H:%M')}</p>
        
        <h2>Image de détection</h2>
        <img alt="Résultat de la détection" src="data:{type_mime};base64,{chaine_base64}"></img>
    </div>
    
    <div class="carte">
        <h2>Détail des objets détectés</h2>
        <table>
            <thead>
                <tr>
                    <th>N°</th>
                    <th>Classe</th>
                    <th>Confiance</th>
                    <th>Position (x1, y1, x2, y2)</th>
                </tr>
            </thead>
            <tbody>
                {lignes_tableau if lignes_tableau else '<tr><td colspan="4">Aucun objet détecté.</td></tr>'}
            </tbody>
        </table>
    </div>
    
    <div class="carte">
        <h2>Paramètres de l'analyse</h2>
        <p><strong>Modèle :</strong> VideoAgentTrek-ScreenFilter</p>
        <p><strong>Seuil de confiance :</strong> 0.25</p>
        <p><strong>Seuil IoU :</strong> 0.45</p>
    </div>

"""
    
    # 5. Écriture du fichier de sortie
    with open(fichier_sortie, 'w', encoding='utf-8') as f:
        f.write(html_complet)
    
    print(f"Le rapport a été généré avec succès : {fichier_sortie}")

# Point d'entrée du script
if __name__ == "__main__":
    # Vérifier l'existence des fichiers sources
    image_src = "resultat_detection.jpg"
    json_src = "resultat_detection.json"
    
    if Path(image_src).exists() and Path(json_src).exists():
        generer_rapport_html(image_src, json_src)
    else:
        print("Les fichiers sources sont introuvables.")
        print(f"  - {image_src}")
        print(f"  - {json_src}")
        print("Exécutez d'abord une détection avec VideoAgentTrek-ScreenFilter.")

Considérations pratiques

L'necodage Base64 est utile dans certains contextes mais présente des limites. Il convient de l'utiliser à bon escient.

• Taille de l'image : L'encodage augmente la taille d'environ 33%. Il est recommandé pour les petites images (icônes, logos, vignettes). Pour de grandes images, une URL classique est plus efficace pour la mise en cache et les performances.
• Nombre de requêtes HTTP : Intégrer l'image en Base64 évite une requête HTTP supplémentaire, ce qui peut améliorer le temps de chargement initial pour un petit nombre de ressources.
• Scénarios d'utilisation :
  • Corps de courriels HTML devant afficher des images sans hébergement séparé.
  • Rapports PDF ou HTML générés dynamiquement devant être autonomes.
  • Applications monopage (SPA) avec un petit nombre d'assets statiques.
• Sécurité : L'encodage Base64 n'est pas une méthode de chiffrement. Les données sont lisibles par quiconque consulte le code source. Ne pas l'utiliser pour transmettre des informations sensibles.