Generative AI or GenAI is the current hot topic. While you may not have been surprised by the technology itself, you might have been surprised by the speed at which the technology has become mainstream.   In this article, I’m not here to discuss Generative AI but explain how you can integrate GenAI into SAS Visual Analytics reports to increase productivity.  See these articles by my colleagues if you are interested in GenAI:   Generative AI and Large Language Models Demystified by Beth Ebersole   Where does GenAI fit within the AI landscape by Sharad Saxena   The use case   The objective of the application is simplistic though it will demonstrate how easy it is to integrate content generated by a Large Language Model (LLM) into a SAS Visual Analytics report.   In our scenario, we want to generate text that could be used in an email to request a 10% discount on the price of a car. The user selects the car from a list and the model will generate the text asking the sales representative of car dealer to get the discount. The user has the choice to generate the text in different languages. Here is a demo of the application.     The technologies   The different components involved in the demo application are:   A Data-Driven Content object in SAS Visual Analytics A web page A GenAI modelIf you are new to SAS Visual Analytics, you may not know much about the Data-Driven Content object. This object is an object included in SAS Visual Analytics which allows the report designer to integrate an external web page in the report and pass data from and to the report. In other words, you can create a custom object which integrates as a native object into SAS Visual Analytics. For more information about the Data-Driven Content object, please refer to the documentation and the specific considerations when building the web page here.   For the GenAI model, I will use Gemini from Google. You can choose between other providers such as xxx but I chose Gemini because it offers free tokens and provides a good documentation to integrate the model in web applications based on NodeJS and Python. The choice I made is not based on functionalities or quality of the answers. It is purely based on cost for the demo application and my consideration for you to replicate and test on your own.  Gemini allows you to have 60 free requests per minute.   Select any image to see a larger version. Mobile users: To view the images, select the "Full" version at the bottom of the page.   The GenAI model   Gemini has easy to use documentation. Select the "Get started on the Web" section as it provides the needed information and examples to build your first application.   The first step is to generate the API key. Without that key, you will not be able to call the API. Be careful, you can only copy the key when you generate it. It means that you should store it properly to make use of it in your application. If you lose, the key you should create a new one and disable the old key.   This is the only task needed to configure access to the API. The rest will be done in the web application.   The web application   In terms of web development, you have also a lot of options. You can write plain JavaScript or TypeScript or you can use one of the available frameworks. In this case, I choose ViteJS as the development tool. It is really easy to use as a development tool to package the application and build the structure for different frameworks like React. So for this application, we will use the infrastructure provided by ViteJS, the functionalities provided by the React library to build the application and TailwindCSS to improve the layout of the application.   This article will not cover the installation of the different components on your development machine. You can follow the instructions provided by the different components to setup your environment. Installing and configuring ViteJS for React Integrating TailwindCSS into ViteJS   By default, SAS Viya restricts Cross-origin resource sharing. To allow access from your development server running on localhost, you need to configure SAS Viya properly. For more information, please refer to my article: Configure Cross-Origin Resource Sharing for SAS Viya for REST API’s and web developments.   To run the development server using HTTPS protocol, you can install and use this plugin.   The code   If you want to follow along with the following steps, you should have a running ViteJS web application based on React up and running and listening on https://localhost:3000 . TailwindCSS should be configured and SAS Viya should be configured to receive requests from a web server running on https://localhost:3000 .   The first step will be to create an .env.local file and store the API key in it. ViteJS will load the content of this file and look for any environment variables starting with VITE_. One nice aspect of this local environment file is that this file will not be copied to your git repository if you use version control on the project. This is useful as you don’t want to share your API key with others as you may have to pay for usage if you execute more than 60 requests per minute.   The file content should look like this:     You can then create two React components which will be used to display the text for the email and a bar to select the language. These components are stored under src/components in the project.   The documentation in the code should provide enough insights about the code itself.   Email component:     LanguageBar component:     With these two components, we have the needed elements to build the interface:     In order to integrate Gemini in our application we need to install the @google/generative-ai package. This can be done by opening a terminal, navigate to the location where your application has been created in my case: /Users/myuser/gitRepos/DDC_GenAI   And then executing: npm install @google/generative-ai   When done, you can replace the content of the /src/App.tsx file with the following code:     While you can go through the code and read all the comments, you should mainly focus on the fetchData function defined at line 24.   At line 27, the API key is imported and used to create model reference in line 28.   The lines 29 to 31 are used to generate the prompt based on the data received from the report. The prompt is then used on line 33 to call the model.   These fetchdata function is used to generate the text for the email. The remainder of the code is there to display the components and to handle the data received from the SAS Visual Analytics report (lines 49 to 62).   The prompt is generated on the fly using values passed by the SAS Visual Analytics report to the Data-Driven Content object and some arbitrary text defined in the application. The language selection is done in the web application which means that you can customize the prompt as you want.   Here is the prompt passed to the model through the HTTP request.     The report   The web application is now complete. It's time to use it in the report.   Here is the report structure:     For the Data-Driven Content object, the selected variables are:     And the properties of the object are:     The URL contains the information about the web server hosting the web application. In the development phase, it will be set to https://localhost:3000 . As soon as you will deploy the application, it should be adapted to reflect that move. Note that the change should also be done in the CORS configuration of SAS Viya.   Conclusion   Integrating GenAI content into a SAS Visual Analytics report can be achieved with the Data-Driven Content. With a few lines of HTML/JavaScript, you can generate content using Gemini, ChatGPT or any other model. In this example, we have arbitrary requested a 10% discount. This can also be driven by models deployed into MAS using SAS Intelligent Decisioning or SAS Model Studio combined with SAS Model Manager. In that case, the recommended price might be predicted by the model and the information can then be passed to the prompt and used to generate the text.   This text generation is basic as we have seen. You can of course add as many parameters and values as you want to the model prompt. Prompt engineering is a task on his own which should be mastered to get expected results from the GenAI model. It is far beyond the scope of this article. You can find more information about Prompt Engineering on this site.   The code for this article is available in this repository.   You have now the basics. It's up to you to dive more deeply into the GenAI world and imagine your own use case based on your needs.   For more information about Data-Driven Content, please refer to these articles:   Add rating functionality to your Visual Analytics report Using organization chart in your SAS Visual Analytics report Deploy a custom web application in the cloud for Data-Driven Content object in SAS Viya 4 Configure Cross-Origin Resource Sharing for SAS Viya for REST API’s and web developments   If you would like to see other examples about GenAI or have ideas topics around web developments and REST APIs, please don't hesitate to contact me or add a comment to this article. ... View more

