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.

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:

1. Purpose

• Introduces the user to the conversational agent.

• Sets the stage for interaction by explaining what the agent can do.

• Provides a clear way for the user to begin the conversation.

2. Core Layout

The page should have four main parts:

1. Title:

   • A prominent heading to grab the user’s attention.

   • Example: "Welcome to YourAgentName!"

2. Introductory Text:

   • Briefly explains the purpose of the agent.

   • Example: "You are about to interact with our agent, YourAgentName. It can help you find a recipe to your taste."

3. Instruction Text:

   • Provides a simple and clear instruction for the user.

   • Example: "When you're ready, press the Start button below to begin."

4. Start Button:

   • A button labeled "Start" that allows the user to begin the conversation.

   • Positioned clearly and styled to stand out.

3. Visual Hierarchy

• Title: At the top, bold and centered to draw immediate attention.

• Text: Below the title, informative but concise, to set expectations.

• Instruction: Positioned above the button, clearly visible and easy to understand.

• Button: Large and centrally placed to ensure it’s the main call-to-action.

4. Additional Information

• The start page can also provide additional optional information, such as:

  • A short description of the agent's functionality.

  • Any instructions or disclaimers for using the agent.

Key Takeaways

The start page is simple but functional, ensuring users know what to expect and providing them with an easy way to begin their interaction. It sets the tone for the user experience while focusing on clarity and usability.

Welcome Page

Summary: What Should Be on the Welcome Page

The Welcome Page is displayed after the user clicks the "Start" button on the Start Page and serves to greet the user and transition them into actively interacting with the conversational agent.

1. Purpose

• Provides a welcoming message for the user.

• Introduces the conversational agent.

• Prepares the user to begin speaking with the agent via a microphone icon.

• Ensures the user transitions naturally into a conversational mode without needing buttons to navigate further.

2. Core Layout

The page should have three main parts:

1. Title/Greeting:

   • A friendly message to greet the user, such as "Welcome!" or "Hello there!"

   • Optionally include the agent's name (e.g., "I’m YourAgentName, here to help you!").

   • If the agent’s name is not available, provide a fallback message (e.g., "Welcome to your personal assistant!").

2. Introduction Text:

   • A short description of the agent’s capabilities or purpose.

   • Example: "I’m here to assist you in finding the perfect recipe. Let’s get started!"

3. Microphone Icon:

   • A prominent microphone icon that signals the user can start talking.

   • Clicking the icon activates the microphone and begins the interaction.

   • Avoid adding any buttons for navigation; progression should be via voice interaction.

3. Visual Hierarchy

• Title/Greeting: Placed prominently at the top, bold and centered for immediate visibility.

• Text: Below the greeting, concise and informative.

• Microphone Icon: Large and centered below the text, acting as the primary call-to-action.

4. Additional Features

• Styling: Make the page inviting with clean design elements and spacing. Use colors and fonts that create a friendly and approachable tone.

• Fallbacks: Handle cases where the agent’s name is not set, ensuring a default greeting is always shown.

• Interactive Elements: The microphone icon should be easy to find and visually engaging to encourage interaction.

Key Takeaways

The Welcome Page serves as the bridge between the user’s initiation of the conversation and the agent’s active engagement. It sets a friendly tone, introduces the agent, and makes it clear that the user can begin speaking to the agent immediately by interacting with the microphone icon. Keep the design simple, clear, and welcoming.

Recipe Overview 1

The Recipe Overview Page is designed to help users engage with the agent about finding recipes that match their preferences. Its purpose is to initiate the recipe selection process and provide feedback on the user’s requests and filters.

1. Purpose

• Serves as the central interaction page for recipe recommendations.

• Displays the user's active filters and allows them to refine their preferences.

• Provides a microphone button for the user to communicate with the agent.

• Keeps the user informed about the recipe selection process (e.g., whether more filtering is needed).

2. Core Layout

The page should have three main components:

1. Title/Heading:

   • A prominent heading that invites the user to start engaging with the recipe selection task.

   • Example: "What recipe are you looking for?"

2. User Filters:

   • A section that displays the user's active filters or feature requests.

   • Example: "Filters applied so far: Vegetarian, Less than 30 minutes, Italian cuisine."

   • Dynamically updates as the user adds or refines their preferences.

