| Table of Contents | ||||
|---|---|---|---|---|
|
Having our agent build HTML
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 (Bootstrap Documentation).
| Note |
|---|
Prolog Advice: To manipulate strings and atoms in Prolog it is useful to look at documentation of the following built-in functions: atomic_list_concat, atom_concat, string_concat, append, and maplist here: https://www.swi-prolog.org/. The predicate applyTemplate is a defined predicate that will be explained below. |
A Quick Prolog Walkthrough
| Info |
|---|
Tip: for the page ‘start’, the prolog code as already been completed. Use this one as an example on how to implement pages. |
Using Prolog rules in the html.pl file
You add a condition that checks for a particular pattern ID to a Prolog rule in the html.pl 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:
...
applyTemplate('Template String with ~a where you want to insert atom', Atom to Insert, Return Variable).
Example Prolog Rule for a Page
| Code Block | ||
|---|---|---|
| ||
page(c10, _, Html) :- % Condition for when to show this page CONDITION X, % Constructing HTML page atomic_list_concat(['<div class="alert alert-light"><center></br><h1>Hello!</br></br>','I am ~a</h1></br></br></center></div>'], Template), % Get the bot's name if it has one; other call it 'your assistant' (agentName(Name) -> N = Name ; N = 'your recipe selection assistant'), applyTemplate(Template, N, Body), % Create the HTML page html(Body, Html). |
A Quick Bootstrap Conceptual Walkthrough
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.
...
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 recipes.pl.
Other Add-ons You Can Try
| Info |
|---|
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. |
Displaying Lists
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.
...
| Code Block |
|---|
itemsList('<ul class="list-group">~a</ul>').
itemsList(List, Html) :-
maplist(listItem, List, Output), atomic_list_concat(Output, String),
itemsList(Template), applyTemplate(Template, String, Html).
listItem(Txt, Html) :- applyTemplate('<li class="list-group-item">~a</li>', Txt, Html). |
Making a Bullet Point List
| Code Block | ||
|---|---|---|
| ||
bulletItem(Item, Html) :- applyTemplate('<li>~a</li>', Item, Html).
bulletList(Items, Html) :-
maplist(bulletItem, Items, ItemsHtml),
atomic_list_concat(ItemsHtml, Bullets),
applyTemplate('<ul>~a</ul>', Bullets, Html). |
Making Buttons
| Code Block | ||
|---|---|---|
| ||
button('<button class="btn btn-light btn-lg m-3" style="font-size:1.5rem">~a</button>').
button(Content, Html) :- button(B), format(atom(Html), B, [Content]). |
Adding a textbox to your page layout for testing purposes
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.
...