In the context of SAS Visual Analytics, there may be instances where you wish to deploy a single report and make it accessible to users via the web. To facilitate this, SAS offers the SAS Report Package. In this article, I will illustrate the process of exporting the package and deploying the report packages in a separate web container. This container can subsequently be deployed in your chosen cloud provider.   What is a SAS report package?   From the SAS documentation:   The report package is a compressed file named report-package-name.sasreportpkg.zip that includes a snapshot of the report, images, style sheets, and data that are needed for a given set of report objects. The package includes all of the data that is needed to render the selected objects, as well as the data that is required to support any actions that are defined between the objects.   How do I deploy a report package? Unzip the content of a report package (report-package-name.sasreportpkg.zip) to a web server that hosts your web page (HTML, CSS, and JavaScript).   As evident from the text, the report package serves as an independent edition of an already existing SAS Visual Analytics report or a component of a report that can be deployed to a web server for viewing. One of its advantages lies in its scalability, allowing for the adjustment of the web server's capacity according to consumption requirements, without affecting the SAS Viya environment.   How do you generate a SAS report package?   You have two options to generate a SAS report package:   Interactively using SAS Visual Analytics In batch using the SAS Viya CLI   Interactively using SAS Visual Analytics   The report package can be exported using the toolbar at the report level.     You can then select the elements from the report you want to export.     Notice that certain elements contain Warning messages. To access further details, simply click on the Warning.   Considering that we will be hosting the report package on our own web server, deselect the Save to SAS content option under Persistence. Once you click the Export button, a message will appear indicating that the package is being generated and the download will commence once the generation process is finished.   In batch using the SAS Viya CLI   While it is acceptable to utilize the interactive option, you might consider automating the export process to minimize user interactions. By employing the SAS Viya CLI, you have the ability to utilize the build-package plugin.     How to deploy SAS report packages?   As stated in the SAS documentation, it is recommended to unzip the report package and host the files on a web server of your choice. If you already have a running web server, simply copy the files into it to complete the process. However, if you prefer to keep the report package(s) separate from other web content, deploying the SAS report package(s) on a standalone web server and then deploying it into your preferred cloud provider may be a better option. In this case, you can store the extracted report package(s) in a specific volume and mount that volume to a web server image when deploying the container into Kubernetes.   Alternatively, you can create an image with the extracted file, store it in a repository, and deploy it from the repository into Kubernetes. This approach allows you to have more control over the build process, as well as the ability to test and validate the image. You can even automate the process using a pipeline in GitHub, GitLab, or BitBucket.   To build the package on your local machine, ensure that Docker is installed. Create a folder on your machine, which will serve as the project's home directory. Within this folder, create a file named "Dockerfile" and a folder named "reports". Extract the SAS report package into the "reports" folder. If you wish to host multiple reports on the same web server, you can extract multiple packages under the "reports" folder. To ensure cleaner URLs when displaying the reports, remove the "sasreportpkg" extension from the unzipped repository.     So far, I have just created the folder structure and extracted two report packages into it.   The next step will be to build the Dockerfile.     Let me provide some insights into the file's content.   Describes the source image that includes a web server, specifically nginx, running on the Alpine Linux operating system. Defines the working directory where nginx stores the files that will be served on the web. To execute specific commands, it switches to the root user. To enhance security, the OS is patched to minimize potential risks. The files from the current folder are copied to the designated WORKDIR location. The permissions on the copied files are modified accordingly. A file named "data.txt" is created, which currently contains a list of folders under the "reports" directory. Although not immediately useful, it will be utilized in a later stage. Information regarding the exposed port is provided.   With the utilization of this Dockerfile, you can now construct a Docker image by executing the subsequent command:     docker build . -t reports-hosting   Executing this command in the directory where the Dockerfile is located will generate an image labeled as "report-hosting". This label can be utilized to launch a container and verify the successful creation of the image. To initiate a container using the "report-hosting" image, the subsequent command is employed, which also exposes port 8080 on http://localhost:8080.   docker run -it -p 8080:8080 reports-hosting   The container will initiate in interactive mode, enabling the display of the web server's log.   By using a URL similar to my example, the report elements that were chosen to be exported can be viewed.  Here are examples using my two exported reports:   http://localhost:8080/reports/Retail%20Insights/ http://localhost:8080/reports/Warranty%20Analysis/   You can now proceed to register the image in a repository for future deployment in Kubernetes. Although this approach is acceptable, it has a minor drawback: the end-user must be aware of the specific URL to access the report. This is where the usefulness of the "data.txt" file, created during the build process, comes into play. Let's explore its significance further.   Displaying the list of available reports   As you are aware, we have stored the extracted report packages on a web server. Consequently, we have the capability to host HTML files as well, which simplifies the utilization of the container.   To proceed, navigate to the directory where the Dockerfile is located and generate a new file called "index.html".   Ensure that the content of this file matches the following format:     Here is the rendered page:     Allow me to provide an explanation of the HTML code.   At line 12, there is a placeholder designated for the available reports. This placeholder will be filled with data by the generateList function. This function uses the data.txt file, which is created during the image build process, to generate a list of links to the reports. The getReportList function, called on line 21, retrieves the list of reports from the data.txt file and creates an array of URLs for the reports.   Updating the image   In the preceding section, you were shown the process of creating a "home page" for the image. Regrettably, these modifications will not be immediately visible in the image. To observe the changes, it is necessary to reconstruct the image and initiate a fresh container. Therefore, it is advisable to halt the currently active container (if not already done). Once completed, proceed with executing the same set of commands as before to construct the image and launch the container.   docker build . -t reports-hosting docker run -it -p 8080:8080 reports-hosting   You have successfully generated a fresh image, and the updated container will showcase the modifications. This is the recommended approach for manually updating the image. Ideally, this entire process can be automated by utilizing a git repository and a CI/CD workflow.   Automating the deployment process   Previously, we have observed that the SAS Viya CLI can be leveraged to extract the report components in batch. Subsequently, we can employ OS commands to unzip the produced report package. Afterward, execute the build command and ultimately publish the code into a repository. Provided below are the necessary commands to accomplish this task:   git clone https://github.com/me/build-report-container.git cd build-report-container sas-viya reports build-package --id cbf97b0a-457d-4b4f-8913-547e0cdf390c --output-file report --output-location /reports unzip -d "/reports/Retail Insights" "Retail Insights.sasreportpkg.zip" rm "Retail Insights.sasreportpkg.zip" git commit -m "Update Retail Insights" git push originmain    The above code assumes that you possess a pre-existing git repository that can be accessed at: https://github.com/me/build-report-container.git   Once the git repository undergoes an update, it can initiate a CI/CD process to verify the code, construct the Docker image, and store it in the GitHub image repository. Furthermore, you have the option to automate the deployment process in your Kubernetes environment. Since these CI/CD processes vary depending on the git provider, I will not delve into the specific steps in this article. However, if you require further details on this topic, you can refer to the documentation provided by GitHub, for GitLab.   Conclusion   Throughout this article, we have demonstrated how SAS report packages can be utilized to showcase SAS Visual Analytics insights without the need to connect to the SAS Viya environment. This opens numerous possibilities in terms of usage and providing reports to any size userbase. In addition to displaying the exported package as-is, I’ve also shown in this article, how you can also personalize the index.html file we have created to seamlessly integrate objects from various reports onto a single page. The extent of customization is virtually limitless.   For a deeper exploration of the available options to interact with the report objects, we recommend referring to articles that delve into the SAS Viya SDKs.   My first development with VA SDK using Node.js Using Node.js to develop with the VA SDK – a deeper dive Embedded Insights with SAS Visual Analytics SDK - SAS Support Communities   The code for this article is available on GitHub.     Find more articles from SAS Global Enablement and Learning here. ... View more