3. Microphone Button:

   • A microphone icon that allows the user to continue the conversation by speaking to the agent.

   • This should remain a central and clear call-to-action.

3. Visual Hierarchy

• Title: Large and bold at the top of the page.

• Filters Section: Positioned below the title and styled to make it easy for the user to review their active filters.

• Microphone Button: Positioned prominently, with enough space to make it easy to interact with.

4. Additional Features

• Condition for Displaying the Page:

  • The page should only be shown when the recipe selection pattern is active and when the filtered list of recipes has more than 15 matches.

• Instructions:

  • Optionally include a short message encouraging the user to refine their filters if too many recipes are found.

  • Example: "Please tell me more about your preferences to narrow down the options."

• Dynamic Content:

  • Show the filters or features the user has applied in a structured and easy-to-read format.

Key Requirements

1. Minimal Navigation:

   • The page should not include buttons for navigating away. Interaction should occur via the microphone button.

2. Dynamic Content Updates:

   • The displayed filters should reflect the user's requests in real time, pulled from the agent's memory.

3. Clear and Simple Design:

   • Use a clean and inviting layout that encourages interaction.

Key Takeaways

The Recipe Recommendation Page is a functional and user-focused interface that connects the user’s spoken preferences with the agent’s filtering capabilities. It must provide clear feedback on the current state of the recipe search while allowing users to refine their search through conversation, keeping interaction intuitive and seamless.

Recipe Overview 2

Summary: What Should Be on the Recipe Refinement Page

The Recipe Refinement Page is a continuation of the recipe recommendation process. It provides an overview of the remaining recipes when the list of filtered recipes has narrowed to 15 or fewer. This page helps the user make a final selection from a more manageable set of options.

1. Purpose

• Displays the remaining recipes in a clear, visual way to help the user choose.

• Ensures the page is only shown if:

  • The list of filtered recipes has 15 or fewer items.

  • The user is still actively refining or selecting a recipe.

2. Core Layout

The page should have three main components:

1. Heading:

   • A clear and prominent heading that informs the user about the narrowed-down recipe list.

   • Example: "I have found the following recipes that you might like!"

2. Filters Overview:

   • Displays the user's active filters or preferences in an easy-to-read format.

   • Example: Tags or cards summarizing filters like "With rice," "With ginger," etc.

3. Recipe Cards:

   • Shows the titles, images, and brief descriptions of the remaining recipes.

   • Each recipe card should be clickable or interactive to allow the user to select one.

   • Ensure the cards are visually appealing and easy to differentiate.

3. Visual Hierarchy

• Heading: At the top, large and bold for immediate clarity.

• Filters Overview: Positioned below the heading, styled as tags or cards for quick scanning.

• Recipe Cards: Below the filters, arranged in a grid layout to showcase all remaining recipes neatly.

4. Additional Features

• Dynamic Content:

  • The recipes displayed should dynamically reflect the current filtered list (15 or fewer).

  • Each card should include:

    • Recipe title.

    • Recipe image.

    • Optional brief description or taglines.

• Styling:

  • Use modern, clean design elements like cards for recipes.

  • Add hover effects or clickable behavior to recipe cards for interactivity.

• No Manual Navigation:

  • The page should rely solely on user actions (e.g., recipe card selection) or conversational patterns to progress.

Key Requirements

1. Show Remaining Recipes:

   • Clearly present the final set of recipes that match the user's preferences.

2. Interactive Recipe Selection:

   • Allow users to choose a recipe visually and intuitively through the recipe cards.

3. Dynamic Display:

   • Ensure the page only appears under the defined conditions (≤15 filtered recipes).

Key Takeaways

The Recipe Refinement Page is a visually driven interface designed to help users make a final recipe choice. By focusing on dynamic content, interactivity, and clarity, the page ensures an engaging and intuitive experience as the user interacts with the agent.

Recipe Confirmation

The Recipe Confirmation Page allows users to preview a selected recipe and decide whether they are satisfied with it. This page must clearly present the recipe details, enabling users to confirm or disconfirm their choice through interaction with the conversational agent.

1. Purpose

• Displays the recipe that the agent has selected for the user.

• Provides the user with essential details about the recipe, including:

  • Recipe name.

  • A picture of the recipe.

  • Instructions, ingredients, cooking time, and servings (added later as extensions).

