Génération de feuilles de style pour site Web par un Algorithme Génétique Interactif N. Monmarché, G. Nocent, M. Slimane, G. Venturini, Laboratoire d ’Informatique - Université de Tours, P. Santini Alderan S.A.
Plan de l’exposé Présentation du problème Les Algorithmes Génétiques (A.G.) HTML et Feuilles de style Imagine
Présentation du problème La présentation de pages WEB Les limites des logiciels actuels Nécessité de proposer des « looks » Impératifs : respect de l’avis de l’utilisateur
Les algorithmes génétiques Présentation des A.G. Inspirés de la théorie de l’évolution Une solution = un individu Une caractéristique = un gène Créer des descendances issues des meilleurs individus par croisement et mutation
Les algorithmes génétiques Croisement et mutation @ # W & 5 @ # $ k 5 G < $ k µ Mutation @ # % k 5 @ # $ k 5
Les algorithmes génétiques AG non classique (basé sur la fréquence des gènes) @ # W & µ Gène n°1 Valeur Fréquence G # $ k µ @ 50 % G 50 % G # * « 5 Gène n°2 @ # W 8 µ Valeur Fréquence # 100 % Etc. …
Les algorithmes génétiques A.G. non classique : implémentation Sélection Mutation
HTML et Feuilles de style Présentation d’HTML Langage à balises Orienté structuration de texte, désormais doté de possibilités graphiques évoluées Exemples : <BODY BGCOLOR=#FF0000> Le fond de la page est rouge. <H1> Gros titre </H1> <H6> Petit titre </H6> <FONT FACE=«Times»> Un texte personnalisé </FONT> </BODY>
HTML et Feuilles de style Les feuilles de style (CSS) Un but : faciliter la cohérence graphique d’un site en définissant des styles Orienté HTML : n’importe quelle balise peut voir son rendu graphique modifié
Principe de fonctionnement Imagine Principe de fonctionnement But = personnaliser une ou plusieurs pages en optimisant la feuille de style avec un algorithme génétique interactif Principe de l’algorithme : 1) Générer initialement une population de feuilles de style (1 feuille = 1 individu), 2) Afficher les feuilles (en les appliquant aux pages HTML de l’utilisateur), 3) Laisser l’utilisateur sélectionner les versions de ses pages qui lui plaisent le plus, 4) Mettre à jour les fréquences des gènes en fonction des individus sélectionnés, 5) Générer la population suivante, 6) Aller en 2) ou Stop si l’utilisateur est satisfait
Représentation génétique Imagine Représentation génétique Gènes (26 en tout) Valeurs possibles Fond (couleur ou image) 64 fichiers gif/jpeg ou 128 couleurs Couleur liens 128 couleurs Règles/barres 25 fichiers gif/jpeg Puces ‘ ’ ’ ‘ ‘ ’ ’ Titres niveau 1 (2 et 3) couleur 128 alignement gauche, droite, centré, justifié, police 35 polices style normal, italique, oblique poids léger, normal, gras, … Paragraphe (police, style, …) Texte d’introduction (…) Commentaires (…)
Autres possibilités d ’interaction Imagine Autres possibilités d ’interaction Modification directe du style d’une page (avec prise en compte des gènes modifiés dans l’algorithme génétique) Gestion d ’une base de données des couleurs, imagettes, …, pour restreindre/augmenter les valeurs possible des gènes, ou pour les adapter à un domaine particulier,
Le logiciel Imagine Organisation interne Gestion des opérations graphiques Moteur JET (Access) Gestion de la base de données APIs Win32 GASim.dll (Visual C++) Visual Basic Gestion de l’interface utilisateur Gestion de l’algorithme génétique Navigateur IE4 / 5 Gestion du rendu HTML
Conclusion et perspectives Imagine = outil complètement intuitif et interactif optimisant des feuilles de style HTML en fonction des préférences de l’utilisateur l’A.G. interactif peut optimiser le style d’autres types de documents (Word, …) Application réelle en cours de réalisation/commercialisation par Alderan S.A.