...
...
| Table of Contents | ||||
|---|---|---|---|---|
|
What are we even doing?
An important facet of our conversational agent is the visuals that accompany it. While it looks a bit complicated it is nothing above basic HTML. We utilize a combination of Prolog, HTML and bootstrap to generate these dynamic webpages. Prolog rules are how we add a condition to a webpage i.e. this webpage is shown when Clause X is true. Within this same rule we generate our HTML code. The HTML code is treated as an atom, essentially a string, that we manipulate with Prolog and return with the rule. The HTML code is done in bootstrap format which is clearly depicted in 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 the functionalities of the following functions: atomic_list_concat, atom_concat, string_concat, append, maplist, applyTemplate(will be explained) |
...
| 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.
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:
| Code Block |
|---|
A chatbox can be added for using text instead of speech for input by adding
<div class="text-center"><p class="chatbox mx-auto"></p></div>, for example,
to the footer. |