When executing SAS Viya Jobs with a prompt, the input form disappears as soon as you click the submit. This behavior may sometimes not be what you want for your end-users. In this post, I will describe how you can build HTML prompts for a job and display the result of the job execution on the same page. As a side gift, you will also see that building cascading prompts in HTML is an easy task.   SAS Viya Jobs   Before we deep dive into the actual code, I would like to explain what SAS Viya Jobs are. If you are familiar with SAS Stored Processes in SAS 9, the SAS Viya Jobs are the next generation of stored procedures for SAS Viya. It provides the same kind of functionalities as SAS 9 Stored Processes, but designed for the SAS Viya platform and cloud consumption. Behind the scenes, SAS Viya Jobs are using SAS Compute Servers and Compute Contexts started on-demand or made reusable to improve performance. For more information about implementing reusable SAS Compute Servers, please refer to this article.   When building SAS Viya Jobs, you can design it to prompt the consumers to provide input to the SAS code. You have different options to code your prompts:   XML JSON (new in SAS Viya LTS 2023.10) HTML   XML and JSON can be used to define metadata for your prompt. SAS will then generate the prompts which are rendered to the end-user. The look an feel of the prompts will be similar to SAS Studio's Tasks and Steps. This is most probably the best option if you are fine with the predefined layout and visuals provided by SAS.   On the other side, HTML is the best choice if you want to customize the user experience and use specific UI elements and colors. This is the option we will use in this article as it will provide the needed functionalities to build a custom web form and to display the result on the same page.   Interactive web forms   When building HTML forms, you often want to select data which are then used to filter another prompt. This functionality, often called cascading prompts, can be created easily in SAS Viya Jobs using JavaScript. Your first thought might be: “I don’t know JavaScript how should I proceed?” Don’t worry, SAS provides a JavaScript bundle to help you in the development of the HTML form. You only need to add the following script tags in the head section of your HTML page:   <script src="/SASJobExecution/resources/sap/ui/thirdparty/jquery.js"></script> <script src="/SASJobExecution/resources/dynamic.min.js"></script>   These two scripts will be in charge for loading the needed JavaScript functions to build interactivity. As you can see, they are using relative paths which means that they are hosted in your SAS Viya environment and you don't need to load the content yourself.   After adding these two scripts, you should initialize the function when the HTML page loads. This can be done with the following code:   <body onload="SASDynamic.init()">   The setup is now complete and you will be able to define prompts and dependencies. For example, you can retrieve the list of car brands from the SASHELP.CARS table using the following drop-down box:   <label for="cars">Choose a brand:</label> <select name="make" id="make" data-colname="make" data-library="SASHELP" data-table="CARS"> </select>   data-library specifies the name of the input library. Note that the library should be predefined, such as a global CAS library, for the Compute Context of the Computer Server. data-table references the name of the input table. data-colname provides the name of the source column.   When rendered in a browser with some styling attributes (or JavaScript), the following dropdown will be displayed:   Select any image to see a larger version. Mobile users: To view the images, select the "Full" version at the bottom of the page.   If you want to define other drop-down boxes which are dependent on the car brand and type, this can be done using HTML code similar to this:   <label for="model">Choose a model:</label> <select name="model" id="model" data-colname="model" data-library="SASHELP" data-table="CARS" data-uses="make, type"></select>   If you compare this code with the previous, you will notice that we defined another property on the select element: data-uses. It can be used to defined which fields in the form should be used to filter the list of models.   If you want more information about defining dynamic HTML prompts, please refer to the documentation.   Creating the job   Now that you have a better understanding about interactive HTML forms for the SAS Viya Jobs, it is time to build the job.   In SAS Studio, click on New and select Definition under Job. In the Program pane, type the following code:   proc print data=sashelp.cars; where model = "&model"; run;   As you can see, the job will print the observations from SASHELP.CARS which have the value of model macro variable as model. The code is simple but it serves the purpose of the article. It shows how you can pass parameters from the form to the SAS code. The macro variable name should match the name of the input field in your HTML form.   In our case, the form is defined like this:     Displaying the form results into this:     At the top of the HTML code for the form, you see that we have three hidden input fields. The _program provides the name of the program to be executed which is retrieved from the URL of the job. The two _action fields are defining that the job should execute and display a wait message while executing the code.   After the closing form tag, we should add the following code:   <iframe id="results"></iframe>   This iframe tag will host the results from the job execution. In our case, it will display the results of the execution of the proc print defined for the job.   In order to display nicely on the screen, I've defined a style tag in the HTML and a title for the web page. The complete code looks like this:     In SAS Studio, you can add the code clicking the right pane to Associate a Form.     In the HTML Form pane, you can type the code about or retrieve it from this location.   Turning into a single page application   If you save the job at this point and retrieve the URL to execute it, you will notice that the job will execute but the form will disappear to display the results.     This is not what you would expect as I mentioned above that the result will be displayed in the iframe.   To display the result in the iframe, you need to add some JavaScript in the page. At the bottom of the HTML page just before the closing body tag, add the following code:   <script>     $('form').on('submit', (event) => {         event.preventDefault()         const urlParams = $('form').serialize()         const url = `/SASJobExecution/?${urlParams}`         $('#results').attr('src', url)     }) </script>   This code is executed when the submit button of the form is pressed. We are using jQuery to attach an event listener to the form element.   In the code, we retrieve the form fields and transform them into url parameters which are then passed to the url for the SAS Job Execution.   Finally, the last line defines the src property for the HTML element which has an idea of results. In our case, the element is the iframe.   There is one line of the code which I've not covered so far. The event.preventDefault() code prevents the normal processing of the HTML form. Usually, when you press the submit button of an HTML form, the input fields are cleared out and the form executes the action defined into it. In our case, this would lead to calling the job with the parameters and clear the form, but it will force the complete page to be refreshed with the results. Adding the event.preventDefault(), we explicitly tell the browser not to execute the form as it should but take the subsequent actions instead, which ultimately in our case means: set the src attribute for the iFrame. As a result, the job will execute and display the result in the iFrame as you can see in this demo.     Conclusion   Building interactive HTML forms for a SAS Viya Job is a simple task. With basic HTML coding experience and the SAS provided scripts, you can create dependent prompts which are using SAS data. If you want to improve the layout of the HTML page, you can write your own CSS styles or rely on other libraries like BootStrap. The benefit of preventing the default behavior of the submit button is to build a single page application which gives the opportunity to the end user to execute code using different input values and staying in the same page.   If you are interested in knowing more about the SAS Viya Jobs, please refer to the following articles:   Create a SAS Viya Job with a prompt using Task Prompts Create a SAS Viya Job with a prompt using HTML Prompts Add rating functionality to your Visual Analytics report     Find more articles from SAS Global Enablement and Learning here. ... View more

