Visual Support: Instructions

STOP: If you have not read the Visual Support: A Guide DO THAT FIRST.

We provide a basic outline in html.pl and some completed pages. If you fill in the holes we provide you with, it will give you very basic visuals. Completing this will already get you a sufficient grade. Thus, this will be a very creative task, and we ask that you implement what you think would visually support your agent or just look pretty. Let's get started!

Start by going to html.pl in your agent project.

A lot of the instructions on this page are also part of the html.pl file as comments.

The file is organized as follows:

Page layouts (the order of pages listed below matters!).
Code for HTML generation.
Some Helper predicates.

There are 6 specific pages that you have to have as a minimum to successfully complete the project:

Start page
Greeting/Opening Page associated with pattern c10 (see also Pattern and Responses: Instructions).
First Page for Recipe Selection (associated with pattern a50recipeSelect).
Second Page for Recipe Selection (associated with pattern a50recipeSelect).
Recipe Confirmation Page associated with pattern a50recipeConfirm.
Closing Page associated with pattern c40.

Start Page

page(start, _, Html)

This rule serves as an example of how you can create a page using Prolog, HTML, and Bootstrap. You can find more information on how to code such rules in the Visual Support: A Guide.

This page should contain instructions for how to talk with your agent and a start button. We have left some spots for you to fill in your instructions. You can use these slots, but you can also design your own start page. The start page, however, does need to meet some requirements which are mentioned in the User Study section. As a start, put something useful here for your team members. What exactly to put on this page will get clearer towards the end of the project, once you have a working agent, and should be completed at that time. So make sure to revise this page again later during the project!

Opening Page (visuals for the c10 pattern)

When a user has visited the Start Page and clicked on the start button, your agent should start talking. The head page(c10, _, Html) for the rule you need to complete has been provided. This page should show your agent’s greeting, and introduce your agent by saying its name!

