Seeing the wood for the trees - visualising conversations
Hickmat 100000QA3T Comment (1) Visits (6778)
Over the last few months I've had the opportunity to work on an engagement to launch a production Watson Conversation powered chatbot. This has been an excellent experience and has helped me learn a lot mainly around the feedback loop needed to keep training and enhancing the configured conversation. This area of "training insights" was where I focused my time and this post relates to a specific side project I ran to look at how to visualise the flow of a conversation.
For those familiar with Watson Conversation you will be aware that the conversation structure is contained in a "workspace", for those new to it you are now aware The workspace is a JSON object which contains the intents, entities and dialog nodes defined for the conversation. During my experiments around workspace management I became familiar with the structure of the JSON and how the dialog nodes were chained to form a tree. I was also aware the a dialog node could contain a "jump to" command so the actual structure of the dialog flow would not necessarily lead to a neat tree structure.
Using this knowledge I decided as a 1st step to create a visualisation component which would allow me to represent a workspace's dialog configuration as a tree. As I already had a core AngularJS based app to present other training relevant data I decided to enhance this by adding a visualisation component. To perform the actual visualisation I turned to D3 and leverage the collapsable tree example (htt
This code not only walks the dialog nodes in the JSON but also captures information about the nodes like if the node contains a jump to and set up a number of holders for data that can be added to the tree nodes to allow me to "decorate" the nodes with additional information. Initial testing proved that I could render a basic tree so I set about enhancing the initial collapsable tree code to the point where I created a UI view which allowed me to select a workspace from the list of available workspaces and then have the complete tree rendered. As shown below.
So that was looking pretty good so I had a view which could now handle rendering a dialog flow so I set about configuring it to have another role which would allow me to apply a conversation flow to the tree and show what nodes had be visited during the conversation and what questions were asked. To support this work I already had a Cloudant database which was being populated with data about questions being asked of the Watson Conversation service and the response from the service call. To ensure this would support what I needed I made sure that as part of the stored data I had the ID of the workspace being used to handle the conversation and also the dialog nodes visited during the creation of a response for a given question. With this information I was able to create cloudant view which could retrieve all records for a given conversation ID. Now that I had the conversation information I needed to add some post processing code to my tree JSON creation code to mark the visited nodes and remove as many of the unneeded nodes as possible. The extra lines of code were:
So here you can see that I defined a variable in my view called "style" and this was used to determine if I need to render a conversation view or just the whole workspace. On top of this code I added some more decorator code to my tree rendering code to allow the visit path to be shown and also to allow the question data being handled by each visited node to be viewed. The resultant screen looked like.
I am still in the process of testing and expanding the functionality I have here but overall this is looking good. If I get chance I'll try and create a short screencam of it working but overall you probably get this idea