Cas Utilisateur

Recherche Vocale avec Elastic, la Fashion recherche by #Cendriyon

Par
Franck Nizou

cendryon banner.png

Le Projet

En 10 années de présence sur le web, Cendriyon.com, Fashion Store spécialisé dans la vente de chaussures pour femmes, n’avait pas de moteur de recherche full text. Doté d’un stock de plus de 30 000 articles de mode, il était donc primordial de lancer un outil performant, ergonomique et ludique. Après quelques tests, notre choix s’est très vite porté sur Elasticsearch !

cendyon serach example.png

Figure 1 : Exemple de recherche

Côté Mapping

Nous utilisons un french analyzer sur mesure, inspiré par Damien Alexandre de #jolicode et enrichi d’un dictionnaire de synonymes fashion, comme sport = sportswear, tops = tee-shirts, debardeur = caraco, etc. Nous avons également intégré un menu suggest, basé sur des mots clés indexés, ce qui permet de limiter les saisies dans le cas de figure de la saisie manuelle.

Côté Indexation

Afin de garantir la fraîcheur des données - disponibilité des produits, pointures, tailles et couleurs - chaque jour, nous ré-indexons à chaud l’ensemble des données « en 3 secondes » via un Bulk en PHP et la technique « Changing Mapping with Zero Downtime. »

Côté Recherche

L’application JavaScript requête directement en Ajax un fichier PHP qui s’occupe du traitement avec Elasticsearch, grâce à un client PHP que nous avons développé en interne.

Côté Résultats

La pertinence par le scoring nous semblait évidente afin de trier les résultats. Dans le futur, un rescore avec les produits les plus performants basé sur les statistiques telles que le nombre de vues, clics ou encore conversions, pourra être mis en place, afin de mettre en avant les produits les plus adaptés aux recherches des utilisateurs. Nous avons volontairement laissé un fuzziness suffisamment large afin d’assurer un maximum de résultats. Nous opérons dans le secteur de la mode et du e-commerce, ainsi, si à un instant t nous n’avons plus de « chaussures noires en pointure 38 » il y aura peut être d’autres « chaussures en pointure 38 » qui feront flasher la cliente.

Côté Vocal

Ok Google ! API Web Speech !

Cette API nous a permis de transcrire la partie vocale en texte. Ce service proposé par Google a été implanté comme une surcouche dans notre dev JavaScript, filtre anti bruit, correction automatique du contenu inapproprié, ajout de mots clés afin de renforcer le contexte de la thématique. C’est un outil très puissant bien que contraint à la compatibilité des navigateurs et des OS. 

if (!('webkitSpeechRecognition' in window)) {
  upgrade();
} else {
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;
  recognition.onstart = function() { ... }
  recognition.onresult = function(event) { ... }
  recognition.onerror = function(event) { ... }
  recognition.onend = function() { ... }
  ...

En effet l’API Web Speech utilise des préfixes webkit, ce qui rend le service disponible essentiellement sur le navigateur Google Chrome. ZDNET rappelle qu’« en 2017, Chrome c’est 60% de parts de marché des navigateurs ». Par ailleurs, selon Caniuse, il est compatible avec Chrome Android et testé à partir de la version 5, mais rencontre des difficultés avec Chrome OS. Afin de pallier au problème de compatibilité et d’OS, je vous recommande de passer par l’API Cloud Speech, service qui fonctionne comme une API REST avec JSON, pratique pour une application iPhone, par exemple.

  1. Développer un Voice Recorder, capturer le son du micro et l'enregistrer dans un fichier. Exemple de langage en fonction du projet :
    1. App Iphone : Objective-C
    2. App Android : Java MediaRecorder
    3. Navigateur web : JavaScript + HTML5
  2. Envoyer le fichier à l’API Cloud speech, voir la liste des clients. 
    # Instantiates a client
$speech = new SpeechClient([
    'projectId' => $projectId,
    'languageCode' => 'en-US',
]);
# The name of the audio file to transcribe
$fileName = __DIR__ . '/resources/audio.raw';
# The audio file's encoding and sample rate
$options = [
    'encoding' => 'LINEAR16',
    'sampleRateHertz' => 16000,
];
# Detects speech in the audio file
$results = $speech->recognize(fopen($fileName, 'r'), $options);
  3. Récupérer le résultat afin de l’insérer dans une requête Elasticsearch
    4. $transcribe = [];
foreach ($results[0]->alternatives() as $alternative) {
    $transcribe[] = $alternative['transcript'];
}
# Variable that contains the content for the request
$text_for_query_elasticsearch = implode(' ', $transcribe);

Côté Analyse

Bientôt Kibana ! Mais pour le moment nous utilisons Google Analytics qui nous permet une première visualisation de l’utilisation de la Fashion Recherche Cendriyon. Grâce à l’utilisation de requêtes en Ajax, nous avons paramétré Site Search afin de mesurer la pertinence de ces requêtes à des fins marketing. Nous avons également ajouté une page virtuelle afin de gérer l’outil et catégorisé les recherches sans résultat, ce qui pourrait grandement nous pousser à nous améliorer sur des recherches de produits auxquelles nous n’aurions pas pensés.

cendyon google analytics.png

Figure 2 : Remontée des datas dans Google Analytics

Conclusion

Le Web avance et ça nous plait ! Merci à David Pilato pour sa présence sur le Forum ;)

author-unamed.jpg

Franck Nizou. Passionné par le web et les nouvelles technologie depuis les années 2000, Franck Nizou co-fonde Cendriyon.com en 2007, un des premiers sites de vente en ligne de chaussures pour femme. Il ne cesse depuis de coder dans différents langages de programmation et particulièrement le PHP afin de répondre aux besoins de son entreprise