Automatická tvorba skriptovaného GUI s využitím umelej inteligencie

1. Automatická tvorba skriptovaného GUI s využitím umelej inteligencie Michal Širochman

2. Úvod • Grafický toolkit • Gtk+ • Perl / Gtk3 modul a jeho API • Tvorba AItk modulu a jeho API • Návrh evolučného algoritmu • Experimenty • Záver

3. Graphical Toolkit • Sada nástrojov pre tvorbu grafického rozhrania • Základný stavebný prvok zvykne byť widget • Reťazením widgetov vzniká vzhľad aplikácie • Okno – widget schopný obsiahnuť istý počet ďalších widgetov (nazýva sa kontajner) • Tlačidlo – widget plniaci rolu aktívneho prvku grafického rozhrania aplikácie

4. Gtk+ • Grafický toolkit • Vznikol pri písaní aplikácie GIMP • Pre fungovanie potrebuje len sadu svojich knižníc, narozdiel od konkurentov Základná architektúra Gtk+

5. Perl • Jazyk vyššej úrovne • CPAN – gigantická databáza balíkov pre Perl, poskytujúca rozšírenú funkcionalitu • Modulárny, ľahko modifikovateľná syntax • Prístup ku Gtk+ API pomocou modulu Gtk3 • Hlavným komponentom je modul Glib-Object-Introspection, ktorý dynamicky vytvára konekcie priamo ku funkciám v knižniciach Gtk+

6. my $checkbox1 = Gtk3::CheckButton->new_with_label (’Editable’); $checkbox1->signal_connect (toggled => \&toggle_checkbox, "editable"); $checkbox1->set_active (1); $hbox->pack_start ($checkbox1, 1, 1, 0); my $checkbox2 = Gtk3::CheckButton->new_with_label ("Visible"); $checkbox2->signal_connect (toggled => \&toggle_checkbox, "visible"); $checkbox2->set_active (1); $hbox->pack_start ($checkbox2, 1, 1, 0); my $checkbox3 = Gtk3::CheckButton->new_with_label ("Icon"); $checkbox3->signal_connect (toggled => \&toggle_checkbox, "icon"); $checkbox3->set_active (0); $hbox->pack_start ($checkbox3, 1, 1, 0); Kód vytvorený pomocou Perl Gtk3 modulu Definícia CheckButton widgetov, spolu s funkciou, ktorú vykonávajú, a ich priradením do Box widgetu.

7. AItk • Artificial Intelligence toolkit • Nadstavba pre Perl Gtk3 modul • Implementácia jednoduchej a dobre čitateľnej syntaxe (skriptovanie, samodokumentácia) • Prednastavenie niektorých vlastností widgetov • Podporné mechanizmy pre spracovanie už zadefinovaných widgetov

8. checkbox my $checkbox1, "Editable", \&toggle_checkbox, "editable"; checkbox my $checkbox2, "Visible", \&toggle_checkbox, "visible"; checkbox my $checkbox3, "Icon", \&toggle_checkbox, "icon"; active $checkbox1, $checkbox2; inactive $checkbox3; pack $hbox, $checkbox1, $checkbox2, $checkbox3; Kód vytvorený pomocou Aitk modulu Definícia CheckButton widgetov, spolu s funkciou, ktorú vykonávajú, a ich priradením do Box widgetu.

9. ### GtkButton ### sub button (\$;$$@) { my $button = shift; my ($name, $code, @params); $name = shift if (!ref $_[0]); $code = shift if (ref $_[0] eq ’CODE’); @params = @_ if (scalar @_); $$button = Gtk3::Button->new ($name); $$button->signal_connect ( clicked => $code, @params ) if $code; insert_element($button); } Prototypovaná funkcia Príjem a ošetrenie vstupu Volanie Gtk3 modulu Vloženie widgetu do %Aitk hashu Aitk implementácia widgetu GtkButton Pomocou prototypov sa dosiahne funkcia s povinnými aj nepovinnými argumentami, ktorá pri volaní vyzerá ako zabudovaná Perl funkcia.

10. Podporný mechanizmus pre prostriedky UI our %AItk; our $ID = 0; our $window = ’’; our $class = ’’; # insert element & his properties into %AItk sub insert_element { my $element = shift; my %properties = ( class => $class, window => $window, content => $element, type => type($element) ); $AItk{$ID} = %properties; $ID++; } # window window my $window, 'Test Window'; $AItk::window = $window; ### Home page { local $AItk::class = 'home page'; button my $cat, 'cat'; button my $copy, 'copy'; button my $b, 'B'; button my $i, 'I'; button my $u, 'U'; spin my $spin, 0, 72, 1, 12; } Deklarácia Aitk premenných Atribúty widgetu a vklad do %AItk Funkcia zbierajúca údaje o zadefinovaných widgetov do %Aitk Definícia widgetov triedy ‘home page’

11. Evolučný Algoritmus • Reprezentácia jedinca je n-árny strom • Koreňom je GtkWindow (okno) • Listami sú widgety, plniace úlohu aktívnych prvkov • Zvyšné nódy stromu tvoria kontajnery • Genetickým operátorom je mutácia • Vhodnosť jedinca je súčet rozmerov okna

12. Názorná ukážka štruktúry jedinca Možná reprezentácia jedinca. Koreňom je kontajner Window, jeho potomkom je kontajner Box s horizontálnym rozložením widgetov. Ten obsahuje ďalšie 2 horizontálne boxy, ktoré obratom obsahujú po 4 aktívne widgety každý.

13. Náhodne inicializovaný jedinec Príklad inicializovaného jedinca evolučného algoritmu. Veľmi jasne vidno množstvo nedostatočne využitej plochy, ako aj nadmerné naťahovanie jednotlivých widgetov.

14. Najlepší jedinec poslednej generácie Tento jedinec má nastavené fill aj expand atribúty pre widgety pridávané do kontajnerov funkciou pack. Rozloženie tlačidiel pripomína tradičné rozloženie po 2 okrajoch, avšak používa pravý a dolný okraj namiesto horného a ľavého/pravého.

15. Najlepší jedinec poslednej generácie Tento jedinec nemá nastavené fill a expand atribúty, čo sa odráža na kompaktnejšom vzhľade. Pôsobí celkom elegantne, rozložením tlačidiel po stranách, nechávajuc veľké miesto pre text. Oddelenie tlačidiel na spodnej strane pomocou menu baru je síce netradičné, zato však pôsobí dojmom, že nikam inam nepatrí.

16. Zhodnotenie • Skrátenie, zjednodušenie zápisu • Samodokumentujúci kód • Ľahko manipulovateľné prostredie • Výsledok je najmä implementačne závislý • Posun od nepriamej modifikácie pomocou XML ku priamej úprave widgetov • Malý počet implementovaných widgetov • Zjednodušené názvy funkcií môžu prepísať užívateľove alebo zabudované Perl funkcie • Neimplementovaný framework pre definíciu prednastavených hodnôt ešte pred volaním funkcie • Potreba rozšíriť insert_element funkciu o ďalšie atribúty, a aby zvládala viac okien