You have options when it comes to deploying custom web applications which you want to be consumed inside a Data-Driven Content object in SAS Visual Analytics. Depending on the requirements, you can decide to deploy the web application:   Inside a container in your SAS Viya environment. See the article Deploy a custom web application in the cloud for Data-Driven Content object in SAS Viya 4 Store the files and expose them in an existing web server. Using GitHub Pages. (this article!)   Find more articles from SAS Global Enablement and Learning here.   As you may know from reading my articles, developing web applications to enhance SAS Visual Analytics functionalities is a robust capability. With some knowledge about web programming (HTML, JavaScript, CSS), you can create web pages which can be embedded inside SAS Visual Analytics and interact with other objects. This integration functionality has been available since the early version of SAS Viya in the form of the Data-Driven Content object.In SAS Viya 3.5, it was possible to deploy the web applications on the web server included in the SAS Viya deployment. In later releases of Viya deployed using Kubernetes, this process is a bit more complex. As mentioned in the introduction, you can deploy the web pages on a specific container and include the container in your Viya deployment as I described in this . You have also the option to deploy the application in a pre-built container designed for that specific purpose using the Data-Driven Content Server. You can also host the files in an existing web server in your infrastructure and adapt the security configuration of SAS Viya to allow access from that external server.When discussing with consultants and customers, it appears that deploying a specific container in SAS Viya environment is more challenging than it was in SAS Viya 3.5. The main reason is: security. While the risk of deploying a few HTML, JavaScript and CSS files into an existing web server is minimal, building and deploying a container requires more caution and security checks. Of course, even when deploying the web pages inside a web server, you should make sure there is no security holes into your application, but deploying a container requires:   Validation of the original container Security checks on the web application itself Enforcement of security rules in the deployment process   These tests can be automated, but they require more time and efforts.   This is where using GItHub pages can be handy!   What are GitHub Pages?   The marketing message on pages.github.com is clear:   Select any image to see a larger version. Mobile users: To view the images, select the "Full" version at the bottom of the page.       You can host your web projects directly in a GitHub repository and deploy it automatically when you push your changes. Here is the development and deployment process flow.   Create a GitHub repository Clone the repository Write the code of your application Commit the changes to your code Push the code to the GitHub repository Check the resulting web application   As you see in these steps, there is no mention about deploying the application nor build a container and deploy it. This is the “magic” about using GitHub Pages. GitHub handles the deployment for you behind the scenes. This means, as a developer, that you can focus on your application and forget about the deployment as it is automated.     By default, the repositories published on GitHub Pages are public.  If you have a GitHub Enterprise account this can be changed and the published repositories will be private by default, but this configuration can be changed to allow public access.   How do you deploy your application on GitHub Pages?   As mentioned in the previous section, you can create a repository, write your code, commit changes and push your code to GitHub like you do for any project hosted on GitHub.   The only difference will be that your repository should include a special file explaining how to build the application and where the static content should be copied.   To do this, create a folder named .github/workflows in your repository. This is the default location for the GitHub Actions.   In the folder, you can create a file with .yml extension and give it the name you want for example: deploy_pages.yml   When done, write the following code in the deploy_pages.yml file:       This YAML file may seem a bit complex at first sight, but it describes all the steps needed to build the application. In this case, the application is based on Vite JavaScript framework. This means that the application relies on npm to install the dependencies and build the dist folder which contains the static content to be rendered for the application.   The process to create the file and the configuration needed in your application are for example described on the Vite website. I copied the file from the website and adapted the name of the branch to indicate that the master has to be used to monitor changes and trigger the workflow.   While writing the application for this article, I had also to add a base variable in the vite.config.js file:       This change was required because the application is accessible from: https://xavierbizoux.github.io/git_pages. Defining the base path helps Vite to configure the URLs properly when building the application.   If you are using other frameworks or other tools to build your application, stay cool as there is plenty of tutorials on the web to help you deploy your application under GitHub Pages.   The last step I had to perform was to tell GitHub that the workflow should be executed when a push action happens on the repository.       If you need more information about GitHub Actions, you can find more details on the GitHub website.   Configuring SAS Viya   So far, we have been talking about the deployment of the application inside GitHub Pages. There is also a specific configuration needed within SAS Viya. This configuration is for the Cross Origin Resource Sharing (CORS). By default, SAS Viya is configured to allow access only from pages which are hosted on the same domain. If CORS is not configured properly, the web browser will not be allowed to send data from the Data-Driven Content object to https://xavierbizoux.github.io/git_pages as it would be considered as a security risk. To allow these communications to happen, you should configure the sas.commons.web.security.cors definition as indicated in the following article:   All about CORS and CSRF for developing web applications with the SAS Visual Analytics SDK   On my environment, I configured the property like this:     This means that any web page which is hosted on https://xavierbizoux.github.io:80 will be accessible from SAS Viya and can be used inside a Data-Driven Content object.     What about security?   When deploying your application on GitHub Pages, by default, this application will be accessible by anybody knowing the URL. At first sight, you might be worried about security. Of course, you should not store sensitive data in your HTML or JavaScript, but this is a good practice for any web page (not specific to applications accessing SAS hosted data).   In our case, the applications is designed to be used inside the Data-Driven Content object. This means there is no need to store credentials in the application, as it will rely on the authentication mechanism provided by SAS Viya. Running the application outside of SAS Visual Analytics makes no sense. If the application is not embedded in SAS Visual Analytics, the application will not receive data from SAS. The data which is used in a Data-Driven Content object is passed by SAS Visual Analytics to the object which means if you are not allowed to see the data in SAS Visual Analytics, these data will not be available to you inside the web page.   The same applies for other SAS Viya components. If your application accesses the CAS server through REST APIs or calls SAS Job Execution to execute SAS Viya Jobs, your web application will have to handle authentication if it is used outside of SAS Visual Analytics. Without authentication, accessing CAS data or executing jobs will not be allowed (unless you configured Guest authentication and anybody would be allowed to execute a job for example).   Conclusion   When it comes to deploying your web application to be consumed inside a Data-Driven Content object within SAS Visual Analytics, you have many options. Most probably the simplest approach is to rely on GitHub Pages to host the files, but most importantly to hide the deployment process from the developers. Using CI/CD process eases the delivery of the application modifications.   Of course, this option requires some configuration inside SAS Viya, but it gives the opportunity to quickly test and prototype web applications. The downside of this is that you are relying on GitHub Pages availability. When deploying your final version of the application you may have to rethink your deployment process to may be include the application in its own container and deploy that container to production.   If you want more information about this deployment topic, you can refer to these articles:   All about CORS and CSRF for developing web applications with the SAS Visual Analytics SDK Deploy a custom web application in the cloud for Data-Driven Content object in SAS Viya 4 How to customize data export in SAS Visual Analytics? Using organization chart in your SAS Visual Analytics report The Data-driven Content Server for SAS Visual Analytics!   The code for this blog containing a simple application can be found on GitHub.   Find more articles from SAS Global Enablement and Learning here. ... View more