• Allows the user to indicate satisfaction (confirm/disconfirm) via the microphone button.

2. Core Layout

The page should have five main components:

1. Recipe Card:

   • Includes:

     • Recipe name displayed as the card title.

     • An image of the recipe.

   • Card styling (e.g., width, border) should make the content visually appealing.

2. Instructions Section (extension):

   • Shows the cooking steps needed to prepare the recipe.

   • Organized as a numbered or bullet-pointed list for clarity.

3. Ingredients Section (extension):

   • Lists the ingredients required for the recipe, along with quantities.

   • Styled in a table or bulleted format.

4. Additional Details (extension):

   • Cooking Time: Displays the estimated preparation/cooking time.

   • Servings: Indicates the number of servings the recipe will yield.

5. Microphone Button:

   • Allows users to inform the agent about their decision (confirm or disconfirm the recipe).

   • Positioned prominently for easy interaction.

3. Visual Hierarchy

• Recipe Card: Central focus of the page, showcasing the recipe's name and image.

• Instructions and Ingredients: Displayed below the recipe card in well-organized sections.

• Additional Details: Positioned near the recipe card or in a sidebar format for quick reference.

• Microphone Button: Clearly visible, either at the top or bottom of the page.

4. Key Requirements

1. Dynamic Content:

   • The recipe name, image, instructions, and ingredients should be dynamically retrieved from the agent's database.

2. Conditions for Display:

   • The page should only be shown when the a50recipeConfirm pattern is the top-level pattern in the agent’s agenda.

3. Design and Accessibility:

   • The layout should be clean, professional, and easy to navigate.

   • Ensure that content is responsive and readable on various screen sizes.

4. Microphone Interaction:

   • The user must be able to confirm or disconfirm their selection through the microphone button, without relying on additional navigation buttons.

5. Additional Features

• User Feedback:

  • Optional section to display filters or preferences that led to the selected recipe.

• Styling Enhancements:

  • Improve the visual appeal with color schemes, borders, and hover effects.

• Future Extensions:

  • Consider adding a feature to suggest alternative recipes if the user disconfirms the current one.

Key Takeaways

The Recipe Confirmation Page is a visually engaging interface that gives users all the information they need to make a decision about a selected recipe. By focusing on clarity, usability, and a dynamic layout, the page supports seamless interaction with the conversational agent.

Closing

Summary: What Should Be on the Closing Page

The Closing Page serves as the final interaction point in the program. Its primary purpose is to thank the user for their time and let them know they are welcome to continue using the program to explore more recipes.

1. Purpose

• Provides a farewell message to conclude the user's session.

• Encourages the user to return or continue exploring recipes if they wish.

2. Core Layout

The page should have three main components:

1. Farewell Message:

   • A warm and friendly message thanking the user for their interaction.

   • Example: "Thank you for exploring recipes with us!"

   • Optionally include a short sentence to express gratitude, such as, "We hope you found something delicious."

2. Encouragement to Continue:

   • A statement that informs the user they can continue looking for more recipes.

   • Example: "Feel free to start a new session to find more recipes you’ll love."

3. Optional Decorative Element:

   • Include a visually appealing image, icon, or graphic to leave a lasting impression (e.g., a chef’s hat, food illustration, or friendly graphic).

3. Visual Hierarchy

• Farewell Message: Prominent and centered at the top of the page to immediately convey the conclusion of the session.

• Encouragement Statement: Positioned below the farewell message in a slightly smaller font size.

• Decorative Element: Positioned strategically to add visual appeal without distracting from the message.

4. Key Requirements

1. Clarity and Friendliness:

   • Ensure the message is clear and leaves a positive impression on the user.

2. Encourage Engagement:

   • Let the user know they are welcome to return and continue interacting with the agent.

3. Dynamic Display:

   • The page should only appear when the c43 pattern is active in the agent’s agenda.

5. Additional Features

• Styling Enhancements:

  • Use a clean and inviting layout with warm colors or friendly imagery.

• Customizable Message:

  • Tailor the farewell message and encouragement text to reflect your project's tone and personality.

Key Takeaways

The Closing Page provides a graceful end to the user’s session, ensuring they leave with a positive experience. By combining a friendly farewell message and encouragement to return, it reinforces user satisfaction and engagement with the program.