A Demonstration of End-User
Code Customization Using
Generative AI
Mathieu Acher
@acherm
Preprint
https://hal.science/hal-04312909
https://vamos2024.inf.unibe.ch/cfp/
Presented at 18th International Working Conference on Variability Modelling of
Software-Intensive Systems (VaMoS 2024) in Bern, Switzerlan
2
Generative AI and variability: rising interests!
Mathieu Acher and Jabier Martinez. 2023. Generative AI for Reengineering Variants
into Software Product Lines: An Experience Report. VariVolution@SPLC 2013
Mathieu Acher, Jean-Marc Jézéquel, and José A. Galindo. 2023. On Programming
Variability with Large Language Model-based Assistant. In SPLC 2023
Sandra Greiner, Klaus Schmid, Thorsten Berger, Sebastian Krieter, Kristof Meixner
Generative AI And Software Variability – A Research Vision, VaMoS 2024
Galindo et al. Large Language Models to generate meaningful feature model
instances, SPLC 2023
3
LLM
Hypothesis: Large language models (LLMs) act as a new variability compiler capable
of transforming a high-level specification (“prompt”) into variable code, features,
generators, configurable systems, etc. written in a given technological space.
Motto:
“features as
prompts”
4
Mathieu Acher, Jean-Marc
Jézéquel, and José A.
Galindo. 2023. On
Programming Variability
with Large Language
Model-based Assistant. In
SPLC 2023
LLM
“End-user software engineering focuses on empowering individuals
who are not professional programmers to design, implement, and
maintain software applications.“
Two scenarios:
● (1) end-users can implement variability with the assistance of LLMs;
● (2) LLMs can be used to construct specialized, configurable tools for
end-users
Motto:
“features as
prompts”
5
6
7
8
What’s this TikZ code is doing?
Code understanding
9
What’s this TikZ code is doing?
Code understanding
10
What’s this TikZ code is doing?
Code understanding
The level of details is too low, and
the explanations are not really
actionable, especially for relating
code elements to visual aspects.
11
12
“can you vary the eye of the squid
with the blue color? tell
me what to varies in the TikZ code”
Feature location
To change the color of the squid’s eye to blue, you’ll need
to modify the fill commands that define the eye. The lines
that define the eye are:
fill [Grey50]
(64, 16) circle [radius=32];
fill [BlueGrey900] (64, 16) circle [radius=12];
To change the eye color to blue, you can replace the
colors
...
fill [blue] (64, 16) circle [radius=32];
fill [blue!60!white] (64, 16) circle [radius=12];
...
13
“would it be possible to vary the
original code using a
templating engine in Python in such
a way it is possible to have
either eye of the squid with the blue
color or the original eye
(as in the original TikZ code)? ... can
you parameterize the spots
with a random color? if not random
mode, then it’s the default
color”
Feature and variation
implementation
14
Combination of features
and automated
derivation.
15
Beyond TikZ (feature
location,
implementation, etc.)
Here is a TikZ code:
tikzset{%
cat/.pic={
tikzset{x=3cm/5,y=3cm/5,shift={(0,-1/3)}}
useasboundingbox (-1,-1) (1,2);
fill [BlueGrey900] (0,-2)
.. controls ++(180:3) and ++(0:5/4) .. (-2,0)
arc (270:90:1/5)
.. controls ++(0:2) and ++(180:11/4) .. (0,-2+2/5);
foreach i in {-1,1}
scoped[shift={(1/2*i,9/4)}, rotate=45*i]{
clip [overlay] (0, 5/9) ellipse [radius=8/9];
clip [overlay] (0,-5/9) ellipse [radius=8/9];
fill [BlueGrey900] ellipse [radius=1];
clip [overlay] (0, 7/9) ellipse [radius=10/11];
clip [overlay] (0,-7/9) ellipse [radius=10/11];
fill [Purple100] ellipse [radius=1];
};
fill [BlueGrey900] ellipse [x radius=3/4, y radius=2];
fill [BlueGrey100] ellipse [x radius=1/3, y radius=1];
fill [BlueGrey900]
(0,15/8) ellipse [x radius=1, y radius=5/6]
(0, 8/6) ellipse [x radius=1/2, y radius=1/2]
{[shift={(-1/2,-2)}, rotate= 10] ellipse [x radius=1/3, y radius=5/4]}
{[shift={( 1/2,-2)}, rotate=-10] ellipse [x radius=1/3, y radius=5/4]};
fill [BlueGrey500]
(-1/9,11/8) ellipse [x radius=1/5, y radius=1/5]
( 1/9,11/8) ellipse [x radius=1/5, y radius=1/5];
fill [Purple100]
(0,12/8) ellipse [x radius=1/10, y radius=1/5]
(0,12/8+1/9) ellipse [x radius=1/5 , y radius=1/10];
foreach i in {-1,1}
scoped[shift={(1/2*i,2)}, rotate=35*i]{
clip [overlay] (0, 1/7) ellipse [radius=2/7];
clip [overlay] (0,-1/7) ellipse [radius=2/7];
fill [Yellow50] ellipse [radius=1];
};
scoped{
clip (-1,-2) rectangle ++(2,1);
fill [BlueGrey900] (0,-2) ellipse [radius=1/2];
fill [Grey100]
(-1/2,-2) ellipse [x radius=1/3, y radius=1/4]
( 1/2,-2) ellipse [x radius=1/3, y radius=1/4];
};
foreach i in {-1,1}
foreach j in {-1,0,1}
fill [Grey100, shift={(0,11/8)}, xscale=i, rotate=j*15,
shift=(0:1/2)]
ellipse [x radius=1/3, y radius=1/64];
},
I’d like to change the color of the cat’s tail in red
inaccurate
feature location
or/and incorrect
code synthesis
is totally
possible (even
given the same
prompt)
Feature location:
beware!
To change the color of the squid’s eye to blue, you’ll need
to modify the fill commands that define the eye. The lines
that define the eye are:
fill [Grey50]
(64, 16) circle [radius=32];
fill [BlueGrey900] (64, 16) circle [radius=12];
To change the eye color to blue, you can replace the
colors
...
fill [blue] (64, 16) circle [radius=32];
fill [blue!60!white] (64, 16) circle [radius=12];”
...
“can you vary the eye of the squid
with the blue color? tell
me what to varies in the TikZ code”
Lots of back and
forth for
integrating the
code!
“can you vary the eye of the squid
with the blue color? tell
me what to varies in the TikZ code”
“would it be possible to vary the
original code using a
templating engine in Python in such
a way it is possible to have
either eye of the squid with the blue
color or the original eye
(as in the original TikZ code)? ... can
you parameterize the spots
with a random color? if not random
mode, then it’s the default
color”
Prompts flow: tension
between high-level
specification and
implementation details
Conclusion
LLMs can be leveraged to support end-users in the customization of code and
technical artefacts (customizing TikZ without knowing TikZ?)
Transformation of an undocumented, technical, low-level TikZ into a user-friendly,
configurable, Web-based customization tool written in Python, HTML, CSS, and
JavaScript and itself customizable.
LLMs can support traditional variability engineering tasks, such as identification and
implementation of features, synthesis of a template code generator, and development
of end-user configurators.
The rise and fall of LLMs: many caveats and failures at the different steps!
Future work: thorough evaluation and more robust, automated, end-to-end
customization
Exciting time: democratization of programming and software-related customization! 19
LLM4Code
many open positions at DiverSE
please contact me!
20

A Demonstration of End-User Code Customization Using Generative AI

  • 1.
    A Demonstration ofEnd-User Code Customization Using Generative AI Mathieu Acher @acherm
  • 2.
    Preprint https://hal.science/hal-04312909 https://vamos2024.inf.unibe.ch/cfp/ Presented at 18thInternational Working Conference on Variability Modelling of Software-Intensive Systems (VaMoS 2024) in Bern, Switzerlan 2
  • 3.
    Generative AI andvariability: rising interests! Mathieu Acher and Jabier Martinez. 2023. Generative AI for Reengineering Variants into Software Product Lines: An Experience Report. VariVolution@SPLC 2013 Mathieu Acher, Jean-Marc Jézéquel, and José A. Galindo. 2023. On Programming Variability with Large Language Model-based Assistant. In SPLC 2023 Sandra Greiner, Klaus Schmid, Thorsten Berger, Sebastian Krieter, Kristof Meixner Generative AI And Software Variability – A Research Vision, VaMoS 2024 Galindo et al. Large Language Models to generate meaningful feature model instances, SPLC 2023 3
  • 4.
    LLM Hypothesis: Large languagemodels (LLMs) act as a new variability compiler capable of transforming a high-level specification (“prompt”) into variable code, features, generators, configurable systems, etc. written in a given technological space. Motto: “features as prompts” 4 Mathieu Acher, Jean-Marc Jézéquel, and José A. Galindo. 2023. On Programming Variability with Large Language Model-based Assistant. In SPLC 2023
  • 5.
    LLM “End-user software engineeringfocuses on empowering individuals who are not professional programmers to design, implement, and maintain software applications.“ Two scenarios: ● (1) end-users can implement variability with the assistance of LLMs; ● (2) LLMs can be used to construct specialized, configurable tools for end-users Motto: “features as prompts” 5
  • 6.
  • 7.
  • 8.
    8 What’s this TikZcode is doing? Code understanding
  • 9.
    9 What’s this TikZcode is doing? Code understanding
  • 10.
    10 What’s this TikZcode is doing? Code understanding The level of details is too low, and the explanations are not really actionable, especially for relating code elements to visual aspects.
  • 11.
  • 12.
    12 “can you varythe eye of the squid with the blue color? tell me what to varies in the TikZ code” Feature location To change the color of the squid’s eye to blue, you’ll need to modify the fill commands that define the eye. The lines that define the eye are: fill [Grey50] (64, 16) circle [radius=32]; fill [BlueGrey900] (64, 16) circle [radius=12]; To change the eye color to blue, you can replace the colors ... fill [blue] (64, 16) circle [radius=32]; fill [blue!60!white] (64, 16) circle [radius=12]; ...
  • 13.
    13 “would it bepossible to vary the original code using a templating engine in Python in such a way it is possible to have either eye of the squid with the blue color or the original eye (as in the original TikZ code)? ... can you parameterize the spots with a random color? if not random mode, then it’s the default color” Feature and variation implementation
  • 14.
    14 Combination of features andautomated derivation.
  • 15.
  • 16.
    Here is aTikZ code: tikzset{% cat/.pic={ tikzset{x=3cm/5,y=3cm/5,shift={(0,-1/3)}} useasboundingbox (-1,-1) (1,2); fill [BlueGrey900] (0,-2) .. controls ++(180:3) and ++(0:5/4) .. (-2,0) arc (270:90:1/5) .. controls ++(0:2) and ++(180:11/4) .. (0,-2+2/5); foreach i in {-1,1} scoped[shift={(1/2*i,9/4)}, rotate=45*i]{ clip [overlay] (0, 5/9) ellipse [radius=8/9]; clip [overlay] (0,-5/9) ellipse [radius=8/9]; fill [BlueGrey900] ellipse [radius=1]; clip [overlay] (0, 7/9) ellipse [radius=10/11]; clip [overlay] (0,-7/9) ellipse [radius=10/11]; fill [Purple100] ellipse [radius=1]; }; fill [BlueGrey900] ellipse [x radius=3/4, y radius=2]; fill [BlueGrey100] ellipse [x radius=1/3, y radius=1]; fill [BlueGrey900] (0,15/8) ellipse [x radius=1, y radius=5/6] (0, 8/6) ellipse [x radius=1/2, y radius=1/2] {[shift={(-1/2,-2)}, rotate= 10] ellipse [x radius=1/3, y radius=5/4]} {[shift={( 1/2,-2)}, rotate=-10] ellipse [x radius=1/3, y radius=5/4]}; fill [BlueGrey500] (-1/9,11/8) ellipse [x radius=1/5, y radius=1/5] ( 1/9,11/8) ellipse [x radius=1/5, y radius=1/5]; fill [Purple100] (0,12/8) ellipse [x radius=1/10, y radius=1/5] (0,12/8+1/9) ellipse [x radius=1/5 , y radius=1/10]; foreach i in {-1,1} scoped[shift={(1/2*i,2)}, rotate=35*i]{ clip [overlay] (0, 1/7) ellipse [radius=2/7]; clip [overlay] (0,-1/7) ellipse [radius=2/7]; fill [Yellow50] ellipse [radius=1]; }; scoped{ clip (-1,-2) rectangle ++(2,1); fill [BlueGrey900] (0,-2) ellipse [radius=1/2]; fill [Grey100] (-1/2,-2) ellipse [x radius=1/3, y radius=1/4] ( 1/2,-2) ellipse [x radius=1/3, y radius=1/4]; }; foreach i in {-1,1} foreach j in {-1,0,1} fill [Grey100, shift={(0,11/8)}, xscale=i, rotate=j*15, shift=(0:1/2)] ellipse [x radius=1/3, y radius=1/64]; }, I’d like to change the color of the cat’s tail in red inaccurate feature location or/and incorrect code synthesis is totally possible (even given the same prompt) Feature location: beware!
  • 17.
    To change thecolor of the squid’s eye to blue, you’ll need to modify the fill commands that define the eye. The lines that define the eye are: fill [Grey50] (64, 16) circle [radius=32]; fill [BlueGrey900] (64, 16) circle [radius=12]; To change the eye color to blue, you can replace the colors ... fill [blue] (64, 16) circle [radius=32]; fill [blue!60!white] (64, 16) circle [radius=12];” ... “can you vary the eye of the squid with the blue color? tell me what to varies in the TikZ code” Lots of back and forth for integrating the code!
  • 18.
    “can you varythe eye of the squid with the blue color? tell me what to varies in the TikZ code” “would it be possible to vary the original code using a templating engine in Python in such a way it is possible to have either eye of the squid with the blue color or the original eye (as in the original TikZ code)? ... can you parameterize the spots with a random color? if not random mode, then it’s the default color” Prompts flow: tension between high-level specification and implementation details
  • 19.
    Conclusion LLMs can beleveraged to support end-users in the customization of code and technical artefacts (customizing TikZ without knowing TikZ?) Transformation of an undocumented, technical, low-level TikZ into a user-friendly, configurable, Web-based customization tool written in Python, HTML, CSS, and JavaScript and itself customizable. LLMs can support traditional variability engineering tasks, such as identification and implementation of features, synthesis of a template code generator, and development of end-user configurators. The rise and fall of LLMs: many caveats and failures at the different steps! Future work: thorough evaluation and more robust, automated, end-to-end customization Exciting time: democratization of programming and software-related customization! 19
  • 20.
    LLM4Code many open positionsat DiverSE please contact me! 20