Lia

Lia est un petit personnage féminin que j’ai commencé à développer autour de 2023. À l’origine, elle n’était pas vraiment pensée comme un personnage à part entière, mais plutôt comme une sorte d’assistante avec un rôle assez limité : aider les visiteurs de mon portfolio à en apprendre davantage sur mes projets et sur moi.

Origine

La toute première version de Lia est née d’une question assez simple : comment intégrer une IA fonctionnant avec ChatGPT sans que cela ressemble à un simple chatbot ?

Je voulais que le projet possède un minimum d’âme, ainsi qu’une direction plus personnelle.

Le nom « Lia » vient naturellement de « l’IA ». À ce moment-là, le personnage n’avait encore ni véritable apparence ni personnalité définie. Simplement un nom, ainsi qu’une couleur : une sorte de rose pastel très léger.

Cette première version de Lia restait finalement assez proche d’un chatbot classique, mais, à l’époque, tout le travail autour des animations d’ouverture et de fermeture permettait déjà de donner un peu plus de charme et d’identité.

Premières intégrations

Lia a notamment été intégrée à Em, un concept d’éditeur que j’avais commencé à designer et à développer vers 2024. C’était une sorte d’application mêlant l’édition de documents à la Word avec un système d’organisation et de classement plus proche d’Obsidian ou de Notion.

L’idée était d’avoir une IA locale capable de comprendre mes projets, de retrouver des informations, de réorganiser mes idées ou simplement de m’aider à réfléchir dessus.

C’est à ce moment-là que Lia a commencé à devenir autre chose qu’un simple nom. Je voulais pouvoir la voir réagir pendant une conversation, revenant finalement à mon souhait initial : donner à Lia davantage de charme et de caractère.

J’ai donc trouvé sur Pinterest une petite image de personnage qui me semblait correspondre à l’idée que je me faisais de Lia, puis je l’ai intégrée à l’interface.

Création du personnage

Rapidement, il fallait créer quelque chose de plus unique et surtout de réellement original.

Pour autant, il y avait quelques contraintes à respecter. Puisque Lia était destinée à apparaître directement dans une interface, il fallait :

• un visage avec peu de détails ;
• une forme facilement reconnaissable ;
• une bonne lisibilité, même à petite taille ;
• et surtout une structure suffisamment flexible pour la rendre expressive.

À partir de tout ça, j’ai essayé de demander à des modèles génératifs d’imaginer Lia.

Le résultat étant assez éloigné de ce que j’avais en tête, je suis finalement reparti de zéro pour créer moi-même le personnage. C’était la première et la dernière fois que j’utilisais l’IA pour faire… Lia. J’ai repris Figma et commencé à construire Lia à la main.

J’ai commencé par collecter des références de mascottes, de personnages simplifiés et de différentes manières de représenter un visage avec très peu d’éléments.

La forme principale est arrivée assez rapidement. Ensuite, le travail consistait surtout à affiner les proportions : largeur du visage, position des yeux, rayon des courbes et équilibre général du personnage.

Adobe

En parallèle, Adobe avait présenté quelque temps auparavant un système expérimental de rotation vectorielle, capable de générer plusieurs angles à partir d’un même tracé vectoriel. [3]

J’ai donc essayé de l’utiliser sur une première version de Lia qui venait tout juste d’être terminée.

Le résultat était loin d’être parfait. Certaines courbes se déformaient, les proportions changeaient parfois de manière étrange et plusieurs détails nécessitaient des corrections manuelles.

Mais l’expérience restait très utile.

Voir Lia sous différents angles m’a permis de mieux comprendre la forme implicite de sa tête et la manière dont certains éléments devaient évoluer lorsqu’elle regardait dans une autre direction.

Système d’expressions

Le visage de Lia est volontairement construit avec très peu d’éléments. Cette simplicité permet de modifier fortement son expression sans perdre l’identité du personnage.

Certaines formes restent presque toujours identiques, tandis que d’autres peuvent être déplacées, arrondies ou légèrement déformées.

L’objectif était de construire une sorte de grammaire visuelle : même avec une expression très différente, Lia doit toujours rester immédiatement reconnaissable.

Une seule expression n’était évidemment pas suffisante pour donner l’impression que Lia était réellement présente dans une interface.

Il fallait donc en construire davantage, jusqu’à constituer progressivement une véritable banque d’expressions pour le personnage.

Aujourd’hui, le système repose sur 8 familles d’expressions principales.

baseblushclosed-happydizzypleadsparklesqueezewink

Chaque famille possède ensuite 5 variations, soit 40 visages différents.

• smile
• happy
• gasp
• frown
• nervous

baseblushclosed-happydizzypleadsparklesqueezewink

Les variations ne servent pas uniquement à multiplier les visages.

Elles permettent surtout d’éviter qu’une réaction soit toujours parfaitement identique, ce qui les rend moins répétitives et plus naturelles.

Les yeux et le regard

Les yeux jouent un rôle important dans le comportement de Lia.

Ils peuvent :

• suivre un élément de l’interface ;
• regarder la position du curseur ;
• se déplacer légèrement lorsqu’aucune interaction particulière n’a lieu ;
• ou encore cligner de temps en temps.

Ce sont des mouvements très simples, mais suffisants pour transformer complètement la perception du personnage.

Animation

Les expressions sont ensuite combinées avec différents petits mouvements :

• de légers déplacements de la tête ;
• des transitions entre deux expressions ;
• des micro-mouvements pendant l’attente d’une réponse.

Ces quelques variations permettent d’éviter une pose complètement statique.

Le but n’est pas de créer une animation de personnage particulièrement complexe. Au contraire, Lia fonctionne mieux lorsque les mouvements restent discrets : juste suffisamment présents pour donner l’impression qu’elle réagit réellement à ce qui se passe.

En situation

Lia n’a jamais vraiment été pensée comme une illustration indépendante. Elle fonctionne surtout lorsqu’elle fait partie d’une interface ou d’une interaction avec l’utilisateur.

C’est d’ailleurs en grande partie ce contexte qui permet au personnage de paraître vivant. Si Lia parvient, à travers ses mouvements, ses réactions et ses interactions, à donner l’impression qu’elle est vivante, alors même lorsqu’elle reste immobile, son visage conserve cette présence. On a toujours l’impression qu’elle pourrait réagir ou nous répondre à tout moment.

Système actuel

Avec tout ça, vous pouvez maintenant vous amuser avec Lia :

Lia Playground

Aujourd’hui, elle repose sur plusieurs briques :

• 8 familles d’expressions principales ;
• 5 variantes par expression ;
• 40 visages différents ;
• plusieurs états de regard ;
• des clignements ;
• des mouvements de tête ;
• des transitions entre différents états.

Pris séparément, chacun de ces éléments reste extrêmement simple. Mais c’est leur combinaison qui commence réellement à donner une personnalité au personnage.

Pour la suite

Lia reste encore largement expérimentale.

Il reste beaucoup de choses que j’aimerais explorer : des transitions plus naturelles entre certaines expressions, davantage de mouvements contextuels, de nouvelles réactions et surtout une meilleure connexion entre ce que l’IA dit et ce que le personnage exprime.

L’objectif n’est pas nécessairement de rendre Lia plus complexe. Mais plutôt de réussir à lui donner davantage de personnalité.

1. Icône : Magnific
2. De haut en bas, de gauche à droite, Images 1, 3 et 4 : Mogaesan · Image 2 : kohufied · Image 5 : JIBABA · Image 6 : artiste inconnu · Image 7 : poqo.257
3. Project Turntable, Adobe