...

% A very basic and simple welcoming page to show when a greeting is still ongoing
page(c10, _, Html) :-
	% Part 1: Show this page only when a greeting pattern c10 is ongoing
	currentTopLevel(c10),
	% Part 2: Constructing HTML for the body of the page
	% If the agent has a name (agentName/1 will succeed), 
	% we want the agent to introduce itself with its name
	(agentName(Name) -> N = Name ; N = 'your recipe recommendation assistant'),
	% replace the placeholder ~a with the value of variable N
	applyTemplate('<h1>I am ~a</h1><h1><br></br></br></center>', N, IntroHeading)
    % piece a quoted text and our intro self-introduction text elements together
	atomic_list_concat(['<center><h2>Hello!</h2></br>h2><br>', IntroHeading], AlertContent),
	% put the introductory text HTML as content into an alert component
	div(AlertContent, 'alert alert-light', '', Body),
	% Part 3: page is so simple that there is no second row so nothing to do here
	% Part 4: Create the HTML page using the HTML code unified with the Body variable
	html(Body, Html).

Now suppose that the query currentTopLevel(c10) succeeds. In that case the page(c10, _, Html) query will also succeed (why?). Suppose, moreover, that our conversational agent is called Cookpanion (you think of a good name for your own agent!) and the query agentName(Name) succeeds with Name='Cookpanion'. What HTML code will then be generated (and bound to the Html output argument variable)?

Adding a chatbox 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:

...

To answer this question, you need to understand how the applyTemplate query works (more on that you can find at the end of this page: https://socialrobotics.atlassian.net/wiki/spaces/PM2/pages/2264236033/Visual+Support+Guide#Defining-new-predicates-for-generating-HTML-elements). But for now the comment just above the query will be sufficient to piece things together. We get the HTML code <h1>I am Cookpanion</h1><br></center> that binds to IntroHeading. The atomic_list_concat query add this to the end of the <center><h2>Hello!</h2></br> HTML code, which then is used as the content for the alert class using the div predicate. By inspecting the html/2 predicate (check out the html.pl file) we can then figure out that the resulting HTML code will look like this:

% Next line makes sure (a user is asked to) enable audio interaction via the browser
<div class="audioEnabled"></div>
% A row that we use as header
<div class="row" style="position: static; height: 75px">
  <nav class="navbar mb-1" style="position: static">
    <button class="btn" style="position: fixed; top: 0; left: 0; z-index: 1">
      <img class="img-fluid" style="width:4rem" data-value="Mic" src="data:image/png;base64,MISSING-VERY-LONG-BASE64-CODE-FOR-MIC-ICON>
      <h6></h6>
    </button>
  </nav>
</div>
% Main part of the page
<main class="container-fluid p-3">
% Next three lines represent the code generated by the page(c10,_,Html) predicate
  <div class="alert alert-light" style="">
    <center><h2>Hello!</h2></br><h1>I am Cookpanion</h1><br></center>
  </div>
</main>
% Footer
<footer class="fixed-bottom">
  <p class="lead mb-0 bg-light text-center" style="min-height:0rem">
    <button>End interaction</button>
  </p>
</footer>

Perhaps the code that is generated is a bit surprising and it is hard to locate the (just!) three lines that the page(c10,_,Html) query generates (somewhere in the middle, as main part of the page). The code illustrates that the html/2 predicate also does quite a bit of the work for generating the complete body of our webpage, including the generation of a header and footer, and a line at the top to make sure the browser will allow for audio interaction.

Adding a chatbox to your page layout for testing purposes

You will soon enough learn that using speech as the main interface for interaction can be challenging, adding delays and misunderstandings, depending on factors such as the context where it is used (a noisy environment makes ASR much more challenging and may lead to failures), perhaps the accent of the speaker, and other related factors. For testing purposes, it therefore may be useful to also be able to test without these factors potentially complicating the interaction. To this end, we have made a chatbox element available too which makes text-based interaction available as an alternative to (just) speech-based interaction. To add this element to your webpage, we suggest you add the following HTML code to the footer of pages:

<div class="text-center"><p class="chatbox mx-auto"></p></div>, for example,
to the footer.

We have already added the code for doing this in the html.pl file, but it is still commented out.

Using and Understanding the code in html.pl

...