Brevet FR2983596A1 — publié le 20130607

PROCEDE ET SYSTEME POUR AFFICHER SIMULTANEMENT UNE PAGE WEB AVEC UNE PLURALITE D'IMAGES SUPERPOSEES A UNE IMAGE DE FOND DOMAINE DE L'INVENTION La présente invention concerne un procédé et un système informatique pour afficher simultanément sur un dispositif d'affichage une page Web avec une pluralité d'images superposées à une image de fond, fixe ou animée. ARRIERE PLAN DE L'INVENTION Les plateformes de commerce électronique proposent généralement des catalogues de produits affichés sur une ou plusieurs pages Web se présentant sous la forme d'une série d'icônes contenant chacune une image d'un produit, potentiellement classées par marque ou selon une typologie particulière du produit concerné. A partir de la vision d'ensemble du catalogue ou d'une subdivision de celui-ci, l'acheteur peut sélectionner une icône pour accéder à davantage de détails sur le produit (images sous différents angles, description technique, prix, disponibilité, etc.). La vente à distance par le biais de plateformes de commerce électronique prend de plus en plus d'importance dans les actes d'achat des consommateurs, y compris pour des produits à porter (lunettes, vêtements, chaussures, etc.), pour lesquels un essayage est souvent souhaitable. Il est en effet préférable, avant d'acheter un tel produit, s'il est bien adapté à la morphologie ou à la physionomie de l'acheteur, et, le cas échéant, de pouvoir comparer différents produits afin de choisir le plus seyant. Certaines plateformes de commerce électronique permettent de compenser l'absence d'accès physique aux produits proposés en donnant la possibilité à l'acheteur de se photographier au moyen d'une cybercaméra, de télécharger la photographie et d'y superposer une image de l'un des produits du catalogue. Par exemple, s'agissant de vente à distance de lunettes, l'acheteur peut photographier son visage et essayer virtuellement une monture particulière en superposant la photographie de la monture proposée sur le site à la photographie qu'il a prise. Il peut ainsi vérifier si la monture convient à sa physionomie. Cependant, au cours ce type d'essayage, l'acheteur souhaite généralement essayer successivement différentes montures pour pouvoir les comparer. Or, avec les systèmes existants, il n'est pas possible de visualiser en même temps la photographie avec différents produits du catalogue. En effet, en raison de la quantité d'informations à traiter, et compte tenu du fait que plusieurs utilisateurs cherchent simultanément à essayer les produits, la plateforme Web risquerait d'être saturée, ce qui compromettrait sa stabilité. Outre cet exemple, il existe de manière plus générale un besoin pour personnaliser l'affichage d'un catalogue comprenant des photographies d'accessoires portables par un utilisateur, de mobilier ou d'éléments de décoration intérieure ou extérieure, ou encore d'accessoires d'un véhicule, sur une image fixe ou animée représentant respectivement l'utilisateur, une pièce d'une habitation, ou un véhicule, de manière à permettre à l'utilisateur de déterminer, parmi les produits présentés sur le catalogue, celui qui lui convient le mieux. Un but de l'invention est donc de concevoir une architecture informatique qui permette d'afficher simultanément plusieurs images d'un catalogue sur une page Web en les superposant à une image de fond fixe ou animée telle qu'une photographie, une vidéo, un dessin, etc. Cette architecture informatique doit tenir compte du fait que plusieurs utilisateurs (acheteurs potentiels) peuvent se trouver en même temps sur le site qui l'héberge et que chacun d'eux effectue un essayage virtuel d'une série de produits. Un autre but de l'invention est de procurer une architecture qui soit la plus simple possible à utiliser pour les clients, et qui nécessite le moins d'opérations possible de leur part. BREVE DESCRIPTION DE L'INVENTION Conformément à l'invention, il est proposé un procédé mis en oeuvre dans un système informatique client-serveur pour afficher simultanément sur un dispositif d'affichage une page Web avec une pluralité d'images partiellement transparentes superposées à une image de fond fixe ou animée, ledit procédé étant caractérisé en ce qu'il comprend les étapes suivantes : - la transmission à un serveur, par un plugiciel de poste client, d'une image fixe ou animée destinée à devenir ladite image de fond ; - le traitement, par une bibliothèque graphique communiquant avec ledit serveur, de ladite image, ledit traitement comprenant une vérification de la qualité de l'image, - la transmission par ledit serveur de l'image de fond traitée à un navigateur Web exécuté sur le poste client, - l'envoi, par ledit navigateur Web du poste client vers le serveur, d'une requête déterminant la pluralité d'images partiellement transparentes à afficher, - l'adaptation, par la bibliothèque graphique, de la dimension de la pluralité d'images partiellement transparentes à la dimension à de l'image de fond, - la transmission par ledit serveur au navigateur Web du poste client de ladite pluralité d'images, - la superposition, par ledit navigateur Web du poste client, de chacune de la pluralité d'images partiellement transparentes sur ladite image de fond et l'affichage simultané desdites images superposées sur le dispositif d'affichage. Par « image animée » on entend dans le présent texte un flot d'images tel qu'une vidéo ou un dessin animé. Un avantage de l'invention est de permettre rapidement à un utilisateur, sans risque pour la stabilité de la plateforme hébergée par le serveur et quel que soit le nombre 10 d'utilisateurs simultanés, d'accéder à un rendu visuel simultané à l'ensemble des combinaisons possibles de l'image de fond et de la pluralité d'images superposées. Ainsi, l'utilisateur est en mesure de faire un choix beaucoup plus facile et rapide, ne nécessitant pas de sa part d'effort de mémorisation des différentes combinaisons possibles. Selon un mode de réalisation avantageux de l'invention, ladite image de fond est une 15 photographie d'un utilisateur, ladite photographie étant par exemple prise par une cybercaméra connectée au poste client. Selon une forme d'exécution particulière de l'invention, les images partiellement transparentes sont des images de produits destinés à être portés par l'utilisateur. Par exemple, lesdits produits sont des montures de lunettes. 20 Lesdites images partiellement transparentes peuvent être stockées dans une base de données accessible à partir du serveur. Le procédé peut comprendre une étape de modification, par l'utilisateur, de l'image de fond traitée et une étape de transmission, par le navigateur Web client, de l'image modifiée au serveur. 25 Le cas échéant, le procédé peut comprendre le stockage de ladite image modifiée dans une mémoire du serveur. Par ailleurs, le procédé peut comprendre une étape d'envoi au serveur à partir du poste client, par le navigateur Web, d'une requête de suppression de l'image de fond et, en réponse à ladite requête, une étape de suppression par le serveur de ladite image de fond. 30 Selon une autre forme d'exécution de l'invention, l'image de fond est une vidéo. Un autre objet concerne un système informatique client-serveur pour afficher simultanément sur un dispositif d'affichage une page Web avec une pluralité d'images partiellement transparentes superposées à une image de fond fixe ou animée, ledit système étant caractérisé en ce qu'il comprend : - du côté d'un poste client : un navigateur Web adapté pour envoyer des requêtes au serveur et analyser des réponses du serveur, et un plugiciel adapté pour envoyer au serveur une image fixe ou animée destinée à devenir l'image de fond ; - du côté d'un serveur : une base de données pour stocker ladite pluralité d'images partiellement transparentes et une bibliothèque graphique pour traiter l'image fixe ou animée transmise par le plugiciel. DESCRIPTION DETAILLEE DE L'INVENTION D'une manière générale, le système est basé sur une architecture informatique client- serveur (HTTP/S), qui s'appuie d'une part sur un serveur comprenant un service TCP et d'autre part sur un poste client comprenant un dispositif d'affichage (par exemple un écran d'ordinateur) et sur lequel est exécuté un navigateur Web qui est adapté pour envoyer des requêtes au serveur et analyser les réponses du serveur. Le système utilise autant que possible des technologies libres. Par exemple, le serveur est un serveur HTTP/1.1 de type Apache et le navigateur Web client est du type Firefox, Chrome, Safari, voire MicrosoftlE9. Le langage utilisé côté serveur est avantageusement un langage PHP. Les technologies Web 2.0 permettent de développer des applications capables d'échanger de manière dynamique avec un serveur. On pourra citer parmi celles-ci JSON, XML, Adobe Flash, Java, CSS3 et SVG. La page Web est générée de préférence en format XHTML. Pour décrire la structure de la page Web, on utilise de préférence des feuilles de style en cascade du type CSS3. Le navigateur Web exécuté sur le poste client est choisi parmi les nombreux navigateurs qui permettent à un utilisateur d'accéder à des pages Web sur Internet. Le navigateur Web exécuté sur le poste client est de préférence capable de prendre en compte les feuilles de style en cascade CSS3, d'analyser le Javascript 1.2 et d'afficher des pages en format XHTML et HTML5. A chaque fois que l'utilisateur interagit avec la page Web, le navigateur Web exécuté sur le poste client requiert, de la part du serveur, la partie requise de l'application, qui peut comprendre des données ou du code exécutable. Cette communication est invisible de l'utilisateur, étant gérée directement par le navigateur Web exécuté sur le poste client. On décrit, dans cet exemple non limitatif, un mode de réalisation préféré de l'invention dans lequel la pluralité d'images à afficher est une série de photographies de montures de lunettes d'un catalogue de commerce en ligne, et dans lequel l'image de fond est une photographie d'un acheteur potentiel, qui est typiquement l'utilisateur du poste client. Afin d'être superposées à l'image de fond sans masquer totalement celle-ci, les images à afficher sont partiellement transparentes. A cet égard, le format PNG est particulièrement préféré puisqu'il permet de procurer des images de bonne qualité tout en préservant la couche alpha, qui détermine la transparence des images. Dans le cas où les images représentent différents modèles de lunettes, les images sont obtenues en photographiant chacun de ces modèles porté par un mannequin, et en traitant ces photographies par des techniques de filtrage et de nettoyage connues pour leur conférer la transparence requise tout en assurant le meilleur rendu visuel possible (texture, matière, etc.). On choisit de préférence une résolution supérieure ou égale à 1500 pixels en largeur, pour obtenir une qualité d'image suffisante. De préférence, pour chaque modèle, on prend une série de photographies selon une orientation variant de -90° à +90° par rapport à la face du mannequin. Ceci permettra de choisir l'orientation la plus appropriée suivant l'orientation du visage de l'utilisateur qui doit les essayer. Les images sont redimensionnées pour respecter un ratio déterminé entre une grandeur réelle du modèle et un pixel. La pluralité d'images destinées à être superposées à l'image de fond est alors enregistrée dans une base de données accessible à partir du serveur. A chacun des modèles est avantageusement associé un contenu informatif, comprenant par exemple des caractéristiques techniques du modèle, son prix, sa disponibilité, etc. Ledit contenu est également enregistré dans la base de données pour être transmis à un navigateur exécuté sur le poste client afin d'être affiché sur la page Web avec chaque modèle présenté. La base de données est typiquement enregistrée sur un disque dur du serveur. On va maintenant décrire l'obtention de l'image de fond à laquelle la pluralité d'images évoquée ci-dessus est destinée à être superposée. L'utilisateur dispose par exemple d'une cybercaméra, qui est un périphérique du poste client. L'utilisateur prend alors une photographie de son visage à l'aide de la cybercaméra. De manière alternative, l'utilisateur peut télécharger sur le poste client une photographie à partir d'un autre dispositif, tel qu'un téléphone mobile ou une caméra digitale. L'image acquise par la caméra ou téléchargée est récupérée par un plugiciel du poste client qui la transmet à une bibliothèque graphique communiquant avec le serveur. Le plugiciel du poste client est installé dans le navigateur Web exécuté sur le poste client et exécuté. Ainsi, aucune installation permanente n'est requise et l'application fonctionne sur une machine virtuelle à l'intérieur du navigateur Web exécuté sur le poste client. Le plugiciel utilise un code généré par une machine virtuelle, telle qu'Adobe Flash. L'image est envoyée à une bibliothèque graphique du serveur par un protocole de type HTTP/S et est enregistrée sur le serveur en tant qu'image source, résultats de calcul et image déboguée. La bibliothèque graphique est de préférence choisie parmi les bibliothèques libres. La bibliothèque OpenCV est à l'heure actuelle une des bibliothèques graphiques les plus répandues permettant de détecter des objets dans des images et de suivre des mouvements. Dans le cas d'espèce, ladite bibliothèque graphique est utilisée pour détecter les yeux de l'utilisateur dans la photographie transmise par le plugiciel. De préférence, l'utilisateur est guidé dans la prise de la photographie de sorte à ce que son visage soit au centre de l'image, que son visage soit suffisamment grand pour procurer une bonne résolution en vue du traitement de l'image et que ses yeux soient sensiblement dans un plan horizontal. A cet égard, on fait en sorte que les photographies prises par la cybercaméra soient au moins au format VGA et que son visage occupe entre 30 et 50% de l'image. La détection des yeux par la bibliothèque graphique repose par ailleurs sur un certain nombre d'hypothèses, parmi lesquelles, par exemple, le fait que les yeux sont ronds et plus brillants que le reste du visage, que les yeux sont situés dans la partie supérieure de l'ovale du visage, que les yeux sont sensiblement symétriques par rapport au plan de symétrie vertical de l'ovale, et qu'ils sont de taille sensiblement identique. Par ailleurs,on peut faire le choix de ne traiter la photographie que si le visage de l'utilisateur n'est tourné que d'un angle de moins de 25° dans chaque direction par rapport à la position de face. A l'issue du traitement par la bibliothèque graphique, le serveur renvoie au navigateur Web exécuté sur le poste client l'image traitée accompagnée d'une réponse quant à la possibilité d'utiliser ladite image en tant qu'image de fond pour la superposition des images partiellement transparentes. La réponse peut être de l'un des trois types suivants : l'image ne donne pas de résultats utilisables, l'image donne des résultats erronés, l'image donne de bons résultats. Le serveur envoie également au navigateur Web exécuté sur le poste client une image partiellement transparente à superposer à l'image de fond. Le navigateur Web exécuté sur le poste client superpose ladite image et l'image de fond traitée. L'utilisateur peut visualiser sur le dispositif d'affichage l'image ainsi traitée avec l'image partiellement transparente superposée et la réponse associée, qui peut comprendre un message d'aide suggérant des remèdes pour améliorer la qualité de la photographie. Grâce à des boutons affichés à proximité de l'image, l'utilisateur peut ainsi corriger le résultat obtenu et notamment déplacer et/ou redimensionner l'image partiellement transparente. Chacune de ces modifications constitue un retour d'information de l'utilisateur qui est transmis au serveur et enregistré dans une mémoire du serveur. On améliore ainsi la détection grâce à un entraînement de la bibliothèque graphique. De préférence, la bibliothèque graphique est exécutée en tant que service sur un serveur qui lui est propre et reçoit des données du code PHP du serveur, ce qui améliore la performance globale du système et diminue la quantité de mémoire requise. Les feuilles de style en cascade déterminent, en fonction de la structure globale du site Web, l'emplacement et la manière dont les images partiellement transparentes doivent être superposées à l'image de fond. Cette implémentation permet de ne communiquer la position de l'image à superposer qu'une seule fois, quel que soit le nombre d'occurrence de l'image de fond sur la page Web. La superposition est quant à elle réalisée par le navigateur Web exécuté sur le poste client, ce qui procure un procédé utilisable à grande échelle et très efficace. Le traitement n'étant réalisé qu'une fois sur le serveur, celui-ci ne voit pas sa stabilité compromise même si plusieurs utilisateurs l'utilisent en même temps, les opérations d'affichage étant réalisées par le navigateur Web exécuté sur chaque poste client. A partir de la photographie de l'utilisateur qui est transmise au serveur, on calcule le ratio entre une grandeur réelle et un pixel. Lorsque le navigateur Web exécuté sur le poste client envoie une requête au serveur pour obtenir les images à superposer, il reçoit lesdites images du serveur, une par une ou en bloc, et les dimensionne pour les adapter au ratio grandeur réelle / pixel de l'image de fond. Le navigateur Web exécuté sur le poste client peut alors effectuer la superposition de la pluralité d'images et de l'image de fond, et afficher un catalogue personnalisé, dans lequel la photographie de l'utilisateur avec tous les modèles de lunette de la page est proposée. L'utilisateur est donc à même de sélectionner le modèle qui lui plaît le plus parmi les modèles affichés. De même, lorsque l'utilisateur souhaite changer de page, le navigateur Web exécuté sur le poste client envoie une requête ad hoc au serveur, qui lui transmet les images appropriées, qui sont correctement dimensionnées par le navigateur Web exécuté sur le poste client. Cette implémentation du système minimise les opérations effectuées au niveau du serveur et évite de le déstabiliser, même en cas d'afflux de demandes simultanées. Pour permettre le suivi des évolutions, voire des statistiques qualité, ainsi que la persistance des données lorsque l'utilisateur navigue d'une page à une autre, le système comprend une ou plusieurs mémoires. De préférence, en raison des contraintes de sécurité sur le navigateur Web exécuté sur le poste client, la majeure partie des données est stockée sur le serveur. Différents types de mémoire peuvent être utilisés. Une mémoire RAM peut être employée pour mémoriser les données de traitement, les données de réseau ainsi qu'une mémoire temporaire utilisée pour stocker les données 20 reçues. Par ailleurs, une mémoire persistante notamment sous forme d'un disque peut exister tant du côté du serveur (pour la base de données d'images et pour le système d'assurance qualité mentionné ci-dessus), que du côté du poste client (cache du navigateur Web). Il va de soi que les exemples que l'on vient de donner ne sont que des illustrations 25 particulières en aucun cas limitatives quant aux domaines d'application de l'invention. Notamment, l'invention s'applique également à un procédé et à un système dans lequel la pluralité d'images à afficher comprend des objets décoratifs ou des meubles, des accessoires pour un véhicule (automobile, motocycle, etc.), des accessoires portables par un utilisateur (bijoux, vêtements, chaussures, etc.), des modifications de son apparence 30 (coiffure, maquillage) et l'image de fond comprend respectivement une photographie d'une pièce ou d'un jardin, du véhicule ou de l'utilisateur (soit de la totalité de son corps soit d'une partie seulement, selon l'application). Dans ce cas, on entraîne la bibliothèque graphique à reconnaître la géométrie des objets représentés sur les images à superposer. Par ailleurs, l'invention s'applique également à l'affichage d'une page Web avec une pluralité d'images superposées à une image animée telle qu'une vidéo ou un dessin animé. REVENDICATIONS1. Procédé mis en oeuvre dans un système informatique client-serveur pour afficher simultanément sur un dispositif d'affichage une page Web avec une pluralité d'images partiellement transparentes superposées à une image de fond fixe ou animée, ledit procédé étant caractérisé en ce qu'il comprend les étapes suivantes : - la transmission à un serveur, par un plugiciel de poste client, d'une image fixe ou animée destinée à devenir ladite image de fond ; - le traitement, par une bibliothèque graphique communiquant avec ledit serveur, de ladite image, ledit traitement comprenant une vérification de la qualité de l'image, - la transmission par ledit serveur de l'image de fond traitée à un navigateur Web exécuté sur le poste client, - l'envoi, par ledit navigateur Web du poste client vers le serveur, d'une requête déterminant la pluralité d'images partiellement transparentes à afficher, - l'adaptation, par la bibliothèque graphique, de la dimension de la pluralité d'images partiellement transparentes à la dimension à de l'image de fond, - la transmission par ledit serveur au navigateur Web du poste client de ladite pluralité d'images, - la superposition, par ledit navigateur Web du poste client, de chacune de la pluralité d'images partiellement transparentes sur ladite image de fond et l'affichage simultané desdites images superposées sur le dispositif d'affichage. 2. Procédé selon la revendication 1, caractérisé en ce que l'image de fond est une photographie d'un utilisateur. 3. Procédé selon la revendication 2, caractérisé en ce que les images partiellement transparentes sont des images de produits destinés à être portés par l'utilisateur. 4. Procédé selon la revendication 3, caractérisé en ce que lesdits produits sont des montures de lunettes. 5. Procédé selon l'une des revendications 1 à 4, caractérisé en ce que lesdites images partiellement transparentes sont stockées dans une base de données accessible à partir du serveur.35 6. Procédé selon l'une des revendications 1 à 5, caractérisé en ce qu'il comprend une étape de modification, par l'utilisateur, de l'image de fond traitée et une étape de transmission, par le navigateur Web client, de l'image modifiée au serveur. 7. Procédé selon la revendication 6, caractérisé en ce qu'il comprend le stockage de ladite image modifiée dans une mémoire du serveur. 8. Procédé selon l'une des revendications 1 à 7, caractérisé en ce qu'il comprend une étape d'envoi au serveur à partir du poste client, par le navigateur Web, d'une requête de suppression de l'image de fond et, en réponse à ladite requête, une étape de suppression par le serveur de ladite image de fond. 9. Procédé selon la revendication 1, caractérisé en ce l'image de fond est une vidéo. 10. Système informatique client-serveur pour afficher simultanément sur un dispositif d'affichage une page Web avec une pluralité d'images partiellement transparentes superposées à une image de fond fixe ou animée, ledit système étant caractérisé en ce qu'il comprend : - du côté d'un poste client : un navigateur Web adapté pour envoyer des requêtes au serveur et analyser des réponses du serveur, et un plugiciel adapté pour envoyer au serveur une image fixe ou animée destinée à devenir l'image de fond ; - du côté d'un serveur : une base de données pour stocker ladite pluralité d'images partiellement transparentes et une bibliothèque graphique pour traiter l'image fixe ou animée transmise par le plugiciel.25