In the previous article of this series, I explained how you can load data into the CAS server and display these data into a Dash web application. If you are a data scientist, you may also like to use models and score data while using your web application. In this article, I will explain how you can score data using a model published to SAS Micro Analytics Server.   If you want to use the code from this article, you can download it from this GitHub repository. The model When scoring data, you first need to have a model to score data against it. For this example, I created a Gradient Boosting model to calculate the price of a car based on its characteristics. The model in this case has been created using SAS Visual Analytics. If you prefer, you can create the model in Python or R and you can use the sasctl package to register the model into SAS Viya. Once registered, the model can then be published to SAS Micro Analytics Server (MAS). This server is designed to execute model scoring in parallel at “atomic” level. By atomic level, I mean one observation at a time. This is ideal when you want to integrate the scoring in a web application as you can get information from the web application and score it based on those inputs. This is exactly what we want to achieve in this article!   When the model is published to MAS, it is then accessible using REST APIs. While it is totally fine to directly use the REST APIs as documented, you can also use sasctl package to call the MAS endpoints.   The SASCTL package for Python If you are a data scientist developing models in Python and loading these models into SAS Model Manager, you may already know about the sasctl package for Python. The package was mainly designed to load open-source models into SAS Viya and to handle their deployment into production using the Python language and SAS Viya REST APIs. To serve that purpose, the developers had to create "services" which can be used for model management related tasks, but also for core tasks like handling files and folders as well as authentication. This means that if you are Python developer, this package reduces the time needed to develop a solution as many of the SAS Viya REST APIs endpoints are implemented. And if a specific endpoint is not available, the package also provides a technique to make direct calls to SAS Viya REST APIs which are not defined as a service.   Here is a list of the available services: CASManagement Concepts DataSources Files Folders MicroAnalyticScore ModelManagement ModelPublish ModelRepository Projects Relationships ReportImages Reports SASLogon SentimentAnalysis TextCategorization TextParsing   All these services implement the basic CRUD operations: Create, Read, Update, Delete. Each service also implements more specific methods like listing the CAS libraries, executing scoring into Micro Analytics Server (MAS), analyzing sentiment, etc.     The application In this article, we will not start from scratch. In the previous article, we had a working application and most of the code will still be valid for this article. We will basically add a functionality to the existing application.   The final application will look like this:   Select any image to see a larger version. Mobile users: To view the images, select the "Full" version at the bottom of the page.     Compared to the previous application, we are adding this card on the right-hand side which displays the result of the model scoring. The input data for the model scoring comes from the selection done in the graph above. Technically it is scoring data similar to the ones in the card displayed on left-hand side. It would have been possible to mix the “real” data and the predicted one, but it is better to separate the two types of information to reduce confusion   The code The code for this application is available in this repository in the file named: dash_sasctl.py. You can compare the content of that file with dash_swat.py if you want to see what was added.   In the top part of the code, the import statements have been added as well as the username and password variables. The app.layout has also been modified to introduce the placeholder for the new component.     At the bottom of the file, you will find the callback function which is responsible for populating the score component.     The score_data function retrieves information about the selected model and make when the graph is clicked (lines 97 and 98). When done a dataframe containing only the filtered data is created (lines 99 and 100).   To execute the model, we need to pass data to it. The model requires all the information available in the dataframe except for Make, Model, Invoice, Origin, MSRP, Length which are excluded from the list created between lines 101 and 106.   The last part of the code (lines 107 and 108) is where sasctl is used to create a session and execute the scoring based on the inputs stored in the list variable. When the scoring result is received from MAS, an HTML card is created (lines 109 to 121).camta to display the make and model information in the card header. The card body contains the suggested price which is in fact the result of the model scoring.   The demo     Conclusion In the previous article, you have seen the basics of building a Dash application which loads data into CAS and displays the loaded data into a graph. The application also displayed the detailed data when the user makes a selection into the graph.   In this article, you see also how you can use models deployed to MAS to enrich the application with scored data.   In less than 100 lines of python code, we have a working web application with interactions with SAS Viya (CAS and MAS). You can of course build much more complex applications using your preferred language: Python. As you have seen, we can integrate SWAT and SASCTL packages provided by SAS into your Python application. Using this approach, you can also integrate other packages and enrich your application with other functionalities based on your needs. You could for example use this approach to register your python models into SAS Viya, score some data and validate that the results of your model executed directly in python and into MAS give the same results. But this is up to you to imagine your next application!   Find more articles from SAS Global Enablement and Learning here. ... View more

