Imagine: a tool for generating HTML style sheets with an interactive genetic algorithm based on genes frequencies N. Monmarché, G. Nocent, M. Slimane, G. Venturini, Laboratoire d ’Informatique - University of Tours, France P. Santini Alderan S.A., France

Overview The problem Genetic algorithm & gene frequencies HTML and style sheets Imagine

The problem Designing the «look» of web pages Limitations of actual software: user must define everything Proposed improvements: to suggest several different look … that will satisfy the user

Genetic algorithms (1/4) Short overview inspired from natural selection one solution = one individual part of solution = a gene select the fittest individuals, create offspring with crossover and mutation

GAs (2/4) Standard crossover and mutation operators Crossover Mutation x t a 2o b t 7 ko x t 7 ko x t 7 ko x t b ko

GAs (3/4) Non standard GA based on gene frequencies x t a 2o b t 7 ko b t m d 5 x t w 8 o Gene n°1 ValueFrequency x 50 % b Gene n°2 ValueFrequency t 100 % Etc. …

GAs (4/4) Non standard operators SelectionMutation

HTML style sheets HTML = General language for text description Text is structured Example: background color is red. Large title Small title A typical text

HTML style sheets (CSS) Aim = more homogeneous look of web with a precisely defined style HTML characteristics can be modified by the CSS

Imagine Aim = to personalize one or several web pages by optimizing the style sheet with an interactive GA Algorithm main principles: 1) Generate initially a population of style sheets (one sheet = one individual, one gene = one entry in the style sheet), 2) Display the style sheets (apply them to the user HTML pages and show the result = different versions of the user ’s pages) 3) Let the user select the versions of his pages that he favors 4) Update the gene frequencies according to the selected individuals, 5) Generate the next population, 6) Go to 2) or Stop if the user is satisfied.

Imagine Genetic representation Genes (26)Possibles Values Background (color or image) 128 colors or 64 gif/jpeg files Rules/bars25 gif/jpeg files Bullets ‘ ’ ’ ‘ ‘ ’ ’ Titles level 1 (2 and 3) color128 alignmentleft, right, centered, justified font35 fonts stylenormal, italic, oblique weight light, normal, bold, … Paragraph (font, style, …) Text of introduction (…) Comments (…)

Imagine More interactions user can directly modify the style of a page (and modifications are taken into account in the GA) Imagine manages a databases of colors, images (Gif/Jpeg files) in order to let the user add/remove possible gene values (and may adapt them to his domain)

Imagine software Internal organisation GA User interface Appearance of style sheets Graphics Color and image database APIs Win32 GASim.dll (Visual C++) Browser IE4 / 5 Visual Basic JET engine (Access)

Conclusion and future work Imagine = intuitive tool that optimizes HTML style sheets in interaction with the user GA could optimize other kind of document styles (Word, …) Real world implementation in progress at Alderan S.A.