ConversationalWeb

The purpose of this repo is to define the annotation format to use in html files in order to generating conversational agents (chatbots) out of websites. The scope of the annotation is to add information to the elements in the page. The information we provide with the annotation is necessary for the system to works correctly.

Scenario

Consider the following web page:

Fig 1 In order to create a conversational agent our system have to extrapolate web element in the site and give some semantic meaning to them:

Fig2 In a first implementation, our system is not able to detect the relevant elements of a page, so it needs the help of the web developer. The developer has to take in mind that there are two layers:

1. App specific layer (TBD the name)
2. Element specific layer

First the developer has to decide what are the app specific elements (the red blocks).

In the Fig 2 I selected 5 app specific elements:

1. The menu
2. The Goal of the project paragraph
3. The Topic paragraph
4. The Description paragraph
5. The container of 2, 3 and 4

There are no rule to define which are the app specific elements, it depends on the common sense of the web dev. A way that can help to identify them could be to ask yourself the following question:

What a user can do in this page?

In the example the answer is:

The user can use the menu (1), he can read some information about the project (5) in particular the goal (2), the topics (3) and the description (4)

NB: This isn't the unique answer.

Another good way is to group elements according to their context. For example goal, topics and description are all information about the project, so I group them under the element number 5.

Once the app specific element are defined, the web dev can provide other information regarding the elements inside each block:

Fig 3 In Fig 3, for example the developer can say that there is a title and some text

The web developer also has to annotate the external link (only the relevant ones) in order to permits the navigation among pages.

In the next section the annotation format will be explained.

Annotation

As it is explained in the scenario, we can distinguish three type of annotation:

• App specific
• Element specific
• Navigation

App specific annotation

The app specific annotation need to define the app specific block described before. In order to define them the web developer has to specify three attributes:

1. bot-intent
2. intent-desc
3. bot-type

bot-intent

Given an app element we can use it for different reason, for example if we have a table or a paragraph we can use it to acquire information, if we have a form we can use it to perform an action (i.e. login, buy ticket, etc) etc. The bot-intent annotation needs to provide this kind of information. Here an example: Consider we have a web page regarding a project (as in the example) and inside it we have a div element that contain the information about the goal of the project (block number 2). The proper way to add this information is to add the bot-intent attribute in the div element and write that it contains the information about the gol of the project:

<div bot-intent="project_info_gol"> 
    <h1>Goal of the project</h1>
    <p>
        Some text ...
    </p>
</div>

intent-desc

The intent-desc attribute provide the description of the intent that is specified in the bot-intent element. Any time there is bot-intent attribute, also the intent-desc must be present. The value of this attribute has to answer the question "What can you do?" considering that the question is made by the user of the site and the response came from the bot. Here an example:

<div bot-intent="project_info_gol" intent-desc="Tell you the gol of the project"> 
    <h1>Goal of the project</h1>
    <p>
        Some text ...
    </p>
</div>

bot-type

This attribute specifies the type of the element; the type can be:

• text: if contains only text
• list: if contains a list of object
• form: if contains a form
• table: if contains a table
• to be define...

NB: If there is a bot-intent attribute but there isn't the bot-type one, the system consider that intent as a container of sub intents.

Example:

<div bot-intent="project_info_gol" 
    bot-type="text"
    intent-desc="Tell you the gol of the project"> 
    <h1>Goal of the project</h1>
    <p>
        Some text ...
    </p>
</div>

Element Specific

When we are inside an html element that has an attribute bot-intent, we have to provide some information about the sub elements. We can annotate them with the attribute bot-attribute. NB: the bot-element attribute is not mandatory for each sub element

Text Element

Consider an element with an attribute bot-type which value is text, then the value of bot-attribute attribute in its sub element can be :

• title: if the text is a title
• paragraph: if the text is simple text
• list: if there is a list of text

Example:

<div bot-intent="project_info_gol" 
    bot-type="text"
    intent-desc="Tell you the gol of the project"> 
    <h1 bot-attribute="title">Goal of the project</h1>
    <p bot-attribute="paragraph">
        Some text ...
    </p>
</div>

Navigation

The goal of the system is to take a conversation on all the web site. Web sites are composed by multiple web pages linked together. In this section will be explained how annotate the page in order to link it with other web pages.

First we consider internal link, so an hyperlink on a web page to another web page or resource on the same website. Consider two pages:

Fig 4 It could be two type of link:

• A link that goes to another page: **page link **(name?)
• A link that goes to an intent (anchor) of another page: anchor link (name?)

Page link

A page link is a link that is connected with another page of the same website.

Fig 5 The annotation for this type of link is simple: the developer has to add **bot-link** attribute in the right position of the html. Consider an example in which the user is in _page1.html_ and there is a link connecting page1 with page2. The following code is an example of annotation of the previous scenario:

<ul> 
    <li bot-link="page2.html">Goal of the project</h1>
</ul>

Anchor link

An anchor link is connected to an intent of another page.

Fig 6

The annotation here is similar to the html anchor. If the web developer want to make an intent an anchor has to annotate it with the tag <a>:

<a bot-intent="intent4" 
    bot-type="text"
    intent-desc="Tell you the gol of the project">
    </div>
        <h1 bot-attribute="title">Goal of the project</h1>
        <p bot-attribute="paragraph">
            Some text ...
        </p>
	</div>    
</a>

Once the intent is marked as an anchor, the anchor link can be done; as in the page link case the bot-link attribute must be added in the correct position of the html file and the value is the name of the page of the anchor intent followed by # character and the name of the intent.

Example:

<ul> 
    <li bot-link="page2.html#intent4">Goal of the project</h1>
</ul>