Daitor
Documentation

Daitor SDK v4

Documentation technique complète pour intégrer le SDK Daitor dans vos applications.

1. Introduction

Le SDK Daitor v4 permet d'intégrer facilement trois fonctionnalités puissantes dans votre application :

🎯 Recommendations

Afficher des produits similaires basés sur un ID produit

📸 Snap & Recognize

Prendre une photo, détourer automatiquement et obtenir des recommandations visuelles

📊 Events

Tracker les clics utilisateurs pour améliorer les recommandations

2. Installation

Intégration directe

Ajoutez le script dans votre page HTML, avant la fermeture de </body> :

<script src="https://media.daitor.com/script.js?key=VOTRE_API_KEY"></script>

Intégration via Google Tag Manager

Étape 1 : Créer une balise HTML personnalisée

  1. Dans GTM, allez dans Tags → New
  2. Choisissez Custom HTML
  3. Collez le code suivant :
<script>
(function() {
    var script = document.createElement('script');
    script.src = 'https://media.daitor.com/script.js?key=VOTRE_API_KEY';
    script.onload = function() {
        window.daitor = new Daitor({
            name: 'VOTRE_CONFIG_NAME'
        });
        
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: 'daitor_sdk_ready'
        });
    };
    document.head.appendChild(script);
})();
</script>

Étape 2 : Configurer le déclencheur

  • Type : Page View - DOM Ready
  • Conditions : Toutes les pages où vous voulez le SDK (ou pages spécifiques)

Étape 3 : Utiliser le SDK dans d'autres balises GTM

Créez une nouvelle balise HTML déclenchée par l'événement daitor_sdk_ready :

<script>
(function() {
    if (!window.daitor) return;
    
    // Exemple : charger les recommandations pour un produit
    var productId = '{{DL - Product ID}}'; // Variable GTM
    
    if (productId) {
        window.daitor.getRecommendations([productId])
            .then(function(data) {
                // Envoyer les données au dataLayer
                window.dataLayer.push({
                    event: 'daitor_recommendations_loaded',
                    recommendations: data
                });
            });
    }
})();
</script>

3. Configuration

Initialisation du SDK

const daitor = new Daitor({
    name: 'votre_config_name',    // Requis : nom de la configuration
});

4. API Reference

🎯Recommendations

getRecommendations(ids)

Récupère des recommandations basées sur un ou plusieurs IDs produits.

const recommendations = await daitor.getRecommendations(['product-id-1', 'product-id-2']);

Paramètres :

  • ids (Array<string>) : Tableau d'IDs produits

Retour : Promise<Object>

{
    result: {
        points: [
            {
                id: "product-123",
                payload: {
                    title: "Nom du produit",
                    brand: "Marque",
                    image_link: "https://...",
                    amount: 99.99,
                    currency: "EUR",
                    link: "https://...",
                    // ... autres champs
                }
            },
            // ...
        ]
    }
}

getGroupedRecommendations(id, group_by)

Récupère des recommandations groupées par un attribut.

const grouped = await daitor.getGroupedRecommendations('product-id', 'brand');

Paramètres :

  • id (string) : ID du produit source
  • group_by (string) : Attribut de groupement (ex: brand, category)

📸Snap & Recognize

snapRecommend(imageFile, options)

Traitement complet : détourage IA + envoi API + recommandations visuelles.

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', async (e) => {
    const file = e.target.files[0];
    
    const { image, recommendations } = await daitor.snapRecommend(file, {
        onProgress: (percent, stage) => {
            console.log(`${stage}: ${percent}%`);
            // stage: 'loading_model' | 'processing' | 'sending' | 'done'
        }
    });
    
    // image = base64 PNG avec fond transparent
    // recommendations = produits similaires trouvés
});

Paramètres :

  • imageFile (File|Blob) : Fichier image
  • options.onProgress (Function) : Callback de progression (percent: number, stage: string) => void

Retour : Promise<Object>

{
    image: "data:image/png;base64,...",  // Image détourée
    recommendations: [...],               // Produits similaires
    raw: {...}                           // Réponse API brute
}

removeBackground(imageFile, options)