Consider the condition that needs to succeed when you generate this page (Hint: look at the start page rule body and how the first parameter of the page/3 predicate is used in that rule).
Think about what you want to be on this page. It needs somewhere to show text to introduce your agent. For this, you can use a card or an alert, for example. This will be the first atom in your HTML code that we use in Step 3. The second atom should be HTML code with text(formatted) to introduce your agent, i.e. what you want to go on your alert or card. This atom needs to be able to add a variable later (the bot's name) read the Visual Support: A Guide for hints on how to do that.
Use a predicate to combine the first atom and second atom you created in the previous step (check out the Visuals Guide for how to do this). What we created in HTML above is our template, thus the predicate should return the variable Template.
Now we need to get the agent's name in order to add it to our text. This knowledge should be somewhere in the agent's memory. Hint: Look at line 40 in dialog_init for the applicable predicate. Retrieve the name of the agent in a variable.
Next, you should use the applyTemplate/3 predicate to add the agent’s name to our HTML code atom (which is also explained in the Visual Support Guide).
Lastly, you should use the last variable that you used in the applyTemplate/3 predicate and use the html/2 predicate to convert your code snippet into a completed HTML page. This can be done by using html(YourCompleteHTMLCodeVariableHere, Html). Html is the variable that returns the page as you can see in the head of the rule.

To test, go to dialog_init on line 24, put c10 into the agenda, and run your agent. The line should look like this: insert(agenda([c10])). Note that unless the corresponding c10 pattern and response are also completed in the pattern.pl and reponses.pl your code will not yet work. Therefore, check with your team members to make sure that they are done with that part.

The First Recipe Selection Page (visuals for the a50recipeSelect pattern)

Most of the rules that you need to complete in the html.pl file for this page has already been provided to you. All you still need to do is specify the conditions to show this page. This page should be shown when there is still a long list of recipes that match with the requests made thus far by a user. For now, as a start, show this page when the number of filtered recipes is still above 15 and the user is still trying to reduce the list (which is implemented by the a50recipeSelect pattern).

Add a condition that says we should be at the a50recipeSelect step in order to show this page.
Now we need to fetch a list of IDs of the filtered recipes and save that variable as Recipes. There is already a predicate defined that can do this for you somewhere in the bot’s code.
Measure the length of the list of Recipes. The length should be saved as N (so it matches with the variable naming later in the rule)
Add a condition that makes sure N is above 15

The Second Recipe Selection Page (visuals for a50recipeSelect pattern)

Most of the rule that you need to complete for this page has already been provided to you. All you need to do is to specify the conditions for when to show this page. This page should be shown if the number of filtered recipes is below or equal to 15 or 0 and if the user is still trying to select a recipe.

Add a condition that says we should be at the a50recipeSelect step in order to show this page.
Fetch the list of the IDs of the filtered recipes and name that variable Recipes
Measure the length of the recipe list, and save that variable as N
The final condition should be as follows: ( your count constraint or memoryKeyValue('show', 'true') )

To test, go to dialog_init on line 24, add a50recipeSelect into the agenda, and run your agent. The line should look like this: insert(agenda([a50recipeSelect ])). Note again that unless the corresponding a50recipeSelect pattern and associated responses have been completed in the pattern.pl and reponses.pl, your code will not yet work. Check with your teammates to make sure they are done with their part.

Recipe Confirmation Page (visuals for the a50 pattern)

On this page, we are confirming the user’s choice of recipe. In order to do that, we need to extract certain information about the recipe from the recipe database that is available in recipe_database.pl.

Make sure this page is shown at the right time.
Retrieve the following information by putting the appropriate predicates in the places indicated in the rule by comments and by using the variable names indicated below.
1. We need to retrieve the chosen recipe from memory. Find the necessary predicate and name that variable Recipe.
2. The previous step retrieves the Recipe ID, but we also need the recipe name. Use a variable called Name for this.
3. Retrieve the time needed to complete the recipe in a variable named Minutes.
4. Retrieve the number of servings in a variable called Persons.
To retrieve a list of the recipe steps and a list of ingredients, you will need to implement two additional predicates in recipe_selection.pl. The predicates that we need to implement can be found in the recipe_selection.pl file and are labeled with the comment %For Visual Support to-do
1. This first is a rule that returns a list of ingredients ingredients(RecipeID, IngredientList) :-
  1. Find a built-in Prolog predicate (part of the Prolog language) that you can use for returning a set of ingredients that match a specific goal (i.e. the recipe we are looking at). This predicate should take (a list, check elements in the list for compliance with a condition (goal of filtering), then return a list of the elements that comply). When you find the predicate be sure to read what arguments it takes in the Prolog documentation. You can Google or look here https://www.swi-prolog.org/.
  2. In the database find the predicate that is used to store ingredient information.
  3. Now that we have found the necessary predicate we need to define the “goal”, i.e. the condition an ingredient has to fulfill to be added to the set. We only want ingredients for a recipe with a certain RecipeID. We will use the predicate in Step 3(a)(i) to retrieve a set of ingredients(list without repetition). We want to output a list of ingredients(List) by inputting all available ingredient information(Information) where the inputted recipe ID(RecipeID) and Information match with the arguments in a predicate with ingredient information found in the database. Those that match should be returned in a List which is outputted by the rule as IngredientList.
    1. To simplify the condition you can use the caret(^) in Prolog by defining your goal/ condition in the set predicate with the following syntax:

RecipeID^(databaseIngredientPredicate(RecipeID, inputted Information variable to be filtered))

Find another built-in Prolog predicate to retrieve a list of the recipe steps without changing their order. There is no repetition, so this predicate does not need to remove duplicates (as in the previous step).
Your rule for retrieving the steps needs to use the accompanying rule getStepString in your goal of the built-in Prolog predicate, so your goal should look as follows: RecipeID^getStepString(RecipeID, Step).
Go back to html.pl and to a50recipeConfirm
1. Save the recipe steps as Steps
2. Save the list of ingredients as Ingredients
Figure out a way to add the recipe picture to this page wherever you would like. You will have to look around or at some bootstrap documentation to complete this step.

Note that unless the corresponding a50recipeConfirm pattern and responses are done in pattern.pl and reponses.pl your code will not work. Check with your team members to make sure they are done with their part.

Closing Page (visuals for the c40 pattern)

Close the session nicely.

To test, go to dialog_init on line 24, put c40 into the agenda, and run your agent. The line should look like this: insert(agenda([c40])). Note that unless the corresponding c40 pattern and response are done in pattern.pl and reponses.pl your code will not yet work. Check with your team members to make sure they are done with their part.

Visual Support Extensions

If you fill in all the blanks described on this instruction page, the visuals will function, but they are not yet very supportive nor very pretty. If you have done this right, however, it will already give you a pass for the project (assuming other parts work well too!). If you would like to go for a higher grade, you will need to get more creative. Consider how you can redesign and extend the pages that you created above. Think about what will support your users and what will improve user experience. Try and make it visually appealing (though of course, that is subjective!). You can use the material in the visual support guide or any other documentation that you can find. Remember though that the visuals should support the conversation, not the other way around! Good luck!