🎯 Multi-Component Digital Marketing & Behavior Analysis System

Système complet d'analyse comportementale et de prédiction de conversion combinant:

Modèle d'ensemble ML (LR, RF, XGBoost, LSTM)
Recherche vectorielle avec Qdrant
Suivi comportemental en temps réel (souris, scroll, clics)
Marketplace e-commerce avec heatmap analytics

📦 Composants du Projet

1️⃣ Modèle d'Ensemble de Prédiction (Root)

Entraînement de modèles ML
API FastAPI pour prédictions en temps réel
Fichiers: final.ipynb, app.py, test.py, ensemble_model.py

2️⃣ Recherche Vectorielle Qdrant (Root)

Recherche de campagnes similaires
Indexation avec embeddings
Fichiers: qdrant_indexer.py, embeddings.py, retrieval_test.py, train_pipeline.py

3️⃣ Suivi Comportemental Frontend (Desktop/404_not_found/)

Tracking de souris en temps réel
Score comportemental
Fichiers: backend/main.py, frontend/behavior-tracker.js

4️⃣ Marketplace Hub avec Heatmap (marketplace-hub/)

Application e-commerce React/TypeScript
Mouse tracking & heatmap visualization
Rapports UX automatisés en PDF
Fichiers: src/, heatmap-api.mjs, heatmap_plot.py

🚀 GUIDE D'INSTALLATION ET D'EXÉCUTION

ÉTAPE 1: Installation des Dépendances

Windows (PowerShell)

# Créer un environnement virtuel
python -m venv venv
.\venv\Scripts\Activate.ps1

# Installer les packages
pip install -r requirement.txt

macOS/Linux

# Créer un environnement virtuel
python3 -m venv venv
source venv/bin/activate

# Installer les packages
pip install -r requirement.txt

🎯 PARTIE 1: MODÈLE D'ENSEMBLE (Prédiction de Conversion)

Étape 1.1: Entraîner les Modèles

Option A: Via Jupyter Notebook (Recommandé)

jupyter notebook final.ipynb

Puis exécutez toutes les cellules (Cell → Run All)

Option B: Via Script Python

python train_pipeline.py

✅ Résultat attendu: Fichiers .pkl générés (modèles et preprocessors)

Étape 1.2: Démarrer le Serveur API

uvicorn app:app --reload

🌐 Serveur accessible à: http://127.0.0.1:8000

Étape 1.3: Tester les Prédictions

python test.py

Test manuel avec curl:

curl -X POST "http://127.0.0.1:8000/predict" ^
  -H "Content-Type: application/json" ^
  -d "{\"age\": 25, \"click_count\": 10, \"last_time_spent\": 120, \"gender\": \"Male\", \"ad_source\": \"Facebook\", \"category_interest\": \"Tech\", \"previous_purchase_category\": \"Books\", \"visitor_type\": \"New\"}"

Réponse attendue:

{
  "prediction": 1,
  "probability": 0.75
}

🔍 PARTIE 2: RECHERCHE VECTORIELLE (Qdrant)

Étape 2.1: Démarrer Qdrant (Docker)

docker run -p 6333:6333 qdrant/qdrant

Étape 2.2: Nettoyer les Données (si nécessaire)

python clean_campaign_data.py

Étape 2.3: Créer les Embeddings et Indexer

python train_pipeline.py

✅ Résultat: Base vectorielle créée dans Qdrant + embeddings.npy

Étape 2.4: Tester la Recherche

python retrieval_test.py

🎯 Fonction: Trouve des campagnes similaires qui ont converti

🖱️ PARTIE 3: SUIVI COMPORTEMENTAL

Étape 3.1: Démarrer le Backend

cd Desktop/404_not_found/backend
python main.py

🌐 API disponible à: http://localhost:8000

Étape 3.2: Ouvrir le Frontend

cd ../frontend
# Ouvrir index.html dans un navigateur
start index.html  # Windows
open index.html   # macOS
xdg-open index.html  # Linux

Étape 3.3: Voir les Scores Comportementaux

cd ../backend
python view_scores.py