Supprime uniquement l'arrière-plan (sans appel API).

const processedImage = await daitor.removeBackground(file, {
    onProgress: (percent, stage) => {
        updateProgressBar(percent);
    }
});

// processedImage = "data:image/png;base64,..." (PNG transparent)

getImageRecommendations(base64Image)

Envoie une image (déjà traitée ou non) pour obtenir des recommandations.

const recommendations = await daitor.getImageRecommendations(base64Image);

preloadModel(onProgress)

Précharge le modèle IA pour accélérer le premier traitement.

// Précharger au chargement de la page
await daitor.preloadModel((percent) => {
    console.log(`Chargement du modèle: ${percent}%`);
});

detectBackend()

Détecte le backend GPU disponible.

const backend = await daitor.detectBackend();
// Retourne: 'webgpu' | 'webgl' | 'wasm'

📊Events

Tracking automatique des clics

Le SDK track automatiquement les clics sur les éléments avec les attributs data-daitor-id et data-daitor-config :

<div class="product-card" 
     data-daitor-id="product-123" 
     data-daitor-event="click" 
     data-daitor-config="all_config">
    <!-- contenu du produit -->
</div>

sendClickEvent(productId, configName)

Envoie manuellement un événement de clic.

await daitor.sendClickEvent('product-123', 'all_config');

5. Exemples complets

Exemple 1 : Page produit avec recommandations

<!DOCTYPE html>
<html>
<head>
    <title>Page Produit</title>
</head>
<body>
    <div id="recommendations"></div>

    <script src="https://media.daitor.com/script.js?key=VOTRE_API_KEY"></script>
    <script>
        const daitor = new Daitor({ name: 'all_config' });
        
        // Récupérer l'ID produit depuis l'URL
        const productId = new URLSearchParams(window.location.search).get('id') || 'default-id';
        
        // Charger les recommandations
        async function loadRecommendations() {
            try {
                const data = await daitor.getRecommendations([productId]);
                const products = data.result?.points || data.points || [];
                
                document.getElementById('recommendations').innerHTML = products
                    .map(p => `
                        <div class="product" data-daiter-id="${p.id}" data-daiter-config="all_config">
                            <img src="${p.payload.image_link}" alt="${p.payload.title}">
                            <h3>${p.payload.title}</h3>
                            <p>${p.payload.amount} ${p.payload.currency}</p>
                        </div>
                    `).join('');
            } catch (error) {
                console.error('Erreur:', error);
            }
        }
        
        loadRecommendations();
    </script>
</body>
</html>

Exemple 2 : Recherche visuelle (Snap & Recognize)

<!DOCTYPE html>
<html>
<head>
    <title>Recherche Visuelle</title>
    <style>
        .upload-zone { border: 2px dashed #ccc; padding: 40px; text-align: center; cursor: pointer; }
        .upload-zone.dragover { border-color: #007bff; background: #f0f7ff; }
        .progress { display: none; margin: 20px 0; }
        .progress.visible { display: block; }
        .progress-bar { height: 4px; background: #eee; border-radius: 2px; }
        .progress-fill { height: 100%; background: #007bff; width: 0%; transition: width 0.3s; }
    </style>
</head>
<body>
    <div class="upload-zone" id="uploadZone">
        📷 Cliquez ou glissez une image
        <input type="file" id="fileInput" accept="image/*" style="display:none">
    </div>
    
    <div class="progress" id="progress">
        <div class="progress-bar">
            <div class="progress-fill" id="progressFill"></div>
        </div>
        <p id="statusText">Chargement...</p>
    </div>
    
    <div id="result"></div>
    <div id="recommendations"></div>

    <script src="https://media.daitor.com/script.js?key=VOTRE_API_KEY"></script>
    <script>
        const daitor = new Daitor({ name: 'all_config' });
        
        const uploadZone = document.getElementById('uploadZone');
        const fileInput = document.getElementById('fileInput');
        const progress = document.getElementById('progress');
        const progressFill = document.getElementById('progressFill');
        const statusText = document.getElementById('statusText');
        
        // Drag & Drop
        uploadZone.addEventListener('click', () => fileInput.click());
        uploadZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadZone.classList.add('dragover');
        });
        uploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('dragover'));
        uploadZone.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadZone.classList.remove('dragover');
            processFile(e.dataTransfer.files[0]);
        });
        fileInput.addEventListener('change', (e) => processFile(e.target.files[0]));
        
        async function processFile(file) {
            if (!file) return;
            
            progress.classList.add('visible');
            
            try {
                const { image, recommendations } = await daitor.snapRecommend(file, {
                    onProgress: (percent, stage) => {
                        progressFill.style.width = percent + '%';
                        statusText.textContent = {
                            loading_model: 'Chargement du modèle IA...',
                            processing: 'Détourage en cours...',
                            sending: 'Recherche de produits...',
                            done: 'Terminé !'
                        }[stage];
                    }
                });
                
                // Afficher l'image détourée
                document.getElementById('result').innerHTML = `<img src="${image}" style="max-width:300px">`;
                
                // Afficher les recommandations
                const products = recommendations.result?.points || recommendations.points || recommendations || [];
                document.getElementById('recommendations').innerHTML = products
                    .map(p => {
                        const d = p.payload || p;
                        return `
                            <div class="product">
                                <img src="${d.image_link}" style="width:100px">
                                <p>${d.title}</p>
                            </div>
                        `;
                    }).join('');
                    
            } catch (error) {
                statusText.textContent = 'Erreur: ' + error.message;
            }
        }
    </script>
