New Feature! Visualize your AIML

Now you can see what your AIML looks like in a graphical format!

AIML is a great language for creating chatbots but sometimes it’s hard to see how categories link together, as it’s a text based format right? Well not anymore! The development team at Pandorabots have been busy creating a brand new tool to help you see how your AIML looks in a neat graphical display. It’s still in its very early stages but we wanted to give you a sneak peek at how it looks.

The tool is called Intents and is found underneath your bot. As the [Alpha] tag next to it suggests, it may be a little buggy at the moment but you are more than welcome to play with it and experiment. To try it out, I’ve made a brand new bot with no content apart from this AIML in the default udc.aiml file.

If I click on the Intents tool, I get this view

This indicates that my category with a pattern of * maps to the bot’s response of “I have no answer for that”, which is correct as this is the only category we currently have.

Now as well as seeing how your AIML looks, you can also use this tool to design your AIML using a graphical editor instead of the traditional text based method. Let’s make the bot say hello. Click on Add Category and it will create a new category for us to complete.

You can click the purple circle (or node) to amend the <pattern> or click on the robot icon to amend the <template> which the bot will respond with. We want to add a pattern of “Hi Robot” so click on the purple node to bring up the Edit Terminal Pattern box.

We’ll start simple for now. Replace the default “Click node to edit pattern” text with “Hi Robot” then click Save. Notice how the display changes to reflect our work.

Now we need a suitable response for the robot. Click on the robot icon and we can amend the template.

Using this tool, we can graphically design our template to see how the response will look with any rich media elements such as cards, images, buttons, quick replies and so on.

We’ll keep it simple for the moment by replacing the default “Click node to edit template” text with “Hello human.” and clicking Save. As you type, the left part of the box displays how your template looks in real time, which is great when designing rich media templates. Our graphical display now looks like this with our additional category.

Nice but has it actually created any AIML?

Of course! Check it out using the sandbox widget. Open it up and type “hi robot”, the bot will respond as expected.

Let’s take a look behind the scenes and see the AIML. Go to the Edit menu of your bot, look at the udc.aiml file and it will display our new category that the tool created for us.

Adding <srai>s

As well as saying, “Hi Robot”, let’s add a few other ways of saying hello to see how it looks in the tool. Click on the Intents tool and click the purple node to bring up the Edit Terminal Pattern dialogue box again. Under Reductions, enter a few different ways to say hi. Each <srai> must be placed on a new line, so press enter after each one. The box will scroll if you need to add more <srai>s than the text box allows. I typed, “hello, hi, howdy, Yo”.

Click Save after you have finished to see the <srai>s we have added which point to our Hi Robot category.

Looks a little cramped right? Let’s sort that out by clicking the Refresh Map button.

Now it looks much better and probably easier to follow than the AIML it created which looks like this.

Altering existing AIML

In our “Hi Robot” example, let’s decide that we don’t want people to say howdy. Click on the purple “howdy” node and we can either change it to something new or use the red Delete button to remove it altogether.

Clicking on the green Open File button will jump to the part of the AIML file containing the “howdy” <srai> so you can make changes directly to the AIML if needed.

This method can also be used to find patterns and templates. Click on the node you wish to inspect and choose Open File to jump to that part of the AIML.

<that> and <topic>

If we have categories with <that> and <topic> tags or both, the patterns may be the same but will still be valid. This will make it hard to spot them in the visualiser, as it only shows the pattern tag. To get around this, the tool will differentiate them with a different coloured node, like below.

A full list of the colour codes is available by clicking the ? icon (Show Legend) at the top right of the screen. A common pattern of Yes will probably appear under lots of <that> tags in our code, so to see the contents of <that>, click on the node. The Edit Template Response box shows the details and will also display the <topic> if there is one.

Rich media elements

One great advantage of designing categories using the tool is that if our templates contain elements such as images, buttons etc, we can see in real time how they will look. Let’s add a new category using the tool and create a pattern of SANTA.

Click the robot icon to edit the template. Notice the buttons we can select at the bottom of the template box? We can use these to add extra elements to our responses. You can hover over each icon to see what it does and I’ve explained each of them below. Click on the one you want to use and a blank element will appear in the template box for you to complete.

To demonstrate how we use these elements, we’ll make a template with a picture of Santa and a couple of buttons. Click the image icon to add a default image into your template. I’ve highlighted it so you can see where to click.

The template preview changes as we design it. Change the default text to “Ho! Ho! Ho! What list do you think you are on?” and replace the default image with the URL of a Santa picture between the image tags.

As this is now too big for the preview window, a scroll bar becomes active to display the full template. Let’s add 2 postback buttons (the empty circle icon) and complete the button templates with a nice list and a naughty list. If our postback categories don’t already exist, we can tick the automatically add postbacks option to create them. Let’s do that, as these are new categories.

When we are happy with our template, click the Save button to see what we’ve made. As we clicked Automatically add postbacks, you can see that the tool has created a new category for each button we made.

Let’s complete the templates for these new categories and test it out. I’ve used the tool to create new responses and included a picture of coal for the naughty list but you can create much more complicated templates using the rich media elements.

Now we can try it in the sandbox. Say Santa and it will display the image and the 2 buttons. Click on each one to test the work we’ve just done.

Pretty neat huh? Behind the scenes, it has created the below AIML, which I’m sure you will agree looks more complicated than the graphical interface, especially for non programmers.

If you have a bot that is spread over lots of AIML files, all doing different tasks, you probably just want to visualise one of those files at a time rather than the entire bot. To do this, click on the file selector at the top to choose an individual file or all of the bot’s AIML at once.

This is awesome! Why is it in Alpha?

There’s still a few bug fixes and enhancements we are working on. The tool will not currently handle large bots very well and instead of it displaying the contents of rich media templates like this:

We want it to render the template with the elements to make it easier to read. Like this.

But we’re so excited about it, that we wanted to share it with you to experiment with. Naturally, you still have all the existing options of creating AIML files and categories and this is just an extra feature.

Why is it called “Intents”?

A standard in chatbot design is to have intents. An intent is an action or a collection of common queries. In AIML, we know these as “canonical forms” or “atomic patterns”, ones like “GREETINGS” which other categories like “hi”, “hello” and “howdy” <srai> to. Using this tool makes it easy for developers to create and view intents without having to manually search through AIML files.

For example, let’s take a pizza ordering bot. It will have separate intents for things like ordering, delivering, choosing toppings etc. The AIML files containing these intents may be difficult to visualise and a display like below is far easier to follow than a series of AIML files, which may not necessarily have the <srai>s next to the intent.

A pizza bot with two intents — ORDERING and DELIVERY

Many chatbot designers are used to the concept of intents and so this tool will make it easy for them to adopt the AIML language into their work.

Have fun with the intents tool. Remember, it may be a little buggy for now but is being made more stable all the time. If you have any suggestions or queries about it, please get in touch using the “Report a Bug” option which is available by clicking the user icon in the top right of the screen. Meanwhile, I’m going to order pizza!

To bring the best bots to your business, check out www.pandorabots.com or contact us at info@pandorabots.com for more details.

Like what you read? Give Steve Worswick a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.