{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"1"},"maxLevel":{"value":"7"}},"macroMetadata":{"macroId":{"value":"a9829adcb51af383d419d88c6e98ccc3"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"070e9dfc-8863-42bc-856e-6a035525117f"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Having our agent build HTML","type":"text"}]},{"type":"paragraph","content":[{"text":"An important facet of our conversational agent is the visual support. While the way in which visuals are modelled in the agent may look complicated, there is nothing that goes far beyond basic HTML. We utilize a combination of Prolog, HTML and Bootstrap to generate dynamic webpages. Prolog rules are used to add a condition to a webpage (i.e. webpage X is shown when Clause Y is true). By means of these Prolog rules, we generate our HTML code. The HTML code is treated as a Prolog atom, essentially a string, that we manipulate with Prolog and generate with the rule. The HTML code is represented in Bootstrap format, which is also clearly illustrated by examples below or on Bootstrap's documentation website (","type":"text"},{"text":"Bootstrap Documentation","type":"text","marks":[{"type":"link","attrs":{"href":"https://getbootstrap.com/docs/4.6/components/card/"}}]},{"text":").","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"Prolog Advice:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]},{"text":" To manipulate strings and atoms in Prolog it is useful to look at documentation of the following built-in functions: ","type":"text"},{"text":"atomic_list_concat","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":", ","type":"text"},{"text":"atom_concat","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":", ","type":"text"},{"text":"string_concat","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":", ","type":"text"},{"text":"append","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":", and ","type":"text"},{"text":"maplist ","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":"here: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://www.swi-prolog.org/"}},{"text":". The predicate ","type":"text"},{"text":"applyTemplate","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":" is a defined predicate that ","type":"text"},{"text":"will be explained below","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text","marks":[{"type":"strong"},{"type":"em"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"A Quick Prolog Walkthrough","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Tip: for the page ‘start’, the prolog code as already been completed. Use this one as an example on how to implement pages. ","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Using Prolog rules in the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file","type":"text"}]},{"type":"paragraph","content":[{"text":"You add a condition that checks for a particular pattern ID to a Prolog rule in the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file. Other simple conditions that you can add involve counting the number of recipes that are still available while in the recipe selection phase, etc. The general form of the page lay-out rules would be something like:","type":"text"}]},{"type":"codeBlock","content":[{"text":"myPage(Txt, Button, Html) :-\n , \n % e.g. while recipe is being selected (check for e.g. currently active top level pattern id), we'll display recipe features\n % below code that specifies the page layout for this context\n applyTemplate('

, Text, Html),\n …\n .","type":"text"}]},{"type":"paragraph","content":[{"text":"There are still many options to vary. For example, you can choose the parameters for the ","type":"text"},{"text":"myPage","type":"text","marks":[{"type":"code"}]},{"text":" predicate that fit your approach best.","type":"text"}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"applyTemplate('Template String with ~a where you want to insert atom', Atom to Insert, Return Variable).","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Example Prolog Rule for a Page","type":"text"}]},{"type":"codeBlock","marks":[{"type":"breakout","attrs":{"mode":"full-width"}}],"content":[{"text":"page(c10, _, Html) :-\n\t% Condition for when to show this page\n\tCONDITION X,\n\t% Constructing HTML page\n\tatomic_list_concat(['

Hello!

','I am ~a

'], Template),\n\t% Get the bot's name if it has one; other call it 'your assistant'\n\t(agentName(Name) -> N = Name ; N = 'your recipe selection assistant'), applyTemplate(Template, N, Body),\n\t% Create the HTML page\n\thtml(Body, Html).","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"A Quick Bootstrap Conceptual Walkthrough","type":"text"}]},{"type":"paragraph","content":[{"text":"Bootstrap is a useful framework for working out a display, but may not be so intuitive in combination with Prolog. We provide a short walkthrough here to explain things for you. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Let’s consider you would like to display a certain lay-out with three images side-by-side. The first step you would take is to check whether such a lay-out is specified in Bootstrap. ","type":"text"},{"text":"‘Card decks’","type":"text","marks":[{"type":"link","attrs":{"href":"https://getbootstrap.com/docs/4.1/components/card/#card-decks"}}]},{"text":" might be a nice option, so we first look into the code that is involved:","type":"text"}]},{"type":"codeBlock","content":[{"text":"

\n $\"Card$ \n

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

\n $\"Card$ \n

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

\n $\"Card$ \n

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

","type":"text"}]},{"type":"paragraph","content":[{"text":"What we want to achieve, is to render a page with the HTML code, but with a dynamic input of images. The trick is to break this down into fragments. First, we want to render a given image. In the HTML, we see that each of the three images are defined as separate cards. We will now use Prolog to generate the HTML for such a card, using a given picture URL. The aim is to connect in a single string the static HTML code and the image URL (which differs according to the context of the conversation). Let’s work with the good old Pasta Aglio URL for this example. We will define a predicate ‘imgCard’, with an arity of 1 and an arity of 2. We will give it once as a fact, specifying the HTML code:","type":"text"}]},{"type":"codeBlock","content":[{"text":"imgCard('

$\"Card$

').","type":"text"}]},{"type":"paragraph","content":[{"text":"Note that the HTML is copied, with a replacement of the contents of ‘src’, in the form of ‘~a’ which is a placeholder for the image URL. This is needed in order to dynamically add this information. We will do this with the following rule:","type":"text"}]},{"type":"codeBlock","content":[{"text":"imgCard(Image, Html) :- imgCard(I), format(atom(Html), I, [Image]). ","type":"text"}]},{"type":"paragraph","content":[{"text":"In this rule, the ","type":"text"},{"text":"Image ","type":"text","marks":[{"type":"code"}]},{"text":"variable is the input and holds the URL of the image, whereas the ","type":"text"},{"text":"Html ","type":"text","marks":[{"type":"code"}]},{"text":"variable is the output HTML code for this card. In the body of the rule, the ","type":"text"},{"text":"imgCard/1","type":"text","marks":[{"type":"code"}]},{"text":" is queried to retrieve the HTML code that we already specified. Then, the URL is placed at the location with `~a' in this HTML code (in the ","type":"text"},{"text":"Image","type":"text","marks":[{"type":"code"}]},{"text":" variable), using the ","type":"text"},{"text":"format/3","type":"text","marks":[{"type":"code"}]},{"text":" predicate. ","type":"text"}]},{"type":"paragraph","content":[{"text":"We can now use the imgCard term to render each of the three images. For the complete display, we will combine them in the broader ‘card-deck’ option, like in the example HTML we got from bootstrap. We will do this using a self-defined Prolog term, with as input the text, button text and the three images, and as output the HTML code to render. Within this term, we will start specifying the main template, and then collect the images:","type":"text"}]},{"type":"codeBlock","content":[{"text":"myThreeImagesPage(Txt, Button, Image1, Image2, Image3, Html) :-\n Template='

',\n imgCard(Image1,I), imgCard(Image2,I2), imgCard(Image1,I3), \n atom_concat(I,I2,II), atom_concat(II,I3,III), \n format(atom(Card), Template, [III]), html(Card, Html).","type":"text"}]},{"type":"paragraph","content":[{"text":"Note that atom_concat is used to append the different HTML snippets for each of the images. Format is then used to plug in the HTML code where the `~a' has been specified in the Template variable (as was done for the imgCard). ","type":"text"}]},{"type":"paragraph","content":[{"text":"The current term will display three given images on the screen. Of course, you need to make sure that the right image URLs can be displayed during the conversation, which you can do using Prolog facts in ","type":"text"},{"text":"recipes.pl","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Other Add-ons You Can Try","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Note that these add-ons use variable names, and functions from our version of the code, and may not align with the names you use. Make sure everything matches up properly! These are just examples, you can add anything your heart desires.","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Displaying Lists","type":"text"}]},{"type":"paragraph","content":[{"text":"Displaying lists on a screen is a practical feature when dealing with recipe selection and ingredients / utensils per recipe. Hereby some pointers on how to make this possible. ","type":"text"}]},{"type":"paragraph","content":[{"text":"The first step is again to look for the proper template. The bootstrap ","type":"text"},{"text":"list-groups","type":"text","marks":[{"type":"link","attrs":{"href":"https://getbootstrap.com/docs/4.1/components/card/#list-groups"}}]},{"text":" template would make a good candidate here:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

","type":"text"}]},{"type":"paragraph","content":[{"text":"The goal here is to render the HTML code with a list of ingredients / recipes / … as input. We will again break it down, starting with specifying the list items:","type":"text"}]},{"type":"codeBlock","content":[{"text":"myListItem('

').\nmyListItem(Txt, Html) :- myListItem(T), format(atom(Html), T, [Txt]).","type":"text"}]},{"type":"paragraph","content":[{"text":"The way this is defined will look familiar to you, but how are these list items combined based in a Prolog list? We will add another term for this, ‘myList/2', with as first variable the list of terms, and as second variable the HTML output:","type":"text"}]},{"type":"codeBlock","content":[{"text":"myList('

~a').\nmyList(List, Html) :- maplist(myListItem, List, Output), atomic_list_concat(Output, String),\n myList(T), format(atom(Html), T, [String]).","type":"text"}]},{"type":"codeBlock","content":[{"text":"myMaplist(_,[],[]).\nmyMaplist(P,[A|As],[B|Bs]) :- call(P,A,B),maplist(P,As,Bs).","type":"text"}]},{"type":"paragraph","content":[{"text":"An alternative method is to use the built-in list group item in bootstrap, define each item then add them to a list. ","type":"text"}]},{"type":"codeBlock","content":[{"text":"itemsList('

~a').\n\nitemsList(List, Html) :-\nmaplist(listItem, List, Output), atomic_list_concat(Output, String),\nitemsList(Template), applyTemplate(Template, String, Html).\n\nlistItem(Txt, Html) :- applyTemplate('

', Txt, Html).","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Making a Bullet Point List","type":"text"}]},{"type":"codeBlock","attrs":{"language":"prolog"},"content":[{"text":"bulletItem(Item, Html) :- applyTemplate('

', Item, Html).\n\nbulletList(Items, Html) :-\nmaplist(bulletItem, Items, ItemsHtml),\natomic_list_concat(ItemsHtml, Bullets),\napplyTemplate('

~a', Bullets, Html).","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Making Buttons","type":"text"}]},{"type":"codeBlock","attrs":{"language":"prolog"},"content":[{"text":"button('').\n\nbutton(Content, Html) :- button(B), format(atom(Html), B, [Content]).","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Adding a textbox to your page layout for testing purposes","type":"text"}]},{"type":"paragraph","content":[{"text":"The speech interface is fitting to the context of a user in a kitchen, but not always feasible for testing. It may take additional time for the system to process speech input, you may be in a noisy environment, and there may be speech recognition failures. Hereby a pointer to easily enable a textbox to be rendered for input.","type":"text"}]},{"type":"paragraph","content":[{"text":"In the ‘html.pl’ file, where you format the pages to render during the conversation, for each of the pages that you may display at any point in the conversation add the following code:","type":"text"}]},{"type":"codeBlock","content":[{"text":"A chatbox can be added for using text instead of speech for input by adding\n

, for example,\nto the footer.","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]}],"version":1}

Hello!','I am ~a

Card title

Card title

Card title

Hello!

','I am ~a

Visual Support: A Guide