SAS Visual Analytics gives the power to data analysts to explore data and build interactive dashboards. Using SAS Viya SDKs, you can integrate the visualizations created in SAS Visual Analytics in your custom web applications. In this series of articles, I will cover a few other tools and languages which can be used to visualize. Whether your preferred language is Python or R, you can also visualize and interact with data stored into CAS or score data or even execute SAS code.   In a previous articles (see list below), I’ve shown how you can create a custom web application using the SAS SDK for Visual Analytics, but if you are data scientist using Python everyday and you are familiar with Dash, then let me walk through you can source your visualizations using data from SAS Viya’s CAS.   An approach to SAS Portal in Viya My first development with VA SDK using Node.js Using Node.js to develop with the VA SDK – a deeper dive Deeper integration of SAS Viya SDK content into your custom web application   In this article, I will explain how you can build an interactive web page which uses data stored in CAS and the application will be developed in Python using the popular Dash package developed by Plotly and the SWAT package.   About Dash   Dash is Python package used to create visualizations mainly used for Machine Learning and data science web apps. The framework is built on top of Plotly.js, React and Flask. While Plotly and React are used for the user interface, Flask is used as the backend web server. Dash is available as an open-source framework, but also has an enterprise platform. In this article, the open-source framework will be used. If you want more information about the differences between the enterprise and the open-source versions, please refer to Plotly. You can also find a lot of example applications on this page.     Using Dash   If you are not familiar with Dash, here are the basic concepts. The framework provides a variety of UI components which can be used to build the layout of your web application.   The simplest Dash application would be:     As you can see in the sample code, an app variable is created using Dash and then elements are added to the application layout.   On line 10, the application is started using the app.run() method/function. Starting the application will open a browser page and display the “Hello World” message.   If you want to add interactivity, you can add an HTML input element and a callback function as seen in the code below.     The app.layout contains different elements:   a text element: "Say hello to:" a Dash Core Component (dcc) for input with an id and other parameters an HTML button to update the message an HTML header tag to display the hello message   In addition to these visuals, we have a callback function. The @callback requires at least one Output and one Input parameter in that order. The Output stores the information about the target element for the callback function. The Input stores the information about the element triggering the callback function. A State element can be used to pass information from an element which doesn't trigger the callback as in our case the input element. All the callback parameters are in the form: (element_id, element_property). You can pass as many inputs, outputs, and states as you can to the callback function.   The updateMessage function is the callback function which gets as parameters the Input and the State information. As soon the Input will be updated, the function will be called and update the Output.    After saving the code, your application will behave like this:     These are the fundamentals of using Dash. If you want more information about it, please refer to this tutorial. For more information about the different components, please refer to the official documentation.   About SWAT   SAS Scripting Wrapper for Analytics Transfer (SWAT) package exists for Python and R languages. It acts as an interface to the Cloud Analytic Services (CAS) engine . It can be used to load and analyze data using the CAS engine which can process large amounts of data on premise or on the cloud provider of your choice.   For those who are familiar with Pandas package, the SWAT package features SASDataFrames which are a subclass of pandas.dataframes. This means that what you can do with a pandas.DataFrame will also work with SASDataFrame. The only difference is that SASDataFrame objects contain extra metadata familiar to SAS users.   Using SWAT   When using the SWAT package, the first step will be to create a connection with the CAS server. This can be done using the following code:     In this case, the authentication will be done using an authinfo file which is stored in $HOME/.authinfo (running on MacOS). If you want to store the file in another location, you can specify the path by passing an authinfo parameter to the function. The authinfo parameter will define where the authinfo file is stored.   The url parameter defines the URL of the CAS server. In my case: https://server.demo.sas.com/cas-shared-default-http   You should also pass the SSL certificate location in order to connect over HTTPS protocol. This certificate can be exported from a browser connected to your SAS Viya environment. If you want to know how it can be done on your browser, please refer to this link.   If you prefer not to use an authinfo file, SWAT provides other techniques like passing a token parameter or passing username/password parameters. For more information about Making a connection.   As soon as you have created a connection, you can use that connection to perform all the actions you may want like loading data into CAS or execute CAS actions to manipulate data on the CAS server. If you want to read more about using SWAT and CAS, please refer to this article series from Peter Styliadis.     Our application   Now that you have a basic understanding of the different components, let's see what can be using them.       The application layout is similar to many dashboards. We have a header bar displaying the application name. Below the header bar a drop-down box to select a region in this case. We then have a bar chart displaying the sum of invoices by brand which is filtered by the selected region. When the user clicks on an element in the bar, it displays the information about the selected car in the bottom portion of the screen.   The UI components used for the different elements are: dbc.NavbarSimple dbc.Select dcc.Graph dbc.Card, dbc.CardHeader, dbc.CardBody, dbc.CardFooter dbc.ListGroup, dbc.ListGroupItem Other components like dbc.Container, dbc.Row and dbc.Col are used to arrange the different elements on the screen.   As you may have noticed, we have a lot of components starting with dbc which stands for dash_bootstrap_components. These are specific components coming with Dash which can be used to display elements which have the same look and feel as Bootstrap based applications. If you are new to web development, you may not know about Bootstrap which is widely used web library for building websites. One of the benefits of Bootstrap is to standardize the usage of CSS classes to ease the development of web applications across different browser sizes. If you want more information about the Dash Bootstrap Components, please refer to this documentation. For more information about Bootstrap in general, please visit this website.   At the beginning of the code below the imports, we have the information about the connection to the CAS server. We then create a CAS session and upload data stored on an external website into CAS. You could also use data loaded on the CAS server, but I wanted to demonstrate how easy it is to load a csv file into CAS using the SWAT package.     Besides the UI components, we have also the callback functions.   The first callback function filters the graph when the selected origin changes.     If you are familiar with pandas.DataFrames, you will notice that the SASDataFrame (tbl) implements the query method. The to_frame converts the SASDataFrame into a pandas.DataFrame.   We then return a bar chart which is provided by plotly.express.   The next callback creates a card element on the fly and displays it. Even if it was possible to reuse the dataframe from the previous callback, I made the choice to query the CASTable to demonstrate the functionality. It would also have been possible to use another CAS table to populate the card element.     Conclusion   Building and sharing visualizations is an import part of today’s data specialists tasks. If you are familiar with Python and pandas, you can create interactive dashboards in a few lines of code. This article demonstrates the basic functionalities of the SWAT package and doesn’t make use of the full capacity of the CAS server. Extending on the techniques described in this article you can query large tables stored into CAS and display the results using your preferred language: Python. You can also integrate data from different data sources or execute scoring based on selections done by the user.   In the next article, I will demonstrate how you can score data as part of this web application.   Stay tuned!   If you want to use the code from this article, you can download it from this GitHub repository. ... View more

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.     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: Creating a React web app using SAS Viya An approach to SAS Portal in Viya Deeper integration of SAS Viya SDK content into your custom web application 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. ... View more