Étape 3.4: Tester l'Endpoint

python test_endpoint.py

🛒 PARTIE 4: MARKETPLACE HUB (E-commerce + Heatmap)

Application marketplace complète avec tracking mouse et génération de heatmaps.

Étape 4.1: Installation

# 1. Naviguer vers le dossier marketplace
cd marketplace-hub

# 2. Installer les dépendances Node
npm install

# 3. Installer les dépendances Python (pour heatmap/analytics)
pip install matplotlib pillow

# 4. Démarrer le serveur de développement
npm run dev

🌐 Marketplace disponible à: http://localhost:5173

Étape 4.2: Activer le Heatmap Tracking (Optionnel)

# Terminal 1: Démarrer le serveur API heatmap
node heatmap-api.mjs

# Terminal 2: Le tracking est maintenant actif!
# Utilisez l'application normalement
# Les données sont sauvegardées dans heatmap-data.json toutes les 5 secondes

# Générer les visualisations à tout moment
python heatmap_plot.py --api

# Créer des rapports d'analyse UX
python generate_ux_report_local.py --json heatmap-data.json --image heatmap.png --output UX_REPORT.pdf

Scripts Disponibles (Marketplace)

Commande	Description
`npm run dev`	Serveur de développement Vite (port 5173)
`npm run build`	Build pour production
`npm run preview`	Preview du build production
`npm run lint`	Exécuter ESLint
`npm run test`	Exécuter les tests Vitest
`node heatmap-api.mjs`	Serveur API tracking (port 3001)
`python heatmap_plot.py --api`	Générer heatmap depuis l'API

📊 DASHBOARD (Optionnel)

Visualisation interactive des métriques:

streamlit run dashboard.py

🌐 Dashboard disponible à: http://localhost:8501

📁 STRUCTURE DES FICHIERS

