MAS Explorer – Test published models in MAS with a custom web application

1 Like

Once a model has been created and published to the SAS Micro Analytics Service (MAS), you can test the scoring using the automatically generated test in SAS Model Manager. Alternatively, you may not want to execute the test in batch and you want to build a demo application which will mimic the scoring from a web application. This is the use case for the MAS Explorer application that I developed. Using that application, you can look for published models by name and generate the input form for the input parameters required to execute the model. This article will explain how such a web application can be created using TypeScript and SAS REST APIs.

The final application

Before we look at the code, let's have a look to the final application.

(view in My Videos)

As you can see in this demo, the user gets prompted for authentication and then the list of available models is returned. By default, the application only displays 20 models. The user can look for a specific model and/or increase the number of models displayed in the list.

As soon as the user selects a model, an input form is generated and displayed. The user can enter relevant values and then click the button to score the data using the MAS published model. The output pane is then displayed with the result of the scoring.

The SAS Micro Analytic Service

The SAS Micro Analytic Service (MAS) is a publishing destination which is available on SAS Viya. Publishing the model is an important step in the ModelOps life cycle. Without publishing, the models are a nice piece of AI art, but not serving its purpose to score data against the modeling criteria. SAS and open-source models can be published to a variety of destinations in SAS Viya including:

CAS
Git
Azure Machine Learning
Container repositories on Amazon Web Services (AWS), Google Cloud Platform (GCP), Microsoft Azure, or private Docker registry

MAS, as a publishing destination, (as the other publishing destination) makes the model available for consumption. MAS and SAS Container Runtime (SCR) are two destinations which are specially designed for consumption through REST APIs. While SCR contains a single model, MAS can host many models in the same instance. As a result, being able to explore the published models and test them from a web interface makes a lot of sense.

The web application

When designing web applications, you have different options. You can build an application using vanilla JavaScript, you can use web libraries or frameworks, you can even choose between different languages: JavaScript, Python, TypeScript, Go, etc.

For this article, I chose to develop the application using TypeScript. You may wonder why TypeScript and not vanilla JavaScript or another language. Basically, I chose TypeScript for personal learning purposes, and also because it adds type checking to JavaScript. While type checking may not be relevant to your project, it eases the development process by detecting syntax and data errors early in the development process. If you want more information about the benefits of TypeScript over JavaScript, you can find a lot of content on the web.

A side effect related to TypeScript usage is that your application cannot be deployed as-is to a web server. It needs first to be transpiled from TypeScript to JavaScript, because web browsers do not understand TypeScript natively. So, the TypeScript code should be transpiled (translated) into JavaScript. Transpiling the code can be using the tsc command or you can use a web bundler which will transpile the code, but also build a package that can be deployed to a web server. For this article, I’ve used webpack. You can use any other web bundler if you prefer, but webpack is a well-known web bundler and is well documented. Webpack also comes with a development server which can be used during the development process before you build the deployment package. It makes it a nice tool for web developers.

So far, we discussed the tools used for web development. You also need to know that the SAS Viya environment needs some configuration setup to enable access using REST APIs. The needed configuration is described on developer.sas.com web site. For this application, I’ve not created a client application as described in the SAS REST APIs documentation. The client application is used to authenticate users. In this application, I’ve used sas-auth-browser which is provided by SAS for web authentication and uses the same authentication mechanism as SAS Visual Analytics SDK. While the CORS and CSRF configurations are still relevant, there is no need to create the client application.

The usage

Now that you have a better understanding of the different components and choices I’ve made, it is time to develop the application. I’ve made it easy for you to use the application. All the code is available in a Github repository.

To use this application, you should have NodeJS installed on your machine.

Clone the repository on your machine
Open the repository in Visual Studio Code
Create a file named const.ts under src folder
In const.ts, define and export a constant for viyaUrl which contains the URL of your SAS Viya environment like this:
```
export const viyaUrl = "https://server.demo.sas.com"
```
Save the file
Build the application or run the development server for testing using the predefined NPM SCRIPTS

Running the development server will start a web server which can be accessed from: https://localhost:3000

From now on, you can use the web application on your client machine. If you want to deploy it on a web server, you can use the build command and deploy it on your preferred web server.

If you have not configured CORS and CSRF properly on SAS Viya, you may have trouble accessing the web application. You should verify that https://localhost:3000 is properly registered in Viya if you are using the development server. For the deployed application, you should verify that the address of the web server is defined if the url is different from the SAS Viya environment url.

The code

I will focus on the src folder content. The files outside of that folder are relevant for NodeJS to install the needed packages and for webpack to properly bundle the files. You can find more information about the syntax of the package.json and webpack.config.js on the web.

The source code is structured into functions, interfaces, styles, an html page and an index.ts file which acts as a wrapper for the application.

As the application is based on TypeScript, we have two files containing the interfaces/types definitions:

interfaces/api.ts which defines the generic interfaces to interact with SAS REST APIs

Select any image to see a larger version.
Mobile users: To view the images, select the "Full" version at the bottom of the page.

interfaces/modules.ts which defines the interfaces specific to the MAS related endpoints

Using these interfaces, we can interact with the REST APIs needed for this application.

In addition to the interfaces, different functions are available to handle specific interactions required by the application.

callViyaApi.ts creates a generic function which can be used to call SAS REST APIs
displayModulesList.ts generates the list of models/modules
displayOutputs.ts generate the section of the application which contains the scoring result
displaySearch.ts display and handles the search functionality
generateInputForm.ts builds the form based on the input variables of a selected model
getMASModules.ts retrieves the list of models published to MAS
moduleSelectionHandler.ts defines the function which is called when the user selects a model from the list
scoreData.ts execute the scoring of the model based on the provided user inputs

I will not explain all the steps in these functions as the code contains a description for nearly every line.

All these functions are consumed by the application entry point which is the index.ts file.

The HTML code for the application is available in the custom.html.

As you can see the custom.html file doesn't contain any link to a JavaScript file. This is the role of webpack to use that file as HTML source and insert the needed code to have a working application. The development server generates the following source code for the application:

The main difference with the content of the custom.html file is the insertion of the script tag for bundle.js on line 8. The bundle.js contains the JavaScript code needed by the application. If you want to look at it, you can, but it is not exactly readable for humans.

Conclusion

Publishing models to SAS Micro Analytic Service (MAS) is one of the techniques to distribute models for scoring. Using REST API endpoints provided by MAS eases the creation of a client application to score data input from a user. It means that with moderate web technologies knowledge, you can, in a few hours, create a web application which allows exploration of the available published models, enter values into a form and submit for scoring. Using this example, you should be able to combine it with other components like SAS VA SDK to analyze the scored data.

If you want more information about building web applications based on SAS REST APIs and SAS VA SDK, please refer to the links below:

If you have ideas about functionalities to add to this application, please don't hesitate to add a comment.

If you would like to contribute, please do it on the Github repository.

Find more articles from SAS Global Enablement and Learning here.