Integrate GenAI into your SAS Visual Analytics report

2 Likes

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.

(view in My Videos)

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.

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.