{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"1"},"maxLevel":{"value":"6"},"outline":{"value":"false"},"type":{"value":"list"},"printable":{"value":"false"}},"macroMetadata":{"macroId":{"value":"4fa13803-fb08-4878-8005-ea9116762627"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"c447f9b4-12c2-4738-9a75-25e955332e12"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"Dialogflow","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}}]}]},{"type":"paragraph","content":[{"text":"Do you want to get to know a very cool Google Cloud tool, and like to optimize your conversational agent’s understanding of what a user says? You will create intents with training phrases, and entities in order to provide your agent with the vocabulary and natural language understanding capabilities it needs to converse about the recipes it will be able to recommend. What is important to know for this project is that Dialogflow provides the core Natural Language Understanding (NLU) capabilities that your conversational agent will use to interact with its users. NLU here means that user utterances are ","type":"text"},{"text":"transcribed into text","type":"text","marks":[{"type":"em"}]},{"text":", these texts are classified into ","type":"text"},{"text":"intents","type":"text","marks":[{"type":"em"}]},{"text":", and the things a user talks about and are useful for recommending recipes are extracted from that text using so-called ","type":"text"},{"text":"entities","type":"text","marks":[{"type":"em"}]},{"text":". The ","type":"text"},{"text":"Dialogflow agent","type":"text","marks":[{"type":"em"}]},{"text":" that you will create thus is an ","type":"text"},{"text":"NLU agent","type":"text","marks":[{"type":"em"}]},{"text":". It will be connected to a ","type":"text"},{"text":"MARBEL agent","type":"text","marks":[{"type":"em"}]},{"text":" which receives the transcripts, intents, and entities from the Dialogflow agent. The MARBEL agent uses the information extracted by the Dialogflow agent to manage the dialog with a user, using conversational patterns to structure the interaction (see below). The MARBEL agent thus is a ","type":"text"},{"text":"dialog manager","type":"text","marks":[{"type":"em"}]},{"text":". We have provided you with a simple MARBEL agent to get started. The first thing you need to do is create your own team’s Dialogflow agent. One of your team members should create such an agent and share it with the other team members. Your team only needs ","type":"text"},{"text":"one","type":"text","marks":[{"type":"em"}]},{"text":" Dialogflow agent!","type":"text"}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":33.33},"content":[{"type":"paragraph","content":[{"text":"1: Create a Dialogflow agent","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"layoutColumn","attrs":{"width":66.66},"content":[{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Please follow the instructions here: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://cloud.google.com/dialogflow/es/docs/quick/build-agent#create-an-agent"}},{"text":".","type":"text"}]}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"Only one team member needs to do this","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"You need a Google account for this.","type":"text"}]},{"type":"paragraph","content":[{"text":"Just provide a ","type":"text"},{"text":"name","type":"text","marks":[{"type":"strong"}]},{"text":" for your Dialogflow agent. You do ","type":"text"},{"text":"not","type":"text","marks":[{"type":"strong"}]},{"text":" need to change any other settings (you will use the default English language).","type":"text"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Share the Dialogflow agent with your other team members (assign them the Developer role): ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://cloud.google.com/dialogflow/es/docs/access-control"}},{"text":".","type":"text"}]}]}]}]}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":33.33},"content":[{"type":"paragraph","content":[{"text":"2: Connect it to the MARBEL agent","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"layoutColumn","attrs":{"width":66.66},"content":[{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create and ","type":"text"},{"text":"download ","type":"text","marks":[{"type":"strong"}]},{"text":"your Dialogflow agent’s JSON key file by following the instructions here: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://cloud.google.com/iam/docs/creating-managing-service-account-keys#get-key"}},{"text":". Note that you will have to ","type":"text"},{"text":"create a service account","type":"text","marks":[{"type":"em"}]},{"text":" for the project (button at the top under the blue bar). When you have done this, you can click on the email for the service account. ","type":"text"},{"text":"Note that the JSON file is automatically downloaded when it is created.","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"One of you should add the JSON key file to your team’s Git repository in the agent folder of that repository and everyone should pull to update their local versions.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Retrieve the ","type":"text"},{"text":"Project ID","type":"text","marks":[{"type":"em"}]},{"text":" of your Dialogflow agent: you can find this by clicking on the settings (cogwheel) icon next to your Dialogflow agent’s name here: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://dialogflow.cloud.google.com/"}},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Open the ","type":"text"},{"text":".mas2g","type":"text","marks":[{"type":"code"}]},{"text":" file in Eclipse. Then (1) add the name of the JSON key file as the value of the ","type":"text"},{"text":"flowkey","type":"text","marks":[{"type":"code"}]},{"text":" environment initialization parameter to the mas file, and (2) the Project ID of your Dialogflow agent as the value of the ","type":"text"},{"text":"flowagent","type":"text","marks":[{"type":"code"}]},{"text":" parameter.","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Run the code!","type":"text"}]},{"type":"paragraph","content":[{"text":"You now should be able to run the code. Try it by following the instructions here: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://socialrobotics.atlassian.net/wiki/spaces/PM2/pages/2707915479"}},{"text":". What do you see? Why are you seeing this? Inspect the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file to understand what has happened.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"A Pattern to Get Started","type":"text","marks":[{"type":"textColor","attrs":{"color":"#4c9aff"}}]}]},{"type":"paragraph","content":[{"text":"The dialog manager agent uses an ","type":"text"},{"text":"agenda ","type":"text","marks":[{"type":"em"}]},{"text":"to structure the conversation with a user. An agenda consists of one or more conversational patterns; conversational patterns are templates for small sub-dialogs or mini-dialogs that can be viewed as building blocks to create a larger dialog or conversation. By inspecting this agenda, the agent can figure out what it should do and in what order things should be handled in the conversation. The agenda is managed by a MARBEL agent, which implements the dialog manager. There already is some code for initializing the agenda in the ","type":"text"},{"text":"dialog_init.mod2g","type":"text","marks":[{"type":"code"}]},{"text":" module. Open this file and navigate to the code line where the agenda is inserted into the agent’s database (state). As you can see, the agenda in the agent we provided to you as a starting point is still empty (it is the empty list ","type":"text"},{"text":"[]","type":"text","marks":[{"type":"code"}]},{"text":"). We will use some of the patterns that we will create in the project to define the agent’s agenda by adding them to the list. To get started, we need to add something already to the agenda. We can use the ","type":"text"},{"text":"start","type":"text","marks":[{"type":"code"}]},{"text":" pattern for this which has already been defined in the ","type":"text"},{"text":"patterns.pl","type":"text","marks":[{"type":"code"}]},{"text":" file (check it out). This pattern just waits for the user to click a button on the screen. Below we will create such a screen where a user can click a start button to initiate the interaction. For now, let’s just add the ","type":"text"},{"text":"start","type":"text","marks":[{"type":"code"}]},{"text":" pattern to the agent’s agenda:","type":"text"}]},{"type":"panel","attrs":{"panelIconId":"atlassian-note","panelIcon":":note:","panelColor":"#F4F5F7","panelType":"custom"},"content":[{"type":"paragraph","content":[{"text":"In the ","type":"text"},{"text":"dialog_init","type":"text","marks":[{"type":"code"}]},{"text":" module, locate the line with ","type":"text"},{"text":"insert(agenda([]))","type":"text","marks":[{"type":"code"}]},{"text":" and replace that with ","type":"text"},{"text":"insert(agenda([start]))","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Visuals","type":"text","marks":[{"type":"textColor","attrs":{"color":"#36b37e"}}]}]},{"type":"paragraph","content":[{"text":"The conversational agent that we will create not only talks but also shows things using dynamic web pages that are displayed on a screen. These dynamic web pages will provide the user with some additional visual support to be able to keep track of some of the things that happened in the conversation. We want the agent, for example, to display information about where we are at in the conversation by, for example, displaying subtitles that refer to different parts (conversational patterns) of the conversation. We will also want the agent to display the preferences for or constraints on recipes that have already been added by the user and show how many recipes still fit those preferences. This will help the user understand what the agent is doing and help them remember which preferences they already indicated to the agent.","type":"text"}]},{"type":"paragraph","content":[{"text":"The instructions that we will give you will guide you on how to implement quite a basic visual design. Thereafter it is up to you to make things look better and make additional design choices of your own. Creating the basic visual design should not require too much effort and should leave you with plenty of opportunity and time to extend and experiment with your own visual design choices!","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":228,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":540,"id":"d6fd0f8e-1a45-4a8c-9fb4-352a1bfc8b8d","collection":"contentId-2707914875","type":"file","height":540}}]},{"type":"paragraph","content":[{"text":"The code for generating HTML is provided in the Prolog ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file that is part of your MARBEL agent project. Open this file to inspect it. When you scroll through the file, you can see that the file is organized into four parts:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Page layouts","type":"text","marks":[{"type":"em"}]},{"text":": Here you should put all the code for the various webpage designs that are introduced with the capabilities you need to implement. You should add code for the start screen right at the top of this part of the file. The place to put this code is already indicated by a code comment for your convenience.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Code for generating HTML elements","type":"text","marks":[{"type":"em"}]},{"text":": This part provides Prolog definitions for generating elements of an HTML page. One of the first rules in this section defines the ","type":"text"},{"text":"button(Content, Html)","type":"text","marks":[{"type":"code"}]},{"text":" predicate. The clause defining this predicate first collects some template code for creating a simple button element in HTML (the template sits right above the defining clause in the file) and then applies this template using the ","type":"text"},{"text":"Content","type":"text","marks":[{"type":"code"}]},{"text":" parameter to generate a button that says whatever you put in ","type":"text"},{"text":"Content","type":"text","marks":[{"type":"code"}]},{"text":". We will use this predicate to add a button on our start page below! As you can see in the file, there are predicates for adding several other types of content to the HTML page, including, for example, lists of items, and images. To better understand the definitions in the html.pl file, and for more background on how to create HTML code using Bootstrap read the","type":"text"},{"type":"inlineCard","attrs":{"url":"https://socialrobotics.atlassian.net/wiki/spaces/PM2/pages/2707915601"}},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Code for generating the content for the body of an HTML webpage","type":"text","marks":[{"type":"em"}]},{"text":": This part defines a predicate ","type":"text"},{"text":"html(Content, AddHeader, AddFooter, Html)","type":"text","marks":[{"type":"code"}]},{"text":" for generating the main HTML code and when indicated also a header (when AddHeader is instantiated with ","type":"text"},{"text":"true","type":"text","marks":[{"type":"code"}]},{"text":") and/or footer (when AddFooter is instantiated with ","type":"text"},{"text":"true","type":"text","marks":[{"type":"code"}]},{"text":"). The part also introduces various other useful predicates for facilitating the interaction with a user, e.g., for enabling audio interaction on a webpage and displaying a microphone icon.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"A helper predicate","type":"text","marks":[{"type":"em"}]},{"text":": A dynamic predicate ","type":"text"},{"text":"pageUpToDate(Name)","type":"text","marks":[{"type":"code"}]},{"text":" that will be used by the agent to keep track of whether a page that is displayed is up to date or not (and needs updating in that case).","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Start Page","type":"text"}]},{"type":"paragraph","content":[{"text":"So let's get started! The first page that we will implement together is a ","type":"text"},{"text":"start page","type":"text","marks":[{"type":"em"}]},{"text":". We will provide a detailed step-by-step guide for you on how to create it. Pages are defined by Prolog rules. The Prolog rule that we will code here for creating a start page will also serve as a kind of template example of how you can create the other pages using Prolog, HTML, and Bootstrap. The basic idea is to define a predicate ","type":"text"},{"text":"page(PageName, Text, Html)","type":"text","marks":[{"type":"code"}]},{"text":" which generates HTML code (a complete webpage) that is returned in the variable ","type":"text"},{"text":"Html","type":"text","marks":[{"type":"code"}]},{"text":" for a page named ","type":"text"},{"text":"PageName","type":"text","marks":[{"type":"code"}]},{"text":"; the idea behind the ","type":"text"},{"text":"Text","type":"text","marks":[{"type":"code"}]},{"text":" parameter is to use it for adding specific text to a page.","type":"text"}]},{"type":"paragraph","content":[{"text":"Each of the pages that we will create is connected to a specific conversational pattern","type":"text","marks":[{"type":"em"}]},{"text":". Most of the patterns for these pages will still need to be implemented as part of later capabilities too. But the initial pattern linked to the start page that we will add here already exists and is the ","type":"text"},{"text":"start","type":"text","marks":[{"type":"code"}]},{"text":" pattern that we already added to the agenda above. As a convention, we will always use the name of a conversational pattern as a name for a page that we create too. There is some logic behind this choice that we will explain below. For the start page, we therefore need to specify a rule that defines the ","type":"text"},{"text":"page(start, _, Html)","type":"text","marks":[{"type":"code"}]},{"text":" that will generate HTML code for a page called ","type":"text"},{"text":"start","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text","marks":[{"type":"em"}]},{"text":"main requirement ","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":"for the start page is that it has a button the user can click when they are ready to start a conversation","type":"text","marks":[{"type":"em"}]},{"text":". The basic idea thus is to display an HTML page at the start before a conversation has started that allows a user to start the conversation with a button click. The start page can also be used to provide some information about the agent before a user starts talking to it. The basic page layout that we will create consists of four parts: a ","type":"text"},{"text":"title","type":"text","marks":[{"type":"em"}]},{"text":", some introductory ","type":"text"},{"text":"text","type":"text","marks":[{"type":"em"}]},{"text":", an ","type":"text"},{"text":"instruction text ","type":"text","marks":[{"type":"em"}]},{"text":"on when to press the start button, and, last but not least, the ","type":"text"},{"text":"button ","type":"text","marks":[{"type":"em"}]},{"text":"itself that says “Start”.","type":"text"}]},{"type":"paragraph","content":[{"text":"The Prolog rule that we will create for the ","type":"text"},{"text":"page(start, _, Html)","type":"text","marks":[{"type":"code"}]},{"text":" has a basic template structure that we can reuse for most other pages too. It always ","type":"text"},{"text":"1:","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":" starts with checking that the active conversational pattern (at ‘top level’, but disregard that for now) has the same name (pattern ID) as the page name by using the ","type":"text"},{"text":"currentTopLevel(PatternID)","type":"text","marks":[{"type":"code"}]},{"text":" predicate; in our case, here we replace ","type":"text"},{"text":"PatternID","type":"text","marks":[{"type":"code"}]},{"text":" with ","type":"text"},{"text":"start","type":"text","marks":[{"type":"code"}]},{"text":". Only if that is the case, the rule will succeed, and code for a complete HTML page will be generated. After performing this check, ","type":"text"},{"text":"2:","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":" Prolog code for constructing HTML code for the page follows. We typically organize pages in ","type":"text"},{"text":"rows ","type":"text","marks":[{"type":"em"}]},{"text":"(often using matching ","type":"text"},{"text":"Bootstrap row","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp"}}]},{"text":" elements) each of which matches with one of the three parts of our page layout (title, text, button). This way of organizing our HTML pages provides a generic kind of template approach to structure any page that can be easily reused. Then ","type":"text"},{"text":"3:","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":" we use a built-in predicate ","type":"text"},{"text":"atomic_list_concat(+List, -Atom)","type":"text","marks":[{"type":"code"}]},{"text":" for putting the different parts (rows) together. And, finally, ","type":"text"},{"text":"4:","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":" we use a predefined predicate ","type":"text"},{"text":"html(Body, false, false, Html)","type":"text","marks":[{"type":"code"}]},{"text":" for generating a Bootstrap-compliant HTML page without a header and without a footer. The overall structure of our start page code then will look like this:","type":"text"}]},{"type":"codeBlock","content":[{"text":" %%% Page layout for start page (before conversation has started).\n page(start, _, Html) :-\n % 1: Condition for when to show this page.\n\t\tcurrentTopLevel(start),\n\t% 2: Constructing the HTLM page.\n\t% First row: a warning inside a Jumbotron element.\n\t\tCODE WE STILL NEED TO FIGURE OUT, SEE BELOW.\n\t% Second row: introductory text inside a Jumbtron element.\n\t\tCODE WE STILL NEED TO FIGURE OUT, SEE BELOW.\n\t% Third row: instruction and Start button inside an alert.\n\t\tCODE WE STILL NEED TO FIGURE OUT, SEE BELOW.\n\t% 3: Putting everything together.\n\t\tatomic_list_concat([FirstRow, SecondRow, ThirdRow], MainElementContent),\n\t% 4: Create the HTML page.\n\t\thtml(MainElementContent, false, false, Html).","type":"text"}]},{"type":"paragraph","content":[{"text":"Note that in the above code template at line 15 three variables ","type":"text"},{"text":"FirstRow","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"SecondRow","type":"text","marks":[{"type":"code"}]},{"text":", and ","type":"text"},{"text":"ThirdRow","type":"text","marks":[{"type":"code"}]},{"text":" have been used to refer to the first, second, and third row of our HTML code. The ","type":"text"},{"text":"atomic_list_concat/2","type":"text","marks":[{"type":"code"}]},{"text":" predicate is used to concatenate these variables (as elements of a list) into the overall ","type":"text"},{"text":"MainElementContent","type":"text","marks":[{"type":"code"}]},{"text":" HTML code for our page. The predicate concatenates atoms which means that the terms bound to these variables should be atoms too. The next thing we need to do is to complete the code template by writing code that generates the HTML code for each of the three rows and substituting those code snippets, respectively, at lines 7, 9, and 11.","type":"text"}]},{"type":"paragraph","content":[{"text":"First row","type":"text","marks":[{"type":"em"}]},{"text":".","type":"text"},{"text":" ","type":"text","marks":[{"type":"em"}]},{"text":"Let’s first add some simple HTML code to create a heading for our page as the first row. We will straightforwardly do this by unifying the first-row variable ","type":"text"},{"text":"FirstRow","type":"text","marks":[{"type":"code"}]},{"text":" with an atom string containing the HTML code. We use the predefined ","type":"text"},{"text":"div/4","type":"text","marks":[{"type":"code"}]},{"text":" predicate to make a ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://www.w3schools.com/bootstrap4/bootstrap_jumbotron.asp"}},{"text":" element and center a large heading text within it.","type":"text"}]},{"type":"codeBlock","content":[{"text":"div('

Please read this first:

', 'jumbotron', '', FirstRow)","type":"text"}]},{"type":"paragraph","content":[{"text":"Note that a string between single quotes also is an atom in SWI Prolog (if you want to know more see ","type":"text"},{"text":"here","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.swi-prolog.org/pldoc/man?predicate=atom/1"}}]},{"text":"). For those of you who know basic HTML the string between the quotes should look familiar: the HTML code creates a large heading text using the tags ","type":"text"},{"text":"

","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"

","type":"text","marks":[{"type":"code"}]},{"text":". For those of you for whom HTML is new, you can find out more ","type":"text"},{"text":"here","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/html/html_basic.asp"}}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"Second row","type":"text","marks":[{"type":"em"}]},{"text":". For the second row, we will add a few lines of text to a paragraph and embed that again in a ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://www.w3schools.com/bootstrap4/bootstrap_jumbotron.asp"}},{"text":". We will first concatenate the lines as atomic strings (between single quotes) using the ","type":"text"},{"text":"atomic_list_concat/2","type":"text","marks":[{"type":"code"}]},{"text":" predicate, we will then create a paragraph element using this content by using the predefined ","type":"text"},{"text":"applyTemplate(Template, Content, Html)","type":"text","marks":[{"type":"code"}]},{"text":" predicate and a simple HTML code template for a paragraph element with centered text, and, finally, add that into a Bootstrap Jumbotron element. The three-part code snippet that we are looking for is this:","type":"text"}]},{"type":"codeBlock","content":[{"text":"atomic_list_concat([\n 'You are about to interact with our agent YourAgentName.
',\n\t'It can help you find a recipe to your taste.'\n], ParagraphContent),\napplyTemplate('

', ParagraphContent, ParagraphElement),\ndiv(ParagraphElement, 'jumbotron', '', SecondRow)","type":"text"}]},{"type":"paragraph","content":[{"text":"We have just put some text there for you to get things moving but, of course, feel free to change it in any way you want. The main point that we want to illustrate here is that it is convenient to use the ","type":"text"},{"text":"atomic_list_concat/2","type":"text","marks":[{"type":"code"}]},{"text":" predicate to concatenate a list of string atoms (lines) into a single Prolog atom. It helps you keep track and provides a nice overview of the lines of text you want to put on a page. It also avoids potential syntax issues, as using whitespaces and newlines in Prolog code may often cause problems. Check out the ","type":"text"},{"text":"utils.pl","type":"text","marks":[{"type":"code"}]},{"text":" file for the definition of the ","type":"text"},{"text":"applyTemplate/3","type":"text","marks":[{"type":"code"}]},{"text":" predicate and the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file for the definition of the ","type":"text"},{"text":"div/4","type":"text","marks":[{"type":"code"}]},{"text":" predicate. The ","type":"text"},{"text":"applyTemplate/3","type":"text","marks":[{"type":"code"}]},{"text":" predicate adds the few lines of text in our example code into an HTML paragraph element using the ","type":"text"},{"text":"

","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"

","type":"text","marks":[{"type":"code"}]},{"text":" tags. The ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" tag is used to center the text inside the paragraph. In our code example above, the ","type":"text"},{"text":"applyTemplate/3","type":"text","marks":[{"type":"code"}]},{"text":" substitutes the (term bound to the) variable ","type":"text"},{"text":"ParagraphContent","type":"text","marks":[{"type":"code"}]},{"text":" for the ","type":"text"},{"text":"~a","type":"text","marks":[{"type":"code"}]},{"text":" placeholder that is part of the template string. Thereafter the paragraph element is embedded in a Bootstrap alert element using the ","type":"text"},{"text":"div/4","type":"text","marks":[{"type":"code"}]},{"text":" predicate. You can find out more on the Bootstrap template for alerts ","type":"text"},{"text":"here","type":"text","marks":[{"type":"link","attrs":{"href":"https://getbootstrap.com/docs/4.0/components/alerts/"}}]},{"text":". Finally, the result is unified with our ","type":"text"},{"text":"SecondRow","type":"text","marks":[{"type":"code"}]},{"text":" variable.","type":"text"}]},{"type":"paragraph","content":[{"text":"Third row","type":"text","marks":[{"type":"em"}]},{"text":". Our third row will combine an instruction text with a button with bold ","type":"text"},{"text":"Start","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"text inside of a ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp"}},{"text":" element. We use the predefined ","type":"text"},{"text":"button/4","type":"text","marks":[{"type":"code"}]},{"text":" predicate for creating a button element (check out the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file). This predicate will allow us to specify the atom that the agent will receive when a user clicks the button. Because we want to keep things as uniform as possible, we will also use the atom ","type":"text"},{"text":"'start'","type":"text","marks":[{"type":"code"}]},{"text":" (which is the same atom that we used for our pattern and webpage names). Check out the ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp"}},{"text":" page to learn more about some of the class options that we added below.","type":"text"}]},{"type":"codeBlock","content":[{"text":"button('Start', 'btn btn-lg btn-info', 'start', Button)","type":"text"}]},{"type":"paragraph","content":[{"text":"We want to use a (somewhat smaller than before) heading text for the instruction and show that before our button. We use the ","type":"text"},{"text":"atomic_list_concat/2","type":"text","marks":[{"type":"code"}]},{"text":" predicate for concatenating these two elements:","type":"text"}]},{"type":"codeBlock","content":[{"text":"atomic_list_concat(['

Done reading? Then please press start to begin

', Button], \n ThirdRowContent)","type":"text"}]},{"type":"paragraph","content":[{"text":"And, finally, we embed this content inside an alert element, with some added classes to style the alert, using the ","type":"text"},{"text":"div/4","type":"text","marks":[{"type":"code"}]},{"text":" predicate:","type":"text"}]},{"type":"codeBlock","content":[{"text":"div(ThirdRowContent, 'alert alert-info text-center', '', ThirdRow)","type":"text"}]},{"type":"paragraph","content":[{"text":"We now can fill in the gaps in the Prolog rule for defining our first page using the three different code snippets for the three different parts (rows) we want to display on our start page. It remains for you to put this all together and add it to the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file in the right place. Just to be sure, when you copy-paste the rows into the overall page template code, make sure to also ","type":"text"},{"text":"add the commas ","type":"text","marks":[{"type":"em"}]},{"text":"that are still missing at the end of each of the three code snippets.","type":"text"}]},{"type":"paragraph","content":[{"text":"You now have created your first page that your conversational agent can display. The page does not look particularly great yet and there is still much that can be improved. How exactly you and your team organize or create your HTML pages is up to you, as long as you fulfill the minimal conditions that the page must meet. Hence, make sure to revisit this page and revise it again later during the project!","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Run your agent again!","type":"text"}]},{"type":"paragraph","content":[{"text":"Run your agent again, see here for the instructions for ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://socialrobotics.atlassian.net/wiki/spaces/PM2/pages/2707915479"}},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"You should now see the start page that we created! Don’t yet press the button…","type":"text"}]},{"type":"paragraph","content":[{"text":"Switch to the Debug perspective in Eclipse, select the MARBEL Debugging Engine in the Debug area, and press pause. Inspect the agent’s state and check out in particular the ","type":"text"},{"text":"session/1","type":"text","marks":[{"type":"code"}]},{"text":" predicate.","type":"text"}]},{"type":"paragraph","content":[{"text":"Now start the agent again by pressing resume. And then press the start button on the page. Go back again to the Debug perspective and pause the agent again. Now again inspect the agent’s state and in particular the ","type":"text"},{"text":"session/1","type":"text","marks":[{"type":"code"}]},{"text":" predicate. Double-click on the ","type":"text"},{"text":"session/1","type":"text","marks":[{"type":"code"}]},{"text":" fact if you can't see it completely.","type":"text"}]},{"type":"paragraph","content":[{"text":"What has happened?","type":"text"}]},{"type":"paragraph"},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"All done? ","type":"text"}]},{"type":"paragraph","content":[{"text":"Proceed with ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://socialrobotics.atlassian.net/wiki/spaces/PM2/pages/2707914828/OLD+Designing+and+Developing+Your+Agent#Agent-Capability-1%3A-Greet%2C--and-Self-Identify"}}]}]},{"type":"paragraph"}],"version":1}

Browser not supported