On this page, we will specify what kind of information must specifically be on each page. It is up to you to then update the ones we provide. The files are under sic_framework/services/webserver/templates.

...

How to Send Recipe Information To Your Webpage

The templates already provide code that illustrates how selected filters (e.g., ‘With cheese', ‘With pasta’) can be send from the MARBEL agent to the webserver for displaying it on a webpage. There are three parts that you need to understand on how this works:

1. The webinfo(label, data) action that the MARBEL agent can execute. You can find several examples that illustrate the use of this action at the end of the dialog_update.mod2g file in the MARBEL project folder.

2. The way websockets are handled using the socket.on(label, data) Javascript command in the pca.js file that you can find in the webserver/static/js folder of the Social Interaction Cloud framework.

3. The use of the <template> HTML tag on a webpage. You can find an example of this in the recipe_overview.html webpage that is provided to you at the start in the webserver/templates folder.

Ad 1) In the MARBEL agent, you can write a Prolog rule to extract recipe information from the database. You can already find an example of such a rule for retrieving the selected filters in the agent you started with at the end of the dialog_update.mod2g file. The predicate defined and used there, is called filters_to_strings/1. You can find its definition in the dialogflow.pl file. The information that you can retrieve from the recipes is located in the recipe_database.pl file. In order to retrieve all information for the current selection of recipes, you can use the recipesFiltered(Recipes) predicate that is defined in recipe_selection.pl and also used at the end of the dialog_update.mod2g file. By iterating over this list (use a recursive Prolog rule), you can collect the information you want (in a list) for sending to the webserver. Use the webinfo(label, data) action to actually send the list in the MARBEL agent.

Ad 2) The data is sent using a websocket to the webserver, which then can be further processed using Javascript. Check out the pca.js file for an example already doing this for the selected filter: socket.on("filters", (filterString) => { etc. Data that is sent is always received in a string format, so you need to parse the string to retrieve the information from the string that you need to display on the webpage. By changing the code that is already there to do what you want, you should be able to get there.

Ad 3) It is useful to already define HTML templates that you want to reuse in the HTML code of the webpage that you want to display information on. An example of the use of a <template> tag is already provided in the recipe_overview.html (see for more information about this tag also this link). A template is not shown on the webpage when it is loaded, but can be used in your Javascript code as a starting point. The following code retrieves the template from the HTML page and clones it for (re)use on the webpage.

let filterTemplate = document.querySelector('#filterCardTemplate');
const card = filterTemplate.content.cloneNode(true);

It’s up to you now to design and implement how you want the page to look like using tempates and data from the recipe database that you make the MARBEL agent send!

Start Page

The Start Page is the initial screen users see before interacting with the conversational agent. It provides context and allows the user to initiate the conversation. Here's what it should include:

...