</body>
</html>

Exemple 3 : Intégration GTM complète

Tag 1 : Chargement du SDK

Déclencheur : DOM Ready

<script>
(function() {
    var script = document.createElement('script');
    script.src = 'https://media.daitor.com/script.js?key=VOTRE_API_KEY';
    script.onload = function() {
        window.daitor = new Daitor({ name: 'all_config' });
        window.dataLayer.push({ event: 'daitor_sdk_ready' });
    };
    document.head.appendChild(script);
})();
</script>

Tag 2 : Chargement des recommandations

Déclencheur : daitor_sdk_ready + page produit

<script>
(function() {
    var productId = {{DL - Product ID}}; // Variable DataLayer
    if (!productId || !window.daitor) return;
    
    window.daitor.getRecommendations([productId])
        .then(function(data) {
            var products = data.result ? data.result.points : (data.points || []);
            
            // Injecter les recommandations dans la page
            var container = document.getElementById('daitor-recommendations');
            if (container && products.length) {
                container.innerHTML = products.map(function(p) {
                    return '<div class="reco-item" data-daiter-id="' + p.id + '" data-daiter-config="all_config">' +
                        '<img src="' + p.payload.image_link + '">' +
                        '<p>' + p.payload.title + '</p>' +
                        '</div>';
                }).join('');
            }
            
            // Envoyer un événement au dataLayer
            window.dataLayer.push({
                event: 'daitor_recommendations_displayed',
                daitor_recommendation_count: products.length
            });
        });
})();
</script>

Variable GTM : DL - Product ID

  • Type : Data Layer Variable
  • Nom de la variable : productId

6. Troubleshooting

❌ Le SDK ne se charge pas

  1. Vérifiez que l'API key est correcte
  2. Vérifiez la console pour les erreurs CORS
  3. Assurez-vous que le script est chargé après le DOM

⚠️ Les recommandations sont vides

  1. Vérifiez que l'ID produit existe dans votre catalogue
  2. Vérifiez le nom de configuration (name)
  3. Consultez la réponse API dans la console Network

🐌 Le détourage est lent

  1. Le premier appel télécharge le modèle IA (~40 Mo, mis en cache ensuite)
  2. Utilisez preloadModel() pour précharger au chargement de la page
  3. Sur Safari/iOS, le mode WASM est utilisé (plus lent que WebGPU)

🚫 Erreur "Missing required parameters"

Assurez-vous de fournir :

  • name dans la configuration
  • apiKey dans la configuration OU dans l'URL du script (?key=XXX)

💬 Support

Pour toute question technique, contactez-nous :

support@daitor.com
Ellipse