New Feature! Visualize your AIML

Steve Worswick
Aug 22, 2018 · 9 min read

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.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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”.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

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.

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.

Image for post
Image for post
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.

pandorabots-blog

The leading platform for building and deploying chatbots.

Steve Worswick

Written by

Mitsuku's creator and developer. Mitsuku is the 5 times winner of the Loebner Prize and regarded as the world's most humanlike conversational AI

pandorabots-blog

The leading platform for building and deploying chatbots.

Steve Worswick

Written by

Mitsuku's creator and developer. Mitsuku is the 5 times winner of the Loebner Prize and regarded as the world's most humanlike conversational AI

pandorabots-blog

The leading platform for building and deploying chatbots.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store