The SUSI skill CMS is an editor to write and edit skill easily. It follows an API-centric approach where the SUSI server acts as API server and a web front-end act as the client for the API and provides the user interface. A skill is a set of intents. One text file represents one skill, it may contain several intents which all belong together. All the skills are stored in SUSI Skill Data repository and the schema is Models -> Groups -> Languages -> Skill -> Intents. Using this, one can access any skill based on four tuples parameters model, group, language, skill.
A skill format looks like following,
Susi Skill class in Susi Server provides parser methods for sets of intents, given as text files. It reads the skill line by line. The SusiMind class process this JSON and stores the metadata in a map of skill path and data, which provides the API endpoint for getting the skill the metadata . http://api.susi.ai/cms/getSkillMetadata.json?model=general&group=Knowledge&language=en&skill=cars. It takes four parameters, model, group, language, and skill. The endpoint returns null value if the skill metadata field is not present in the skill. The following is the response for model=general, group=Knowledge, language =en and skill =cars.
Image is the path to image of the skill, stored in skill data repository and dynamic content represents if the skill’s response changes based on the user inputs.
To make the required API call we first need the value of 4 parameters. We will get these as props from browse skill route.
Using these props we will append the base url with all the four parameters.
Next we will make a ajax call and get the data updated.
To display data on Skill CMS we will use Material UI components. Before rendering we will check the each state if it is null , we will display the default values for it.
If the image is not present in the skill, we display the placeholder showing the name of the skill.
Otherwise, the image stored in skill_data repository is shown.
Similarly, we will display the other components using material-ui. Next, we add an edit button for editing the skill.
To make edit button we use floating action button. We link the button to skillEditor route and pass the URL and skillname as props.
SkillEditor components uses getSkill.json endpoint and using these props make the ajax call to the endpoint like: http://api.susi.ai/cms/getSkill.json?model=general&group=Entertainment&language=en&skill=<skill_name>.
This is how skill Page is implemented in Susi skill CMS, To add more skills or modify the existing ones visit skills.susi.ai. For more information and complete code take a look at Susi server and Susi_Skill_cms and join gitter chat channel for discussions.
- Read more about Servlets – https://www.tutorialspoint.com/servlets/
- The source code –https://github.com/fossasia/susi_skill_cms/tree/master/src/components/SkillPage
- Read about servlet interface – https://www.javatpoint.com/Servlet-interface
- Read merits of Material UI- https://thenextweb.com/dd/2015/11/10/what-are-the-real-merits-of-material-design/#.tnw_hnWuEF06