Root (Modèle d'Ensemble + Qdrant)

Fichier	Description
`final.ipynb`	[PARTIE 1] Entraînement des modèles ML
`app.py`	[PARTIE 1] Serveur FastAPI pour prédictions
`test.py`	[PARTIE 1] Tests API de prédiction
`ensemble_model.py`	[PARTIE 1] Classe d'ensemble
`train_pipeline.py`	[PARTIE 2] Pipeline d'entraînement Qdrant
`qdrant_indexer.py`	[PARTIE 2] Indexation vectorielle
`embeddings.py`	[PARTIE 2] Génération d'embeddings
`retrieval_test.py`	[PARTIE 2] Tests de recherche
`config.py`	Configuration globale
`dashboard.py`	Dashboard Streamlit
`dataset.csv`	Données d'entraînement

Desktop/404_not_found/backend/ (Suivi Comportemental)

Fichier	Description
`main.py`	[PARTIE 3] Serveur FastAPI comportemental
`behavior_scoring.py`	[PARTIE 3] Calcul du score
`feature_engineering.py`	[PARTIE 3] Extraction de features
`sequence_model.py`	[PARTIE 3] Modèle séquentiel
`view_scores.py`	[PARTIE 3] Affichage des scores
`test_endpoint.py`	[PARTIE 3] Tests API

Desktop/404_not_found/frontend/ (Interface)

Fichier	Description
`index.html`	[PARTIE 3] Page de démonstration
`behavior-tracker.js`	[PARTIE 3] Tracking JavaScript

marketplace-hub/ (E-commerce + Analytics)

marketplace-hub/
├── src/
│   ├── components/        # Composants React
│   │   ├── home/         # Sections homepage
│   │   ├── layout/       # Layout (Header, Footer)
│   │   ├── products/     # Affichage produits
│   │   └── ui/           # Composants shadcn-ui
│   ├── context/          # React Context (Auth, Cart)
│   ├── data/             # Données produits
│   ├── hooks/            # Custom React hooks
│   ├── pages/            # Composants de page
│   │   └── admin/        # Pages admin dashboard
│   └── lib/              # Fonctions utilitaires
├── public/
│   └── tracking.js       # Script mouse tracking (auto-load)
├── heatmap-api.mjs       # API Express pour données tracking
├── heatmap_plot.py       # Générateur de visualisation heatmap
├── generate_ux_report_local.py  # Générateur de rapport UX local
├── heatmap-data.json     # Stockage des données tracking
└── README.md             # Documentation marketplace

🎯 WORKFLOWS RECOMMANDÉS

Workflow 1: Demo Complète

Entraîner les modèles: jupyter notebook final.ipynb
Lancer l'API prédiction: uvicorn app:app --reload
Tester: python test.py
Dashboard: streamlit run dashboard.py

Workflow 2: Recherche de Campagnes Similaires

Démarrer Qdrant: docker run -p 6333:6333 qdrant/qdrant
Indexer: python train_pipeline.py
Rechercher: python retrieval_test.py

Workflow 3: Suivi Comportemental

Backend: cd Desktop/404_not_found/backend && python main.py
Frontend: Ouvrir Desktop/404_not_found/frontend/index.html
Visualiser: python view_scores.py

Workflow 4: Marketplace avec Analytics

Installation: cd marketplace-hub && npm install
Démarrer l'app: npm run dev
Activer tracking: node heatmap-api.mjs (autre terminal)
Utiliser l'app: Naviguer sur http://localhost:5173
Générer heatmap: python heatmap_plot.py --api
Rapport UX: python generate_ux_report_local.py --json heatmap-data.json --image heatmap.png --output UX_REPORT.pdf
Effacer données: window.clearAll() dans la console navigateur

🔧 DÉPANNAGE

Erreur: Module non trouvé

pip install --upgrade -r requirement.txt

Erreur: Port déjà utilisé

# Pour l'API principale
uvicorn app:app --reload --port 8001

# Pour le backend comportemental
python main.py  # Modifier le port dans main.py si nécessaire

Erreur: Qdrant non accessible

# Vérifier que Docker est démarré
docker ps

# Redémarrer Qdrant
docker run -p 6333:6333 qdrant/qdrant

Fichiers .pkl manquants

# Ré-entraîner les modèles
jupyter notebook final.ipynb
# Puis Run All Cells

Marketplace: Tracking ne fonctionne pas

# 1. Vérifier que tracking.js est chargé (DevTools → Network)
# 2. Vérifier que l'API tourne: node heatmap-api.mjs
# 3. Vérifier la console navigateur pour les erreurs
# 4. Confirmer l'URL API dans tracking.js

Marketplace: Génération heatmap échoue

# Vérifier que le fichier de données existe
python -c "import json; print(len(json.load(open('heatmap-data.json'))))"

# Vérifier matplotlib installé
pip install matplotlib

Marketplace: Rapport PDF échoue

# Installer les dépendances manquantes
pip install pillow

# Vérifier que heatmap.png existe
ls heatmap.png  # ou dir heatmap.png sur Windows

Marketplace: Conflits de ports

# Changer le port Vite (vite.config.ts)
server: { port: 5174 }

# Changer le port API (heatmap-api.mjs)
const PORT = 3002;

📈 RÉSULTATS ATTENDUS

Partie 1: Modèle d'Ensemble

Accuracy: ~85-90%
ROC-AUC: ~0.88-0.92
Output: Probabilité de conversion (0.0 - 1.0)

Partie 2: Recherche Qdrant

Similarité: >99% pour campagnes proches
Filtrage: Seulement campagnes converties
Top-K: 5-10 campagnes similaires

Partie 3: Score Comportemental

Score: 0.0 (faible intent) à 1.0 (fort intent)
Temps réel: Latence < 100ms
Features: Vitesse souris, scroll, hovers CTA

Partie 4: Marketplace Analytics

Mouse Tracking: Position pixel-perfect avec timestamp
Heatmaps: Haute résolution (150 DPI), couleurs bleu → rouge
Rapports UX: Analyse statistique, recommandations, PDF
Stockage: Append-only, sync automatique localStorage + API

🛠️ TECHNOLOGIES UTILISÉES

Backend & ML

ML: scikit-learn, XGBoost, TensorFlow
API: FastAPI, Uvicorn, Express.js
Vectorielle: Qdrant, sentence-transformers
Viz: Streamlit, Plotly, Matplotlib, Seaborn

Frontend

React 18 - UI library
TypeScript - Type-safe JavaScript
Vite - Build tool & dev server rapide
React Router - Routing client-side
shadcn-ui - Component library
Tailwind CSS - Utility-first CSS
Lucide Icons - Icon library
JavaScript (Vanilla) - Tracking comportemental

Analytics & Visualisation

Python 3 - Data processing
matplotlib - Heatmap visualization
Pillow (PIL) - Génération PDF

📚 DOCUMENTATION SUPPLÉMENTAIRE

Consultez les guides dans Desktop/404_not_found/:

QUICK_START.md - Guide de démarrage rapide
HOW_TO_VIEW_SCORES.md - Visualisation des scores
TROUBLESHOOTING_500_ERROR.md - Résolution d'erreurs
WHAT_THIS_PROJECT_DOES.md - Explication détaillée

🏆 DÉMO RAPIDE (5 minutes)

# 1. Installation
pip install -r requirement.txt

# 2. Entraînement rapide (optionnel si .pkl existent)
# jupyter notebook final.ipynb

# 3. Lancer l'API
uvicorn app:app --reload

# 4. Tester (dans un autre terminal)
python test.py

# 5. Dashboard (optionnel)
streamlit run dashboard.py

Voilà! Le système est opérationnel. 🎉

📝 EXEMPLES D'UTILISATION

Navigation Marketplace

# Démarrer l'application
cd marketplace-hub
npm run dev

# Pages disponibles:
# - Homepage: http://localhost:5173
# - Produits: http://localhost:5173/products
# - Panier: http://localhost:5173/cart
# - Checkout: http://localhost:5173/checkout
# - Admin: http://localhost:5173/admin/dashboard

Workflow Analytics Complet

# 1. Démarrer le tracking
cd web-site
node heatmap-api.mjs &
npm run dev

# 2. Utiliser l'application normalement (collecter des données)

# 3. Générer un rapport quotidien
python heatmap_plot.py --api
python generate_ux_report_local.py \
  --json heatmap-data.json \
  --image heatmap.png \
  --output "reports/daily_report.pdf"

# 4. Analyser le rapport et implémenter les changements

# 5. Effacer les données pour le prochain cycle (optionnel)
# Dans la console navigateur: window.clearAll()

🚀 DÉPLOIEMENT

Déploiement Marketplace

# Build pour production
cd marketplace-hub
npm run build

# Output dans dist/
# Déployer dist/ sur n'importe quel hébergement statique (Vercel, Netlify, etc.)

# Pour l'API heatmap, déployer heatmap-api.mjs sur un serveur Node.js
# Mettre à jour tracking.js avec l'URL API de production

Configuration

Variables d'environnement (créer .env dans marketplace-hub/):

VITE_API_URL=http://localhost:3001
VITE_ENABLE_TRACKING=true

Configuration API Heatmap (heatmap-api.mjs):

const PORT = 3001;          // Changer le port API
const CORS_ORIGIN = '*';    // Restreindre CORS en production

Configuration Tracking (public/tracking.js):

const API_URL = 'http://localhost:3001/api/heatmap';  // URL production
const SYNC_INTERVAL = 5000;  // Fréquence sync (millisecondes)

Name		Name	Last commit message	Last commit date
web_site		web_site
.gitignore		.gitignore
README.md		README.md
app.py		app.py
campaign_data_cleaned.csv		campaign_data_cleaned.csv
clean_campaign_data.py		clean_campaign_data.py
config.py		config.py
dashboard.py		dashboard.py
dataset.csv		dataset.csv
embeddings.npy		embeddings.npy
embeddings.py		embeddings.py
ensemble_model.py		ensemble_model.py
final.ipynb		final.ipynb
qdrant_indexer.py		qdrant_indexer.py
requirement.txt		requirement.txt
retrieval_test.py		retrieval_test.py
test.py		test.py
train_pipeline.py		train_pipeline.py

Latest commit

History

Folders and files

Repository files navigation